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,35 +681,10 @@ const MapComponent = ({
|
||||
</Portal >
|
||||
}
|
||||
|
||||
|
||||
<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'>
|
||||
<DrawerBody>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxHeight: '0' }}>
|
||||
{regionsData && regionsData.map((region: IRegion) => (
|
||||
<Link key={region.id} onClick={() => {
|
||||
setSelectedRegion(id, region.id)
|
||||
map?.removeInteraction(regionSelect)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
const feature = getFeatureByEntityId(region.id, regionsLayer)
|
||||
|
||||
if (feature) {
|
||||
regionSelect.getFeatures().push(feature)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
regionSelect.getFeatures().clear()
|
||||
}}
|
||||
>{region.name}</Link>
|
||||
))}
|
||||
</div>
|
||||
</DrawerBody>
|
||||
</Drawer>}
|
||||
|
||||
<Drawer style={{ position: 'relative', height: '100%', zIndex: 1 }} open={!!selectedRegion && !selectedYear} type='inline'>
|
||||
<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) {
|
||||
@ -751,9 +726,11 @@ const MapComponent = ({
|
||||
}
|
||||
}} />
|
||||
</DrawerHeader>
|
||||
}
|
||||
|
||||
{!!selectedRegion && !selectedYear ?
|
||||
<DrawerBody>
|
||||
<div key={selectedRegion} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', 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' }}>
|
||||
@ -816,8 +793,43 @@ const MapComponent = ({
|
||||
}
|
||||
</div>
|
||||
</DrawerBody>
|
||||
</Drawer>
|
||||
:
|
||||
<DrawerBody>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{regionsData && regionsData.map((region: IRegion) => (
|
||||
<Link key={region.id} onClick={() => {
|
||||
setSelectedRegion(id, region.id)
|
||||
map?.removeInteraction(regionSelect)
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
const feature = getFeatureByEntityId(region.id, regionsLayer)
|
||||
|
||||
if (feature) {
|
||||
regionSelect.getFeatures().push(feature)
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
regionSelect.getFeatures().clear()
|
||||
}}
|
||||
>{region.name}</Link>
|
||||
))}
|
||||
</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,20 +876,7 @@ 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
|
||||
@ -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