From f269caf1eb36c43269d92c89b7f0b0bafb88d572 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 22 Apr 2019 23:58:44 -0400 Subject: switched tabs to 2 spaces --- web/app.js | 20 +-- web/models/mockpoints.js | 34 ++-- web/models/points.js | 58 +++---- web/public/javascripts/map.js | 368 +++++++++++++++++++++--------------------- web/routes/index.js | 120 +++++++------- 5 files changed, 300 insertions(+), 300 deletions(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index d2831a9..fc2da3c 100644 --- a/web/app.js +++ b/web/app.js @@ -24,21 +24,21 @@ app.use(require('./routes/sse')); var env = process.env.NODE_ENV || 'development'; var uri; if (env === 'development') { - uri = 'mongodb://localhost:27017/helpthehome' + uri = 'mongodb://localhost:27017/helpthehome' } else { - // for qa and production set it on heroku config vars - uri = process.env.MONGODB_URI + // for qa and production set it on heroku config vars + uri = process.env.MONGODB_URI } // Mongoose connection to MongoDB mongoose.connect(uri, { useNewUrlParser: true }, function (error) { - if (error) { - console.log(error); - console.log("App was not able to connect to the mongo server!"); - console.log("... double check that the mongo server is running locally"); - } else { - console.log(`connected to ${uri}`); - } + if (error) { + console.log(error); + console.log("App was not able to connect to the mongo server!"); + console.log("... double check that the mongo server is running locally"); + } else { + console.log(`connected to ${uri}`); + } }); app.use('/', indexRouter); diff --git a/web/models/mockpoints.js b/web/models/mockpoints.js index 51bd422..05e9f18 100644 --- a/web/models/mockpoints.js +++ b/web/models/mockpoints.js @@ -3,15 +3,15 @@ var mongoose = require('mongoose'); // Mongoose Schema definition var Schema = mongoose.Schema; var dumbJsonSchema = new Schema({ - type: String, - coordinates: Array, - gender: String, - age: String, - race: String, - longhair: Boolean, - longbeard: Boolean, - extra: String, - status: String + type: String, + coordinates: Array, + gender: String, + age: String, + race: String, + longhair: Boolean, + longbeard: Boolean, + extra: String, + status: String }); // Mongoose Model definition @@ -20,16 +20,16 @@ var dumbJson = mongoose.model('dumbJstring', dumbJsonSchema, 'dumbpointscollecti // this function gets ALL the points from the db // returns the entire document without modifications exports.get_points = function(callback) { - dumbJson.find({}).exec(function(err, docs) { - if (err) callback(err, null); - callback(null, docs); - }); + dumbJson.find({}).exec(function(err, docs) { + if (err) callback(err, null); + callback(null, docs); + }); } // this function stores A user report into the db exports.save_request = function(data, callback) { - dumbJson.create(data, function(err, result) { - if (err) callback(err, null); - callback(null, result); - }); + dumbJson.create(data, function(err, result) { + if (err) callback(err, null); + callback(null, result); + }); } diff --git a/web/models/points.js b/web/models/points.js index e8c181e..d506900 100644 --- a/web/models/points.js +++ b/web/models/points.js @@ -3,15 +3,15 @@ var mongoose = require('mongoose'); // Mongoose Schema definition var Schema = mongoose.Schema; var JsonSchema = new Schema({ - type: String, - coordinates: Array, - gender: String, - age: String, - race: String, - longhair: Boolean, - longbeard: Boolean, - extra: String, - status: String + type: String, + coordinates: Array, + gender: String, + age: String, + race: String, + longhair: Boolean, + longbeard: Boolean, + extra: String, + status: String }); // Mongoose Model definition @@ -20,34 +20,34 @@ var Json = mongoose.model('Jstring', JsonSchema, 'pointscollection'); // this function gets ALL the points from the db // returns the entire document without modifications exports.get_points = function(callback) { - Json.find({}).exec(function(err, docs) { - if (err) callback(err, null); - callback(null, docs); - }); + Json.find({}).exec(function(err, docs) { + if (err) callback(err, null); + callback(null, docs); + }); } exports.get_all_active_points = function(callback) { - var activeStatusTypes = ["new", "pending"]; - Json.find({ status: { $in: activeStatusTypes } }).exec(function(err, docs) { - if (err) callback(err, null); - callback(null, docs); - }); + var activeStatusTypes = ["new", "pending"]; + Json.find({ status: { $in: activeStatusTypes } }).exec(function(err, docs) { + if (err) callback(err, null); + callback(null, docs); + }); } // this function stores A user report into the db exports.save_request = function(data, callback) { - Json.create(data, function(err, result) { - if (err) callback(err, null); - callback(null, result); - }); + Json.create(data, function(err, result) { + if (err) callback(err, null); + callback(null, result); + }); } exports.update_point_status = function(id, newStatus, callback) { - Json.findByIdAndUpdate(id, {status: newStatus}, {new: true}, - function(err, result) { - if (err) callback(err, null); - // result contains the updated point document - callback(null, result); - } - ); + Json.findByIdAndUpdate(id, {status: newStatus}, {new: true}, + function(err, result) { + if (err) callback(err, null); + // result contains the updated point document + callback(null, result); + } + ); } diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 1f18e09..5ee9219 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -5,197 +5,197 @@ let currPoint; const Races = { - "White" : "European or White", - "eAsian" : "East Asian", - "sAsian" : "South Asian", - "Black" : "Black or African American", - "Aboriginal": "Aboriginal", - "Other" : "Other", + "White" : "European or White", + "eAsian" : "East Asian", + "sAsian" : "South Asian", + "Black" : "Black or African American", + "Aboriginal": "Aboriginal", + "Other" : "Other", }; const PendingIcon = new L.Icon({ - iconAnchor: [ 12, 41 ], - iconUrl: "../images/orange-icon.png", - iconSize: [ 25, 41 ], - popupAnchor: [ 1, -34 ], - shadowSize: [ 41, 41 ], - shadowUrl: "../images/marker-shadow.png", - tooltipAnchor: [ 16, -28 ] + iconAnchor: [ 12, 41 ], + iconUrl: "../images/orange-icon.png", + iconSize: [ 25, 41 ], + popupAnchor: [ 1, -34 ], + shadowSize: [ 41, 41 ], + shadowUrl: "../images/marker-shadow.png", + tooltipAnchor: [ 16, -28 ] }); function plotPointsOnMap(points) { - L.geoJson(points, { - pointToLayer: function (feature, latlng) { - //return L.circleMarker(latlng); - latlngbounds.extend(latlng); - if (feature.status === "pending") { - return L.marker(latlng, {icon: PendingIcon}); - } - return L.marker(latlng); - } - }).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 - map.fitBounds(latlngbounds.pad(0.20)); + L.geoJson(points, { + pointToLayer: function (feature, latlng) { + //return L.circleMarker(latlng); + latlngbounds.extend(latlng); + if (feature.status === "pending") { + return L.marker(latlng, {icon: PendingIcon}); + } + return L.marker(latlng); + } + }).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 + map.fitBounds(latlngbounds.pad(0.20)); } // show details about point // e is the event info function showDetails(e) { - if(currPoint !== undefined) { - if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../images/blue-icon.png'; - } - else if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../images/orange-icon.png'; - } - } - - // layer.feature.geometry gives you access to all the fields - let layer = e.layer; - currPoint = layer; - - if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../images/blue-icon-focused.png'; - } - else if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../images/orange-icon-focused.png'; - } - - const pointBounds = [currPoint.getLatLng()]; - map.fitBounds(pointBounds); - - let sideBar = document.getElementById('sidebar'); - - if (getComputedStyle(sideBar).visibility === 'hidden') { - sideBar.style.visibility = 'visible'; - } - - // 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 = ""; - } - - // 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.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 pendingBtn = document.getElementById('pending-btn'); - pendingBtn.addEventListener('click', markAsPending); - - let completedBtn = document.getElementById('completed-btn'); - completedBtn.addEventListener('click', markAsCompleted); - - let closeBtn = document.getElementById('close-btn'); - closeBtn.addEventListener('click', closeDetails); + if(currPoint !== undefined) { + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../images/blue-icon.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../images/orange-icon.png'; + } + } + + // layer.feature.geometry gives you access to all the fields + let layer = e.layer; + currPoint = layer; + + if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../images/blue-icon-focused.png'; + } + else if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../images/orange-icon-focused.png'; + } + + const pointBounds = [currPoint.getLatLng()]; + map.fitBounds(pointBounds); + + let sideBar = document.getElementById('sidebar'); + + if (getComputedStyle(sideBar).visibility === 'hidden') { + sideBar.style.visibility = 'visible'; + } + + // 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 = ""; + } + + // 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.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 pendingBtn = document.getElementById('pending-btn'); + pendingBtn.addEventListener('click', markAsPending); + + let completedBtn = document.getElementById('completed-btn'); + completedBtn.addEventListener('click', markAsCompleted); + + let closeBtn = document.getElementById('close-btn'); + closeBtn.addEventListener('click', closeDetails); } function markAsPending(e) { - let currPointDetails = currPoint.feature.geometry; - let currPointId = currPointDetails._id; - if (currPointDetails.status === "pending") return; - - currPoint._icon.src = '../images/orange-icon-focused.png'; - currPointDetails.status = "pending"; - - updatePointStatusInDb(currPointId, "pending") - .then(function(responseJson) { - alert("Your change has been saved."); - currPoint._icon.src = '../images/orange-icon-focused.png'; - }) - .catch(function(error) { - alert(error); - }); + let currPointDetails = currPoint.feature.geometry; + let currPointId = currPointDetails._id; + if (currPointDetails.status === "pending") return; + + currPoint._icon.src = '../images/orange-icon-focused.png'; + currPointDetails.status = "pending"; + + updatePointStatusInDb(currPointId, "pending") + .then(function(responseJson) { + alert("Your change has been saved."); + currPoint._icon.src = '../images/orange-icon-focused.png'; + }) + .catch(function(error) { + alert(error); + }); } function markAsCompleted(e) { - let currPointDetails = currPoint.feature.geometry; - let currPointId = currPointDetails._id; - if (currPointDetails.status === "complete") return; - - updatePointStatusInDb(currPointId, "complete") - .then(function(responseJson) { - alert("Your change has been saved."); - map.removeLayer(currPoint); - currPoint = undefined; - }) - .catch(function(error) { - alert(error); - }); - closeDetails(); + let currPointDetails = currPoint.feature.geometry; + let currPointId = currPointDetails._id; + if (currPointDetails.status === "complete") return; + + updatePointStatusInDb(currPointId, "complete") + .then(function(responseJson) { + alert("Your change has been saved."); + map.removeLayer(currPoint); + currPoint = undefined; + }) + .catch(function(error) { + alert(error); + }); + closeDetails(); } function closeDetails(e) { - let details = document.getElementById('sidebar') - details.style.visibility = 'hidden'; - - if (currPoint.feature.geometry.status === "pending") { - currPoint._icon.src = '../images/orange-icon.png'; - } - else if (currPoint.feature.geometry.status === "new") { - currPoint._icon.src = '../images/blue-icon.png'; - } - map.fitBounds(latlngbounds.pad(0.20)); + let details = document.getElementById('sidebar') + details.style.visibility = 'hidden'; + + if (currPoint.feature.geometry.status === "pending") { + currPoint._icon.src = '../images/orange-icon.png'; + } + else if (currPoint.feature.geometry.status === "new") { + currPoint._icon.src = '../images/blue-icon.png'; + } + map.fitBounds(latlngbounds.pad(0.20)); } // returns a Promise object function updatePointStatusInDb(pointId, pointStatus) { - return fetch('/savestatus/' + pointStatus, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({id: pointId}), - }) - .then(function(response) { - if (response.ok) { - return response.json(); - } - throw new Error("We were unable to save your changes."); - }); + return fetch('/savestatus/' + pointStatus, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({id: pointId}), + }) + .then(function(response) { + if (response.ok) { + return response.json(); + } + throw new Error("We were unable to save your changes."); + }); } // different basemap L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}.{ext}', { - attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', - subdomains: 'abcd', - minZoom: 0, - maxZoom: 18, - ext: 'png' + attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap contributors', + subdomains: 'abcd', + minZoom: 0, + maxZoom: 18, + ext: 'png' }).addTo(map); // keep track of the boundary of the markers so that we can update the @@ -203,29 +203,29 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} var latlngbounds = new L.latLngBounds(); if (points.length) { - plotPointsOnMap(points); + plotPointsOnMap(points); } // setup live updates if (window.EventSource) { - var source = new EventSource('/stream'); - - source.addEventListener('message', function(e) { - var data = JSON.parse(e.data); - if (data.coordinates) { - points.push(data); - plotPointsOnMap(data); - } - }, false) - - source.addEventListener('open', function(e) { - console.log("Connection was opened") - }, false) - - source.addEventListener('error', function(e) { - if (e.readyState == EventSource.CLOSED) { - console.log("Connection was closed") - } - }, false) + var source = new EventSource('/stream'); + + source.addEventListener('message', function(e) { + var data = JSON.parse(e.data); + if (data.coordinates) { + points.push(data); + plotPointsOnMap(data); + } + }, false) + + source.addEventListener('open', function(e) { + console.log("Connection was opened") + }, false) + + source.addEventListener('error', function(e) { + if (e.readyState == EventSource.CLOSED) { + console.log("Connection was closed") + } + }, false) } else { - console.log("sse not supported."); + console.log("sse not supported."); } diff --git a/web/routes/index.js b/web/routes/index.js index 05df4d4..24fa334 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -11,82 +11,82 @@ const glookup = new GeoJsonGeometriesLookup(torontoNeighbourhoords); /* GET home page. */ router.get('/', function(req, res, next) { - // for now just redirect to /map - //res.redirect('/map'); - res.render('index'); + // for now just redirect to /map + //res.redirect('/map'); + res.render('index'); }); /* GET Map page. */ router.get('/map', function(req,res) { - Points.get_all_active_points(function(err, points){ - res.render('map', { - lat : 43.665234, - lng : -79.383370, - points: points - }); - }); + Points.get_all_active_points(function(err, points){ + res.render('map', { + lat : 43.665234, + lng : -79.383370, + points: points + }); + }); }); router.post('/mobilerequest', function(req, res) { - var point = req.body; + var point = req.body; - if (!point.coordinates.length) { - var errMssg = "Coordinates field must not be empty in a request."; - return res.status(422).send({ error: errMssg }); - } + if (!point.coordinates.length) { + var errMssg = "Coordinates field must not be empty in a request."; + return res.status(422).send({ error: errMssg }); + } - if (!glookup.hasContainers(point)) { - var errMssg = "Sorry, we currently only support locations strictly within the City of Toronto."; - return res.status(422).send({ error: errMssg }); - } + if (!glookup.hasContainers(point)) { + var errMssg = "Sorry, we currently only support locations strictly within the City of Toronto."; + return res.status(422).send({ error: errMssg }); + } - // here we are guaranteed to have a valid point in Toronto - Points.save_request(point, function(err, result) { - if (err) { - console.log(`err inserting mobile request into db: ${err}`); - res.status(500).send({ error: "Sorry, something failed on our end." }); - } else { - // send event to all connections - for(var i = 0; i < connections.length; i++) { - connections[i].sseSend(result); - } - console.log(result); - res.status(201).send({'status': 'success'}); - } - }); + // here we are guaranteed to have a valid point in Toronto + Points.save_request(point, function(err, result) { + if (err) { + console.log(`err inserting mobile request into db: ${err}`); + res.status(500).send({ error: "Sorry, something failed on our end." }); + } else { + // send event to all connections + for(var i = 0; i < connections.length; i++) { + connections[i].sseSend(result); + } + console.log(result); + res.status(201).send({'status': 'success'}); + } + }); }); router.post('/savestatus/:status', function(req, res) { - var data = req.body; - var pointId = data.id; - var setStatus = req.params.status; - if ( - setStatus !== "new" && - setStatus !== "pending" && - setStatus !== "complete" - ) { - console.log("Invalid status supplied."); - return res.status(422).send({error: "Error: Status must be one of 'new', 'pending', or 'complete'"}); - } + var data = req.body; + var pointId = data.id; + var setStatus = req.params.status; + if ( + setStatus !== "new" && + setStatus !== "pending" && + setStatus !== "complete" + ) { + console.log("Invalid status supplied."); + return res.status(422).send({error: "Error: Status must be one of 'new', 'pending', or 'complete'"}); + } - // here we are guaranteed to be able to do the query - Points.update_point_status(pointId, setStatus, function(err, result) { - if (err) { - console.log(`err updating point status in db: ${err}`); - res.status(500).send({ error: "Oops. Something went wrong on our end." }); - } else { - console.log(result); - res.status(200).send({'status': 'success'}); - } - }); + // here we are guaranteed to be able to do the query + Points.update_point_status(pointId, setStatus, function(err, result) { + if (err) { + console.log(`err updating point status in db: ${err}`); + res.status(500).send({ error: "Oops. Something went wrong on our end." }); + } else { + console.log(result); + res.status(200).send({'status': 'success'}); + } + }); }); router.get('/stream', function(req, res){ - // set up server side event (communication line between front end and server) - res.sseSetup(); - // send an event to the front end to open the connection - res.sseSend('ok'); - // push connection to connection array - connections.push(res); + // set up server side event (communication line between front end and server) + res.sseSetup(); + // send an event to the front end to open the connection + res.sseSend('ok'); + // push connection to connection array + connections.push(res); }); module.exports = router; -- cgit v1.2.3