diff --git a/public/map_icons/disability.png b/public/map_icons/disability.png new file mode 100644 index 0000000..61e3310 Binary files /dev/null and b/public/map_icons/disability.png differ diff --git a/public/map_icons/door.png b/public/map_icons/door.png new file mode 100644 index 0000000..60917e9 Binary files /dev/null and b/public/map_icons/door.png differ diff --git a/public/map_icons/exit.png b/public/map_icons/exit.png new file mode 100644 index 0000000..af99fa7 Binary files /dev/null and b/public/map_icons/exit.png differ diff --git a/public/map_icons/stair.png b/public/map_icons/stair.png new file mode 100644 index 0000000..63204a9 Binary files /dev/null and b/public/map_icons/stair.png differ diff --git a/public/map_icons/wc.png b/public/map_icons/wc.png new file mode 100644 index 0000000..7f669b2 Binary files /dev/null and b/public/map_icons/wc.png differ diff --git a/src/app/student/map/_components/LocationSelect.tsx b/src/app/student/map/_components/LocationSelect.tsx index 1bf4d8e..9d4decd 100644 --- a/src/app/student/map/_components/LocationSelect.tsx +++ b/src/app/student/map/_components/LocationSelect.tsx @@ -17,7 +17,7 @@ export default function SelectLocation({ setActiveBoothId: (id: number | null) => void }) { return ( -
+
filterBySearch(e.target.value)}> + +
+ {programmes.map(programme => ( + + ))} +
+ +
+ + + ) +} diff --git a/src/app/student/map/survey/_components/SelectionItem.tsx b/src/app/student/map/survey/_components/SelectionItem.tsx new file mode 100644 index 0000000..5b6659c --- /dev/null +++ b/src/app/student/map/survey/_components/SelectionItem.tsx @@ -0,0 +1,21 @@ +export function SelectionItem({ + name, + isSelected, + onClick +}: { + name: string + isSelected: boolean + onClick: () => void +}) { + return ( +
+ {name} +
+ ) +} diff --git a/src/app/student/map/survey/page.tsx b/src/app/student/map/survey/page.tsx new file mode 100644 index 0000000..e75975e --- /dev/null +++ b/src/app/student/map/survey/page.tsx @@ -0,0 +1,10 @@ +import { QuestionnaireForm } from "@/app/student/map/_components/QuestionnaireForm" +import { Page } from "@/components/shared/Page" + +export default async function SurveyPage() { + return ( + + + + ) +} diff --git a/src/components/shared/hooks/useFeatureState.tsx b/src/components/shared/hooks/useFeatureState.tsx new file mode 100644 index 0000000..8ba93dc --- /dev/null +++ b/src/components/shared/hooks/useFeatureState.tsx @@ -0,0 +1,33 @@ +// Keep mapbox feature state in sync with component state + +import { BoothID } from "@/app/student/map/lib/booths" +import { MutableRefObject, useEffect } from "react" +import { MapRef } from "react-map-gl/dist/esm/exports-maplibre" + +// to allow for styling of the features +export function useFeatureState( + mapRef: MutableRefObject, + boothIds: BoothID[], + stateKey: "active" | "hover" | "filtered" +) { + useEffect(() => { + const map = mapRef.current + if (map == null || boothIds.length === 0 || !map.isStyleLoaded()) return + + for (const boothId of boothIds) { + map.setFeatureState( + { source: "booths", id: boothId }, + { [stateKey]: true } + ) + } + + return () => { + for (const boothId of boothIds) { + map.setFeatureState( + { source: "booths", id: boothId }, + { [stateKey]: false } + ) + } + } + }, [boothIds, stateKey]) +} diff --git a/src/components/shared/hooks/useGeoJsonPlanData.tsx b/src/components/shared/hooks/useGeoJsonPlanData.tsx new file mode 100644 index 0000000..f82885e --- /dev/null +++ b/src/components/shared/hooks/useGeoJsonPlanData.tsx @@ -0,0 +1,44 @@ +"use client" + +import { + geoJsonNymblePlan2Data, + geoJsonNymblePlan2RoomsData, + geoJsonNymblePlan2RoutesData, + geoJsonNymblePlan3Data, + geoJsonNymblePlan3RoomsData, + geoJsonNymblePlan3RoutesData +} from "@/app/student/map/lib/config" +import { Location } from "@/app/student/map/lib/locations" +import { useEffect, useState } from "react" + +//Change layer style data source based on selected location +export function useGeoJsonPlanData(location: Location) { + const [geoJsonPlanData, setGeoJsonPlanData] = useState(geoJsonNymblePlan2Data) + const [geoJsonPlanRoutesData, setGeoJsonPlanRoutesData] = useState( + geoJsonNymblePlan2RoutesData + ) + const [geoJsonPlanRoomsData, setGeoJsonPlanRoomsData] = useState( + geoJsonNymblePlan2RoomsData + ) + + useEffect(() => { + switch (location.id) { + case "nymble/2": { + setGeoJsonPlanData(geoJsonNymblePlan2Data) + setGeoJsonPlanRoutesData(geoJsonNymblePlan2RoutesData) + setGeoJsonPlanRoomsData(geoJsonNymblePlan2RoomsData) + break + } + case "nymble/3": { + setGeoJsonPlanData(geoJsonNymblePlan3Data) + setGeoJsonPlanRoutesData(geoJsonNymblePlan3RoutesData) + setGeoJsonPlanRoomsData(geoJsonNymblePlan3RoomsData) + break + } + case "library": + //TODO: library plan data + break + } + }, [location]) + return [geoJsonPlanData, geoJsonPlanRoutesData, geoJsonPlanRoomsData] +} diff --git a/src/components/shared/hooks/useSurveyData.tsx b/src/components/shared/hooks/useSurveyData.tsx new file mode 100644 index 0000000..041b942 --- /dev/null +++ b/src/components/shared/hooks/useSurveyData.tsx @@ -0,0 +1,20 @@ +"use client" + +import { LOCAL_STORAGE_KEY, SurveyData } from "@/app/student/map/lib/survey" +import { useEffect, useState } from "react" + +export function useSurveyData() { + const [surveyData, setSurveyData] = useState(null) + const [isSurveyDataLoaded, setIsSurveyDataLoaded] = useState(false) + + useEffect(() => { + const rawStoredData = localStorage.getItem(LOCAL_STORAGE_KEY) + + const storedData = rawStoredData + ? (JSON.parse(rawStoredData) as SurveyData) + : null + setSurveyData(storedData) + setIsSurveyDataLoaded(true) // Mark data fetching as done + }, []) + return { surveyData, isSurveyDataLoaded } +}