bug fixes from server testing, route previews, slight routing improvements

1 files changed, 51 insertions, 9 deletions

diff --git a/dashboard_website/static/js/dashboard.js b/dashboard_website/static/js/dashboard.js
index a816327..4ab8670 100644
--- a/dashboard_website/static/js/dashboard.js
+++ b/dashboard_website/static/js/dashboard.js
@@ -10,8 +10,9 @@ var unvisited_clues_m = L.layerGroup([]); // subset of all clues - unvisited clu
 var destination_clues_m = L.layerGroup([]); // clues bikers are currently destined for
 var bikes_m = L.layerGroup([]); // bike markers
 var routes_m = L.layerGroup([]); // polyline routes
+var p_routes_m = L.layerGroup([]); //
 
-var homemarker, homebase, clues, clue_rels, bikes, routes, previewmarker;
+var homemarker, homebase, clues, clue_rels, bikes, routes, p_routes, previewmarker;
 
 var latest_timestamp = -1; // initially -1, otherwise set to value given by server in last successful info update
 
@@ -75,7 +76,7 @@ function filterClues(text){
     }
 }
 
-function drawRoute(route_coords_osrm, team_color) {
+function drawRoute(route_coords_osrm, team_color, layer) {
     //osrm lat/long are swapped
     for (var i = 0; i < route_coords_osrm.length; i++){ 
         var t = route_coords_osrm[i][1];
@@ -83,25 +84,44 @@ function drawRoute(route_coords_osrm, team_color) {
         route_coords_osrm[i][0] = t;
     }
     var route = new L.polyline(route_coords_osrm, {color: team_color});
-    routes_m.addLayer(route);
+    layer.addLayer(route);
 }
 
 function drawRoutes() {
     routes_m.clearLayers();
+    p_routes_m.clearLayers();
+    for (var i = 0; i < p_routes['clusters'].length; i++){
+        if(p_routes['clusters'][i].length > 0){
+            var color;
+            var shade = i*35+100;
+            var r = shade;
+            var g = shade; // grey previews
+            var b = shade;
+            color= "rgb("+r+","+g+","+ b+")"; 
+            console.log(color);
+            drawRoute(p_routes['clusters'][i], color, p_routes_m);
+        }
+    }
+    for (var i = 0; i < p_routes['individual_routes'].length; i++){
+        if(p_routes['individual_routes'][i].length > 0){
+            drawRoute(p_routes['individual_routes'][i], 'white', p_routes_m);
+        }
+    }
     for (var i = 0; i < routes['clusters'].length; i++){
         if(routes['clusters'][i].length > 0){
             var color;
-            var r = Math.floor(Math.random() * 155+100);
+            var shade = i*50+100;
+            var r = shade;
             var g = 0; // no greens -- avoid yellow
-            var b = Math.floor(Math.random() * 155+100);
+            var b = shade-50;
             color= "rgb("+r+","+g+","+ b+")"; 
             console.log(color);
-            drawRoute(routes['clusters'][i], color);
+            drawRoute(routes['clusters'][i], color, routes_m);
         }
     }
     for (var i = 0; i < routes['individual_routes'].length; i++){
         if(routes['individual_routes'][i].length > 0){
-            drawRoute(routes['individual_routes'][i], 'yellow');
+            drawRoute(routes['individual_routes'][i], 'yellow', routes_m);
         }
     }
 }
@@ -313,7 +333,7 @@ function requestLatestInfo(){
         // process routes
         if(json['routes_changed']){
             routes = json['routes'];
-            console.log(routes);
+            p_routes = json['preview_routes'];
             drawRoutes();
         }
         // process bikes
@@ -360,7 +380,8 @@ function requestLatestInfo(){
             updateClueStats();
         }
 
-        document.getElementById("routeinfo").innerHTML = json['calculating_routes'] ? "ROUTE INFO | <span style='color:orange'>(Calculating...)</span>" : "ROUTE INFO";
+        document.getElementById("routeinfo").innerHTML = json['calculating_routes'] ? "ROUTE INFO | <span style='color:orange'>(Calculating... <a href='#' onclick='stopRouting()'>(Force Stop)</a>)</span>" : "ROUTE INFO";
+        if(json['routes_to_commit'])document.getElementById("routeinfo").innerHTML += "| <a href='#' onclick='commitRoutes()'>Commit preview routes</a>"
     }
     fetch(host+'/getLatestInfo', {
         method: "POST",
@@ -373,6 +394,24 @@ function requestLatestInfo(){
     .then((json) => handleLatestInfo(json));
 }
 
+function stopRouting(){
+    var formData = new FormData();
+    formData.append("command", "stopGenerating");
+    fetch(host+'/controls', {
+        method: "POST",
+        body: formData
+    }).then( res => requestLatestInfo());
+}
+
+function commitRoutes(){
+    var formData = new FormData();
+    formData.append("command", "commitRoutes");
+    fetch(host+'/controls', {
+        method: "POST",
+        body: formData
+    }).then( res => requestLatestInfo());
+}
+
 function onDeadlineChange(element){
     var team_index = parseInt(element.id.split("_")[1]);
     var new_deadline = element.value;
@@ -426,10 +465,13 @@ window.onload = function() {
     map.addLayer(unvisited_clues_m);
     map.addLayer(bikes_m);
     map.addLayer(routes_m);
+    map.addLayer(p_routes_m);
     var layerControl = L.control.layers(null,null,{collapsed:false});
     layerControl.addOverlay(unvisited_clues_m, "Unvisited Clues");
     layerControl.addOverlay(visited_clues_m, "Visited Clues");
     layerControl.addOverlay(bikes_m, "Bikes");
+    layerControl.addOverlay(routes_m, "Routes");
+    layerControl.addOverlay(p_routes_m, "Route Previews");
     layerControl.addTo(map);
     requestLatestInfo();
 }