Added functionality so that whenever a point is clicked it opens up a Details sidebar which shows information about that point.

2 files changed, 114 insertions, 5 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 190307d..2ca45d0 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -19,5 +19,90 @@ L.geoJson(points, {
 	}
 }).bindPopup(function (layer) {
 	// layer.feature.geometry gives you access to all the fields
+	showDetails(layer)
+
 	return "<p>" + JSON.stringify(layer.feature.geometry) + "</p>";
 }).addTo(map)
+
+
+function showDetails(layer) {
+	let sideBar
+
+	if (document.getElementById('sidebar') === null) {
+		sideBar = document.createElement('div')
+		let notificationsHeaderElement = document.createElement('h1')
+		notificationsHeaderElement.appendChild(document.createTextNode('Details'))
+		sideBar.appendChild(notificationsHeaderElement)
+		sideBar.id = "sidebar"
+	}
+	else {
+		sideBar = document.getElementById('sidebar')
+	}
+
+	let point
+
+	if (document.getElementById('point') !== null) {
+		point = document.getElementById('point')
+		point.parentNode.removeChild(point)
+	}
+
+	point = document.createElement('div')
+	point.id = 'point'
+
+	let strongElement = document.createElement('strong')
+	let ageRangeText = document.createTextNode('Age range: ')
+	strongElement.appendChild(ageRangeText)
+	point.appendChild(strongElement)
+	point.appendChild(document.createTextNode(layer.feature.geometry['ageRange']))
+	point.appendChild(document.createElement('br'))
+
+	let strongElement2 = document.createElement('strong')
+	let clothingDescText = document.createTextNode('Clothing description: ')
+	strongElement2.appendChild(clothingDescText)
+	point.appendChild(strongElement2)
+	point.appendChild(document.createTextNode(layer.feature.geometry['clothingDescription']))
+	point.appendChild(document.createElement('br'))
+
+	let strongElement3 = document.createElement('strong')
+	let injuryStatusText = document.createTextNode('Injury status: ')
+	strongElement3.appendChild(injuryStatusText)
+	point.appendChild(strongElement3)
+
+	let isInjured = layer.feature.geometry['isInjured']
+	let injurySpan = document.createElement('span')
+	if (isInjured) {
+		injurySpan.appendChild(document.createTextNode('Injured'))
+		injurySpan.style.color = 'red'
+	}
+	else {
+		injurySpan.appendChild(document.createTextNode('Not injured'))
+		injurySpan.style.color = 'green'
+	}
+	point.appendChild(injurySpan)
+	point.appendChild(document.createElement('br'))
+
+	let strongElement4 = document.createElement('strong')
+	let helpReasonText = document.createTextNode('Reason for help: ')
+	strongElement4.appendChild(helpReasonText)
+	point.appendChild(strongElement4)
+	point.appendChild(document.createTextNode(layer.feature.geometry['reasonForHelp']))
+
+	sideBar.appendChild(point)
+
+	let closeBtn = document.createElement('button')
+	let closeBtnText = document.createTextNode('Close')
+	closeBtn.id = 'close-btn'
+	closeBtn.appendChild(closeBtnText)
+
+	sideBar.appendChild(closeBtn)
+
+	let insertBefore = document.getElementById('map')
+	insertBefore.parentNode.insertBefore(sideBar, insertBefore)
+
+	closeBtn.addEventListener('click', closeDetails)
+}
+
+function closeDetails(e) {
+	let details = document.getElementById('sidebar')
+	details.parentNode.removeChild(details)
+}
\ No newline at end of file
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index c3bd05c..0cb3232 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,10 +17,33 @@ a {
   color:#00B7FF;
 }
 #sidebar {
-  width: 35%;
-  height: 100%;
+  top: 5px;
+  left: 5px;
+  z-index: 2;
+  width: 350px;
+  height: 250px;
+  max-height: 250px;
+  overflow: auto;
+  position: relative;
   float: left;
-  background-color: #e70000;
+  background-color: lightgrey;
+  border-radius: 10px;
+}
+#point {
+  background-color: #0CC5EA;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 5px;
+  border-radius: 10px;
+}
+#close-btn {
+  background-color: red;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 10px;
+  width: 100px;
 }
 h1 {
   text-align: center;