CF2-8: Создание формы отчетов

package.json

@@ -32,7 +32,7 @@
     "react_test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "proxy": "http://192.168.1.70:5000",
+  "proxy": "http://0.0.0.0:5000",
   "eslintConfig": {
     "extends": [
       "react-app",

src/pages/Report.jsx

@@ -1,107 +1,173 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useParams } from 'react-router-dom';
 import {
+  Form,
   DatePicker,
   Radio,
-  ConfigProvider,
   Button,
   Select,
-  Checkbox,
+  Table
 } from 'antd';
 import 'moment/locale/ru';
 import locale from 'antd/lib/locale/ru_RU';
 import moment from "moment";
+import { ReportService } from '../services/api'
 
 const { RangePicker } = DatePicker;
 const { Option } = Select;
 
-
+const initialBegin = moment()
-
+const initialEnd = moment()
-
+const initialStep = 600
-// Расширение файла для составленного рапорта
+const initialFormat = 1
-const ExceptionFileChecker = () => {
+let reportDatesRange = {
-  const [value, setValue] = React.useState(1);
+  from: moment("0001-01-01T00:00:00"),
-  const onChange = e => {
+  to: moment("9999-12-31T23:59:59.9999999")
-    console.log('radio checked', e.target.value);
-    setValue(e.target.value);
-  }
-
-  return (<Radio.Group onChange={onChange} value={value}>
-    <Radio value={1}>PDF</Radio>
-    <Radio value={2}>LAS</Radio>
-  </Radio.Group>
-  )
 }
 
-// Выбор периода времени
-const PeriodOfTime = () => {
-  function disabledDate(current) {
-    return current && current < moment().subtract(3, 'days');  // Наверно, не надо)
-  }
-
-  return (
-    <ConfigProvider locale={locale}
-      disabledDate>
-      <RangePicker
-        showTime
-        disabledDate={disabledDate}
-      />
-    </ConfigProvider>
-  )
-}
-
-// Выбор содержимого
-const ContentSelection = () => {
-  function onChange(e) {
-    console.log(`checked = ${e.target.checked}`);
-  }
-
-  return (<>
-    <Checkbox onChange={onChange}>Графики</Checkbox>
-    <Checkbox onChange={onChange}>Сообщения</Checkbox>
-  </>
-  )
-}
-
-// Выбор шага графика
-const GraphicStep = () => {
-  function handleChange(value) {
-    console.log(`selected ${value}`);
-  }
-
-  return (
-    <Select defaultValue="1 minute"
-      style={{ width: 100 }}
-      onChange={handleChange}>
-      <Option value="1 minute">1 минута</Option>
-      <Option value="1 day">1 день</Option>
-      <Option value="1 week">1 неделя</Option>
-    </Select>
-  )
-}
 
 // Экспорт рендера
 export default function Report(props) { 
-  return (<>
-    <h2>Рапорт</h2>
-    <hr />
-    <h3>Выбор за период времени и расширение файла</h3>
-    <PeriodOfTime />
-    <h3>Шаг графиков</h3>
-    <GraphicStep />
-    <h3>Содержимое отчёта</h3>
-    <ContentSelection />
-    <div></div>
-    <ExceptionFileChecker />
-    <p>*Предполагаемое колличество страниц</p>
-    <hr />
-    <div>
-      <Button type="primary" className="submit_button">
-        Получить рапорт
-      </Button>
-    </div>
   
+  const [rangeDate, setRangeDate] = useState([moment(), moment()])
+  const [step, setStep] = useState(initialStep)
+  const [format, setFormat] = useState(initialFormat)
+  const [approxPages, setPagesCount] = useState(0)
+  const [suitableReports, setSuitableReports] = useState([])
+  let wellId = useParams().id;
+
+  const columns = [
+    {
+      title: '',
+      dataIndex: 'reportFormat',
+      key: 'reportFormat',
+    },
+    {
+      title: 'Параметры отчета',
+      dataIndex: 'reportParams',
+      key: 'reportParams',
+    },
+    {
+      title: 'Название отчета',
+      dataIndex: 'reportName',
+      key: 'reportName',
+      render: name => <a>{name}</a>
+    },
+  ];
+
+  let handleReportCreation = async (values) => {
+    let begin = rangeDate[0].toISOString()
+    let end = rangeDate[1].toISOString()
+    let taskId = await ReportService.createReport(wellId, values.step, values.format, begin, end)
+  }; 
+
+  function disabledDate(current) {
+    return reportDatesRange.From  >= current || reportDatesRange.To  <= current;
+  }
+
+  useEffect(()=>{
+    async function getRepostSizeAsync() {
+      let begin = rangeDate[0].toISOString()
+      let end = rangeDate[1].toISOString()
+      let approxPagesResponse = await ReportService.getReportSize(wellId, step, format, begin, end)
+      setPagesCount(approxPagesResponse)
+      let suitableReportsResponse = await ReportService.getSuitableReportsNames(wellId, step, format, begin, end)
+      let suitableReports = suitableReportsResponse.map(value => {
+        return { 
+          reportFormat: value.format,
+          reportParams: `Дата создания: ${value.date}, Данные от ${value.begin} до ${value.end}, Шаг: ${value.step}`,
+          reportName: value.name
+        }
+      })
+      setSuitableReports(suitableReports)
+    }
+
+    getRepostSizeAsync()
+  },[rangeDate, step, format])
+
+  useEffect(()=>{
+    async function getDatesRange() {
+      let response = await ReportService.getReportsDateRange(wellId)
+      reportDatesRange.from = moment(response.from)
+      reportDatesRange.to = moment(response.to)
+    }
+
+    getDatesRange()
+  },[])
+
+  return (<>
+    <Form
+      layout="vertical"
+      name="reportForm"
+      initialValues={{ remember: true }}
+      onFinish={handleReportCreation}
+      style={{marginTop:'20px'}}
+    >
+      <div style={{display: 'flex'}}>
+        <Form.Item
+          label="Выбор за период времени и расширение файла"
+          name="period"
+          initialValue = { [initialBegin, initialEnd] }
+        >
+          <RangePicker
+            disabledDate={disabledDate}
+            allowClear={false}
+            onCalendarChange = { (dates, dateStrings, info) => {
+                setRangeDate([moment(dateStrings[0]), moment(dateStrings[1])])
+              }
+            } 
+            locale={locale} 
+            showTime 
+          />
+        </Form.Item>
+        <Form.Item
+          label="Шаг графиков"
+          name="step"
+          initialValue = {initialStep}
+          style={{marginLeft: '30px'}}
+        >
+          <Select
+            onChange={(value) => setStep(value)}
+            style={{ width: 100 }}
+          >
+            <Option value={600}>1 минута</Option>
+            <Option value={86400}>1 день</Option>
+            <Option value={604800}>1 неделя</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+            label="Формат отчета"
+            name="format"
+            initialValue = {initialFormat}
+            onChange={(e) => setFormat(e.target.value)}
+            style={{marginLeft: '30px'}}
+        >
+            <Radio.Group>
+              <Radio.Button value={0}>PDF</Radio.Button>
+              <Radio.Button value={1}>LAS</Radio.Button>
+            </Radio.Group>
+        </Form.Item>
+        <Button 
+          type="primary" 
+          htmlType="submit"
+          className="submit_button"
+          style={{marginTop: '30px', marginLeft: '30px'}}>
+          <span>Получить рапорт</span>
+          <span style={{marginLeft: '5px'}}>
+            ({approxPages} стр.)
+          </span> 
+          <span style={{display: approxPages > 100 ? 'inline' : 'none' ,marginLeft: '5px'}}>
+            !!!
+          </span> 
+        </Button>
+      </div>
+    </Form>
+    <br/>
+    <p style={{marginBottom: '10px'}}>
+      Отчеты с аналогичными параметрами, доступные для скачивания:
+    </p> <br/>
+    
+    <Table dataSource={suitableReports} columns={columns} />
   </>
   )
 }
-
-// TODO ограничить датапикер по дате за 3 дня до

src/services/api/services/ReportService.ts

@@ -10,10 +10,10 @@ export class ReportService {
      * Создает отчет по скважине с указанными параметрами
      * @param wellId id скважины
      * @param stepSeconds шаг интервала
-     * @param format формат отчета (0-PDF, 1-LASS)
+     * @param format формат отчета (0-PDF, 1-LAS)
      * @param begin дата начала интервала
      * @param end дата окончания интервала
-     * @returns string Success
+     * @returns number Success
      * @throws ApiError
      */
     public static async createReport(
@@ -22,7 +22,7 @@ stepSeconds?: number,
 format?: number,
 begin?: string,
 end?: string,
-): Promise<string> {
+): Promise<number> {
         const result = await __request({
             method: 'POST',
             path: `/api/well/${wellId}/report`,
@@ -57,11 +57,42 @@ reportName?: string,
         return result.body;
     }
 
+    /**
+     * Возвращает имена отчетов, хранящихся на диске,
+ * которые подходят под указанные параметры
+     * @param wellId id скважины
+     * @param stepSeconds шаг интервала
+     * @param format формат отчета (0-PDF, 1-LAS)
+     * @param begin дата начала интервала
+     * @param end дата окончания интервала
+     * @returns string Success
+     * @throws ApiError
+     */
+    public static async getSuitableReportsNames(
+wellId: number,
+stepSeconds?: number,
+format?: number,
+begin?: string,
+end?: string,
+): Promise<Array<string>> {
+        const result = await __request({
+            method: 'GET',
+            path: `/api/well/${wellId}/suitableReports`,
+            query: {
+                'stepSeconds': stepSeconds,
+                'format': format,
+                'begin': begin,
+                'end': end,
+            },
+        });
+        return result.body;
+    }
+
     /**
      * Возвращает прогнозируемое количество страниц будущего отчета
      * @param wellId id скважины
      * @param stepSeconds шаг интервала
-     * @param format формат отчета (0-PDF, 1-LASS)
+     * @param format формат отчета (0-PDF, 1-LAS)
      * @param begin дата начала интервала
      * @param end дата окончания интервала
      * @returns string Success

src/services/api/services/TelemetryService.ts

@@ -31,7 +31,7 @@ requestBody?: TelemetryInfoDto,
 
     /**
      * Принимает данные от разных систем по скважине
-     * @param uid Уникальный идентификатор отправителя
+     * @param uid Уникальный идентификатор <EFBFBD><EFBFBD>тправителя
      * @param requestBody Данные
      * @returns any Success
      * @throws ApiError