From 9155de7cc91eccce0acceecead8a814eef460cc4 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:27:05 -0400 Subject: [PATCH 01/48] created index html --- site/index.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 site/index.html diff --git a/site/index.html b/site/index.html new file mode 100644 index 0000000..e69de29 From 6831f04d3fad07c9030c1c95e68f97d2bf7214ec Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Wed, 26 Oct 2022 13:33:04 -0400 Subject: [PATCH 02/48] put a doctype in index.html --- site/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/site/index.html b/site/index.html index e69de29..763b073 100644 --- a/site/index.html +++ b/site/index.html @@ -0,0 +1 @@ + \ No newline at end of file From d14234c57ddc9472ec60b526bf317b09dfdc54a3 Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Thu, 27 Oct 2022 20:11:14 -0400 Subject: [PATCH 03/48] Created html structure, added a map to the page, and moved the map creation function to a new js file. --- site/css/styles.css | 11 +++++++++++ site/index.html | 26 +++++++++++++++++++++++++- site/js/main.js | 1 + site/js/map.js | 18 ++++++++++++++++++ 4 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 site/css/styles.css create mode 100644 site/js/main.js create mode 100644 site/js/map.js diff --git a/site/css/styles.css b/site/css/styles.css new file mode 100644 index 0000000..4b4d7c5 --- /dev/null +++ b/site/css/styles.css @@ -0,0 +1,11 @@ +body { + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + padding: 0; +} + +.map { + height: 100% +} \ No newline at end of file diff --git a/site/index.html b/site/index.html index 763b073..2c611f1 100644 --- a/site/index.html +++ b/site/index.html @@ -1 +1,25 @@ - \ No newline at end of file + + + + + + + Voter Canvassing App + + + + + + + +

Voter Canvassing App

+ +
+ + + + + + \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js new file mode 100644 index 0000000..8fae017 --- /dev/null +++ b/site/js/main.js @@ -0,0 +1 @@ +import { initializeMap } from './map.js' diff --git a/site/js/map.js b/site/js/map.js new file mode 100644 index 0000000..5f86197 --- /dev/null +++ b/site/js/map.js @@ -0,0 +1,18 @@ +function initializeMap () { + const map = L.map('map', { maxZoom: 22, preferCanvas: true}).setView([39.95, -75.16], 13); + const mapboxAccount = 'mapbox'; + const mapboxStyle = 'light-v10'; + const mapboxToken = 'pk.eyJ1IjoibW9yZ2FuZ3IiLCJhIjoiY2w4dzF2bHZsMDJqdDN3czJwOGg0ZXBsbSJ9.tXRhvJAL-t7cJCrCyAEhUw'; + L.tileLayer(`https://api.mapbox.com/styles/v1/${mapboxAccount}/${mapboxStyle}/tiles/256/{z}/{x}/{y}@2x?access_token=${mapboxToken}`, { + maxZoom: 19, + attribution: '© Mapbox © OpenStreetMap Improve this map', +}).addTo(map); + + return map; +} + +initializeMap(); + +export { + initializeMap + }; \ No newline at end of file From f1a92b4ac84eacb315ebb37fcad1f9103f0dadf1 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 1 Nov 2022 15:20:54 -0400 Subject: [PATCH 04/48] set up data pull script --- site/index.html | 4 ++-- site/js/dataPull.js | 12 ++++++++++++ site/js/main.js | 9 ++++++++- site/js/map.js | 8 +++----- 4 files changed, 25 insertions(+), 8 deletions(-) create mode 100644 site/js/dataPull.js diff --git a/site/index.html b/site/index.html index 2c611f1..e8a814f 100644 --- a/site/index.html +++ b/site/index.html @@ -17,8 +17,8 @@

Voter Canvassing App

- + + diff --git a/site/js/dataPull.js b/site/js/dataPull.js new file mode 100644 index 0000000..6988f5f --- /dev/null +++ b/site/js/dataPull.js @@ -0,0 +1,12 @@ +function getVoterList(listNum) { + fetch('data/voters_lists/' + listNum + '.csv') + .then(resp => resp.text()) + .then(text => { + const data = Papa.parse(text, { header: true }); + console.log(data); + }); +} + +export { + getVoterList, +}; \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js index 8fae017..796909e 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -1 +1,8 @@ -import { initializeMap } from './map.js' +import { initializeMap } from './map.js'; +import { getVoterList } from './dataPull.js'; + +let map = initializeMap(); + +let listNum = "0101"; +getVoterList(listNum); + diff --git a/site/js/map.js b/site/js/map.js index 5f86197..9f97d7e 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,18 +1,16 @@ function initializeMap () { - const map = L.map('map', { maxZoom: 22, preferCanvas: true}).setView([39.95, -75.16], 13); + const map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); const mapboxAccount = 'mapbox'; const mapboxStyle = 'light-v10'; const mapboxToken = 'pk.eyJ1IjoibW9yZ2FuZ3IiLCJhIjoiY2w4dzF2bHZsMDJqdDN3czJwOGg0ZXBsbSJ9.tXRhvJAL-t7cJCrCyAEhUw'; L.tileLayer(`https://api.mapbox.com/styles/v1/${mapboxAccount}/${mapboxStyle}/tiles/256/{z}/{x}/{y}@2x?access_token=${mapboxToken}`, { maxZoom: 19, attribution: '© Mapbox © OpenStreetMap Improve this map', -}).addTo(map); + }).addTo(map); return map; } -initializeMap(); - export { - initializeMap + initializeMap, }; \ No newline at end of file From 0fd461584d5c6797c570d41c308c7a9901781dea Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Wed, 2 Nov 2022 09:52:34 -0400 Subject: [PATCH 05/48] set up fetch --- site/js/dataPull.js | 5 +++-- site/js/main.js | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 6988f5f..6830fb1 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,9 +1,10 @@ function getVoterList(listNum) { - fetch('data/voters_lists/' + listNum + '.csv') + return fetch('data/voters_lists/' + listNum + '.csv') .then(resp => resp.text()) .then(text => { const data = Papa.parse(text, { header: true }); - console.log(data); + console.log(data['data']); + return data['data']; }); } diff --git a/site/js/main.js b/site/js/main.js index 796909e..ec4a03b 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -4,5 +4,6 @@ import { getVoterList } from './dataPull.js'; let map = initializeMap(); let listNum = "0101"; -getVoterList(listNum); +let list = getVoterList(listNum); +console.log(list); From 6f220ef77367462f48d5a0ada920c65ce30617f1 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Wed, 2 Nov 2022 10:14:40 -0400 Subject: [PATCH 06/48] update function structure --- site/js/dataPull.js | 15 ++++++++++++--- site/js/main.js | 5 ++--- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 6830fb1..9e2ff08 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,13 +1,22 @@ -function getVoterList(listNum) { +function populateVoterList(listNum, map) { return fetch('data/voters_lists/' + listNum + '.csv') .then(resp => resp.text()) .then(text => { const data = Papa.parse(text, { header: true }); console.log(data['data']); - return data['data']; + populateVoterMap(data, map); + populateVoterMenu(data); }); } +function populateVoterMap(data, map) { + //pass +} + +function populateVoterMenu(data) { + //pass +} + export { - getVoterList, + populateVoterList, }; \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js index ec4a03b..00d4629 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -1,9 +1,8 @@ import { initializeMap } from './map.js'; -import { getVoterList } from './dataPull.js'; +import { populateVoterList } from './dataPull.js'; let map = initializeMap(); let listNum = "0101"; -let list = getVoterList(listNum); -console.log(list); +populateVoterList(listNum, map); From 5a6d29c9ec5508e4549fee2702b6fd5dc66aac9a Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Thu, 3 Nov 2022 14:13:40 -0400 Subject: [PATCH 07/48] Added self locating function As per yesterday's discussion, I've added a self locator function to return and map user (canvasser_ location) to map. Capable of returning error during failure. Sensitivity of location tracking can be changed from 10k ms to less. --- site/js/main.js | 3 ++- site/js/map.js | 40 ++++++++++++++++++++++++++++++++++++++-- 2 files changed, 40 insertions(+), 3 deletions(-) diff --git a/site/js/main.js b/site/js/main.js index 00d4629..c8f688a 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -1,4 +1,4 @@ -import { initializeMap } from './map.js'; +import { initializeMap, locateMe } from './map.js'; import { populateVoterList } from './dataPull.js'; let map = initializeMap(); @@ -6,3 +6,4 @@ let map = initializeMap(); let listNum = "0101"; populateVoterList(listNum, map); +locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. diff --git a/site/js/map.js b/site/js/map.js index 9f97d7e..57ff24a 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,5 +1,9 @@ +let map = []; // made map global so that other functions can addTo 'map' +let myLocation = {}; // made a global myLocation variable that can be accessed when looking for other point features in the vicinity + + function initializeMap () { - const map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); + map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; const mapboxStyle = 'light-v10'; const mapboxToken = 'pk.eyJ1IjoibW9yZ2FuZ3IiLCJhIjoiY2w4dzF2bHZsMDJqdDN3czJwOGg0ZXBsbSJ9.tXRhvJAL-t7cJCrCyAEhUw'; @@ -11,6 +15,38 @@ function initializeMap () { return map; } +function locateMe(){ + + const successCallback = (pos) => { + + myLocation = { + lat : pos.coords.longitude, + lng : pos.coords.latitude + }; + + console.log(myLocation); + + L.marker([myLocation.lng, myLocation.lat]).addTo(map); + + return myLocation; + + } + const errorCallback = (e) => console.log(e); + + const options = { enableHighAccuracy: true, timeout: 10000,}; + + const id = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); + + //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. + +} + + + export { initializeMap, - }; \ No newline at end of file + locateMe, + }; + + window.myLocation = myLocation; + \ No newline at end of file From 9556a35c2c4d34c3ecdc28797d91b2c60b4cb926 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Thu, 3 Nov 2022 18:51:46 -0400 Subject: [PATCH 08/48] setup stuff --- site/js/dataPull.js | 13 ++++--------- site/js/list.js | 7 +++++++ site/js/map.js | 5 +++++ 3 files changed, 16 insertions(+), 9 deletions(-) create mode 100644 site/js/list.js diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 9e2ff08..e3cf469 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,5 +1,8 @@ +import { populateVoterMap } from './map.js'; +import { populateVoterList } from './list.js'; + function populateVoterList(listNum, map) { - return fetch('data/voters_lists/' + listNum + '.csv') + fetch('data/voters_lists/' + listNum + '.csv') .then(resp => resp.text()) .then(text => { const data = Papa.parse(text, { header: true }); @@ -9,14 +12,6 @@ function populateVoterList(listNum, map) { }); } -function populateVoterMap(data, map) { - //pass -} - -function populateVoterMenu(data) { - //pass -} - export { populateVoterList, }; \ No newline at end of file diff --git a/site/js/list.js b/site/js/list.js new file mode 100644 index 0000000..b3efa61 --- /dev/null +++ b/site/js/list.js @@ -0,0 +1,7 @@ +function populateVoterMenu(data) { + //pass +} + +export { + populateVoterMenu, +}; \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index 57ff24a..d0eb75a 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -41,11 +41,16 @@ function locateMe(){ } +function populateVoterMap(data, map) { + //pass +} + export { initializeMap, locateMe, + populateVoterMap, }; window.myLocation = myLocation; From a5e70e13c659114ca48c1297ab7f04f295c5fb3d Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Thu, 3 Nov 2022 18:59:42 -0400 Subject: [PATCH 09/48] meeting update --- site/js/dataPull.js | 7 ++++--- site/js/main.js | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index e3cf469..7d6246d 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,14 +1,15 @@ import { populateVoterMap } from './map.js'; -import { populateVoterList } from './list.js'; +import { populateVoterMenu } from './list.js'; function populateVoterList(listNum, map) { fetch('data/voters_lists/' + listNum + '.csv') .then(resp => resp.text()) .then(text => { + // TODO: try/catch HTTP error for nonexistent list number const data = Papa.parse(text, { header: true }); console.log(data['data']); - populateVoterMap(data, map); - populateVoterMenu(data); + populateVoterMap(data['data'], map); + populateVoterMenu(data['data']); }); } diff --git a/site/js/main.js b/site/js/main.js index c8f688a..0dc1ec3 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -6,4 +6,4 @@ let map = initializeMap(); let listNum = "0101"; populateVoterList(listNum, map); -locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. +locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. \ No newline at end of file From cfe666c0e6ed6e30be331adea28878ed9f99f6dd Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Thu, 3 Nov 2022 21:46:12 -0400 Subject: [PATCH 10/48] voter objects and populate map Created Voter Objects and make Voter Map show all these objects. --- site/js/dataPull.js | 82 +++++++++++++++++++++++++++++++++++++++++++-- site/js/map.js | 21 ++++++++++-- 2 files changed, 98 insertions(+), 5 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 7d6246d..a7784f2 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,6 +1,8 @@ -import { populateVoterMap } from './map.js'; +import { initializeMap, populateVoterMap } from './map.js'; import { populateVoterMenu } from './list.js'; +const voterList = []; + function populateVoterList(listNum, map) { fetch('data/voters_lists/' + listNum + '.csv') .then(resp => resp.text()) @@ -11,8 +13,84 @@ function populateVoterList(listNum, map) { populateVoterMap(data['data'], map); populateVoterMenu(data['data']); }); + } +function makeVoterFeature(data){ + + const voter = data; + + for (let v of voter){ + + let geom = makeCoordinates(v['TIGER/Line Lng/Lat'], v['ID Number']); + + // element can definitely have more properties. Just kept these for the time-being + + try + { let element = { + type : "Feature", + geometry : { + type : "Point", + coordinates : [geom.longitude, geom.latitude], + }, + properties : { + firstName : v['First Name'], + middleName : v['Middle Name'], + lastName : v['Last Name'], + gender : v['Gender'], + address : v['StrTIGER/Line Matched Addresseet Name'], + city : v['City'], + county : v['County'], + state : v['State'], + zipCode : v['Zip'] + } + } + + voterList.push(element);} + + catch(e){ + continue; + } + + } + + return voterList; +} + +function makeCoordinates(coords, id){ + + //console.log(parseFloat(coords.substring(19,36))); + //console.log(parseFloat(coords.substring(0,18))); + + //console.log(id); + + let x = 0, y = 0; + try{ + x = parseFloat(coords.substring(0,18)); + y = parseFloat(coords.substring(19,36));} + catch(e){ + + } + + return { + latitude : x, + longitude : y,}; + + } + + + + export { populateVoterList, -}; \ No newline at end of file + makeVoterFeature, +}; + +window.voterList = voterList; + +"-75.16145216099994,39.92993551500007" +"-75.15802336899998,39.93087322800005" +"-75.15842544799995,39.93086332400003" +"-75.15947777399998,39.93155817300004" + +"112545002-51" // problem element in list '0101' // eliminated in the try-catch block in makeCoordinates \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index d0eb75a..6fccfae 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,3 +1,5 @@ +import { makeVoterFeature } from './dataPull.js'; + let map = []; // made map global so that other functions can addTo 'map' let myLocation = {}; // made a global myLocation variable that can be accessed when looking for other point features in the vicinity @@ -41,11 +43,24 @@ function locateMe(){ } -function populateVoterMap(data, map) { - //pass -} +function populateVoterMap(data, map) { // receives data from makeVoterFeature and plots them on the map + + let people = makeVoterFeature(data); + + console.log("These are the voters"); + for( let ppl of people ){ + try{ + L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + } + + catch(e){ + + } + } + +} export { initializeMap, From acdaaf7c11c4ad4f3575ebfcbcd28b36637c7ade Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sat, 5 Nov 2022 17:56:38 -0400 Subject: [PATCH 11/48] Added text box and button to input and call voter lists. Tried to add functions that would pass input from textbox to listNum variable, but don't think I was successful. --- site/css/styles.css | 12 ++++++++++++ site/index.html | 5 +++++ site/js/main.js | 20 ++++++++++++++++++-- 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 4b4d7c5..35eadae 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -8,4 +8,16 @@ body { .map { height: 100% +} + +textarea { + width: 50%; + display: block; + margin-bottom: 1rem; + height: 1rem; +} + +button { + width: 50%; + display: block; } \ No newline at end of file diff --git a/site/index.html b/site/index.html index e8a814f..3ca1a87 100644 --- a/site/index.html +++ b/site/index.html @@ -17,6 +17,11 @@

Voter Canvassing App

+
+ + +
+ diff --git a/site/js/main.js b/site/js/main.js index 0dc1ec3..56a14a7 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -2,8 +2,24 @@ import { initializeMap, locateMe } from './map.js'; import { populateVoterList } from './dataPull.js'; let map = initializeMap(); - let listNum = "0101"; + +let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable +let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable + +function onButtonClicked(evt) { + let listNum = voterFileInput.value; +}; // creates function that passes the value entered in input text box to the variable listNum - don't think I got this right + +function loadVoterList() { + voterFileLoadButton.addEventListener('click', onButtonClicked); +}; //adds an event listener that executes the onButtonClicked function when the voter load button is clicked +loadVoterList(); + populateVoterList(listNum, map); -locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. \ No newline at end of file +locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. + +//declares variables in Global Scope +window.voterFileInput = voterFileInput; +window.voterFileLoadButton = voterFileLoadButton; \ No newline at end of file From dcc0f3a80a04b6bb25533ec033ac8bcf076fdce4 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sun, 6 Nov 2022 11:37:04 -0500 Subject: [PATCH 12/48] Resolved issues with voterInput Yeah, it's true --- site/js/main.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/site/js/main.js b/site/js/main.js index 56a14a7..bcbd5b8 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -8,7 +8,10 @@ let voterFileInput = document.querySelector('.input'); // saves input DOM elemen let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable function onButtonClicked(evt) { - let listNum = voterFileInput.value; + listNum = voterFileInput.value; + console.log(listNum) + populateVoterList(listNum, map); + }; // creates function that passes the value entered in input text box to the variable listNum - don't think I got this right function loadVoterList() { @@ -16,7 +19,7 @@ function loadVoterList() { }; //adds an event listener that executes the onButtonClicked function when the voter load button is clicked loadVoterList(); -populateVoterList(listNum, map); +//populateVoterList(listNum, map); //moved this line to onButtonClicked because it needs to be called when the button is clicked. locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. From fb803b11f3862306358cc526cbef9edd86e31ae7 Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sun, 6 Nov 2022 13:38:04 -0500 Subject: [PATCH 13/48] tried to add an if/else statement to the onButtonClicked function in main.js --- site/css/styles.css | 4 ++-- site/js/main.js | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 35eadae..6491c34 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -11,13 +11,13 @@ body { } textarea { - width: 50%; + width: 100%; display: block; margin-bottom: 1rem; height: 1rem; } button { - width: 50%; + width: 100%; display: block; } \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js index bcbd5b8..735f27a 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -8,13 +8,14 @@ let voterFileInput = document.querySelector('.input'); // saves input DOM elemen let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable function onButtonClicked(evt) { - listNum = voterFileInput.value; - console.log(listNum) + if (listNum = voterFileInput.value) { + console.log(listNum); populateVoterList(listNum, map); + } else { + alert("This is not a valid voter list number. Please try again.") + }}; // creates function that passes the value entered in input text box to the variable listNum. -}; // creates function that passes the value entered in input text box to the variable listNum - don't think I got this right - -function loadVoterList() { + function loadVoterList() { voterFileLoadButton.addEventListener('click', onButtonClicked); }; //adds an event listener that executes the onButtonClicked function when the voter load button is clicked loadVoterList(); From 3db3d77f820d2f14b26b414708947084876d8fa1 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sun, 6 Nov 2022 14:28:56 -0500 Subject: [PATCH 14/48] IssueResolved for ListNum --- site/js/dataPull.js | 10 ++++++++-- site/js/main.js | 14 ++++++++------ 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index a7784f2..da63e1c 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -4,16 +4,22 @@ import { populateVoterMenu } from './list.js'; const voterList = []; function populateVoterList(listNum, map) { + try{ fetch('data/voters_lists/' + listNum + '.csv') - .then(resp => resp.text()) + .then(resp => resp.text()) // can we handle the error right here? .then(text => { // TODO: try/catch HTTP error for nonexistent list number const data = Papa.parse(text, { header: true }); - console.log(data['data']); + //console.log(data['data']); populateVoterMap(data['data'], map); populateVoterMenu(data['data']); }); + } + catch(e){ + console.log(e) + alert("Invalid List Number.") + } } function makeVoterFeature(data){ diff --git a/site/js/main.js b/site/js/main.js index 735f27a..c7999cb 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -5,15 +5,17 @@ let map = initializeMap(); let listNum = "0101"; let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable +//need to restrict line of input to just 1. currently accepts enter and can fit a paragraph. + let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable -function onButtonClicked(evt) { - if (listNum = voterFileInput.value) { - console.log(listNum); +function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed + + listNum = voterFileInput.value + console.log(listNum) populateVoterList(listNum, map); - } else { - alert("This is not a valid voter list number. Please try again.") - }}; // creates function that passes the value entered in input text box to the variable listNum. + + }; // creates function that passes the value entered in input text box to the variable listNum. function loadVoterList() { voterFileLoadButton.addEventListener('click', onButtonClicked); From 07b98b26ca040e590044b9b7da783569503a8d94 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sun, 6 Nov 2022 18:59:15 -0500 Subject: [PATCH 15/48] Handling 'Invalid List Number' in async function applying try-catch logic to the first promise after fetch to call out invalid input errors. --- site/js/dataPull.js | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index da63e1c..8c6bcde 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -4,22 +4,30 @@ import { populateVoterMenu } from './list.js'; const voterList = []; function populateVoterList(listNum, map) { - try{ + fetch('data/voters_lists/' + listNum + '.csv') - .then(resp => resp.text()) // can we handle the error right here? + .then(function (resp) { + + if(!resp.ok){ + alert("Invalid List Number."); + } + + else{ + console.log("Working") + return resp.text(); + } + + } ) // can we handle the error right here? // now handled invalid list number issue in this promise .then(text => { - // TODO: try/catch HTTP error for nonexistent list number + // TODO: try/catch HTTP error for nonexistent list number // done. const data = Papa.parse(text, { header: true }); //console.log(data['data']); populateVoterMap(data['data'], map); populateVoterMenu(data['data']); }); - } - catch(e){ - console.log(e) - alert("Invalid List Number.") - } + + } function makeVoterFeature(data){ From a3335a5f0ed116211879264f1ab17bd250a73d52 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 7 Nov 2022 11:47:23 -0500 Subject: [PATCH 16/48] linting mostly --- site/js/dataPull.js | 58 +++++++++++++++++++-------------------------- site/js/list.js | 2 +- site/js/main.js | 18 +++++++------- site/js/map.js | 18 +++++++------- 4 files changed, 41 insertions(+), 55 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 8c6bcde..2c18722 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -4,7 +4,6 @@ import { populateVoterMenu } from './list.js'; const voterList = []; function populateVoterList(listNum, map) { - fetch('data/voters_lists/' + listNum + '.csv') .then(function (resp) { @@ -25,9 +24,27 @@ function populateVoterList(listNum, map) { populateVoterMap(data['data'], map); populateVoterMenu(data['data']); }); - - - +} + +function makeCoordinates(coords, id){ + + //console.log(parseFloat(coords.substring(19,36))); + //console.log(parseFloat(coords.substring(0,18))); + + //console.log(id); + + let x = 0, y = 0; + try{ + x = parseFloat(coords.substring(0, 18)); + y = parseFloat(coords.substring(19, 36));} + catch(e){ + // pass + } + + return { + latitude : x, + longitude : y, + }; } function makeVoterFeature(data){ @@ -37,7 +54,6 @@ function makeVoterFeature(data){ for (let v of voter){ let geom = makeCoordinates(v['TIGER/Line Lng/Lat'], v['ID Number']); - // element can definitely have more properties. Just kept these for the time-being try @@ -57,44 +73,18 @@ function makeVoterFeature(data){ county : v['County'], state : v['State'], zipCode : v['Zip'] - } - } - + }, + }; voterList.push(element);} catch(e){ continue; - } - + } } return voterList; } -function makeCoordinates(coords, id){ - - //console.log(parseFloat(coords.substring(19,36))); - //console.log(parseFloat(coords.substring(0,18))); - - //console.log(id); - - let x = 0, y = 0; - try{ - x = parseFloat(coords.substring(0,18)); - y = parseFloat(coords.substring(19,36));} - catch(e){ - - } - - return { - latitude : x, - longitude : y,}; - - } - - - - export { populateVoterList, makeVoterFeature, diff --git a/site/js/list.js b/site/js/list.js index b3efa61..3e0d3f0 100644 --- a/site/js/list.js +++ b/site/js/list.js @@ -1,4 +1,4 @@ -function populateVoterMenu(data) { +function populateVoterMenu(myLoocation, data) { //pass } diff --git a/site/js/main.js b/site/js/main.js index c7999cb..b4e92ba 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -3,29 +3,27 @@ import { populateVoterList } from './dataPull.js'; let map = initializeMap(); let listNum = "0101"; - + let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable //need to restrict line of input to just 1. currently accepts enter and can fit a paragraph. -let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable +let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed - - listNum = voterFileInput.value - console.log(listNum) + listNum = voterFileInput.value; + console.log(listNum); populateVoterList(listNum, map); - - }; // creates function that passes the value entered in input text box to the variable listNum. +} // creates function that passes the value entered in input text box to the variable listNum. - function loadVoterList() { +function loadVoterList() { voterFileLoadButton.addEventListener('click', onButtonClicked); -}; //adds an event listener that executes the onButtonClicked function when the voter load button is clicked +} //adds an event listener that executes the onButtonClicked function when the voter load button is clicked loadVoterList(); //populateVoterList(listNum, map); //moved this line to onButtonClicked because it needs to be called when the button is clicked. locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. -//declares variables in Global Scope +//declares variables in Global Scope window.voterFileInput = voterFileInput; window.voterFileLoadButton = voterFileLoadButton; \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index 6fccfae..a4627d5 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,4 +1,5 @@ import { makeVoterFeature } from './dataPull.js'; +import { populateVoterMenu } from './list.js'; let map = []; // made map global so that other functions can addTo 'map' let myLocation = {}; // made a global myLocation variable that can be accessed when looking for other point features in the vicinity @@ -20,13 +21,12 @@ function initializeMap () { function locateMe(){ const successCallback = (pos) => { - myLocation = { - lat : pos.coords.longitude, - lng : pos.coords.latitude + lat : pos.coords.longitude, + lng : pos.coords.latitude, }; - console.log(myLocation); + console.log(myLocation); L.marker([myLocation.lng, myLocation.lat]).addTo(map); @@ -35,9 +35,9 @@ function locateMe(){ } const errorCallback = (e) => console.log(e); - const options = { enableHighAccuracy: true, timeout: 10000,}; + const options = { enableHighAccuracy: true, timeout: 10000 }; - const id = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); + const id = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. @@ -54,9 +54,8 @@ function populateVoterMap(data, map) { // receives data from makeVoterFeature an try{ L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); } - catch(e){ - + // pass } } @@ -68,5 +67,4 @@ export { populateVoterMap, }; - window.myLocation = myLocation; - \ No newline at end of file + window.myLocation = myLocation; \ No newline at end of file From e2f76d2d668b16e1e32c473e4dea08aa1a7f1679 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 7 Nov 2022 12:50:04 -0500 Subject: [PATCH 17/48] working on populating list --- site/js/map.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/site/js/map.js b/site/js/map.js index a4627d5..a9e9b9f 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -15,20 +15,24 @@ function initializeMap () { attribution: '© Mapbox © OpenStreetMap Improve this map', }).addTo(map); + // layer for user location + map.positionLayer = L.geoJSON(null).addTo(map); + return map; } function locateMe(){ const successCallback = (pos) => { - myLocation = { - lat : pos.coords.longitude, - lng : pos.coords.latitude, - }; + // TODO: remove existing location point from layer before updating DO THIS 11/7/22 - console.log(myLocation); + map.positionLayer.addData({ + 'type': 'Point', + 'coordinates': [pos.coords.longitude, pos.coords.latitude] + }); + map.setView([pos.coords.latitude, pos.coords.longitude], 19); - L.marker([myLocation.lng, myLocation.lat]).addTo(map); + console.log(myLocation); return myLocation; @@ -37,7 +41,7 @@ function locateMe(){ const options = { enableHighAccuracy: true, timeout: 10000 }; - const id = navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options); + const id = navigator.geolocation.watchPosition(successCallback, errorCallback, options); //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. From c718d4c0e71c7a2735c1b90a17aaf739a65b3adf Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 8 Nov 2022 11:44:21 -0500 Subject: [PATCH 18/48] voter list creation --- site/css/styles.css | 7 ++++ site/index.html | 4 ++ site/js/dataPull.js | 87 ++++++++++++++++++++------------------- site/js/list.js | 23 ++++++++++- site/js/main.js | 12 +++--- site/js/map.js | 30 ++++++-------- site/js/template-tools.js | 36 ++++++++++++++++ 7 files changed, 132 insertions(+), 67 deletions(-) create mode 100644 site/js/template-tools.js diff --git a/site/css/styles.css b/site/css/styles.css index 6491c34..395aaff 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -20,4 +20,11 @@ textarea { button { width: 100%; display: block; +} + +.voter-list-container { + width: 100%; + display: block; + height: 10rem; + overflow-y: scroll; } \ No newline at end of file diff --git a/site/index.html b/site/index.html index 3ca1a87..23f67c0 100644 --- a/site/index.html +++ b/site/index.html @@ -17,6 +17,10 @@

Voter Canvassing App

+
+ +
+
diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 2c18722..cd57c6c 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,9 +1,47 @@ -import { initializeMap, populateVoterMap } from './map.js'; +import { initializeMap, locateMe, populateVoterMap } from './map.js'; import { populateVoterMenu } from './list.js'; const voterList = []; -function populateVoterList(listNum, map) { +function makeVoterFeature(data){ + + const voter = data; + + for (let v of voter){ + + let geom = makeCoordinates(v['TIGER/Line Lng/Lat'], v['ID Number']); + // element can definitely have more properties. Just kept these for the time-being + + try + { let element = { + type : "Feature", + geometry : { + type : "Point", + coordinates : [geom.longitude, geom.latitude], + }, + properties : { + firstName : v['First Name'], + middleName : v['Middle Name'], + lastName : v['Last Name'], + gender : v['Gender'], + address : v['TIGER/Line Matched Address'], + city : v['City'], + county : v['County'], + state : v['State'], + zipCode : v['Zip'] + }, + }; + voterList.push(element);} + + catch(e){ + continue; + } + } + + return voterList; +} + +function populateVoterList(listNum, map, voterListObj) { fetch('data/voters_lists/' + listNum + '.csv') .then(function (resp) { @@ -20,9 +58,10 @@ function populateVoterList(listNum, map) { .then(text => { // TODO: try/catch HTTP error for nonexistent list number // done. const data = Papa.parse(text, { header: true }); - //console.log(data['data']); - populateVoterMap(data['data'], map); - populateVoterMenu(data['data']); + // console.log(data['data']); + let voterList = makeVoterFeature(data['data']); + populateVoterMap(voterList, map); + populateVoterMenu(voterList, voterListObj); }); } @@ -47,44 +86,6 @@ function makeCoordinates(coords, id){ }; } -function makeVoterFeature(data){ - - const voter = data; - - for (let v of voter){ - - let geom = makeCoordinates(v['TIGER/Line Lng/Lat'], v['ID Number']); - // element can definitely have more properties. Just kept these for the time-being - - try - { let element = { - type : "Feature", - geometry : { - type : "Point", - coordinates : [geom.longitude, geom.latitude], - }, - properties : { - firstName : v['First Name'], - middleName : v['Middle Name'], - lastName : v['Last Name'], - gender : v['Gender'], - address : v['StrTIGER/Line Matched Addresseet Name'], - city : v['City'], - county : v['County'], - state : v['State'], - zipCode : v['Zip'] - }, - }; - voterList.push(element);} - - catch(e){ - continue; - } - } - - return voterList; -} - export { populateVoterList, makeVoterFeature, diff --git a/site/js/list.js b/site/js/list.js index 3e0d3f0..39bc79f 100644 --- a/site/js/list.js +++ b/site/js/list.js @@ -1,5 +1,24 @@ -function populateVoterMenu(myLoocation, data) { - //pass +import { htmlToElement } from "./template-tools.js"; + +function populateVoterMenu(voterList, voterListObj) { + voterListObj.innerHTML = ``; + + if (myLocation) { // if we have user's location, sort the list by how close the houses are to the user at that moment before populating list + for (let voter of voterList) { + voter.properties.distToMe = (Math.abs(voter.geometry.coordinates[0] - myLocation.coordinates[0]) + + Math.abs(voter.geometry.coordinates[1] - myLocation.coordinates[1])); + } + voterList.sort(function (a, b) {b.properties.distToMe - a.properties.distToMe}); + } + + + for (let voter of voterList) { + const html = ` +
  • Name: ${voter.properties['firstName']} ${voter.properties['lastName']} Address: ${voter.properties['address']}
    • + `; + const li = htmlToElement(html); + voterListObj.append(li); + } } export { diff --git a/site/js/main.js b/site/js/main.js index b4e92ba..f7feab5 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -3,16 +3,19 @@ import { populateVoterList } from './dataPull.js'; let map = initializeMap(); let listNum = "0101"; +let myLocation; // made a global myLocation variable that can be accessed when looking for other point features in the vicinity let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable //need to restrict line of input to just 1. currently accepts enter and can fit a paragraph. let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable +let voterListObj = document.querySelector("#voter-list"); // get list we'll put voters in from DOM + function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; console.log(listNum); - populateVoterList(listNum, map); + populateVoterList(listNum, map, voterListObj, myLocation); } // creates function that passes the value entered in input text box to the variable listNum. function loadVoterList() { @@ -20,10 +23,9 @@ function loadVoterList() { } //adds an event listener that executes the onButtonClicked function when the voter load button is clicked loadVoterList(); -//populateVoterList(listNum, map); //moved this line to onButtonClicked because it needs to be called when the button is clicked. - -locateMe(); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. +locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. //declares variables in Global Scope window.voterFileInput = voterFileInput; -window.voterFileLoadButton = voterFileLoadButton; \ No newline at end of file +window.voterFileLoadButton = voterFileLoadButton; +window.myLocation = myLocation; \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index a9e9b9f..a8970c5 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,12 +1,8 @@ import { makeVoterFeature } from './dataPull.js'; import { populateVoterMenu } from './list.js'; -let map = []; // made map global so that other functions can addTo 'map' -let myLocation = {}; // made a global myLocation variable that can be accessed when looking for other point features in the vicinity - - function initializeMap () { - map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' + let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; const mapboxStyle = 'light-v10'; const mapboxToken = 'pk.eyJ1IjoibW9yZ2FuZ3IiLCJhIjoiY2w4dzF2bHZsMDJqdDN3czJwOGg0ZXBsbSJ9.tXRhvJAL-t7cJCrCyAEhUw'; @@ -21,18 +17,20 @@ function initializeMap () { return map; } -function locateMe(){ +function locateMe(map){ const successCallback = (pos) => { - // TODO: remove existing location point from layer before updating DO THIS 11/7/22 + if (map.positionLayer !== undefined) { + map.removeLayer(map.positionLayer); + } - map.positionLayer.addData({ - 'type': 'Point', + myLocation = { + 'type': 'Point', 'coordinates': [pos.coords.longitude, pos.coords.latitude] - }); - map.setView([pos.coords.latitude, pos.coords.longitude], 19); + }; - console.log(myLocation); + map.positionLayer = L.geoJSON(myLocation).addTo(map); + map.setView([pos.coords.latitude, pos.coords.longitude], 19); return myLocation; @@ -43,13 +41,13 @@ function locateMe(){ const id = navigator.geolocation.watchPosition(successCallback, errorCallback, options); + console.log(id); + //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. } -function populateVoterMap(data, map) { // receives data from makeVoterFeature and plots them on the map - - let people = makeVoterFeature(data); +function populateVoterMap(people, map) { // receives data from makeVoterFeature and plots them on the map console.log("These are the voters"); @@ -70,5 +68,3 @@ export { locateMe, populateVoterMap, }; - - window.myLocation = myLocation; \ No newline at end of file diff --git a/site/js/template-tools.js b/site/js/template-tools.js new file mode 100644 index 0000000..821f7c6 --- /dev/null +++ b/site/js/template-tools.js @@ -0,0 +1,36 @@ +/* ==================== +The following two functions take a string of HTML and create DOM element objects +representing the tags, using the `template` feature of HTML. See the following +for more information: https://stackoverflow.com/a/35385518/123776 +==================== */ + +/* eslint-disable no-unused-vars */ + +/** + * @param {String} HTML representing a single element + * @return {Element} + */ + function htmlToElement(html) { + const template = document.createElement('template'); + const trimmedHtml = html.trim(); // Never return a text node of whitespace as the result + template.innerHTML = trimmedHtml; + return template.content.firstChild; + } + + /** + * @param {String} HTML representing any number of sibling elements + * @return {NodeList} + */ + function htmlToElements(html) { + const template = document.createElement('template'); + template.innerHTML = html; + return template.content.childNodes; + } + + window.htmlToElement = htmlToElement; + window.htmlToElements = htmlToElements; + + export { + htmlToElement, + htmlToElements, + }; \ No newline at end of file From 05978bd8b4931ca1dc9dbae53d33181b07ca5806 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 8 Nov 2022 12:08:26 -0500 Subject: [PATCH 19/48] update list creation --- site/js/dataPull.js | 1 - site/js/list.js | 8 +++++++- site/js/main.js | 2 ++ site/js/map.js | 2 -- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index cd57c6c..6aac346 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -58,7 +58,6 @@ function populateVoterList(listNum, map, voterListObj) { .then(text => { // TODO: try/catch HTTP error for nonexistent list number // done. const data = Papa.parse(text, { header: true }); - // console.log(data['data']); let voterList = makeVoterFeature(data['data']); populateVoterMap(voterList, map); populateVoterMenu(voterList, voterListObj); diff --git a/site/js/list.js b/site/js/list.js index 39bc79f..d118888 100644 --- a/site/js/list.js +++ b/site/js/list.js @@ -13,8 +13,14 @@ function populateVoterMenu(voterList, voterListObj) { for (let voter of voterList) { + + //TODO: figure out how to format span objects for voters in CSS + const html = ` -
  • Name: ${voter.properties['firstName']} ${voter.properties['lastName']} Address: ${voter.properties['address']}
    • + + ${voter.properties['firstName']} ${voter.properties['lastName']} + ${voter.properties['address']} + `; const li = htmlToElement(html); voterListObj.append(li); diff --git a/site/js/main.js b/site/js/main.js index f7feab5..a20acf9 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -28,4 +28,6 @@ locateMe(map, myLocation); // runs function to return your location and mark it //declares variables in Global Scope window.voterFileInput = voterFileInput; window.voterFileLoadButton = voterFileLoadButton; +window.voterList = voterListObj; +window.voterMap = map; window.myLocation = myLocation; \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index a8970c5..273b2ed 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -41,8 +41,6 @@ function locateMe(map){ const id = navigator.geolocation.watchPosition(successCallback, errorCallback, options); - console.log(id); - //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. } From 4e39605e1c8e308b9f4f7242effa9edc247bf882 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 8 Nov 2022 13:00:20 -0500 Subject: [PATCH 20/48] update map code --- site/js/map.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/site/js/map.js b/site/js/map.js index 273b2ed..ea623a7 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -13,6 +13,8 @@ function initializeMap () { // layer for user location map.positionLayer = L.geoJSON(null).addTo(map); + // layer for voter locations + map.voterLayer = L.geoJSON(null).addTo(map); return map; } @@ -49,10 +51,15 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature console.log("These are the voters"); - for( let ppl of people ){ + // if (map.voterLayer !== undefined) { + // map.removeLayer(map.voterLayer); + map.voterLayer = L.geoJSON().addTo(map); + // } + for( let ppl of people ){ try{ - L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + map.voterLayer.addData(ppl); } catch(e){ // pass From 922db5201903830818159d19f81da382a0e891f2 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 8 Nov 2022 13:06:43 -0500 Subject: [PATCH 21/48] fix geojson layer issue partially --- site/js/map.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/js/map.js b/site/js/map.js index ea623a7..9825936 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -58,8 +58,9 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature for( let ppl of people ){ try{ - //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); - map.voterLayer.addData(ppl); + L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + // TODO: figure out how to get geoJSONs to work in new layer + // map.voterLayer.addData(ppl); } catch(e){ // pass From a01935c11b976474cb638a4404bacac387560fb8 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Tue, 8 Nov 2022 15:25:25 -0500 Subject: [PATCH 22/48] Resolving geoJSON issue in populateVoterMap issue had arisen due to undefined and NaN coordinates which caused the layers to crash. Fixed the issue by changing the makeCoordinates function. --- site/js/dataPull.js | 25 +++++++++++++++++++------ site/js/main.js | 2 +- site/js/map.js | 4 ++-- 3 files changed, 22 insertions(+), 9 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 6aac346..1d5710d 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -66,18 +66,30 @@ function populateVoterList(listNum, map, voterListObj) { function makeCoordinates(coords, id){ + //console.log(id); //console.log(parseFloat(coords.substring(19,36))); //console.log(parseFloat(coords.substring(0,18))); - //console.log(id); - let x = 0, y = 0; + try{ + + if(isNaN(parseFloat(coords.substring(19,36))) | parseFloat(coords.substring(19,36)) === undefined ){ + x = 0; + y = 0; + } + + else{ + x = parseFloat(coords.substring(0, 18)); y = parseFloat(coords.substring(19, 36));} - catch(e){ - // pass - } + + } + + catch(e){ + console.log(e); + //pass + } return { latitude : x, @@ -97,4 +109,5 @@ window.voterList = voterList; "-75.15842544799995,39.93086332400003" "-75.15947777399998,39.93155817300004" -"112545002-51" // problem element in list '0101' // eliminated in the try-catch block in makeCoordinates \ No newline at end of file +"112545002-51" // problem element in list '0101' // eliminated in the try-catch block in makeCoordinates +"015653961-51" \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js index a20acf9..702da3f 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -28,6 +28,6 @@ locateMe(map, myLocation); // runs function to return your location and mark it //declares variables in Global Scope window.voterFileInput = voterFileInput; window.voterFileLoadButton = voterFileLoadButton; -window.voterList = voterListObj; +window.voterListObj = voterListObj; window.voterMap = map; window.myLocation = myLocation; \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index 9825936..4b350f5 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -53,12 +53,12 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature // if (map.voterLayer !== undefined) { // map.removeLayer(map.voterLayer); - map.voterLayer = L.geoJSON().addTo(map); + map.voterLayer = L.geoJSON(people).addTo(map); // } for( let ppl of people ){ try{ - L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); // TODO: figure out how to get geoJSONs to work in new layer // map.voterLayer.addData(ppl); } From 95c4bbe62f99b5bf890ed86931a8e0b7ae20a119 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Tue, 8 Nov 2022 19:52:00 -0500 Subject: [PATCH 23/48] fix points on map function --- site/js/dataPull.js | 66 ++++++++++++++++++++++----------------------- site/js/map.js | 5 +++- 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 1d5710d..75ada80 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -3,6 +3,37 @@ import { populateVoterMenu } from './list.js'; const voterList = []; +function makeCoordinates(coords, id){ + + //console.log(id); + //console.log(parseFloat(coords.substring(19,36))); + //console.log(parseFloat(coords.substring(0,18))); + + let x = 0, y = 0; + + try { + + if (isNaN(parseFloat(coords.substring(19, 36))) || parseFloat(coords.substring(19, 36)) === undefined ){ + x = 0; + y = 0; + } else { + x = parseFloat(coords.substring(0, 18)); + y = parseFloat(coords.substring(19, 36)); + } + + } + + catch(e){ + console.log(e); + //pass + } + + return { + latitude : x, + longitude : y, + }; +} + function makeVoterFeature(data){ const voter = data; @@ -17,7 +48,7 @@ function makeVoterFeature(data){ type : "Feature", geometry : { type : "Point", - coordinates : [geom.longitude, geom.latitude], + coordinates : [geom.latitude, geom.longitude], }, properties : { firstName : v['First Name'], @@ -64,39 +95,6 @@ function populateVoterList(listNum, map, voterListObj) { }); } -function makeCoordinates(coords, id){ - - //console.log(id); - //console.log(parseFloat(coords.substring(19,36))); - //console.log(parseFloat(coords.substring(0,18))); - - let x = 0, y = 0; - - try{ - - if(isNaN(parseFloat(coords.substring(19,36))) | parseFloat(coords.substring(19,36)) === undefined ){ - x = 0; - y = 0; - } - - else{ - - x = parseFloat(coords.substring(0, 18)); - y = parseFloat(coords.substring(19, 36));} - - } - - catch(e){ - console.log(e); - //pass - } - - return { - latitude : x, - longitude : y, - }; -} - export { populateVoterList, makeVoterFeature, diff --git a/site/js/map.js b/site/js/map.js index 4b350f5..f1c9f2b 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -32,7 +32,9 @@ function locateMe(map){ }; map.positionLayer = L.geoJSON(myLocation).addTo(map); - map.setView([pos.coords.latitude, pos.coords.longitude], 19); + + // un-comment following line if we want the map to zoom to user location on startup: + //map.setView([pos.coords.latitude, pos.coords.longitude], 19); return myLocation; @@ -54,6 +56,7 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature // if (map.voterLayer !== undefined) { // map.removeLayer(map.voterLayer); map.voterLayer = L.geoJSON(people).addTo(map); + //map.flyTo(map.voterLayer, 16); // } for( let ppl of people ){ From 7243ab874e5b2e40183f20cd4ce91508a9d35e9a Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Thu, 10 Nov 2022 00:27:18 -0500 Subject: [PATCH 24/48] clickable voter element started creating onclick behavior --- site/js/map.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/site/js/map.js b/site/js/map.js index 4b350f5..4ce5674 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -69,6 +69,12 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature } +function onEachFeature(feature, layer) { + layer.on('click', function (e) { + alert(feature.properties.id); + }); +} + export { initializeMap, locateMe, From 8c230d5504e6b8de0e7ca035b7e3df611576e629 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Sat, 12 Nov 2022 11:42:49 -0500 Subject: [PATCH 25/48] address aggregation complete --- site/js/dataPull.js | 78 ++++++++++++++++++++++++++------------------- site/js/map.js | 20 ++++++------ 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 75ada80..46f1855 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -3,7 +3,7 @@ import { populateVoterMenu } from './list.js'; const voterList = []; -function makeCoordinates(coords, id){ +function makeCoordinates(coords){ //console.log(id); //console.log(parseFloat(coords.substring(19,36))); @@ -34,41 +34,55 @@ function makeCoordinates(coords, id){ }; } -function makeVoterFeature(data){ +function constructVoter(v) { + let voterElement; + try { + voterElement = { + firstName : v['First Name'], + middleName : v['Middle Name'], + lastName : v['Last Name'], + gender : v['Gender'], + address : v['TIGER/Line Matched Address'], + city : v['City'], + county : v['County'], + state : v['State'], + zipCode : v['Zip'], + }; + return voterElement; + } catch(e) { + voterElement = null; + return voterElement; + } +} +function makeVoterFeature(data){ const voter = data; - for (let v of voter){ - - let geom = makeCoordinates(v['TIGER/Line Lng/Lat'], v['ID Number']); - // element can definitely have more properties. Just kept these for the time-being - - try - { let element = { - type : "Feature", - geometry : { - type : "Point", - coordinates : [geom.latitude, geom.longitude], - }, - properties : { - firstName : v['First Name'], - middleName : v['Middle Name'], - lastName : v['Last Name'], - gender : v['Gender'], - address : v['TIGER/Line Matched Address'], - city : v['City'], - county : v['County'], - state : v['State'], - zipCode : v['Zip'] - }, - }; - voterList.push(element);} - - catch(e){ - continue; + let addressIndex = voterList.findIndex(element => element.properties.address === v['TIGER/Line Matched Address']); + if (addressIndex !== -1) { + let voterObj = constructVoter(v); + if (voterObj) { + voterList[addressIndex].voters.push(voterObj); + } + } else { + let geom = makeCoordinates(v['TIGER/Line Lng/Lat']); + let addressElement = { + type : "Feature", + geometry : { + type : "Point", + coordinates : [geom.latitude, geom.longitude], + }, + properties : { + address : v['TIGER/Line Matched Address'], + }, + }; + let voterObj = constructVoter(v); + if (voterObj) { + addressElement['voters'] = [voterObj]; + } + voterList.push(addressElement); } } - return voterList; } @@ -88,7 +102,7 @@ function populateVoterList(listNum, map, voterListObj) { } ) // can we handle the error right here? // now handled invalid list number issue in this promise .then(text => { // TODO: try/catch HTTP error for nonexistent list number // done. - const data = Papa.parse(text, { header: true }); + const data = Papa.parse(text, { header: true, skipEmptyLines: true }); let voterList = makeVoterFeature(data['data']); populateVoterMap(voterList, map); populateVoterMenu(voterList, voterListObj); diff --git a/site/js/map.js b/site/js/map.js index 27fdf64..a1fd30f 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -59,16 +59,16 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature //map.flyTo(map.voterLayer, 16); // } - for( let ppl of people ){ - try{ - //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); - // TODO: figure out how to get geoJSONs to work in new layer - // map.voterLayer.addData(ppl); - } - catch(e){ - // pass - } - } + // for( let ppl of people ){ + // try{ + // //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + // // TODO: figure out how to get geoJSONs to work in new layer + // // map.voterLayer.addData(ppl); + // } + // catch(e){ + // // pass + // } + // } } From 48a09fe1c01657416c35c580d1c8117361dc5d38 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Sat, 12 Nov 2022 11:51:40 -0500 Subject: [PATCH 26/48] update populate voter menu for new address object format --- site/js/list.js | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/site/js/list.js b/site/js/list.js index d118888..6aa35f2 100644 --- a/site/js/list.js +++ b/site/js/list.js @@ -3,23 +3,27 @@ import { htmlToElement } from "./template-tools.js"; function populateVoterMenu(voterList, voterListObj) { voterListObj.innerHTML = ``; - if (myLocation) { // if we have user's location, sort the list by how close the houses are to the user at that moment before populating list - for (let voter of voterList) { - voter.properties.distToMe = (Math.abs(voter.geometry.coordinates[0] - myLocation.coordinates[0]) + - Math.abs(voter.geometry.coordinates[1] - myLocation.coordinates[1])); - } - voterList.sort(function (a, b) {b.properties.distToMe - a.properties.distToMe}); - } + // if (myLocation) { // if we have user's location, sort the list by how close the houses are to the user at that moment before populating list + // for (let voter of voterList) { + // voter.properties.distToMe = (Math.abs(voter.geometry.coordinates[0] - myLocation.coordinates[0]) + + // Math.abs(voter.geometry.coordinates[1] - myLocation.coordinates[1])); + // } + // voterList.sort(function (a, b) {b.properties.distToMe - a.properties.distToMe}); + // } - for (let voter of voterList) { + for (let address of voterList) { //TODO: figure out how to format span objects for voters in CSS + let voterHTML = ``; + for (let voter of address['voters']) { + voterHTML = voterHTML + `${voter['firstName']} ${voter['lastName']}`; + } const html = ` - ${voter.properties['firstName']} ${voter.properties['lastName']} - ${voter.properties['address']} + ${address.properties['address']} + ${voterHTML} `; const li = htmlToElement(html); From 4f35614ec559b64cf91f95338991c20cdc5d91b4 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sat, 12 Nov 2022 15:28:13 -0500 Subject: [PATCH 27/48] Setting up click behavior --- site/css/styles.css | 7 ++++++- site/js/dataPull.js | 1 + site/js/map.js | 7 +++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 395aaff..805b526 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -4,10 +4,12 @@ body { height: 100vh; margin: 0; padding: 0; + z-index: 1; } .map { - height: 100% + height: 100%; + z-index: 1; } textarea { @@ -15,11 +17,13 @@ textarea { display: block; margin-bottom: 1rem; height: 1rem; + z-index: -1;; } button { width: 100%; display: block; + z-index: -1; } .voter-list-container { @@ -27,4 +31,5 @@ button { display: block; height: 10rem; overflow-y: scroll; + z-index: -1;; } \ No newline at end of file diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 46f1855..fcdd4b2 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -38,6 +38,7 @@ function constructVoter(v) { let voterElement; try { voterElement = { + name : v['First Name'].concat(" ", v['Middle Name'], " ", v['Last Name']), firstName : v['First Name'], middleName : v['Middle Name'], lastName : v['Last Name'], diff --git a/site/js/map.js b/site/js/map.js index a1fd30f..dda513a 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -55,7 +55,9 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature // if (map.voterLayer !== undefined) { // map.removeLayer(map.voterLayer); - map.voterLayer = L.geoJSON(people).addTo(map); + map.voterLayer = L.geoJSON(people, { + onEachFeature : onEachFeature, + }).addTo(map); //map.flyTo(map.voterLayer, 16); // } @@ -74,7 +76,8 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature function onEachFeature(feature, layer) { layer.on('click', function (e) { - alert(feature.properties.id); + console.log("Voter clicked") + alert(feature.properties.address); }); } From 36d23ad722cfc9455a63e27bee9e0c6098580c06 Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sat, 12 Nov 2022 16:35:55 -0500 Subject: [PATCH 28/48] Made it so that you can call a voter list by hitting "enter" and also made a button to clear the text from the voter list input box. --- site/css/styles.css | 9 +++++---- site/index.html | 5 +++-- site/js/main.js | 29 +++++++++++++++++++++++++---- 3 files changed, 33 insertions(+), 10 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 395aaff..e4fc743 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -17,10 +17,11 @@ textarea { height: 1rem; } -button { - width: 100%; - display: block; -} +.button { + display:inline-block; + margin-right:5px; + height: 1rem; + } .voter-list-container { width: 100%; diff --git a/site/index.html b/site/index.html index 23f67c0..115243e 100644 --- a/site/index.html +++ b/site/index.html @@ -23,7 +23,8 @@

    Voter Canvassing App

    - + +
    @@ -31,4 +32,4 @@

    Voter Canvassing App

    - \ No newline at end of file + diff --git a/site/js/main.js b/site/js/main.js index 702da3f..b69ee13 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -8,20 +8,38 @@ let myLocation; // made a global myLocation variable that can be accessed when l let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable //need to restrict line of input to just 1. currently accepts enter and can fit a paragraph. -let voterFileLoadButton = document.querySelector('.button'); // saves button DOM element as variable +let voterFileLoadButton = document.querySelector('#load-voter-list-button'); // saves button DOM element as variable let voterListObj = document.querySelector("#voter-list"); // get list we'll put voters in from DOM +let clearInputTextButton = document.querySelector('#clear-text-button') + function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; console.log(listNum); populateVoterList(listNum, map, voterListObj, myLocation); } // creates function that passes the value entered in input text box to the variable listNum. -function loadVoterList() { +function loadVoterListClick() { voterFileLoadButton.addEventListener('click', onButtonClicked); } //adds an event listener that executes the onButtonClicked function when the voter load button is clicked -loadVoterList(); +loadVoterListClick(); + +function loadVoterListEnter() { + voterFileInput.addEventListener('keypress', function(event) { + if (event.keyCode == 13) + voterFileLoadButton.click(); +})}; +loadVoterListEnter(); + //adds an event listener that executes the onButtonClicked function when a user hits enter while typing in the Voter File Input text box + +function onClearInputButtonClicked () { + voterFileInput.value = ''}; + +function clearInputTextBox () { + clearInputTextButton.addEventListener('click', onClearInputButtonClicked) +}; +clearInputTextBox(); locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. @@ -30,4 +48,7 @@ window.voterFileInput = voterFileInput; window.voterFileLoadButton = voterFileLoadButton; window.voterListObj = voterListObj; window.voterMap = map; -window.myLocation = myLocation; \ No newline at end of file +window.myLocation = myLocation; + + + From 124700b91e2cd554a72f1fc7478d4bb71f347368 Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sat, 12 Nov 2022 16:40:37 -0500 Subject: [PATCH 29/48] Update styles.css --- site/css/styles.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 805b526..da2acd2 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -21,8 +21,8 @@ textarea { } button { - width: 100%; - display: block; + display:inline-block; + margin-right:5px; z-index: -1; } From 32d10b11718056309212507e4bc57731e265255a Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sat, 12 Nov 2022 16:51:05 -0500 Subject: [PATCH 30/48] Add comments to explain what I did in the last commit --- site/js/main.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/site/js/main.js b/site/js/main.js index b69ee13..1616ee1 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -8,11 +8,11 @@ let myLocation; // made a global myLocation variable that can be accessed when l let voterFileInput = document.querySelector('.input'); // saves input DOM element as variable //need to restrict line of input to just 1. currently accepts enter and can fit a paragraph. -let voterFileLoadButton = document.querySelector('#load-voter-list-button'); // saves button DOM element as variable +let voterFileLoadButton = document.querySelector('#load-voter-list-button'); // saves load voter list button DOM element as variable let voterListObj = document.querySelector("#voter-list"); // get list we'll put voters in from DOM -let clearInputTextButton = document.querySelector('#clear-text-button') +let clearInputTextButton = document.querySelector('#clear-text-button') //saves clear input text button as a DOM function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; @@ -40,6 +40,7 @@ function clearInputTextBox () { clearInputTextButton.addEventListener('click', onClearInputButtonClicked) }; clearInputTextBox(); +//adds an event listener that clears the voter list input text box when the user clicks the Clear Input Text button locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. From f9b259a6645b0cd4f5557e58d6ed81ace8b26778 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sat, 12 Nov 2022 17:44:09 -0500 Subject: [PATCH 31/48] Added interaction with addresses and voters A number of buttons with specified intents. Still need to set their behaviours. --- site/css/styles.css | 16 +++++++++ site/index.html | 2 ++ site/js/map.js | 80 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 97 insertions(+), 1 deletion(-) diff --git a/site/css/styles.css b/site/css/styles.css index 805b526..8981236 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -32,4 +32,20 @@ button { height: 10rem; overflow-y: scroll; z-index: -1;; +} + +#response-container{ + + border-radius: 15px; + border-color: black; + border: 10px; + height: 15%; + width: 15%; + flex-wrap: wrap; + justify-content: center; + align-items: center; + z-index: 1; + font-size: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + } \ No newline at end of file diff --git a/site/index.html b/site/index.html index 23f67c0..c03da83 100644 --- a/site/index.html +++ b/site/index.html @@ -26,6 +26,8 @@

    Voter Canvassing App

    +
    + diff --git a/site/js/map.js b/site/js/map.js index dda513a..6e64f8b 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,6 +1,27 @@ import { makeVoterFeature } from './dataPull.js'; import { populateVoterMenu } from './list.js'; +const responseContainer = document.getElementById("response-container"); +responseContainer.style.display = "none"; + +let people = document.createElement("ul"); +let voterAddress = document.createElement("b"); + +let closeVoterInfoButton = document.createElement("button"); + +let openVoterNotesButton = document.createElement("button"); + +let voterNotes = document.createElement("div"); + +let saveVoterNotesButton = document.createElement("button"); + +let closeVoterNotesButton = document.createElement("button"); + +let loadNotes = document.createElement("p"); +loadNotes.style.height = "10%"; +let writeNotes = document.createElement("textarea"); +writeNotes.style.height = "10%"; + function initializeMap () { let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; @@ -75,12 +96,69 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature } function onEachFeature(feature, layer) { + layer.on('click', function (e) { console.log("Voter clicked") - alert(feature.properties.address); + //alert(feature.properties.address); + responseContainer.style.display = "flex"; + people.innerHTML = ""; + voterAddress.innerHTML = feature.properties.address; + responseContainer.appendChild(voterAddress); + let residents = feature.voters; + for( let r = 0; r < residents.length; r++ ){ + console.log(residents[r].name) + let person = document.createElement("li"); + person.innerHTML = residents[r].name; + + people.appendChild(person); + } + + responseContainer.appendChild(people); + + closeVoterInfoButton.textContent = "Close"; + responseContainer.appendChild(closeVoterInfoButton); + + openVoterNotesButton.textContent = "Open Voter Notes"; + responseContainer.appendChild(openVoterNotesButton); + + console.log(residents) + }); } +closeVoterInfoButton.addEventListener('click',() =>{ + responseContainer.style.display = "none"; +}) + + + +openVoterNotesButton.addEventListener('click', () =>{ + + voterNotes.style.zIndex = "2"; + + voterNotes.appendChild(loadNotes); + voterNotes.appendChild(writeNotes); + + saveVoterNotesButton.textContent = "Save Voter Notes"; + voterNotes.appendChild(saveVoterNotesButton); + + closeVoterNotesButton.textContent = "Close Voter Notes"; + voterNotes.appendChild(closeVoterNotesButton); + + voterNotes.style.display = "flex"; + + responseContainer.appendChild(voterNotes); + + openVoterNotesButton.style.display = "none"; + + closeVoterNotesButton.addEventListener('click', ()=>{ + voterNotes.innerHTML = " "; + openVoterNotesButton.style.display = "flex"; + }) + + +}) + export { initializeMap, locateMe, From 575b2de1c471278b464e72fc73523928c3852111 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sat, 12 Nov 2022 18:35:28 -0500 Subject: [PATCH 32/48] Refined Individual inputs -2.0 Added buttons for individuals --- site/js/map.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/site/js/map.js b/site/js/map.js index 6e64f8b..4e9499e 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -108,9 +108,13 @@ function onEachFeature(feature, layer) { for( let r = 0; r < residents.length; r++ ){ console.log(residents[r].name) let person = document.createElement("li"); + let personLink = (document.createElement("button")); + personLink.textContent = (residents[r].name) + + person.appendChild(personLink); person.innerHTML = residents[r].name; - people.appendChild(person); + people.appendChild(personLink); } responseContainer.appendChild(people); @@ -135,6 +139,7 @@ closeVoterInfoButton.addEventListener('click',() =>{ openVoterNotesButton.addEventListener('click', () =>{ voterNotes.style.zIndex = "2"; + voterNotes.style.display = "flex"; voterNotes.appendChild(loadNotes); voterNotes.appendChild(writeNotes); @@ -145,7 +150,6 @@ openVoterNotesButton.addEventListener('click', () =>{ closeVoterNotesButton.textContent = "Close Voter Notes"; voterNotes.appendChild(closeVoterNotesButton); - voterNotes.style.display = "flex"; responseContainer.appendChild(voterNotes); From 67dd4df31fca4dba36fb7ae09ce1022ef418cb2a Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sat, 12 Nov 2022 20:09:44 -0500 Subject: [PATCH 33/48] after meeting with Morgan --- site/js/map.js | 27 +++++++++++++++++++++++---- site/res/default_home.png | Bin 0 -> 2019 bytes 2 files changed, 23 insertions(+), 4 deletions(-) create mode 100644 site/res/default_home.png diff --git a/site/js/map.js b/site/js/map.js index 4e9499e..ed375e2 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -22,6 +22,16 @@ loadNotes.style.height = "10%"; let writeNotes = document.createElement("textarea"); writeNotes.style.height = "10%"; +//default-icon + +let residenceIcon = L.Icon.extend({ + iconUrl: '../res/default_home.png', + iconSize: [5, 5], + iconAnchor: [5, 5], + popupAnchor: [-3, -76] + +}); + function initializeMap () { let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; @@ -76,9 +86,16 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature // if (map.voterLayer !== undefined) { // map.removeLayer(map.voterLayer); - map.voterLayer = L.geoJSON(people, { - onEachFeature : onEachFeature, - }).addTo(map); + map.voterLayer = L.geoJSON(people, {pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), + style: { + fillColor: "orange", + stroke: null, + fillOpacity: 0.9, + radius: 7, + + }, + onEachFeature : onEachFeature, + }).addTo(map); //map.flyTo(map.voterLayer, 16); // } @@ -98,7 +115,9 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature function onEachFeature(feature, layer) { layer.on('click', function (e) { - console.log("Voter clicked") + console.log(feature.geometry) + //L.marker(feature.geometry.coordinates).addTo(map); + //alert(feature.properties.address); responseContainer.style.display = "flex"; people.innerHTML = ""; diff --git a/site/res/default_home.png b/site/res/default_home.png new file mode 100644 index 0000000000000000000000000000000000000000..fc403f3bc4a83e4f4c12fd09cfbd5c496ac66bb9 GIT binary patch literal 2019 zcmb7Fdpr}07grJ%8kX1Y-9qzPw=Bw6x64%`Go4XJ==ZmzVQ+JWETN7H!1nfb z7Z(>2iKL;SK_n7kFj#eUH4cZPQmIHJ^3m$c|d5VF;IiGn(z|$XAKY-F*H*K)rV8gI-&x*9z$npk^{_ z?QxiQ2PBh87y3SbG$t|v1!SQa!qQ-z&ldz~V8?(=St!y9%47U3Hb|t5#JdvnuAUYf z#8Iwz@b<548N^bWS$xv9myQzvp4aYt{`eZi9sc&t?yjA%ry>JYID-*9;NzARt=`Cd z#YPjGSFMIku7<-h(s+IKxplz<-A^@ZP|Z2UvVu~h1BoPTd0`o^uQq070YUm{b5zyj z5b_I}%hwB_q_h0uA+y=7Wc5;}>J-ABfSks@V{0976Zuv;{v`Z{sTa6Sds^R-Z{ZG_ z0iBYxN>O_7*^%DIFE$v7wFq04)HzM$E%Jg&=R}R=zrt>frx$`XR4r~{Y=k^Iu%t(irrQaBBs7DLBNQ_@=1b(0j{ccy zdV?+5l!C>hbT`rDeT@-e)+!HU^pf5JY+tm+hA92IlG?>He~|mem1uO6Aza@CafdoO z&pXqP!LQl0>}X7=HQws<{}2XJtLlON!)zavi<~*jGq1$mD`+^~%2auF?)pdysuDmd zo{QJAD~u}Yi7x2(%*0vy(V$t5r&sHOMo#=VQ{q^WD=hLH3p5BJ`T5q0N{0Y-<+ck_$_<-%=aE~Iy3 z?<#t>ZVOOMf_*JoH`2}Tkt=BDa`4VygH7Se)adFouqlI9R&zr1VSC|Vr(Lh$I8R;;{S!Y+^Z9%{8Mc@iekN&rpR#I~sGX;<7FJ*%~} zcUixQSN)Go#`wuWTfYbzc};%V3j3=p#H^sVKofUZ)xYxnz_x|tV6z%`G7(A)Y$|oK zc0WeStlzeX2ZoDfLtqjk-79iv&zfHh`#LHHM`>!u427Y`c%2oukE?&?)M>*)xKn?) zO=Qmm1h!IYA$Z}&eG5L~_+6kS=LmJ)&LCyCc9F~DSt|j<%W^|oM+y9sTs7!gmAMsc z*t1m8U?jfO{N z#iqH_9J%aW2lNr^yz$U>rNoZ`**bd~`-|IlVjaH5Jjoe;mz-g6bGTn+-GmS@&-UI| zrh+~fKl)tb0JC`22SZB011%2`+BBwn)R13H-BEj)88}{Yw6AwS5dK25KV7!>6#mJq z$G)ZK)dQz7H9-Cms%gN|@gf6e+g;{s~a{`ri)vFP8~Iy(9g7lkjz*XL*5{D5WP$t!V;lZn^udnM g{U2GAN*ww#v?RWyUf++~B9&?x7e_Zt1B#gTKkS#&oB#j- literal 0 HcmV?d00001 From 794dc4098d8e2a757e400f9ae70ebefb99ac21ef Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sat, 12 Nov 2022 21:25:32 -0500 Subject: [PATCH 34/48] updated app font, created a button to clear map. --- site/css/styles.css | 6 ++++++ site/index.html | 1 + site/js/main.js | 3 +++ site/js/map.js | 22 +++++++++++++++------- 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index d8f831f..3099f72 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -1,3 +1,9 @@ +@import "https://fonts.googleapis.com/css2?family=Open+Sans"; + +html { + font-family: "Open Sans", sans-serif; +} + body { display: flex; flex-direction: column; diff --git a/site/index.html b/site/index.html index 7b50eca..7edfef5 100644 --- a/site/index.html +++ b/site/index.html @@ -25,6 +25,7 @@

    Voter Canvassing App

    +
    diff --git a/site/js/main.js b/site/js/main.js index 1616ee1..57ecae1 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -14,6 +14,7 @@ let voterListObj = document.querySelector("#voter-list"); // get list we'll put let clearInputTextButton = document.querySelector('#clear-text-button') //saves clear input text button as a DOM + function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; console.log(listNum); @@ -42,6 +43,8 @@ function clearInputTextBox () { clearInputTextBox(); //adds an event listener that clears the voter list input text box when the user clicks the Clear Input Text button + + locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. //declares variables in Global Scope diff --git a/site/js/map.js b/site/js/map.js index ed375e2..ec02650 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -22,15 +22,10 @@ loadNotes.style.height = "10%"; let writeNotes = document.createElement("textarea"); writeNotes.style.height = "10%"; +let clearMapButton = document.querySelector('#clear-map-button') + //default-icon -let residenceIcon = L.Icon.extend({ - iconUrl: '../res/default_home.png', - iconSize: [5, 5], - iconAnchor: [5, 5], - popupAnchor: [-3, -76] - -}); function initializeMap () { let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' @@ -182,8 +177,21 @@ openVoterNotesButton.addEventListener('click', () =>{ }) +function onClearMapButtonClicked () { + map.removeLayer(map.voterLayer); + console.log ("Map cleared") +}; + +function clearMap() { + clearMapButton.addEventListener('click', onClearMapButtonClicked) +}; +clearMap() +//Tried to create a function to clear the voterLayer markers from the map, but it's not working! + export { initializeMap, locateMe, populateVoterMap, }; + +window.clearMapButton = clearMapButton From 6a7f56d53257381888377c972a675f9eb555f84c Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sat, 12 Nov 2022 22:01:32 -0500 Subject: [PATCH 35/48] local storage setup --- site/js/map.js | 45 +++++++++++++++++++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 8 deletions(-) diff --git a/site/js/map.js b/site/js/map.js index ed375e2..929c607 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -4,6 +4,8 @@ import { populateVoterMenu } from './list.js'; const responseContainer = document.getElementById("response-container"); responseContainer.style.display = "none"; +let address = ""; + let people = document.createElement("ul"); let voterAddress = document.createElement("b"); @@ -18,7 +20,9 @@ let saveVoterNotesButton = document.createElement("button"); let closeVoterNotesButton = document.createElement("button"); let loadNotes = document.createElement("p"); -loadNotes.style.height = "10%"; +loadNotes.style.height = "30%"; +loadNotes.style.border = "10px black"; + let writeNotes = document.createElement("textarea"); writeNotes.style.height = "10%"; @@ -32,6 +36,11 @@ let residenceIcon = L.Icon.extend({ }); +const residence = { + currentResidence: null, + notes: null, + }; + function initializeMap () { let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; @@ -115,25 +124,27 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature function onEachFeature(feature, layer) { layer.on('click', function (e) { - console.log(feature.geometry) + //console.log(feature.geometry) //L.marker(feature.geometry.coordinates).addTo(map); - + + //residence.currentResidence = feature.properties.address; + //residence.notes = localStorage.getItem(residence.currentResidence); + console.log(localStorage.getItem(address)); + //alert(feature.properties.address); responseContainer.style.display = "flex"; people.innerHTML = ""; voterAddress.innerHTML = feature.properties.address; responseContainer.appendChild(voterAddress); let residents = feature.voters; + for( let r = 0; r < residents.length; r++ ){ console.log(residents[r].name) let person = document.createElement("li"); - let personLink = (document.createElement("button")); - personLink.textContent = (residents[r].name) - - person.appendChild(personLink); + person.innerHTML = residents[r].name; - people.appendChild(personLink); + people.appendChild(person); } responseContainer.appendChild(people); @@ -160,6 +171,12 @@ openVoterNotesButton.addEventListener('click', () =>{ voterNotes.style.zIndex = "2"; voterNotes.style.display = "flex"; + address = residence.currentResidence; + + console.log(residence.notes); + + loadNotes.innerText = localStorage.getItem(address); + voterNotes.appendChild(loadNotes); voterNotes.appendChild(writeNotes); @@ -177,6 +194,16 @@ openVoterNotesButton.addEventListener('click', () =>{ closeVoterNotesButton.addEventListener('click', ()=>{ voterNotes.innerHTML = " "; openVoterNotesButton.style.display = "flex"; + }); + + saveVoterNotesButton.addEventListener('click', (e) =>{ + const notes = writeNotes.value; + console.log(notes) + residence.notes = notes; + address = residence.currentResidence; + + localStorage.setItem(address , notes); + }) @@ -187,3 +214,5 @@ export { locateMe, populateVoterMap, }; + + window.people = people; \ No newline at end of file From 2818c088300fbe794084e1c037edf457c585a893 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sun, 13 Nov 2022 01:15:34 -0500 Subject: [PATCH 36/48] fixes and cleanups fixed some buttons and cleaned up the view --- site/css/styles.css | 36 +++++++++++++++++++++++++++++----- site/js/map.js | 47 ++++++++++++++++++++++++++++++--------------- 2 files changed, 63 insertions(+), 20 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 3099f72..cb491af 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -41,17 +41,43 @@ button { } #response-container{ - + background-color: rgb(26, 94, 94); + position: absolute; + top: 0%; + left: 75%; + right: 10%; + margin: 5px; + padding: 5px; border-radius: 15px; - border-color: black; - border: 10px; - height: 15%; - width: 15%; + border: 40px black; + height: 350px; + width: 250px; flex-wrap: wrap; + flex-direction: row-reverse; justify-content: center; align-items: center; z-index: 1; font-size: 10px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: azure; +} + +#voter-notes{ + top: 25%; + display: flex; + height: 300px; + width: 300px; + flex-direction: column; + align-items: center; +} + +button{ + height: 22px; + width: 130px; + bottom:30%; +} + +h3{ + top: 10%; } \ No newline at end of file diff --git a/site/js/map.js b/site/js/map.js index a2e805a..84c8a9b 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -7,24 +7,27 @@ responseContainer.style.display = "none"; let address = ""; let people = document.createElement("ul"); -let voterAddress = document.createElement("b"); +let voterAddress = document.createElement("h3"); let closeVoterInfoButton = document.createElement("button"); let openVoterNotesButton = document.createElement("button"); let voterNotes = document.createElement("div"); +voterNotes.id = "voter-notes" let saveVoterNotesButton = document.createElement("button"); let closeVoterNotesButton = document.createElement("button"); let loadNotes = document.createElement("p"); -loadNotes.style.height = "30%"; +loadNotes.style.height = "50px"; loadNotes.style.border = "10px black"; +loadNotes.innerHTML = "No notes for the residents of this building so far..." let writeNotes = document.createElement("textarea"); -writeNotes.style.height = "10%"; +writeNotes.style.height = "100px"; +writeNotes.style.width = "250px"; let clearMapButton = document.querySelector('#clear-map-button') @@ -100,6 +103,16 @@ function populateVoterMap(people, map) { // receives data from makeVoterFeature }, onEachFeature : onEachFeature, }).addTo(map); + + function onClearMapButtonClicked () { + map.removeLayer(map.voterLayer); + console.log ("Map cleared") + } + + function clearMap() { + clearMapButton.addEventListener('click', onClearMapButtonClicked) + } + clearMap() //map.flyTo(map.voterLayer, 16); // } @@ -126,6 +139,10 @@ function onEachFeature(feature, layer) { //residence.notes = localStorage.getItem(residence.currentResidence); console.log(localStorage.getItem(address)); + residence.currentResidence = feature.properties.address; + residence.notes = localStorage.getItem(residence.currentResidence); + voterNotes.style.display = "none"; + //alert(feature.properties.address); responseContainer.style.display = "flex"; people.innerHTML = ""; @@ -148,6 +165,7 @@ function onEachFeature(feature, layer) { responseContainer.appendChild(closeVoterInfoButton); openVoterNotesButton.textContent = "Open Voter Notes"; + openVoterNotesButton.style.display = "block"; responseContainer.appendChild(openVoterNotesButton); console.log(residents) @@ -163,14 +181,23 @@ closeVoterInfoButton.addEventListener('click',() =>{ openVoterNotesButton.addEventListener('click', () =>{ + openVoterNotesButton.style.display = "none"; + voterNotes.style.zIndex = "2"; voterNotes.style.display = "flex"; + voterNotes.style.alignContent = "column"; address = residence.currentResidence; console.log(residence.notes); - loadNotes.innerText = localStorage.getItem(address); + if(localStorage.getItem(address) === null){ + loadNotes.innerText = "No notes for this building so far..." + } + + else{ + loadNotes.innerText = localStorage.getItem(address); + } voterNotes.appendChild(loadNotes); voterNotes.appendChild(writeNotes); @@ -181,11 +208,8 @@ openVoterNotesButton.addEventListener('click', () =>{ closeVoterNotesButton.textContent = "Close Voter Notes"; voterNotes.appendChild(closeVoterNotesButton); - responseContainer.appendChild(voterNotes); - openVoterNotesButton.style.display = "none"; - closeVoterNotesButton.addEventListener('click', ()=>{ voterNotes.innerHTML = " "; openVoterNotesButton.style.display = "flex"; @@ -196,6 +220,7 @@ openVoterNotesButton.addEventListener('click', () =>{ console.log(notes) residence.notes = notes; address = residence.currentResidence; + console.log(residence) localStorage.setItem(address , notes); @@ -204,15 +229,7 @@ openVoterNotesButton.addEventListener('click', () =>{ }) -function onClearMapButtonClicked () { - map.removeLayer(map.voterLayer); - console.log ("Map cleared") -}; -function clearMap() { - clearMapButton.addEventListener('click', onClearMapButtonClicked) -}; -clearMap() //Tried to create a function to clear the voterLayer markers from the map, but it's not working! export { From 69f2b3d5cfa830e5cec8b224e681bcb493da8d1a Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Sun, 13 Nov 2022 01:50:00 -0500 Subject: [PATCH 37/48] styles changes --- site/css/styles.css | 40 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 38 insertions(+), 2 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index cb491af..7448628 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -4,6 +4,13 @@ html { font-family: "Open Sans", sans-serif; } +h1{ + background-color: rgb(33, 126, 121); + color: whitesmoke; + margin: 0px; + padding: 25px; +} + body { display: flex; flex-direction: column; @@ -34,10 +41,13 @@ button { .voter-list-container { width: 100%; - display: block; + display: flex; + flex-direction: row; + flex-wrap: wrap; height: 10rem; overflow-y: scroll; - z-index: -1;; + overflow-x: auto; + z-index: 1;; } #response-container{ @@ -80,4 +90,30 @@ button{ h3{ top: 10%; +} + +.voter-address{ + font-style: italic; + font-weight: bold; +} + +#voter-list{ + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.voter-list-item{ + margin: 10px; + display: flex; + flex-wrap: wrap; + padding: 5px; + height:50px; + width:200px; + background-color: rgb(26, 94, 94); + color: azure; + font-size: 10px; + border-radius: 5px; + } \ No newline at end of file From ef3f894a13e395e44cde148651b1a1d2533a67d8 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Sun, 13 Nov 2022 15:42:00 -0500 Subject: [PATCH 38/48] add additional voter fields --- site/js/dataPull.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index fcdd4b2..01ec502 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -48,6 +48,10 @@ function constructVoter(v) { county : v['County'], state : v['State'], zipCode : v['Zip'], + id: v['ID Number'], + stillLivesThere: "", + votingPlan: "", + languageAssistance: "", }; return voterElement; } catch(e) { @@ -59,6 +63,7 @@ function constructVoter(v) { function makeVoterFeature(data){ const voter = data; for (let v of voter){ + console.log(v); let addressIndex = voterList.findIndex(element => element.properties.address === v['TIGER/Line Matched Address']); if (addressIndex !== -1) { let voterObj = constructVoter(v); From 6ae9b8b269656b29bf44632e2489d6945e1c5b20 Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Mon, 14 Nov 2022 02:29:54 -0500 Subject: [PATCH 39/48] checkboxes and tags added --- site/css/styles.css | 13 +++-- site/js/dataPull.js | 2 +- site/js/map.js | 127 +++++++++++++++++++++++++++++++++----------- 3 files changed, 107 insertions(+), 35 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 7448628..4dcdbcb 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -60,7 +60,7 @@ button { padding: 5px; border-radius: 15px; border: 40px black; - height: 350px; + height: 500px; width: 250px; flex-wrap: wrap; flex-direction: row-reverse; @@ -83,8 +83,10 @@ button { } button{ - height: 22px; - width: 130px; + display: flex; + flex-direction: row; + flex-wrap: wrap; + bottom:30%; } @@ -116,4 +118,9 @@ h3{ font-size: 10px; border-radius: 5px; +} + +#blank{ + height:auto; + width:auto; } \ No newline at end of file diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 01ec502..a65ee8f 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -63,7 +63,7 @@ function constructVoter(v) { function makeVoterFeature(data){ const voter = data; for (let v of voter){ - console.log(v); + //console.log(v); let addressIndex = voterList.findIndex(element => element.properties.address === v['TIGER/Line Matched Address']); if (addressIndex !== -1) { let voterObj = constructVoter(v); diff --git a/site/js/map.js b/site/js/map.js index 84c8a9b..3da1984 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,10 +1,16 @@ import { makeVoterFeature } from './dataPull.js'; import { populateVoterMenu } from './list.js'; -const responseContainer = document.getElementById("response-container"); +let responseContainer = document.getElementById("response-container"); responseContainer.style.display = "none"; +let firstStage = responseContainer; + +let blank = document.createElement("div"); +blank.id = "blank"; + let address = ""; +let ID = ""; let people = document.createElement("ul"); let voterAddress = document.createElement("h3"); @@ -34,9 +40,13 @@ let clearMapButton = document.querySelector('#clear-map-button') //default-icon -const residence = { - currentResidence: null, - notes: null, +const voter = { + currentAddress: null, + currentID: null, + currentNotes: null, + stillLivesThere: null, + votingPlan: null, + languageAssistance: null, }; function initializeMap () { @@ -139,36 +149,46 @@ function onEachFeature(feature, layer) { //residence.notes = localStorage.getItem(residence.currentResidence); console.log(localStorage.getItem(address)); - residence.currentResidence = feature.properties.address; - residence.notes = localStorage.getItem(residence.currentResidence); + voter.currentAddress = feature.properties.address; + //voter.currentID = feature.voters + //voter.currentNotes = localStorage.getItem(voter.currentID); voterNotes.style.display = "none"; //alert(feature.properties.address); responseContainer.style.display = "flex"; people.innerHTML = ""; voterAddress.innerHTML = feature.properties.address; - responseContainer.appendChild(voterAddress); + + firstStage = responseContainer; + + firstStage.appendChild(voterAddress); let residents = feature.voters; for( let r = 0; r < residents.length; r++ ){ + console.log(residents[r].name) - let person = document.createElement("li"); - + + let person = document.createElement("button"); + person.textContent = residents[r].name person.innerHTML = residents[r].name; + person.value = residents[r].name; + + person.style.display = "flex"; + + person.addEventListener('click', ()=>{ + openVoterNotes(person.value, residents[r]); + }); people.appendChild(person); } - responseContainer.appendChild(people); + firstStage.appendChild(people); closeVoterInfoButton.textContent = "Close"; - responseContainer.appendChild(closeVoterInfoButton); - - openVoterNotesButton.textContent = "Open Voter Notes"; - openVoterNotesButton.style.display = "block"; - responseContainer.appendChild(openVoterNotesButton); + firstStage.appendChild(closeVoterInfoButton); - console.log(residents) + console.log(residents); + responseContainer = firstStage; }); } @@ -179,24 +199,27 @@ closeVoterInfoButton.addEventListener('click',() =>{ -openVoterNotesButton.addEventListener('click', () =>{ +function openVoterNotes(id, v){ - openVoterNotesButton.style.display = "none"; + //openVoterNotesButton.style.display = "none"; + //responseContainer = blank ; voterNotes.style.zIndex = "2"; voterNotes.style.display = "flex"; voterNotes.style.alignContent = "column"; - address = residence.currentResidence; + let voterInfoQuestions = ['stillLivesThere', 'votingPlan', 'languageAssistance']; - console.log(residence.notes); + voter.currentID = id; - if(localStorage.getItem(address) === null){ - loadNotes.innerText = "No notes for this building so far..." + console.log(voter.currentID); + + if(localStorage.getItem(voter.currentID) === null){ + loadNotes.innerText = "No notes for this ID so far..." } else{ - loadNotes.innerText = localStorage.getItem(address); + loadNotes.innerText = localStorage.getItem(voter.currentID); } voterNotes.appendChild(loadNotes); @@ -208,26 +231,68 @@ openVoterNotesButton.addEventListener('click', () =>{ closeVoterNotesButton.textContent = "Close Voter Notes"; voterNotes.appendChild(closeVoterNotesButton); + for( let t of voterInfoQuestions ){ + + let tag = document.createElement("h4"); + tag.textContent = t; + tag.style.color = "white"; + tag.style.backgroundColor = setTag(v[t]); + tag.style.padding = "5px"; + tag.style.fontSize = "10px"; + + voterNotes.appendChild(tag); + } + + + function setTag(status){ + + if(status === true){ + return "green"; + } + else{ + return "red"; + } + } + + for( let q of voterInfoQuestions ){ + + + let questionCheckbox = document.createElement("input"); + let checkboxLabel = document.createElement("label"); + questionCheckbox.type = "checkbox"; + questionCheckbox.id = q; + questionCheckbox.value = q; + + checkboxLabel.htmlFor = q; + checkboxLabel.appendChild(document.createTextNode(q)); + v[q] = questionCheckbox.checked ? true : false ; + + voterNotes.appendChild(questionCheckbox); + voterNotes.appendChild(checkboxLabel); + voterNotes.appendChild(document.createElement("br")); + + } + responseContainer.appendChild(voterNotes); closeVoterNotesButton.addEventListener('click', ()=>{ - voterNotes.innerHTML = " "; - openVoterNotesButton.style.display = "flex"; + voterNotes = blank; + responseContainer = firstStage; + //openVoterNotesButton.style.display = "flex"; + }); saveVoterNotesButton.addEventListener('click', (e) =>{ const notes = writeNotes.value; console.log(notes) - residence.notes = notes; - address = residence.currentResidence; - console.log(residence) - - localStorage.setItem(address , notes); + voter.currentNotes = notes; + + localStorage.setItem(voter.currentID , voter.currentNotes); }) -}) +} //Tried to create a function to clear the voterLayer markers from the map, but it's not working! From fa3f9efce5a7294f250d29872227a499575c39c6 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 14 Nov 2022 21:33:58 -0500 Subject: [PATCH 40/48] fix map clear button --- site/js/dataPull.js | 3 ++- site/js/main.js | 23 +++++++++++++++++++---- site/js/map.js | 27 +++++++-------------------- 3 files changed, 28 insertions(+), 25 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index a65ee8f..8444a35 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,7 +1,7 @@ import { initializeMap, locateMe, populateVoterMap } from './map.js'; import { populateVoterMenu } from './list.js'; -const voterList = []; +let voterList = []; function makeCoordinates(coords){ @@ -61,6 +61,7 @@ function constructVoter(v) { } function makeVoterFeature(data){ + voterList = []; const voter = data; for (let v of voter){ //console.log(v); diff --git a/site/js/main.js b/site/js/main.js index 57ecae1..f9a6c2d 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -12,12 +12,25 @@ let voterFileLoadButton = document.querySelector('#load-voter-list-button'); // let voterListObj = document.querySelector("#voter-list"); // get list we'll put voters in from DOM -let clearInputTextButton = document.querySelector('#clear-text-button') //saves clear input text button as a DOM +let clearInputTextButton = document.querySelector('#clear-text-button'); //saves clear input text button as a DOM +let clearMapButton = document.querySelector('#clear-map-button'); + +function onClearMapButtonClicked() { + map.removeLayer(map.voterLayer); + voterListObj.innerHTML = ``; + console.log("Map cleared"); +} + +function clearMap() { + clearMapButton.addEventListener('click', onClearMapButtonClicked); +} +clearMap(); function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; console.log(listNum); + onClearMapButtonClicked(); populateVoterList(listNum, map, voterListObj, myLocation); } // creates function that passes the value entered in input text box to the variable listNum. @@ -30,7 +43,9 @@ function loadVoterListEnter() { voterFileInput.addEventListener('keypress', function(event) { if (event.keyCode == 13) voterFileLoadButton.click(); -})}; +}); +} + loadVoterListEnter(); //adds an event listener that executes the onButtonClicked function when a user hits enter while typing in the Voter File Input text box @@ -38,9 +53,9 @@ function onClearInputButtonClicked () { voterFileInput.value = ''}; function clearInputTextBox () { - clearInputTextButton.addEventListener('click', onClearInputButtonClicked) + clearInputTextButton.addEventListener('click', onClearInputButtonClicked); }; -clearInputTextBox(); +clearInputTextBox(); //adds an event listener that clears the voter list input text box when the user clicks the Clear Input Text button diff --git a/site/js/map.js b/site/js/map.js index 3da1984..103b553 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -35,8 +35,6 @@ let writeNotes = document.createElement("textarea"); writeNotes.style.height = "100px"; writeNotes.style.width = "250px"; -let clearMapButton = document.querySelector('#clear-map-button') - //default-icon @@ -100,29 +98,19 @@ function locateMe(map){ function populateVoterMap(people, map) { // receives data from makeVoterFeature and plots them on the map console.log("These are the voters"); + map.removeLayer(map.voterLayer); // if (map.voterLayer !== undefined) { // map.removeLayer(map.voterLayer); - map.voterLayer = L.geoJSON(people, {pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), + map.voterLayer = L.geoJSON(people, { pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), style: { fillColor: "orange", stroke: null, fillOpacity: 0.9, radius: 7, - }, onEachFeature : onEachFeature, }).addTo(map); - - function onClearMapButtonClicked () { - map.removeLayer(map.voterLayer); - console.log ("Map cleared") - } - - function clearMap() { - clearMapButton.addEventListener('click', onClearMapButtonClicked) - } - clearMap() //map.flyTo(map.voterLayer, 16); // } @@ -189,13 +177,13 @@ function onEachFeature(feature, layer) { console.log(residents); responseContainer = firstStage; - + }); } -closeVoterInfoButton.addEventListener('click',() =>{ +closeVoterInfoButton.addEventListener('click', () =>{ responseContainer.style.display = "none"; -}) +}); @@ -242,7 +230,7 @@ function openVoterNotes(id, v){ voterNotes.appendChild(tag); } - + function setTag(status){ @@ -256,7 +244,6 @@ function openVoterNotes(id, v){ for( let q of voterInfoQuestions ){ - let questionCheckbox = document.createElement("input"); let checkboxLabel = document.createElement("label"); questionCheckbox.type = "checkbox"; @@ -286,7 +273,7 @@ function openVoterNotes(id, v){ const notes = writeNotes.value; console.log(notes) voter.currentNotes = notes; - + localStorage.setItem(voter.currentID , voter.currentNotes); }) From 723d1015e57f2fc25bf0e0db83d28d3a8b4f4c0c Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 14 Nov 2022 21:50:49 -0500 Subject: [PATCH 41/48] linting --- site/js/dataPull.js | 18 ++-- site/js/main.js | 11 +- site/js/map.js | 256 +++++++++++++++++++++----------------------- 3 files changed, 139 insertions(+), 146 deletions(-) diff --git a/site/js/dataPull.js b/site/js/dataPull.js index 8444a35..b43851f 100644 --- a/site/js/dataPull.js +++ b/site/js/dataPull.js @@ -1,4 +1,4 @@ -import { initializeMap, locateMe, populateVoterMap } from './map.js'; +import { populateVoterMap } from './map.js'; import { populateVoterMenu } from './list.js'; let voterList = []; @@ -102,11 +102,11 @@ function populateVoterList(listNum, map, voterListObj) { } else{ - console.log("Working") + console.log("Working"); return resp.text(); } - } ) // can we handle the error right here? // now handled invalid list number issue in this promise + } ) // can we handle the error right here? // now handled invalid list number issue in this promise .then(text => { // TODO: try/catch HTTP error for nonexistent list number // done. const data = Papa.parse(text, { header: true, skipEmptyLines: true }); @@ -123,10 +123,10 @@ export { window.voterList = voterList; -"-75.16145216099994,39.92993551500007" -"-75.15802336899998,39.93087322800005" -"-75.15842544799995,39.93086332400003" -"-75.15947777399998,39.93155817300004" +// "-75.16145216099994,39.92993551500007" +// "-75.15802336899998,39.93087322800005" +// "-75.15842544799995,39.93086332400003" +// "-75.15947777399998,39.93155817300004" -"112545002-51" // problem element in list '0101' // eliminated in the try-catch block in makeCoordinates -"015653961-51" \ No newline at end of file +// "112545002-51" // problem element in list '0101' // eliminated in the try-catch block in makeCoordinates +// "015653961-51" \ No newline at end of file diff --git a/site/js/main.js b/site/js/main.js index f9a6c2d..a1e02fb 100644 --- a/site/js/main.js +++ b/site/js/main.js @@ -1,4 +1,4 @@ -import { initializeMap, locateMe } from './map.js'; +import { initializeMap } from './map.js'; import { populateVoterList } from './dataPull.js'; let map = initializeMap(); @@ -27,7 +27,7 @@ function clearMap() { } clearMap(); -function onButtonClicked(evt) { // maybe add functionality that listens for enter button pressed +function onButtonClicked() { // maybe add functionality that listens for enter button pressed listNum = voterFileInput.value; console.log(listNum); onClearMapButtonClicked(); @@ -50,17 +50,18 @@ loadVoterListEnter(); //adds an event listener that executes the onButtonClicked function when a user hits enter while typing in the Voter File Input text box function onClearInputButtonClicked () { - voterFileInput.value = ''}; + voterFileInput.value = ''; +} function clearInputTextBox () { clearInputTextButton.addEventListener('click', onClearInputButtonClicked); -}; +} clearInputTextBox(); //adds an event listener that clears the voter list input text box when the user clicks the Clear Input Text button -locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. +//locateMe(map, myLocation); // runs function to return your location and mark it on a map. Have to use localhost:8080 for the location to be accessed though. //declares variables in Global Scope window.voterFileInput = voterFileInput; diff --git a/site/js/map.js b/site/js/map.js index 103b553..5b3e394 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,6 +1,3 @@ -import { makeVoterFeature } from './dataPull.js'; -import { populateVoterMenu } from './list.js'; - let responseContainer = document.getElementById("response-container"); responseContainer.style.display = "none"; @@ -10,17 +7,17 @@ let blank = document.createElement("div"); blank.id = "blank"; let address = ""; -let ID = ""; +//let ID = ""; let people = document.createElement("ul"); let voterAddress = document.createElement("h3"); let closeVoterInfoButton = document.createElement("button"); -let openVoterNotesButton = document.createElement("button"); +//let openVoterNotesButton = document.createElement("button"); let voterNotes = document.createElement("div"); -voterNotes.id = "voter-notes" +voterNotes.id = "voter-notes"; let saveVoterNotesButton = document.createElement("button"); @@ -29,7 +26,7 @@ let closeVoterNotesButton = document.createElement("button"); let loadNotes = document.createElement("p"); loadNotes.style.height = "50px"; loadNotes.style.border = "10px black"; -loadNotes.innerHTML = "No notes for the residents of this building so far..." +loadNotes.innerHTML = "No notes for the residents of this building so far..."; let writeNotes = document.createElement("textarea"); writeNotes.style.height = "100px"; @@ -65,128 +62,46 @@ function initializeMap () { return map; } -function locateMe(map){ - - const successCallback = (pos) => { - if (map.positionLayer !== undefined) { - map.removeLayer(map.positionLayer); - } - - myLocation = { - 'type': 'Point', - 'coordinates': [pos.coords.longitude, pos.coords.latitude] - }; +// function locateMe(map){ - map.positionLayer = L.geoJSON(myLocation).addTo(map); +// const successCallback = (pos) => { +// if (map.positionLayer !== undefined) { +// map.removeLayer(map.positionLayer); +// } - // un-comment following line if we want the map to zoom to user location on startup: - //map.setView([pos.coords.latitude, pos.coords.longitude], 19); +// myLocation = { +// 'type': 'Point', +// 'coordinates': [pos.coords.longitude, pos.coords.latitude] +// }; - return myLocation; +// map.positionLayer = L.geoJSON(myLocation).addTo(map); - } - const errorCallback = (e) => console.log(e); +// // un-comment following line if we want the map to zoom to user location on startup: +// //map.setView([pos.coords.latitude, pos.coords.longitude], 19); - const options = { enableHighAccuracy: true, timeout: 10000 }; +// return myLocation; - const id = navigator.geolocation.watchPosition(successCallback, errorCallback, options); +// } +// const errorCallback = (e) => console.log(e); - //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. +// const options = { enableHighAccuracy: true, timeout: 10000 }; -} +// const id = navigator.geolocation.watchPosition(successCallback, errorCallback, options); -function populateVoterMap(people, map) { // receives data from makeVoterFeature and plots them on the map +// //navigator.geolocation.clearWatch(id); // will need this when we change location in real-time. - console.log("These are the voters"); - map.removeLayer(map.voterLayer); +// } - // if (map.voterLayer !== undefined) { - // map.removeLayer(map.voterLayer); - map.voterLayer = L.geoJSON(people, { pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), - style: { - fillColor: "orange", - stroke: null, - fillOpacity: 0.9, - radius: 7, - }, - onEachFeature : onEachFeature, - }).addTo(map); - //map.flyTo(map.voterLayer, 16); - // } +function setTag(status){ - // for( let ppl of people ){ - // try{ - // //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); - // // TODO: figure out how to get geoJSONs to work in new layer - // // map.voterLayer.addData(ppl); - // } - // catch(e){ - // // pass - // } - // } - -} - -function onEachFeature(feature, layer) { - - layer.on('click', function (e) { - //console.log(feature.geometry) - //L.marker(feature.geometry.coordinates).addTo(map); - - //residence.currentResidence = feature.properties.address; - //residence.notes = localStorage.getItem(residence.currentResidence); - console.log(localStorage.getItem(address)); - - voter.currentAddress = feature.properties.address; - //voter.currentID = feature.voters - //voter.currentNotes = localStorage.getItem(voter.currentID); - voterNotes.style.display = "none"; - - //alert(feature.properties.address); - responseContainer.style.display = "flex"; - people.innerHTML = ""; - voterAddress.innerHTML = feature.properties.address; - - firstStage = responseContainer; - - firstStage.appendChild(voterAddress); - let residents = feature.voters; - - for( let r = 0; r < residents.length; r++ ){ - - console.log(residents[r].name) - - let person = document.createElement("button"); - person.textContent = residents[r].name - person.innerHTML = residents[r].name; - person.value = residents[r].name; - - person.style.display = "flex"; - - person.addEventListener('click', ()=>{ - openVoterNotes(person.value, residents[r]); - }); - - people.appendChild(person); - } - - firstStage.appendChild(people); - - closeVoterInfoButton.textContent = "Close"; - firstStage.appendChild(closeVoterInfoButton); - - console.log(residents); - responseContainer = firstStage; - - }); + if(status === true){ + return "green"; + } + else{ + return "red"; + } } -closeVoterInfoButton.addEventListener('click', () =>{ - responseContainer.style.display = "none"; -}); - - - function openVoterNotes(id, v){ //openVoterNotesButton.style.display = "none"; @@ -203,7 +118,7 @@ function openVoterNotes(id, v){ console.log(voter.currentID); if(localStorage.getItem(voter.currentID) === null){ - loadNotes.innerText = "No notes for this ID so far..." + loadNotes.innerText = "No notes for this ID so far..."; } else{ @@ -231,17 +146,6 @@ function openVoterNotes(id, v){ voterNotes.appendChild(tag); } - - function setTag(status){ - - if(status === true){ - return "green"; - } - else{ - return "red"; - } - } - for( let q of voterInfoQuestions ){ let questionCheckbox = document.createElement("input"); @@ -269,23 +173,111 @@ function openVoterNotes(id, v){ }); - saveVoterNotesButton.addEventListener('click', (e) =>{ + saveVoterNotesButton.addEventListener('click', () =>{ const notes = writeNotes.value; - console.log(notes) + console.log(notes); voter.currentNotes = notes; - localStorage.setItem(voter.currentID , voter.currentNotes); + localStorage.setItem(voter.currentID, voter.currentNotes); - }) + }); } +function onEachFeature(feature, layer) { + + layer.on('click', function () { + //console.log(feature.geometry) + //L.marker(feature.geometry.coordinates).addTo(map); + + //residence.currentResidence = feature.properties.address; + //residence.notes = localStorage.getItem(residence.currentResidence); + console.log(localStorage.getItem(address)); + + voter.currentAddress = feature.properties.address; + //voter.currentID = feature.voters + //voter.currentNotes = localStorage.getItem(voter.currentID); + voterNotes.style.display = "none"; + + //alert(feature.properties.address); + responseContainer.style.display = "flex"; + people.innerHTML = ""; + voterAddress.innerHTML = feature.properties.address; + + firstStage = responseContainer; + + firstStage.appendChild(voterAddress); + let residents = feature.voters; + + for( let r = 0; r < residents.length; r++ ){ + + console.log(residents[r].name); + + let person = document.createElement("button"); + person.textContent = residents[r].name; + person.innerHTML = residents[r].name; + person.value = residents[r].name; + + person.style.display = "flex"; + + person.addEventListener('click', ()=>{ + openVoterNotes(person.value, residents[r]); + }); + + people.appendChild(person); + } + + firstStage.appendChild(people); + + closeVoterInfoButton.textContent = "Close"; + firstStage.appendChild(closeVoterInfoButton); + + console.log(residents); + responseContainer = firstStage; + + }); +} + +closeVoterInfoButton.addEventListener('click', () =>{ + responseContainer.style.display = "none"; +}); + +function populateVoterMap(people, map) { // receives data from makeVoterFeature and plots them on the map + + console.log("These are the voters"); + map.removeLayer(map.voterLayer); + + // if (map.voterLayer !== undefined) { + // map.removeLayer(map.voterLayer); + map.voterLayer = L.geoJSON(people, { pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), + style: { + fillColor: "orange", + stroke: null, + fillOpacity: 0.9, + radius: 7, + }, + onEachFeature : onEachFeature, + }).addTo(map); + //map.flyTo(map.voterLayer, 16); + // } + + // for( let ppl of people ){ + // try{ + // //L.marker(ppl.geometry.coordinates).bindPopup(ppl.properties['address']).addTo(map); + // // TODO: figure out how to get geoJSONs to work in new layer + // // map.voterLayer.addData(ppl); + // } + // catch(e){ + // // pass + // } + // } + +} //Tried to create a function to clear the voterLayer markers from the map, but it's not working! export { initializeMap, - locateMe, populateVoterMap, }; From b795e6e102205cfb372aa90c4c57d3a0cc5475ab Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Thu, 17 Nov 2022 01:55:58 -0500 Subject: [PATCH 42/48] Menu Fixes --- site/css/styles.css | 16 +++- site/index.html | 6 ++ site/js/map.js | 221 ++++++++++++++++++++++++++++++++++---------- 3 files changed, 189 insertions(+), 54 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 4dcdbcb..6449161 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -5,7 +5,7 @@ html { } h1{ - background-color: rgb(33, 126, 121); + background-color: #217e79; color: whitesmoke; margin: 0px; padding: 25px; @@ -60,8 +60,8 @@ button { padding: 5px; border-radius: 15px; border: 40px black; - height: 500px; - width: 250px; + height: auto; + width: auto; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; @@ -70,6 +70,8 @@ button { font-size: 10px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: azure; + + transform: inherit; } @@ -86,7 +88,9 @@ button{ display: flex; flex-direction: row; flex-wrap: wrap; - + font-size: 10px; + background-color: #217e79; + color: aliceblue; bottom:30%; } @@ -123,4 +127,6 @@ h3{ #blank{ height:auto; width:auto; -} \ No newline at end of file +} + + diff --git a/site/index.html b/site/index.html index 7edfef5..4aa7c85 100644 --- a/site/index.html +++ b/site/index.html @@ -30,6 +30,12 @@

    Voter Canvassing App

    +
    +

    +

    +

    +
    + diff --git a/site/js/map.js b/site/js/map.js index 5b3e394..19c627a 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -3,14 +3,14 @@ responseContainer.style.display = "none"; let firstStage = responseContainer; -let blank = document.createElement("div"); -blank.id = "blank"; +let voterCard = document.createElement("div"); +voterCard.id = "voterCard"; let address = ""; //let ID = ""; let people = document.createElement("ul"); -let voterAddress = document.createElement("h3"); +let voterAddress = document.createElement("h2"); let closeVoterInfoButton = document.createElement("button"); @@ -38,6 +38,7 @@ writeNotes.style.width = "250px"; const voter = { currentAddress: null, currentID: null, + currentName: null, currentNotes: null, stillLivesThere: null, votingPlan: null, @@ -92,60 +93,132 @@ function initializeMap () { // } -function setTag(status){ +function setTag(status){ // sets tag as green/red if any of the voter object yes/no questions are answered, grey if " " (blank) - if(status === true){ - return "green"; - } - else{ - return "red"; + switch(status){ + case 'true': + return "green"; + case 'false': + return "red"; + case null: + return "grey"; } } -function openVoterNotes(id, v){ +function openVoterNotes(p){ //openVoterNotesButton.style.display = "none"; //responseContainer = blank ; + let notes = document.createElement("div"); + notes.id = "notes"; + let tags = document.createElement("div"); + tags.id = "tags"; + let checkboxes = document.createElement("div"); + checkboxes.id = "checkboxes"; + let buttons = document.createElement("div"); + buttons.id = "buttons"; + + voterNotes.innerHTML = " "; + voterNotes.style.zIndex = "2"; voterNotes.style.display = "flex"; - voterNotes.style.alignContent = "column"; + voterNotes.style.justifyContent = "space-between"; + voterNotes.style.width = "250px"; + voterNotes.style.height = "auto"; let voterInfoQuestions = ['stillLivesThere', 'votingPlan', 'languageAssistance']; - voter.currentID = id; + voter.currentID = p.id; + voter.currentName = p.name; + + for( let n of voterInfoQuestions ){ - console.log(voter.currentID); + let item = voter.currentID.concat(" ").concat(n); + console.log(item); + voter[n] = localStorage.getItem(item); + } + + console.log(voter); + + // NOTES ONLY if(localStorage.getItem(voter.currentID) === null){ - loadNotes.innerText = "No notes for this ID so far..."; + loadNotes.innerText = "No notes for ID " + voter.currentID + " so far..."; + } else{ loadNotes.innerText = localStorage.getItem(voter.currentID); } - voterNotes.appendChild(loadNotes); - voterNotes.appendChild(writeNotes); + loadNotes.style.backgroundColor = "#217e79" + loadNotes.style.width = "100%"; + loadNotes.style.height = "50%"; + loadNotes.border = "10px"; + loadNotes.borderRadius = "10px"; - saveVoterNotesButton.textContent = "Save Voter Notes"; - voterNotes.appendChild(saveVoterNotesButton); + writeNotes.text = " "; + writeNotes.style.width = "100%"; + writeNotes.style.height = "50%"; - closeVoterNotesButton.textContent = "Close Voter Notes"; - voterNotes.appendChild(closeVoterNotesButton); + notes.style.position = "center"; + + notes.appendChild(loadNotes); + notes.appendChild(writeNotes); + + voterNotes.appendChild(notes); + + //TAGS ONLY in VOTER NOTES for( let t of voterInfoQuestions ){ - let tag = document.createElement("h4"); + let item = voter.currentID.concat(" ").concat(t); + console.log(item); + + let tag = document.createElement("button"); tag.textContent = t; tag.style.color = "white"; - tag.style.backgroundColor = setTag(v[t]); + tag.style.backgroundColor = setTag(localStorage.getItem(item)); tag.style.padding = "5px"; + tag.style.margin = "3px"; + tag.style.borderRadius = "3px"; tag.style.fontSize = "10px"; + tag.style.zIndex ="2"; + + tag.addEventListener('click', ()=>{ + console.log(voter[t]) + switch(voter[t]){ + case 'true': + localStorage.setItem(item, 'false'); + setTag(localStorage.getItem(item)); + case 'false': + localStorage.setItem(item, 'true'); + setTag(localStorage.getItem(item)); + + case null: + localStorage.setItem(item, 'true'); + setTag(localStorage.getItem(item)); + } + + console.log(setTag(localStorage.getItem(item))); + tag.style.backgroundColor = setTag(localStorage.getItem(item)); + + }); + + tags.appendChild(tag); - voterNotes.appendChild(tag); } + tags.style.display = "flex"; + tags.style.flexDirection = "row"; + + voterNotes.appendChild(tags); + + + //CHECKBOXES ONLY in VOTER NOTES + + for( let q of voterInfoQuestions ){ let questionCheckbox = document.createElement("input"); @@ -154,27 +227,76 @@ function openVoterNotes(id, v){ questionCheckbox.id = q; questionCheckbox.value = q; + if(voter[q] === true){ + questionCheckbox.checked = true; + } + else{ + questionCheckbox.checked = false; + } + checkboxLabel.htmlFor = q; checkboxLabel.appendChild(document.createTextNode(q)); - v[q] = questionCheckbox.checked ? true : false ; - - voterNotes.appendChild(questionCheckbox); - voterNotes.appendChild(checkboxLabel); - voterNotes.appendChild(document.createElement("br")); + questionCheckbox.addEventListener('change', ()=>{ + let item = voter.currentID.concat(" ").concat(q) + + if(questionCheckbox.isChecked){ + localStorage.setItem(item, true); + console.log('false, changing to true') + } + else if(!questionCheckbox.isChecked){ + localStorage.setItem(item, false); + } + else{ + localStorage.setItem(item, true); + } + + }); + + checkboxes.appendChild(questionCheckbox); + checkboxes.appendChild(checkboxLabel); + checkboxes.appendChild(document.createElement("br")); } + checkboxes.style.display = "flex"; + checkboxes.style.alignItems = "flex-start"; + checkboxes.style.margin = "0px"; + + //voterNotes.appendChild(checkboxes); + + //BUTTONS ONLY in VOTER NOTES + + + saveVoterNotesButton.textContent = "Save Voter Notes"; + buttons.appendChild(saveVoterNotesButton); + + closeVoterNotesButton.textContent = "Close Voter Notes"; + buttons.appendChild(closeVoterNotesButton); + + buttons.style.display = "flex"; + buttons.style.flexDirection = "row"; + buttons.style.margin = "5px"; + buttons.style.zIndex = "3"; + + voterNotes.appendChild(buttons); + + // PUT VOTER NOTES IN RESPONSE CONTAINER + responseContainer.appendChild(voterNotes); + + closeVoterNotesButton.addEventListener('click', ()=>{ - voterNotes = blank; - responseContainer = firstStage; + voterNotes.innerHTML = " "; + voterNotes.style.display = "none"; + //responseContainer = firstStage; //openVoterNotesButton.style.display = "flex"; }); saveVoterNotesButton.addEventListener('click', () =>{ - const notes = writeNotes.value; + + const notes = ("::").concat(writeNotes.value); console.log(notes); voter.currentNotes = notes; @@ -193,48 +315,47 @@ function onEachFeature(feature, layer) { //residence.currentResidence = feature.properties.address; //residence.notes = localStorage.getItem(residence.currentResidence); - console.log(localStorage.getItem(address)); + //console.log(localStorage.getItem(voter.currentID)); - voter.currentAddress = feature.properties.address; + + voter.currentAddress = feature.properties.address; // start by moving pointer to selected building //voter.currentID = feature.voters //voter.currentNotes = localStorage.getItem(voter.currentID); - voterNotes.style.display = "none"; + voterNotes.style.display = "none"; // right now sub-menu is inactive //alert(feature.properties.address); - responseContainer.style.display = "flex"; - people.innerHTML = ""; - voterAddress.innerHTML = feature.properties.address; + responseContainer.style.display = "flex"; // address details become live + people.innerHTML = ""; // people in this building will be populated, blank for now + voterAddress.innerHTML = voter.currentAddress; // the HTML element showing the address now has the current objects address - DYNAMIC! - firstStage = responseContainer; + //firstStage = responseContainer; - firstStage.appendChild(voterAddress); - let residents = feature.voters; + responseContainer.appendChild(voterAddress); + let residents = feature.voters; // an array of residents living in this building for( let r = 0; r < residents.length; r++ ){ console.log(residents[r].name); - let person = document.createElement("button"); + let person = document.createElement("button"); // create a button for each resident - will use this to fill the voter object - DYNAMIC! person.textContent = residents[r].name; person.innerHTML = residents[r].name; - person.value = residents[r].name; + person.value = residents[r].id; person.style.display = "flex"; person.addEventListener('click', ()=>{ - openVoterNotes(person.value, residents[r]); + openVoterNotes(residents[r]); }); people.appendChild(person); + people.style.margin = "0px"; } - firstStage.appendChild(people); + responseContainer.appendChild(people); - closeVoterInfoButton.textContent = "Close"; - firstStage.appendChild(closeVoterInfoButton); - - console.log(residents); - responseContainer = firstStage; + closeVoterInfoButton.textContent = "Exit Address"; + responseContainer.appendChild(closeVoterInfoButton); }); } @@ -281,3 +402,5 @@ export { initializeMap, populateVoterMap, }; + + window.voter = voter; \ No newline at end of file From b69a5ea3e4fdeb0a083bccaf917a6efefcd3b21b Mon Sep 17 00:00:00 2001 From: promchat <113404274+promchat@users.noreply.github.com> Date: Thu, 17 Nov 2022 13:33:54 -0500 Subject: [PATCH 43/48] Added changed marker behavior onClick changed the marker to reflect the currently selected address --- site/css/styles.css | 8 ++++---- site/js/map.js | 34 +++++++++++++++++++++++++++++++--- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index 6449161..a192981 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -51,17 +51,17 @@ button { } #response-container{ - background-color: rgb(26, 94, 94); + background-color: #1a5e5e; position: absolute; top: 0%; - left: 75%; - right: 10%; + left: 65%; + right: 20%; margin: 5px; padding: 5px; border-radius: 15px; border: 40px black; height: auto; - width: auto; + width: 300px; flex-wrap: wrap; flex-direction: row-reverse; justify-content: center; diff --git a/site/js/map.js b/site/js/map.js index 19c627a..2314644 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -45,8 +45,10 @@ const voter = { languageAssistance: null, }; + let map; + function initializeMap () { - let map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' + map = L.map('map', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13); // made map global so that other functions can addTo 'map' const mapboxAccount = 'mapbox'; const mapboxStyle = 'light-v10'; const mapboxToken = 'pk.eyJ1IjoibW9yZ2FuZ3IiLCJhIjoiY2w4dzF2bHZsMDJqdDN3czJwOGg0ZXBsbSJ9.tXRhvJAL-t7cJCrCyAEhUw'; @@ -284,8 +286,6 @@ function openVoterNotes(p){ responseContainer.appendChild(voterNotes); - - closeVoterNotesButton.addEventListener('click', ()=>{ voterNotes.innerHTML = " "; voterNotes.style.display = "none"; @@ -307,6 +307,31 @@ function openVoterNotes(p){ } + +function showPoint(point){ + if(!map.chosenLayer){ + map.chosenLayer = L.geoJSON(point, { pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), + style: { + fillColor: "#1a5e5e", + stroke: 0.6, + color : "#c2b397", + fillOpacity: 0.9, + radius: 10, + }}).addTo(map); + } + else{ + map.removeLayer(map.chosenLayer); + map.chosenLayer = L.geoJSON(point, { pointToLayer: (geoJsonPoint, latlng) => L.circleMarker(latlng), + style: { + fillColor: "#1a5e5e", + stroke: 0.6, + color : "#c2b397", + fillOpacity: 0.9, + radius: 10, + }}).addTo(map); + } +} + function onEachFeature(feature, layer) { layer.on('click', function () { @@ -317,6 +342,9 @@ function onEachFeature(feature, layer) { //residence.notes = localStorage.getItem(residence.currentResidence); //console.log(localStorage.getItem(voter.currentID)); + console.log(feature.geometry.coordinates); + + showPoint(feature); voter.currentAddress = feature.properties.address; // start by moving pointer to selected building //voter.currentID = feature.voters From a8a0d8eb2ce991088685eac23cffadb778f57e64 Mon Sep 17 00:00:00 2001 From: Morgangriff12 <112583600+Morgangriff12@users.noreply.github.com> Date: Sun, 27 Nov 2022 10:53:23 -0500 Subject: [PATCH 44/48] Updated the Readme file --- README.md | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a6eae44..d8959c2 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,12 @@ # Voter Canvassing App Team members: -* ... -* ... \ No newline at end of file +* Henry Feinstein +* Morgan Griffiths +* Promit Chatterjee + +Our Approach to Collaboration: +* A week after the project was assigned, we met up in person to decide how we would start to break up the project. At that meeting, we each decided to take an initial chunk of the project to work on for the next week. We followed the same approach for the remainder of the project, meeting up in person each week, and a few time virtually, to discuss our progress, help each other understand the material, and decide on what next steps needed to be taken and who would tackle each task. We tried to make sure that each of us was working on at least one part of the project each week. We also kept in touch via Slack to update each other on our progress between meetings and to ask each other questions about the project as we came across them. + +Stretch goals attempted: +* None \ No newline at end of file From 0ce7b1e0fd8730a272b95f0c84d8e0ce23b7d10e Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Sun, 27 Nov 2022 16:47:38 -0500 Subject: [PATCH 45/48] readme update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index d8959c2..499dbf4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Team members: * Promit Chatterjee Our Approach to Collaboration: -* A week after the project was assigned, we met up in person to decide how we would start to break up the project. At that meeting, we each decided to take an initial chunk of the project to work on for the next week. We followed the same approach for the remainder of the project, meeting up in person each week, and a few time virtually, to discuss our progress, help each other understand the material, and decide on what next steps needed to be taken and who would tackle each task. We tried to make sure that each of us was working on at least one part of the project each week. We also kept in touch via Slack to update each other on our progress between meetings and to ask each other questions about the project as we came across them. +* A week after the project was assigned, we met up in person to decide how we would start to break up the project. At that meeting, we each decided to take an initial chunk of the project to work on for the next week. We followed the same approach for the remainder of the project, meeting up in person each week, and a few time virtually, to discuss our progress, help each other understand the material, and decide on what next steps needed to be taken and who would tackle each task. We tried to make sure that each of us was working on at least one part of the project each week. We also kept in touch via Slack to update each other on our progress between meetings and to ask each other questions about the project as we came across them. We split up the tasks into pretty small chunks, so it is hard to parse apart exactly what we each did. Morgan led the map initialization and creation of input objects, Henry focused primarily on the data parsing and organization, and Promit led the CSS work and local storage behavior. We all contributed to all of those different aspects, however. Stretch goals attempted: * None \ No newline at end of file From cb3054ff2b8bc2b3daaa4e7c3d1f81607ae25163 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 19 Dec 2022 11:36:44 -0500 Subject: [PATCH 46/48] linting fixes --- site/css/styles.css | 184 +++++++++++++++++++++----------------------- site/js/map.js | 34 ++++---- 2 files changed, 102 insertions(+), 116 deletions(-) diff --git a/site/css/styles.css b/site/css/styles.css index a192981..74a91d5 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -1,132 +1,120 @@ -@import "https://fonts.googleapis.com/css2?family=Open+Sans"; +@import "https://fonts.googleapis.com/css2?family=Open+Sans"; html { - font-family: "Open Sans", sans-serif; + font-family: "Open Sans", sans-serif; } -h1{ - background-color: #217e79; - color: whitesmoke; - margin: 0px; - padding: 25px; +h1 { + background-color: #217e79; + color: whitesmoke; + margin: 0; + padding: 25px; } body { - display: flex; - flex-direction: column; - height: 100vh; - margin: 0; - padding: 0; - z-index: 1; + display: flex; + flex-direction: column; + height: 100vh; + margin: 0; + padding: 0; + z-index: 1; } .map { - height: 100%; - z-index: 1; + height: 100%; + z-index: 1; } textarea { - width: 100%; - display: block; - margin-bottom: 1rem; - height: 1rem; - z-index: -1;; + width: 100%; + display: block; + margin-bottom: 1rem; + height: 1rem; + z-index: -1; } button { - display:inline-block; - margin-right:5px; - z-index: -1; + margin-right: 5px; + z-index: -1; + display: flex; + flex-flow: row wrap; + font-size: 10px; + background-color: #217e79; + color: aliceblue; + bottom: 30%; } .voter-list-container { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - height: 10rem; - overflow-y: scroll; - overflow-x: auto; - z-index: 1;; + width: 100%; + display: flex; + flex-flow: row wrap; + height: 10rem; + overflow-y: scroll; + overflow-x: auto; + z-index: 1; } -#response-container{ - background-color: #1a5e5e; - position: absolute; - top: 0%; - left: 65%; - right: 20%; - margin: 5px; - padding: 5px; - border-radius: 15px; - border: 40px black; - height: auto; - width: 300px; - flex-wrap: wrap; - flex-direction: row-reverse; - justify-content: center; - align-items: center; - z-index: 1; - font-size: 10px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - color: azure; - - transform: inherit; - -} - -#voter-notes{ - top: 25%; - display: flex; - height: 300px; - width: 300px; - flex-direction: column; - align-items: center; +#response-container { + background-color: #1a5e5e; + position: absolute; + top: 0%; + left: 65%; + right: 20%; + margin: 5px; + padding: 5px; + border-radius: 15px; + border: 40px black; + height: auto; + width: 300px; + flex-wrap: wrap; + flex-direction: row-reverse; + justify-content: center; + align-items: center; + z-index: 1; + font-size: 10px; + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + color: azure; + transform: inherit; } -button{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - font-size: 10px; - background-color: #217e79; - color: aliceblue; - bottom:30%; +#voter-notes { + top: 25%; + display: flex; + height: 300px; + width: 300px; + flex-direction: column; + align-items: center; } -h3{ - top: 10%; +h3 { + top: 10%; } -.voter-address{ - font-style: italic; - font-weight: bold; +.voter-address { + font-style: italic; + font-weight: bold; } -#voter-list{ - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; +#voter-list { + width: 100%; + display: flex; + flex-flow: row wrap; } -.voter-list-item{ - margin: 10px; - display: flex; - flex-wrap: wrap; - padding: 5px; - height:50px; - width:200px; - background-color: rgb(26, 94, 94); - color: azure; - font-size: 10px; - border-radius: 5px; - +.voter-list-item { + margin: 10px; + display: flex; + flex-wrap: wrap; + padding: 5px; + height: 50px; + width: 200px; + background-color: rgb(26, 94, 94); + color: azure; + font-size: 10px; + border-radius: 5px; } -#blank{ - height:auto; - width:auto; +#blank { + height: auto; + width: auto; } - - diff --git a/site/js/map.js b/site/js/map.js index 2314644..5401363 100644 --- a/site/js/map.js +++ b/site/js/map.js @@ -1,12 +1,12 @@ let responseContainer = document.getElementById("response-container"); responseContainer.style.display = "none"; -let firstStage = responseContainer; +//let firstStage = responseContainer; let voterCard = document.createElement("div"); voterCard.id = "voterCard"; -let address = ""; +//let address = ""; //let ID = ""; let people = document.createElement("ul"); @@ -139,7 +139,7 @@ function openVoterNotes(p){ let item = voter.currentID.concat(" ").concat(n); console.log(item); voter[n] = localStorage.getItem(item); - } + } console.log(voter); @@ -147,14 +147,13 @@ function openVoterNotes(p){ if(localStorage.getItem(voter.currentID) === null){ loadNotes.innerText = "No notes for ID " + voter.currentID + " so far..."; - } else{ loadNotes.innerText = localStorage.getItem(voter.currentID); } - loadNotes.style.backgroundColor = "#217e79" + loadNotes.style.backgroundColor = "#217e79"; loadNotes.style.width = "100%"; loadNotes.style.height = "50%"; loadNotes.border = "10px"; @@ -189,18 +188,19 @@ function openVoterNotes(p){ tag.style.zIndex ="2"; tag.addEventListener('click', ()=>{ - console.log(voter[t]) + console.log(voter[t]); switch(voter[t]){ case 'true': localStorage.setItem(item, 'false'); - setTag(localStorage.getItem(item)); + setTag(localStorage.getItem(item)); + break; case 'false': localStorage.setItem(item, 'true'); - setTag(localStorage.getItem(item)); - + setTag(localStorage.getItem(item)); + break; case null: localStorage.setItem(item, 'true'); - setTag(localStorage.getItem(item)); + setTag(localStorage.getItem(item)); } console.log(setTag(localStorage.getItem(item))); @@ -217,7 +217,6 @@ function openVoterNotes(p){ voterNotes.appendChild(tags); - //CHECKBOXES ONLY in VOTER NOTES @@ -239,11 +238,11 @@ function openVoterNotes(p){ checkboxLabel.htmlFor = q; checkboxLabel.appendChild(document.createTextNode(q)); questionCheckbox.addEventListener('change', ()=>{ - let item = voter.currentID.concat(" ").concat(q) + let item = voter.currentID.concat(" ").concat(q); if(questionCheckbox.isChecked){ localStorage.setItem(item, true); - console.log('false, changing to true') + console.log('false, changing to true'); } else if(!questionCheckbox.isChecked){ localStorage.setItem(item, false); @@ -251,7 +250,6 @@ function openVoterNotes(p){ else{ localStorage.setItem(item, true); } - }); checkboxes.appendChild(questionCheckbox); @@ -295,7 +293,7 @@ function openVoterNotes(p){ }); saveVoterNotesButton.addEventListener('click', () =>{ - + const notes = ("::").concat(writeNotes.value); console.log(notes); voter.currentNotes = notes; @@ -317,7 +315,7 @@ function showPoint(point){ color : "#c2b397", fillOpacity: 0.9, radius: 10, - }}).addTo(map); + } }).addTo(map); } else{ map.removeLayer(map.chosenLayer); @@ -328,7 +326,7 @@ function showPoint(point){ color : "#c2b397", fillOpacity: 0.9, radius: 10, - }}).addTo(map); + } }).addTo(map); } } @@ -345,7 +343,7 @@ function onEachFeature(feature, layer) { console.log(feature.geometry.coordinates); showPoint(feature); - + voter.currentAddress = feature.properties.address; // start by moving pointer to selected building //voter.currentID = feature.voters //voter.currentNotes = localStorage.getItem(voter.currentID); From 117c03bf2a05e8ab0e7de52c46a7912b820af32b Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 19 Dec 2022 11:42:49 -0500 Subject: [PATCH 47/48] rename README for syncing purposes --- README.md => README_update.md | 0 site/css/styles.css | 9 ++++----- 2 files changed, 4 insertions(+), 5 deletions(-) rename README.md => README_update.md (100%) diff --git a/README.md b/README_update.md similarity index 100% rename from README.md rename to README_update.md diff --git a/site/css/styles.css b/site/css/styles.css index 74a91d5..b95cf7c 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -66,13 +66,12 @@ button { border: 40px black; height: auto; width: 300px; - flex-wrap: wrap; - flex-direction: row-reverse; + flex-flow: row-reverse wrap; justify-content: center; align-items: center; z-index: 1; font-size: 10px; - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; color: azure; transform: inherit; } @@ -108,8 +107,8 @@ h3 { padding: 5px; height: 50px; width: 200px; - background-color: rgb(26, 94, 94); - color: azure; + background-color: #1a5e5e; + color: #f0ffff; font-size: 10px; border-radius: 5px; } From 634533c53b8bc87e42ae49306850f28377659c93 Mon Sep 17 00:00:00 2001 From: henryfeinstein <98499896+henryfeinstein@users.noreply.github.com> Date: Mon, 19 Dec 2022 11:43:35 -0500 Subject: [PATCH 48/48] readme fix --- README_update.md => README.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename README_update.md => README.md (100%) diff --git a/README_update.md b/README.md similarity index 100% rename from README_update.md rename to README.md