TJWaterFrontend_Refine/src/app/(main)/scada-data-cleaning/page.tsx

"use client";

import { useCallback, useState } from "react";
import MapComponent from "@components/olmap/core/MapComponent";
import MapToolbar from "@components/olmap/core/Controls/Toolbar";

import SCADADeviceList from "@components/olmap/SCADA/SCADADeviceList";
import SCADADataPanel from "@components/olmap/SCADA/SCADADataPanel";

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 (
    <div className="relative w-full h-full overflow-hidden">
      <MapComponent>
        <MapToolbar hiddenButtons={["style"]} />
        <SCADADeviceList
          onDeviceClick={handleDeviceClick}
          onSelectionChange={handleSelectionChange}
          selectedDeviceIds={selectedDeviceIds}
          showCleaning={true}
        />
        <SCADADataPanel
          deviceIds={selectedDeviceIds}
          visible={panelVisible}
          showCleaning={true}
        />
      </MapComponent>
    </div>
  );
}