popovspiridon99/universal_is
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

NestJS backend rewrite; migrate client to FluentUI V9

Browse Source
This commit is contained in:
popovspiridon99
2025-09-18 15:48:08 +09:00
parent 32ff36a12c
commit 34529cea68
62 changed files with 5642 additions and 3679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
client/src/components/map/MapLegend/MapLegend.tsx
View File

@ -1,18 +1,15 @@
import { Accordion, ActionIcon, Collapse, ColorSwatch, Flex, MantineStyleProp, ScrollAreaAutosize, Stack, Text, useMantineColorScheme } from '@mantine/core'
import { useMantineColorScheme } from '@mantine/core'
import useSWR from 'swr'
import { fetcher } from '../../../http/axiosInstance'
import { BASE_URL } from '../../../constants'
import { useDisclosure } from '@mantine/hooks'
import { IconChevronDown } from '@tabler/icons-react'
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, ColorSwatch, Text } from '@fluentui/react-components'
const MapLegend = ({
selectedDistrict,
selectedYear,
style
}: {
selectedDistrict: number | null,
selectedYear: number | null,
style: MantineStyleProp
}) => {
const { colorScheme } = useMantineColorScheme()
@ -32,40 +29,42 @@ const MapLegend = ({
}
)
const [opened, { toggle }] = useDisclosure(false)
return (
<ScrollAreaAutosize maw='300px' w='100%' fz='xs' mt='auto' style={{ ...style, zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
<Stack gap='sm' p='sm'>
<Flex align='center'>
<Text fz='xs'>
<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>
Легенда
</Text>
</AccordionHeader>
<ActionIcon ml='auto' variant='subtle' onClick={toggle} >
<IconChevronDown style={{ transform: opened ? 'rotate(0deg)' : 'rotate(180deg)' }} />
</ActionIcon>
</Flex>
<AccordionPanel>
<Accordion multiple collapsible>
<AccordionItem value='existing'>
<AccordionHeader>
Существующие
</AccordionHeader>
<Collapse in={opened}>
<Accordion defaultValue={['existing', 'planning']} multiple>
<Accordion.Item value='existing' key='existing'>
<Accordion.Control>Существующие</Accordion.Control>
<Accordion.Panel>
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
</Accordion.Panel>
</Accordion.Item>
<AccordionPanel>
{existingObjectsList && <LegendGroup objectsList={existingObjectsList} border='solid' />}
</AccordionPanel>
</AccordionItem>
<Accordion.Item value='planning' key='planning'>
<Accordion.Control>Планируемые</Accordion.Control>
<Accordion.Panel>
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
</Accordion.Panel>
</Accordion.Item>
</Accordion>
</Collapse>
</Stack>
</ScrollAreaAutosize>
<AccordionItem value='planning'>
<AccordionHeader>
Планируемые
</AccordionHeader>
<AccordionPanel>
{planningObjectsList && <LegendGroup objectsList={planningObjectsList} border='dotted' />}
</AccordionPanel>
</AccordionItem>
</Accordion>
</AccordionPanel>
</AccordionItem>
</Accordion>
</div>
)
}
@ -89,15 +88,15 @@ const LegendGroup = ({
}
return (
<Stack gap={4}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
{objectsList.map(object => (
<Flex gap='xs' align='center' key={object.id}>
<ColorSwatch style={{ border: borderStyle() }} radius={0} size={16} color={`rgb(${object.r},${object.g},${object.b})`} />
<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 fz='xs'>{object.name}</Text>
</Flex>
<Text size={200}>{object.name}</Text>
</div>
))}
</Stack>
</div>
)
}