95 lines
4.9 KiB
TypeScript
95 lines
4.9 KiB
TypeScript
'use client'
|
|
import { VerticalTable } from "@/components/ui/verticalTable";
|
|
import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@common/components/ui";
|
|
import { useEffect, useState } from "react";
|
|
import { SwtrmtFcltCol, SwtrmtPrcsZoneCol } from "./components/common/table";
|
|
import { useGisContext } from "@common/business_components/ui/map/Gis";
|
|
import { getData } from "@/components/lib/api";
|
|
import { getLayerContentComponent } from "./components/common";
|
|
// TODO:
|
|
const FeatureClickEventPopup = ({ onClose, featureData }: { onClose: () => void, featureData: any }) => {
|
|
const { gisMap } = useGisContext() as unknown as { checkedLayerIds: React.MutableRefObject<number[]>; treeData: { lyrSn: number }[] | null; gisCore: any; gisMap: any; };
|
|
const featureId = featureData.getId(); // 피처의 id 가져오기
|
|
const [layerNm, setLayerNm] = useState<string>(""); // 레이어 이름 상태
|
|
const [tableData, setTableData] = useState<any>(null); // 피처 데이터 상태
|
|
const [headlist, setHeadlist] = useState<{ id: string; title: string; }[]>([]); // 컬럼리스트 변경상태
|
|
let [buttonChk,setButtonChk] = useState(true)
|
|
// 피쳐데이터의 현재 레이어 이름 가져오는 함수
|
|
const getSelectedLayers = () => {
|
|
const layers = gisMap.getLayers().getArray(); // gisMap에서 모든 레이어 가져오기
|
|
let featureLayer: { get: (key: string) => any } = { get: (key: string) => null }; // 피처가 속한 레이어를 찾기 위한 변수
|
|
layers.forEach((layer: any) => {
|
|
const source = layer.getSource();
|
|
if (source && source.hasFeature && source.hasFeature(featureData)) {
|
|
featureLayer = layer; // 피처가 속한 레이어 찾기
|
|
}
|
|
});
|
|
return featureLayer.get('lyrNm'); // 레이어 이름 출력
|
|
};
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
if (featureId) {
|
|
const selectedLayerName = getSelectedLayers(); // 레이어 이름 가져오기
|
|
setLayerNm(selectedLayerName); // 상태 업데이트
|
|
|
|
const data = await getData(`v1/map/features/${featureId}`);
|
|
switch (selectedLayerName) {
|
|
case '하수처리시설':
|
|
setHeadlist(SwtrmtFcltCol);
|
|
setButtonChk(false)
|
|
break;
|
|
case '하수처리구역':
|
|
setHeadlist(SwtrmtPrcsZoneCol)
|
|
setButtonChk(false)
|
|
break;
|
|
case '중점우수토실':
|
|
setButtonChk(false)
|
|
break;
|
|
case '우수토실':
|
|
setButtonChk(true)
|
|
break;
|
|
case '하수관로':
|
|
setButtonChk(true)
|
|
break;
|
|
case '하수맨홀':
|
|
setButtonChk(true)
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
setTableData(data);
|
|
};
|
|
}
|
|
fetchData();
|
|
}, [featureId]);
|
|
const ContentComponent = layerNm ? getLayerContentComponent(layerNm) : null;
|
|
return (
|
|
<div id="popup" className="absolute top-0 right-0 w-[350px] h-[calc(100vh-10rem)] bg-white border-r border-gray-300 flex flex-col overflow-hidden transition-all duration-300 z-[200]">
|
|
<div className="card-header bg-primary flex items-center justify-between p-4">
|
|
<div className="flex mx-3 flex-col">
|
|
<h3 className="text-2xl font-medium text-white text-label">{layerNm} 정보</h3>
|
|
<div className="font-medium text-white text-label">(00구 00리 하수관로)</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-white hover:text-gray-700 focus:outline-none"
|
|
aria-label="닫기"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
<div className="overflow-y-auto flex-1">
|
|
<VerticalTable headName='LX 연계정보' tableData={[tableData]} headlist={headlist} pageSize={20} total={0} children={undefined} cellClick={undefined} onPageChange={function (page: number): void {
|
|
throw new Error("Function not implemented.");
|
|
}}></VerticalTable>
|
|
<div className="w-full mx-5 flex items-center justify-end space-x-2">
|
|
{buttonChk ? <Button className="px-4 mr-5 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700">
|
|
저장
|
|
</Button> : null}
|
|
</div>
|
|
{ContentComponent && <ContentComponent />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default FeatureClickEventPopup; |