From 091364a736c41812347f527930228d51a15a8df7 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Thu, 21 Mar 2019 13:23:30 -0400 Subject: Saving changes before merge. --- web/app.js | 4 +- web/package-lock.json | 104 +++++++++++++++----------------------- web/package.json | 6 +-- web/public/assets/blue-icon.png | Bin 0 -> 2586 bytes web/public/assets/orange-icon.png | Bin 0 -> 7382 bytes web/public/javascripts/map.js | 29 +++++++++++ 6 files changed, 75 insertions(+), 68 deletions(-) create mode 100644 web/public/assets/blue-icon.png create mode 100644 web/public/assets/orange-icon.png diff --git a/web/app.js b/web/app.js index aa2e75b..0b4ba4c 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_devel?retryWrites=true' + uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome_devel?retryWrites=true' } else { // for qa and production set it on heroku config vars uri = process.env.MONGODB_URI diff --git a/web/package-lock.json b/web/package-lock.json index f2472bd..0c7f4d6 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "dependencies": { "@types/babel-types": { - "version": "7.0.5", - "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.5.tgz", - "integrity": "sha512-0t0R7fKAXT/P++S98djRkXbL9Sxd9NNtfNg3BNw2EQOjVIkiMBdmO55N2Tp3wGK3mylmM7Vck9h5tEoSuSUabA==" + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.6.tgz", + "integrity": "sha512-8zYZyy2kgwBXdz2j8Ix7LOghGiZbOiHf6vqmmBX1r76FdAzVNv7cODyJTEglUWiOdRnXh0s/o58neUwv5vaitQ==" }, "@types/babylon": { "version": "6.16.5", @@ -56,11 +56,6 @@ "repeat-string": "^1.5.2" } }, - "amdefine": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz", - "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=" - }, "array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", @@ -167,12 +162,11 @@ } }, "clean-css": { - "version": "3.4.28", - "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-3.4.28.tgz", - "integrity": "sha1-vxlF6C/ICPVWlebd6uwBQA79A/8=", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", + "integrity": "sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==", "requires": { - "commander": "2.8.x", - "source-map": "0.4.x" + "source-map": "~0.6.0" } }, "cliui": { @@ -185,14 +179,6 @@ "wordwrap": "0.0.2" } }, - "commander": { - "version": "2.8.1", - "resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz", - "integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=", - "requires": { - "graceful-readlink": ">= 1.0.0" - } - }, "constantinople": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", @@ -357,11 +343,6 @@ "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" }, - "graceful-readlink": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", - "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=" - }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -665,18 +646,18 @@ } }, "pug": { - "version": "2.0.0-beta11", - "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.0-beta11.tgz", - "integrity": "sha1-Favmr1AEx+LPRhPksnRlyVRrXwE=", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pug/-/pug-2.0.3.tgz", + "integrity": "sha1-ccuoJTfJWl6rftBGluQiH1Oqh44=", "requires": { - "pug-code-gen": "^1.1.1", - "pug-filters": "^2.1.1", - "pug-lexer": "^3.0.0", - "pug-linker": "^2.0.2", - "pug-load": "^2.0.5", - "pug-parser": "^2.0.2", - "pug-runtime": "^2.0.3", - "pug-strip-comments": "^1.0.2" + "pug-code-gen": "^2.0.1", + "pug-filters": "^3.1.0", + "pug-lexer": "^4.0.0", + "pug-linker": "^3.0.5", + "pug-load": "^2.0.11", + "pug-parser": "^5.0.0", + "pug-runtime": "^2.0.4", + "pug-strip-comments": "^1.0.3" } }, "pug-attrs": { @@ -690,16 +671,16 @@ } }, "pug-code-gen": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-1.1.1.tgz", - "integrity": "sha1-HPcnRO8qA56uajNAyqoRBYcSWOg=", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pug-code-gen/-/pug-code-gen-2.0.1.tgz", + "integrity": "sha1-CVHsgyJddNjPxHan+Zolm199BQw=", "requires": { "constantinople": "^3.0.1", "doctypes": "^1.1.0", "js-stringify": "^1.0.1", - "pug-attrs": "^2.0.2", + "pug-attrs": "^2.0.3", "pug-error": "^1.3.2", - "pug-runtime": "^2.0.3", + "pug-runtime": "^2.0.4", "void-elements": "^2.0.1", "with": "^5.0.0" } @@ -710,23 +691,23 @@ "integrity": "sha1-U659nSm7A89WRJOgJhCfVMR/XyY=" }, "pug-filters": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-2.1.5.tgz", - "integrity": "sha512-xkw71KtrC4sxleKiq+cUlQzsiLn8pM5+vCgkChW2E6oNOzaqTSIBKIQ5cl4oheuDzvJYCTSYzRaVinMUrV4YLQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/pug-filters/-/pug-filters-3.1.0.tgz", + "integrity": "sha1-JxZVVbwEwjbkqisDZiRt+gIbYm4=", "requires": { - "clean-css": "^3.3.0", + "clean-css": "^4.1.11", "constantinople": "^3.0.1", "jstransformer": "1.0.0", "pug-error": "^1.3.2", - "pug-walk": "^1.1.5", + "pug-walk": "^1.1.7", "resolve": "^1.1.6", "uglify-js": "^2.6.1" } }, "pug-lexer": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-3.1.0.tgz", - "integrity": "sha1-/QhzdtSmdbT1n4/vQiiDQ06VgaI=", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/pug-lexer/-/pug-lexer-4.0.0.tgz", + "integrity": "sha1-IQwYRX7y4XYCQnQMXmR715TOwng=", "requires": { "character-parser": "^2.1.1", "is-expression": "^3.0.0", @@ -734,12 +715,12 @@ } }, "pug-linker": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-2.0.3.tgz", - "integrity": "sha1-szH/olc33eacEntWwQ/xf652bco=", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/pug-linker/-/pug-linker-3.0.5.tgz", + "integrity": "sha1-npp65ABWgtAn3uuWsAD4juuDoC8=", "requires": { "pug-error": "^1.3.2", - "pug-walk": "^1.1.2" + "pug-walk": "^1.1.7" } }, "pug-load": { @@ -752,9 +733,9 @@ } }, "pug-parser": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-2.0.2.tgz", - "integrity": "sha1-U6aAz9BQOdywwn0CkJS8SnkmibA=", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/pug-parser/-/pug-parser-5.0.0.tgz", + "integrity": "sha1-45Stmz/KkxI5QK/4hcBuRKt+aOQ=", "requires": { "pug-error": "^1.3.2", "token-stream": "0.0.1" @@ -910,12 +891,9 @@ "integrity": "sha1-CzpmK10Ewxd7GSa+qCsD+Dei70E=" }, "source-map": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", - "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", - "requires": { - "amdefine": ">=0.0.4" - } + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" }, "sparse-bitfield": { "version": "3.0.3", diff --git a/web/package.json b/web/package.json index a669ecb..9278b90 100644 --- a/web/package.json +++ b/web/package.json @@ -10,9 +10,9 @@ "debug": "~2.6.9", "express": "~4.16.0", "http-errors": "~1.6.2", - "morgan": "~1.9.0", - "pug": "2.0.0-beta11", "mongodb": "*", - "mongoose": "*" + "mongoose": "*", + "morgan": "~1.9.0", + "pug": "^2.0.3" } } diff --git a/web/public/assets/blue-icon.png b/web/public/assets/blue-icon.png new file mode 100644 index 0000000..e4abba3 Binary files /dev/null and b/web/public/assets/blue-icon.png differ diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png new file mode 100644 index 0000000..dd725de Binary files /dev/null and b/web/public/assets/orange-icon.png differ diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 3f33bcf..6a82dde 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -2,6 +2,14 @@ // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors' // }).addTo(map); +let currPoint + +let orangeIcon = L.icon({ + iconUrl: '../assets/orange-icon.png', + iconSize: [25, 41], + iconAnchor: [12, 41] +}) + function plotPointsOnMap(points) { L.geoJson(points, { @@ -22,6 +30,13 @@ function plotPointsOnMap(points) { function showDetails(e) { // layer.feature.geometry gives you access to all the fields let layer = e.layer + console.log(e) + //layer._icon.src = '../assets/blue-icon.png' + console.log(e.layer._icon.src) + console.log(L.Icon.Default.prototype.options) + console.log(L.Marker.prototype.options.icon) + currPoint = layer + console.log(currPoint) let sideBar = document.getElementById('sidebar') @@ -76,10 +91,24 @@ function showDetails(e) { helpReasonTextSpan.appendChild(helpReasonText) point.appendChild(helpReasonTextSpan) + // 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) { + currPoint.src = '../assets/orange-icon.png' +} + +function markAsCompleted(e) { + map.removeLayer(currPoint) +} + function closeDetails(e) { let details = document.getElementById('sidebar') details.style.visibility = 'hidden' -- cgit v1.2.3 From dd187a49b78da9e25df4e4c9a0decd6a4d201a56 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Thu, 21 Mar 2019 21:04:25 -0400 Subject: Finished front-end side of this feature. --- web/public/javascripts/map.js | 23 +++++------------------ web/public/stylesheets/style.css | 27 +++++++++++++++++++++------ web/views/map.pug | 6 ++++-- 3 files changed, 30 insertions(+), 26 deletions(-) diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index e2b4fc1..115e72d 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -4,13 +4,6 @@ // }).addTo(map); let currPoint -let orangeIcon = L.icon({ - iconUrl: '../assets/orange-icon.png', - iconSize: [25, 41], - iconAnchor: [12, 41] -}) - - const Races = { "White" : "European or White", "eAsian" : "East Asian", @@ -38,7 +31,6 @@ 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' @@ -49,11 +41,6 @@ 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'; @@ -101,18 +88,18 @@ function showDetails(e) { let extraText = document.createTextNode(layer.feature.geometry['extra']); extraTextSpan.appendChild(extraText); - // let pendingBtn = document.getElementById('pending-btn') - // pendingBtn.addEventListener('click', markAsPending) + let pendingBtn = document.getElementById('pending-btn') + pendingBtn.addEventListener('click', markAsPending) - // let completedBtn = document.getElementById('completed-btn') - // completedBtn.addEventListener('click', markAsCompleted) + let completedBtn = document.getElementById('completed-btn') + completedBtn.addEventListener('click', markAsCompleted) let closeBtn = document.getElementById('close-btn') closeBtn.addEventListener('click', closeDetails) } function markAsPending(e) { - currPoint.src = '../assets/orange-icon.png' + currPoint._icon.src = '../assets/orange-icon.png' } function markAsCompleted(e) { diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index ece8da4..85ebb2d 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -64,20 +64,35 @@ a { overflow-wrap: break-word; word-wrap: break-word; } -#close-btn-container { +#btn-container { height: 30px; top: 250px; background-color: lightgrey; width: 350px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; + text-align: center; } -#close-btn { - background-color: red; +.details-btn { position: relative; margin-top: 4px; - float: right; - margin-right: 20px; border-radius: 10px; - width: 100px; + width: 95px; +} +#pending-btn { + background-color: orange; + float: left; + margin-left: 10px; +} + +#completed-btn { + background-color: #279427; + float: left; + margin-left: 10px; +} + +#close-btn { + background-color: red; + float: right; + margin-right: 10px; } diff --git a/web/views/map.pug b/web/views/map.pug index 484899c..af97f6c 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -14,8 +14,10 @@ block content span#report-other strong Distinctive Features span#report-distinctive - #close-btn-container - button#close-btn Close + #btn-container + button.details-btn#pending-btn Pending + button.details-btn#completed-btn Completed + button.details-btn#close-btn Close #map -- cgit v1.2.3 From 2493c7ca0161250ed1209c2140c43002c36cd0eb Mon Sep 17 00:00:00 2001 From: Samarth-Agarwal1 Date: Tue, 26 Mar 2019 15:53:51 -0400 Subject: Update map.js --- web/public/javascripts/map.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 115e72d..58e3f8b 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -32,13 +32,7 @@ function plotPointsOnMap(points) { function showDetails(e) { // layer.feature.geometry gives you access to all the fields let layer = e.layer - console.log(e) - //layer._icon.src = '../assets/blue-icon.png' - console.log(e.layer._icon.src) - console.log(L.Icon.Default.prototype.options) - console.log(L.Marker.prototype.options.icon) currPoint = layer - console.log(currPoint) let sideBar = document.getElementById('sidebar') -- cgit v1.2.3 From 0968d87c5b9f16bcd7e7ccbf2654abb4ac5a7a7b Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Tue, 26 Mar 2019 16:22:52 -0400 Subject: Commented out correct line in app.js to connect to database. --- web/app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/app.js b/web/app.js index 0b4ba4c..aa2e75b 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_devel?retryWrites=true' + // uri = 'mongodb+srv://development:dreamteam@cluster0-krnr4.mongodb.net/helpthehome_devel?retryWrites=true' } else { // for qa and production set it on heroku config vars uri = process.env.MONGODB_URI -- cgit v1.2.3 From 3e5d5ccde1d1a15357f74c8177640d6e65ce2807 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Tue, 26 Mar 2019 16:27:07 -0400 Subject: Added semicolons to be consistent. --- web/public/javascripts/map.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 58e3f8b..544da9e 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -2,7 +2,7 @@ // L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { // attribution: '© OpenStreetMap contributors' // }).addTo(map); -let currPoint +let currPoint; const Races = { "White" : "European or White", @@ -31,10 +31,10 @@ 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 - currPoint = layer + let layer = e.layer; + currPoint = layer; - let sideBar = document.getElementById('sidebar') + let sideBar = document.getElementById('sidebar'); if (getComputedStyle(sideBar).visibility === 'hidden') { sideBar.style.visibility = 'visible'; @@ -82,27 +82,27 @@ function showDetails(e) { let extraText = document.createTextNode(layer.feature.geometry['extra']); extraTextSpan.appendChild(extraText); - let pendingBtn = document.getElementById('pending-btn') - pendingBtn.addEventListener('click', markAsPending) + let pendingBtn = document.getElementById('pending-btn'); + pendingBtn.addEventListener('click', markAsPending); - let completedBtn = document.getElementById('completed-btn') - completedBtn.addEventListener('click', markAsCompleted) + let completedBtn = document.getElementById('completed-btn'); + completedBtn.addEventListener('click', markAsCompleted); - let closeBtn = document.getElementById('close-btn') - closeBtn.addEventListener('click', closeDetails) + let closeBtn = document.getElementById('close-btn'); + closeBtn.addEventListener('click', closeDetails); } function markAsPending(e) { - currPoint._icon.src = '../assets/orange-icon.png' + currPoint._icon.src = '../assets/orange-icon.png'; } function markAsCompleted(e) { - map.removeLayer(currPoint) + map.removeLayer(currPoint); } function closeDetails(e) { let details = document.getElementById('sidebar') - details.style.visibility = 'hidden' + details.style.visibility = 'hidden'; } // different basemap -- cgit v1.2.3 From 8c81bbac1024e6f8c0b378e80da6bb774c56f92a Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Tue, 26 Mar 2019 16:47:29 -0400 Subject: Modified some CSS properties of buttons in point details sidebar. --- web/public/stylesheets/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index 85ebb2d..5f39fcf 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -76,8 +76,10 @@ a { .details-btn { position: relative; margin-top: 4px; + margin-bottom: 4px; border-radius: 10px; - width: 95px; + font-size: 18px; + padding: 10px; } #pending-btn { background-color: orange; @@ -86,7 +88,7 @@ a { } #completed-btn { - background-color: #279427; + background-color: #2bbd2b; float: left; margin-left: 10px; } -- cgit v1.2.3