diff options
| -rw-r--r-- | web/public/assets/blue-icon-focused.png | bin | 0 -> 4220 bytes | |||
| -rw-r--r-- | web/public/assets/orange-icon-focused.png | bin | 0 -> 7428 bytes | |||
| -rw-r--r-- | web/public/assets/orange-icon.png | bin | 7382 -> 12341 bytes | |||
| -rw-r--r-- | web/public/javascripts/map.js | 30 |
4 files changed, 30 insertions, 0 deletions
diff --git a/web/public/assets/blue-icon-focused.png b/web/public/assets/blue-icon-focused.png Binary files differnew file mode 100644 index 0000000..728d06d --- /dev/null +++ b/web/public/assets/blue-icon-focused.png diff --git a/web/public/assets/orange-icon-focused.png b/web/public/assets/orange-icon-focused.png Binary files differnew file mode 100644 index 0000000..26d8b52 --- /dev/null +++ b/web/public/assets/orange-icon-focused.png diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png Binary files differindex dd725de..4b89e0e 100644 --- a/web/public/assets/orange-icon.png +++ b/web/public/assets/orange-icon.png diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 5b75bc3..4ffa3db 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -36,15 +36,35 @@ function plotPointsOnMap(points) { // rezoom the map so that all the markers fit in the view, add 20% padding so // that marker dont cut off + console.log(latlngbounds) map.fitBounds(latlngbounds.pad(0.20)); } // show details about point // e is the event info function showDetails(e) { + if(currPoint !== undefined) { + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon.png'; + } + } + // layer.feature.geometry gives you access to all the fields let layer = e.layer; currPoint = layer; + + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon-focused.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon-focused.png'; + } + + const pointBounds = [currPoint.getLatLng()]; + map.fitBounds(pointBounds); let sideBar = document.getElementById('sidebar'); @@ -109,6 +129,9 @@ function markAsPending(e) { let currPointId = currPointDetails._id; if (currPointDetails.status === "pending") return; + currPoint._icon.src = '../assets/orange-icon-focused.png'; + currPointDetails.status = "pending"; + updatePointStatusInDb(currPointId, "pending") .then(function(responseJson) { alert("Your change has been saved."); @@ -138,6 +161,13 @@ function markAsCompleted(e) { function closeDetails(e) { let details = document.getElementById('sidebar') details.style.visibility = 'hidden'; + + if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../assets/orange-icon.png'; + } + else if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../assets/blue-icon.png'; + } } // returns a Promise object |
