From e31e433bdc3a2c6950bb2bcf5a85e22777f11d4324b3512eb54808329bfd8284 Mon Sep 17 00:00:00 2001
From: Jan Kiljanski <jan.jozef.kiljanski@gmail.com>
Date: Fri, 31 May 2024 22:48:31 +0200
Subject: [PATCH] Added first version of index.html file

---
 index.html | 191 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 191 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8afb8a1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OpenStreetMap with GTFS Toolbar</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <style>
+        body, html {
+            height: 100%;
+            margin: 0;
+        }
+        #map {
+            height: 100%;
+            width: 100%;
+        }
+        .sidebar {
+            height: 100%;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 250px;
+            background-color: #f8f9fa;
+            border-right: 1px solid #dee2e6;
+            padding-top: 20px;
+        }
+        .content {
+            margin-left: 250px;
+            height: 100%;
+        }
+        .modal-body {
+            max-height: 60vh;
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body>
+    <div class="sidebar">
+        <div class="container">
+            <h5 class="mt-4">Options</h5>
+            <div class="list-group">
+                <input type="file" id="fileInput" class="d-none" webkitdirectory mozdirectory>
+                <button class="list-group-item list-group-item-action" onclick="document.getElementById('fileInput').click();">Load GTFS from computer</button>
+                <button class="list-group-item list-group-item-action" onclick="importGTFS()">Import existing GTFS</button>
+                <div id="currentGTFS">
+                    <h6>Current GTFS</h6>
+                    <!-- Route IDs will be inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="content">
+        <div id="map"></div>
+    </div>
+
+    <!-- Modal for displaying trips -->
+    <div class="modal fade" id="tripsModal" tabindex="-1" aria-labelledby="tripsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="tripsModalLabel">Trips</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <table class="table table-bordered" id="tripsTable">
+                        <!-- Trips data will be inserted here -->
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bootstrap JS, Popper.js, and jQuery -->
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+    <script>
+        // Initialize the map centered on Toruń, Poland
+        var map = L.map('map').setView([53.0138, 18.5984], 13);
+        
+        // Load OpenStreetMap tiles
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+        }).addTo(map);
+
+        let routesData = [];
+        let tripsData = [];
+
+        document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
+
+        function handleFileSelect(event) {
+            const files = event.target.files;
+            const routesFile = Array.from(files).find(file => file.name === 'routes.txt');
+            const tripsFile = Array.from(files).find(file => file.name === 'trips.txt');
+            
+            if (routesFile && tripsFile) {
+                // Read and parse the routes file
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    routesData = parseCSV(e.target.result);
+                    displayRouteIds(routesData);
+                };
+                reader.readAsText(routesFile);
+
+                // Read and parse the trips file
+                const tripsReader = new FileReader();
+                tripsReader.onload = function(e) {
+                    tripsData = parseCSV(e.target.result);
+                };
+                tripsReader.readAsText(tripsFile);
+            } else {
+                alert('Please select a valid GTFS folder containing routes.txt and trips.txt.');
+            }
+        }
+
+        function parseCSV(data) {
+            const lines = data.split('\n');
+            const headers = lines[0].split(',');
+            return lines.slice(1).map(line => {
+                const values = line.split(',');
+                return headers.reduce((object, header, index) => {
+                    object[header] = values[index];
+                    return object;
+                }, {});
+            });
+        }
+
+        function displayRouteIds(routes) {
+            const currentGTFS = document.getElementById('currentGTFS');
+            const routeList = document.createElement('div');
+            routeList.className = 'list-group';
+            routes.forEach(route => {
+                const routeItem = document.createElement('button');
+                routeItem.className = 'list-group-item list-group-item-action';
+                routeItem.textContent = route.route_id;
+                routeItem.onclick = () => showTrips(route.route_id);
+                routeList.appendChild(routeItem);
+            });
+            currentGTFS.appendChild(routeList);
+        }
+
+        function showTrips(routeId) {
+            const trips = tripsData.filter(trip => trip.route_id === routeId);
+            const tripsTable = document.getElementById('tripsTable');
+            tripsTable.innerHTML = '';
+
+            if (trips.length > 0) {
+                const headers = Object.keys(trips[0]);
+                const headerRow = document.createElement('tr');
+                headers.forEach(header => {
+                    const th = document.createElement('th');
+                    th.textContent = header;
+                    headerRow.appendChild(th);
+                });
+                tripsTable.appendChild(headerRow);
+
+                trips.forEach(trip => {
+                    const row = document.createElement('tr');
+                    headers.forEach(header => {
+                        const cell = document.createElement('td');
+                        cell.textContent = trip[header];
+                        row.appendChild(cell);
+                    });
+                    tripsTable.appendChild(row);
+                });
+            } else {
+                const noDataRow = document.createElement('tr');
+                const noDataCell = document.createElement('td');
+                noDataCell.colSpan = Object.keys(trips[0] || {}).length;
+                noDataCell.textContent = 'No trips found for this route.';
+                noDataRow.appendChild(noDataCell);
+                tripsTable.appendChild(noDataRow);
+            }
+
+            $('#tripsModal').modal('show');
+        }
+
+        function importGTFS() {
+            alert("Import existing GTFS clicked");
+            // Logic to import existing GTFS would go here
+        }
+    </script>
+</body>
+</html>
