From 4bcda39aeae66b838c79e953e98c54055c3ecb70 Mon Sep 17 00:00:00 2001
From: Samarth Agarwal <samarth.agarwal@mail.utoronto.ca>
Date: Wed, 6 Mar 2019 23:07:12 -0500
Subject: Added functionality so that whenever a point is clicked it opens up a
 Details sidebar which shows information about that point.

---
 web/public/javascripts/map.js | 85 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

(limited to 'web/public/javascripts/map.js')

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
-- 
cgit v1.2.3