From 66d6936e6ee2168f0dde035f3512bd260104e477 Mon Sep 17 00:00:00 2001
From: goodmice <av.sirotkin@autodrilling.ru>
Date: Thu, 18 Nov 2021 12:38:31 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D1=8B=20=D0=B8=D0=BA=D0=BE=D0=BD=D0=BA=D0=B8=20=D0=B4?=
 =?UTF-8?q?=D0=BB=D1=8F=20WellTreeSelector?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/WellTreeSelector.jsx | 121 +++++++++++++++-------------
 src/components/icons/WellIcon.tsx   |  12 +--
 src/images/ClusterIcon.svg          |  12 +++
 src/images/DepositIcon.svg          |  22 +++++
 4 files changed, 105 insertions(+), 62 deletions(-)
 create mode 100644 src/images/ClusterIcon.svg
 create mode 100644 src/images/DepositIcon.svg

diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx
index d25e114..9baf295 100644
--- a/src/components/WellTreeSelector.jsx
+++ b/src/components/WellTreeSelector.jsx
@@ -1,64 +1,73 @@
-import { useState, useEffect } from 'react'
-import { DepositService } from '../services/api'
-import LoaderPortal from './LoaderPortal'
 import { TreeSelect } from 'antd'
+import { useState, useEffect } from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'
-import { notify } from "./factory"
+import LoaderPortal from './LoaderPortal'
+import { DepositService } from '../services/api'
+import { invokeWebApiWrapperAsync } from './factory'
 import '../styles/wellTreeSelect.css'
+import WellIcon from './icons/WellIcon'
+import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg'
+import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg'
+
+export const getWellState = (idState) => idState === 1 ? 'active' : 'unknown'
+export const checkIsWellOnline = (lastTelemetryDate) => {
+    if (!lastTelemetryDate) return false
+    return Date.now() - new Date(lastTelemetryDate) < 600_000
+}
 
 export default function WellTreeSelector() {
-  const [wellsTree, setWellsTree] = useState([])
-  const [showLoader, setShowLoader] = useState(false)
-  const history = useHistory()
-  const routeMatch = useRouteMatch('/:route/:id')
+    const [wellsTree, setWellsTree] = useState([])
+    const [showLoader, setShowLoader] = useState(false)
+    const history = useHistory()
+    const routeMatch = useRouteMatch('/:route/:id')
 
-  const updateWellsList = async () => {
-    setShowLoader(true)
-    try {
-      const deposits = await DepositService.getDeposits()
-      const wellsTree = deposits.map(deposit =>({
-        title: deposit.caption,
-        key: `/deposit/${deposit.id}`,
-        value: `/deposit/${deposit.id}`,
-        children: deposit.clusters.map(cluster => ({
-          title: cluster.caption,
-          key: `/cluster/${cluster.id}`,
-          value: `/cluster/${cluster.id}`,
-          children: cluster.wells.map(well => ({
-            title: well.caption,
-            key: `/well/${well.id}`,
-            value: `/well/${well.id}`,
-          })),
-        })),
-      }))
-      setWellsTree(wellsTree)
-    }
-    catch (e) {
-      notify('Не удалось загрузить список скважин', 'error')
-      console.error(`${e.message}`)
-    }
-    setShowLoader(false)
-  }
+    useEffect(() => invokeWebApiWrapperAsync(
+        async () => {
+            const deposits = await DepositService.getDeposits()
+            const wellsTree = deposits.map(deposit =>({
+                title: deposit.caption,
+                key: `/deposit/${deposit.id}`,
+                value: `/deposit/${deposit.id}`,
+                icon: <DepositIcon width={24} height={24}/>,
+                children: deposit.clusters.map(cluster => ({
+                    title: cluster.caption,
+                    key: `/cluster/${cluster.id}`,
+                    value: `/cluster/${cluster.id}`,
+                    icon: <ClusterIcon width={24} height={24}/>,
+                    children: cluster.wells.map(well => ({
+                        title: well.caption,
+                        key: `/well/${well.id}`,
+                        value: `/well/${well.id}`,
+                        icon: <WellIcon
+                            width={24}
+                            height={24}
+                            state={getWellState(well.idState)}
+                            online={checkIsWellOnline(well.lastTelemetryDate)}
+                        />
+                    })),
+                })),
+            }))
+            setWellsTree(wellsTree)
+        },
+        setShowLoader,
+        `Не удалось загрузить список скважин`
+    ), [])
 
-  useEffect(() => { updateWellsList() }, [])
+    const onSelect = (value) => value && history.push(value)
 
-  const onSelect = (value, node) => {
-    if (value)
-      history.push(value);
-  }
-
-  return (
-    <LoaderPortal show={showLoader}>
-      <TreeSelect
-        className='header-tree-select'
-        bordered={false}
-        dropdownMatchSelectWidth={false}
-        placeholder='Выберите месторождение'
-        treeData={wellsTree}
-        treeDefaultExpandAll
-        onSelect={onSelect}
-        value = {routeMatch?.url}
-      />
-    </LoaderPortal>
-  )
-}
\ No newline at end of file
+    return (
+        <LoaderPortal show={showLoader}>
+            <TreeSelect
+                treeIcon
+                className={'header-tree-select'}
+                bordered={false}
+                dropdownMatchSelectWidth={false}
+                placeholder={'Выберите месторождение'}
+                treeData={wellsTree}
+                treeDefaultExpandAll
+                onSelect={onSelect}
+                value = {routeMatch?.url}
+            />
+        </LoaderPortal>
+    )
+}
diff --git a/src/components/icons/WellIcon.tsx b/src/components/icons/WellIcon.tsx
index 02ddfc0..7622d7a 100644
--- a/src/components/icons/WellIcon.tsx
+++ b/src/components/icons/WellIcon.tsx
@@ -17,9 +17,9 @@ interface WellIconProps {
 
 const defaultColors: WellIconColors = {
     online: 'red',
-    active: 'green',
-    inactive: 'gainsboro',
-    unknown: 'gainsboro',
+    active: 'black',
+    inactive: 'gray',
+    unknown: 'gray',
 }
 
 const defaultProps: WellIconProps = {
@@ -57,9 +57,9 @@ export const WellIcon = React.memo(({ width, height, state, online, colors, ...o
             </g>
             {online && ( // Полоски, показывающие наличие свежей телеметрии
                 <g stroke={colors.online}>
-                    <path d={'m18 0.066a2 2 0 0 1 0.14 1.7 2 2 0 0 1-1.2 1.2'}/>
-                    <path d={'m20 0.04a3 3 0 0 1-1.8 3.8'}/>
-                    <path d={'m20 0.031a4 4 0 0 1-2.5 4.8'}/>
+                    <path d="m18.4 0.0662a2 2 0 0 1 0.141 1.7 2 2 0 0 1-1.22 1.19"/>
+                    <path d="m19.5 0.0402a3 3 0 0 1-1.79 3.85"/>
+                    <path d="m20.5 0.031a4 4 0 0 1-2.5 4.79"/>
                 </g>
             )}
         </svg>
diff --git a/src/images/ClusterIcon.svg b/src/images/ClusterIcon.svg
new file mode 100644
index 0000000..d105219
--- /dev/null
+++ b/src/images/ClusterIcon.svg
@@ -0,0 +1,12 @@
+<svg width="20.5mm" height="20.5mm" version="1.1" viewBox="0 0 20.5 20.5" xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width=".855" stroke="currentColor">
+  <g stroke="gray" stroke-width="1.4">
+    <path d="m8.5 4.5v6"/>
+    <path d="m2.5 4.5 6 6"/>
+    <path d="m14.5 4.5-6 6"/>
+    <path d="m8.5 14.5v6"/>
+  </g>
+  <circle cx="2.5" cy="2.5" r="2.07"/>
+  <circle cx="8.5" cy="2.5" r="2.07"/>
+  <circle cx="14.5" cy="2.5" r="2.07"/>
+  <circle cx="8.5" cy="12.5" r="2.07"/>
+</svg>
diff --git a/src/images/DepositIcon.svg b/src/images/DepositIcon.svg
new file mode 100644
index 0000000..9f2f7cf
--- /dev/null
+++ b/src/images/DepositIcon.svg
@@ -0,0 +1,22 @@
+<svg
+  width="50mm"
+  height="50mm"
+  version="1.1"
+  viewBox="0 0 50 50"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke-opacity="30%"
+  stroke-width="2.9"
+  stroke="currentColor"
+  fill="currentColor"
+>
+  <g stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="m33.2 39.2 3.6 6.24"/>
+    <path d="m13.2 4.6 3.6 6.24"/>
+    <path d="m16.8 39.2-3.6 6.24"/>
+    <path d="m36.8 4.6-3.6 6.24"/>
+    <path d="m48.6 25h-7.2"/>
+    <path d="m8.65 25h-7.2"/>
+    <path transform="matrix(.29 0 0 .29 -2.87 12.6)" d="m68 91.8-28.2-48.9 28.2-48.9 56.4-1e-7 28.2 48.9-28.2 48.9z" stroke-width="10" stroke-opacity="100%"/>
+  </g>
+  <path d="m24.9 17.3 4.55 7.86c3 6.93-4.45 7.55-4.45 7.55s-7.35-0.0621-4.45-7.55z"/>
+</svg>