2024-12-25 23:49:21 +04:00
9 changed files with 12874 additions and 177 deletions
--- a/cucumber-frontend/package-lock.json
+++ b/cucumber-frontend/package-lock.json
--- a/cucumber-frontend/package.json
+++ b/cucumber-frontend/package.json
@ -12,8 +12,9 @@
    "@types/react": "^18.3.12",
    "antd": "^5.21.6",
    "axios": "^1.7.7",
+    "chart.js": "^4.4.7",
    "react": "^18.3.1",
-    "react-avatar": "^5.0.3",
+    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.3.5",
    "react-router-dom": "^6.27.0",
--- a/cucumber-frontend/src/API/api.ts
+++ b/cucumber-frontend/src/API/api.ts
@ -4,7 +4,7 @@ import IFarm from '../models/IFarm';
 import LoginRequest from '../Requests/LoginRequest';
 import IRegisterRequest from '../Requests/RegisterRequest';

-const API_BASE_URL = 'https://localhost:5124/api';
+const API_BASE_URL = 'http://localhost:5124/api';

 const getHeaders = (): { [key: string]: string } => {
  return {
--- a/cucumber-frontend/src/App.tsx
+++ b/cucumber-frontend/src/App.tsx
@ -8,6 +8,7 @@ import { ProfilePage } from './pages/Profile';
 import { GreenHouseListPage } from './pages/GreenHouseListPage';
 import { ReportPage } from './pages/ReportPage';
 import GreenHousePage from './pages/GreenHousePage';
+import {GreenHouseStats} from './components/greenhouse/GreenHouseStats';

 function App() {
  return (
@ -20,6 +21,7 @@ function App() {
          <Route path="/profile" element={<ProfilePage />} />
          <Route path="/greenhouses" element={<GreenHouseListPage />} />
          <Route path="/greenhouses/:id" element={<GreenHousePage />} />
+          <Route path="/greenhouses/:id/statistics" element={<GreenHouseStats />} />
          <Route path="/report" element={<ReportPage />} />
        </Route>
        
--- a/cucumber-frontend/src/components/greenhouse/GreenHouseStats.tsx
+++ b/cucumber-frontend/src/components/greenhouse/GreenHouseStats.tsx
@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react';
+import { DatePicker, Select, Button, Form } from 'antd';
+import { useParams } from 'react-router-dom';
+import { Line } from 'react-chartjs-2';
+
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+    ArcElement,
+    PointElement,
+    LineElement,
+  } from 'chart.js';
+
+import GreenhouseService from '../../core/services/greenhouse-service';
+import { setLabels } from 'react-chartjs-2/dist/utils';
+
+
+export function GreenHouseStats() {
+    const { id } = useParams<{ id: string }>();
+    const [from, setFrom] = useState<Date | null>(null);
+    const [to, setTo] = useState<Date | null>(null);
+    const [type, setType] = useState<'humidity' | 'temperature'>('humidity');
+
+    const service = new GreenhouseService();
+    
+    const temperatureHistory = service.getTemperatureHistory(1);
+    const humidityHistory = service.getHumidityHistory(1);
+    
+    const isButtonDisabled = !from || !to || (to.valueOf() === undefined || from.valueOf() === undefined)
+
+    //const isButtonDisabled = !from || !to || (to.getTime() - from.getTime()) / (1000 * 60 * 60 * 24) > 30;
+    ChartJS.register(ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+const [chartData, setChartData] = useState({
+    labels: [],
+    datasets: [
+        {
+            label: '',
+            data: [],
+            borderColor: '',
+            fill: false,
+            tension: 0.4,
+        },
+    ],
+});
+
+
+    const [data, setData] = useState({
+        labels: ["Jan", "Feb", "Mar", "Apr", "May"],
+                datasets: [
+                  {
+                    label: "Up Line",
+                    data: [10, 20, 15, 40, 30],
+                    borderColor: "rgb(28, 44, 44)", // Customize line color
+                    fill: false,
+                    tension: 0.4, // Adjust line tension for smoother curves
+                  },
+
+                ],
+    });
+
+    useEffect(() => {
+        
+    }, [from, to, type]);
+
+    const createDateRange = (startDate: string, endDate: string) => {
+        const start = new Date(startDate);
+        const end = new Date(endDate);
+        const dates = [];
+        let currentDate = start;
+        while (currentDate <= end) {
+            dates.push(new Date(currentDate));
+            currentDate.setDate(currentDate.getDate() + 1);
+        }
+        return dates;
+    };
+
+    const handleGenerateReport = () => {
+        console.log(from, to, type);
+
+        if (from && to) {
+            const startDate = '2024-12-14';
+            const endDate = '2024-12-24';
+
+            const itemdata = type === 'humidity' ? humidityHistory : temperatureHistory;
+            const startDateObj = new Date(Date.parse(startDate));
+            const endDateObj = new Date(Date.parse(endDate));
+
+            const filteredData = itemdata.filter(item => {
+                const itemDate = new Date(Date.parse(item.date));
+                return itemDate >= startDateObj && itemDate <= endDateObj;
+            });
+
+            filteredData.forEach(element => {
+                console.log('wff');
+                console.log(element.value);
+            });
+
+            const dateRange = createDateRange(startDate, endDate);
+            const labels: string[] = dateRange.map(date => date.getDate() % 5 === 0 ? date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' }) : '');
+
+            setChartData({
+                labels,
+                datasets: [
+                    {
+                        label: type === 'humidity' ? 'Влажность' : 'Температура',
+                        data: itemdata.map(item => item.value),
+                        backgroundColor: [
+                            'rgb(153, 102, 255)'
+                        ],
+                        borderColor: [
+                            'rgb(153, 102, 255)'
+                        ],
+                        borderWidth: 1
+                    }
+                ]
+            } as any);
+
+            // setData({
+            //     labels,
+            //     datasets: [
+            //         {
+            //             label: 'Expenses by Month',
+            //             data: filteredData.map(item => item.value),
+            //             backgroundColor: [
+            //                 'rgb(153, 102, 255)'
+            //             ],
+            //             borderColor: [
+            //                 'rgb(153, 102, 255)'
+            //             ],
+            //             borderWidth: 1
+            //         }
+            //     ]
+            // } as any);
+
+        }
+    };
+
+
+    const options = {
+        scales: {
+          x: {
+            display: true,
+            title: {
+              display: true,
+              text: "Дата",
+            },
+            min: 0,
+            max: 100,
+          },
+          y: {
+            display: true,
+            title: {
+              display: true,
+              text: "Значение",
+            },
+          },
+        },
+      };
+    return (
+        <Form onFinish={handleGenerateReport} className="p-8" style={{ marginTop: '100px', marginLeft: '650px', height: '800px', width: '600px' }}>
+            <h1 className="text-2xl font-bold mb-4">Статистика по выбранной теплице</h1>
+            <div className="grid grid-cols-2 gap-4">
+                <DatePicker value={from} onChange={(date) => setFrom(date)} format="DD.MM.YYYY" />
+                <DatePicker value={to} onChange={(date) => setTo(date)} format="DD.MM.YYYY" />
+            </div>
+            <div className="m-4">
+                <Select value={type} onChange={(value) => setType(value)}>
+                    <Select.Option value="humidity">Влажность</Select.Option>
+                    <Select.Option value="temperature">Температура</Select.Option>
+                </Select>
+            </div>
+            <Button type="primary" htmlType="submit" disabled={isButtonDisabled}>
+                Сформировать отчёт
+            </Button>
+            <div className="m-4">
+                <Line data={chartData} options={options} />
+            </div>
+        </Form>
+  );
+};
+
--- a/cucumber-frontend/src/core/services/greenhouse-service.ts
+++ b/cucumber-frontend/src/core/services/greenhouse-service.ts
@ -7,6 +7,18 @@ export type HistoryData = {
    endAt: string
 } 

+export type TemperatureHistoryData = {
+    id: number,
+    value: number,
+    date: string
+} 
+
+export type HumidityHistoryData = {
+    id: number,
+    value: number,
+    date: string
+} 
+
 export default class GreenhouseService {
    private static _info: GreenhouseInfo = {} as GreenhouseInfo;
    public getData(id: number): GreenhouseInfo {
@ -39,10 +51,40 @@ export default class GreenhouseService {

    public getCommandsHistory(id: number): HistoryData[] {
        return [
-            { id: 1, action: "Открыт вентиль", startAt: new Date().toLocaleDateString(), endAt: new Date().toLocaleDateString() },
-            { id: 2, action: "Закрыт вентиль", startAt: new Date().toLocaleDateString(), endAt: new Date().toLocaleDateString()},
-            { id: 3, action: "Включен нагреватель", startAt: new Date().toLocaleDateString(), endAt: new Date().toLocaleDateString()},
-            { id: 3, action: "выключен нагреватель", startAt: new Date().toLocaleDateString(), endAt: new Date().toLocaleDateString()},
+            { id: 1, action: "Открыт вентиль", startAt: "10.12.2024", endAt: "11.12.2024" },
+            { id: 2, action: "Закрыт вентиль", startAt: "11.12.2024", endAt: "14.12.2024" },
+            { id: 3, action: "Открыт вентиль", startAt: "14.12.2024", endAt: "15.12.2024" },
+            { id: 4, action: "Закрыт вентиль", startAt: "15.12.2024", endAt: "17.12.2024" },
+            { id: 5, action: "Открыт вентиль", startAt: "17.12.2024", endAt: "18.12.2024" },
+
+            { id: 6, action: "Включен нагреватель", startAt: "18.12.2024", endAt: "22.12.2024"},
+            { id: 7, action: "Выключен нагреватель", startAt: "22.12.2024", endAt: "24.12.2024"},
+        ]
+    }
+
+    public getTemperatureHistory(id: number): TemperatureHistoryData[] {
+        return [
+            { id: 1, value: 30, date: "10.12.2024" },
+            { id: 2, value: 28, date: "12.12.2024" },
+            { id: 3, value: 29, date: "14.12.2024" },
+            { id: 4, value: 31, date: "16.12.2024" },
+            { id: 5, value: 27, date: "18.12.2024" },
+            { id: 6, value: 26, date: "20.12.2024" },
+            { id: 7, value: 32, date: "22.12.2024" },
+            { id: 8, value: 33, date: "24.12.2024" },
+        ]
+    }
+
+    public getHumidityHistory(id: number): HumidityHistoryData[] {
+        return [
+            { id: 1, value: 78, date: "10.12.2024" },
+            { id: 2, value: 80, date: "12.12.2024" },
+            { id: 3, value: 81, date: "14.12.2024" },
+            { id: 4, value: 82, date: "16.12.2024" },
+            { id: 5, value: 83, date: "18.12.2024" },
+            { id: 6, value: 79, date: "20.12.2024" },
+            { id: 7, value: 84, date: "22.12.2024" },
+            { id: 8, value: 85, date: "24.12.2024" },
        ]
    }
 }
--- a/cucumber-frontend/src/models/IGreenhouse.tsx
+++ b/cucumber-frontend/src/models/IGreenhouse.tsx
--- a/cucumber-frontend/src/pages/GreenHouseListPage.tsx
+++ b/cucumber-frontend/src/pages/GreenHouseListPage.tsx
@ -1,18 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Modal, Button, Table, Form, Input, Select, Space } from 'antd';
-
-interface IGreenhouse {
-  id: number;
-  name: string;
-  recommendedTemperature: number;
-  wateringMode: 'Manual' | 'Auto';
-  heatingMode: 'Manual' | 'Auto';
-}
+import { Greenhouse, GreenhouseInfo, HeatingMode, WateringMode } from '../core/api/data-contracts';
+import { Link } from 'react-router-dom';

 export function GreenHouseListPage() {
-  const [greenhouses, setGreenhouses] = useState<IGreenhouse[]>([]);
+  const [greenhouses, setGreenhouses] = useState<GreenhouseInfo[]>([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [editingGreenhouse, setEditingGreenhouse] = useState<IGreenhouse | null>(null);
+  const [editingGreenhouse, setEditingGreenhouse] = useState<GreenhouseInfo | null>(null);
  const [form] = Form.useForm();


@ -21,7 +15,24 @@ export function GreenHouseListPage() {
  }, []);

  const fetchGreenhouses = async () => {
-    // Fetch data from API
+    setGreenhouses([
+      {
+        id: 1735006258520,
+        soilTemperature: 32,
+        percentWater: 80,
+        autoWateringStatus: Boolean(WateringMode.Value1),
+        pumpStatus: Boolean(WateringMode.Value1),
+        heatingStatus: Boolean(HeatingMode.Value1)
+      },
+      {
+        id: 1735006258521,
+        soilTemperature: 30,
+        percentWater: 82,
+        autoWateringStatus: Boolean(WateringMode.Value1),
+        pumpStatus: Boolean(WateringMode.Value1),
+        heatingStatus: Boolean(HeatingMode.Value1)
+      },
+    ]);
  };

  const handleAddOrEditSubmit = () => {
@ -37,11 +48,11 @@ export function GreenHouseListPage() {
    });
  };

-  const handleDelete = (id: number) => {
+  const handleDelete = (id?: number) => {
    setGreenhouses(greenhouses.filter(g => g.id !== id));
  };

-  const handleModalOpen = (greenhouse?: IGreenhouse) => {
+  const handleModalOpen = (greenhouse?: GreenhouseInfo) => {
    setEditingGreenhouse(greenhouse || null);
    setIsModalVisible(true);
    if (greenhouse) {
@ -50,113 +61,107 @@ export function GreenHouseListPage() {
  };
  const columns = [
    {
-      title: 'Название',
-      dataIndex: 'name',
-      key: 'name',
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
    },
    {
      title: 'Температура',
-      dataIndex: 'Temperature',
-      key: 'Temperature',
+      dataIndex: 'soilTemperature',
+      key: 'soilTemperature',
    },
    {
      title: 'Процент влажности',
-      dataIndex: 'Humidity',
-      key: 'Humidity',
+      dataIndex: 'percentWater',
+      key: 'percentWater',
    },
    {
      title: 'Режим полива',
-      dataIndex: 'wateringMode',
-      key: 'wateringMode',
-      render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
-    },
-    {
-      title: 'Режим отопления',
-      dataIndex: 'heatingMode',
-      key: 'heatingMode',
-      render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
+      dataIndex: 'autoWateringStatus',
+      key: 'autoWateringStatus',
+      render: (status: boolean) => status ? 'Автоматически' : 'Вручную',
    },
    {
      title: 'Статус вентиля',
-      dataIndex: 'ventilationStatus',
-      key: 'ventilationStatus',
-      render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
+      dataIndex: 'pumpStatus',
+      key: 'pumpStatus',
+      render: (status: boolean) => status ? 'Открыт' : 'Закрыт',
    },
    {
      title: 'Статус нагревателя',
      dataIndex: 'heatingStatus',
      key: 'heatingStatus',
-      render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
+      render: (status: boolean) => status ? 'Включен' : 'Выключен',
    },
    {
-      title: 'Действия',
-      key: 'action',
-      render: (_: any, record: IGreenhouse) => (
-        <Space>
-          <Button>Начать полив</Button>
-          <Button>Начать нагрев</Button>
-          <Button onClick={() => handleDelete(record.id)}>Удалить</Button>
-          <Button onClick={() => handleModalOpen(record)}>Редактировать</Button>
-        </Space>
-      ),
-    },
-  ];
-  return (
-    <div className="container mx-auto p-4">
-      <h1 className="text-3xl font-bold mb-4">Список теплиц</h1>
-      
-      <Button onClick={() => handleModalOpen()} className="mb-4">
-        Добавить теплицу
-      </Button>
+  title: 'Действия',
+  key: 'action',
+  render: (_: any, record: GreenhouseInfo) => (
+    <Space>
+      <Button onClick={() => startWatering(record.id)}>Начать полив</Button>
+      <Button onClick={() => startHeating(record.id)}>Начать нагрев</Button>
+      <Button onClick={() => handleDelete(record.id)}>Удалить</Button>
+      <Button onClick={() => handleModalOpen(record)}>Редактировать</Button>
+      <Link to={`/greenhouses/${record.id}`}>Перейти</Link>
+    </Space>
+  ),
+},
+];
+return (
+  <div className="container mx-auto p-4">
+    <h1 className="text-3xl font-bold mb-4">Список теплиц</h1>

-      <Table columns={columns} dataSource={greenhouses} rowKey="id" />
+    <Button onClick={() => handleModalOpen()} className="mb-4">
+      Добавить теплицу
+    </Button>
+
+    <Table columns={columns} dataSource={greenhouses} rowKey="id" />
+
+    <Modal
+      title={editingGreenhouse ? "Редактирование теплицы" : "Добавление теплицы"}
+      visible={isModalVisible}
+      onOk={handleAddOrEditSubmit}
+      onCancel={() => {
+        setIsModalVisible(false);
+        form.resetFields();
+        setEditingGreenhouse(null);
+      }}
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item name="soilTemperature" label="Температура">
+          <Input type="number" />
+        </Form.Item>
+        <Form.Item name="percentWater" label="Процент влажности">
+          <Input type="number" />
+        </Form.Item>
+        <Form.Item name="autoWateringStatus" label="Режим автополива">
+          <Select>
+            <Select.Option value={WateringMode.Value0}>Отключен</Select.Option>
+            <Select.Option value={WateringMode.Value1}>Включен</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="pumpStatus" label="Статус вентиля">
+          <Select>
+            <Select.Option value={false}>Закрыт</Select.Option>
+            <Select.Option value={true}>Открыт</Select.Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="heatingStatus" label="Статус нагревателя">
+          <Select>
+            <Select.Option value={false}>Отключен</Select.Option>
+            <Select.Option value={true}>Включен</Select.Option>
+          </Select>
+        </Form.Item>
+      </Form>
+    </Modal>
+  </div>
+);
+};
+function startWatering(id: number | undefined): void {
+  return;
+}
+
+function startHeating(id: number | undefined): void {
+  return;
+}

-      <Modal
-        title={editingGreenhouse ? "Редактирование теплицы" : "Добавление теплицы"}
-        visible={isModalVisible}
-        onOk={handleAddOrEditSubmit}
-        onCancel={() => {
-          setIsModalVisible(false);
-          form.resetFields();
-          setEditingGreenhouse(null);
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item name="name" label="Название" rules={[{ required: true }]}>
-            <Input />
-          </Form.Item>
-          <Form.Item name="Temperature" label="Температура">
-            <Input type="number" />
-          </Form.Item>
-          <Form.Item name="Humidity" label="Процент влажности">
-            <Input type="number" />
-          </Form.Item>
-          <Form.Item name="wateringMode" label="Режим полива">
-            <Select>
-              <Select.Option value="Manual">Вручную</Select.Option>
-              <Select.Option value="Auto">Автоматически</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item name="heatingMode" label="Режим отопления">
-            <Select>
-              <Select.Option value="Manual">Вручную</Select.Option>
-              <Select.Option value="Auto">Автоматически</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item name="ventilationStatus" label="Статус вентиля">
-            <Select>
-              <Select.Option value="Manual">Вручную</Select.Option>
-              <Select.Option value="Auto">Автоматически</Select.Option>
-            </Select>
-          </Form.Item>
-          <Form.Item name="heatingStatus" label="Статус нагревателя">
-            <Select>
-              <Select.Option value="Manual">Вручную</Select.Option>
-              <Select.Option value="Auto">Автоматически</Select.Option>
-            </Select>
-          </Form.Item>
-        </Form>
-      </Modal>
-    </div>
-  );
-};
--- a/cucumber-frontend/src/pages/Register.tsx
+++ b/cucumber-frontend/src/pages/Register.tsx
@ -1,9 +1,10 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Button, Form, Input } from 'antd';
-import { createUser } from '../API/api';
+import {  } from '../core/api/Api'
 import IRegisterRequest from '../Requests/RegisterRequest';
 import Text from 'antd/es/typography/Text';
+import { createUser } from '../API/api';

 export function RegisterPage () {
  const [name, setName] = useState('');
@ -33,7 +34,7 @@ export function RegisterPage () {
        console.error('Error registering:');
      }
    } catch (error) {
-      console.error('Error registering:', error);
+      console.error('Error registering:', error, userData);
      alert('Error registering');
    }
  };