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>
-    <img src="/assets/lines/m.svg" width="64px" class="img-fluid mb-3">
-    <img src="/assets/lines/<?php echo $line; ?>.svg" width="64px" class="img-fluid mb-3">
+<div class="card mb-4">
+    <div class="card-body">
+        <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
-        $stop_name = "Champs elysées";
-        include 'components/homepage/stop.php';
-    ?>
-</div>
+        <?php
+        $favoriteStops = getFavorites($lineId);
+
+        foreach ($favoriteStops as $stop) {
+            $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';
-    include 'components/homepage/line.php';
+function getStopName($stopId) {
+    $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>
-    <?php
-    $directions = [
-        [
-            'direction' => 'Château de Vincennes',
-            '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>
+    <p class="h5 d-inline"><?php echo $stop_name; ?></p>
+    <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>
+</div>
+
+<?php include 'stop_table.php'; ?>

components/homepage/stop_table.php

@@ -3,18 +3,23 @@
         <thead>
             <tr>
                 <th>Direction</th>
-                <th>Prochain départ</th>
-                <th>Prochain suivant</th>
+                <th>Next train</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 $direction['next_departure']; ?></td>
-                <td><?php echo $direction['following_departure']; ?></td>
+                <td><?php echo htmlspecialchars($direction['direction']); ?></td>
+                <td><?php echo htmlspecialchars($direction['next_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="row">
-    <?php for ($i = 1; $i <= 14; $i++): ?>
-        <div class="col-3 mb-3">
-            <div class="card h-100">
-                <div class="card-body">
-                    <a data-bs-toggle="modal" href="#modal<?= $i ?>">
-                        <img src="/assets/lines/<?= $i ?>.svg" alt="Logo Ligne <?= $i ?>" class="img-fluid" style="padding: 10px;">
-                    </a>
-                    <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
-                                    include 'components/navigate/stop_list.php';
-                                    ?>
+<div class="px-4 my-5 text-center">
+    <h1 class="display-5 fw-bold">Metro lines</h1>
+    <div class="col-lg-6 mx-auto">
+      <p class="lead mb-4">Explore available Paris metro lines in the IDFM network</p>
+
+    </div>
+</div>
+
+<div class="card">
+    <div class="card-body">
+        <div class="row">
+            <?php for ($i = 1; $i <= 14; $i++): ?>
+                <div class="col-2 mb-3">
+                    <div class="card h-100">
+                        <div class="card-body">
+                            <a data-bs-toggle="modal" href="#modal<?= $i ?>">
+                                <img src="/assets/lines/<?= $i ?>.svg" alt="Logo Ligne <?= $i ?>" class="img-fluid" style="padding: 10px;">
+                            </a>
+                            <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 = '';
+?>