forked from ddrilling/asb_cloud_front
90 lines
3.4 KiB
TypeScript
90 lines
3.4 KiB
TypeScript
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'
|
||
import { RawDate } from '../utils/DateTimeUtils'
|
||
|
||
export const getWellState = (idState?: number): WellIconState => idState === 1 ? 'active' : 'unknown'
|
||
export const checkIsWellOnline = (lastTelemetryDate?: RawDate): 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 = () => {
|
||
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
|