From 0a573cc3e918e751f5a9e02f5877f7786636539d Mon Sep 17 00:00:00 2001 From: ivanshen Date: Tue, 5 Mar 2019 15:58:03 -0500 Subject: Added live update functionality (feat 8) --- web/app.js | 6 +++--- web/public/javascripts/map.js | 32 +++++++++++++++++++++++++++++++- web/routes/index.js | 13 ++++++++++++- web/routes/sse.js | 15 +++++++++++++++ 4 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 web/routes/sse.js (limited to 'web') diff --git a/web/app.js b/web/app.js index f0ae3a5..0dd447d 100644 --- a/web/app.js +++ b/web/app.js @@ -19,13 +19,14 @@ app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); +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' // use for small testing only if really necessary - // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { @@ -45,7 +46,6 @@ mongoose.connect(uri, { useNewUrlParser: true }, function (error) { app.use('/', indexRouter); app.use('/users', usersRouter); - // catch 404 and forward to error handler app.use(function(req, res, next) { next(createError(404)); diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 190307d..5739dec 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -11,7 +11,6 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} maxZoom: 18, ext: 'png' }).addTo(map); - L.geoJson(points, { pointToLayer: function (feature, latlng) { //return L.circleMarker(latlng); @@ -21,3 +20,34 @@ L.geoJson(points, { // layer.feature.geometry gives you access to all the fields return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) +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); + L.geoJson(points, { + pointToLayer: function (feature, latlng) { + //return L.circleMarker(latlng); + return L.marker(latlng); + } + }).bindPopup(function (layer) { + // layer.feature.geometry gives you access to all the fields + return "

" + JSON.stringify(layer.feature.geometry) + "

"; + }).addTo(map) + } + }, 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."); +} \ No newline at end of file diff --git a/web/routes/index.js b/web/routes/index.js index b2d0796..6e6b920 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -2,7 +2,7 @@ var express = require('express'); var router = express.Router(); var Mockpoints = require('../models/mockpoints'); var Points = require('../models/points'); - +const connections = []; /* GET home page. */ router.get('/', function(req, res, next) { // for now just redirect to /map @@ -11,6 +11,7 @@ router.get('/', function(req, res, next) { /* GET Map page. */ router.get('/map', function(req,res) { + // Stream.emit("push", "test", { msg: "admit one" }); // load the map with all the points // Mockpoints.get_points(function(err, points){ Points.get_points(function(err, points){ @@ -36,10 +37,20 @@ router.post('/mobilerequest', function(req, res) { console.log(`err inserting mobile request into db: ${err}`); res.status(500).send({ error: "boo:(" }); } else { + for(var i = 0; i < connections.length; i++) { + connections[i].sseSend(data); + } console.log(result); res.status(200).send({'status': 'success', 'data': data}); } }); + }); + +router.get('/stream', function(req, res){ + res.sseSetup() + res.sseSend('ok'); + connections.push(res); +}); module.exports = router; diff --git a/web/routes/sse.js b/web/routes/sse.js new file mode 100644 index 0000000..5cd9a3f --- /dev/null +++ b/web/routes/sse.js @@ -0,0 +1,15 @@ +module.exports = function (req, res, next) { + res.sseSetup = function() { + res.writeHead(200, { + 'Content-Type': 'text/event-stream', + 'Cache-Control': 'no-cache', + 'Connection': 'keep-alive' + }) + } + + res.sseSend = function(data) { + res.write("data: " + JSON.stringify(data) + "\n\n"); + } + + next() +} \ No newline at end of file -- cgit v1.2.3 From 3f5bea8fd49106249272e5f0f9158cbcd76c89a4 Mon Sep 17 00:00:00 2001 From: Ivan Shen Date: Tue, 5 Mar 2019 16:12:26 -0500 Subject: Point back to local db --- web/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index 0dd447d..9d6e9d0 100644 --- a/web/app.js +++ b/web/app.js @@ -24,9 +24,9 @@ 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' // use for small testing only if really necessary - uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { -- cgit v1.2.3 From 9f5447a54ba8bbbcc271035d180822efedce6670 Mon Sep 17 00:00:00 2001 From: Ivan Shen Date: Tue, 5 Mar 2019 16:13:00 -0500 Subject: Remove commented code --- web/routes/index.js | 1 - 1 file changed, 1 deletion(-) (limited to 'web') diff --git a/web/routes/index.js b/web/routes/index.js index 6e6b920..885724d 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -11,7 +11,6 @@ router.get('/', function(req, res, next) { /* GET Map page. */ router.get('/map', function(req,res) { - // Stream.emit("push", "test", { msg: "admit one" }); // load the map with all the points // Mockpoints.get_points(function(err, points){ Points.get_points(function(err, points){ -- cgit v1.2.3 From 3b36b1ad459ee739a87a32a18bb5846770125bec Mon Sep 17 00:00:00 2001 From: ivanshen Date: Tue, 5 Mar 2019 16:39:35 -0500 Subject: modularize plot points --- web/app.js | 2 +- web/public/javascripts/map.js | 32 ++++++++++++++------------------ web/routes/index.js | 6 +++++- 3 files changed, 20 insertions(+), 20 deletions(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index 9d6e9d0..1bb97d8 100644 --- a/web/app.js +++ b/web/app.js @@ -26,7 +26,7 @@ var uri; if (env === 'development') { uri = 'mongodb://localhost:27017/helpthehome' // use for small testing only if really necessary - // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 5739dec..2547780 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -3,6 +3,18 @@ // attribution: '© OpenStreetMap contributors' // }).addTo(map); +function plotPointsOnMap(points) { + L.geoJson(points, { + pointToLayer: function (feature, latlng) { + //return L.circleMarker(latlng); + return L.marker(latlng); + } + }).bindPopup(function (layer) { + // layer.feature.geometry gives you access to all the fields + return "

" + JSON.stringify(layer.feature.geometry) + "

"; + }).addTo(map) +} + // 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', @@ -11,15 +23,7 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} maxZoom: 18, ext: 'png' }).addTo(map); -L.geoJson(points, { - pointToLayer: function (feature, latlng) { - //return L.circleMarker(latlng); - return L.marker(latlng); - } -}).bindPopup(function (layer) { - // layer.feature.geometry gives you access to all the fields - return "

" + JSON.stringify(layer.feature.geometry) + "

"; -}).addTo(map) +plotPointsOnMap(points); if (!!window.EventSource) { var source = new EventSource('/stream'); @@ -27,15 +31,7 @@ if (!!window.EventSource) { var data = JSON.parse(e.data); if (data.coordinates) { points.push(data); - L.geoJson(points, { - pointToLayer: function (feature, latlng) { - //return L.circleMarker(latlng); - return L.marker(latlng); - } - }).bindPopup(function (layer) { - // layer.feature.geometry gives you access to all the fields - return "

" + JSON.stringify(layer.feature.geometry) + "

"; - }).addTo(map) + plotPointsOnMap(points); } }, false) diff --git a/web/routes/index.js b/web/routes/index.js index 885724d..b2ba91f 100644 --- a/web/routes/index.js +++ b/web/routes/index.js @@ -36,6 +36,7 @@ router.post('/mobilerequest', function(req, res) { console.log(`err inserting mobile request into db: ${err}`); res.status(500).send({ error: "boo:(" }); } else { + // send event to all connections for(var i = 0; i < connections.length; i++) { connections[i].sseSend(data); } @@ -48,8 +49,11 @@ router.post('/mobilerequest', function(req, res) { router.get('/stream', function(req, res){ - res.sseSetup() + // 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 From b70aaf5168dd60da1d4087962b7250d584b0936f Mon Sep 17 00:00:00 2001 From: Ivan Shen Date: Tue, 5 Mar 2019 16:38:48 -0500 Subject: Comment out prod db --- web/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index 1bb97d8..9d6e9d0 100644 --- a/web/app.js +++ b/web/app.js @@ -26,7 +26,7 @@ var uri; if (env === 'development') { uri = 'mongodb://localhost:27017/helpthehome' // use for small testing only if really necessary - uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { -- cgit v1.2.3 From a5ff29d43a952ebe2fcc18181a01beda0e5d62d2 Mon Sep 17 00:00:00 2001 From: Ivan Shen Date: Tue, 5 Mar 2019 16:41:47 -0500 Subject: remove unnecessary !! --- web/public/javascripts/map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 2547780..4b8b8f3 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -24,7 +24,7 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} ext: 'png' }).addTo(map); plotPointsOnMap(points); -if (!!window.EventSource) { +if (window.EventSource) { var source = new EventSource('/stream'); source.addEventListener('message', function(e) { @@ -46,4 +46,4 @@ if (!!window.EventSource) { }, false) } else { console.log("sse not supported."); -} \ No newline at end of file +} -- cgit v1.2.3 From 4bcda39aeae66b838c79e953e98c54055c3ecb70 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Wed, 6 Mar 2019 23:07:12 -0500 Subject: Added functionality so that whenever a point is clicked it opens up a Details sidebar which shows information about that point. --- web/app.js | 4 +- web/public/javascripts/map.js | 85 ++++++++++++++++++++++++++++++++++++++++ web/public/stylesheets/style.css | 34 +++++++++++++--- web/views/map.pug | 2 - 4 files changed, 116 insertions(+), 9 deletions(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index f0ae3a5..3ad2697 100644 --- a/web/app.js +++ b/web/app.js @@ -23,9 +23,9 @@ app.use(express.static(path.join(__dirname, 'public'))); var env = process.env.NODE_ENV || 'development'; var uri; if (env === 'development') { - uri = 'mongodb://localhost:27017/helpthehome' + // uri = 'mongodb://localhost:27017/helpthehome' // use for small testing only if really necessary - // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 190307d..2ca45d0 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -19,5 +19,90 @@ L.geoJson(points, { } }).bindPopup(function (layer) { // layer.feature.geometry gives you access to all the fields + showDetails(layer) + return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) + + +function showDetails(layer) { + let sideBar + + if (document.getElementById('sidebar') === null) { + sideBar = document.createElement('div') + let notificationsHeaderElement = document.createElement('h1') + notificationsHeaderElement.appendChild(document.createTextNode('Details')) + sideBar.appendChild(notificationsHeaderElement) + sideBar.id = "sidebar" + } + else { + sideBar = document.getElementById('sidebar') + } + + let point + + if (document.getElementById('point') !== null) { + point = document.getElementById('point') + point.parentNode.removeChild(point) + } + + point = document.createElement('div') + point.id = 'point' + + let strongElement = document.createElement('strong') + let ageRangeText = document.createTextNode('Age range: ') + strongElement.appendChild(ageRangeText) + point.appendChild(strongElement) + point.appendChild(document.createTextNode(layer.feature.geometry['ageRange'])) + point.appendChild(document.createElement('br')) + + let strongElement2 = document.createElement('strong') + let clothingDescText = document.createTextNode('Clothing description: ') + strongElement2.appendChild(clothingDescText) + point.appendChild(strongElement2) + point.appendChild(document.createTextNode(layer.feature.geometry['clothingDescription'])) + point.appendChild(document.createElement('br')) + + let strongElement3 = document.createElement('strong') + let injuryStatusText = document.createTextNode('Injury status: ') + strongElement3.appendChild(injuryStatusText) + point.appendChild(strongElement3) + + let isInjured = layer.feature.geometry['isInjured'] + let injurySpan = document.createElement('span') + if (isInjured) { + injurySpan.appendChild(document.createTextNode('Injured')) + injurySpan.style.color = 'red' + } + else { + injurySpan.appendChild(document.createTextNode('Not injured')) + injurySpan.style.color = 'green' + } + point.appendChild(injurySpan) + point.appendChild(document.createElement('br')) + + let strongElement4 = document.createElement('strong') + let helpReasonText = document.createTextNode('Reason for help: ') + strongElement4.appendChild(helpReasonText) + point.appendChild(strongElement4) + point.appendChild(document.createTextNode(layer.feature.geometry['reasonForHelp'])) + + sideBar.appendChild(point) + + let closeBtn = document.createElement('button') + let closeBtnText = document.createTextNode('Close') + closeBtn.id = 'close-btn' + closeBtn.appendChild(closeBtnText) + + sideBar.appendChild(closeBtn) + + let insertBefore = document.getElementById('map') + insertBefore.parentNode.insertBefore(sideBar, insertBefore) + + closeBtn.addEventListener('click', closeDetails) +} + +function closeDetails(e) { + let details = document.getElementById('sidebar') + details.parentNode.removeChild(details) +} \ No newline at end of file diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index c3bd05c..0cb3232 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -3,9 +3,10 @@ html, body { overflow: hidden; } #map { - width: 65%; + width: 100%; height: 100%; - float: right; + position: absolute; + z-index: 1; } body { margin:0; @@ -16,10 +17,33 @@ a { color:#00B7FF; } #sidebar { - width: 35%; - height: 100%; + top: 5px; + left: 5px; + z-index: 2; + width: 350px; + height: 250px; + max-height: 250px; + overflow: auto; + position: relative; float: left; - background-color: #e70000; + background-color: lightgrey; + border-radius: 10px; +} +#point { + background-color: #0CC5EA; + width: 90%; + margin-left: auto; + margin-right: auto; + padding: 5px; + border-radius: 10px; +} +#close-btn { + background-color: red; + position: absolute; + right: 5px; + bottom: 5px; + border-radius: 10px; + width: 100px; } h1 { text-align: center; diff --git a/web/views/map.pug b/web/views/map.pug index 725c8a8..744fe31 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -1,7 +1,5 @@ extends layout.pug block content - #sidebar - h1 This is a sidebar #map script(type='text/javascript'). -- cgit v1.2.3 From 2b7c39ed65c6652c24f1f5140214bae7f3438960 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Thu, 7 Mar 2019 13:54:28 -0500 Subject: Added comments and made DOM easier to work with. --- web/app.js | 4 +- web/public/javascripts/map.js | 94 +++++++++++++++++----------------------- web/public/stylesheets/style.css | 1 + web/views/map.pug | 12 +++++ 4 files changed, 54 insertions(+), 57 deletions(-) (limited to 'web') diff --git a/web/app.js b/web/app.js index 3ad2697..f0ae3a5 100644 --- a/web/app.js +++ b/web/app.js @@ -23,9 +23,9 @@ app.use(express.static(path.join(__dirname, 'public'))); var env = process.env.NODE_ENV || 'development'; var uri; if (env === 'development') { - // uri = 'mongodb://localhost:27017/helpthehome' + uri = 'mongodb://localhost:27017/helpthehome' // use for small testing only if really necessary - uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' + // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome?retryWrites=true' } else if (env === 'qa') { uri = process.env.MONGODB_URI } else if (env === 'production') { diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 2ca45d0..fe33d73 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -19,57 +19,52 @@ L.geoJson(points, { } }).bindPopup(function (layer) { // layer.feature.geometry gives you access to all the fields + + // show the details of the point in a sidebar showDetails(layer) return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) - +// show details about point +// layer is the dictionary that holds info about the point function showDetails(layer) { - let sideBar - - if (document.getElementById('sidebar') === null) { - sideBar = document.createElement('div') - let notificationsHeaderElement = document.createElement('h1') - notificationsHeaderElement.appendChild(document.createTextNode('Details')) - sideBar.appendChild(notificationsHeaderElement) - sideBar.id = "sidebar" - } - else { - sideBar = document.getElementById('sidebar') + let sideBar = document.getElementById('sidebar') + + if (getComputedStyle(sideBar).visibility === 'hidden') { + sideBar.style.visibility = 'visible' } - let point + let point = document.getElementById('point') - if (document.getElementById('point') !== null) { - point = document.getElementById('point') - point.parentNode.removeChild(point) - } + //get the previous input text from the previous point + let prevUserInput = point.getElementsByClassName('user-input') - point = document.createElement('div') - point.id = 'point' + // remove the previous point text + while (prevUserInput.length !== 0) { + prevUserInput[0].parentNode.removeChild(prevUserInput[0]) + } - let strongElement = document.createElement('strong') - let ageRangeText = document.createTextNode('Age range: ') - strongElement.appendChild(ageRangeText) - point.appendChild(strongElement) - point.appendChild(document.createTextNode(layer.feature.geometry['ageRange'])) - point.appendChild(document.createElement('br')) + let pointBreaks = point.getElementsByClassName('point-break') - let strongElement2 = document.createElement('strong') - let clothingDescText = document.createTextNode('Clothing description: ') - strongElement2.appendChild(clothingDescText) - point.appendChild(strongElement2) - point.appendChild(document.createTextNode(layer.feature.geometry['clothingDescription'])) - point.appendChild(document.createElement('br')) + // 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]) - let strongElement3 = document.createElement('strong') - let injuryStatusText = document.createTextNode('Injury status: ') - strongElement3.appendChild(injuryStatusText) - point.appendChild(strongElement3) + // 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' @@ -78,31 +73,20 @@ function showDetails(layer) { injurySpan.appendChild(document.createTextNode('Not injured')) injurySpan.style.color = 'green' } - point.appendChild(injurySpan) - point.appendChild(document.createElement('br')) - - let strongElement4 = document.createElement('strong') - let helpReasonText = document.createTextNode('Reason for help: ') - strongElement4.appendChild(helpReasonText) - point.appendChild(strongElement4) - point.appendChild(document.createTextNode(layer.feature.geometry['reasonForHelp'])) - - sideBar.appendChild(point) - - let closeBtn = document.createElement('button') - let closeBtnText = document.createTextNode('Close') - closeBtn.id = 'close-btn' - closeBtn.appendChild(closeBtnText) - - sideBar.appendChild(closeBtn) + pointBreaks[2].parentNode.insertBefore(injurySpan, pointBreaks[2]) - let insertBefore = document.getElementById('map') - insertBefore.parentNode.insertBefore(sideBar, insertBefore) + // 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 closeBtn = document.getElementById('close-btn') closeBtn.addEventListener('click', closeDetails) } function closeDetails(e) { let details = document.getElementById('sidebar') - details.parentNode.removeChild(details) + details.style.visibility = 'hidden' } \ No newline at end of file diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 0cb3232..06609c2 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -28,6 +28,7 @@ a { float: left; background-color: lightgrey; border-radius: 10px; + visibility: hidden; } #point { background-color: #0CC5EA; diff --git a/web/views/map.pug b/web/views/map.pug index 744fe31..46e7848 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -1,5 +1,17 @@ extends layout.pug block content + #sidebar + h1 Details + #point + strong Age range: + br.point-break + strong Clothing description: + br.point-break + strong Injury status: + br.point-break + strong Reason for help: + button#close-btn Close + #map script(type='text/javascript'). -- cgit v1.2.3 From 5f1fa4936a3b45139c2bc111ecd602f3d13c2e90 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 7 Mar 2019 19:51:07 -0500 Subject: rezooming map using leaflet bounds to show all markers --- web/public/javascripts/map.js | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'web') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 190307d..bad07c8 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -12,12 +12,20 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r} ext: 'png' }).addTo(map); +// keep track of the boundary of the markers so that we can update the +// map to fit them all +var latlngbounds = new L.latLngBounds(); + L.geoJson(points, { pointToLayer: function (feature, latlng) { //return L.circleMarker(latlng); + latlngbounds.extend(latlng); return L.marker(latlng); } }).bindPopup(function (layer) { // layer.feature.geometry gives you access to all the fields return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) + +// rezoom the map so that all the markers fit in the view +map.fitBounds(latlngbounds); -- cgit v1.2.3 From 54e468b728dbdce20f98bae88caaaaa74b122d24 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 7 Mar 2019 20:37:51 -0500 Subject: added padding for distant points just in case --- web/public/javascripts/map.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'web') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index bad07c8..3dbf517 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -27,5 +27,6 @@ L.geoJson(points, { return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) -// rezoom the map so that all the markers fit in the view -map.fitBounds(latlngbounds); +// 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)); -- cgit v1.2.3 From 6693b77761373a269c6d797ecb6a8eedec946e9a Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 8 Mar 2019 13:56:38 -0500 Subject: Modified Details sidebar so that the close button always stays at the bottom of the box and doesn't overlap any text. --- web/public/stylesheets/style.css | 39 ++++++++++++++++++++++++++++----------- web/views/map.pug | 22 ++++++++++++---------- 2 files changed, 40 insertions(+), 21 deletions(-) (limited to 'web') diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 06609c2..85d3f10 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -21,31 +21,48 @@ a { left: 5px; z-index: 2; width: 350px; - height: 250px; - max-height: 250px; - overflow: auto; - position: relative; + height: 275px; + max-height: 275px; +/* overflow: auto; +*/ position: relative; float: left; background-color: lightgrey; border-radius: 10px; visibility: hidden; } +#details-header { + text-align: center; + margin-top: 10px; + margin-bottom: 10px; +} +#point-container { + overflow: auto; + max-height: 195px; +} #point { background-color: #0CC5EA; width: 90%; margin-left: auto; margin-right: auto; + margin-bottom: 5px; padding: 5px; border-radius: 10px; } +#close-btn-container { + position: fixed; + height: 30px; + top: 250px; + background-color: lightgrey; + width: 350px; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; +} #close-btn { background-color: red; - position: absolute; - right: 5px; - bottom: 5px; + position: relative; + margin-top: 4px; + float: right; + margin-right: 20px; border-radius: 10px; width: 100px; -} -h1 { - text-align: center; -} +} \ No newline at end of file diff --git a/web/views/map.pug b/web/views/map.pug index 46e7848..f5837b6 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -1,16 +1,18 @@ extends layout.pug block content #sidebar - h1 Details - #point - strong Age range: - br.point-break - strong Clothing description: - br.point-break - strong Injury status: - br.point-break - strong Reason for help: - button#close-btn Close + 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: + #close-btn-container + button#close-btn Close #map -- cgit v1.2.3 From 66900f8cb8b7edec0ad2c5f4a4ebd21b70a3e86a Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 8 Mar 2019 15:59:58 -0500 Subject: Changed code so that the popup doesn't show up when the marker is clicked. --- web/public/javascripts/map.js | 16 ++++++---------- web/public/stylesheets/style.css | 3 +-- 2 files changed, 7 insertions(+), 12 deletions(-) (limited to 'web') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index fe33d73..4a1e697 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -17,18 +17,14 @@ L.geoJson(points, { //return L.circleMarker(latlng); return L.marker(latlng); } -}).bindPopup(function (layer) { - // layer.feature.geometry gives you access to all the fields - - // show the details of the point in a sidebar - showDetails(layer) - - return "

" + JSON.stringify(layer.feature.geometry) + "

"; -}).addTo(map) +}).on('click', showDetails).addTo(map) // show details about point -// layer is the dictionary that holds info about the point -function showDetails(layer) { +// 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') if (getComputedStyle(sideBar).visibility === 'hidden') { diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 85d3f10..d8618cd 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -23,8 +23,7 @@ a { width: 350px; height: 275px; max-height: 275px; -/* overflow: auto; -*/ position: relative; + position: relative; float: left; background-color: lightgrey; border-radius: 10px; -- cgit v1.2.3