From 2c55fb81260fcbafdc1a1b854592cbbbe0fec95b Mon Sep 17 00:00:00 2001
From: Eric Arellano <14852634+Eric-Arellano@users.noreply.github.com>
Date: Fri, 5 Jul 2024 23:26:01 -0400
Subject: [PATCH] Move scorecard code to dedicated file (#208)
No changes made to the actual code.
---
src/js/scorecard.ts | 56 ++++++++++++++++++++++++++++++++++++++++++
src/js/setUpSite.ts | 59 ++-------------------------------------------
2 files changed, 58 insertions(+), 57 deletions(-)
create mode 100644 src/js/scorecard.ts
diff --git a/src/js/scorecard.ts b/src/js/scorecard.ts
new file mode 100644
index 0000000..b95a3b2
--- /dev/null
+++ b/src/js/scorecard.ts
@@ -0,0 +1,56 @@
+import { Popup } from "leaflet";
+import { CityId, ScoreCard, ScoreCardDetails } from "./types";
+import setUpShareUrlClickListener from "./share";
+
+const generateScorecard = (entry: ScoreCardDetails): string => {
+ const header = `
+
+ `;
+
+ const lines = ["
"];
+ lines.push(`Parking: ${entry.percentage} of central city
`);
+ if (entry.parkingScore) {
+ lines.push(`Parking score: ${entry.parkingScore}
`);
+ }
+ lines.push(`Parking reform: ${entry.reforms}
`);
+ lines.push("
");
+ lines.push(`City type: ${entry.cityType}
`);
+ lines.push(`Population: ${entry.population}
`);
+ lines.push(
+ `Urbanized area population: ${entry.urbanizedAreaPopulation}
`
+ );
+
+ if ("contribution" in entry) {
+ lines.push("
");
+ lines.push(
+ ``
+ );
+ }
+ if (entry.url) {
+ lines.push(
+ "
",
+ ``
+ );
+ }
+ return header + lines.join("\n");
+};
+
+const setScorecard = (cityId: CityId, cityProperties: ScoreCard): void => {
+ const { layer, details } = cityProperties;
+ const scorecard = generateScorecard(details);
+ setUpShareUrlClickListener(cityId);
+ const popup = new Popup({
+ pane: "fixed",
+ className: "popup-fixed",
+ autoPan: false,
+ }).setContent(scorecard);
+ layer.bindPopup(popup).openPopup();
+};
+
+export default setScorecard;
diff --git a/src/js/setUpSite.ts b/src/js/setUpSite.ts
index 2ffdfdf..a30d310 100644
--- a/src/js/setUpSite.ts
+++ b/src/js/setUpSite.ts
@@ -3,18 +3,17 @@ import {
Control,
ImageOverlay,
Map,
- Popup,
TileLayer,
geoJSON,
GeoJSON,
} from "leaflet";
import { Feature, GeoJsonProperties, Geometry } from "geojson";
import "leaflet/dist/leaflet.css";
-import { CityId, ScoreCard, ScoreCards, ScoreCardDetails } from "./types";
+import { CityId, ScoreCard, ScoreCards } from "./types";
import { extractCityIdFromUrl } from "./cityId";
import setUpIcons from "./fontAwesome";
import setUpAbout from "./about";
-import setUpShareUrlClickListener from "./share";
+import setScorecard from "./scorecard";
import setUpDropdown, { DROPDOWN } from "./dropdown";
import cityBoundaries from "~/data/city-boundaries.geojson";
import scoreCardsDetails from "~/data/score-cards.json";
@@ -83,48 +82,6 @@ const createMap = (): Map => {
return map;
};
-/**
- * Generate the HTML for the score card.
- */
-const generateScorecard = (entry: ScoreCardDetails): string => {
- const header = `
-
- `;
-
- const lines = ["
"];
- lines.push(`Parking: ${entry.percentage} of central city
`);
- if (entry.parkingScore) {
- lines.push(`Parking score: ${entry.parkingScore}
`);
- }
- lines.push(`Parking reform: ${entry.reforms}
`);
- lines.push("
");
- lines.push(`City type: ${entry.cityType}
`);
- lines.push(`Population: ${entry.population}
`);
- lines.push(
- `Urbanized area population: ${entry.urbanizedAreaPopulation}
`
- );
-
- if ("contribution" in entry) {
- lines.push("
");
- lines.push(
- ``
- );
- }
- if (entry.url) {
- lines.push(
- "
",
- ``
- );
- }
- return header + lines.join("\n");
-};
-
/**
* Load city parking lots if not already loaded.
*/
@@ -151,18 +108,6 @@ const snapToCity = (map: Map, layer: ImageOverlay): void => {
map.fitBounds(layer.getBounds());
};
-const setScorecard = (cityId: CityId, cityProperties: ScoreCard): void => {
- const { layer, details } = cityProperties;
- const scorecard = generateScorecard(details);
- setUpShareUrlClickListener(cityId);
- const popup = new Popup({
- pane: "fixed",
- className: "popup-fixed",
- autoPan: false,
- }).setContent(scorecard);
- layer.bindPopup(popup).openPopup();
-};
-
/**
* Pulls up scorecard for the city closest to the center of view.
* Also, loads parking lot data of any city in view.