Disabled signup; Map test

client/src/components/map/MapComponent.tsx

@@ -4,18 +4,18 @@ import 'ol/ol.css'
 import Map from 'ol/Map'
 import View from 'ol/View'
 import { Draw, Modify, Select, Snap, Translate } from 'ol/interaction'
-import { ImageStatic, OSM, TileDebug, Vector as VectorSource, XYZ } from 'ol/source'
+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 } from '@mui/material'
-import { Add, Adjust, Api, CircleOutlined, OpenWith, RectangleOutlined, Straighten, Timeline, Undo, Upload, Warning } from '@mui/icons-material'
-import { Type } from 'ol/geom/Geometry'
+import { Divider, IconButton, Slider, Stack, Select as MUISelect, MenuItem, Box, Typography, Drawer, Button, Modal, 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 Geometry, { Type } from 'ol/geom/Geometry'
 import { click, never, noModifierKeys, platformModifierKeyOnly, primaryAction, shiftKeyOnly } from 'ol/events/condition'
 import Feature from 'ol/Feature'
 import { SatelliteMapsProvider } from '../../interfaces/map'
 import { containsExtent, Extent, getCenter, getHeight, getWidth } from 'ol/extent'
 import { drawingLayerStyle, regionsLayerStyle, selectStyle } from './MapStyles'
 import { googleMapsSatelliteSource, regionsLayerSource, yandexMapsSatelliteSource } from './MapSources'
-import { mapCenter, mapExtent } from './MapConstants'
+import { mapCenter } from './MapConstants'
 import ImageLayer from 'ol/layer/Image'
 import VectorImageLayer from 'ol/layer/VectorImage'
 import { LineString, MultiPoint, Point, Polygon, SimpleGeometry } from 'ol/geom'
@@ -25,17 +25,28 @@ import { Coordinate } from 'ol/coordinate'
 import { Stroke, Fill, Circle as CircleStyle, Style } from 'ol/style'
 import { calculateExtent, calculateRotationAngle, rotateProjection } from './mapUtils'
 import MapBrowserEvent from 'ol/MapBrowserEvent'
-import { get } from 'ol/proj'
-import axios from 'axios'
+import { fromLonLat, get } from 'ol/proj'
+import { useCities } from '../../hooks/swrHooks'
+import useSWR from 'swr'
+import { fetcher } from '../../http/axiosInstance'
+import { BASE_URL } from '../../constants'
 
 const MapComponent = () => {
+    const { cities } = useCities(100, 1)
+
+    useEffect(() => {
+        if (cities) {
+            cities.map((city: any) => {
+                citiesLayer.current?.getSource()?.addFeature(new Feature(new Point(fromLonLat([city.longitude, city.width]))))
+            })
+        }
+    }, [cities])
+
     const [currentCoordinate, setCurrentCoordinate] = useState<Coordinate | null>(null)
     const [currentZ, setCurrentZ] = useState<number | undefined>(undefined)
     const [currentX, setCurrentX] = useState<number | undefined>(undefined)
     const [currentY, setCurrentY] = useState<number | undefined>(undefined)
 
-    const [testExtent, setTestExtent] = useState<Extent | null>(null)
-
     const [file, setFile] = useState(null)
     const [polygonExtent, setPolygonExtent] = useState<Extent | undefined>(undefined)
     const [bottomLeft, setBottomLeft] = useState<Coordinate | undefined>(undefined)
@@ -72,12 +83,19 @@ const MapComponent = () => {
         },
     }))
 
+    const nodeLayer = useRef<VectorLayer | null>(null)
+    const nodeLayerSource = useRef<VectorSource>(new VectorSource())
+
     const overlayLayer = useRef<VectorLayer | null>(null)
     const overlayLayerSource = useRef<VectorSource>(new VectorSource())
 
     const drawingLayer = useRef<VectorLayer | null>(null)
     const drawingLayerSource = useRef<VectorSource>(new VectorSource())
 
+    const citiesLayer = useRef<VectorLayer>(new VectorLayer({
+        source: new VectorSource()
+    }))
+
     const regionsLayer = useRef<VectorImageLayer>(new VectorImageLayer({
         source: regionsLayerSource,
         style: regionsLayerStyle
@@ -98,6 +116,21 @@ const MapComponent = () => {
                 type: currentTool,
                 condition: noModifierKeys
             })
+
+            draw.current.on('drawend', function (s) {
+                console.log(s.feature.getGeometry()?.getType())
+                let type = 'POLYGON'
+
+                switch (s.feature.getGeometry()?.getType()) {
+                    case 'LineString':
+                        type = 'LINE'
+                    case 'Polygon':
+                        type = 'POLYGON'
+                }
+                const coordinates = (s.feature.getGeometry() as SimpleGeometry).getCoordinates()
+                uploadCoordinates(coordinates, type)
+            })
+
             map?.current?.addInteraction(draw.current)
             snap.current = new Snap({ source: drawingLayerSource.current })
             map?.current?.addInteraction(snap.current)
@@ -595,14 +628,18 @@ const MapComponent = () => {
             },
         })
 
+        nodeLayer.current = new VectorLayer({
+            source: nodeLayerSource.current,
+            style: drawingLayerStyle
+        })
+
         map.current = new Map({
-            layers: [baseLayer.current, new TileLayer({
-                source: new TileDebug(),
-            }), satLayer.current, regionsLayer.current, drawingLayer.current, imageLayer.current, overlayLayer.current],
+            controls: [],
+            layers: [baseLayer.current, satLayer.current, regionsLayer.current, citiesLayer.current, drawingLayer.current, imageLayer.current, overlayLayer.current, nodeLayer.current],
             target: mapElement.current as HTMLDivElement,
             view: new View({
-                center: mapCenter,
-                zoom: 2,
+                center: mapCenter,//center: fromLonLat([130.401113, 67.797368]),
+                zoom: 16,
                 maxZoom: 21,
                 //extent: mapExtent,
             }),
@@ -665,6 +702,27 @@ const MapComponent = () => {
         }
     }, [currentTool])
 
+    const uploadCoordinates = async (coordinates: any, type: any) => {
+        try {
+            const response = await fetch(`${import.meta.env.VITE_API_EMS_URL}/nodes`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ coordinates, object_id: 1, type: type }) // Replace with actual object_id
+            });
+
+            if (response.ok) {
+                const data = await response.json();
+                console.log('Node created:', data);
+            } else {
+                console.error('Failed to upload coordinates');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+
     const [satelliteOpacity, setSatelliteOpacity] = useState<number>(0)
 
     const [statusText, setStatusText] = useState('')
@@ -712,52 +770,48 @@ const MapComponent = () => {
         }
     }
 
+    const mapControlsStyle: SxProps<Theme> = {
+        borderRadius: '4px',
+        position: 'absolute',
+        zIndex: '1',
+        backgroundColor: (theme) =>
+            theme.palette.mode === 'light'
+                ? '#FFFFFFAA'
+                : '#000000AA',
+        backdropFilter: 'blur(8px)'
+    }
+
+    const { data: nodes } = useSWR('/nodes/all', () => fetcher('/nodes/all', BASE_URL.ems), { revalidateOnFocus: false })
+
+    useEffect(() => {
+        // Draw features based on database data
+        if (Array.isArray(nodes)) {
+            nodes.map(node => {
+                if (node.shape_type === 'LINE') {
+                    let coordinates: Coordinate[] = []
+                    if (Array.isArray(node.shape)) {
+                        node.shape.map((point: any) => {
+                            const coordinate = [point.x as number, point.y as number] as Coordinate
+                            coordinates.push(coordinate)
+                        })
+                    }
+                    //console.log(coordinates)
+                    nodeLayerSource.current.addFeature(new Feature({ geometry: new LineString(coordinates) }))
+                }
+            })
+        }
+    }, [nodes])
+
     return (
-        <Stack flex={1} flexDirection='column'>
-            <Stack my={1} spacing={1} direction='row' divider={<Divider orientation='vertical' flexItem />}>
-                <IconButton title='Добавить подложку'>
-                    <Add />
-                </IconButton>
-
-                <Stack>
-                    <Typography>
-                        x: {currentCoordinate?.[0]}
-                    </Typography>
-                    <Typography>
-                        y: {currentCoordinate?.[1]}
-                    </Typography>
-                </Stack>
-
-                <Typography>
-                    Z={currentZ}
-                    X={currentX}
-                    Y={currentY}
-                </Typography>
-
-                <IconButton onClick={() => submitOverlay()}>
-                    <Upload />
-                </IconButton>
-            </Stack>
-            <Stack my={1} spacing={1} direction='row' divider={<Divider orientation='vertical' flexItem />}>
-
-                <Stack flex={1} alignItems='center' justifyContent='center'>
-                    <Slider aria-label="Opacity" min={0} max={1} step={0.001} defaultValue={satelliteOpacity} value={satelliteOpacity} onChange={(_, value) => setSatelliteOpacity(Array.isArray(value) ? value[0] : value)} />
-                </Stack>
-
-                <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)}
-                >
-                    <MenuItem value={'google'}>Google</MenuItem>
-                    <MenuItem value={'yandex'}>Яндекс</MenuItem>
-                    <MenuItem value={'custom'}>Custom</MenuItem>
-                </MUISelect>
-
-
+        <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={() => {
                     fetch(`${import.meta.env.VITE_API_EMS_URL}/hello`, { method: 'GET' }).then(res => console.log(res))
                 }}>
@@ -812,14 +866,113 @@ const MapComponent = () => {
                 </IconButton>
             </Stack>
 
-            <Box>
-                <div id="map-container" ref={mapElement} style={{ width: '100%', height: '600px', maxHeight: '100%', position: 'relative', flexGrow: 1 }}></div>
-            </Box>
+            <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)}
+                    >
+                        <MenuItem value={'google'}>Google</MenuItem>
+                        <MenuItem value={'yandex'}>Яндекс</MenuItem>
+                        <MenuItem value={'custom'}>Custom</MenuItem>
+                    </MUISelect>
+                </Stack>
+
+                <Accordion disableGutters sx={{ backgroundColor: 'transparent' }} defaultExpanded>
+                    <AccordionSummary
+                        expandIcon={<ExpandMore />}
+                        aria-controls="panel1-content"
+                        id="panel1-header"
+                    >
+                        <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>
+                </Accordion>
 
-            <Stack>
-                {statusText}
             </Stack>
-        </Stack>
+
+            <Stack direction={'row'}
+                sx={{
+                    ...mapControlsStyle,
+                    bottom: '8px',
+                    left: '8px',
+                }}
+
+                divider={<Divider orientation='vertical' flexItem />}
+            >
+                <Stack>
+                    <Typography>
+                        x: {currentCoordinate?.[0]}
+                    </Typography>
+                    <Typography>
+                        y: {currentCoordinate?.[1]}
+                    </Typography>
+                </Stack>
+
+                <Typography>
+                    Z={currentZ}
+                    X={currentX}
+                    Y={currentY}
+                </Typography>
+            </Stack>
+
+            <Stack direction={'row'}
+                sx={{
+                    ...mapControlsStyle,
+                    bottom: '8px',
+                    right: '8px',
+                }}
+
+                divider={<Divider orientation='vertical' flexItem />}>
+                <Stack>
+                    {statusText}
+                </Stack>
+            </Stack>
+
+            <div
+                id="map-container"
+                ref={mapElement}
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    maxHeight: '100%',
+                    position: 'fixed',
+                    flexGrow: 1
+                }}
+            >
+            </div>
+        </Box>
     );
 };