192 lines
7.3 KiB
HTML
192 lines
7.3 KiB
HTML
<!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">×</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>
|