diff --git a/frontend/src/pages/Facility3DViewerPage.tsx b/frontend/src/pages/Facility3DViewerPage.tsx index ba5f3a4..5e048ba 100644 --- a/frontend/src/pages/Facility3DViewerPage.tsx +++ b/frontend/src/pages/Facility3DViewerPage.tsx @@ -51,6 +51,10 @@ export default function Facility3DViewerPage() { const [timelineDate, setTimelineDate] = useState(new Date()); const [isTimelinePlaying, setIsTimelinePlaying] = useState(false); + // Floor selection state + const [allFloors, setAllFloors] = useState<{ id: string; name: string; buildingName: string }[]>([]); + const [selectedFloorId, setSelectedFloorId] = useState(null); + const [searchParams] = useSearchParams(); const targetedPlantTag = searchParams.get('plant'); @@ -58,6 +62,13 @@ export default function Facility3DViewerPage() { loadData(); }, []); + // Load floor data when selected floor changes + useEffect(() => { + if (selectedFloorId) { + loadFloorData(selectedFloorId); + } + }, [selectedFloorId]); + // Deep link handler useEffect(() => { if (floorData && targetedPlantTag) { @@ -83,16 +94,40 @@ export default function Facility3DViewerPage() { } }, [floorData, targetedPlantTag]); + async function loadFloorData(floorId: string) { + setStatus('Fetching 3D scene...'); + try { + const data = await layoutApi.getFloor3D(floorId); + setFloorData(data); + setStatus(''); + } catch (err) { + setStatus('Error: ' + (err as Error).message); + } + } + async function loadData() { setStatus('Loading layout...'); try { const props = await layoutApi.getProperties(); - if (props[0]?.buildings[0]?.floors[0]) { - const floorId = props[0].buildings[0].floors[0].id; - setStatus('Fetching 3D scene...'); - const data = await layoutApi.getFloor3D(floorId); - setFloorData(data); - setStatus(''); + if (props[0]?.buildings?.length > 0) { + // Collect all floors from all buildings + const floors: { id: string; name: string; buildingName: string }[] = []; + for (const building of props[0].buildings) { + for (const floor of building.floors || []) { + floors.push({ + id: floor.id, + name: floor.name, + buildingName: building.name + }); + } + } + setAllFloors(floors); + + // Default to second floor if available (Upper Floor has more plants) + if (floors.length > 0) { + const defaultFloor = floors.length > 1 ? floors[1] : floors[0]; + setSelectedFloorId(defaultFloor.id); + } } else { setStatus('No floor layout found. Set up a facility first.'); } @@ -165,9 +200,28 @@ export default function Facility3DViewerPage() { Facility 3D BETA -

- {floorData ? `${floorData.floor.name} • ${floorData.stats.occupiedPositions} Plants` : 'Loading...'} -

+
+ {allFloors.length > 1 ? ( + + ) : ( + + {floorData?.floor.name || 'Loading...'} + + )} + + • {floorData?.stats.occupiedPositions || 0} Plants + +