Merge pull request #64 from csc301-winter-2019/feat/34

Feat/34

1 files changed, 56 insertions, 4 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 544da9e..5b75bc3 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -13,11 +13,23 @@ 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);
@@ -33,7 +45,7 @@ function showDetails(e) {
 	// layer.feature.geometry gives you access to all the fields
 	let layer = e.layer;
 	currPoint = layer;
-	
+
 	let sideBar = document.getElementById('sidebar');
 
 	if (getComputedStyle(sideBar).visibility === 'hidden') {
@@ -93,11 +105,34 @@ function showDetails(e) {
 }
 
 function markAsPending(e) {
-	currPoint._icon.src = '../assets/orange-icon.png';
+	let currPointDetails = currPoint.feature.geometry;
+	let currPointId = currPointDetails._id;
+	if (currPointDetails.status === "pending") return;
+
+	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);
+	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);
+		})
+		.catch(function(error) {
+			alert(error);
+		});
+	closeDetails();
 }
 
 function closeDetails(e) {
@@ -105,6 +140,23 @@ function closeDetails(e) {
 	details.style.visibility = 'hidden';
 }
 
+// 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> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
@@ -126,7 +178,7 @@ if (window.EventSource) {
 		var data = JSON.parse(e.data);
 		if (data.coordinates) {
 			points.push(data);
-			plotPointsOnMap(points);
+			plotPointsOnMap(data);
 		}
 	}, false)