From 12cb389a0b1d2aef1ccf4f84e2b344968634b1cb Mon Sep 17 00:00:00 2001
From: ts_salikhov <ts.salikhov@digitaldrilling.ru>
Date: Mon, 15 Aug 2022 15:55:03 +0400
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B3=D1=80=D1=83=D0=BF=D0=BF=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B0=20=D0=BA=D1=83=D1=81=D1=82=D0=BE=D0=B2=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
 =?UTF-8?q?=20/deposit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Deposit.jsx | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/pages/Deposit.jsx b/src/pages/Deposit.jsx
index 506c68f..96e1ca0 100755
--- a/src/pages/Deposit.jsx
+++ b/src/pages/Deposit.jsx
@@ -1,13 +1,14 @@
 import { Map, Overlay } from 'pigeon-maps'
 import { useState, useEffect, memo } from 'react'
 import { Link, useLocation } from 'react-router-dom'
+import { Popover, Badge } from 'antd'
 
 import { PointerIcon } from '@components/icons'
 import { LayoutPortal } from '@components/Layout'
 import LoaderPortal from '@components/LoaderPortal'
 import { invokeWebApiWrapperAsync } from '@components/factory'
 import { arrayOrDefault, limitValue, wrapPrivateComponent } from '@utils'
-import { ClusterService } from '@api'
+import { DepositService } from '@api'
 
 import '@styles/index.css'
 
@@ -42,7 +43,7 @@ const calcViewParams = (clusters) => {
 }
 
 const Deposit = memo(() => {
-  const [clustersData, setClustersData] = useState([])
+  const [depositsData, setDepositsData] = useState([])
   const [showLoader, setShowLoader] = useState(false)
   const [viewParams, setViewParams] = useState(defaultViewParams)
 
@@ -51,9 +52,9 @@ const Deposit = memo(() => {
   useEffect(() => {
       invokeWebApiWrapperAsync(
       async () => {
-        const data = await ClusterService.getClusters()
-        setClustersData(arrayOrDefault(data))
-        setViewParams(calcViewParams(data))
+        const deposits = await DepositService.getDeposits()
+        setDepositsData(arrayOrDefault(deposits))
+        setViewParams(calcViewParams(deposits))
       },
       setShowLoader,
       `Не удалось загрузить список кустов`,
@@ -66,16 +67,27 @@ const Deposit = memo(() => {
       <LoaderPortal show={showLoader}>
         <div className={'h-100vh'}>
           <Map {...viewParams}>
-            {clustersData.map(cluster => (
+            {depositsData.map(deposit => (
               <Overlay
                 width={32}
-                anchor={[cluster.latitude, cluster.longitude]}
-                key={`${cluster.latitude}  ${cluster.longitude}`}
+                anchor={[deposit.latitude, deposit.longitude]}
+                key={`${deposit.latitude}  ${deposit.longitude}`}
               >
-                <Link to={{ pathname: `/cluster/${cluster.id}`, state: { from: location.pathname }}}>
-                  <PointerIcon state={'active'} width={48} height={59} />
-                  <span>{cluster.caption}</span>
-                </Link>
+                <Popover content={
+                  <div>
+                    {deposit.clusters.map(cluster => (
+                      <Link key={cluster.id} to={{ pathname: `/cluster/${cluster.id}`, state: { from: location.pathname }}}>
+                        <div>{cluster.caption}</div>
+                      </Link>
+                    ))}
+                  </div>
+                } trigger={['click']} title={deposit.caption}>
+                  <div style={{cursor: 'pointer'}}>
+                    <Badge count={deposit.clusters.length}>
+                      <PointerIcon  state={'active'} width={48} height={59} />
+                    </Badge>
+                  </div>
+                </Popover>
               </Overlay>
             ))}
           </Map>