88 lines
2.6 KiB
TypeScript
88 lines
2.6 KiB
TypeScript
import { useEffect } from "react";
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { Tab, TabList } from "@fluentui/react-tabs";
|
|
import MapComponent from "../components/map/MapComponent";
|
|
|
|
import {
|
|
useAppStore,
|
|
setCurrentTab,
|
|
deleteMapTab,
|
|
} from "../store/app";
|
|
import { initializeMapState, useMapStore } from "../store/map";
|
|
import { initializeObjectsState } from "../store/objects";
|
|
|
|
function MapTest() {
|
|
const { mapTab, currentTab } = useAppStore();
|
|
const { id } = useMapStore();
|
|
|
|
const tabs = [
|
|
{
|
|
id: uuidv4(),
|
|
year: 2018,
|
|
region: 11,
|
|
district: 146,
|
|
},
|
|
// {
|
|
// id: uuidv4(),
|
|
// year: 2023,
|
|
// region: 11,
|
|
// district: 146,
|
|
// },
|
|
];
|
|
|
|
useEffect(() => {
|
|
tabs.forEach((tab) => {
|
|
useAppStore.setState((state) => {
|
|
initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year);
|
|
initializeMapState(tab.id);
|
|
|
|
return {
|
|
mapTab: {
|
|
...state.mapTab,
|
|
[tab.id]: {
|
|
year: tab.year,
|
|
region: tab.region,
|
|
district: tab.district,
|
|
},
|
|
},
|
|
};
|
|
});
|
|
});
|
|
|
|
setCurrentTab(tabs[0].id);
|
|
|
|
return () => {
|
|
tabs.forEach((tab) => deleteMapTab(tab.id));
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div style={{ height: "100%", width: "100%", position: "relative" }}>
|
|
<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
|
|
<TabList
|
|
selectedValue={currentTab}
|
|
onTabSelect={(_, data) => setCurrentTab(data.value as string)}
|
|
>
|
|
{Object.entries(mapTab).map(([key]) => (
|
|
<Tab value={key} key={key}>
|
|
{id[key]?.mapLabel ?? `Tab ${key}`}
|
|
</Tab>
|
|
))}
|
|
</TabList>
|
|
|
|
<div style={{ flexGrow: 1, position: "relative" }}>
|
|
{Object.entries(mapTab).map(([key]) =>
|
|
currentTab === key ? (
|
|
<div key={key} style={{ height: "100%", position: "relative" }}>
|
|
<MapComponent key={key} id={key} active={true} />
|
|
</div>
|
|
) : null
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MapTest;
|