Map view grid
This commit is contained in:
@ -33,7 +33,7 @@ import GisService from '../../services/GisService'
|
||||
import MapMode from './MapMode'
|
||||
import { satMapsProviders, schemas } from '../../constants/map'
|
||||
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 { useAppStore } from '../../store/app'
|
||||
import { getDistrictData, getRegionData, setDistrictsData, setRegionsData } from '../../store/regions'
|
||||
@ -604,7 +604,7 @@ const MapComponent = ({
|
||||
}, [selectedYear])
|
||||
|
||||
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} />
|
||||
|
||||
{active &&
|
||||
@ -681,13 +681,121 @@ const MapComponent = ({
|
||||
</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' }}>
|
||||
<div style={{ maxWidth: '30%', maxHeight: '100%' }}>
|
||||
{!selectedRegion &&
|
||||
<Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!selectedRegion} type='inline'>
|
||||
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>
|
||||
}
|
||||
|
||||
{!!selectedRegion && !selectedYear ?
|
||||
<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) => (
|
||||
<Link key={region.id} onClick={() => {
|
||||
setSelectedRegion(id, region.id)
|
||||
@ -707,117 +815,21 @@ const MapComponent = ({
|
||||
))}
|
||||
</div>
|
||||
</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>
|
||||
</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 style={{ position: 'absolute', display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
|
||||
@ -864,21 +876,8 @@ const MapComponent = ({
|
||||
</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>
|
||||
|
||||
|
||||
{(linesValidating || figuresValidating) && (
|
||||
<div
|
||||
style={{
|
||||
@ -895,7 +894,7 @@ const MapComponent = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: 'flex', bottom: '0', width: '100%' }}>
|
||||
<div style={{ gridRow: '2 / span 1', display: 'flex', bottom: '0', width: '100%' }}>
|
||||
<MapStatusbar
|
||||
map_id={id}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user