diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/models/mockpoints.js | 10 | ||||
| -rw-r--r-- | web/models/points.js | 10 | ||||
| -rw-r--r-- | web/public/javascripts/map.js | 98 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 32 | ||||
| -rw-r--r-- | web/routes/index.js | 11 | ||||
| -rw-r--r-- | web/views/map.pug | 21 |
6 files changed, 104 insertions, 78 deletions
diff --git a/web/models/mockpoints.js b/web/models/mockpoints.js index ff5e771..ac9ecd4 100644 --- a/web/models/mockpoints.js +++ b/web/models/mockpoints.js @@ -5,10 +5,12 @@ var Schema = mongoose.Schema; var dumbJsonSchema = new Schema({ type: String, coordinates: Array, - ageRange: String, - clothingDescription: String, - isInjured: Boolean, - reasonForHelp: String + gender: String, + age: String, + race: String, + longhair: Boolean, + longbeard: Boolean, + extra: String }); // Mongoose Model definition diff --git a/web/models/points.js b/web/models/points.js index 3a07c82..d27f2a7 100644 --- a/web/models/points.js +++ b/web/models/points.js @@ -5,10 +5,12 @@ var Schema = mongoose.Schema; var JsonSchema = new Schema({ type: String, coordinates: Array, - ageRange: String, - clothingDescription: String, - isInjured: Boolean, - reasonForHelp: String + gender: String, + age: String, + race: String, + longhair: Boolean, + longbeard: Boolean, + extra: String }); // Mongoose Model definition 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 +} diff --git a/web/routes/index.js b/web/routes/index.js index b2ba91f..23fcf36 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -23,14 +23,7 @@ router.get('/map', function(req,res) { }); router.post('/mobilerequest', function(req, res) { - var data = { - 'coordinates': req.body.coordinates, - 'type': req.body.type, - 'isInjured': req.body.isInjured, - 'reasonForHelp': req.body.reasonForHelp, - 'ageRange': req.body.ageRange, - 'clothingDescription': req.body.clothingDescription - } + var data = req.body; Points.save_request(data, function(err, result) { if (err) { console.log(`err inserting mobile request into db: ${err}`); @@ -44,7 +37,7 @@ router.post('/mobilerequest', function(req, res) { res.status(200).send({'status': 'success', 'data': data}); } }); - + }); diff --git a/web/views/map.pug b/web/views/map.pug index f5837b6..484899c 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 Attributes + span#report-other + strong Distinctive Features + span#report-distinctive #close-btn-container button#close-btn Close |