Finished front-end side of this feature.

2 files changed, 26 insertions, 24 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index e2b4fc1..115e72d 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -4,13 +4,6 @@
 // }).addTo(map);
 let currPoint
 
-let orangeIcon = L.icon({
-	iconUrl: '../assets/orange-icon.png',
-	iconSize: [25, 41],
-    iconAnchor: [12, 41]
-})
-
-
 const Races = {
 	"White"     : "European or White",
 	"eAsian"    : "East Asian",
@@ -38,7 +31,6 @@ function plotPointsOnMap(points) {
 // e is the event info
 function showDetails(e) {
 	// layer.feature.geometry gives you access to all the fields
-<<<<<<< HEAD
 	let layer = e.layer
 	console.log(e)
 	//layer._icon.src = '../assets/blue-icon.png'
@@ -49,11 +41,6 @@ function showDetails(e) {
 	console.log(currPoint)
 	
 	let sideBar = document.getElementById('sidebar')
-=======
-	let layer = e.layer;
-
-	let sideBar = document.getElementById('sidebar');
->>>>>>> master
 
 	if (getComputedStyle(sideBar).visibility === 'hidden') {
 		sideBar.style.visibility = 'visible';
@@ -101,18 +88,18 @@ function showDetails(e) {
 	let extraText = document.createTextNode(layer.feature.geometry['extra']);
 	extraTextSpan.appendChild(extraText);
 
-	// let pendingBtn = document.getElementById('pending-btn')
-	// pendingBtn.addEventListener('click', markAsPending)
+	let pendingBtn = document.getElementById('pending-btn')
+	pendingBtn.addEventListener('click', markAsPending)
 
-	// let completedBtn = document.getElementById('completed-btn')
-	// completedBtn.addEventListener('click', markAsCompleted)
+	let completedBtn = document.getElementById('completed-btn')
+	completedBtn.addEventListener('click', markAsCompleted)
 
 	let closeBtn = document.getElementById('close-btn')
 	closeBtn.addEventListener('click', closeDetails)
 }
 
 function markAsPending(e) {
-	currPoint.src = '../assets/orange-icon.png'
+	currPoint._icon.src = '../assets/orange-icon.png'
 }
 
 function markAsCompleted(e) {
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index ece8da4..85ebb2d 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -64,20 +64,35 @@ 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;
   border-radius: 10px;
-  width: 100px;
+  width: 95px;
+}
+#pending-btn {
+  background-color: orange;
+  float: left;
+  margin-left: 10px;
+}
+
+#completed-btn {
+  background-color: #279427;
+  float: left;
+  margin-left: 10px;
+}
+
+#close-btn {
+  background-color: red;
+  float: right;
+  margin-right: 10px;
 }