workington in progress

1 files changed, 81 insertions, 13 deletions

diff --git a/dashboard_website/static/js/dashboard.js b/dashboard_website/static/js/dashboard.js
index 43c07f3..a816327 100644
--- a/dashboard_website/static/js/dashboard.js
+++ b/dashboard_website/static/js/dashboard.js
@@ -34,19 +34,20 @@ var homeIcon = new baseIcon({iconUrl: 'static/img/marker-home.png'}),
 var teamIcons = [   unvisitedIcon,
                     new baseIcon({iconUrl: 'static/img/marker-icon-orange.png'}),
                     new baseIcon({iconUrl: 'static/img/marker-icon-red.png'}),
-                    new baseIcon({iconUrl: 'static/img/marker-icon-green.png'}),
+                    new baseIcon({iconUrl: 'static/img/marker-icon-blue.png'}),
                     new baseIcon({iconUrl: 'static/img/marker-icon-yellow.png'}) ];
-var teamIconsReq = [    disabledIconReq,
+var teamIconsReq = [    unvisitedIconReq,
                         new baseIcon({iconUrl: 'static/img/marker-icon-orange-req.png'}),
                         new baseIcon({iconUrl: 'static/img/marker-icon-red-req.png'}),
-                        new baseIcon({iconUrl: 'static/img/marker-icon-green-req.png'}),
+                        new baseIcon({iconUrl: 'static/img/marker-icon-blue-req.png'}),
                         new baseIcon({iconUrl: 'static/img/marker-icon-yellow-req.png'}) ];
 
     team1IconReq = new baseIcon({iconUrl: 'static/img/marker-icon-orange.png'}),
     team2IconReq = new baseIcon({iconUrl: 'static/img/marker-icon-red.png'}),
     team3IconReq = new baseIcon({iconUrl: 'static/img/marker-icon-green.png'}),
     team4Icon = new baseIcon({iconUrl: 'static/img/marker-icon-yellow.png'});
-var bikeIcons = {'ACTIVE' : activeBikeIcon, 'INACTIVE' : inactiveBikeIcon}
+var bikeIcons = {'ACTIVE' : activeBikeIcon, 'INACTIVE' : inactiveBikeIcon, 'DISABLED' : inactiveBikeIcon}
+var bikeStatusOpacities = {"ACTIVE" : 1.0, "INACTIVE" : 0.75, "DISABLED" : 0.0};
 
 function zoomToBike(team_name){
     map.panTo(bikes[team_name]['marker'].getLatLng());
@@ -57,14 +58,23 @@ function zoomToClue(clue_name){
 function previewZoom(){
     var long = parseFloat(document.getElementById("new_clue_longitude").value);
     var lat = parseFloat(document.getElementById("new_clue_latitude").value);
-    console.log(long);
-    console.log(document.getElementById("new_clue_longitude").value);
     if (!isNaN(long) && !isNaN(lat)){
         previewmarker.setLatLng([lat, long]);
         previewmap.panTo(previewmarker.getLatLng());
     }
 }
 
+function filterClues(text){
+    for(var i = 0; i < clues.length; i++){
+        var clue = clues[i]['clue_name'];
+        if((text == "") || (clue.includes(text))){
+            clue_rels[clue].setOpacity(1.0);
+        } else {
+            clue_rels[clue].setOpacity(0.25);
+        }
+    }
+}
+
 function drawRoute(route_coords_osrm, team_color) {
     //osrm lat/long are swapped
     for (var i = 0; i < route_coords_osrm.length; i++){ 
@@ -75,6 +85,7 @@ function drawRoute(route_coords_osrm, team_color) {
     var route = new L.polyline(route_coords_osrm, {color: team_color});
     routes_m.addLayer(route);
 }
+
 function drawRoutes() {
     routes_m.clearLayers();
     for (var i = 0; i < routes['clusters'].length; i++){
@@ -98,20 +109,23 @@ function drawRoutes() {
 function updateBikeStatus(){
     var table = document.getElementById("bike-teams-table");
     table.innerHTML = '';
+    var index = 1;
     for (const [key, value] of Object.entries(bikes)) {
         var name = key;
         var bike = value;
         var row = document.createElement("tr");
+        if(bike['team_status'] == "DISABLED")row.classList.add("disabled-class");
         var namecell = document.createElement("td"); namecell.innerHTML = "<a href=\"#\" onclick=\"zoomToBike('"+name+"')\">"+name+"</a>";
-        var statuscell = document.createElement("td"); statuscell.innerHTML = "<span "+((bike['team_status'] == "ACTIVE")? "style=\"color:lightgreen\"" : "") +">" + bike['team_status'] + " ("+parseInt(bike['time_since_last_contact']).toString()+"s)</span>";
+        var statuscell = document.createElement("td"); statuscell.innerHTML = "<a href='#' onclick=\"toggleBikeEnable('"+index.toString()+"')\" "+((bike['team_status'] == "ACTIVE")? "style=\"color:lightgreen\"" : "") +">" + bike['team_status'] + " ("+parseInt(bike['time_since_last_contact']).toString()+"s)</a>";
         var targetcell = document.createElement("td"); targetcell.innerHTML = "<a href=\"#\" onclick=\"zoomToClue('"+bike['target_clue']+"')\">"+bike['target_clue']+"</a>";
-        var etacell = document.createElement("td"); etacell.innerHTML = "ETA: "+routes['cluster_times'][key];
+        var etacell = document.createElement("td"); etacell.innerHTML = "<input type='datetime-local' id='deadline_"+index+"' value='"+bike['team_deadline']+"' onchange='onDeadlineChange(this)'"+(bike['team_status'] == "DISABLED" ? 'disabled' : "")+"> ";
         
         row.appendChild(namecell);
         row.appendChild(statuscell);
         row.appendChild(targetcell);
         row.appendChild(etacell);
         table.appendChild(row);
+        index += 1;
     }
 }
 
@@ -154,8 +168,8 @@ function drawClues(){
         popupdiv.innerHTML += "<button id=\"visitbutton_"+clues[i]['clue_name']+"\" style='margin-left:2px' onclick=\"toggle_visit_clue('"+clues[i]['clue_name']+"')\""+(clues[i]['clue_status'] == "DISABLED" ? "disabled" : "")+">"+toggleVisitText+"</button>";
         popupdiv.innerHTML += "<button id=\"enablebutton_"+clues[i]['clue_name']+"\" style='margin-left:2px' onclick=\"toggle_enable_clue('"+clues[i]['clue_name']+"')\""+(clues[i]['clue_status'] == "VISITED" ? "disabled" : "")+">"+toggleDisableText+"</button>";
         popupdiv.innerHTML += "<button id=\"requirebutton_"+clues[i]['clue_name']+"\" style='margin-left:2px' onclick=\"toggle_required_clue('"+clues[i]['clue_name']+"')\">"+(clues[i]['clue_required'] ? "Un-require" : "Require")+"</button></br>";
-        popupdiv.innerHTML += "<div style='color:grey'>Assigned team: <select style='color:grey' id='assignedteam_"+clues[i]['clue_name']+"'><option value='0'>None</option> <option value='1'>Team 1</option> <option value='2'>Team 2</option> <option value='3'>Team 3</option> <option value='4'>Team 4</option></select></span>";
-        var clueMarker = L.marker([clues[i]['longitude'], clues[i]['latitude']], {icon: tempIcon}).bindPopup(popupdiv);
+        popupdiv.innerHTML += "<div style='color:grey'>Assigned team: <select style='color:grey' id='assignedteam_"+clues[i]['clue_name']+"' onchange=\"assignedTeamChanged('"+clues[i]['clue_name']+"', this.value);\"><option value='0'>None</option> <option value='1'>Team 1</option> <option value='2'>Team 2</option> <option value='3'>Team 3</option></select></span>";
+        var clueMarker = L.marker([clues[i]['latitude'], clues[i]['longitude']], {icon: tempIcon}).bindPopup(popupdiv);
         clue_rels[clues[i]['clue_name']] = clueMarker; 
         if (clues[i]['clue_status'] == "UNVISITED") unvisited_clues_m.addLayer(clueMarker);
         else visited_clues_m.addLayer(clueMarker);
@@ -163,6 +177,18 @@ function drawClues(){
     }
 }
 
+function assignedTeamChanged(clue_name, team){
+    fetch(host+'/setClueTeam', {
+        method: "POST",
+        headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "clue_name" : clue_name, "bike_team": parseInt(team)})}) // unvisit (if appropriate)
+    .then((response) => response.json())
+    .then((json) => console.log(json));
+}
+
 function toggle_visit_clue(clue_name){
     if(!confirm("Are you sure you want to visit/unvisit this clue?")) return;
     console.log("toggling visited status for "+clue_name);
@@ -224,6 +250,25 @@ function toggle_enable_clue(clue_name){
     .then((json) => console.log(json));    
 }
 
+function toggleBikeEnable(team_index){
+    var bike = bikes["Team "+team_index];
+    team_index = parseInt(team_index);
+    var page = "/disableTeam";
+    if(bike['team_status'] == "DISABLED"){
+        page = "/enableTeam";
+    }
+    if(page == "/disableTeam") {
+        if(!confirm("Are you sure you want to disable this team?"))return;
+    }
+    fetch(host+page, {
+        method: "POST",
+        headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "team_index" : team_index })}).then((response) => requestLatestInfo());
+}
+
 function addClue(){
     var clue_name = document.getElementById("new_clue_name").value;
     var clue_info = document.getElementById("new_clue_info").value;
@@ -273,13 +318,14 @@ function requestLatestInfo(){
         }
         // process bikes
         if(true || json['bikes_changed']){ // always true since we need constant updates for bikes
-            bikes_t = json['bikes'];
+            var bikes_t = json['bikes'];
 
             for (var i = 0; i < bikes_t.length; i++){
                 var name = bikes_t[i]['team_name'];
                 if(name in bikes) {
                     bikes[name]['marker'].setLatLng([bikes_t[i]['latitude'],bikes_t[i]['longitude']]);
-                    if(bikes_t[i]['team_status'] != [name]['team_status'])bikes[name]['marker'].setIcon(bikeIcons[bikes_t[i]['team_status']]);
+                    bikes[name]['marker'].setIcon(bikeIcons[bikes_t[i]['team_status']]);
+                    bikes[name]['marker'].setOpacity(bikeStatusOpacities[bikes_t[i]['team_status']]);
                     for (const [key, value] of Object.entries(bikes_t[i])) {
                         bikes[name][key] = value;
                     }
@@ -288,6 +334,7 @@ function requestLatestInfo(){
                     bikes[name] = bikes_t[i];
                     bikes[name]['marker'] = bikeMarker;
                     bikeMarker.setIcon(bikeIcons[bikes[name]['team_status']]);
+                    bikeMarker.setOpacity(bikeStatusOpacities[bikes_t[i]['team_status']]);
                     bikes_m.addLayer(bikeMarker);
                 }
             }
@@ -325,11 +372,32 @@ function requestLatestInfo(){
     .then((response) => response.json())
     .then((json) => handleLatestInfo(json));
 }
+
+function onDeadlineChange(element){
+    var team_index = parseInt(element.id.split("_")[1]);
+    var new_deadline = element.value;
+
+    fetch(host+'/updateTeamDeadline', {
+        method: "POST",
+        headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "team_index" : team_index, "new_deadline" : new_deadline})})
+        .then((response) => response.json())
+        .then((json) => {
+            console.log(json);
+            if(json['status'] != "OK")
+                alert(json['status']);
+        });  
+
+}
+
 var intervalId = window.setInterval(function(){
     requestLatestInfo();
   }, 5000);
 
-var clockINterval = window.setInterval(function(){
+var clockInterval = window.setInterval(function(){
     var d = new Date();
     document.getElementById("titletime").innerText = d.toLocaleString();
 }, 1000);