Added comments and made DOM easier to work with.

1 files changed, 39 insertions, 55 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 2ca45d0..fe33d73 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -19,57 +19,52 @@ L.geoJson(points, {
 	}
 }).bindPopup(function (layer) {
 	// layer.feature.geometry gives you access to all the fields
+
+	// show the details of the point in a sidebar
 	showDetails(layer)
 
 	return "<p>" + JSON.stringify(layer.feature.geometry) + "</p>";
 }).addTo(map)
 
-
+// show details about point
+// layer is the dictionary that holds info about the point
 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 sideBar = document.getElementById('sidebar')
+
+	if (getComputedStyle(sideBar).visibility === 'hidden') {
+		sideBar.style.visibility = 'visible'
 	}
 
-	let point
+	let point = document.getElementById('point')
 
-	if (document.getElementById('point') !== null) {
-		point = document.getElementById('point')
-		point.parentNode.removeChild(point)
-	}
+	//get the previous input text from the previous point
+	let prevUserInput = point.getElementsByClassName('user-input')
 
-	point = document.createElement('div')
-	point.id = 'point'
+	// remove the previous point text
+	while (prevUserInput.length !== 0) {
+		prevUserInput[0].parentNode.removeChild(prevUserInput[0])
+	}
 
-	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 pointBreaks = point.getElementsByClassName('point-break')
 
-	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'))
+	// 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])
 
-	let strongElement3 = document.createElement('strong')
-	let injuryStatusText = document.createTextNode('Injury status: ')
-	strongElement3.appendChild(injuryStatusText)
-	point.appendChild(strongElement3)
+	// 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'
@@ -78,31 +73,20 @@ function showDetails(layer) {
 		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)
+	pointBreaks[2].parentNode.insertBefore(injurySpan, pointBreaks[2])
 
-	let insertBefore = document.getElementById('map')
-	insertBefore.parentNode.insertBefore(sideBar, insertBefore)
+	// 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.parentNode.removeChild(details)
+	details.style.visibility = 'hidden'
 }
\ No newline at end of file