`;
+ interruptLoad = true;
+ }
+ return interruptLoad;
+}
+
+/* Function to check if fetch is successful.
+If so, do fetch; if not, show error on tooltip */
+function checkFetchStatus(resp) {
+ if(resp.ok) {
+ return resp.text();
+ } else {
+ // If the file doesn't exist, then show in tooltip
+ toolTipEl.innerHTML = `
Wrong number
`;
+ return false;
+ }
+}
+
+// Function to add short address to each voter in data
+// Function is called after data is fetched
+function makeShortAddress(data) {
+ for(let voter of data) {
+ voter["short_address"] = `${voter["House Number"]} ${voter["Street Name"]}`;
+ }
+ return(data);
+}
+
+/* Function: what happens after successful fetch:
+1. Make the data using Papaparse, and store it by updating the global variable "data"
+2. When having the data, make a geometry object, which has voter IDs, using makeVoterFeatureCollection(data)
+3. Show voters on the map
+4. Show voters in the list
+*/
+function loadVoterData(text) {
+ if(text == false) {
+ return;
+ }
+
+ // Note skipEmptyLines: true; cleaning up the CSV
+ /* notes with Mjumbe:
+ Papa Parse is reading the last line of each csv as a person */
+ data = {};
+ data = Papa.parse(text, { header: true, skipEmptyLines: true }).data;
+
+ // Create new property: combine house number with street name
+ data = makeShortAddress(data);
+ // Load additional voter data from firebase, and update data
+ // And then display the data on the map and in the list
+ updateAdditionalInfo(inputNumber, data, showVotersInList, showVotersOnMap);
+
+ // // Show voters on the map and list
+ // showVotersInList(data);
+ // showVotersOnMap(data);
+
+
+ // Save current list number to be loaded the next time
+ saveListNum(inputNumber);
+ window.data = data;
+}
+
+/* Function on what happens when clicking on load button
+1. Make a path, and fetch
+2. Check fetch status using checkFetchStatus
+3. If check success, load data using loadVoterData; otherwise, show error tooltip
+*/
+function loadByListNumber(number) {
+ // Update input number, if loading from cloud and it is undefined
+ inputNumber = number;
+ let path = 'https://leejere.github.io/js-voter-canvassing/site/data/voters_lists/' + number + '.csv';
+
+ // Set the input box placeholder
+ listNumberInputEl.placeholder = `${number}`;
+
+ // Fetch the particular CSV file
+ fetch(path)
+ .then(checkFetchStatus)
+ .then(loadVoterData);
+}
+
+/* Function on what happens when clicking on load button
+1. Read the list number
+2. If the number is wrong (wrong digits, empty, etc.), go to errorTooltip
+3. If the number is fine, go to loadByListNumber;
+*/
+function onLoadButtonClick() {
+ // Get input list number
+ inputNumber = listNumberInputEl.value.replace(/\s/g, '');
+
+ if(errorTooltip(inputNumber)) { return }
+ loadByListNumber(inputNumber);
+}
+
+
+// Automatically load list from local storage
+
+// First try to load list number from local storage
+inputNumber = localStorage.getItem("current-list") || "{}";
+
+// When local storage has a valid number, use that
+if(inputNumber != undefined & inputNumber.length === 4) {
+ loadByListNumber(inputNumber);
+} else {
+ // If success, load that list from fire store
+ // If not success, load list 0101
+ loadListNum(loadByListNumber, loadByListNumber);
+}
+
+
+/*
+MAIN
+*/
+
+// Add event listener to the load button
+loadButtonEl.addEventListener("click", onLoadButtonClick);
+
+// Simulate button click when press enter after input
+listNumberInputEl.addEventListener("keypress", (e) => {
+ if(e.key === "Enter") {
+ e.preventDefault();
+ loadButtonEl.click();
+ }
+});
+
+// Refresh tooltip text when mouse moves out
+loadButtonEl.addEventListener("mouseout", ( ) => {
+ toolTipEl.innerHTML = `
+ `);
+ electionListEl.append(electionItemEl);
+ }
+
+}
+
+/* PER CANVASSING RECORD */
+
+// Display options for Voter Language
+function displayLanguageOptions(thisVoter) {
+ let langInput = document.querySelector("#icon-lang-input").getElementsByTagName("input")[0];
+ langInput.placeholder = "Other...";
+ // Get the canvass state
+ let thisStatus = undefined;
+ // Store current voter id in the container DOM object
+ // Do this because we have to store the info associated with the voter
+ document.querySelector("#icon-lang").currentVoterId = thisVoter["ID Number"];
+
+ thisStatus = thisVoter["language"];
+ let optionIdSelector = `#icon-lang-${thisStatus}`;
+ // Highlight option (thisStatus undefined situation dealt with there)
+ highlightOption("#icon-lang", optionIdSelector);
+
+ // If not the three languages, show in the input box
+ if(thisStatus != undefined && !["english", "spanish", "chinese"].includes(thisStatus)) {
+ langInput.placeholder = thisStatus;
+ }
+
+ // Prepare: add event listeners for them to be clicked on
+ prepareOption("#icon-lang");
+ prepareInput("#icon-lang");
+}
+
+// Display options for Voter Plan
+function displayPlanOptions(thisVoter) {
+
+ // Get the canvass state
+ let thisStatus = undefined;
+ // Store current voter id in the container DOM object
+ // Do this because we have to store the info associated with the voter
+ document.querySelector("#icon-plan").currentVoterId = thisVoter["ID Number"];
+
+ thisStatus = thisVoter["plan"];
+ let optionIdSelector = `#icon-plan-${thisStatus}`;
+
+ // Highlight option (thisStatus undefined situation dealt with there)
+ highlightOption("#icon-plan", optionIdSelector);
+
+ // Prepare: add event listeners for them to be clicked on
+ prepareOption("#icon-plan");
+}
+
+// Display options for Voter mailing option
+function displayMailOptions(thisVoter) {
+
+ // Get the canvass state
+ let thisStatus = undefined;
+ // Store current voter id in the container DOM object
+ // Do this because we have to store the info associated with the voter
+ document.querySelector("#icon-mail").currentVoterId = thisVoter["ID Number"];
+
+ thisStatus = thisVoter["mail"];
+ let optionIdSelector = `#icon-mail-${thisStatus}`;
+
+ // Highlight option (thisStatus undefined situation dealt with there)
+ highlightOption("#icon-mail", optionIdSelector);
+
+ // Prepare: add event listeners for them to be clicked on
+ prepareOption("#icon-mail");
+}
+
+// Display options for Voter Language
+function displayWhoOptions(thisVoter) {
+ let whoInput = document.querySelector("#icon-who-input").getElementsByTagName("input")[0];
+ whoInput.placeholder = "Other...";
+
+ // Get the canvass state
+ let thisStatus = undefined;
+ // Store current voter id in the container DOM object
+ // Do this because we have to store the info associated with the voter
+ document.querySelector("#icon-who").currentVoterId = thisVoter["ID Number"];
+
+ thisStatus = thisVoter["who"];
+ let optionIdSelector = `#icon-who-${thisStatus}`;
+ // Highlight option (thisStatus undefined situation dealt with there)
+ highlightOption("#icon-who", optionIdSelector);
+
+ // If not the two parties, show in the input box
+ if(thisStatus != undefined && !["d", "r"].includes(thisStatus)) {
+ whoInput.placeholder = thisStatus;
+ }
+
+ // Prepare: add event listeners for them to be clicked on
+ prepareOption("#icon-who");
+ prepareInput("#icon-who");
+}
+
+// Display extra notes
+function displayExtraNotes(thisVoter) {
+ let extraNotesEl = document.querySelector("#other-notes-input").getElementsByTagName("input")[0];
+ if(thisVoter["notes"]) {
+ extraNotesEl.placeholder = thisVoter["notes"];
+ }
+}
+
+/* UTIL: FIND THE VOTER DATA ENTRY USING VOTER ID */
+
+// Find voter: takes voter ID and outputs comprehensive voter data
+function findThisVoter(thisId) {
+ for(let voter of data) {
+ if(voter["ID Number"] === thisId) {
+ return(voter);
+ }
+ }
+}
+
+function displayInfo(thisId) {
+ // Find this voter's data
+ let thisVoter = findThisVoter(thisId);
+
+ // Display in the basic info panel
+ displayName(thisVoter);
+ displayAddress(thisVoter);
+ displayActiveness(thisVoter);
+ displayParty(thisVoter);
+ displayCanvassStatus(thisVoter);
+ displayMailGeneral(thisVoter);
+ displayPlanGeneral(thisVoter);
+
+ // Voting history part
+ displayVotingHistory(thisVoter);
+
+ // Canvass recording part
+ displayLanguageOptions(thisVoter);
+ displayPlanOptions(thisVoter);
+ displayMailOptions(thisVoter);
+ displayWhoOptions(thisVoter);
+
+ // Show notes if any
+ displayExtraNotes(thisVoter);
+}
+
+export {
+ displayInfo,
+ highlightOption,
+ displayPlanGeneral,
+ displayMailGeneral,
+ findThisVoter,
+};
\ No newline at end of file
diff --git a/site/js/update-info.js b/site/js/update-info.js
new file mode 100644
index 0000000..d4fd0bd
--- /dev/null
+++ b/site/js/update-info.js
@@ -0,0 +1,216 @@
+import { additionalData } from "./list-loader.js";
+import { updateVoters, saveAdditionalInfo } from "./main.js";
+import { data } from "./list-loader.js";
+import { showVotersOnMap } from "./map.js";
+import { highlightVoter } from "./selected-voter.js";
+import { allFilters } from "./list-filters.js";
+import { inputNumber } from "./list-loader.js";
+import { displayPlanGeneral, displayMailGeneral, findThisVoter } from "./show-info.js";
+import { selectedVoter } from "./selected-voter.js";
+
+// Initiate properties on DOM elements to store unsaved information
+// Add names and such
+let saveItemsSelectorsList = ["#icon-canvass", "#icon-lang", "#icon-plan", "#icon-mail", "#icon-who"];
+let recordItemsList = ["canvass-status", "language", "plan", "mail", "who"];
+
+for(let i = 0; i < saveItemsSelectorsList.length; i++) {
+ let selector = saveItemsSelectorsList[i];
+ let name = recordItemsList[i];
+ let itemEl = document.querySelector(selector);
+ itemEl.recordItemName = name;
+ itemEl.currentVoterId = undefined;
+ itemEl.unsavedSelection = undefined;
+ console.log(name);
+}
+
+
+// Function to highlight an option given selectors on click
+function highlightOption(groupIdSelector, optionIdSelector) {
+ // First remove all highlighted classes and reset everything to default gray color
+ let iconGroupEl = document.querySelector(groupIdSelector).querySelectorAll(".icon-set");
+ for(let item of iconGroupEl) {
+ item.classList.remove("highlighted");
+ //item.classList.add("icon-no-color");
+ }
+
+ // DOM object of the icon to be highlighted
+ if(document.querySelector(groupIdSelector).querySelector(optionIdSelector)) {
+ let highlightIconSet = document.querySelector(groupIdSelector).querySelector(optionIdSelector);
+ highlightIconSet.classList.add("highlighted");
+ }
+}
+
+// Prepare the detailed info display for the selected voter
+// 1. highlight options, 2. add event listeners
+// Everytime a click happens, store the clicked item in the container DOM
+// .. until pushing the save button
+function prepareOption(groupIdSelector) {
+
+ // DOM: all the icon sets in a particular group
+ let iconGroupEl = document.querySelector(groupIdSelector).querySelectorAll(".icon-set");
+ // Add event listener
+ for(let item of iconGroupEl) {
+ item.addEventListener("click", ( ) => {
+
+ // First, highlight that option
+ highlightOption(groupIdSelector, `#${item.id}`);
+
+ // If this parent has an input, clear that input box
+ if(document.querySelector(groupIdSelector).querySelector("input")) {
+ document.querySelector(groupIdSelector).querySelector("input").value = "";
+ }
+
+ // Find substring item.id to get the real term
+ let lastDashLocation = item.id.lastIndexOf("-");
+
+ // Then, record the click
+ let storageEl = document.querySelector(groupIdSelector);
+ storageEl.unsavedSelection = item.id.substring(lastDashLocation + 1);
+ });
+ }
+}
+
+// Likewise, also prepare the input box to be listened
+function prepareInput(groupIdSelector) {
+ let inputEl = document.querySelector(groupIdSelector).querySelector("input");
+ inputEl.addEventListener("input", ( ) => {
+
+ // When input, unhighlight all other options
+ let iconGroupEl = document.querySelector(groupIdSelector).querySelectorAll(".icon-set");
+ for(let item of iconGroupEl) {
+ item.classList.remove("highlighted");
+ item.classList.add("icon-no-color");
+ }
+
+ // Record the input
+ let customInput = inputEl.value;
+ let storageEl = document.querySelector(groupIdSelector);
+ storageEl.unsavedSelection = customInput;
+
+ });
+}
+
+// After saving data, update Filtered data
+// At the same time, update display on the map and in the list
+function updateDataOnStatusSave(data, currentVoterId, status) {
+ let filteredData = allFilters();
+ // showVotersInList(filteredData);
+ showVotersOnMap(filteredData);
+
+ // Update the display of this particular voter
+ let voterListItemsEl = document.querySelectorAll(".list-voter");
+ // First find out which icon it should be
+ let canvassStatusIcon = `hourglass_top`;
+ if(status) {
+ if(status === "completed") {
+ canvassStatusIcon = `task_alt`;
+ } else if(status === "awaits") {
+ canvassStatusIcon = `timeline`;
+ }
+ }
+ // Then find the corresponding DOM and update it
+ for(let thisListItem of voterListItemsEl) {
+ if(thisListItem.title == currentVoterId) {
+ thisListItem.getElementsByTagName("div")[1].innerHTML = canvassStatusIcon;
+ }
+ }
+
+ // Then rehighlight this voter
+ highlightVoter(currentVoterId);
+}
+
+// Called on success of updating voter canvass status
+function onUpdateStatusSuccess(canvassStatusSaveButtonEl) {
+ canvassStatusSaveButtonEl.classList.add("canvass-status-save-toast");
+ canvassStatusSaveButtonEl.innerHTML = "Updated status!";
+ setTimeout(( ) => {
+ canvassStatusSaveButtonEl.classList.remove("canvass-status-save-toast");
+ canvassStatusSaveButtonEl.innerHTML = "Update status";
+ }, 1500);
+}
+
+function onFinalSaveSuccess(finalSaveButtonEl) {
+ finalSaveButtonEl.classList.add("final-save-toast");
+ finalSaveButtonEl.innerHTML = "Saved!";
+ setTimeout(( ) => {
+ finalSaveButtonEl.classList.remove("final-save-toast");
+ finalSaveButtonEl.innerHTML = "Save";
+ }, 1500);
+}
+
+// Save current canvass status on click
+const canvassStatusSaveButtonEl = document.querySelector("#canvass-status-save");
+canvassStatusSaveButtonEl.addEventListener("click", ( ) => {
+ let unsavedSelection = document.querySelector("#icon-canvass").unsavedSelection;
+ let currentVoterId = document.querySelector("#icon-canvass").currentVoterId;
+ if(unsavedSelection) {
+ // Initiate, if no additional info has been recorded for this voter
+ if(!additionalData.info[currentVoterId]) {
+ additionalData.info[currentVoterId] = {};
+ }
+ additionalData.info[currentVoterId]["canvass-status"] = unsavedSelection;
+
+ // Then, update Data
+ updateVoters(additionalData.info);
+
+ // Then, update map and list
+ updateDataOnStatusSave(data, currentVoterId, unsavedSelection);
+
+ // Then, send the updated info to the cloud
+ saveAdditionalInfo(inputNumber, additionalData.info);
+
+ // Then, show a toast on the button
+ onUpdateStatusSuccess(canvassStatusSaveButtonEl);
+ }
+});
+
+// Save all on click
+export const finalSaveButtonEl = document.querySelector("#final-save");
+finalSaveButtonEl.addEventListener("click", ( ) => {
+ let currentVoterId;
+
+ // First update the extra notes, if any
+ let extraNotesEl = document.querySelector("#other-notes-input").getElementsByTagName("input")[0];
+ if(extraNotesEl.value) {
+ // Initiate, if no additional info has been recorded for this voter
+ if(!additionalData.info[selectedVoter]) {
+ additionalData.info[selectedVoter] = {};
+ }
+ additionalData.info[selectedVoter]["notes"] = extraNotesEl.value;
+ }
+
+ for(let selector of saveItemsSelectorsList) {
+ let itemEl = document.querySelector(selector);
+ let recordItemName = itemEl.recordItemName;
+ currentVoterId = itemEl.currentVoterId;
+ let unsavedSelection = itemEl.unsavedSelection;
+
+ if(currentVoterId && unsavedSelection) {
+ // Initiate, if no additional info has been recorded for this voter
+ if(!additionalData.info[currentVoterId]) {
+ additionalData.info[currentVoterId] = {};
+ }
+ // Add to temp save data
+ additionalData.info[currentVoterId][recordItemName] = unsavedSelection;
+ }
+ }
+ // Update data
+ updateVoters(additionalData.info);
+
+ // Update some general display
+ let thisVoter = findThisVoter(currentVoterId);
+ // Update display on the top
+ displayPlanGeneral(thisVoter);
+ displayMailGeneral(thisVoter);
+
+ // Then, send the updated info to the cloud
+ saveAdditionalInfo(inputNumber, additionalData.info);
+
+ onFinalSaveSuccess(finalSaveButtonEl);
+});
+
+export {
+ highlightOption,
+ prepareOption,
+ prepareInput,
+};
\ No newline at end of file
diff --git a/site/js/voter-list.js b/site/js/voter-list.js
new file mode 100644
index 0000000..db5a23b
--- /dev/null
+++ b/site/js/voter-list.js
@@ -0,0 +1,185 @@
+/*
+MODULE 4: Voters display (on the map)
+==================================================
+Every time a new list is loaded, or when the filter(s) are changed
+voters need to be updated both on the map and in the list
+This script deals with the list
+1. Create HTML elements of the voters to be added to the voter list
+2. Note that these are group by ADDRESS
+3. Add event listener to prepare for MODULE 4: VOTER SELECTION
+*/
+
+import { htmlToElement } from './htmlelement.js';
+import { onSelectAction } from "./selected-voter.js";
+import { voterListExpandButtonEl } from "./list-expand.js";
+
+// DOM obj of voter list
+let voterList = document.querySelector('#voter-list');
+
+// DOM obj of each voter list item
+// Not defined yet; defined in showVotersInList;
+export let voterListItemsEl;
+
+// Function to turn array of voters into a two-level array grouped by address
+// Use reduce; Initiate address if not already; append voter to address
+function groupByKey(data, key) {
+ let dataGroupedByAddress = data.reduce((grouped, thisItem) => {
+ let thisCategory = thisItem[key];
+ grouped[thisCategory] = grouped[thisCategory] || []; // Initialize if not existing
+ grouped[thisCategory].push(thisItem);
+ return grouped;
+ }, {});
+
+ return dataGroupedByAddress;
+}
+
+// The output voters are grouped by their addresses
+// Function to show address
+function addAddressToList(address) {
+ const addressEl = htmlToElement(`
+
+ ${address}
+
+ `);
+ voterList.append(addressEl);
+}
+
+// Function: prepare the voterlist for the next module (voter selection)
+function listPrepare(voterListItemsEl) {
+ for(const thisListItem of voterListItemsEl) {
+ thisListItem.addEventListener("click", () => {
+ let thisId = thisListItem.title;
+ onSelectAction(thisId);
+ });
+ }
+}
+
+// Function to get the canvassing status (visited, pendign, etc.) for each voter
+function getCanvassStatusIcon(voter) {
+ // Default to hourglass (pending)
+ let canvassStatusIcon = `hourglass_top`;
+ if(voter["canvass-status"]) {
+ if(voter["canvass-status"] === "completed") {
+ canvassStatusIcon = `task_alt`;
+ } else if(voter["canvass-status"] === "awaits") {
+ canvassStatusIcon = `timeline`;
+ }
+ }
+ return canvassStatusIcon;
+}
+
+// Function to get the voter status (active or inactive) for each voter
+function getVoterStatusIcon(voter) {
+ const activeVoterIcon = `ballot`;
+ const inactiveVoterIcon = `close`;
+
+ const voterStatusIcon = voter["Voter Status"] == "A" ? activeVoterIcon : inactiveVoterIcon;
+
+ return voterStatusIcon;
+}
+
+// Function to get the party for each voter
+function getPartyColor(party) {
+ const democratColor = "icon-democrat-color";
+ const republicanColor = "icon-republican-color";
+ const otherPartyColor = "icon-oth-party-color";
+
+ let partyColor;
+ switch(party) {
+ case "D":
+ partyColor = democratColor;
+ break;
+ case "R":
+ partyColor = republicanColor;
+ break;
+ default:
+ partyColor = otherPartyColor;
+ }
+
+ return partyColor;
+}
+
+// Function to show voters by each address
+function addVotersByAddress(votersByThisAddress) {
+ for(const voter of votersByThisAddress) {
+
+ // Get current voter ID
+ // const voterId = voter["ID Number"];
+
+ // Get voter status icon
+ const voterStatusIcon = getVoterStatusIcon(voter);
+
+ // Check canvassing status of this voter and get the icon
+ const canvassStatusIcon = getCanvassStatusIcon(voter);
+
+ // Check party affiliation
+ const party = voter["Party Code"];
+ const partyColor = getPartyColor(voter["Party Code"]);
+
+ const voterEl = htmlToElement(`
+
+
${voter["First Name"]} ${voter["Last Name"]}
+
${canvassStatusIcon}
+
${voterStatusIcon}
+
${party}
+
+ `);
+ voterList.append(voterEl);
+ }
+}
+
+// Function to decide whether to show voter list's expand button
+function showHideExpandButton(innerSelector, outerSelector, buttonEl) {
+ let voterListHeight = document.querySelector(innerSelector).offsetHeight;
+ let voterContainerHeight = document.querySelector(outerSelector).offsetHeight;
+ if(voterListHeight > voterContainerHeight){
+ buttonEl.style.display = "block";
+ } else {
+ buttonEl.style.display = "none";
+ }
+}
+
+function showVotersInList(data) {
+ // First empty out existing voter list
+ voterList.innerHTML = '';
+
+ let dataGroupedByAddress = groupByKey(data, "short_address");
+ let addressKeys = Object.keys(dataGroupedByAddress);
+
+ for(const address of addressKeys) {
+ addAddressToList(address);
+ let votersByThisAddress = dataGroupedByAddress[address];
+ addVotersByAddress(votersByThisAddress);
+ }
+ voterListItemsEl = document.querySelectorAll(".list-voter");
+ listPrepare(voterListItemsEl);
+
+ // Only show expand button when necessary
+ showHideExpandButton("#voter-list", "#voter-list-container", voterListExpandButtonEl);
+
+ // Scroll back to top
+ let scrollContainer = document.querySelector("#voter-list-component").querySelector(".scroll-container");
+ scrollContainer.scrollTop = 0;
+}
+
+export {
+ showVotersInList,
+ voterList,
+ getPartyColor,
+ showHideExpandButton,
+ getVoterStatusIcon,
+};
+
+/*
+Requirement:
+The list's DOM element should be available on the global
+*/
+
+window.voterList = voterList;
+
+/*
+Requirement:
+Wrap each voter's name in an element with the class `voter-name`.
+Wrap addresses in an element with the address `voter-address`.
+Make sure the class names match.
+*/
\ No newline at end of file