Merging.

4 files changed, 26 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..3cd5821 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -42,9 +42,28 @@ function plotPointsOnMap(points) {
 // show details about point
 // e is the event info
 function showDetails(e) {
+	if(currPoint !== undefined) {
+		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');
 
@@ -138,6 +157,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