submission by Yifei Sun

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 8084
+}

README.md

@@ -0,0 +1 @@
+

list.js

@@ -0,0 +1,44 @@
+import{htmlToElement} from './template-tools.js';
+
+function ShowVotersList(votersToShow,onFailure) {
+
+    fetch(`./data/voters_lists/${votersToShow}.csv`)
+    .then(response => {
+        if (response.status === 200) {
+        const data = response.text();
+        return data;
+        } else {
+        alert('Oh no, I failed to download the data.');
+        if (onFailure) { onFailure() }
+        }
+    })
+    .then(v => Papa.parse(v, { delimiter:"," }))
+    .catch(err => console.log(err))
+    .then(result => {
+        let v = result.data.slice(1, result.data.length-1);
+        return v;
+
+    })
+
+    //now we have many voters of certain list.no in a json format
+
+    .then(result =>{
+        let D=result.map(showlist)
+    return D;}
+        )
+}
+
+        //display voter's name and ID 
+function showlist(votersToShow) {
+
+        const html = `
+        <li class="voter-list-item">${votersToShow['name']} (id: ${votersToShow['ID Number']})</li>
+        `;
+
+
+}
+
+
+export{
+    ShowVotersList,
+};

main.js

@@ -0,0 +1,61 @@
+/*
+ * @Author: miaomiao612 [email protected]
+ * @Date: 2022-11-10 05:49:08
+ * @LastEditors: miaomiao612 [email protected]
+ * @LastEditTime: 2022-11-16 02:55:08
+ * @FilePath: \voter-canvassing\site\js\main.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+
+// voter canvassing App
+// ============================
+
+// The _main.js_ module defines the primary functionality of the app, and serves
+// as the cross-component coordinator. Additional functionality is found in
+// individual component modules:
+// * [map.js]: for behavior related to the map
+
+import { initMap, Search, updateUserPositionOn }  from './map.js';
+import { ShowVotersList } from './list.js';
+
+
+
+let voterMap=initMap();
+let votersToShow = document.querySelector('#listNo');
+let search = document.querySelector('#search1');
+let List = document.querySelector("#voter-list");
+
+
+Search(voterMap, search, votersToShow);
+
+
+
+// **Geolocation** -- `onUserPositionSuccess` will be called by the geolocation
+// API if and when the user's position is successfully found.
+function onUserPositionSuccess(pos) {
+    updateUserPositionOn(voterMap, pos);
+  }
+
+// **Geolocation** -- `onUserPositionSuccess` will be called by the geolocation
+// API if and when there is an error in finding the user's position.
+  function onUserPositionFailure(err) {
+    console.log(err);
+  }
+
+
+//setupGeolocationEvent();
+function setupGeolocationEvent() {
+    navigator.geolocation.getCurrentPosition(
+      onUserPositionSuccess,
+      onUserPositionFailure,
+    );
+  }
+//setupGeolocationEvent();
+ShowVotersList(votersToShow);
+
+
+
+
+window.voterMap=voterMap;
+window.votersToShow=votersToShow;
+window.search=search;

managedata.js

@@ -0,0 +1,30 @@
+import {  showVotersOnMap }  from './map.js';
+//convert csv to json and display on map
+function csvtojson ( map, votersToShow, onFailure){
+    fetch(`./data/voters_lists/${votersToShow}.csv`)
+
+    .then(response => {
+        if (response.status === 200) {
+        const data = response.text();
+        return data;
+        } else {
+        alert('Oh no, I failed to download the data.');
+        if (onFailure) { onFailure() }
+        }
+    })
+    .then(v => Papa.parse(v, { delimiter:"," }))
+    .catch(err => console.log(err))
+    .then(result => {
+        let v = result.data.slice(1, result.data.length-1);
+        return v;
+    })
+    //now we get json version data of a certain listNO.
+
+    .then(result => showVotersOnMap(result,map))
+
+
+    }
+
+export{
+    csvtojson,
+};

map.js

@@ -0,0 +1,121 @@
+/*
+ * @Author: miaomiao612 [email protected]
+ * @Date: 2022-11-11 03:00:55
+ * @LastEditors: miaomiao612 [email protected]
+ * @LastEditTime: 2022-11-16 06:49:21
+ * @FilePath: \voter-canvassing\site\js\map.js
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import{ csvtojson } from './managedata.js';
+import{ ShowVotersList } from './list.js';
+
+function onvoterClicked(evt) {
+    console.log(evt);
+    const voter = evt.layer.feature;
+
+    const voterSelectedEvent = new CustomEvent('voter-selected', { detail: { voter } });
+    window.dispatchEvent(voterSelectedEvent);
+}
+
+function initMap() {
+    const map = L.map('voterMap', { maxZoom: 22, preferCanvas: true }).setView([39.95, -75.16], 13);
+
+    const mapboxAccount = 'mapbox';
+    const mapboxStyle = 'light-v10';
+    const mapboxToken = 'pk.eyJ1IjoibWp1bWJlLXRlc3QiLCJhIjoiY2w3ZTh1NTIxMTgxNTQwcGhmODU2NW5kaSJ9.pBPd19nWO-Gt-vTf1pOHBA';
+    L.tileLayer(`https://api.mapbox.com/styles/v1/${mapboxAccount}/${mapboxStyle}/tiles/256/{z}/{x}/{y}@2x?access_token=${mapboxToken}`, {
+        maxZoom: 19,
+        attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
+    }).addTo(map);
+    map.treeLayer = L.geoJSON(null, {
+        pointToLayer: (feature, latlng) => L.circleMarker(latlng),
+        style: {
+        fillColor: '#83bf15',
+        fillOpacity: 0.3,
+        stroke: false,
+        },
+    }).addTo(map);
+
+    map.treeLayer.addEventListener('click', onvoterClicked);
+
+    map.positionLayer = L.geoJSON(null).addTo(map);
+
+    return map;
+}
+
+//convert a json to a geojson-like feature
+function makevoterFeature(voter)
+{
+    return {
+        "type": "Feature",
+        "id": voter['ID Number'],
+        "properties": {
+            "Last Name":voter['Last Name'],
+            "First Name": voter['First Name'],
+            "Registration Date": voter['Registration Date'],
+            "Voter Status": voter['Voter Status'],
+            "Party Code": voter['Party Code'],
+
+        },
+        "geometry":
+        {   "type": "Point",
+            "coordinates":[voter['28'].substr(0, 18), voter['28'].substr(19, voter.length)],
+
+        },
+        };
+}
+
+//Use the function to display the voters' location on the map.
+function showVotersOnMap(votersToShow_json, voterMap) {
+    if (voterMap.voterLayer !== undefined){
+        voterMap.removeLayer(voterMap.voterLayer);
+    }
+
+    const voterFeatureCollection = {
+        "type": "FeatureCollection",
+        "features": votersToShow_json.map(makevoterFeature),//excuate one by one, convert json like data to geojson like feature
+
+    };
+
+
+    voterMap.voterLayer = L.geoJSON(voterFeatureCollection, {
+        pointToLayer: (feature, latlng) => L.circleMarker(latlng),
+        style:  {
+            fillColor: '#53C131',
+            fillOpacity: 0.5,
+            radius:6,
+            stroke: true,
+            weight:0.5,
+            color:'#000000',
+        },
+        }).addTo(voterMap);
+    }
+
+
+//use this function to search the voters by listNo
+function Search (map, search, votersToShow) {
+    search.addEventListener('click', () => {
+        let votersToShow1 = votersToShow.value;
+        csvtojson(map, votersToShow1);
+        ShowVotersList(votersToShow1);
+
+    });
+
+}
+
+function updateUserPositionOn(map, pos) {
+    map.positionLayer.addData({
+      'type': 'Point',
+      'coordinates': [pos.coords.longitude, pos.coords.latitude],
+    });
+    map.setView([pos.coords.latitude, pos.coords.longitude], 18);
+  }
+
+
+export{
+        initMap,
+        showVotersOnMap,
+        Search,
+        updateUserPositionOn,
+
+};

package.json

@@ -21,11 +21,15 @@
   },
   "homepage": "https://github.com/musa-611-fall-2022/school-explorer#readme",
   "devDependencies": {
+    "babel-plugin-component": "^1.1.1",
     "eslint": "^8.22.0",
     "http-server": "^14.1.1",
     "jest": "^29.0.1",
     "jest-puppeteer": "^6.1.1",
     "stylelint": "^14.11.0",
     "stylelint-config-standard": "^28.0.0"
+  },
+  "dependencies": {
+    "papaparse": "^5.3.2"
   }
 }