refactored components

client/src/components/map/MapLayers/MapLayersSelect.tsx

@@ -0,0 +1,67 @@
+import { Button, Dropdown, Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Option } from '@fluentui/react-components';
+import { IconBoxMultiple, IconPlus, IconUpload } from '@tabler/icons-react';
+import MapLayers from './MapLayers';
+import { setSatMapsProvider, useMapStore } from '../../../store/map';
+import { satMapsProviders } from '../../../constants/map';
+import { IRectCoords, SatelliteMapsProvider } from '../../../interfaces/map';
+import GisService from '../../../services/GisService';
+import { Extent } from 'ol/extent';
+
+const MapLayersSelect = ({
+    map_id
+}: {
+    map_id: string
+}) => {
+    const { map, satMapsProvider, file, polygonExtent, rectCoords } = useMapStore().id[map_id]
+
+    // Upload map overlay
+    const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => {
+        await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(res => {
+            console.log(res)
+        })
+    }
+
+    return (
+        <Menu persistOnItemClick positioning={{ autoSize: true }}>
+            <MenuTrigger disableButtonEnhancement>
+                <MenuButton appearance='subtle' icon={<IconBoxMultiple />}>Слои</MenuButton>
+            </MenuTrigger>
+
+            <MenuPopover>
+                <MenuList style={{ padding: '1rem' }}>
+                    <Field>Настройка видимости слоёв</Field>
+
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                        <Field label="Спутниковые снимки">
+                            <Dropdown
+                                value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
+                                selectedOptions={[satMapsProvider]}
+                                onOptionSelect={(_ev, data) => {
+                                    if (data.optionValue) {
+                                        setSatMapsProvider(map_id, data.optionValue as SatelliteMapsProvider);
+                                    }
+                                }}
+                            >
+                                {satMapsProviders.map((provider) => (
+                                    <Option key={provider.value} text={provider.label} value={provider.value}>
+                                        {provider.label}
+                                    </Option>
+                                ))}
+                            </Dropdown>
+                        </Field>
+                    </div>
+                    <div style={{
+                        display: 'flex',
+                    }}>
+                        <Button icon={<IconUpload />} appearance='transparent' onClick={() => submitOverlay(file, polygonExtent, rectCoords)} />
+
+                        <Button icon={<IconPlus />} appearance='transparent' title='Добавить подложку' />
+                    </div>
+                    <MapLayers map={map} />
+                </MenuList>
+            </MenuPopover>
+        </Menu>
+    )
+}
+
+export default MapLayersSelect