Development of the drawing mechanism, displaying stops with the data imported from the database.

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?

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];
+        if (addingNewShape == true) {
-        highlightShapes(point_ids, "stops");
+            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,16 +68,22 @@ function highlightShapes(shape_ids, type) {
         }
     }
 
-    if (currentShapeIDs["stops"].length > 0) {
+    console.log("addingNewShape: ", addingNewShape);
-        for (const id of currentShapeIDs["stops"]) {
+    console.log("currentShapeIDs['stops'] ", currentShapeIDs["stops"]);
-            console.log("stop id: ", id);
+    if (addingNewShape == false) {
-            console.log("shapes[id]: ", shapes[id]);
+        if (currentShapeIDs["stops"].length > 0) {
-            if (shapes["stops"][id] && shapes["stops"][id]["marker"]) {
+            console.log("Shapes to mark blue:");
-                shapes["stops"][id]["marker"].setStyle({ color: '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) {
             // Highlight the clicked polyline
@@ -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: []};
 }

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) {

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
-            routes = JSON.parse('{{ routes|safe }}');
+            shapes["stops"] = JSON.parse('{{ stops|safe }}');
-            timetable = JSON.parse('{{ timetable|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
         }
     </script>
 </body>