forked from VinokurovVE/tests
Map caching in Redis
This commit is contained in:
cracklesparkle
27
client/package-lock.json
generated
27
client/package-lock.json
generated
@ -28,6 +28,7 @@
|
||||
"file-type": "^19.0.0",
|
||||
"ol": "^10.0.0",
|
||||
"postcss": "^8.4.38",
|
||||
"proj4": "^2.12.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.52.0",
|
||||
@ -36,6 +37,7 @@
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/proj4": "^2.5.5",
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||
@ -3743,6 +3745,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
|
||||
"integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
|
||||
},
|
||||
"node_modules/@types/proj4": {
|
||||
"version": "2.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.5.tgz",
|
||||
"integrity": "sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
|
||||
@ -7661,6 +7669,11 @@
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/mgrs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
|
||||
"integrity": "sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA=="
|
||||
},
|
||||
"node_modules/micromatch": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
|
||||
@ -8501,6 +8514,15 @@
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/proj4": {
|
||||
"version": "2.12.0",
|
||||
"resolved": "https://registry.npmjs.org/proj4/-/proj4-2.12.0.tgz",
|
||||
"integrity": "sha512-cQJxcVX7+fmAhOxoazKgk76GkGYQ5HcLod4rdy2MizhPvLdrZQJThxsHoz/TjjdxUvTm/rbozMgE0q9mdXKWIw==",
|
||||
"dependencies": {
|
||||
"mgrs": "1.0.0",
|
||||
"wkt-parser": "^1.3.3"
|
||||
}
|
||||
},
|
||||
"node_modules/prop-types": {
|
||||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
@ -10485,6 +10507,11 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/wkt-parser": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz",
|
||||
"integrity": "sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw=="
|
||||
},
|
||||
"node_modules/word-wrap": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
|
||||
|
||||
@ -31,6 +31,7 @@
|
||||
"file-type": "^19.0.0",
|
||||
"ol": "^10.0.0",
|
||||
"postcss": "^8.4.38",
|
||||
"proj4": "^2.12.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.52.0",
|
||||
@ -39,6 +40,7 @@
|
||||
"zustand": "^4.5.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/proj4": "^2.5.5",
|
||||
"@types/react": "^18.2.66",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@typescript-eslint/eslint-plugin": "^7.2.0",
|
||||
@ -54,4 +56,4 @@
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vite-plugin-pwa": "^0.20.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
41
client/public/sakha_republic.geojson
Normal file
41
client/public/sakha_republic.geojson
Normal file
File diff suppressed because one or more lines are too long
@ -73,7 +73,7 @@ export default function ServersView() {
|
||||
)}
|
||||
/>
|
||||
),
|
||||
width: 200
|
||||
flex: 1
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@ -22,20 +22,20 @@ import {
|
||||
} from '@mui/x-data-grid';
|
||||
|
||||
interface EditToolbarProps {
|
||||
setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
|
||||
setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void
|
||||
setRowModesModel: (
|
||||
newModel: (oldModel: GridRowModesModel) => GridRowModesModel,
|
||||
) => void;
|
||||
columns: GridColDef[];
|
||||
autoComplete?: React.ReactElement | null;
|
||||
) => void
|
||||
columns: GridColDef[]
|
||||
autoComplete?: React.ReactElement | null
|
||||
}
|
||||
|
||||
function EditToolbar(props: EditToolbarProps) {
|
||||
const { setRows, setRowModesModel, columns, autoComplete } = props;
|
||||
const { setRows, setRowModesModel, columns, autoComplete } = props
|
||||
|
||||
const handleClick = () => {
|
||||
const id = Date.now().toString(36)
|
||||
const newValues: any = {};
|
||||
const newValues: any = {}
|
||||
|
||||
columns.forEach(column => {
|
||||
if (column.type === 'number') {
|
||||
@ -59,7 +59,7 @@ function EditToolbar(props: EditToolbarProps) {
|
||||
setRowModesModel((oldModel) => ({
|
||||
...oldModel,
|
||||
[id]: { mode: GridRowModes.Edit, fieldToFocus: columns[0].field },
|
||||
}));
|
||||
}))
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@ -3,34 +3,124 @@ import GeoJSON from 'ol/format/GeoJSON'
|
||||
import 'ol/ol.css'
|
||||
import Map from 'ol/Map'
|
||||
import View from 'ol/View'
|
||||
import { Draw, Modify, Snap } from 'ol/interaction'
|
||||
import { OSM, Vector as VectorSource } from 'ol/source'
|
||||
import { Draw, Modify, Select, Snap, Translate } from 'ol/interaction'
|
||||
import { OSM, Source, Vector as VectorSource, XYZ } from 'ol/source'
|
||||
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
|
||||
import { transform, transformExtent } from 'ol/proj'
|
||||
import { Divider, IconButton, Stack } from '@mui/material'
|
||||
import { Adjust, Api, CircleOutlined, RectangleOutlined, Timeline, Undo, Warning } from '@mui/icons-material'
|
||||
import { get, Projection, transform, transformExtent } from 'ol/proj'
|
||||
import { Divider, IconButton, Slider, Stack, Select as MUISelect, MenuItem, Container, Box } from '@mui/material'
|
||||
import { Adjust, Api, CircleOutlined, DoubleArrow, FeaturedVideoSharp, Handyman, OpenWith, RectangleOutlined, Timeline, Undo, Warning } from '@mui/icons-material'
|
||||
import { Type } from 'ol/geom/Geometry'
|
||||
import { altKeyOnly, click, doubleClick, noModifierKeys, platformModifierKey, pointerMove, shiftKeyOnly, singleClick } from 'ol/events/condition'
|
||||
import Feature, { FeatureLike } from 'ol/Feature'
|
||||
import Style from 'ol/style/Style'
|
||||
import Fill from 'ol/style/Fill'
|
||||
import Stroke from 'ol/style/Stroke'
|
||||
import { FlatStyleLike } from 'ol/style/flat'
|
||||
import { SatelliteMapsProvider } from '../../interfaces/map'
|
||||
import Tile from 'ol/Tile'
|
||||
import ImageTile from 'ol/ImageTile'
|
||||
import { createXYZ, TileGrid } from 'ol/tilegrid'
|
||||
import { TileCoord } from 'ol/tilecoord'
|
||||
import { register } from 'ol/proj/proj4'
|
||||
import proj4 from 'proj4'
|
||||
|
||||
const MapComponent = () => {
|
||||
proj4.defs('EPSG:3395', '+proj=merc +lon_0=0 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs')
|
||||
register(proj4);
|
||||
const yandexProjection = get('EPSG:3395')?.setExtent([-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]) || 'EPSG:3395'
|
||||
|
||||
|
||||
const mapElement = useRef<HTMLDivElement | null>(null)
|
||||
const [currentTool, setCurrentTool] = useState<Type>('Point')
|
||||
const [currentTool, setCurrentTool] = useState<Type | null>(null)
|
||||
|
||||
const map = useRef<Map | null>(null)
|
||||
const source = useRef<VectorSource>(new VectorSource())
|
||||
|
||||
const [satMapsProvider, setSatMapsProvider] = useState<SatelliteMapsProvider>('yandex')
|
||||
|
||||
const gMapsSatSource = useRef<XYZ>(new XYZ({
|
||||
//url: `https://khms2.google.com/kh/v=984?x={x}&y={y}&z={z}`,
|
||||
url: `http://localhost:5000/tile/google/{z}/{x}/{y}`,
|
||||
attributions: 'Map data © Google'
|
||||
}))
|
||||
|
||||
const yMapsSatSource = useRef<XYZ>(new XYZ({
|
||||
//url: `https://sat0{1-4}.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}&scale=1&lang=ru_RU&client_id=yandex-web-maps`,
|
||||
url: `https://core-sat.maps.yandex.net/tiles?l=sat&x={x}&y={y}&z={z}&scale=1&lang=ru_RU`,
|
||||
attributions: 'Map data © Yandex',
|
||||
projection: yandexProjection,
|
||||
}))
|
||||
|
||||
const satLayer = useRef<TileLayer>(new TileLayer({
|
||||
source: gMapsSatSource.current,
|
||||
}))
|
||||
|
||||
const draw = useRef<Draw | null>(null)
|
||||
const snap = useRef<Snap | null>(null)
|
||||
const selectFeature = useRef<Select | null>(null)
|
||||
|
||||
const drawingLayer = useRef<VectorLayer | null>(null)
|
||||
const drawingLayerSource = useRef<VectorSource>(new VectorSource())
|
||||
|
||||
const regionsLayer = useRef<VectorLayer>(new VectorLayer({
|
||||
source: new VectorSource({
|
||||
url: 'sakha_republic.geojson',
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: new Style({
|
||||
stroke: new Stroke({
|
||||
color: 'blue',
|
||||
width: 1,
|
||||
}),
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.1)',
|
||||
}),
|
||||
}),
|
||||
}))
|
||||
|
||||
const selectStyle = new Style({
|
||||
fill: new Fill({
|
||||
color: 'rgba(0, 0, 255, 0.3)',
|
||||
}),
|
||||
stroke: new Stroke({
|
||||
color: 'rgba(255, 255, 255, 0.7)',
|
||||
width: 2,
|
||||
}),
|
||||
})
|
||||
|
||||
const selectedRegion = useRef<Feature | null>(null)
|
||||
|
||||
const geoLayer = useRef<VectorLayer | null>(null)
|
||||
|
||||
const geoLayerSource = useRef<VectorSource>(new VectorSource({
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
format: new GeoJSON(),
|
||||
}))
|
||||
|
||||
const baseLayer = useRef<TileLayer | null>(null)
|
||||
|
||||
const geoLayerStyle: FlatStyleLike = {
|
||||
'fill-color': ['string', ['get', 'COLOR'], '#eee'],
|
||||
}
|
||||
|
||||
const drawingLayerStyle: FlatStyleLike = {
|
||||
'fill-color': 'rgba(255, 255, 255, 0.2)',
|
||||
'stroke-color': '#ffcc33',
|
||||
'stroke-width': 2,
|
||||
'circle-radius': 7,
|
||||
'circle-fill-color': '#ffcc33',
|
||||
}
|
||||
|
||||
const addInteractions = () => {
|
||||
draw.current = new Draw({
|
||||
source: source.current,
|
||||
type: currentTool,
|
||||
})
|
||||
map?.current?.addInteraction(draw.current)
|
||||
snap.current = new Snap({ source: source.current })
|
||||
map?.current?.addInteraction(snap.current)
|
||||
if (currentTool) {
|
||||
draw.current = new Draw({
|
||||
source: drawingLayerSource.current,
|
||||
type: currentTool,
|
||||
condition: noModifierKeys
|
||||
})
|
||||
map?.current?.addInteraction(draw.current)
|
||||
snap.current = new Snap({ source: drawingLayerSource.current })
|
||||
map?.current?.addInteraction(snap.current)
|
||||
}
|
||||
}
|
||||
|
||||
// Function to save features to localStorage
|
||||
@ -41,6 +131,8 @@ const MapComponent = () => {
|
||||
const featuresJSON = geoJSON.writeFeatures(features)
|
||||
localStorage.setItem('savedFeatures', featuresJSON)
|
||||
}
|
||||
|
||||
console.log(drawingLayer.current?.getSource()?.getFeatures())
|
||||
}
|
||||
|
||||
// Function to load features from localStorage
|
||||
@ -51,40 +143,37 @@ const MapComponent = () => {
|
||||
const features = geoJSON.readFeatures(savedFeatures, {
|
||||
featureProjection: 'EPSG:4326', // Ensure the projection is correct
|
||||
})
|
||||
source.current?.addFeatures(features) // Add features to the vector source
|
||||
drawingLayerSource.current?.addFeatures(features) // Add features to the vector source
|
||||
//drawingLayer.current?.getSource()?.changed()
|
||||
}
|
||||
}
|
||||
|
||||
const handleToolSelect = (tool: Type) => {
|
||||
if (currentTool == tool) {
|
||||
setCurrentTool(null)
|
||||
} else {
|
||||
setCurrentTool(tool)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const geoLayer = new VectorLayer({
|
||||
geoLayer.current = new VectorLayer({
|
||||
background: '#1a2b39',
|
||||
source: new VectorSource({
|
||||
url: 'https://openlayers.org/data/vector/ecoregions.json',
|
||||
format: new GeoJSON(),
|
||||
}),
|
||||
style: {
|
||||
'fill-color': ['string', ['get', 'COLOR'], '#eee'],
|
||||
},
|
||||
source: geoLayerSource.current,
|
||||
style: geoLayerStyle,
|
||||
})
|
||||
|
||||
const raster = new TileLayer({
|
||||
baseLayer.current = new TileLayer({
|
||||
source: new OSM(),
|
||||
})
|
||||
|
||||
drawingLayer.current = new VectorLayer({
|
||||
source: source.current,
|
||||
style: {
|
||||
'fill-color': 'rgba(255, 255, 255, 0.2)',
|
||||
'stroke-color': '#ffcc33',
|
||||
'stroke-width': 2,
|
||||
'circle-radius': 7,
|
||||
'circle-fill-color': '#ffcc33',
|
||||
},
|
||||
source: drawingLayerSource.current,
|
||||
style: drawingLayerStyle,
|
||||
})
|
||||
|
||||
// Center coordinates of Yakutia in EPSG:3857
|
||||
const center = transform([129.7694, 66.9419], 'EPSG:4326', 'EPSG:3857')
|
||||
const center = transform([129.7578941, 62.030804], 'EPSG:4326', 'EPSG:3857')
|
||||
|
||||
// Extent for Yakutia in EPSG:4326
|
||||
const extent4326 = [105.0, 55.0, 170.0, 75.0] // Approximate bounding box
|
||||
@ -92,22 +181,64 @@ const MapComponent = () => {
|
||||
const extent = transformExtent(extent4326, 'EPSG:4326', 'EPSG:3857')
|
||||
|
||||
map.current = new Map({
|
||||
layers: [geoLayer, raster, drawingLayer.current],
|
||||
layers: [baseLayer.current, satLayer.current, regionsLayer.current, drawingLayer.current],
|
||||
target: mapElement.current as HTMLDivElement,
|
||||
view: new View({
|
||||
center,
|
||||
zoom: 4,
|
||||
extent,
|
||||
zoom: 2,
|
||||
extent: [
|
||||
11388546.533293726,
|
||||
7061866.113051185,
|
||||
18924313.434856508,
|
||||
13932243.11199202
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
const modify = new Modify({ source: source.current })
|
||||
const modify = new Modify({ source: drawingLayerSource.current })
|
||||
map.current.addInteraction(modify)
|
||||
|
||||
addInteractions()
|
||||
selectFeature.current = new Select({
|
||||
condition: function (mapBrowserEvent) {
|
||||
return click(mapBrowserEvent) && shiftKeyOnly(mapBrowserEvent);
|
||||
},
|
||||
})
|
||||
map.current.addInteraction(selectFeature.current)
|
||||
|
||||
selectFeature.current.on('select', (e) => {
|
||||
const selectedFeatures = e.selected
|
||||
|
||||
console.log(selectedFeatures)
|
||||
|
||||
if (selectedFeatures.length > 0) {
|
||||
selectedFeatures.forEach((feature) => {
|
||||
drawingLayerSource.current?.removeFeature(feature)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
loadFeatures()
|
||||
|
||||
map.current.on('pointermove', function (e) {
|
||||
if (selectedRegion.current !== null) {
|
||||
selectedRegion.current.setStyle(undefined)
|
||||
selectedRegion.current = null
|
||||
}
|
||||
|
||||
if (map.current && selectStyle !== null) {
|
||||
map.current.forEachFeatureAtPixel(e.pixel, function (f) {
|
||||
selectedRegion.current = f as Feature
|
||||
|
||||
selectedRegion.current.setStyle(selectStyle)
|
||||
|
||||
if (f.get('district')) {
|
||||
setStatusText(f.get('district'))
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
map?.current?.setTarget(undefined)
|
||||
}
|
||||
@ -118,12 +249,61 @@ const MapComponent = () => {
|
||||
if (draw.current) map?.current?.removeInteraction(draw.current)
|
||||
if (snap.current) map?.current?.removeInteraction(snap.current)
|
||||
addInteractions()
|
||||
} else {
|
||||
if (draw.current) map?.current?.removeInteraction(draw.current)
|
||||
if (snap.current) map?.current?.removeInteraction(snap.current)
|
||||
}
|
||||
}, [currentTool])
|
||||
|
||||
const [satelliteOpacity, setSatelliteOpacity] = useState<number>(0)
|
||||
|
||||
const [statusText, setStatusText] = useState('')
|
||||
|
||||
const selected = useRef<FeatureLike | null>(null)
|
||||
|
||||
// Visibility setting
|
||||
useEffect(() => {
|
||||
satLayer.current?.setOpacity(satelliteOpacity)
|
||||
|
||||
if (satelliteOpacity == 0) {
|
||||
baseLayer.current?.setVisible(true)
|
||||
satLayer.current?.setVisible(false)
|
||||
} if (satelliteOpacity == 1) {
|
||||
baseLayer.current?.setVisible(false)
|
||||
satLayer.current?.setVisible(true)
|
||||
} else if (satelliteOpacity > 0 && satelliteOpacity < 1) {
|
||||
baseLayer.current?.setVisible(true)
|
||||
satLayer.current?.setVisible(true)
|
||||
}
|
||||
}, [satelliteOpacity])
|
||||
|
||||
// Satellite tiles setting
|
||||
useEffect(() => {
|
||||
satLayer.current?.setSource(satMapsProvider == 'google' ? gMapsSatSource.current : satMapsProvider == 'yandex' ? yMapsSatSource.current : gMapsSatSource.current)
|
||||
satLayer.current?.getSource()?.refresh()
|
||||
}, [satMapsProvider])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Stack flex={1} flexDirection='column'>
|
||||
<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>
|
||||
</MUISelect>
|
||||
|
||||
|
||||
<IconButton onClick={() => {
|
||||
fetch(`${import.meta.env.VITE_API_EMS_URL}/hello`, { method: 'GET' }).then(res => console.log(res))
|
||||
}}>
|
||||
@ -145,30 +325,43 @@ const MapComponent = () => {
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Point' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => setCurrentTool('Point')}>
|
||||
onClick={() => handleToolSelect('Point')}>
|
||||
<Adjust />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'LineString' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => setCurrentTool('LineString')}>
|
||||
onClick={() => handleToolSelect('LineString')}>
|
||||
<Timeline />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Polygon' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => setCurrentTool('Polygon')}>
|
||||
onClick={() => handleToolSelect('Polygon')}>
|
||||
<RectangleOutlined />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
sx={{ backgroundColor: currentTool === 'Circle' ? 'Highlight' : 'transparent' }}
|
||||
onClick={() => setCurrentTool('Circle')}>
|
||||
onClick={() => handleToolSelect('Circle')}>
|
||||
<CircleOutlined />
|
||||
</IconButton>
|
||||
|
||||
<IconButton
|
||||
onClick={() => map?.current?.addInteraction(new Translate())}
|
||||
>
|
||||
<OpenWith />
|
||||
</IconButton>
|
||||
</Stack>
|
||||
<div ref={mapElement} style={{ width: '100%', height: '400px' }}></div>
|
||||
</div>
|
||||
|
||||
<Box>
|
||||
<div id="map-container" ref={mapElement} style={{ width: '100%', height: '500px', maxHeight: '100%', position: 'relative', flexGrow: 1 }}></div>
|
||||
</Box>
|
||||
|
||||
<Stack>
|
||||
{statusText}
|
||||
</Stack>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,12 +1,16 @@
|
||||
import useSWR from "swr";
|
||||
import useSWR, { SWRConfiguration } from "swr";
|
||||
import RoleService from "../services/RoleService";
|
||||
import UserService from "../services/UserService";
|
||||
import { fetcher } from "../http/axiosInstance";
|
||||
import { fileTypeFromBlob } from "file-type/core";
|
||||
import { BASE_URL } from "../constants";
|
||||
|
||||
const swrOptions: SWRConfiguration = {
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
|
||||
export function useRoles() {
|
||||
const { data, error, isLoading } = useSWR(`/auth/roles`, RoleService.getRoles)
|
||||
const { data, error, isLoading } = useSWR(`/auth/roles`, RoleService.getRoles, swrOptions)
|
||||
|
||||
return {
|
||||
roles: data?.data,
|
||||
@ -16,7 +20,7 @@ export function useRoles() {
|
||||
}
|
||||
|
||||
export function useUsers() {
|
||||
const { data, error, isLoading } = useSWR(`/auth/user`, UserService.getUsers)
|
||||
const { data, error, isLoading } = useSWR(`/auth/user`, UserService.getUsers, swrOptions)
|
||||
|
||||
return {
|
||||
users: data?.data,
|
||||
@ -26,7 +30,7 @@ export function useUsers() {
|
||||
}
|
||||
|
||||
export function useCompanies(limit?: number, offset?: number) {
|
||||
const { data, error, isLoading } = useSWR(`/info/companies?limit=${limit || 10}&offset=${offset || 0}`, fetcher)
|
||||
const { data, error, isLoading } = useSWR(`/info/companies?limit=${limit || 10}&offset=${offset || 0}`, fetcher, swrOptions)
|
||||
|
||||
return {
|
||||
companies: data,
|
||||
@ -39,9 +43,7 @@ export function useFolders(limit?: number, offset?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/info/document_folder?limit=${limit || 10}&offset=${offset || 0}`,
|
||||
fetcher,
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -55,9 +57,7 @@ export function useDocuments(folder_id?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
folder_id ? `/info/documents/${folder_id}` : null,
|
||||
fetcher,
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -71,9 +71,7 @@ export function useDownload(folder_id?: number | null, id?: number | null) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
folder_id && id ? `/info/document/${folder_id}&${id}` : null,
|
||||
folder_id && id ? (url) => fetcher(url, BASE_URL.info, "blob") : null,
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -87,9 +85,7 @@ export function useFileType(fileName?: string | null, file?: Blob | null) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
fileName && file ? `/filetype/${fileName}` : null,
|
||||
file ? () => fileTypeFromBlob(file) : null,
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -103,9 +99,7 @@ export function useReport(city_id?: number | null) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
city_id ? `/info/reports/${city_id}?to_export=false` : null,
|
||||
(url) => fetcher(url, BASE_URL.info),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -119,9 +113,7 @@ export function useReportExport(city_id?: number | null, to_export?: boolean) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
city_id && to_export ? `/info/reports/${city_id}?to_export=${to_export}` : null,
|
||||
(url) => fetcher(url, BASE_URL.info, 'blob'),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -138,9 +130,7 @@ export function useAddress(limit?: number, page?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/general/address?limit=${limit || 10}&page=${page || 1}`,
|
||||
(url) => fetcher(url, BASE_URL.fuel),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -154,9 +144,7 @@ export function useRegions(limit?: number, page?: number, search?: string | null
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/general/regions?limit=${limit || 10}&page=${page || 1}${search ? `&search=${search}` : ''}`,
|
||||
(url) => fetcher(url, BASE_URL.fuel),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -170,9 +158,7 @@ export function useCities(limit?: number, page?: number, search?: string | null)
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/general/cities?limit=${limit || 10}&page=${page || 1}${search ? `&search=${search}` : ''}`,
|
||||
(url) => fetcher(url, BASE_URL.fuel),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -186,9 +172,7 @@ export function useBoilers(limit?: number, page?: number, search?: string) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
`/general/boilers?limit=${limit || 10}&page=${page || 1}${search ? `&search=${search}` : ''}`,
|
||||
(url) => fetcher(url, BASE_URL.fuel),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -204,9 +188,7 @@ export function useServers(region_id?: number | null, offset?: number, limit?: n
|
||||
const { data, error, isLoading } = useSWR(
|
||||
region_id ? `/api/servers?region_id=${region_id}&offset=${offset || 0}&limit=${limit || 10}` : `/api/servers?offset=${offset || 0}&limit=${limit || 10}`,
|
||||
(url: string) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -220,9 +202,7 @@ export function useServersInfo(region_id?: number, offset?: number, limit?: numb
|
||||
const { data, error, isLoading } = useSWR(
|
||||
region_id ? `/api/servers_info?region_id=${region_id}&offset=${offset || 0}&limit=${limit || 10}` : `/api/servers_info?offset=${offset || 0}&limit=${limit || 10}`,
|
||||
(url: string) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -236,9 +216,7 @@ export function useServer(server_id?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
server_id ? `/api/server/${server_id}` : null,
|
||||
(url) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -252,9 +230,7 @@ export function useServerIps(server_id?: number | null, offset?: number, limit?:
|
||||
const { data, error, isLoading } = useSWR(
|
||||
server_id ? `/api/server_ips?server_id=${server_id}&offset=${offset || 0}&limit=${limit || 10}` : `/api/server_ips?offset=${offset || 0}&limit=${limit || 10}`,
|
||||
(url: string) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -270,9 +246,7 @@ export function useHardwares(server_id?: number, offset?: number, limit?: number
|
||||
const { data, error, isLoading } = useSWR(
|
||||
server_id ? `/api/hardwares?server_id=${server_id}&offset=${offset || 0}&limit=${limit || 10}` : `/api/hardwares?offset=${offset || 0}&limit=${limit || 10}`,
|
||||
(url: string) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -287,9 +261,7 @@ export function useHardware(hardware_id?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
hardware_id ? `/api/hardware/${hardware_id}` : null,
|
||||
(url) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -305,9 +277,7 @@ export function useStorages(hardware_id?: number, offset?: number, limit?: numbe
|
||||
const { data, error, isLoading } = useSWR(
|
||||
hardware_id ? `/api/storages?hardware_id=${hardware_id}&offset=${offset || 0}&limit=${limit || 10}` : `/api/storages?offset=${offset || 0}&limit=${limit || 10}`,
|
||||
(url: string) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false,
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
@ -321,9 +291,7 @@ export function useStorage(storage_id?: number) {
|
||||
const { data, error, isLoading } = useSWR(
|
||||
storage_id ? `/api/storage/${storage_id}` : null,
|
||||
(url) => fetcher(url, BASE_URL.servers),
|
||||
{
|
||||
revalidateOnFocus: false
|
||||
}
|
||||
swrOptions
|
||||
)
|
||||
|
||||
return {
|
||||
|
||||
5
client/src/interfaces/map.ts
Normal file
5
client/src/interfaces/map.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface SatelliteMapsProviders {
|
||||
google: 'google';
|
||||
yandex: 'yandex';
|
||||
}
|
||||
export type SatelliteMapsProvider = SatelliteMapsProviders[keyof SatelliteMapsProviders]
|
||||
@ -205,7 +205,7 @@ export default function DashboardLayout() {
|
||||
>
|
||||
<Toolbar />
|
||||
<Container
|
||||
maxWidth="lg"
|
||||
maxWidth={false}
|
||||
sx={{ mt: 4, mb: 4 }}
|
||||
>
|
||||
<Outlet />
|
||||
|
||||
@ -18,26 +18,35 @@ const mainTheme = createTheme(
|
||||
components: {
|
||||
MuiListItemButton: {
|
||||
defaultProps: {
|
||||
disableRipple: true
|
||||
//disableRipple: true
|
||||
}
|
||||
},
|
||||
MuiButton: {
|
||||
defaultProps: {
|
||||
disableRipple: true
|
||||
//disableRipple: true
|
||||
}
|
||||
},
|
||||
MuiButtonBase: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
//disableRipple: true,
|
||||
}
|
||||
},
|
||||
MuiButtonGroup: {
|
||||
defaultProps: {
|
||||
disableRipple: true,
|
||||
//disableRipple: true,
|
||||
}
|
||||
},
|
||||
MuiIconButton: {
|
||||
defaultProps: {
|
||||
}
|
||||
},
|
||||
MuiIcon: {
|
||||
defaultProps: {
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
ruRU
|
||||
)
|
||||
|
||||
const darkTheme = createTheme(
|
||||
@ -48,7 +57,6 @@ const darkTheme = createTheme(
|
||||
primary: { main: '#1976d2' },
|
||||
},
|
||||
},
|
||||
ruRU,
|
||||
);
|
||||
|
||||
const lightTheme = createTheme(
|
||||
@ -59,7 +67,6 @@ const lightTheme = createTheme(
|
||||
primary: { main: '#1976d2' },
|
||||
},
|
||||
},
|
||||
ruRU,
|
||||
);
|
||||
|
||||
function ThemedApp() {
|
||||
|
||||
@ -27,10 +27,10 @@ function Boilers() {
|
||||
|
||||
const boilersColumns: GridColDef[] = [
|
||||
{ field: 'id', headerName: 'ID', type: "number" },
|
||||
{ field: 'boiler_name', headerName: 'Название', type: "string" },
|
||||
{ field: 'boiler_code', headerName: 'Код', type: "string" },
|
||||
{ field: 'id_city', headerName: 'Город', type: "string" },
|
||||
{ field: 'activity', headerName: 'Активен', type: "boolean" },
|
||||
{ field: 'boiler_name', headerName: 'Название', type: "string", flex: 1 },
|
||||
{ field: 'boiler_code', headerName: 'Код', type: "string", flex: 1 },
|
||||
{ field: 'id_city', headerName: 'Город', type: "string", flex: 1 },
|
||||
{ field: 'activity', headerName: 'Активен', type: "boolean", flex: 1 },
|
||||
]
|
||||
|
||||
return (
|
||||
|
||||
@ -17,9 +17,9 @@ export default function Roles() {
|
||||
]
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
|
||||
{ field: 'name', headerName: 'Название', width: 90, editable: true },
|
||||
{ field: 'description', headerName: 'Описание', width: 90, editable: true },
|
||||
{ field: 'id', headerName: 'ID', type: "number" },
|
||||
{ field: 'name', headerName: 'Название', flex: 1, editable: true },
|
||||
{ field: 'description', headerName: 'Описание', flex: 1, editable: true },
|
||||
];
|
||||
|
||||
if (isError) return <div>Произошла ошибка при получении данных.</div>
|
||||
|
||||
@ -4,6 +4,7 @@ import ServersView from "../components/ServersView"
|
||||
import ServerIpsView from "../components/ServerIpsView"
|
||||
import ServerHardware from "../components/ServerHardware"
|
||||
import ServerStorage from "../components/ServerStorages"
|
||||
import { BarChart } from '@mui/x-charts/BarChart';
|
||||
|
||||
export default function Servers() {
|
||||
const [currentTab, setCurrentTab] = useState(0)
|
||||
@ -64,12 +65,12 @@ export default function Servers() {
|
||||
<ServerStorage />
|
||||
</CustomTabPanel>
|
||||
|
||||
{/* <BarChart
|
||||
<BarChart
|
||||
xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
|
||||
series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
|
||||
width={500}
|
||||
height={300}
|
||||
/> */}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@ -24,19 +24,19 @@ export default function Users() {
|
||||
]
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{ field: 'id', headerName: 'ID', type: "number", width: 70 },
|
||||
{ field: 'email', headerName: 'Email', width: 130, editable: true },
|
||||
{ field: 'login', headerName: 'Логин', width: 130, editable: true },
|
||||
{ field: 'phone', headerName: 'Телефон', width: 90, editable: true },
|
||||
{ field: 'name', headerName: 'Имя', width: 90, editable: true },
|
||||
{ field: 'surname', headerName: 'Фамилия', width: 90, editable: true },
|
||||
{ field: 'is_active', headerName: 'Активен', type: "boolean", width: 90, editable: true },
|
||||
{ field: 'id', headerName: 'ID', type: "number", flex: 1 },
|
||||
{ field: 'email', headerName: 'Email', flex: 1, editable: true },
|
||||
{ field: 'login', headerName: 'Логин', flex: 1, editable: true },
|
||||
{ field: 'phone', headerName: 'Телефон', flex: 1, editable: true },
|
||||
{ field: 'name', headerName: 'Имя', flex: 1, editable: true },
|
||||
{ field: 'surname', headerName: 'Фамилия', flex: 1, editable: true },
|
||||
{ field: 'is_active', headerName: 'Активен', type: "boolean", flex: 1, editable: true },
|
||||
{
|
||||
field: 'role_id',
|
||||
headerName: 'Роль',
|
||||
valueOptions: roles ? roles.map((role: IRole) => ({ label: role.name, value: role.id })) : [],
|
||||
type: 'singleSelect',
|
||||
width: 90,
|
||||
flex: 1,
|
||||
editable: true
|
||||
},
|
||||
];
|
||||
@ -78,6 +78,7 @@ export default function Users() {
|
||||
</Modal>
|
||||
|
||||
<DataGrid
|
||||
density="compact"
|
||||
autoHeight
|
||||
style={{ width: "100%" }}
|
||||
rows={users}
|
||||
|
||||
@ -1622,6 +1622,11 @@
|
||||
resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
|
||||
integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
|
||||
|
||||
"@types/proj4@^2.5.5":
|
||||
version "2.5.5"
|
||||
resolved "https://registry.npmjs.org/@types/proj4/-/proj4-2.5.5.tgz"
|
||||
integrity sha512-y4tHUVVoMEOm2nxRLQ2/ET8upj/pBmoutGxFw2LZJTQWPgWXI+cbxVEUFFmIzr/bpFR83hGDOTSXX6HBeObvZA==
|
||||
|
||||
"@types/prop-types@*", "@types/prop-types@^15.7.11":
|
||||
version "15.7.12"
|
||||
resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz"
|
||||
@ -4018,6 +4023,11 @@ merge2@^1.3.0, merge2@^1.4.1:
|
||||
resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
|
||||
integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
|
||||
|
||||
mgrs@1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz"
|
||||
integrity sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==
|
||||
|
||||
micromatch@^4.0.4, micromatch@^4.0.5:
|
||||
version "4.0.7"
|
||||
resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz"
|
||||
@ -4544,6 +4554,14 @@ process@^0.11.10:
|
||||
resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
|
||||
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
|
||||
|
||||
proj4@^2.12.0:
|
||||
version "2.12.0"
|
||||
resolved "https://registry.npmjs.org/proj4/-/proj4-2.12.0.tgz"
|
||||
integrity sha512-cQJxcVX7+fmAhOxoazKgk76GkGYQ5HcLod4rdy2MizhPvLdrZQJThxsHoz/TjjdxUvTm/rbozMgE0q9mdXKWIw==
|
||||
dependencies:
|
||||
mgrs "1.0.0"
|
||||
wkt-parser "^1.3.3"
|
||||
|
||||
prop-types@^15.6.2, prop-types@^15.8.1:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
||||
@ -5747,6 +5765,11 @@ widest-line@^4.0.1:
|
||||
dependencies:
|
||||
string-width "^5.0.1"
|
||||
|
||||
wkt-parser@^1.3.3:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.3.3.tgz"
|
||||
integrity sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==
|
||||
|
||||
word-wrap@^1.2.5:
|
||||
version "1.2.5"
|
||||
resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz"
|
||||
|
||||
Reference in New Issue
Block a user