From 4b696da0334a92a00119ab4a5c0414a79f39da4f Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Fri, 15 Mar 2019 12:51:25 -0400 Subject: updated mobile form, updated web schemas, and /mobilerequest handler. No front end web changes yet --- web/models/mockpoints.js | 10 ++++++---- web/models/points.js | 10 ++++++---- web/routes/index.js | 12 +++--------- 3 files changed, 15 insertions(+), 17 deletions(-) (limited to 'web') 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/routes/index.js b/web/routes/index.js index b2ba91f..a93db3b 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -23,14 +23,8 @@ 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 - } + console.log(req.body); + var data = req.body; Points.save_request(data, function(err, result) { if (err) { console.log(`err inserting mobile request into db: ${err}`); @@ -44,7 +38,7 @@ router.post('/mobilerequest', function(req, res) { res.status(200).send({'status': 'success', 'data': data}); } }); - + }); -- cgit v1.2.3 From bf2b97832c3746e3f7f18c6aec253c76124e5564 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Fri, 15 Mar 2019 17:22:56 -0400 Subject: added FE web updates for displaying new form report. minor ui enchancements --- web/public/javascripts/map.js | 98 +++++++++++++++++++++------------------- web/public/stylesheets/style.css | 29 +++++++++--- web/routes/index.js | 1 - web/views/map.pug | 21 +++++---- 4 files changed, 85 insertions(+), 64 deletions(-) (limited to 'web') 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: '© OpenStreetMap 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") + + "
" + + "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 -- cgit v1.2.3 From c1c607231c344185061d0b042374728cfb89b8a4 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Fri, 15 Mar 2019 17:29:30 -0400 Subject: code cleanup --- web/public/javascripts/map.js | 6 +++--- web/public/stylesheets/style.css | 22 +++++++++++----------- 2 files changed, 14 insertions(+), 14 deletions(-) (limited to 'web') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 98e0898..8d4fc3b 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -42,7 +42,7 @@ function showDetails(e) { let report = document.getElementById('report'); let prevUserInputs = report.getElementsByClassName('user-input'); for (let i=0; i < prevUserInputs.length; i++) { - prevUserInputs[i].innerHTML = ""; + prevUserInputs[i].innerHTML = ""; } // put gender of the person @@ -55,14 +55,14 @@ function showDetails(e) { let ageRangeTextSpan = document.getElementById('report-age-range'); ageRangeTextSpan.className = 'user-input'; let ageRangeText = document.createTextNode( - " ~ " + layer.feature.geometry['age'] + " years"); + " ~ " + 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']] + Races[layer.feature.geometry['race']] ); raceTextSpan.appendChild(raceText); diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 429a8f2..74660a8 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -33,8 +33,8 @@ a { margin-bottom: 10px; } #report-container { - overflow: auto; - max-height: 750px; + overflow: auto; + max-height: 750px; } #report { background-color: #0CC5EA; @@ -44,19 +44,19 @@ a { margin-bottom: 5px; padding: 5px; border-radius: 10px; - display: flex; - flex-flow: row wrap; - justify-content: flex-end; - flex-direction: column; + 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; + font-size: 22px; + font-style: italic; + margin: auto; + padding: 5px; } #report span { - background-color: white; + background-color: white; padding: 15px; border-radius: 10px; font-weight: lighter; -- cgit v1.2.3 From 5d7cb45633994c3d51a54e525d7f9eba685b12ed Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Fri, 15 Mar 2019 18:02:03 -0400 Subject: fixed web type --- web/views/map.pug | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/views/map.pug b/web/views/map.pug index 888efc0..484899c 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -6,11 +6,11 @@ block content #report strong Gender span#report-gender - strong Age range + strong Age Range span#report-age-range strong Race span#report-race - strong Other Arrtibutes + strong Other Attributes span#report-other strong Distinctive Features span#report-distinctive -- cgit v1.2.3 From 7cbb77be44854015b943d5a2147fe188bd0132f1 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Tue, 19 Mar 2019 22:25:19 -0400 Subject: fixing ui bugs. 1. side bar max height reduced to 500px. 2. fix for words too long --- web/public/stylesheets/style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 74660a8..ece8da4 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -34,7 +34,7 @@ a { } #report-container { overflow: auto; - max-height: 750px; + max-height: 500px; } #report { background-color: #0CC5EA; @@ -45,7 +45,6 @@ a { padding: 5px; border-radius: 10px; display: flex; - flex-flow: row wrap; justify-content: flex-end; flex-direction: column; } @@ -62,6 +61,8 @@ a { font-weight: lighter; font-size: large; text-align: center; + overflow-wrap: break-word; + word-wrap: break-word; } #close-btn-container { height: 30px; -- cgit v1.2.3