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

loader переделан на loaderPortal для отображения поверх обновляемого компонента

Browse Source
This commit is contained in:
Фролов 2021-06-02 11:38:27 +05:00
parent 3babd25424
commit bcd1c75cfa
8 changed files with 103 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -1,5 +1,4 @@
import './styles/App.less'
import React /*, { useContext, createContext, useState }*/ from "react"
import {
BrowserRouter as Router,
Switch,

9
src/components/LoaderPortal.jsx
View File

@ -1,13 +1,12 @@
import Loader from './Loader'
export default function LoaderPortal({show, children}){
export default function LoaderPortal({show, fade=true, children}){
return(
<div className='loader-container'>
<div className='loader-content'>
123456{/* {children} */}
{children}
</div>
{/* {show && <div className='loader-overlay'><Loader/></div>} */}
<div className='loader-overlay'>qqqq</div>
{/* {show && <Loader className='loader-overlay'/>} */}
{show && fade && <div className='loader-fade'/>}
{show && <div className='loader-overlay'><Loader/></div>}
</div>)
}

14
src/pages/Archive.jsx
View File

@ -13,6 +13,7 @@ import {generateUUID} from '../services/UidGenerator'
import { ArchiveColumn } from '../components/ArchiveColumn'
import moment from 'moment'
import notify from '../components/notify'
import LoaderPortal from '../components/LoaderPortal'
const { RangePicker } = DatePicker;
@ -31,7 +32,8 @@ export default function Archive() {
const [saubData, setSaubData] = useState([])
const [chartsCfgs, setChartsCfgs] = useState([])
const [rangeDate, setRangeDate] = useState([moment().subtract(3,'hours'), moment()])
const [geometry, setGeometry] = useState({ratioRest:1, ratio1st:1, wRest:.5, w1st:.5})
const [geometry, setGeometry] = useState({ratioRest:1, ratio1st:1, wRest:.5, w1st:.5})
const [loader, setLoader] = useState(false)
const chartsCfgsKey = 'chartsCfgs'
const chartsContainerRef = useRef();
@ -95,12 +97,14 @@ export default function Archive() {
let interval = (rangeDate[1] - rangeDate[0]) / 1000
let startDate = rangeDate[0].toISOString()
setLoader(true)
DataService.getData(id, startDate, interval, 2048)
.then(handleReceiveDataSaub)
.catch(error => {
notify(`Не удалось загрузить данные по скважине (${id}) c ${rangeDate[0]} по ${rangeDate[1]}`, 'error')
console.error(error)
})
.finally(()=>setLoader(false))
}, [id, rangeDate]);
let charts = null
@ -137,8 +141,10 @@ export default function Archive() {
value = {rangeDate}
/>
</ConfigProvider>
<Row ref={chartsContainerRef}>
{charts}
</Row>
<LoaderPortal show={loader}>
<Row ref={chartsContainerRef}>
{charts}
</Row>
</LoaderPortal>
</>)
}

23
src/pages/LayoutPortal.jsx
View File

@ -1,32 +1,9 @@
import {Layout} from 'antd'
import PageHeader from './Header'
// import { useState, useEffect, createContext} from 'react'
// import { useParams } from 'react-router-dom'
const {Content} = Layout
export default function LayoutPortal({title, children}) {
// const [wells, setWells] = useState([])
// let { id } = useParams();
// let updateWellsList = async () => {
// setLoader(true)
// try {
// let newWells = (await WellService.getWells()).map(w => { return { key: w.id, ...w } })
// setWells(newWells)
// }
// catch (e) {
// console.error(`${e.message}`);
// }
// setLoader(false)
// }
// useEffect(() => {
// updateWellsList()
// }, [])
// const WellsContext = createContext({wells});
return (
<Content>
<PageHeader title={title}/>

105
src/pages/Messages.jsx
View File

@ -2,7 +2,7 @@ import {Table, Select, DatePicker, ConfigProvider} from 'antd';
import {MessageService} from '../services/api'
import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import Loader from '../components/Loader'
import LoaderPortal from '../components/LoaderPortal'
import '../styles/message.css'
import notify from '../components/notify'
import locale from "antd/lib/locale/ru_RU";
@ -63,50 +63,48 @@ export default function Messages() {
const [loader, setLoader] = useState(false)
const children = filterOptions.map((line) => <Option key={line.value}>{line.label}</Option>)
const onChangeRange = (range) => {
setRange(range)
}
const GetMessages = async () => {
setLoader(true)
try {
let begin = null
let end = null
if (range?.length > 1) {
begin = range[0].toISOString()
end = range[1].toISOString()
}
let paginatedMessages = await MessageService.getMessage(`${id}`,
(page - 1) * pageSize,
pageSize,
categories,
begin,
end)
setMessages(paginatedMessages.items.map(m => {
return {
key: m.id,
categoryids: categoryDictionary[m.categoryId],
begin: m.date,
...m
}
}))
setPagination({
total: paginatedMessages.count,
current: Math.floor(paginatedMessages.skip / pageSize),
})
} catch (ex) {
notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
}
setLoader(false)
}
useEffect(() => {
const GetMessages = async () => {
setLoader(true)
try {
let begin = null
let end = null
if (range?.length > 1) {
begin = range[0].toISOString()
end = range[1].toISOString()
}
let paginatedMessages = await MessageService.getMessage(`${id}`,
(page - 1) * pageSize,
pageSize,
categories,
begin,
end)
setMessages(paginatedMessages.items.map(m => {
return {
key: m.id,
categoryids: categoryDictionary[m.categoryId],
begin: m.date,
...m
}
}))
setPagination({
total: paginatedMessages.count,
current: Math.floor(paginatedMessages.skip / pageSize),
})
} catch (ex) {
notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
}
setLoader(false)
}
GetMessages()
}, [page, categories, range])
}, [id, page, categories, range])
return (
<>
@ -129,21 +127,22 @@ export default function Messages() {
/>
</ConfigProvider>
</div>
<Table
columns={columns}
dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
size={'small'}
pagination={{
pageSize: pageSize,
showSizeChanger: false,
total: pagination?.total,
current: page,
onChange: (page) => setPage(page)
}}
rowKey={(record) => record.id}
/>
{loader && <Loader/>}
<LoaderPortal show={loader}>
<Table
columns={columns}
dataSource={messages}
rowClassName={(record) => `event_message_${record.categoryId} event_message`}
size={'small'}
pagination={{
pageSize: pageSize,
showSizeChanger: false,
total: pagination?.total,
current: page,
onChange: (page) => setPage(page)
}}
rowKey={(record) => record.id}
/>
</LoaderPortal>
</>
)
}

18
src/pages/TelemetryView.jsx
View File

@ -2,7 +2,7 @@ import {useState, useEffect} from 'react'
import {useParams} from 'react-router-dom'
import {Row, Col, Select, Table} from 'antd'
import {ChartTimeOnline} from '../components/charts/ChartTimeOnline'
import Loader from '../components/Loader'
import LoaderPortal from '../components/LoaderPortal'
import {ChartTimeOnlineFooter} from '../components/ChartTimeOnlineFooter'
import {CustomColumn} from '../components/CustomColumn'
import {UserOfWells} from '../components/UserOfWells'
@ -189,7 +189,7 @@ export default function TelemetryView(props) {
const [chartInterval, setChartInterval] = useState(600)
const [messages, setMessages] = useState([])
const [loader] = useState(false) // , setLoader
const [loader, setLoader] = useState(false) // , setLoader
const handleReceiveDataSaub = (data) => {
if (data) {
@ -204,20 +204,23 @@ export default function TelemetryView(props) {
}
useEffect(() => {
DataService.getData(id)
setLoader(true)
let promiseData = DataService.getData(id)
.then(handleReceiveDataSaub)
.catch((ex) => {
notify(`Не удалось загрузить данные по скважине "${id}"`, 'error')
console.log(ex)
})
MessageService.getMessage(id)
let promiseMessages = MessageService.getMessage(id)
.then(handleReceiveMessages)
.catch((ex) => {
notify(`Не удалось загрузить сообщения по скважине "${id}"`, 'error')
console.log(ex)
})
Promise.all([promiseData, promiseMessages]).then(()=>setLoader(false))
let unSubscribeDataSaubHub = Subscribe('ReceiveDataSaub', `well_${id}`, handleReceiveDataSaub)
let unSubscribeMessagesHub = Subscribe('ReceiveMessages', `well_${id}`, handleReceiveMessages)
return () => {
@ -227,14 +230,16 @@ export default function TelemetryView(props) {
}, [id]);
useEffect(() => {
setLoader(true)
DataService.getData(id, null, chartInterval)
.then(handleReceiveDataSaub)
.catch(error => console.error(error))
.finally(()=>setLoader(false))
}, [id, chartInterval]);
const colSpan = 24 / (paramsGroups.length)
return (<div>
return (<LoaderPortal show={loader}>
<Row style={{marginBottom: '1rem'}}>
<Col>
<ModeDisplay data={saubData}/>
@ -278,6 +283,5 @@ export default function TelemetryView(props) {
pagination={false}
rowKey={(record) => record.id}
/>
{loader && <Loader/>}
</div>)
</LoaderPortal>)
}

2
src/pages/Wells.jsx
View File

@ -44,7 +44,7 @@ export default function Wells(props){
notify('Не удалось загрузить список скважин', 'error')
console.error(`${e}`);
}
//setLoader(false)
setLoader(false)
}
useEffect(()=>updateWellsList(), [])

36
src/styles/loader.css
View File

@ -1,6 +1,3 @@
:root {
--columns: 12;
}
/* original from https://loading.io/css/ */
.lds-ripple {
@ -36,20 +33,37 @@
}
}
.loader-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.loader-content{
grid-area: 1 / 1;
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
}
.loader-overlay{
grid-area: 1 / 1;
/* background-color: rgba(127, 127, 127, 0.5);
border: 10px solid red; */
/* justify-self: stretch;
align-self: stretch; */
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
place-self: center;
align-self: center;
justify-self: center;
z-index: 1;
height: 80px;
width: 80px;
border-radius: 40px;
}
.loader-fade{
grid-column-start: 1;
grid-column-end: span 3;
grid-row-start: 1;
background-color: rgba(255, 255, 255, 0.4);
align-self: stretch;
justify-self: stretch;
z-index: 1;
box-shadow: 0px 0px 6px 5px rgba(255, 254, 254, 0.4);
}