52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import dynamic from "next/dynamic";
|
|
import { useCallback, useState } from "react";
|
|
|
|
import { MapPanelSkeleton } from "@components/loading/MapComponentSkeletons";
|
|
import MapToolbar from "@components/olmap/core/Controls/Toolbar";
|
|
|
|
const SCADADeviceList = dynamic(
|
|
() => import("@components/olmap/SCADA/SCADADeviceList"),
|
|
{
|
|
loading: () => <MapPanelSkeleton variant="scada-data-cleaning" />,
|
|
},
|
|
);
|
|
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 hiddenButtons={["style"]} />
|
|
<SCADADeviceList
|
|
onDeviceClick={handleDeviceClick}
|
|
onSelectionChange={handleSelectionChange}
|
|
selectedDeviceIds={selectedDeviceIds}
|
|
showCleaning={true}
|
|
/>
|
|
<SCADADataPanel
|
|
deviceIds={selectedDeviceIds}
|
|
visible={panelVisible}
|
|
showCleaning={true}
|
|
/>
|
|
</>
|
|
);
|
|
}
|