From d59e5a0fe42a78f28a39c8a43a17c107c31e29fd Mon Sep 17 00:00:00 2001
From: Alexey <ay.nokhrin@autodrilling.ru>
Date: Thu, 13 May 2021 13:50:25 +0500
Subject: [PATCH] =?UTF-8?q?CF2-6=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86?=
 =?UTF-8?q?=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D0=B8=D1=80=D0=BE=D0=B2=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=8F=20=D0=BE=D1=82=D1=87=D1=91=D1=82=D0=B0.=20?=
 =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D1=8D?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BC=D0=B5=D0=BD=D1=82=D1=8B.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |   1 +
 package.json                                  |   1 +
 .../charts/{ChartDeep.jsx => ChartDepth.jsx}  |   4 +-
 src/pages/Archive.jsx                         |   6 +-
 src/pages/Files.jsx                           |   4 +-
 src/pages/Report.jsx                          | 114 ++++++++++++++----
 6 files changed, 99 insertions(+), 31 deletions(-)
 rename src/components/charts/{ChartDeep.jsx => ChartDepth.jsx} (83%)

diff --git a/package-lock.json b/package-lock.json
index 83ede66..4e3dedc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "chartjs-plugin-datalabels": "^2.0.0-beta.1",
         "craco-less": "^1.17.1",
         "date-fns": "^2.20.0",
+        "moment": "^2.29.1",
         "react": "^17.0.2",
         "react-datepicker": "^3.8.0",
         "react-dom": "^17.0.2",
diff --git a/package.json b/package.json
index 88a9bfe..7f67ffd 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "chartjs-plugin-datalabels": "^2.0.0-beta.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
+    "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-datepicker": "^3.8.0",
     "react-dom": "^17.0.2",
diff --git a/src/components/charts/ChartDeep.jsx b/src/components/charts/ChartDepth.jsx
similarity index 83%
rename from src/components/charts/ChartDeep.jsx
rename to src/components/charts/ChartDepth.jsx
index 2e95fc2..0af149e 100644
--- a/src/components/charts/ChartDeep.jsx
+++ b/src/components/charts/ChartDepth.jsx
@@ -1,6 +1,6 @@
 import ChartDataLabels from 'chartjs-plugin-datalabels'
 
-const defaoultOptionsDeepLabels = {
+const defaultOptionsDepthLabels = {
     borderWidth: 1,
     borderColor: black,
     borderRadius: 4,
@@ -10,7 +10,7 @@ const defaoultOptionsDeepLabels = {
         datasets: [{
             datalabels: {
                 color: '#0f4000'
-              }
+            }
         }]
     }
 }
\ No newline at end of file
diff --git a/src/pages/Archive.jsx b/src/pages/Archive.jsx
index defb0fe..65ee8e9 100644
--- a/src/pages/Archive.jsx
+++ b/src/pages/Archive.jsx
@@ -1,5 +1,5 @@
 
 
-export default function Archive(props){
-    return(<h2>Архив</h2>)
-  }
\ No newline at end of file
+export default function Archive(props) {
+  return (<h2>Архив</h2>)
+}
\ No newline at end of file
diff --git a/src/pages/Files.jsx b/src/pages/Files.jsx
index 7d12948..05d39e7 100644
--- a/src/pages/Files.jsx
+++ b/src/pages/Files.jsx
@@ -1,3 +1,3 @@
-export default function Files(props){
-  return(<h2>Файлы</h2>)
+export default function Files(props) {
+  return (<h2>Файлы</h2>)
 }
\ No newline at end of file
diff --git a/src/pages/Report.jsx b/src/pages/Report.jsx
index 6fe58a0..ed5c046 100644
--- a/src/pages/Report.jsx
+++ b/src/pages/Report.jsx
@@ -1,32 +1,98 @@
 import React, { useState } from "react";
-import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
-import ru from 'date-fns/locale/ru';
-
-import "react-datepicker/dist/react-datepicker.css";
+import {
+  DatePicker,
+  Radio,
+  ConfigProvider,
+  Button,
+  Select,
+  Checkbox,
+  Pagination
+} from 'antd';
+import 'moment/locale/ru';
+import locale from 'antd/lib/locale/ru_RU';
 
 
-registerLocale('ru', ru)
+const { RangePicker } = DatePicker;
+const { Option } = Select;
 
-export default function Report(props){
-    const PeriodOfTime = () => {
-        const [startDate, setStartDate] = useState(new Date());
-        return (
-          <DatePicker 
-          selected={startDate} 
-          onChange={date => setStartDate(date)}
-          locale='ru'
-          />
-        );
-      };
 
-    return(<>
+// Расширение файла для составленного рапорта
+const ExeptionFileChecker = () => {
+  const [value, setValue] = React.useState(1);
+  const onChange = e => {
+    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 = () => {
+  const [startDate, setStartDate] = useState(new Date());
+
+  return (
+    <ConfigProvider locale={locale}>
+      <RangePicker
+        showTime
+      />
+    </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>
-    <select>
-        <option>las</option>
-        <option>pdf</option>
-    </select>
     <PeriodOfTime />
-    </>
-    )
-}
\ No newline at end of file
+    <h3>Шаг графиков</h3>
+    <GraphicStep />
+    {/* <h3>Содержимое отчёта</h3>
+    <ContentSelection /> */}
+    <div></div>
+    <ExeptionFileChecker />
+    <p>*Предполагаемое колличество страниц</p>
+    <hr />
+    <div>
+      <Button type="primary" style={{ display: 'flex', alignItems: 'center', padding: '20px', borderRadius: '5px' }}>Получить рапорт</Button>
+    </div>
+    
+  </>
+  )
+}
+
+// TODO ограничить датапикер по дате за 3 дня до