178 lines
7.3 KiB
HTML
178 lines
7.3 KiB
HTML
<!--
|
|
This file is part of transport-accessibility.
|
|
Copyright (C) 2024 Janek Kiljanski, Johannes Randerath
|
|
|
|
transport-accessibility is free software: you can redistribute it and/or modify it under the terms of the
|
|
GNU General Public License as published by the Free Software Foundation, either version 3
|
|
of the License, or (at your option) any later version.
|
|
|
|
transport-accessibility is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
|
|
without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
|
See the GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License along with transport-accessibility.
|
|
If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
{% extends "base.html" %}
|
|
{% load static %}
|
|
{% block content %}
|
|
<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>
|
|
<div class="currentGTFS">
|
|
<h5 id="currentGTFS">Current GTFS</h5>
|
|
<h6 id="newShape">
|
|
<button class="list-group-item list-group-item-action" onclick="drawNewShape()">Draw New Shape</button>
|
|
<button class="list-group-item list-group-item-action" onclick="addNewShape()">Add New Shape</button>
|
|
<button class="list-group-item list-group-item-action" onclick="addNewStop()">Add New Stop</button>
|
|
</h6>
|
|
<h6 id="chosenShape">
|
|
Chosen Shape
|
|
<!-- Shape options will be inserted here -->
|
|
</h6>
|
|
<h6 id="currentRoutes">
|
|
Current GTFS
|
|
<!-- Route IDs will be inserted here -->
|
|
</h6>
|
|
</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 src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
<script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
|
|
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
|
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
|
|
<!-- Scripts with helper functions -->
|
|
|
|
<!-- <script src="sidebar.js"></script>
|
|
<script src="shapes_on_map.js"></script>
|
|
<script src="parsing_files.js"></script> -->
|
|
|
|
<script src="{%static 'pt_map/sidebar.js'%}"></script>
|
|
<script src="{%static 'pt_map/shapes_on_map.js'%}"></script>
|
|
<script src="{%static 'pt_map/parsing_files.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);
|
|
|
|
// Holder for data imported from the server.
|
|
let imported_data = null;
|
|
let routesData = [];
|
|
let tripsData = [];
|
|
let stopsData = [];
|
|
let stopTimesData = [];
|
|
// Variable set to true if a new shape is being added.
|
|
let addingNewShape = false;
|
|
let currentlyAddedPolyline = null;
|
|
// Holder of currently inspected shape ID value
|
|
let currentShapeIDs = {};
|
|
currentShapeIDs["routes"] = [];
|
|
currentShapeIDs["stops"] = [];
|
|
// Create empty dictionary for shapes to be displayed on the map.
|
|
let shapes = {};
|
|
shapes["routes"] = {};
|
|
shapes["stops"] = {};
|
|
// Total number of newly defined Shapes
|
|
// In a mature version the indexing has to be changed.
|
|
let numNewShapes = 0;
|
|
// Current layer that can be saved or discarded
|
|
let currentLayer = null;
|
|
|
|
// Setting up the drawing control
|
|
|
|
// FeatureGroup to store layers created by drawing
|
|
var drawnItems = new L.FeatureGroup();
|
|
map.addLayer(drawnItems);
|
|
|
|
// Set up the drawing control
|
|
var drawControl = new L.Control.Draw({
|
|
position: 'topright', // Adds the drawing control on the right
|
|
edit: {
|
|
featureGroup: drawnItems
|
|
},
|
|
draw: false
|
|
});
|
|
|
|
// Polyline drawer that will be used for drawing on the map
|
|
let polylineDrawer = new L.Draw.Polyline(map, drawControl.options.polyline);
|
|
|
|
document.getElementById('fileInput').addEventListener('change', handleFileSelect, false);
|
|
|
|
// Add the map click event listener
|
|
map.on('click', onMapClick);
|
|
|
|
// Function to write "Hello World!" to the console when the map is clicked
|
|
function onMapClick(event) {
|
|
// Check if the click event is not on a shape
|
|
if (!event.originalEvent.target.closest('.leaflet-interactive')) {
|
|
cancelShapeEdit();
|
|
}
|
|
}
|
|
|
|
function importGTFS() {
|
|
// Import stops
|
|
shapes["stops"] = JSON.parse('{{ stops|safe }}');
|
|
for (const id in shapes["stops"]) {
|
|
//console.log("id: ", id);
|
|
let stop_lat = shapes["stops"][id]["stop_lat"];
|
|
let stop_lon = shapes["stops"][id]["stop_lon"];
|
|
if (stop_lat == undefined || stop_lon == undefined) {
|
|
continue;
|
|
}
|
|
else {
|
|
//console.log("stop_lat: ", stop_lat);
|
|
//console.log("stop_lon: ", stop_lon);
|
|
//console.log(shapes["stops"][stop["stop_id"]]);
|
|
addClickablePoint([stop_lat, stop_lon], id);
|
|
}
|
|
}
|
|
|
|
routes = JSON.parse('{{ routes|safe }}');
|
|
console.log("routes: ", routes);
|
|
timetable = JSON.parse('{{ timetable|safe }}');
|
|
console.log("timetable: ", timetable);
|
|
|
|
}
|
|
</script>
|
|
{% endblock %}
|