страница теплиц добавлена

This commit is contained in:
Аришина) 2024-11-20 11:56:13 +04:00
parent a75a137e35
commit 37abfaf7b2
5 changed files with 151 additions and 0 deletions

View File

@ -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>

View 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;
}

View File

@ -0,0 +1,4 @@
export enum HeatingMode {
Manual,
Auto
}

View File

@ -0,0 +1,4 @@
export enum WateringMode {
Manual,
Auto
}

View 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>
);
};