CF2-49: Main changes for new Measures table display

2021-10-04 18:06:42 +05:00 · 2021-10-04 18:06:42 +05:00 · 5755b41abc
commit 5755b41abc
parent c2243f1eb6
6 changed files with 176 additions and 91 deletions
--- a/src/pages/Measure/MeasureTable2.jsx
+++ b/src/pages/Measure/MeasureTable2.jsx
@ -7,16 +7,17 @@ import { invokeWebApiWrapperAsync } from '../../components/factory'
 import { MeasureService } from '../../services/api'
 import { Editor } from './Editor'
 import TimelineItem from 'antd/lib/timeline/TimelineItem'
-//import { View } from  './View'
+import { View } from  './View'
+import '../../styles/measure.css'

 const format='YYYY.MM.DD HH:mm'

-export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
+export const MeasureTable2 = ({idWell, idCategory, title, columns, currentValues}) => {
  const [showLoader, setShowLoader] = useState(false)
  const [showEditor, setShowEditor] = useState(false)
  const [history, setHistory] = useState([])

-  const update = () => invokeWebApiWrapperAsync(async()=>{
+  const updateHistory = () => invokeWebApiWrapperAsync(async()=>{
    const data = await MeasureService.getHisory(idWell, idCategory)
    const story = data?.map( i=> ({
      id: i.id,
@ -27,23 +28,41 @@ export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
    setHistory(story??[])
  }
  , setShowLoader
-  , "не удалось загрузить")
+  , `Не удалось загрузить последние данные по скважине ${idWell}`)

-  useEffect(update, [idWell, idCategory])
+  useEffect(updateHistory, [idWell, idCategory])

-  return <LoaderPortal show={showLoader}>
-    <h3>{title}</h3>
-    &nbsp;
-    <Button 
-      onClick={() => setShowEditor(true)}
-      icon={<HourglassOutlined/>}>История</Button>
-    <Timeline>
-      {history.map(item=><TimelineItem value={item}>{item.timestamp}</TimelineItem>)}
-    </Timeline>
-    {/* <View
-          item = {lastData?.data}
-          columns = {columns}/> */}
-    <Modal
+  const lastHistoryIndex = history.length
+
+  return <> 
+    <LoaderPortal show={showLoader}>
+      &nbsp;
+      <h3>{title}</h3>
+      &nbsp;
+      <div className='d-flex'>
+        <div className='measure-dates'>
+          <Timeline>
+            {history.map((item, index)=>
+              <Timeline.Item 
+                key={item.id}
+                className={index === lastHistoryIndex - 1 
+                                      ? 'last-measure-button' 
+                                      : 'measure-button'} 
+                onClick={() => setShowEditor(true)} 
+                value={item}
+              >
+                <p>{item.timestamp}</p>
+              </Timeline.Item>)}
+          </Timeline>
+        </div>
+        <div className='w-100'>
+          <View
+            item = {currentValues.data}
+            columns = {columns}
+          />
+        </div>
+      </div>
+      <Modal
        title={title}
        centered
        visible={showEditor}
@ -51,12 +70,14 @@ export const MeasureTable2 = ({idWell, idCategory, title, columns}) => {
        onCancel={() => setShowEditor(false)}
        width="95%"
        footer={null}
-        >
-      <Editor
-        idWell={idWell}
-        idCategory={idCategory} 
-        columns = {columns}
-        onUpdate={update}/>
-    </Modal>
-  </LoaderPortal>
+      >
+        <Editor
+          idWell={idWell}
+          idCategory={idCategory} 
+          columns = {columns}
+          onUpdate={updateHistory}
+        />
+      </Modal>
+    </LoaderPortal>
+  </> 
 }
--- a/src/pages/Measure/View.jsx
+++ b/src/pages/Measure/View.jsx
@ -9,30 +9,35 @@ export const View = ({columns, item}) => {
  const viewItems = columns.map( (column, i) => {
    const row = Math.floor(i / colsCount) + 1
    const colb = i % colsCount
+
    return <>
-      <GridItem 
-        row={row} 
-        col={colb*2 + 1}
-        background='#00000005'        
-        border='1px solid #FFFE'
+        <GridItem 
+          //style={{width:'100%', border:'1px solid red'}}
+          row={row} 
+          col={colb*2 + 1}
+          background='#00000005'        
+          border='1px solid #FFFE'
        >
-        {column.title}
-        
-      </GridItem>
-      <GridItem 
-        row={row} 
-        col={colb*2 + 2}
-        border='1px solid rgba(0, 0, 0, 0.05)'
-        justifyContect='right'
-        marginRight='16px'
-        fontWeight='bold'
-        textAlign='right'>
-          {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
-      </GridItem>
+          {column.title}
+        </GridItem>
+        <GridItem 
+          //style={{width:'50%', border:'1px solid blue'}}
+          row={row} 
+          col={colb*2 + 2}
+          border='1px solid rgba(0, 0, 0, 0.05)'
+          justifycontent='right'
+          marginright='16px'
+          fontWeight='bold'
+          textalign='right'
+        >
+            {column.render ? column.render(item[column.dataIndex]) : item[column.dataIndex]}        
+        </GridItem>
    </>
  })

-  return <Grid>
-    {viewItems}
-  </Grid>
+  return <>
+    <Grid>
+      {viewItems}
+    </Grid>
+  </>
 }
--- a/src/pages/Measure/columnsMudDiagram.js
+++ b/src/pages/Measure/columnsMudDiagram.js
@ -4,36 +4,24 @@ import {v, numericColumnOptions, textColumnOptions} from './columnsCommon'
 export const columnsMudDiagram = [
  makeColumn(v('N пробы'), 'probeNumber', numericColumnOptions),
  makeColumn(v('Глубина отбора пробы'), 'probeExtractionDepth', numericColumnOptions),
-  {
-    title: 'Литология',
-    key: 'lithology',
-    children: [
-      makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
-      makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
-      makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
-      makeColumn(v('Аргиллит бит. (%)'), 'brokenArgillit', numericColumnOptions),
-      makeColumn(v('Уголь (%)'), 'coal', numericColumnOptions),
-      makeColumn(v('Песок (%)'), 'sand', numericColumnOptions),
-      makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
-      makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
-      makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
-    ]
-  },
+  makeColumn(v('Песчаник (%)'), 'sandstone', numericColumnOptions),
+  makeColumn(v('Алевролит (%)'), 'siltstone', numericColumnOptions),
+  makeColumn(v('Аргиллит (%)'), 'argillit', numericColumnOptions),
+  makeColumn(v('Аргиллит бит. (%)'), 'brokenArgillit', numericColumnOptions),
+  makeColumn(v('Уголь (%)'), 'coal', numericColumnOptions),
+  makeColumn(v('Песок (%)'), 'sand', numericColumnOptions),
+  makeColumn(v('Глина (%)'), 'clay', numericColumnOptions),
+  makeColumn(v('Известняк (%)'), 'camstone', numericColumnOptions),
+  makeColumn(v('Цемент (%)'), 'cement', numericColumnOptions),
  makeColumn('Краткое описание', 'summary', textColumnOptions),
  makeColumn(v('ЛБА бурового раствора'), 'drillingMud', numericColumnOptions),
  makeColumn(v('ЛБА (шлама)'), 'sludge', numericColumnOptions),
-  {
-    title: 'Газопоказания',
-    key: 'gasIndications',
-    children: [
-      makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
-      makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
-      makeColumn(v('С2 этан (отн%)'), 'ethane', numericColumnOptions),
-      makeColumn(v('С3 пропан (отн%)'), 'propane', numericColumnOptions),
-      makeColumn(v('С4 бутан (отн%)'), 'butane', numericColumnOptions),
-      makeColumn(v('С5 пентан (отн%)'), 'pentane', numericColumnOptions),
-    ]
-  },
+  makeColumn(v('Сумма УВ мах. (абс%)'), 'maxSum', numericColumnOptions),
+  makeColumn(v('С1 метан (отн%)'), 'methane', numericColumnOptions),
+  makeColumn(v('С2 этан (отн%)'), 'ethane', numericColumnOptions),
+  makeColumn(v('С3 пропан (отн%)'), 'propane', numericColumnOptions),
+  makeColumn(v('С4 бутан (отн%)'), 'butane', numericColumnOptions),
+  makeColumn(v('С5 пентан (отн%)'), 'pentane', numericColumnOptions),
  makeColumn(v('Мех. скорость'), 'mechanicalSpeed', numericColumnOptions),
  makeColumn('Предварительное заключение о насыщении по ГК', 'preliminaryConclusion', textColumnOptions),
 ]
--- a/src/pages/Measure/index.jsx
+++ b/src/pages/Measure/index.jsx
@ -1,25 +1,60 @@
+import { useState, useEffect } from 'react'
 import { columnsMudDiagram} from './columnsMudDiagram'
 import { columnsDrillingFluid} from './columnsDrillingFluid'
+import { invokeWebApiWrapperAsync } from '../../components/factory'
+import { MeasureService } from '../../services/api'
 import { columnsNnb } from './columnsNnb'
-import { MeasureTable } from './MeasureTable'
-//import { MeasureTable2 } from './MeasureTable2'
+import LoaderPortal from '../../components/LoaderPortal'
+//import moment from 'moment'
+//import { MeasureTable } from './MeasureTable'
+import { MeasureTable2 } from './MeasureTable2'
+
+const format='YYYY.MM.DD HH:mm'

 export default function Measure({idWell}){
+  const [showLoader, setShowLoader] = useState(false)
+  const [currentFluidValues, setCurrentFluidValues] = useState([])
+  const [currentMudValues, setCurrentMudValues] = useState([])
+  const [currentNnbValues, setCurrentNnbValues] = useState([])
+
+  const updateCurrentValues = () => invokeWebApiWrapperAsync(async()=>{
+    const data = await MeasureService.getAllLast(idWell)
+
+    const fluidValues = data?.find(value =>  value.idCategory === 1)
+    setCurrentFluidValues(fluidValues ?? [])
+    const mudValues = data?.find(value =>  value.idCategory === 2)
+    setCurrentMudValues(mudValues ?? [])
+    const nnbValues = data?.find(value =>  value.idCategory === 3)
+    setCurrentNnbValues(nnbValues ?? [])
+  }
+  ,setShowLoader
+  ,`Не удалось загрузить последние данные по скважине ${idWell}`)
+
+  useEffect(updateCurrentValues, [idWell])
+
  return <>  
-    <MeasureTable
-      idWell={idWell}
-      idCategory={1} 
-      title='Замер бурового раствора'
-      columns={columnsDrillingFluid}/>
-    <MeasureTable 
-      idWell={idWell}
-      idCategory={2} 
-      title='Шламограмма'
-      columns={columnsMudDiagram}/>
-    <MeasureTable 
-      idWell={idWell}
-      idCategory={3} 
-      title='ННБ'
-      columns={columnsNnb}/>
+    <LoaderPortal show={showLoader}>
+      <MeasureTable2
+        idWell={idWell}
+        idCategory={1} 
+        title='Замер бурового раствора'
+        columns={columnsDrillingFluid}
+        currentValues={currentFluidValues}
+      />
+      <MeasureTable2
+        idWell={idWell}
+        idCategory={2} 
+        title='Шламограмма'
+        columns={columnsMudDiagram}
+        currentValues={currentMudValues}
+      />
+      <MeasureTable2 
+        idWell={idWell}
+        idCategory={3} 
+        title='ННБ'
+        columns={columnsNnb}
+        currentValues={currentNnbValues}
+      />
+    </LoaderPortal>
  </>
 }
--- a/src/styles/index.css
+++ b/src/styles/index.css
@ -19,6 +19,10 @@ body {
  display: none;
 }

+.w-15 {
+  width: 15%
+}
+
 .w-100 {
  width: 100%
 }
--- a/src/styles/measure.css
+++ b/src/styles/measure.css
@ -0,0 +1,32 @@
+.measure-dates {
+    width: 15%;
+    overflow-y: scroll;
+}
+
+.measure-button {
+    display: flex;
+    margin-top: 8px;
+    width: 95%;
+    height: 30px;
+    border: 1px solid black;
+    border-radius: 5px;
+}
+
+.measure-button:hover {
+    cursor: pointer;
+}
+
+.last-measure-button {
+    display: flex;
+    margin-top: 8px;
+    background-color: #DCDCDC;
+    width: 95%;
+    height: 30px;
+    border: 1px solid black;
+    border-radius: 5px;
+}
+
+.last-measure-button:hover {
+    cursor: pointer;
+    background-color: #D3D3D3;
+}