From b90acfcebe214b8ecd1800d634157a3d2b6d368bdb0ffc6dc2d298c7e759b2e9 Mon Sep 17 00:00:00 2001 From: Jan Kiljanski Date: Tue, 11 Jun 2024 23:04:22 +0200 Subject: [PATCH] Development of the drawing mechanism, displaying stops with the data imported from the database. --- TODO.md | 4 +- .../pt_map/static/pt_map/shapes_on_map.js | 43 +++++++++++++++---- .../pt_map/static/pt_map/sidebar.js | 35 ++++----------- .../pt_map/templates/map.html | 25 +++++++++-- 4 files changed, 68 insertions(+), 39 deletions(-) diff --git a/TODO.md b/TODO.md index 86978fb..9a84ec0 100644 --- a/TODO.md +++ b/TODO.md @@ -4,7 +4,9 @@ - Add documentation. Sphinx? ## Frontend -- Add TODOs +- Finish the AddNewShape mechanism - remove the polyline if canceled (or clicked on the map) (the problem is either in the cancelShapeEdit or in the addClickablePoint function), create save option, add OSM routing to connect the chosen bus stops instead of straight lines (the addClickablePoint and addNewShape functions). +- Write the addNewStop function (it should add a stop in the place clicked on the map) (a name to the stop should be given). +- Allow for the inspection of plans for the chosen lines from the backend. ## Backend - Serve data to views in an intuitive way. As an object of a custom class? diff --git a/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js b/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js index fe5336c..88847d4 100644 --- a/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js +++ b/transport_accessibility/pt_map/static/pt_map/shapes_on_map.js @@ -33,8 +33,19 @@ function addClickablePoint(latlng, point_id) { // Add click event listener to marker marker.on('click', function (e) { - let point_ids = [point_id]; - highlightShapes(point_ids, "stops"); + if (addingNewShape == true) { + currentShapeIDs["stops"].push(point_id); + if (currentShapeIDs["stops"].length>1) { + const latlngs = currentShapeIDs["stops"].map(stopId => { + const stop = shapes["stops"][stopId]; + return [stop.stop_lat, stop.stop_lon]; + }); + currentlyAddedPolyline.remove(); + currentlyAddedPolyline = L.polyline(latlngs, { color: 'blue', weight: 5 }).addTo(map); + } + } + shape_ids = [point_id]; + highlightShapes(shape_ids, "stops"); console.log('Point clicked:', point_id); }); } @@ -57,15 +68,21 @@ function highlightShapes(shape_ids, type) { } } - if (currentShapeIDs["stops"].length > 0) { - for (const id of currentShapeIDs["stops"]) { - console.log("stop id: ", id); - console.log("shapes[id]: ", shapes[id]); - if (shapes["stops"][id] && shapes["stops"][id]["marker"]) { - shapes["stops"][id]["marker"].setStyle({ color: 'blue' }); + console.log("addingNewShape: ", addingNewShape); + console.log("currentShapeIDs['stops'] ", currentShapeIDs["stops"]); + if (addingNewShape == false) { + if (currentShapeIDs["stops"].length > 0) { + console.log("Shapes to mark blue:"); + for (const id of currentShapeIDs["stops"]) { + console.log("stop id: ", id); + //console.log("shapes['stops'][id]['marker']: ", shapes["stops"][id]['marker']); + if (shapes["stops"][id] && shapes["stops"][id]["marker"]) { + shapes["stops"][id]["marker"].setStyle({ color: 'blue' }); + } } } } + if (type == "routes") { for (const id of shape_ids) { @@ -98,4 +115,14 @@ function makeShapesBlue() { } } } + + // Reset previous polylines to blue + if (currentShapeIDs["stops"].length > 0) { + for (const id of currentShapeIDs["stops"]) { + if (shapes["stops"][id] && shapes["stops"][id]["marker"]) { + shapes["stops"][id]["marker"].setStyle({ color: 'blue' }); + } + } + } + currentShapeIDs = {routes: [], stops: []}; } \ No newline at end of file diff --git a/transport_accessibility/pt_map/static/pt_map/sidebar.js b/transport_accessibility/pt_map/static/pt_map/sidebar.js index 999dde6..be79f67 100644 --- a/transport_accessibility/pt_map/static/pt_map/sidebar.js +++ b/transport_accessibility/pt_map/static/pt_map/sidebar.js @@ -170,6 +170,7 @@ function addNewStop() { function addNewShape() { shapeStops = []; cancelShapeEdit(); + addingNewShape = true; // Create a container div for the buttons const buttonContainer = document.createElement('div'); @@ -240,33 +241,6 @@ function addNewShape() { // Append the button container to the chosenShape element chosenShape.appendChild(buttonContainer); - - polylineDrawer.enable(); - - // Add created polylines to the map - map.on(L.Draw.Event.CREATED, function (event) { - var layer = event.layer; - currentLayer = layer; - drawnItems.addLayer(layer); - }); - - // Add created shapes to the map and handle the polyline - map.on(L.Draw.Event.CREATED, function (event) { - var layer = event.layer; - - // Check if the drawn shape is a polyline - if (layer instanceof L.Polyline && !(layer instanceof L.Polygon)) { - // Disable the drawing control - map.removeControl(drawControl); - - saveButton.style.backgroundColor = 'green'; - saveButton.style.color = 'white'; // Ensure the text is readable - saveButton.setAttribute('ready-to-save', 'true'); - } else { - // Add the drawn layer to the map if it's not a polyline - drawnItems.addLayer(layer); - } - }); } function displayShapeOptions(shapeId, shapes) { @@ -480,6 +454,13 @@ function displayShapeOptions(shapeId, shapes) { function cancelShapeEdit () { // Define reference to the chosenShape field const chosenShape = document.getElementById('chosenShape'); + addingNewShape = false; + console.log("currentlyAddedPolyline: ", currentlyAddedPolyline); + if (currentlyAddedPolyline !== null) { + currentlyAddedPolyline.remove(); + currentlyAddedPolyline = null; + } + console.log("currentlyAddedPolyline: ", currentlyAddedPolyline); // Remove any existing routing control (if needed) if (window.routingControl) { diff --git a/transport_accessibility/pt_map/templates/map.html b/transport_accessibility/pt_map/templates/map.html index 4c8509e..f5467bf 100644 --- a/transport_accessibility/pt_map/templates/map.html +++ b/transport_accessibility/pt_map/templates/map.html @@ -132,6 +132,9 @@ 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"] = []; @@ -178,12 +181,28 @@ } function importGTFS() { - stops = JSON.parse('{{ stops|safe }}'); + // 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); - alert("Import existing GTFS clicked"); - // Logic to import existing GTFS would go here }