82 lines
2.4 KiB
TypeScript
82 lines
2.4 KiB
TypeScript
import { Container, Stack, Tabs } from '@mantine/core'
|
|
import MapComponent from '../components/map/MapComponent'
|
|
import { useEffect } from 'react'
|
|
import { initializeObjectsState } from '../store/objects'
|
|
import { deleteMapTab, setCurrentTab, useAppStore } from '../store/app'
|
|
import { initializeMapState, useMapStore } from '../store/map'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
|
|
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.map(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.map(tab => deleteMapTab(tab.id))
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Container fluid w='100%' pos='relative' p={0}>
|
|
<Tabs h='100%' variant='default' value={currentTab} onChange={setCurrentTab} keepMounted={true}>
|
|
<Stack gap={0} h='100%'>
|
|
<Tabs.List>
|
|
{Object.entries(mapTab).map(([key]) => (
|
|
<Tabs.Tab value={key} key={key}>
|
|
{id[key]?.mapLabel}
|
|
</Tabs.Tab>
|
|
))}
|
|
</Tabs.List>
|
|
|
|
{Object.entries(mapTab).map(([key]) => (
|
|
<Tabs.Panel value={key} key={key} h='100%' pos='relative'>
|
|
<MapComponent
|
|
key={key}
|
|
id={key}
|
|
active={currentTab === key}
|
|
/>
|
|
|
|
</Tabs.Panel>
|
|
))}
|
|
</Stack>
|
|
|
|
</Tabs>
|
|
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default MapTest |