Added first version of index.html file
This commit is contained in:
Jan Kiljanski
parent
f7fec88fdb
commit
e31e433bdc
191
index.html
Normal file
191
index.html
Normal file
|
|
@ -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">×</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>
|
||||
Loading…
Reference in New Issue
Block a user