-
-
-
- 2020-23-21
-
-
- 14:32
-
-
-
-
-
- Cum
-
-
- №69
-
-
+ const [randomNumber, setRandomNumber] = useState(null);
+
+ useEffect(() => {
+ // Создаем WebSocket-соединение
+ const ws = new WebSocket('ws://localhost:8765/');
+
+ // Обработка сообщений от сервера
+ ws.onmessage = (event) => {
+ const newRandomNumber = event.data;
+ setRandomNumber(newRandomNumber);
+ };
+
+ // Закрытие соединения при размонтировании компонента
+ return () => {
+ ws.close();
+ };
+ }, []);
+ return (
+
+
+
+
+ 2020-23-21
+
+
+ 14:32
+
+
+
+
+
+ Cum
+
+
+ №69
+
+
+
+
+
+ {randomNumber}
+
-
-
- here camera
-
-
- );
+ );
}
export default Camera;
diff --git a/ui/src/lib/filters/filters.module.scss b/ui/src/lib/filters/filters.module.scss
index 1c38f2f..843b5a3 100644
--- a/ui/src/lib/filters/filters.module.scss
+++ b/ui/src/lib/filters/filters.module.scss
@@ -1,12 +1,18 @@
.container {
+ grid-area: 1 / 1 / 2 / 6;
display: flex;
flex-direction: row;
gap: 30px;
}
+
.button {
font-size: 14px;
border-radius: 20px;
padding: 5px 10px;
color: var(--white);
background-color: #94BF5E;
+
+ &:disabled {
+ background-color: #eee;
+ }
}
diff --git a/ui/src/lib/filters/filters.tsx b/ui/src/lib/filters/filters.tsx
index 2e54e82..ccd9b8d 100644
--- a/ui/src/lib/filters/filters.tsx
+++ b/ui/src/lib/filters/filters.tsx
@@ -1,64 +1,111 @@
-import cls from './filters.module.scss';
-import {ConfigProvider, DatePicker} from "antd";
+import React, {useEffect, useState} from "react";
+import dayjs from "dayjs";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import utc from "dayjs/plugin/utc";
import SwitchSelector from "react-switch-selector";
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import {useState} from "react";
-
-/* eslint-disable-next-line */
+import {ConfigProvider, DatePicker} from "antd";
+import cls from "./filters.module.scss";
+import {useGetDateMutation} from "../../../../apps/crud/src/store/services/statisticsFilterApi";
+import {useAppDispatch} from "../../../../apps/crud/src/store";
+import {setData, setType} from "../../../../apps/crud/src/store/features/statisticsFilterSlice";
-enum timeFormatEnum {
- DATE = "date",
- PERIOD = "period"
+export enum timeFormatEnum {
+ DATE = "date",
+ PERIOD = "period",
}
export function Filters() {
- const [timeFormat, setTimeFormat] = useState
(timeFormatEnum.DATE)
- const options = [
- {
- label: "Дата",
- value: "date",
- selectedBackgroundColor: "#94BF5E"
- },
- {
- label: "Период",
- value: "period",
- selectedBackgroundColor: "#94BF5E"
- },
- ]
+ const [timeFormat, setTimeFormat] = useState(timeFormatEnum.DATE);
+ const [timeData, setTimeData] = useState();
+ const [mutation, {data}] = useGetDateMutation();
+ const dispatch = useAppDispatch();
+
+ const options = [
+ {
+ label: "Дата",
+ value: "date",
+ selectedBackgroundColor: "#94BF5E",
+ },
+ {
+ label: "Период",
+ value: "period",
+ selectedBackgroundColor: "#94BF5E",
+ },
+ ];
+
+ dayjs.extend(customParseFormat);
+ dayjs.extend(utc);
- const handleChange = (time: never, timeString: string) => {
- console.log(timeString)
- }
- const onChange = (newValue: timeFormatEnum) => {
- setTimeFormat(newValue)
- };
+ function convertToISO8601(timeString: string): string {
+ const parsedTime = dayjs(timeString, {format: "YYYY-MM-DD HH:mm:ss"});
+ const iso8601Time = parsedTime.utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]");
+ return iso8601Time;
+ }
- return (
-
-
-
-
-
{
+ setTimeData(timeString);
+ };
+
+ const onChange = (newValue: timeFormatEnum) => {
+ setTimeFormat(newValue);
+ dispatch(setType())
+ };
+
+ async function handleData() {
+ if (timeFormat === timeFormatEnum.DATE) {
+ mutation({start_date: convertToISO8601(timeData)});
+ } else {
+ mutation({
+ start_date: convertToISO8601(timeData[0]),
+ end_date: convertToISO8601(timeData[1]),
+ });
}
- }}>
- {timeFormat === timeFormatEnum.PERIOD ?
- :
-
+ }
+
+ useEffect(() => {
+ if (data) {
+ dispatch(setData(data));
}
-
-
-
+
+
+
+
+ {timeFormat === timeFormatEnum.PERIOD ? (
+
+ ) : (
+
+ )}
+
+
+
-
-
- {item.name}
-
-
- {item.percent}
-
-
-
-
-
{item.weight}
-
Тонн
-
-
-
+
+
+
+ {item.name}
+
+
+ {item.percent}
+
+
+
+
+
{item.weight}
+
Тонн
+
+
+