1 files changed, 72 insertions, 4 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 8d4fc3b..5b75bc3 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -2,6 +2,7 @@
 // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
+let currPoint;
 
 const Races = {
 	"White"     : "European or White",
@@ -12,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);
@@ -31,6 +44,7 @@ function plotPointsOnMap(points) {
 function showDetails(e) {
 	// layer.feature.geometry gives you access to all the fields
 	let layer = e.layer;
+	currPoint = layer;
 
 	let sideBar = document.getElementById('sidebar');
 
@@ -80,13 +94,67 @@ function showDetails(e) {
 	let extraText = document.createTextNode(layer.feature.geometry['extra']);
 	extraTextSpan.appendChild(extraText);
 
-	let closeBtn = document.getElementById('close-btn')
-	closeBtn.addEventListener('click', closeDetails)
+	let pendingBtn = document.getElementById('pending-btn');
+	pendingBtn.addEventListener('click', markAsPending);
+
+	let completedBtn = document.getElementById('completed-btn');
+	completedBtn.addEventListener('click', markAsCompleted);
+
+	let closeBtn = document.getElementById('close-btn');
+	closeBtn.addEventListener('click', closeDetails);
+}
+
+function markAsPending(e) {
+	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) {
+	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) {
 	let details = document.getElementById('sidebar')
-	details.style.visibility = 'hidden'
+	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
@@ -110,7 +178,7 @@ if (window.EventSource) {
 		var data = JSON.parse(e.data);
 		if (data.coordinates) {
 			points.push(data);
-			plotPointsOnMap(points);
+			plotPointsOnMap(data);
 		}
 	}, false)