4 files changed, 43 insertions, 10 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..544da9e 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",
@@ -31,7 +32,8 @@ 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');
 
 	if (getComputedStyle(sideBar).visibility === 'hidden') {
@@ -80,13 +82,27 @@ 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) {
+	currPoint._icon.src = '../assets/orange-icon.png';
+}
+
+function markAsCompleted(e) {
+	map.removeLayer(currPoint);
 }
 
 function closeDetails(e) {
 	let details = document.getElementById('sidebar')
-	details.style.visibility = 'hidden'
+	details.style.visibility = 'hidden';
 }
 
 // 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;
 }