feat: lab edition of measures form

Author: rebecamurillo

src/components/react/LivingLabMeasures.tsx

@@ -0,0 +1,36 @@
+import type { IMeasure } from "../../types";
+import { LivingLabMeasureForm } from "./form/LivingLabMeasureForm";
+
+type LivingLabMeasuresProps = {
+  livingLabId: number;
+  title: string;
+  measures?: IMeasure[];
+  className?: string;
+};
+
+export function LivingLabMeasures({
+  livingLabId,
+  measures = [],
+  title = "Measures",
+  className = "",
+}: LivingLabMeasuresProps) {
+  return (
+    <div
+      className={`flex flex-col gap-4 items-start my-4 mx-auto ${className}`}
+    >
+      <div className="flex-1 grid grid-cols-1 gap-4">
+        <h4 className="text-center">{title}</h4>
+        <div className="grid grid-cols-2 lg:grid-cols-2 mx-1 lg:mx-4 gap-4">
+          {measures.map((m) => (
+            <LivingLabMeasureForm
+              livingLabId={livingLabId}
+              key={m.name}
+              measure={m}
+              disabled={true}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/react/MobilityMeasures.tsx

@@ -1,153 +1,20 @@
 import { getUrl } from "../../lib/helpers";
+import type { IMeasure } from "../../types";
 import { InfoCard } from "./ui/InfoCard";
 
-type Measure = {
-  title: string;
-  description?: string;
-  imageUrl?: string;
-  href?: string;
-  className?: string;
-};
-
 type MobilityMeasuresProps = {
-  pushMeasures?: Measure[];
-  pullMeasures?: Measure[];
+  pushMeasures?: IMeasure[];
+  pullMeasures?: IMeasure[];
   className?: string;
   hideDescription?: boolean;
   cols?: 2 | 4;
 };
 
-const defaultPush: Measure[] = [
-  {
-    title: "Congestion Charges",
-    description:
-      "Fees imposed on vehicles entering designated city areas to reduce traffic congestion.",
-    imageUrl: "/icons/ticket.svg",
-  },
-  {
-    title: "Parking Charges",
-    description:
-      "Increased parking fees to discourage long-term car use and promote modal shift.",
-    imageUrl: "/icons/parking_sign.svg",
-  },
-  {
-    title: "Restricted Parking",
-    description:
-      "Reductions in available public parking to limit car access, especially in central zones.",
-    imageUrl: "/icons/no_cars.svg",
-  },
-  {
-    title: "Limited Traffic Zone / Pedestrianisation",
-    description:
-      "Car-free or low-emission zones that prioritize pedestrians, cyclists, and shared mobility.",
-    imageUrl: "/icons/pedestrian.svg",
-  },
-  {
-    title: "Parking Supply Management",
-    description:
-      "Policies that reduce or restructure parking supply to manage demand and encourage alternatives.",
-    imageUrl: "/icons/parking_sign.svg",
-  },
-  {
-    title: "Speed Limits",
-    description:
-      "Lowering vehicle speed limits to improve safety and promote non-motorized travel.",
-    imageUrl: "/icons/30sign.svg",
-  },
-];
-
-const defaultPull: Measure[] = [
-  {
-    title: "Mobility Hubs",
-    description:
-      "Centralized locations where multiple transport modes (e.g., bikes, buses, taxis) are integrated.",
-    imageUrl: "/icons/cityz_zones.svg",
-  },
-  {
-    title: "Scheduling Integration in MaaS",
-    description:
-      "Coordinated schedules across transport services to streamline connections.",
-    imageUrl: "/icons/time_table.svg",
-  },
-  {
-    title: "Ticketing Integration in MaaS",
-    description:
-      "Unified or digital ticketing across services to simplify travel.",
-    imageUrl: "/icons/mobile.svg",
-  },
-  {
-    title: "Improved NSM Infrastructure",
-    description:
-      "New infrastructure like bike lanes, “park & ride” stations to support non-car travel.",
-    imageUrl: "/icons/bike_lane.svg",
-  },
-  {
-    title: "On-Demand Vehicle Sharing",
-    description:
-      "Access to shared vehicles (cars, bikes, e-scooters) on demand via apps or stations.",
-    imageUrl: "/icons/mobile.svg",
-  },
-  {
-    title: "Nudging / Gamification",
-    description:
-      "Use of rewards or games to encourage use of shared or sustainable transport.",
-    imageUrl: "/icons/kid1.svg",
-  },
-  {
-    title: "Dynamic Pricing of NSM",
-    description:
-      "Flexible pricing (e.g., cheaper off-peak rides) to balance demand and promote use.",
-    imageUrl: "/icons/ticket.svg",
-  },
-  {
-    title: "Improved Information Availability",
-    description:
-      "Real-time data on vehicle availability and travel options via digital platforms.",
-    imageUrl: "/icons/mobile.svg",
-  },
-  {
-    title: "New NSM Services Introduced",
-    description:
-      "Launch of bike-sharing, scooter-sharing, or other new transport options.",
-    imageUrl: "/icons/e-scooter.svg",
-  },
-  {
-    title: "New PT Infrastructure / Lines",
-    description:
-      "Deployment of new public transport lines like electric buses or tram extensions.",
-    imageUrl: "/icons/metro_tunnel.svg",
-  },
-  {
-    title: "Streets Retrofitting / Priority Lanes",
-    description:
-      "Street redesign for better walking/cycling and priority lanes for buses or shared modes.",
-    imageUrl: "/icons/cityz_zones.svg",
-  },
-  {
-    title: "Dedicated Parking for Carsharing / Micromobility",
-    description:
-      "Reserved spaces to support the use of shared cars or micromobility vehicles.",
-    imageUrl: "/icons/bycicle_parking.svg",
-  },
-  {
-    title: "Widening PT Geographical Area",
-    description:
-      "Extending public transport coverage to reach underserved zones.",
-    imageUrl: "/icons/metro_map.svg",
-  },
-  {
-    title: "Central PT Planning Program",
-    description:
-      "Comprehensive public transport network planning to enhance coordination and efficiency.",
-    imageUrl: "/icons/cityz_zones.svg",
-  },
-];
-
 type MeasuresSectionProps = {
   heading: string;
   smallText: string;
   paragraph: string;
-  measures: Measure[];
+  measures: IMeasure[];
   hideDescription?: boolean;
   cols?: 2 | 4;
 };
@@ -175,12 +42,11 @@ function MeasuresSection({
       <div className={GRID_CLASS[cols]}>
         {measures.map((m) => (
           <InfoCard
-            key={m.title}
-            title={m.title}
+            key={m.name}
+            title={m.name}
             description={hideDescription ? "" : m.description}
-            imageUrl={getUrl(m.imageUrl)}
-            href={m.href}
-            className={m.className}
+            imageUrl={getUrl(m.image_url)}
+            href="#"
           />
         ))}
       </div>
@@ -189,8 +55,8 @@ function MeasuresSection({
 }
 
 export function MobilityMeasures({
-  pushMeasures = defaultPush,
-  pullMeasures = defaultPull,
+  pushMeasures = [],
+  pullMeasures = [],
   className = "",
   hideDescription = false,
   cols = 2,

src/components/react/form/LivingLabMeasureForm.tsx

@@ -0,0 +1,84 @@
+import { useState } from "react";
+import type { IMeasure } from "../../../types";
+import { getUrl } from "../../../lib/helpers";
+
+type Props = {
+  livingLabId: number;
+  measure: IMeasure;
+  initialChecked?: boolean;
+  disabled?: boolean;
+  onToggle?: (m: IMeasure, checked: boolean) => void;
+  className?: string;
+};
+
+export function LivingLabMeasureForm({
+  livingLabId,
+  measure,
+  initialChecked = false,
+  disabled = true,
+  onToggle,
+  className = "",
+}: Props) {
+  const [checked, setChecked] = useState<boolean>(initialChecked);
+
+  function handleSelect(next: boolean) {
+    // Intentionally left empty for backend call — to be implemented.
+    // Will be called when user toggles checkbox or clicks the card.
+    //api call POST /living-labs/${livingLabId}/projects/${measure.id} with body {selected: next}
+    //backend will handle create or delete based on 'next' value
+  }
+
+  function toggle(e?: React.MouseEvent) {
+    // Prevent double handlers if coming from checkbox change
+    const next = !checked;
+    setChecked(next);
+    handleSelect(next);
+    if (onToggle) onToggle(measure, next);
+  }
+
+  const bgClass = checked ? "bg-success" : "bg-light";
+
+  return (
+    <div
+      className={`relative flex flex-col items-center space-x-2 rounded-lg border border-gray-300 px-2 py-2 shadow-xs focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 hover:border-gray-400 ${bgClass} ${className}`}
+      aria-label={measure.name}
+      onClick={toggle}
+    >
+      <div className="shrink-0">
+        {measure.image_url ? (
+          <img
+            alt={measure.name}
+            src={getUrl(measure.image_url as string)}
+            className="h-10 w-10"
+          />
+        ) : null}
+      </div>
+
+      <div className="min-w-0 flex-1 gap-y-1 text-center">
+        <span aria-hidden="true" className="absolute inset-0" />
+        <span className="font-semibold text-sm">{measure.name}</span>
+        <br />
+        {measure.description ? (
+          <small className="mt-0 leading-0">{measure.description}</small>
+        ) : null}
+      </div>
+
+      <div className="absolute top-1 right-1">
+        <input
+          type="checkbox"
+          checked={checked}
+          onChange={(e) => {
+            // Stop propagation so outer click handler isn't double-invoked
+            e.stopPropagation();
+            const next = e.target.checked;
+            setChecked(next);
+            handleSelect(next);
+            if (onToggle) onToggle(measure, next);
+          }}
+          disabled={disabled}
+          aria-label={`select-${measure.id}`}
+        />
+      </div>
+    </div>
+  );
+}

src/components/react/form/index.ts

@@ -3,3 +3,4 @@ export * from "./LivingLabForm";
 export * from "./LivingLabTransportModeForm";
 export * from "./LivingLabKpiResultForm";
 export * from "./BeforeAndAfterDates";
+export * from "./LivingLabMeasureForm";

src/components/react/index.ts

@@ -12,3 +12,4 @@ export * from "./KpiTypeBadge";
 export * from "./TransportTypeBadge";
 export * from "./LivingLabsMapSection";
 export * from "./MapViewer";
+export * from "./LivingLabMeasures";

src/lib/api-client/ApiClient.ts

@@ -6,7 +6,7 @@ import type {
   IKpi,
   IIKpiResultBeforeAfter,
   ILivingLabPopulated,
-  Measure,
+  IMeasure,
   ITransportMode,
   ITransportModeLivingLab,
   ILivingLab,
@@ -71,7 +71,7 @@ export default class ApiClient {
         return 0;
       });
     const populatedMeasures = lab?.measures?.map((measure) => {
-      const measureData = measures.find((m) => m.id === measure.id) as Measure;
+      const measureData = measures.find((m) => m.id === measure.id) as IMeasure;
       return { ...measure, ...measureData };
     });
 
@@ -112,7 +112,7 @@ export default class ApiClient {
     return this.populateLivingLabData(lab);
   }
 
-  async getMeasures(): Promise<Measure[]> {
+  async getMeasures(): Promise<IMeasure[]> {
     //return this.get(`/measures`);
 
     return measures;