103 lines
3.8 KiB
TypeScript
103 lines
3.8 KiB
TypeScript
import useSWR from 'swr'
|
||
import { fetcher } from '../../../http/axiosInstance'
|
||
import { BASE_URL } from '../../../constants'
|
||
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, ColorSwatch, Text } from '@fluentui/react-components'
|
||
import { useAppStore } from '../../../store/app'
|
||
|
||
const MapLegend = ({
|
||
selectedDistrict,
|
||
selectedYear,
|
||
}: {
|
||
selectedDistrict: number | null,
|
||
selectedYear: number | null,
|
||
}) => {
|
||
const { colorScheme } = useAppStore()
|
||
|
||
const { data: existingObjectsList } = useSWR(
|
||
selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=0` : null,
|
||
(url) => fetcher(url, BASE_URL.ems),
|
||
{
|
||
revalidateOnFocus: false
|
||
}
|
||
)
|
||
|
||
const { data: planningObjectsList } = useSWR(
|
||
selectedYear && selectedDistrict ? `/general/objects/list?year=${selectedYear}&city_id=${selectedDistrict}&planning=1` : null,
|
||
(url) => fetcher(url, BASE_URL.ems),
|
||
{
|
||
revalidateOnFocus: false
|
||
}
|
||
)
|
||
|
||
return (
|
||
<div
|
||
style={{ overflow: 'auto', maxWidth: '300px', width: '100%', marginTop: 'auto', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}
|
||
>
|
||
<Accordion collapsible>
|
||
<AccordionItem value='existing'>
|
||
<AccordionHeader>
|
||
Легенда
|
||
</AccordionHeader>
|
||
|
||
<AccordionPanel>
|
||
<Accordion multiple collapsible>
|
||
<AccordionItem value='existing'>
|
||
<AccordionHeader>
|
||
Существующие
|
||
</AccordionHeader>
|
||
|
||
<AccordionPanel>
|
||
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
|
||
<AccordionItem value='planning'>
|
||
<AccordionHeader>
|
||
Планируемые
|
||
</AccordionHeader>
|
||
|
||
<AccordionPanel>
|
||
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
</AccordionPanel>
|
||
</AccordionItem>
|
||
</Accordion>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
const LegendGroup = ({
|
||
objectsList,
|
||
border
|
||
}: {
|
||
objectsList: { id: number, name: string, count: number, r: number | null, g: number | null, b: number | null }[],
|
||
border: 'solid' | 'dotted'
|
||
}) => {
|
||
|
||
const borderStyle = () => {
|
||
switch (border) {
|
||
case 'solid':
|
||
return '2px solid black'
|
||
case 'dotted':
|
||
return '2px dotted black'
|
||
default:
|
||
return 'none'
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||
{objectsList.map(object => (
|
||
<div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }} key={object.id}>
|
||
<ColorSwatch size='extra-small' style={{ border: borderStyle() }} color={`rgb(${object.r},${object.g},${object.b})`} value={`rgb(${object.r},${object.g},${object.b})`} />
|
||
-
|
||
<Text size={200}>{object.name}</Text>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default MapLegend |