ia.novokshanov/asb_cloud_front
1
0
Fork 0
forked from ddrilling/asb_cloud_front
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WellTreeSelector перенесён в TSX

Browse Source
This commit is contained in:
goodmice 2021-11-19 11:46:11 +05:00
parent 92c7b0f6f7
commit b212db531f
4 changed files with 95 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/WellTreeSelector.jsx
View File

@ -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: <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,
`Не удалось загрузить список скважин`
), [])
const onSelect = (value) => value && history.push(value)
return (
<LoaderPortal show={showLoader}>
<TreeSelect
treeIcon
className={'header-tree-select'}
bordered={false}
dropdownMatchSelectWidth={false}
placeholder={'Выберите месторождение'}
treeData={wellsTree}
treeDefaultExpandAll
onSelect={onSelect}
value = {routeMatch?.url}
/>
</LoaderPortal>
)
}

88
src/components/WellTreeSelector.tsx Normal file
View File

@ -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<TreeNodeData[]>([])
const [showLoader, setShowLoader] = useState<boolean>(false)
const history = useHistory()
const routeMatch = useRouteMatch('/:route/:id')
useEffect(() => {
invokeWebApiWrapperAsync(
async () => {
const deposits: Array<DepositDto> = await DepositService.getDeposits()
const wellsTree: TreeNodeData[] = 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,
`Не удалось загрузить список скважин`
)
}, [])
const onSelect = (value: string): void => {
if (value) history.push(value)
}
return (
<LoaderPortal show={showLoader}>
<TreeSelect
treeIcon
className={'header-tree-select'}
bordered={false}
dropdownMatchSelectWidth={false}
placeholder={'Выберите месторождение'}
treeData={wellsTree}
treeDefaultExpandAll
onSelect={onSelect}
value = {routeMatch?.url}
/>
</LoaderPortal>
)
}
export default WellTreeSelector

8
src/components/icons/WellIcon.tsx
View File

@ -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
}