Move scorecard code to dedicated file (#208)

No changes made to the actual code.
ParkingReformNetwork · Jul 6, 2024 · 2c55fb8 · 2c55fb8
1 parent b31570f
commit 2c55fb8
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 57 deletions.
diff --git a/src/js/scorecard.ts 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 = `
+      <div class="scorecard-header">
+        <div class="scorecard-title">${entry.name}</div>
+        <a href="#" class="share-icon-container">
+          <i class="share-link-icon fa-solid fa-link fa-xl" title="Copy link"></i>
+          <i class="share-check-icon fa-solid fa-check fa-xl" title="Link Copied!" style="display: none"></i>
+        </a>
+      </div>
+      `;
+
+  const lines = ["<hr>"];
+  lines.push(`<p>Parking: ${entry.percentage} of central city</p>`);
+  if (entry.parkingScore) {
+    lines.push(`<p>Parking score: ${entry.parkingScore}</p>`);
+  }
+  lines.push(`<p>Parking reform: ${entry.reforms}</p>`);
+  lines.push("<br />");
+  lines.push(`<p>City type: ${entry.cityType}</p>`);
+  lines.push(`<p>Population: ${entry.population}</p>`);
+  lines.push(
+    `<p>Urbanized area population: ${entry.urbanizedAreaPopulation}</p>`
+  );
+
+  if ("contribution" in entry) {
+    lines.push("<hr>");
+    lines.push(
+      `<div><span class="community-tag"><i class="fa-solid fa-triangle-exclamation"></i> Community-maintained map. <br>Email ${entry.contribution} for issues.</span></div>`
+    );
+  }
+  if (entry.url) {
+    lines.push(
+      "<hr>",
+      `<div class="popup-button"><a href="${entry.url}">View more about reforms</a></div>`
+    );
+  }
+  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
@@ -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 = `
-    <div class="scorecard-header">
-      <div class="scorecard-title">${entry.name}</div>
-      <a href="#" class="share-icon-container">
-        <i class="share-link-icon fa-solid fa-link fa-xl" title="Copy link"></i>
-        <i class="share-check-icon fa-solid fa-check fa-xl" title="Link Copied!" style="display: none"></i>
-      </a>
-    </div>
-    `;
-
-  const lines = ["<hr>"];
-  lines.push(`<p>Parking: ${entry.percentage} of central city</p>`);
-  if (entry.parkingScore) {
-    lines.push(`<p>Parking score: ${entry.parkingScore}</p>`);
-  }
-  lines.push(`<p>Parking reform: ${entry.reforms}</p>`);
-  lines.push("<br />");
-  lines.push(`<p>City type: ${entry.cityType}</p>`);
-  lines.push(`<p>Population: ${entry.population}</p>`);
-  lines.push(
-    `<p>Urbanized area population: ${entry.urbanizedAreaPopulation}</p>`
-  );
-
-  if ("contribution" in entry) {
-    lines.push("<hr>");
-    lines.push(
-      `<div><span class="community-tag"><i class="fa-solid fa-triangle-exclamation"></i> Community-maintained map. <br>Email ${entry.contribution} for issues.</span></div>`
-    );
-  }
-  if (entry.url) {
-    lines.push(
-      "<hr>",
-      `<div class="popup-button"><a href="${entry.url}">View more about reforms</a></div>`
-    );
-  }
-  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.