57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useCallback, useState } from "react";
|
|
|
|
import {
|
|
MapPanelSkeleton,
|
|
MapTimelineSkeleton,
|
|
} from "@components/loading/MapComponentSkeletons";
|
|
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
|
|
|
|
const Timeline = dynamic(
|
|
() => import("@components/olmap/core/Controls/Timeline"),
|
|
{
|
|
loading: () => <MapTimelineSkeleton />,
|
|
},
|
|
);
|
|
const SCADADeviceList = dynamic(
|
|
() => import("@components/olmap/SCADA/SCADADeviceList"),
|
|
{
|
|
loading: () => <MapPanelSkeleton variant="network-simulation" />,
|
|
},
|
|
);
|
|
const SCADADataPanel = dynamic(
|
|
() => import("@components/olmap/SCADA/SCADADataPanel"),
|
|
{
|
|
loading: () => null,
|
|
},
|
|
);
|
|
|
|
export default function Home() {
|
|
const [selectedDeviceIds, setSelectedDeviceIds] = useState<string[]>([]);
|
|
const [panelVisible, setPanelVisible] = useState<boolean>(false);
|
|
|
|
const handleSelectionChange = useCallback((ids: string[]) => {
|
|
setSelectedDeviceIds(ids);
|
|
setPanelVisible(ids.length > 0);
|
|
}, []);
|
|
|
|
const handleDeviceClick = useCallback(() => {
|
|
setPanelVisible(true);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<MapToolbar queryType="realtime" />
|
|
<Timeline />
|
|
<SCADADeviceList
|
|
onDeviceClick={handleDeviceClick}
|
|
onSelectionChange={handleSelectionChange}
|
|
selectedDeviceIds={selectedDeviceIds}
|
|
/>
|
|
<SCADADataPanel deviceIds={selectedDeviceIds} visible={panelVisible} />
|
|
</>
|
|
);
|
|
}
|