diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/public/javascripts/map.js | 98 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 29 | ||||
| -rw-r--r-- | web/routes/index.js | 1 | ||||
| -rw-r--r-- | web/views/map.pug | 21 |
4 files changed, 85 insertions, 64 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: '© <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) diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index d8618cd..429a8f2 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -21,8 +21,6 @@ a { left: 5px; z-index: 2; width: 350px; - height: 275px; - max-height: 275px; position: relative; float: left; background-color: lightgrey; @@ -34,11 +32,11 @@ a { margin-top: 10px; margin-bottom: 10px; } -#point-container { +#report-container { overflow: auto; - max-height: 195px; + max-height: 750px; } -#point { +#report { background-color: #0CC5EA; width: 90%; margin-left: auto; @@ -46,9 +44,26 @@ a { margin-bottom: 5px; padding: 5px; border-radius: 10px; + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + flex-direction: column; +} +#report strong { + font-size: 22px; + font-style: italic; + margin: auto; + padding: 5px; +} +#report span { + background-color: white; + padding: 15px; + border-radius: 10px; + font-weight: lighter; + font-size: large; + text-align: center; } #close-btn-container { - position: fixed; height: 30px; top: 250px; background-color: lightgrey; @@ -64,4 +79,4 @@ a { margin-right: 20px; border-radius: 10px; width: 100px; -}
\ No newline at end of file +} diff --git a/web/routes/index.js b/web/routes/index.js index a93db3b..23fcf36 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -23,7 +23,6 @@ router.get('/map', function(req,res) { }); router.post('/mobilerequest', function(req, res) { - console.log(req.body); var data = req.body; Points.save_request(data, function(err, result) { if (err) { diff --git a/web/views/map.pug b/web/views/map.pug index f5837b6..888efc0 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -2,15 +2,18 @@ extends layout.pug block content #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: + #report-container + #report + strong Gender + span#report-gender + strong Age range + span#report-age-range + strong Race + span#report-race + strong Other Arrtibutes + span#report-other + strong Distinctive Features + span#report-distinctive #close-btn-container button#close-btn Close |