страница теплиц добавлена
This commit is contained in:
parent
a75a137e35
commit
37abfaf7b2
@ -5,6 +5,7 @@ import {LoginPage} from './pages/Login';
|
||||
import {RegisterPage} from './pages/Register';
|
||||
import {AppLayout} from './components/Layout';
|
||||
import { ProfilePage } from './pages/Profile';
|
||||
import { GreenHouseListPage } from './pages/GreenHouseListPage';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -15,6 +16,7 @@ function App() {
|
||||
<Route path="/login" element={<LoginPage />} />
|
||||
<Route path="/register" element={<RegisterPage />} />
|
||||
<Route path="/profile" element={<ProfilePage />} />
|
||||
<Route path="/greenhouses" element={<GreenHouseListPage />} />
|
||||
</Route>
|
||||
|
||||
</Routes>
|
||||
|
13
cucumber-frontend/src/models/IGreenGouse.tsx
Normal file
13
cucumber-frontend/src/models/IGreenGouse.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import IFarm from "./IFarm";
|
||||
import { HeatingMode } from "./Support/HeatingMode";
|
||||
import { WateringMode } from "./Support/WateringMode";
|
||||
|
||||
export interface IGreenhouse {
|
||||
id: number;
|
||||
recommendedTemperature: number;
|
||||
wateringMode: WateringMode;
|
||||
heatingMode: HeatingMode;
|
||||
farmId: number;
|
||||
farm?: IFarm;
|
||||
}
|
||||
|
4
cucumber-frontend/src/models/Support/HeatingMode.ts
Normal file
4
cucumber-frontend/src/models/Support/HeatingMode.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export enum HeatingMode {
|
||||
Manual,
|
||||
Auto
|
||||
}
|
4
cucumber-frontend/src/models/Support/WateringMode.ts
Normal file
4
cucumber-frontend/src/models/Support/WateringMode.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export enum WateringMode {
|
||||
Manual,
|
||||
Auto
|
||||
}
|
128
cucumber-frontend/src/pages/GreenHouseListPage.tsx
Normal file
128
cucumber-frontend/src/pages/GreenHouseListPage.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
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';
|
||||
}
|
||||
|
||||
export function GreenHouseListPage() {
|
||||
const [greenhouses, setGreenhouses] = useState<IGreenhouse[]>([]);
|
||||
const [isModalVisible, setIsModalVisible] = useState(false);
|
||||
const [editingGreenhouse, setEditingGreenhouse] = useState<IGreenhouse | null>(null);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
fetchGreenhouses();
|
||||
}, []);
|
||||
|
||||
const fetchGreenhouses = async () => {
|
||||
// Fetch data from API
|
||||
};
|
||||
|
||||
const handleAddOrEditSubmit = () => {
|
||||
form.validateFields().then((values) => {
|
||||
if (editingGreenhouse) {
|
||||
setGreenhouses(greenhouses.map(g => g.id === editingGreenhouse.id ? { ...g, ...values } : g));
|
||||
} else {
|
||||
setGreenhouses([...greenhouses, { id: Date.now(), ...values }]);
|
||||
}
|
||||
setIsModalVisible(false);
|
||||
setEditingGreenhouse(null);
|
||||
form.resetFields();
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setGreenhouses(greenhouses.filter(g => g.id !== id));
|
||||
};
|
||||
|
||||
const handleModalOpen = (greenhouse?: IGreenhouse) => {
|
||||
setEditingGreenhouse(greenhouse || null);
|
||||
setIsModalVisible(true);
|
||||
if (greenhouse) {
|
||||
form.setFieldsValue(greenhouse);
|
||||
}
|
||||
};
|
||||
const columns = [
|
||||
{
|
||||
title: 'Название',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: 'Температура',
|
||||
dataIndex: 'recommendedTemperature',
|
||||
key: 'recommendedTemperature',
|
||||
},
|
||||
{
|
||||
title: 'Режим полива',
|
||||
dataIndex: 'wateringMode',
|
||||
key: 'wateringMode',
|
||||
render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
|
||||
},
|
||||
{
|
||||
title: 'Режим отопления',
|
||||
dataIndex: 'heatingMode',
|
||||
key: 'heatingMode',
|
||||
render: (text: string) => text === 'Manual' ? 'Вручную' : 'Автоматически',
|
||||
},
|
||||
{
|
||||
title: 'Действия',
|
||||
key: 'action',
|
||||
render: (_: any, record: IGreenhouse) => (
|
||||
<Space>
|
||||
<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>
|
||||
|
||||
<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="name" label="Название" rules={[{ required: true }]}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="recommendedTemperature" 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>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user