Add labels in dropdown (#186)

Part of #182 

If there is no `contribution` tag in scorecard, the city is
automatically labelled as an `Official Map`.
Will add alert in a future PR.

New render:

![image](https://github.com/ParkingReformNetwork/parking-lot-map/assets/86996158/f40631cc-25bf-46cb-8ca1-0e117f6f6ed6)


![image](https://github.com/ParkingReformNetwork/parking-lot-map/assets/86996158/8d4e6a5e-8f1b-43f9-9515-8ef234285a00)

---------

Co-authored-by: tunglinn <[email protected]>

src/js/dropdown.ts

@@ -1,20 +1,53 @@
 import Choices from "choices.js";
 import "choices.js/public/assets/styles/choices.css";
 import scoreCardsData from "../../data/score-cards.json";
-import { CityId } from "./types";
+import { CityId, ScoreCardDetails, dropdownChoice } from "./types";
 
 export const DROPDOWN = new Choices("#city-choice", {
   allowHTML: false,
   itemSelectText: "Select",
   searchEnabled: true,
+  shouldSort: false, // since cities are already alphabetical order in scorecard, disabling this option allows us to show PRN maps at the top.
 });
 
-const setUpDropdown = (initialCityId: CityId, fallBackCityId: CityId): void => {
-  const cities = Object.entries(scoreCardsData).map(([id, { name }]) => ({
-    value: id,
-    label: name,
-  }));
-  DROPDOWN.setChoices(cities);
+const setUpDropdown = (initialCityId: CityId, fallBackCityId: CityId) => {
+  const officialCities: dropdownChoice[] = [];
+  const communityCities: dropdownChoice[] = [];
+  Object.entries(scoreCardsData as Record<string, ScoreCardDetails>).forEach(
+    ([id, { name, contribution }]) => {
+      const entry: dropdownChoice = {
+        value: id,
+        label: name,
+        contribution: contribution || "PRN",
+      };
+      if (contribution) {
+        communityCities.push(entry);
+      } else {
+        officialCities.push(entry);
+      }
+    }
+  );
+
+  DROPDOWN.setChoices([
+    {
+      value: "Official Maps",
+      label: "Official Maps",
+      disabled: false,
+      choices: officialCities.filter((city) => city.contribution === "PRN"),
+    },
+  ]);
+
+  if (communityCities.length > 0) {
+    DROPDOWN.setChoices([
+      {
+        value: "Community Maps",
+        label: "Community Maps",
+        disabled: false,
+        choices: communityCities,
+      },
+    ]);
+  }
+
   if (Object.keys(scoreCardsData).includes(initialCityId)) {
     DROPDOWN.setChoiceByValue(initialCityId);
   } else {

src/js/types.ts

@@ -11,7 +11,8 @@ export interface ScoreCardDetails {
   urbanizedAreaPopulation: string;
   parkingScore: string | null;
   reforms: string;
-  url: string | null;
+  url?: string;
+  contribution?: string;
 }
 
 export type ScoreCardsDetails = Record<CityId, ScoreCardDetails>;
@@ -26,3 +27,9 @@ export type ScoreCards = Record<CityId, ScoreCard>;
 export interface ParkingLotModules {
   [key: string]: () => Promise<Feature<Geometry>>;
 }
+
+export interface dropdownChoice {
+  value: string;
+  label: string;
+  contribution: string;
+}

tests/app/communityMaps.test.ts

@@ -0,0 +1,25 @@
+import { expect, test } from "@playwright/test";
+
+test("there are exactly 103 official city maps", async ({ page }) => {
+  await page.goto("/");
+  await page.waitForSelector(".choices");
+  const choices = await page.locator(".choices");
+  await choices.click();
+  await page.waitForSelector(".is-active");
+
+  const toggleValues = await page.$eval(
+    ".choices__list [role='listbox']",
+    (element: HTMLElement) =>
+      Array.from(element.children).map(
+        (child: Element) => (child as HTMLElement).innerText
+      )
+  );
+
+  const communityMapIndex = toggleValues.indexOf("Community Maps");
+  // Consider removing if statement after first community map is implemented
+  if (communityMapIndex > -1) {
+    const officialMapIndex =
+      communityMapIndex - toggleValues.indexOf("Official Maps");
+    expect(officialMapIndex).toEqual(103);
+  }
+});

tests/app/setUpSite.test.ts

@@ -28,6 +28,7 @@ test("every city is in the toggle", async ({ page }) => {
 
   toggleValues.sort();
   expectedCities.sort();
+
   expect(toggleValues).toEqual(expectedCities);
 });