diff options
Diffstat (limited to 'web/public')
| -rw-r--r-- | web/public/javascripts/map.js | 98 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 32 |
2 files changed, 78 insertions, 52 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 6a82dde..e2b4fc1 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -11,6 +11,15 @@ let orangeIcon = L.icon({ }) +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) { @@ -18,7 +27,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 @@ -29,6 +38,7 @@ function plotPointsOnMap(points) { // e is the event info function showDetails(e) { // layer.feature.geometry gives you access to all the fields +<<<<<<< HEAD let layer = e.layer console.log(e) //layer._icon.src = '../assets/blue-icon.png' @@ -39,57 +49,57 @@ function showDetails(e) { console.log(currPoint) let sideBar = document.getElementById('sidebar') +======= + let layer = e.layer; + + let sideBar = document.getElementById('sidebar'); +>>>>>>> master 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 pendingBtn = document.getElementById('pending-btn') // pendingBtn.addEventListener('click', markAsPending) diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index d8618cd..ece8da4 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 { - overflow: auto; - max-height: 195px; +#report-container { + overflow: auto; + max-height: 500px; } -#point { +#report { background-color: #0CC5EA; width: 90%; margin-left: auto; @@ -46,9 +44,27 @@ a { margin-bottom: 5px; padding: 5px; border-radius: 10px; + display: flex; + 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; + overflow-wrap: break-word; + word-wrap: break-word; } #close-btn-container { - position: fixed; height: 30px; top: 250px; background-color: lightgrey; @@ -64,4 +80,4 @@ a { margin-right: 20px; border-radius: 10px; width: 100px; -}
\ No newline at end of file +} |