Merge branch 'qa' into feat/28

4 files changed, 94 insertions, 9 deletions

diff --git a/web/public/assets/blue-icon.png b/web/public/assets/blue-icon.png
new file mode 100644
index 0000000..e4abba3
--- /dev/null
+++ b/web/public/assets/blue-icon.png
diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png
new file mode 100644
index 0000000..dd725de
--- /dev/null
+++ b/web/public/assets/orange-icon.png
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 8d4fc3b..17b9208 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
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index ece8da4..5f39fcf 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -64,20 +64,37 @@ a {
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
-#close-btn-container {
+#btn-container {
   height: 30px;
   top: 250px;
   background-color: lightgrey;
   width: 350px;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
+  text-align: center;
 }
-#close-btn {
-  background-color: red;
+.details-btn {
   position: relative;
   margin-top: 4px;
-  float: right;
-  margin-right: 20px;
+  margin-bottom: 4px;
   border-radius: 10px;
-  width: 100px;
+  font-size: 18px;
+  padding: 10px;
+}
+#pending-btn {
+  background-color: orange;
+  float: left;
+  margin-left: 10px;
+}
+
+#completed-btn {
+  background-color: #2bbd2b;
+  float: left;
+  margin-left: 10px;
+}
+
+#close-btn {
+  background-color: red;
+  float: right;
+  margin-right: 10px;
 }