diff options
Diffstat (limited to 'web/public/javascripts/map.js')
| -rw-r--r-- | web/public/javascripts/map.js | 73 |
1 files changed, 60 insertions, 13 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 07ca190..6f06e40 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -2,13 +2,7 @@ // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' // }).addTo(map); -let currPoint = null; - -const orangeIcon = L.icon({ - iconUrl: '../assets/orange-icon.png', - iconSize: [25, 41], - iconAnchor: [12, 41] -}); +let currPoint; const Races = { "White" : "European or White", @@ -19,12 +13,24 @@ const Races = { "Other" : "Other", }; +const PendingIcon = new L.Icon({ + iconAnchor: [ 12, 41 ], + iconUrl: "../assets/orange-icon.png", + iconSize: [ 25, 41 ], + popupAnchor: [ 1, -34 ], + shadowSize: [ 41, 41 ], + tooltipAnchor: [ 16, -28 ] +}); + function plotPointsOnMap(points) { L.geoJson(points, { pointToLayer: function (feature, latlng) { //return L.circleMarker(latlng); latlngbounds.extend(latlng); - + if (feature.status === "pending") { + return L.marker(latlng, {icon: PendingIcon}); + } + return L.marker(latlng); } }).on('click', showDetails).addTo(map); @@ -118,14 +124,38 @@ function showDetails(e) { } function markAsPending(e) { + let currPointDetails = currPoint.feature.geometry; + let currPointId = currPointDetails._id; + if (currPointDetails.status === "pending") return; + currPoint._icon.src = '../assets/orange-icon-focused.png'; - currPoint.feature.geometry.status = "pending"; + currPointDetails.status = "pending"; + + updatePointStatusInDb(currPointId, "pending") + .then(function(responseJson) { + alert("Your change has been saved."); + currPoint._icon.src = '../assets/orange-icon.png'; + }) + .catch(function(error) { + alert(error); + }); } function markAsCompleted(e) { - map.removeLayer(currPoint); - currPoint.feature.geometry.status = "completed"; - currPoint = undefined; + let currPointDetails = currPoint.feature.geometry; + let currPointId = currPointDetails._id; + if (currPointDetails.status === "complete") return; + + updatePointStatusInDb(currPointId, "complete") + .then(function(responseJson) { + alert("Your change has been saved."); + map.removeLayer(currPoint); + currPoint = undefined; + }) + .catch(function(error) { + alert(error); + }); + closeDetails(); } function closeDetails(e) { @@ -140,6 +170,23 @@ function closeDetails(e) { } } +// returns a Promise object +function updatePointStatusInDb(pointId, pointStatus) { + return fetch('/savestatus/' + pointStatus, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({id: pointId}), + }) + .then(function(response) { + if (response.ok) { + return response.json(); + } + throw new Error("We were unable to save your changes."); + }); +} + // different basemap L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', @@ -161,7 +208,7 @@ if (window.EventSource) { var data = JSON.parse(e.data); if (data.coordinates) { points.push(data); - plotPointsOnMap(points); + plotPointsOnMap(data); } }, false) |