Sim + Stuti New Pull Req

REQUIREMENTS.md

@@ -15,27 +15,27 @@ The items listed under **Your Repository** and **Core Interface Elements** are a
 
 ### Layout
 
-* [ ] Unless otherwise specified, all features should be useable on both small (mobile) and large (laptop/desktop) screens. **Your HTML document should have appropriate `meta` tag(s) to make this possible.**
+* [x] Unless otherwise specified, all features should be useable on both small (mobile) and large (laptop/desktop) screens. **Your HTML document should have appropriate `meta` tag(s) to make this possible.**
 
 ### Loading voter files...
 
-* [ ] There should be an `input` element on the page where you can enter a voter file number. **Save the `input` DOM element in a variable named `voterFileInput` attached to the global `window` object.** In other words:
+* [x] There should be an `input` element on the page where you can enter a voter file number. **Save the `input` DOM element in a variable named `voterFileInput` attached to the global `window` object.** In other words:
 
   ```js
   window.voterFileInput = ...;
   ```
 
-* [ ] There should be a `button` that will load the voter file number given in the `voterFileInput` when clicked. **Save the `button` DOM element in a variable named `voterFileLoadButton` attached to the global `window` object.**
+* [x] There should be a `button` that will load the voter file number given in the `voterFileInput` when clicked. **Save the `button` DOM element in a variable named `voterFileLoadButton` attached to the global `window` object.**
 
 ### Listing and mapping voters...
 
-* [ ] Your page should have an element that shows the voters (and their addresses) from a file. Note that the element _does not_ need to be a `ul`, `ol`, or any other HTML list element. Even though the element itself may not use a list tag like `ul` or `ol`, it will still function as a list and I'll still refer to it as one. **The list's DOM element should be available on the global `window` object as a variable named `voterList`.**
+* [x] Your page should have an element that shows the voters (and their addresses) from a file. Note that the element _does not_ need to be a `ul`, `ol`, or any other HTML list element. Even though the element itself may not use a list tag like `ul` or `ol`, it will still function as a list and I'll still refer to it as one. **The list's DOM element should be available on the global `window` object as a variable named `voterList`.**
 
-* [ ] Your page should have a Leaflet map to show voter locations. **The Leaflet map object should be available on the global `window` object as a variable named `voterMap`.**
+* [x] Your page should have a Leaflet map to show voter locations. **The Leaflet map object should be available on the global `window` object as a variable named `voterMap`.**
 
 * When you enter a file number, the voter information in that CSV file should be loaded onto the `voterMap` and into the `voterList`.
-  * [ ] **Wrap each voter's name in an element (for example a `span`) with the class `voter-name`. Wrap addresses in an element with the class `voter-address`** You may choose to list each voter individually or grouped by address, which I would recommend. Either way, each voter's basic information (at least their name and street address) should be shown in the `voterList`.
-  * [ ] **Represent the voters in the file with map markers.** You may choose to have one map marker to represent each voter, one marker to represent each address, or one marker to represent each _building_ (for example, two apartments that share the same street address are in the same building). I would generally recommend showing a marker for each building, as otherwise markers for different apartments or voters in the same building will be overlapping.
+  * [x] **Wrap each voter's name in an element (for example a `span`) with the class `voter-name`. Wrap addresses in an element with the class `voter-address`** You may choose to list each voter individually or grouped by address, which I would recommend. Either way, each voter's basic information (at least their name and street address) should be shown in the `voterList`.
+  * [x] **Represent the voters in the file with map markers.** You may choose to have one map marker to represent each voter, one marker to represent each address, or one marker to represent each _building_ (for example, two apartments that share the same street address are in the same building). I would generally recommend showing a marker for each building, as otherwise markers for different apartments or voters in the same building will be overlapping.
 
 * [ ] When you click on a map marker, the marker should be highlighted in some way to show that it is selected. **Change the marker styles of a selected marker if it is a vector marker (e.g. `L.circleMarker`), or change the icon if it is a normal image marker (e.g. `L.marker`).**
 
@@ -45,7 +45,7 @@ The items listed under **Your Repository** and **Core Interface Elements** are a
 
 > _Note that if you decide to implement a workflow that doesn't precisely fit into the structure below, that's ok! Just talk with me about what the workflow is, because we may need to modify the project tests._
 
-* [ ] When you click on a voter (or an address) in the `voterList`, a panel should be shown that contains details about the voter (or about each voter at the address). This panel could be represented in HTML with a `div`, `form`, `section`, or any of a number of other elements. **Give the voter information panel(s) a class of `voter-details`.**
+* [x] When you click on a voter (or an address) in the `voterList`, a panel should be shown that contains details about the voter (or about each voter at the address). This panel could be represented in HTML with a `div`, `form`, `section`, or any of a number of other elements. **Give the voter information panel(s) a class of `voter-details`.**
 
 * [ ] There should be _at least_ three separate input elements available for collecting facts about each voter (refer to the [product requirements document](PRD.md) that we created in class to remind yourself what kind of information should be collected). **Include fields for collecting voter information on each `voter-details` panel.**
 

package.json

@@ -27,5 +27,8 @@
     "jest-puppeteer": "^6.1.1",
     "stylelint": "^14.11.0",
     "stylelint-config-standard": "^28.0.0"
+  },
+  "dependencies": {
+    "papaparse": "^5.3.2"
   }
 }

site/css/styles.css

@@ -0,0 +1,132 @@
+@import "https://fonts.googleapis.com/css2?family=Droid+Sans";
+
+html {
+  font-family: "Droid Sans", sans-serif;
+}
+
+h1 {
+  background-color: #364477;
+  color: whitesmoke;
+  margin: 0px;
+  padding: 12px;
+  text-align: center;
+}
+
+h2 {
+  background-color: #364477;
+  color: whitesmoke;
+  margin: 0px;
+  padding: 5px;
+  text-align: center;
+  font-size: 15px;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  z-index: 1;
+}
+
+.map {
+  height: 100%;
+  z-index: 1;
+}
+
+textarea {
+  text-align: center;
+  height: 20%;
+
+  display: block;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  margin-right: 10rem;
+  height: 2rem;
+  z-index: -1;
+}
+
+.voter-list-container {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 10rem;
+  overflow-y: scroll;
+  overflow-x: auto;
+  z-index: 1;
+}
+
+#response-container {
+  background-color: #364477;
+  position: absolute;
+  top: 0%;
+  left: 65%;
+  right: 20%;
+  margin: 5px;
+  padding: 5px;
+  border-radius: 15px;
+  border: 40px #364477;
+  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 {
+  display: flex;
+  height: 300px;
+  width: 300px;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 0.25rem;
+}
+
+button {
+  align-self: center;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  margin-right: 10rem;
+  text-align: left;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-size: 15px;
+  background-color: #364477;
+  color: white;
+}
+
+h3 {
+  top: 10%;
+}
+
+.voter-address {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 5px;
+}
+
+#voter-list {
+  background-color: #364477;
+  color: #ffffff;
+  text-align: center;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+#blank {
+  height: auto;
+  width: auto;
+}

site/index.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>Voter Canvassing</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 class="container"></div>
+
+    <div id="map" class="map"></div>
+
+    <div id="voter-list-container" class="voter-list-container">
+        <li id="voter-list"></li>
+    </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 Voters (Click twice for list)</button>
+        <button id="clear-text-button" class="button"> Clear Input Text</button>
+        <button id="clear-map-button" class="button"> Clear Map & List</button>
+    </div>
+
+    <div id="response" class="response"></div>
+
+
+    <div id="vote-card" class="votercard">
+        <h2 id="Name"></h2>
+        <h2 id="Address"></h2>
+        <h2 id="Voting-Party"></h2>
+        <div id="voter-save-el" class="voter-save-el">
+            <textarea id="people-notes" class="people-notes" placeholder="Notes..."></textarea>
+            <button id="save-notes" class="save-notes">Save</button>
+        </div>
+    </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>

site/js/inventory.js

@@ -0,0 +1,22 @@
+function saveNote(voterID, content, app){
+    app.notes[voterID] = content;
+
+    localStorage.setItem('notes', JSON.stringify(app.notes));
+}
+
+function loadNotes(onSuccess, onFailure){
+    try{
+        const notes = JSON.parse(localStorage.getItem('notes'));
+        onSuccess(notes);
+    } catch {
+        alert('Oh no, We failed');
+        if (onFailure) {onFailure()}
+    }
+
+
+}
+
+export{
+    saveNote,
+    loadNotes,
+}