Map view grid
This commit is contained in:
@ -33,7 +33,7 @@ import GisService from '../../services/GisService'
|
|||||||
import MapMode from './MapMode'
|
import MapMode from './MapMode'
|
||||||
import { satMapsProviders, schemas } from '../../constants/map'
|
import { satMapsProviders, schemas } from '../../constants/map'
|
||||||
import MapPrint from './MapPrint/MapPrint'
|
import MapPrint from './MapPrint/MapPrint'
|
||||||
import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown, Tooltip, Drawer, DrawerHeader, DrawerBody, Text, Link } from '@fluentui/react-components'
|
import { Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Combobox, Option, Button, Divider, Spinner, Portal, Dropdown, Tooltip, Drawer, DrawerHeader, DrawerBody, Text, Link, List } from '@fluentui/react-components'
|
||||||
import { IRegion } from '../../interfaces/fuel'
|
import { IRegion } from '../../interfaces/fuel'
|
||||||
import { useAppStore } from '../../store/app'
|
import { useAppStore } from '../../store/app'
|
||||||
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
|
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
|
||||||
@ -604,7 +604,7 @@ const MapComponent = ({
|
|||||||
}, [selectedYear])
|
}, [selectedYear])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', position: 'relative', width: '100%', height: '100%' }}>
|
<div style={{ display: 'grid', gridTemplateRows: 'auto min-content', position: 'relative', width: '100%', height: '100%' }}>
|
||||||
<MapPrint id={id} mapElement={mapElement} />
|
<MapPrint id={id} mapElement={mapElement} />
|
||||||
|
|
||||||
{active &&
|
{active &&
|
||||||
@ -681,13 +681,121 @@ const MapComponent = ({
|
|||||||
</Portal >
|
</Portal >
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<div style={{ gridRow: '1 / span 1', display: 'grid', gridTemplateColumns: 'min-content auto', position: 'relative' }}>
|
||||||
|
<div style={{ gridColumn: '1 / span 1', width: 'min-content', height: '100%', position: 'relative', display: 'flex', zIndex: '2' }}>
|
||||||
|
<Drawer style={{ position: 'absolute', width: '300px', height: '100%', inset: 0, zIndex: 1 }} open={!selectedRegion || (!!selectedRegion && !selectedYear)} type='inline'>
|
||||||
|
{!!selectedRegion && !selectedYear &&
|
||||||
|
<DrawerHeader style={{ flexDirection: 'row' }}>
|
||||||
|
<Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
|
||||||
|
if (selectedDistrict) {
|
||||||
|
setSelectedDistrict(id, null)
|
||||||
|
districtSelect.getFeatures().clear()
|
||||||
|
regionsLayer.setOpacity(1)
|
||||||
|
} else {
|
||||||
|
setSelectedRegion(id, null)
|
||||||
|
regionSelect.getFeatures().clear()
|
||||||
|
|
||||||
<div id='mapcomponent' style={{ position: 'relative', width: '100%', height: '100%', display: 'flex' }}>
|
if (map) {
|
||||||
<div style={{ maxWidth: '30%', maxHeight: '100%' }}>
|
const extent = regionsLayer.getSource()?.getExtent()
|
||||||
{!selectedRegion &&
|
|
||||||
<Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!selectedRegion} type='inline'>
|
if (extent) {
|
||||||
|
map.getView().fit(fromExtent(extent), { duration: 100 })
|
||||||
|
regionsLayer.setOpacity(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{selectedDistrict ?
|
||||||
|
<Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
|
||||||
|
:
|
||||||
|
<Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
|
||||||
|
|
||||||
|
<Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
|
||||||
|
setSelectedYear(id, null)
|
||||||
|
setSelectedDistrict(id, null)
|
||||||
|
setSelectedRegion(id, null)
|
||||||
|
|
||||||
|
if (map) {
|
||||||
|
const extent = regionsLayer.getSource()?.getExtent()
|
||||||
|
|
||||||
|
if (extent) {
|
||||||
|
map.getView().fit(fromExtent(extent), { duration: 100 })
|
||||||
|
regionsLayer.setOpacity(1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}} />
|
||||||
|
</DrawerHeader>
|
||||||
|
}
|
||||||
|
|
||||||
|
{!!selectedRegion && !selectedYear ?
|
||||||
<DrawerBody>
|
<DrawerBody>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '0' }}>
|
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
||||||
|
{selectedDistrict ?
|
||||||
|
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||||
|
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<span>{key}</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
:
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
<div>
|
||||||
|
{selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
||||||
|
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<span>{key}</span>
|
||||||
|
<span>{value}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{districtsData && districtsData.map((district: IDistrict) => (
|
||||||
|
<Link key={district.id} onClick={() => {
|
||||||
|
setSelectedDistrict(id, district.id)
|
||||||
|
map?.removeInteraction(districtSelect)
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
const feature = getFeatureByEntityId(district.id, districtsLayer)
|
||||||
|
|
||||||
|
if (feature) {
|
||||||
|
districtSelect.getFeatures().push(feature)
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onMouseLeave={() => {
|
||||||
|
districtSelect.getFeatures().clear()
|
||||||
|
}}
|
||||||
|
>{district.name}</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
{selectedDistrict &&
|
||||||
|
<Field label="Схема" >
|
||||||
|
<Dropdown
|
||||||
|
style={{ minWidth: 'auto' }}
|
||||||
|
value={selectedYear ? selectedYear.toString() : ""}
|
||||||
|
selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
|
||||||
|
onOptionSelect={(_ev, data) => {
|
||||||
|
if (data.optionValue) {
|
||||||
|
setSelectedYear(id, Number(data.optionValue));
|
||||||
|
} else {
|
||||||
|
setSelectedYear(id, null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{schemas.map((el) => (
|
||||||
|
<Option key={el} value={el} text={el}>
|
||||||
|
{el}
|
||||||
|
</Option>
|
||||||
|
))}
|
||||||
|
</Dropdown>
|
||||||
|
</Field>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</DrawerBody>
|
||||||
|
:
|
||||||
|
<DrawerBody>
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
{regionsData && regionsData.map((region: IRegion) => (
|
{regionsData && regionsData.map((region: IRegion) => (
|
||||||
<Link key={region.id} onClick={() => {
|
<Link key={region.id} onClick={() => {
|
||||||
setSelectedRegion(id, region.id)
|
setSelectedRegion(id, region.id)
|
||||||
@ -707,117 +815,21 @@ const MapComponent = ({
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</DrawerBody>
|
</DrawerBody>
|
||||||
</Drawer>}
|
}
|
||||||
|
|
||||||
<Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!!selectedRegion && !selectedYear} type='inline'>
|
|
||||||
<DrawerHeader style={{ flexDirection: 'row' }}>
|
|
||||||
<Button icon={<ArrowLeft24Regular />} appearance='subtle' onClick={() => {
|
|
||||||
if (selectedDistrict) {
|
|
||||||
setSelectedDistrict(id, null)
|
|
||||||
districtSelect.getFeatures().clear()
|
|
||||||
regionsLayer.setOpacity(1)
|
|
||||||
} else {
|
|
||||||
setSelectedRegion(id, null)
|
|
||||||
regionSelect.getFeatures().clear()
|
|
||||||
|
|
||||||
if (map) {
|
|
||||||
const extent = regionsLayer.getSource()?.getExtent()
|
|
||||||
|
|
||||||
if (extent) {
|
|
||||||
map.getView().fit(fromExtent(extent), { duration: 100 })
|
|
||||||
regionsLayer.setOpacity(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}} />
|
|
||||||
|
|
||||||
{selectedDistrict ?
|
|
||||||
<Text weight='bold' size={500}>{getDistrictData(selectedDistrict)?.name}</Text>
|
|
||||||
:
|
|
||||||
<Text weight='bold' size={500}>{selectedRegion && getRegionData(selectedRegion)?.name}</Text>}
|
|
||||||
|
|
||||||
<Button appearance='subtle' style={{ marginLeft: 'auto' }} icon={<IconX />} onClick={() => {
|
|
||||||
setSelectedYear(id, null)
|
|
||||||
setSelectedDistrict(id, null)
|
|
||||||
setSelectedRegion(id, null)
|
|
||||||
|
|
||||||
if (map) {
|
|
||||||
const extent = regionsLayer.getSource()?.getExtent()
|
|
||||||
|
|
||||||
if (extent) {
|
|
||||||
map.getView().fit(fromExtent(extent), { duration: 100 })
|
|
||||||
regionsLayer.setOpacity(1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}} />
|
|
||||||
</DrawerHeader>
|
|
||||||
|
|
||||||
<DrawerBody>
|
|
||||||
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxHeight: '0' }}>
|
|
||||||
{selectedDistrict ?
|
|
||||||
selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
|
||||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<span>{key}</span>
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
:
|
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
||||||
<div>
|
|
||||||
{selectedRegion && Object.entries(getRegionData(selectedRegion) as IRegion).map(([key, value]) => (
|
|
||||||
<div key={key} style={{ display: 'flex', justifyContent: 'space-between' }}>
|
|
||||||
<span>{key}</span>
|
|
||||||
<span>{value}</span>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{districtsData && districtsData.map((district: IDistrict) => (
|
|
||||||
<Link key={district.id} onClick={() => {
|
|
||||||
setSelectedDistrict(id, district.id)
|
|
||||||
map?.removeInteraction(districtSelect)
|
|
||||||
}}
|
|
||||||
onMouseEnter={() => {
|
|
||||||
const feature = getFeatureByEntityId(district.id, districtsLayer)
|
|
||||||
|
|
||||||
if (feature) {
|
|
||||||
districtSelect.getFeatures().push(feature)
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
onMouseLeave={() => {
|
|
||||||
districtSelect.getFeatures().clear()
|
|
||||||
}}
|
|
||||||
>{district.name}</Link>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
|
|
||||||
{selectedDistrict &&
|
|
||||||
<Field label="Схема" >
|
|
||||||
<Dropdown
|
|
||||||
style={{ minWidth: 'auto' }}
|
|
||||||
value={selectedYear ? selectedYear.toString() : ""}
|
|
||||||
selectedOptions={[selectedYear ? selectedYear.toString() : ""]}
|
|
||||||
onOptionSelect={(_ev, data) => {
|
|
||||||
if (data.optionValue) {
|
|
||||||
setSelectedYear(id, Number(data.optionValue));
|
|
||||||
} else {
|
|
||||||
setSelectedYear(id, null);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{schemas.map((el) => (
|
|
||||||
<Option key={el} value={el} text={el}>
|
|
||||||
{el}
|
|
||||||
</Option>
|
|
||||||
))}
|
|
||||||
</Dropdown>
|
|
||||||
</Field>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</DrawerBody>
|
|
||||||
</Drawer>
|
</Drawer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div ref={mapElement} id={id} key={id} style={{ gridColumn: '2 / span 1', position: 'relative', width: '100%', height: '100%', maxHeight: '100%', zIndex: '1', filter: colorScheme === 'dark' ? 'invert(100%) hue-rotate(180deg)' : 'unset' }} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
|
||||||
|
<div>
|
||||||
|
{statusText && active && !selectedYear &&
|
||||||
|
<Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
|
||||||
|
<div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
|
||||||
|
{/* {statusText} */}
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
<div style={{ position: 'absolute', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
||||||
@ -864,21 +876,8 @@ const MapComponent = ({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id={id} key={id} style={{ position: 'relative', width: '100%', height: '100%', maxHeight: '100%', filter: colorScheme === 'dark' ? 'invert(100%) hue-rotate(180deg)' : 'unset' }} ref={mapElement} onDragOver={(e) => e.preventDefault()} onDrop={(e) => handleImageDrop(e, id)}>
|
|
||||||
<div>
|
|
||||||
{statusText && active && !selectedYear &&
|
|
||||||
<Tooltip hideDelay={0} showDelay={0} content={statusText} relationship='description' visible>
|
|
||||||
<div style={{ position: 'absolute', zIndex: 9999, userSelect: 'none', pointerEvents: 'none' }} ref={mapTooltipRef}>
|
|
||||||
{/* {statusText} */}
|
|
||||||
</div>
|
|
||||||
</Tooltip>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
{(linesValidating || figuresValidating) && (
|
{(linesValidating || figuresValidating) && (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@ -895,7 +894,7 @@ const MapComponent = ({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div style={{ display: 'flex', bottom: '0', width: '100%' }}>
|
<div style={{ gridRow: '2 / span 1', display: 'flex', bottom: '0', width: '100%' }}>
|
||||||
<MapStatusbar
|
<MapStatusbar
|
||||||
map_id={id}
|
map_id={id}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user