From a4f7c09138c37fe20f6b73fd3b152fd9330c3542 Mon Sep 17 00:00:00 2001
From: Edward Betts <edward@4angle.com>
Date: Sun, 20 Jun 2021 14:46:33 +0200
Subject: [PATCH] Show dark green marker for item with edit

---
 frontend/App.vue | 43 ++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 5 deletions(-)

diff --git a/frontend/App.vue b/frontend/App.vue
index 12e47da..9e3ce71 100644
--- a/frontend/App.vue
+++ b/frontend/App.vue
@@ -365,7 +365,14 @@ var redMarker = ExtraMarkers.icon({
 
 var greenMarker = ExtraMarkers.icon({
   icon: "fa-wikidata",
-  markerColor: "green",
+  markerColor: "green-light",
+  shape: "circle",
+  prefix: "fa",
+});
+
+var greenDarkMarker = ExtraMarkers.icon({
+  icon: "fa-wikidata",
+  markerColor: "green-dark",
   shape: "circle",
   prefix: "fa",
 });
@@ -579,10 +586,26 @@ export default {
       var index = this.edit_list_index(item, osm);
 
       if (index == -1) {
-        this.edits.push({'item': item, 'osm': osm});
+        var mapStyle = { fillOpacity: 0, color: "darkturquoise" };
+        var geojson = L.geoJSON(null, { style: mapStyle });
+        geojson.addData(osm.geojson);
+        geojson.addTo(this.map);
+
+        this.edits.push({'item': item, 'osm': osm, 'outline': geojson});
+
       } else {
+        var edit = this.edits[index];
+        edit.outline.removeFrom(this.map);
         this.edits.splice(index, 1);
       }
+
+      var marker = this.getMarker(item);
+
+      item.wikidata.markers.forEach((marker_data) => {
+        marker_data.marker.setIcon(marker);
+      });
+
+
     },
     qid_from_url() {
       const queryString = window.location.search;
@@ -712,6 +735,10 @@ export default {
         });
       });
     },
+    item_has_edit(item) {
+      if (this.edits.length == 0) return false;
+      return this.edits.some((edit) => edit.item.qid == item.qid);
+    },
     close_item() {
       this.current_osm = undefined;
       this.current_item = undefined;
@@ -722,7 +749,11 @@ export default {
     },
     getMarker(item) {
       if (!this.osm_loaded) return blueMarker;
-      return item.osm ? greenMarker : redMarker;
+      if (this.item_has_edit(item)) {
+        return greenDarkMarker;
+      } else {
+        return item.osm ? greenMarker : redMarker;
+      }
     },
     hit_url(hit) {
       var lat = parseFloat(hit.lat).toFixed(5);
@@ -915,7 +946,8 @@ export default {
         if (!wd_item) continue;
 
         wd_item.markers.forEach((marker_data) => {
-          marker_data.marker.setIcon(greenMarker);
+          var marker = this.item_has_edit(item) ? greenDarkMarker : greenMarker;
+          marker_data.marker.setIcon(marker);
           item.lines ||= [];
           item.osm.forEach((osm) => {
             var path = [osm.centroid, marker_data];
@@ -930,7 +962,8 @@ export default {
         var item = this.items[qid];
         if (item.osm) continue;
         item.wikidata.markers.forEach((marker_data) => {
-          marker_data.marker.setIcon(redMarker);
+          var marker = this.item_has_edit(item) ? greenDarkMarker : redMarker;
+          marker_data.marker.setIcon(marker);
         });
       }
     }