1 files changed, 51 insertions, 47 deletions

diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 3f33bcf..98e0898 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -3,6 +3,15 @@
 //     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 // }).addTo(map);
 
+const Races = {
+	"White"     : "European or White",
+	"eAsian"    : "East Asian",
+	"sAsian"    : "South Asian",
+	"Black"     : "Black or African American",
+	"Aboriginal": "Aboriginal",
+	"Other"     : "Other",
+};
+
 function plotPointsOnMap(points) {
 	L.geoJson(points, {
 		pointToLayer: function (feature, latlng) {
@@ -10,7 +19,7 @@ function plotPointsOnMap(points) {
 			latlngbounds.extend(latlng);
 			return L.marker(latlng);
 		}
-	}).on('click', showDetails).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
@@ -21,60 +30,55 @@ function plotPointsOnMap(points) {
 // 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')
+	let layer = e.layer;
+
+	let sideBar = document.getElementById('sidebar');
 
 	if (getComputedStyle(sideBar).visibility === 'hidden') {
-		sideBar.style.visibility = 'visible'
+		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])
+	// remove the previous report text
+	let report = document.getElementById('report');
+	let prevUserInputs = report.getElementsByClassName('user-input');
+	for (let i=0; i < prevUserInputs.length; i++) {
+			prevUserInputs[i].innerHTML = "";
 	}
 
-	let pointBreaks = point.getElementsByClassName('point-break')
+	// put gender of the person
+	let genderTextSpan = document.getElementById('report-gender');
+	genderTextSpan.className = 'user-input';
+	let genderText = document.createTextNode(layer.feature.geometry['gender']);
+	genderTextSpan.appendChild(genderText);
 
 	// 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 ageRangeTextSpan = document.getElementById('report-age-range');
+	ageRangeTextSpan.className = 'user-input';
+	let ageRangeText = document.createTextNode(
+			" ~ " + layer.feature.geometry['age'] + " years");
+	ageRangeTextSpan.appendChild(ageRangeText);
+
+	// put race of person
+	let raceTextSpan = document.getElementById('report-race');
+	raceTextSpan.className = 'user-input';
+	let raceText = document.createTextNode(
+			Races[layer.feature.geometry['race']]
+	);
+	raceTextSpan.appendChild(raceText);
+
+	// put other attributes
+	let otherAttrTextSpan = document.getElementById('report-other');
+	otherAttrTextSpan.className = 'user-input';
+	otherAttrTextSpan.innerHTML =
+		"Long hair? " + (layer.feature.geometry['longhair'] ? "Yes" : "No") +
+		"<br>" +
+		"Long beard? " + (layer.feature.geometry['longbeard'] ? "Yes" : "No");
+
+	// put extra info
+	let extraTextSpan = document.getElementById('report-distinctive');
+	extraTextSpan.className = 'user-input';
+	let extraText = document.createTextNode(layer.feature.geometry['extra']);
+	extraTextSpan.appendChild(extraText);
 
 	let closeBtn = document.getElementById('close-btn')
 	closeBtn.addEventListener('click', closeDetails)