forked from VinokurovVE/tests
mantine
This commit is contained in:
cracklesparkle
@ -6,8 +6,7 @@ import View from 'ol/View'
|
||||
import { Draw, Modify, Select, Snap, Translate } from 'ol/interaction'
|
||||
import { ImageStatic, OSM, Vector as VectorSource, XYZ } from 'ol/source'
|
||||
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
|
||||
import { Divider, IconButton, Slider, Stack, Select as MUISelect, MenuItem, Box, Typography, Accordion, AccordionSummary, AccordionDetails, SxProps, Theme } from '@mui/material'
|
||||
import { Add, Adjust, Api, CircleOutlined, ExpandMore, OpenWith, RectangleOutlined, Straighten, Timeline, Undo, Upload, Warning } from '@mui/icons-material'
|
||||
import { Stack, Typography } from '@mui/material'
|
||||
import { Type } from 'ol/geom/Geometry'
|
||||
import { click, never, noModifierKeys, platformModifierKeyOnly, primaryAction, shiftKeyOnly } from 'ol/events/condition'
|
||||
import Feature from 'ol/Feature'
|
||||
@ -30,6 +29,8 @@ import { useCities } from '../../hooks/swrHooks'
|
||||
import useSWR from 'swr'
|
||||
import { fetcher } from '../../http/axiosInstance'
|
||||
import { BASE_URL } from '../../constants'
|
||||
import { Accordion, ActionIcon, Box, Flex, Select as MantineSelect, MantineStyleProp, rem, Slider, useMantineColorScheme } from '@mantine/core'
|
||||
import { IconApi, IconArrowBackUp, IconArrowsMove, IconCircle, IconExclamationCircle, IconLine, IconPlus, IconPoint, IconPolygon, IconRuler, IconTable, IconUpload } from '@tabler/icons-react'
|
||||
|
||||
const MapComponent = () => {
|
||||
const { cities } = useCities(100, 1)
|
||||
@ -775,14 +776,17 @@ const MapComponent = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const mapControlsStyle: SxProps<Theme> = {
|
||||
const { colorScheme } = useMantineColorScheme();
|
||||
|
||||
const mapControlsStyle: MantineStyleProp = {
|
||||
borderRadius: '4px',
|
||||
position: 'absolute',
|
||||
zIndex: '1',
|
||||
backgroundColor: (theme) =>
|
||||
theme.palette.mode === 'light'
|
||||
? '#FFFFFFAA'
|
||||
: '#000000AA',
|
||||
// backgroundColor: (theme) =>
|
||||
// theme.palette.mode === 'light'
|
||||
// ? '#FFFFFFAA'
|
||||
// : '#000000AA',
|
||||
backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA',
|
||||
backdropFilter: 'blur(8px)'
|
||||
}
|
||||
|
||||
@ -808,134 +812,118 @@ const MapComponent = () => {
|
||||
}, [nodes])
|
||||
|
||||
return (
|
||||
<Box height={'calc(100% - 64px)'} maxHeight={'100%'} flex={'1'} flexGrow={'1'} position={'relative'}>
|
||||
<Stack
|
||||
direction={'column'}
|
||||
sx={{
|
||||
...mapControlsStyle,
|
||||
top: '8px',
|
||||
right: '8px',
|
||||
}}
|
||||
divider={<Divider orientation='horizontal' flexItem />}>
|
||||
<IconButton onClick={() => {
|
||||
<Box w={'100%'} h={'calc(100% - 64px)'} mah={'100%'} flex={'1'} pos={'relative'}>
|
||||
<ActionIcon.Group orientation='vertical' pos='absolute' top='8px' right='8px' style={{ zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
|
||||
<ActionIcon size='lg' variant='transparent' onClick={() => {
|
||||
fetch(`${import.meta.env.VITE_API_EMS_URL}/hello`, { method: 'GET' }).then(res => console.log(res))
|
||||
}}>
|
||||
<Api />
|
||||
</IconButton>
|
||||
<IconApi />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton onClick={() => {
|
||||
<ActionIcon size='lg' variant='transparent' onClick={() => {
|
||||
saveFeatures()
|
||||
}}>
|
||||
<Warning />
|
||||
</IconButton>
|
||||
<IconExclamationCircle />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton
|
||||
<ActionIcon size='lg' variant='transparent' onClick={() => {
|
||||
draw.current?.removeLastPoint()
|
||||
}}>
|
||||
<IconArrowBackUp />
|
||||
</ActionIcon>
|
||||
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant={currentTool === 'Point' ? 'filled' : 'transparent'}
|
||||
onClick={() => {
|
||||
draw.current?.removeLastPoint()
|
||||
handleToolSelect('Point')
|
||||
}}>
|
||||
<Undo />
|
||||
</IconButton>
|
||||
<IconPoint />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Point' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => handleToolSelect('Point')}>
|
||||
<Adjust />
|
||||
</IconButton>
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant={currentTool === 'LineString' ? 'filled' : 'transparent'}
|
||||
onClick={() => {
|
||||
handleToolSelect('LineString')
|
||||
}}>
|
||||
<IconLine />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'LineString' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => handleToolSelect('LineString')}>
|
||||
<Timeline />
|
||||
</IconButton>
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant={currentTool === 'Polygon' ? 'filled' : 'transparent'}
|
||||
onClick={() => {
|
||||
handleToolSelect('Polygon')
|
||||
}}>
|
||||
<IconPolygon />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Polygon' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => handleToolSelect('Polygon')}>
|
||||
<RectangleOutlined />
|
||||
</IconButton>
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant={currentTool === 'Circle' ? 'filled' : 'transparent'}
|
||||
onClick={() => {
|
||||
handleToolSelect('Circle')
|
||||
}}>
|
||||
<IconCircle />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Circle' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => handleToolSelect('Circle')}>
|
||||
<CircleOutlined />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant='transparent'
|
||||
onClick={() => map?.current?.addInteraction(new Translate())}
|
||||
>
|
||||
<OpenWith />
|
||||
</IconButton>
|
||||
<IconArrowsMove />
|
||||
</ActionIcon>
|
||||
|
||||
<IconButton>
|
||||
<Straighten />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant='transparent'
|
||||
>
|
||||
<IconRuler />
|
||||
</ActionIcon>
|
||||
</ActionIcon.Group>
|
||||
|
||||
<Stack
|
||||
direction={'column'}
|
||||
sx={{
|
||||
...mapControlsStyle,
|
||||
maxWidth: '300px',
|
||||
width: '100%',
|
||||
top: '8px',
|
||||
left: '8px',
|
||||
}} divider={<Divider orientation='horizontal' flexItem />}
|
||||
>
|
||||
<Stack direction={'row'}>
|
||||
<IconButton onClick={() => submitOverlay()}>
|
||||
<Upload />
|
||||
</IconButton>
|
||||
|
||||
<IconButton title='Добавить подложку'>
|
||||
<Add />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
|
||||
|
||||
<Stack direction={'row'} padding={'8px'} spacing={4}>
|
||||
<Slider size='small' aria-label="Opacity" min={0} max={1} step={0.001} defaultValue={satelliteOpacity} value={satelliteOpacity} onChange={(_, value) => setSatelliteOpacity(Array.isArray(value) ? value[0] : value)} />
|
||||
|
||||
<MUISelect
|
||||
variant='standard'
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={satMapsProvider}
|
||||
label="Satellite Provider"
|
||||
onChange={(e) => setSatMapsProvider(e.target.value as SatelliteMapsProvider)}
|
||||
<Flex direction='column' style={{
|
||||
...mapControlsStyle,
|
||||
maxWidth: '300px',
|
||||
width: '100%',
|
||||
top: '8px',
|
||||
left: '8px'
|
||||
}}>
|
||||
<Flex direction='row'>
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant='transparent'
|
||||
onClick={() => submitOverlay()}
|
||||
>
|
||||
<MenuItem value={'google'}>Google</MenuItem>
|
||||
<MenuItem value={'yandex'}>Яндекс</MenuItem>
|
||||
<MenuItem value={'custom'}>Custom</MenuItem>
|
||||
</MUISelect>
|
||||
</Stack>
|
||||
<IconUpload style={{ width: rem(20), height: rem(20) }} />
|
||||
</ActionIcon>
|
||||
|
||||
<Accordion disableGutters sx={{ backgroundColor: 'transparent' }} defaultExpanded>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMore />}
|
||||
aria-controls="panel1-content"
|
||||
id="panel1-header"
|
||||
<ActionIcon
|
||||
size='lg'
|
||||
variant='transparent'
|
||||
title='Добавить подложку'
|
||||
>
|
||||
<Typography>Объекты</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
|
||||
malesuada lacus ex, sit amet blandit leo lobortis eget.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
<IconPlus style={{ width: rem(20), height: rem(20) }} />
|
||||
</ActionIcon>
|
||||
</Flex>
|
||||
|
||||
<Flex align='center' direction='row' p='sm' gap='sm'>
|
||||
<Slider w='100%' min={0} max={1} step={0.001} value={satelliteOpacity} defaultValue={satelliteOpacity} onChange={(value) => setSatelliteOpacity(Array.isArray(value) ? value[0] : value)} />
|
||||
|
||||
<MantineSelect variant='filled' value={satMapsProvider} data={[{ label: 'Google', value: 'google' }, { label: 'Yandex', value: 'yandex' }, { label: 'Custom', value: 'custom' }]} onChange={(value) => setSatMapsProvider(value as SatelliteMapsProvider)} />
|
||||
</Flex>
|
||||
|
||||
<Accordion variant='filled' style={{ backgroundColor: 'transparent' }} defaultValue='Объекты'>
|
||||
<Accordion.Item key={'s'} value={'Объекты'}>
|
||||
<Accordion.Control icon={<IconTable />}>{'Объекты'}</Accordion.Control>
|
||||
<Accordion.Panel>{'ASd'}</Accordion.Panel>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
</Flex>
|
||||
|
||||
</Stack>
|
||||
|
||||
<Stack direction={'row'}
|
||||
sx={{
|
||||
...mapControlsStyle,
|
||||
bottom: '8px',
|
||||
left: '8px',
|
||||
}}
|
||||
|
||||
divider={<Divider orientation='vertical' flexItem />}
|
||||
>
|
||||
<Flex direction='row' pos='absolute' bottom='8px' left='8px' style={{ ...mapControlsStyle }}>
|
||||
<Stack>
|
||||
<Typography>
|
||||
x: {currentCoordinate?.[0]}
|
||||
@ -950,20 +938,11 @@ const MapComponent = () => {
|
||||
X={currentX}
|
||||
Y={currentY}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Flex>
|
||||
|
||||
<Stack direction={'row'}
|
||||
sx={{
|
||||
...mapControlsStyle,
|
||||
bottom: '8px',
|
||||
right: '8px',
|
||||
}}
|
||||
|
||||
divider={<Divider orientation='vertical' flexItem />}>
|
||||
<Stack>
|
||||
{statusText}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Flex direction='row' style={{ ...mapControlsStyle, bottom: '8px', right: '8px' }}>
|
||||
{statusText}
|
||||
</Flex>
|
||||
|
||||
<div
|
||||
id="map-container"
|
||||
|
||||
Reference in New Issue
Block a user