Doing merge

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
new 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
new 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
index 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..edd312a 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 !== null) {
+		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