diff --git a/src/App.js b/src/App.js index 5f1893d..1f74ae1 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ import './styles/App.less' -import React /*, { useContext, createContext, useState }*/ from "react" import { BrowserRouter as Router, Switch, diff --git a/src/components/LoaderPortal.jsx b/src/components/LoaderPortal.jsx index deed9ee..c84fc6c 100644 --- a/src/components/LoaderPortal.jsx +++ b/src/components/LoaderPortal.jsx @@ -1,13 +1,12 @@ import Loader from './Loader' -export default function LoaderPortal({show, children}){ +export default function LoaderPortal({show, fade=true, children}){ return(
- 123456{/* {children} */} + {children}
- {/* {show &&
} */} -
qqqq
- {/* {show && } */} + {show && fade &&
} + {show &&
}
) } \ No newline at end of file diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx index d3497e3..6c5d4f0 100644 --- a/src/pages/Archive.jsx +++ b/src/pages/Archive.jsx @@ -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} /> - - {charts} - + + + {charts} + + ) } \ No newline at end of file diff --git a/src/pages/LayoutPortal.jsx b/src/pages/LayoutPortal.jsx index eb3c37e..b1ff72e 100644 --- a/src/pages/LayoutPortal.jsx +++ b/src/pages/LayoutPortal.jsx @@ -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 ( diff --git a/src/pages/Messages.jsx b/src/pages/Messages.jsx index 188acc4..0b410c6 100644 --- a/src/pages/Messages.jsx +++ b/src/pages/Messages.jsx @@ -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) => ) 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() { />
- `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 && } + +
`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} + /> + ) } \ No newline at end of file diff --git a/src/pages/TelemetryView.jsx b/src/pages/TelemetryView.jsx index 9bdf2e6..63ed45f 100644 --- a/src/pages/TelemetryView.jsx +++ b/src/pages/TelemetryView.jsx @@ -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 (
+ return (
@@ -278,6 +283,5 @@ export default function TelemetryView(props) { pagination={false} rowKey={(record) => record.id} /> - {loader && } - ) + ) } \ No newline at end of file diff --git a/src/pages/Wells.jsx b/src/pages/Wells.jsx index 33bdc2f..4bf4e9a 100644 --- a/src/pages/Wells.jsx +++ b/src/pages/Wells.jsx @@ -44,7 +44,7 @@ export default function Wells(props){ notify('Не удалось загрузить список скважин', 'error') console.error(`${e}`); } - //setLoader(false) + setLoader(false) } useEffect(()=>updateWellsList(), []) diff --git a/src/styles/loader.css b/src/styles/loader.css index 31ede00..e8b0844 100644 --- a/src/styles/loader.css +++ b/src/styles/loader.css @@ -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); }