feat(navigate) navigation available and most usefull features)

.gitignore

@@ -1,2 +1,3 @@
 .idea/*
 .idea
+config.php

components/homepage/line.php

@@ -1,9 +1,20 @@
-<div>
+<div class="card mb-4">
-    <img src="/assets/lines/m.svg" width="64px" class="img-fluid mb-3">
+    <div class="card-body">
-    <img src="/assets/lines/<?php echo $line; ?>.svg" width="64px" class="img-fluid mb-3">
+        <div class="d-flex align-items-center">
+            <img src="/assets/lines/m.svg" width="64px" class="img-fluid mb-3">&nbsp;&nbsp;
+            <img src="/assets/lines/<?php echo $lineId; ?>.svg" width="64px" class="img-fluid mb-3">
+        </div>
 
-    <?php
+        <?php
-        $stop_name = "Champs elysées";
+        $favoriteStops = getFavorites($lineId);
-        include 'components/homepage/stop.php';
+    
-    ?>
+        foreach ($favoriteStops as $stop) {
-</div>
+            $stop_name = getStopName($stop['stopId']);
+            include 'components/homepage/stop.php';
+            if (count($favoriteStops) > 1) {
+                echo '<hr class="mt-4">';
+            }
+        }
+        ?>
+    </div>
+</div>

components/homepage/main.php

@@ -1,10 +1,72 @@
 <?php
 
-    $line = '2';
+function getStopName($stopId) {
-    include 'components/homepage/line.php';
+    $json = file_get_contents(__DIR__ . '/../../data/stops.json');
+    $result = array_filter(json_decode($json, true), function($item) use ($stopId) {
+        return $item['fields']['mode'] === 'METRO' && $item['fields']['id_ref_zda'] === $stopId;
+    });
+        
+    return reset($result)['fields']['nom_zda'];
+}
+
+function getFavorites($lineId) {
+    global $conn;
+    try {
+        $query = $conn->prepare("SELECT stopId FROM favorites WHERE lineId = ?");
+        $query->execute([$lineId]);
+        $result = $query->fetchAll(PDO::FETCH_ASSOC);
+        
+        return $result;
+    } catch(PDOException $e) {
+        return [];
+    }
+}
+
+$query = $conn->prepare("SELECT DISTINCT lineId FROM favorites WHERE userId = ?");
+$query->execute([$_SESSION['user_id']]);
+$lineIds = $query->fetchAll(PDO::FETCH_COLUMN);
+
 ?>
-<hr>
+
+<div class="px-4 my-5 text-center">
+    <h1 class="display-5 fw-bold">Subway Schedule</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">Displaying your favorite stations and lines below</p>
+      
+    </div>
+</div>
+
 <?php
-    $line = '8';
+foreach ($lineIds as $lineId) {
     include 'components/homepage/line.php';
-?>
+}
+
+if (empty($lineIds)) {
+    echo '<div class="alert alert-info text-center" role="alert">You havent added any favorites yet.</div>';
+}
+?>
+
+
+<script>
+function removeFavorite(stopId, lineId) {
+
+    var formData = new FormData();
+    formData.append('stopId', stopId);
+    formData.append('lineId', lineId);
+    formData.append('action', 'remove');
+
+    fetch('/endpoints/updateFavorite.php', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            location.reload();
+        }
+    })
+    .catch(error => {
+        console.log(error);
+    });
+}
+</script>

components/homepage/stop.php

@@ -1,18 +1,56 @@
+<?php
+
+$response = file_get_contents('https://prim.iledefrance-mobilites.fr/marketplace/stop-monitoring?MonitoringRef=STIF:StopArea:SP:' . $stop['stopId'] . ':', 
+false, stream_context_create([
+    "http" => [
+        "header" => "apiKey: " . $idfm_api_key
+    ]
+]));
+$data = json_decode($response, true);
+
+$directions = [];
+
+if (isset($data['Siri']['ServiceDelivery']['StopMonitoringDelivery'][0]['MonitoredStopVisit'])) {
+    foreach ($data['Siri']['ServiceDelivery']['StopMonitoringDelivery'][0]['MonitoredStopVisit'] as $visit) {
+        $vehicleJourney = $visit['MonitoredVehicleJourney'];
+        if (strpos($vehicleJourney['OperatorRef']['value'], '.' . $lineId . '.' . $lineId) !== false) {
+            $direction = $vehicleJourney['DirectionName'][0]['value'];
+            $expectedArrival = $vehicleJourney['MonitoredCall']['ExpectedArrivalTime'];
+            $expectedDeparture = $vehicleJourney['MonitoredCall']['ExpectedDepartureTime'];
+            
+            $departureTime = date('H:i', strtotime($expectedArrival . ' +2 hours'));
+
+            if (!isset($directions[$direction])) {
+                $directions[$direction] = [];
+            }
+            if (count($directions[$direction]) < 2) {
+                $directions[$direction][] = $departureTime;
+            }
+        }
+    }
+}
+
+$finalDirections = [];
+foreach ($directions as $direction => $times) {
+    if (count($times) == 2) {
+        $finalDirections[] = [
+            'direction' => $direction,
+            'next_departure' => $times[0],
+            'following_departure' => $times[1]
+        ];
+    } elseif (count($times) == 1) {
+        $finalDirections[] = [
+            'direction' => $times[0],
+            'next_departure' => $times[0],
+            'following_departure' => '-'
+        ];
+    }
+}
+?>
+
 <div>
-    <p class="h5"><?php echo $stop_name; ?></p>
+    <p class="h5 d-inline"><?php echo $stop_name; ?></p>
-    <?php
+    <a id="remove-<?php echo $stop['stopId'] . "-" . $lineId ?>" class="btn btn-danger btn-sm mb-2" onclick="removeFavorite(<?php echo $stop['stopId'] . ',' . $lineId; ?>)"><i class="fa fa-trash"></i></a>
-    $directions = [
+</div>
-        [
+
-            'direction' => 'Château de Vincennes',
+<?php include 'stop_table.php'; ?>
-            'next_departure' => '05:32',
-            'following_departure' => '05:41'
-        ],
-        [
-            'direction' => 'Porte de Pantin',
-            'next_departure' => '05:40',
-            'following_departure' => '05:49'
-        ],
-    ];
-    include 'stop_table.php';
-    ?>
-</div>

components/homepage/stop_table.php

@@ -3,18 +3,23 @@
         <thead>
             <tr>
                 <th>Direction</th>
-                <th>Prochain départ</th>
+                <th>Next train</th>
-                <th>Prochain suivant</th>
+                <th>Following departure</th>
             </tr>
         </thead>
         <tbody>
-            <?php foreach ($directions as $direction): ?>
+            <?php 
+            if (empty($finalDirections)) {
+                echo '<tr><td colspan="3">This train no longer takes passengers</td></tr>';
+            }
+            foreach ($finalDirections as $direction): 
+            ?>
             <tr>
-                <td><?php echo $direction['direction']; ?></td>
+                <td><?php echo htmlspecialchars($direction['direction']); ?></td>
-                <td><?php echo $direction['next_departure']; ?></td>
+                <td><?php echo htmlspecialchars($direction['next_departure']); ?></td>
-                <td><?php echo $direction['following_departure']; ?></td>
+                <td><?php echo htmlspecialchars($direction['following_departure']); ?></td>
             </tr>
             <?php endforeach; ?>
         </tbody>
     </table>
-</div>
+</div>

components/navigate/main.php

@@ -7,36 +7,98 @@ function getStops($line) {
         return $item['fields']['mode'] === 'METRO' && $item['fields']['indice_lig'] === "$line";
     });
     return $result;
-}   
+}
+
+function isFavorite($userId, $stopId, $lineId) {
+    global $conn;
+    $stmt = $conn->prepare("SELECT * FROM favorites WHERE userId = ? AND stopId = ? AND lineId = ?");
+    $stmt->execute([$userId, $stopId, $lineId]);
+    return $stmt->rowCount() > 0;
+}
 
 ?>
 
-<h2>Lignes de Métro</h2>
+<div class="px-4 my-5 text-center">
-<div class="row">
+    <h1 class="display-5 fw-bold">Metro lines</h1>
-    <?php for ($i = 1; $i <= 14; $i++): ?>
+    <div class="col-lg-6 mx-auto">
-        <div class="col-3 mb-3">
+      <p class="lead mb-4">Explore available Paris metro lines in the IDFM network</p>
-            <div class="card h-100">
+      
-                <div class="card-body">
+    </div>
-                    <a data-bs-toggle="modal" href="#modal<?= $i ?>">
+</div>
-                        <img src="/assets/lines/<?= $i ?>.svg" alt="Logo Ligne <?= $i ?>" class="img-fluid" style="padding: 10px;">
+
-                    </a>
+<div class="card">
-                    <div class="modal fade" id="modal<?= $i ?>" tabindex="-1">
+    <div class="card-body">
-                        <div class="modal-dialog modal-lg">
+        <div class="row">
-                            <div class="modal-content">
+            <?php for ($i = 1; $i <= 14; $i++): ?>
-                                <div class="modal-header">
+                <div class="col-2 mb-3">
-                                    <h5 class="modal-title">Stations de la ligne <?= $i ?></h5>
+                    <div class="card h-100">
-                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                        <div class="card-body">
-                                </div>
+                            <a data-bs-toggle="modal" href="#modal<?= $i ?>">
-                                <div class="modal-body">
+                                <img src="/assets/lines/<?= $i ?>.svg" alt="Logo Ligne <?= $i ?>" class="img-fluid" style="padding: 10px;">
-                                    <?php
+                            </a>
-                                    include 'components/navigate/stop_list.php';
+                            <div class="modal fade" id="modal<?= $i ?>" tabindex="-1">
-                                    ?>
+                                <div class="modal-dialog modal-lg">
+                                    <div class="modal-content">
+                                        <div class="modal-header">
+                                            <h5 class="modal-title">Stations de la ligne <?= $i ?></h5>
+                                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                                        </div>
+                                        <div class="modal-body">
+                                            <?php $stations = getStops($i); ?>
+                                            <div class="row">
+                                                <?php include 'components/navigate/stop_list.php'; ?>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-            </div>
+                <?php if ($i % 6 === 0): ?>
+                    </div><div class="row">
+                <?php endif; ?>
+            <?php endfor; ?>
         </div>
-    <?php endfor; ?>
+    </div>
-</div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    document.querySelectorAll('.add-stop, .remove-stop').forEach(function(button) {
+        button.addEventListener('click', function() {
+            var stopId = this.getAttribute('data-station-id');
+            var lineId = this.getAttribute('data-line-id');
+            var action = this.classList.contains('add-stop') ? 'add' : 'remove';
+            var buttonElement = this;
+
+            fetch('/endpoints/updateFavorite.php', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: 'stopId=' + stopId + '&lineId=' + lineId + '&action=' + action
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    if (action === 'add') {
+                        buttonElement.classList.remove('add-stop', 'btn-success');
+                        buttonElement.classList.add('remove-stop', 'btn-danger');
+                        buttonElement.textContent = 'Retirer';
+                    } else {
+                        buttonElement.classList.remove('remove-stop', 'btn-danger');
+                        buttonElement.classList.add('add-stop', 'btn-success');
+                        buttonElement.textContent = 'Ajouter';
+                    }
+                    buttonElement.removeEventListener('click', arguments.callee);
+                    buttonElement.addEventListener('click', arguments.callee);
+                } else {
+                    console.error('Error:', data.error);
+                }
+            })
+            .catch(error => console.error('Error:', error));
+        });
+    });
+});
+</script>

components/navigate/stop_list.php

@@ -1,10 +1,7 @@
 <div class="row">
     <?php
-    
-    $stations = getStops($i);
-
     $half = ceil(count($stations) / 2);
-    $chunks = array_chunk($stations, ceil(count($stations) / 2), true);
+    $chunks = array_chunk($stations, $half, true);
     ?>
 
     <?php foreach ($chunks as $chunk): ?>
@@ -20,7 +17,13 @@
                 <?php foreach ($chunk as $station): ?>
                     <tr>
                         <td><?php echo htmlspecialchars($station['fields']['nom_zda']); ?></td>
-                        <td class="text-end"><button class="btn btn-success">Ajouter</button></td>
+                        <td class="text-end">
+                            <?php if (isFavorite($_SESSION['user_id'], $station['fields']['id_ref_zda'], $i)): ?>
+                                <button class="btn btn-danger remove-stop" data-station-id="<?= $station['fields']['id_ref_zda'] ?>" data-line-id="<?= $i ?>">Retirer</button>
+                            <?php else: ?>
+                                <button class="btn btn-success add-stop" data-station-id="<?= $station['fields']['id_ref_zda'] ?>" data-line-id="<?= $i ?>">Ajouter</button>
+                            <?php endif; ?>
+                        </td>
                     </tr>
                 <?php endforeach; ?>
                 </tbody>

config_example.php

@@ -0,0 +1,7 @@
+<?php
+$idfm_api_key = '';
+$db_host = '127.0.0.1';
+$db_name = 'subwaySchedule';
+$db_user = '';
+$db_password = '';
+?>

endpoints/updateFavorite.php

@@ -0,0 +1,25 @@
+<?php
+session_start();
+include '../services/db.php';
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['stopId'], $_POST['lineId'], $_POST['action'])) {
+    $userId = $_SESSION['user_id'];
+    $stopId = $_POST['stopId'];
+    $lineId = $_POST['lineId'];
+    $action = $_POST['action'];
+
+    try {
+        if ($action === 'add') {
+            $stmt = $conn->prepare("INSERT INTO favorites (userId, stopId, lineId) VALUES (?, ?, ?)");
+            $stmt->execute([$userId, $stopId, $lineId]);
+        } elseif ($action === 'remove') {
+            $stmt = $conn->prepare("DELETE FROM favorites WHERE userId = ? AND stopId = ? AND lineId = ?");
+            $stmt->execute([$userId, $stopId, $lineId]);
+        }
+        echo json_encode(['success' => true]);
+    } catch (PDOException $e) {
+        echo json_encode(['error' => $e->getMessage()]);
+    }
+    exit();
+}
+?>

services/db.php

@@ -1,9 +1,9 @@
 <?php
 
 try {
-    $conn = new PDO("mysql:host=127.0.0.1", "root", "lynqo");
+    $conn = new PDO("mysql:host=$db_host", $db_user, $db_password);
-    $conn->exec("CREATE DATABASE IF NOT EXISTS subwaySchedule");
+    $conn->exec("CREATE DATABASE IF NOT EXISTS $db_name");
-    $conn->exec("USE subwaySchedule");
+    $conn->exec("USE $db_name");
 
     $conn->exec("CREATE TABLE IF NOT EXISTS users (
         id INT AUTO_INCREMENT PRIMARY KEY,
@@ -14,6 +14,14 @@ try {
         is_admin BOOLEAN NOT NULL DEFAULT 0
     )");
 
+    $conn->exec("CREATE TABLE IF NOT EXISTS favorites (
+        id INT AUTO_INCREMENT PRIMARY KEY,
+        userId INT NOT NULL,
+        stopId INT NOT NULL,
+        lineId INT NOT NULL,
+        FOREIGN KEY (userId) REFERENCES users(id)
+    )");
+
 
 
 } catch(PDOException $e) {

services/stop_service.php

@@ -1,5 +0,0 @@
-<?php
-
-
-
-?>

structure/footer.php

@@ -1 +1,2 @@
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+<script src="https://kit.fontawesome.com/440009238d.js" crossorigin="anonymous"></script>

structure/header.php

@@ -11,4 +11,4 @@
   }
   ?>
 </head>
-<body>
+<body style="display:none;">

structure/main.php

@@ -1,6 +1,8 @@
 <?php 
 session_start();
 
+include 'config.php';
+
 $page = basename($_SERVER['PHP_SELF']);
 if (!isset($_SESSION['user_id']) && $page !== 'login.php' && $page !== 'register.php') {
     header("Location: login.php");
@@ -16,10 +18,17 @@ include 'services/db.php';
     
 ?>
 
-<main class="container mt-5">
+<main class="container mt-4">
     <?php include $content; ?>
 </main>
 
 <?php include 'structure/footer.php'; ?>
+
+<script>
+    window.addEventListener('load', function() {
+        document.body.style.display = 'block';
+    });
+</script>
+
 </body>
 </html>

structure/navbar.php

@@ -1,35 +1,35 @@
-<?php
+<?php if (isset($_SESSION['user_id'])) : ?>
-
-if (isset($_SESSION['user_id'])) {
-  echo '
   <header>
     <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <div class="container-fluid">
+      <div class="container-fluid">
-      <a class="navbar-brand" href="/">Subways</a>
+        <a class="navbar-brand" href="/">
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <img src="assets/logo/dark.png" alt="" width="64">
-      <span class="navbar-toggler-icon"></span>
+        </a>
-      </button>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <div class="collapse navbar-collapse" id="navbarNav">
+          <span class="navbar-toggler-icon"></span>
-      <ul class="navbar-nav">
+        </button>
-        <li class="nav-item">
+        <div class="collapse navbar-collapse" id="navbarNav">
-        <a class="nav-link active" aria-current="page" href="/">Accueil</a>
+          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-        </li>
+            <li class="nav-item">
-        <li class="nav-item">
+              <a class="nav-link <?php echo ($_SERVER['REQUEST_URI'] == '/') ? 'active' : ''; ?>" href="/">Home</a>
-        <a class="nav-link" href="/navigate.php">Parcourir</a>
+            </li>
-        </li>
+            <li class="nav-item">
-        <li class="nav-item">
+              <a class="nav-link <?php echo ($_SERVER['REQUEST_URI'] == '/navigate.php') ? 'active' : ''; ?>" href="/navigate.php">Discover</a>
-        <a class="nav-link" href="#">Mon compte</a>
+            </li>
-        </li>
+            <li class="nav-item">
-        <li class="nav-item">
+              <a class="nav-link" href="#">Account</a>
-        <a class="nav-link" href="/logout.php">Déconnexion</a>
+            </li>
-        </li>
+          </ul>
-      </ul>
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
-      <div class="ms-auto">
+          <li class="nav-item">
-        <a class="btn btn-primary" href="#">Gestion des utilisateurs</a>
+              <a class="nav-link" href="/logout.php"><i class="fa fa-sign-out"></i></a>
+            </li>
+          </ul>
+          <div class="d-flex">
+            <a class="btn btn-primary" href="#">Admin</a>
+          </div>
+        </div>
       </div>
-      </div>
-    </div>
     </nav>
-  </header>';
+  </header>
-}
+<?php endif; ?>
-?>