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/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 +++++++++++++++++++++++++++++ 3 files changed, 29 insertions(+) create mode 100644 web/public/assets/blue-icon.png create mode 100644 web/public/assets/orange-icon.png (limited to 'web/public') 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 +++++++++++++++++++++------ 2 files changed, 26 insertions(+), 24 deletions(-) (limited to 'web/public') 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; } -- 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(-) (limited to 'web/public') 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 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(-) (limited to 'web/public') 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(-) (limited to 'web/public') 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