musa-611-fall-2022 · henryfeinstein · Oct 26, 2022 · Oct 26, 2022 · Oct 28, 2022 · Nov 1, 2022
diff --git a/README.md b/README.md
@@ -1,5 +1,12 @@
 # Voter Canvassing App
 
 Team members:
-* ...
-* ...
+* 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. 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 
diff --git a/site/css/styles.css b/site/css/styles.css
@@ -0,0 +1,119 @@
+@import "https://fonts.googleapis.com/css2?family=Open+Sans";
+
+html {
+  font-family: "Open Sans", sans-serif;
+}
+
+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;
+}
+
+.map {
+  height: 100%;
+  z-index: 1;
+}
+
+textarea {
+  width: 100%;
+  display: block;
+  margin-bottom: 1rem;
+  height: 1rem;
+  z-index: -1;
+}
+
+button {
+  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-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-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;
+  color: azure;
+  transform: inherit;
+}
+
+#voter-notes {
+  top: 25%;
+  display: flex;
+  height: 300px;
+  width: 300px;
+  flex-direction: column;
+  align-items: center;
+}
+
+h3 {
+  top: 10%;
+}
+
+.voter-address {
+  font-style: italic;
+  font-weight: bold;
+}
+
+#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: #1a5e5e;
+  color: #f0ffff;
+  font-size: 10px;
+  border-radius: 5px;
+}
+
+#blank {
+  height: auto;
+  width: auto;
+}
diff --git a/site/index.html b/site/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <title>Voter Canvassing App</title>
+
+        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="crossorigin=""/>
+
+        <link rel="stylesheet" href="css/styles.css">
+    </head>
+
+    <body>
+        <h1>Voter Canvassing App</h1>
+
+        <div id="map" class="map"></div>
+
+        <div id="voter-list-container" class="voter-list-container">
+            <ul id="voter-list"></ul>
+        </div>
+
+        <div id="load-voter-list" class="load-voter-list">
+            <textarea id="input" class="input" placeholder="Enter Voter List Number..."></textarea>
+            <button id="load-voter-list-button" class="button"> Load Voter List </button>
+            <button id="clear-text-button" class="button"> Clear Input Text</button>
+            <button id="clear-map-button" class="button"> Clear Map</button>
+        </div>
+
+        <div id = "response-container"></div>
+
+        <div id = "vote-card" class = "select">
+            <h3 id = "voteAddress" class = "select"></h1>
+                <h4 id = "voteName" class = "select"></h4>
+                <h4 id = "voteParty" class = "select"></h4>
+        </div>
+
+        <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="crossorigin=""></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.2.0/papaparse.js"></script>
+
+        <script type="module" src="js/main.js"></script>
+    </body>
+</html>
diff --git a/site/js/dataPull.js b/site/js/dataPull.js
@@ -0,0 +1,132 @@
+import { populateVoterMap } from './map.js';
+import { populateVoterMenu } from './list.js';
+
+let voterList = [];
+
+function makeCoordinates(coords){
+
+    //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 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'],
+            gender : v['Gender'],
+            address : v['TIGER/Line Matched Address'],
+            city : v['City'],
+            county : v['County'],
+            state : v['State'],
+            zipCode : v['Zip'],
+            id: v['ID Number'],
+            stillLivesThere: "",
+            votingPlan: "",
+            languageAssistance: "",
+        };
+        return voterElement;
+    } catch(e) {
+        voterElement = null;
+        return voterElement;
+    }
+}
+
+function makeVoterFeature(data){
+    voterList = [];
+    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);
+            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;
+}
+
+function populateVoterList(listNum, map, voterListObj) {
+    fetch('data/voters_lists/' + listNum + '.csv')
+    .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 // done.
+        const data = Papa.parse(text, { header: true, skipEmptyLines: true });
+        let voterList = makeVoterFeature(data['data']);
+        populateVoterMap(voterList, map);
+        populateVoterMenu(voterList, voterListObj);
+    });
+}
+
+export {
+    populateVoterList,
+    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
+// "015653961-51"
diff --git a/site/js/list.js b/site/js/list.js
@@ -0,0 +1,36 @@
+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 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 + `<span class="voter-name">${voter['firstName']} ${voter['lastName']}</span>`;
+        }
+
+        const html = `
+        <span class="voter-list-item">
+            <span class="voter-address">${address.properties['address']}</span>
+            ${voterHTML}
+        </span>
+        `;
+        const li = htmlToElement(html);
+        voterListObj.append(li);
+    }
+}
+
+export {
+    populateVoterMenu,
+};