From b212db531f05cb5fd4ab98572a84e48d634cd7a7 Mon Sep 17 00:00:00 2001 From: goodmice Date: Fri, 19 Nov 2021 11:46:11 +0500 Subject: [PATCH] =?UTF-8?q?WellTreeSelector=20=D0=BF=D0=B5=D1=80=D0=B5?= =?UTF-8?q?=D0=BD=D0=B5=D1=81=D1=91=D0=BD=20=D0=B2=20TSX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/PageHeader.jsx | 4 +- src/components/WellTreeSelector.jsx | 73 ------------------------ src/components/WellTreeSelector.tsx | 88 +++++++++++++++++++++++++++++ src/components/icons/WellIcon.tsx | 8 ++- 4 files changed, 95 insertions(+), 78 deletions(-) delete mode 100644 src/components/WellTreeSelector.jsx create mode 100644 src/components/WellTreeSelector.tsx diff --git a/src/components/PageHeader.jsx b/src/components/PageHeader.jsx index f8b82cc..68c7731 100644 --- a/src/components/PageHeader.jsx +++ b/src/components/PageHeader.jsx @@ -13,7 +13,7 @@ export default function PageHeader({title='Мониторинг', wellsList}){ localStorage.removeItem('login') localStorage.removeItem('token') } - + return(
@@ -23,7 +23,7 @@ export default function PageHeader({title='Мониторинг', wellsList}){

{title}

- diff --git a/src/components/WellTreeSelector.jsx b/src/components/WellTreeSelector.jsx deleted file mode 100644 index 9baf295..0000000 --- a/src/components/WellTreeSelector.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import { TreeSelect } from 'antd' -import { useState, useEffect } from 'react' -import { useHistory, useRouteMatch } from 'react-router-dom' -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') - - 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: , - children: deposit.clusters.map(cluster => ({ - title: cluster.caption, - key: `/cluster/${cluster.id}`, - value: `/cluster/${cluster.id}`, - icon: , - children: cluster.wells.map(well => ({ - title: well.caption, - key: `/well/${well.id}`, - value: `/well/${well.id}`, - icon: - })), - })), - })) - setWellsTree(wellsTree) - }, - setShowLoader, - `Не удалось загрузить список скважин` - ), []) - - const onSelect = (value) => value && history.push(value) - - return ( - - - - ) -} diff --git a/src/components/WellTreeSelector.tsx b/src/components/WellTreeSelector.tsx new file mode 100644 index 0000000..cb22068 --- /dev/null +++ b/src/components/WellTreeSelector.tsx @@ -0,0 +1,88 @@ +import { TreeSelect } from 'antd' +import { useState, useEffect } from 'react' +import { useHistory, useRouteMatch } from 'react-router-dom' +import LoaderPortal from './LoaderPortal' +import { DepositService } from '../services/api' +import { invokeWebApiWrapperAsync } from './factory' +import '../styles/wellTreeSelect.css' +import { WellIcon, WellIconState } from './icons/WellIcon' +import { ReactComponent as DepositIcon } from '../images/DepositIcon.svg' +import { ReactComponent as ClusterIcon } from '../images/ClusterIcon.svg' +import { DepositDto } from '../services/api' + +export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown' +export const checkIsWellOnline = (lastTelemetryDate?: string | number | Date | null): boolean => { + if (!lastTelemetryDate) return false + return Date.now() - +new Date(lastTelemetryDate) < 600_000 +} + +interface TreeNodeData { + title?: string | null + key?: string + value?: string + icon?: React.ReactNode + children?: TreeNodeData[] +} + +export const WellTreeSelector = (): React.ReactNode => { + const [wellsTree, setWellsTree] = useState([]) + const [showLoader, setShowLoader] = useState(false) + const history = useHistory() + const routeMatch = useRouteMatch('/:route/:id') + + useEffect(() => { + invokeWebApiWrapperAsync( + async () => { + const deposits: Array = await DepositService.getDeposits() + const wellsTree: TreeNodeData[] = deposits.map(deposit =>({ + title: deposit.caption, + key: `/deposit/${deposit.id}`, + value: `/deposit/${deposit.id}`, + icon: , + children: deposit.clusters?.map(cluster => ({ + title: cluster.caption, + key: `/cluster/${cluster.id}`, + value: `/cluster/${cluster.id}`, + icon: , + children: cluster.wells?.map(well => ({ + title: well.caption, + key: `/well/${well.id}`, + value: `/well/${well.id}`, + icon: + })), + })), + })) + setWellsTree(wellsTree) + }, + setShowLoader, + `Не удалось загрузить список скважин` + ) + }, []) + + const onSelect = (value: string): void => { + if (value) history.push(value) + } + + return ( + + + + ) +} + +export default WellTreeSelector diff --git a/src/components/icons/WellIcon.tsx b/src/components/icons/WellIcon.tsx index 7622d7a..f0b7ddf 100644 --- a/src/components/icons/WellIcon.tsx +++ b/src/components/icons/WellIcon.tsx @@ -1,17 +1,19 @@ import React from 'react' -type WellIconColors = { +export type WellIconState = 'active' | 'inactive' | 'unknown' + +export type WellIconColors = { online?: string active?: string inactive?: string unknown?: string } -interface WellIconProps { +export interface WellIconProps { width?: string | number height?: string | number online?: boolean - state?: 'active' | 'inactive' | 'unknown' + state?: WellIconState colors?: WellIconColors }