Merged feat/22.

3 files changed, 129 insertions, 11 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index cb72756..3f33bcf 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -10,16 +10,81 @@ function plotPointsOnMap(points) {
 			latlngbounds.extend(latlng);
 			return L.marker(latlng);
 		}
-	}).bindPopup(function (layer) {
-		// layer.feature.geometry gives you access to all the fields
-		return "<p>" + JSON.stringify(layer.feature.geometry) + "</p>";
-	}).addTo(map)
+	}).on('click', showDetails).addTo(map)
 
 	// rezoom the map so that all the markers fit in the view, add 20% padding so
 	// that marker dont cut off
 	map.fitBounds(latlngbounds.pad(0.20));
 }
 
+// show details about point
+// e is the event info
+function showDetails(e) {
+	// layer.feature.geometry gives you access to all the fields
+	let layer = e.layer
+	
+	let sideBar = document.getElementById('sidebar')
+
+	if (getComputedStyle(sideBar).visibility === 'hidden') {
+		sideBar.style.visibility = 'visible'
+	}
+
+	let point = document.getElementById('point')
+
+	//get the previous input text from the previous point
+	let prevUserInput = point.getElementsByClassName('user-input')
+
+	// remove the previous point text
+	while (prevUserInput.length !== 0) {
+		prevUserInput[0].parentNode.removeChild(prevUserInput[0])
+	}
+
+	let pointBreaks = point.getElementsByClassName('point-break')
+
+	// put age range of person
+	let ageRangeTextSpan = document.createElement('span')
+	ageRangeTextSpan.className = 'user-input'
+	let ageRangeText = document.createTextNode(layer.feature.geometry['ageRange'])
+	ageRangeTextSpan.appendChild(ageRangeText)
+	pointBreaks[0].parentNode.insertBefore(ageRangeTextSpan, pointBreaks[0])
+
+	// put clothing description of person
+	let clothingDescTextSpan = document.createElement('span')
+	clothingDescTextSpan.className = 'user-input'
+	let clothingDescText = document.createTextNode(layer.feature.geometry['clothingDescription'])
+	clothingDescTextSpan.appendChild(clothingDescText)
+	pointBreaks[1].parentNode.insertBefore(clothingDescTextSpan, pointBreaks[1])
+
+	// put whether person is injured or not
+	let isInjured = layer.feature.geometry['isInjured']
+	let injurySpan = document.createElement('span')
+	injurySpan.className = 'user-input'
+	if (isInjured) {
+		injurySpan.appendChild(document.createTextNode('Injured'))
+		injurySpan.style.color = 'red'
+	}
+	else {
+		injurySpan.appendChild(document.createTextNode('Not injured'))
+		injurySpan.style.color = 'green'
+	}
+	pointBreaks[2].parentNode.insertBefore(injurySpan, pointBreaks[2])
+
+	// put reason for help
+	let helpReasonTextSpan = document.createElement('span')
+	helpReasonTextSpan.className = 'user-input'
+	let helpReasonText = document.createTextNode(layer.feature.geometry['reasonForHelp'])
+	helpReasonTextSpan.appendChild(helpReasonText)
+	point.appendChild(helpReasonTextSpan)
+
+	let closeBtn = document.getElementById('close-btn')
+	closeBtn.addEventListener('click', closeDetails)
+}
+
+function closeDetails(e) {
+	let details = document.getElementById('sidebar')
+	details.style.visibility = 'hidden'
+}
+
 // different basemap
 L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', {
 	attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index c3bd05c..d8618cd 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -3,9 +3,10 @@ html, body {
   overflow: hidden;
 }
 #map {
-  width: 65%;
+  width: 100%;
   height: 100%;
-  float: right;
+  position: absolute;
+  z-index: 1;
 }
 body {
   margin:0;
@@ -16,11 +17,51 @@ a {
   color:#00B7FF;
 }
 #sidebar {
-  width: 35%;
-  height: 100%;
+  top: 5px;
+  left: 5px;
+  z-index: 2;
+  width: 350px;
+  height: 275px;
+  max-height: 275px;
+  position: relative;
   float: left;
-  background-color: #e70000;
+  background-color: lightgrey;
+  border-radius: 10px;
+  visibility: hidden;
 }
-h1 {
+#details-header {
   text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+#point-container {
+    overflow: auto;
+    max-height: 195px;
 }
+#point {
+  background-color: #0CC5EA;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 5px;
+  padding: 5px;
+  border-radius: 10px;
+}
+#close-btn-container {
+  position: fixed;
+  height: 30px;
+  top: 250px;
+  background-color: lightgrey;
+  width: 350px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 10px;
+}
+#close-btn {
+  background-color: red;
+  position: relative;
+  margin-top: 4px;
+  float: right;
+  margin-right: 20px;
+  border-radius: 10px;
+  width: 100px;
+}
\ No newline at end of file
diff --git a/web/views/map.pug b/web/views/map.pug
index 725c8a8..f5837b6 100644
--- a/web/views/map.pug
+++ b/web/views/map.pug
@@ -1,7 +1,19 @@
 extends layout.pug
 block content
 	#sidebar
-		h1 This is a sidebar
+		h1#details-header Details
+		#point-container
+			#point
+				strong Age range: 
+				br.point-break
+				strong Clothing description: 
+				br.point-break
+				strong Injury status: 
+				br.point-break
+				strong Reason for help: 
+		#close-btn-container
+			button#close-btn Close
+
 	#map
 
 	script(type='text/javascript').