diff --git a/src/pages/Deposit/Map.jsx b/src/pages/Deposit/Map.jsx index 911c137..6aaf591 100644 --- a/src/pages/Deposit/Map.jsx +++ b/src/pages/Deposit/Map.jsx @@ -1,13 +1,16 @@ import { memo, useMemo, useCallback } from 'react' import { Link, useLocation } from 'react-router-dom' import { Map as PigeonMap, Overlay } from 'pigeon-maps' -import { Popover, Badge } from 'antd' +import { Popover, Button } from 'antd' -import { useDepositList } from '@asb/context' -import { PointerIcon } from '@components/icons' +import { useDepositList, useLayoutProps } from '@asb/context' import { limitValue, withPermissions } from '@utils' -import '@styles/index.css' +import { ClusterMapIcon } from '@images/pages/deposit/ClusterMapIcon' +import { ReactComponent as MapPointer } from '@images/pages/deposit/MapPointer.svg' +import { ReactComponent as WellMapIcon } from '@images/pages/deposit/WellMapIcon.svg' + +import '@styles/pages/deposit_map.less' const zoomLimit = limitValue(5, 15) @@ -39,18 +42,19 @@ const calcViewParams = (clusters) => { const Map = memo(() => { const deposits = useDepositList() const location = useLocation() + const { openWellTreeSelector } = useLayoutProps() - const makeDepositLinks = useCallback((clusters) => ( + const makeClusterLinks = useCallback((wells) => (
- {clusters.map(cluster => ( + {wells.map(well => ( -
{cluster.caption}
+
{well.caption}
))}
@@ -61,31 +65,39 @@ const Map = memo(() => { return (
- {deposits.map(deposit => { - const anchor = [deposit.latitude, deposit.longitude] - const links = makeDepositLinks(deposit.clusters) + {deposits.map(deposit => deposit.clusters.map(cluster => { + const anchor = [cluster.latitude, cluster.longitude] + const count = cluster.wells.length + const title = `${deposit.caption} / ${cluster.caption}` + const links = makeClusterLinks(cluster.wells) return ( - + - {deposit.caption} + + {title} )} > -
- - - +
+ {count <= 1 ? ( + + ) : ( + + )}
) - })} + }))} +
) }) diff --git a/src/styles/pages/deposit_map.less b/src/styles/pages/deposit_map.less new file mode 100644 index 0000000..6291307 --- /dev/null +++ b/src/styles/pages/deposit_map.less @@ -0,0 +1,47 @@ +.deposit-page { + @bg-color: #232323; + + height: 100vh; + overflow: hidden; + + & .pigeon-tiles-box > .pigeon-tiles > * { + filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); + background: @bg-color !important; + } + + & .pigeon-attribution { + background: fade(@bg-color, 70%) !important; + color: white !important; + } + + & .dd-deposit-open-selector-btn { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + padding: 10px 25px; + color: white; + font-weight: 700; + font-size: 16px; + font-style: normal; + position: absolute; + gap: 10px; + top: 35px; + right: 60px; + border: 1px solid #4A4A4A; + background: @bg-color; + border-radius: 6px; + box-sizing: border-box; + transition: all .1s ease-in-out; + + &:hover { + color: @bg-color; + background: white; + } + + &:active { + background: rgba(255,255,255,.6); + color: @bg-color; + } + } +}