1 files changed, 26 insertions, 4 deletions
diff --git a/dashboard_website/static/js/dashboard.js b/dashboard_website/static/js/dashboard.js
index 4ce6fac..3ff0de9 100644
--- a/dashboard_website/static/js/dashboard.js
+++ b/dashboard_website/static/js/dashboard.js
@@ -124,16 +124,23 @@ function drawClues(){
         var tempIcon = visitedIcon;
         if (clues[i]['clue_status'] == "UNVISITED") tempIcon = unvisitedIcon;
         var popupdiv = document.createElement('p');
-        popupdiv.innerHTML = "<span style='color:black'>" + clues[i]['clue_name'] + ": " + clues[i]['clue_info'] + "</span><button style='margin-left:2px' onclick=\"visitClue('"+clues[i]['clue_name']+"')\">Visit</button>"
-        var clueMarker = L.marker([clues[i]['latitude'], clues[i]['longitude']], {icon: tempIcon}).bindPopup(popupdiv);
+        var toggleVisitText = clues[i]['clue_status'] == "UNVISITED" ? "Visit" : "Unvisit";
+        var toggleDisableText = clues[i]['clue_status'] != "DISABLED" ? "Disable" : "Enable";
+        popupdiv.innerHTML = "<span style='color:black'>" + clues[i]['clue_name'] + ": " + clues[i]['clue_info'] + "</span>";
+        popupdiv.innerHTML += "<button id=\"visitbutton_"+clues[i]['clue_name']+"style='margin-left:2px' onclick=\"toggleVisitClue('"+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=\"toggleEnableClue('"+clues[i]['clue_name']+"')\""+(clues[i]['clue_status'] == "VISITED" ? "disabled" : "")+">"+toggleDisableText+"</button>";
+        var clueMarker = L.marker([clues[i]['latitude'], clueVisits[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);
     }
 }
 
-function visitClue(clue_name){
-    console.log("visiting: "+clue_name);
+function toggleVisitClue(clue_name){
+    if(!confirm("Are you sure you want to visit/unvisit this clue?")) return;
+    console.log("toggling visited status for "+clue_name);
+    document.getElementById("visitbutton_"+clues[i]['clue_name']).disabled = true; // temporarily disable buttons until new server frame received
+    document.getElementById("enablebutton_"+clues[i]['clue_name']).disabled = true;
     fetch(host+'/visitClueGeneric', {
         method: "POST",
         headers: {
@@ -145,6 +152,21 @@ function visitClue(clue_name){
     .then((json) => console.log(json));
 }
 
+function toggleEnableClue(clue_name){
+    console.log("toggling enabled status for "+clue_name);
+    document.getElementById("visitbutton_"+clues[i]['clue_name']).disabled = true; // temporarily disable buttons until new server frame received
+    document.getElementById("enablebutton_"+clues[i]['clue_name']).disabled = true;
+    fetch(host+'/enableClue', {
+        method: "POST",
+        headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ "clue_name" : clue_name })})
+    .then((response) => response.json())
+    .then((json) => console.log(json));    
+}
+
 function addClue(){
     var long = parseFloat(document.getElementById("new_clue_longitude").value);
     var lat = parseFloat(document.getElementById("new_clue_latitude").value);