74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { IotDevice } from '../types.ts';
|
|
import IotDeviceDashboard from './iot/IotDeviceDashboard.tsx';
|
|
import IotDeviceForm from './iot/IotDeviceForm.tsx';
|
|
import { useAppContext } from '../context/AppContext.tsx';
|
|
|
|
const IotDeviceManagementPage: React.FC = () => {
|
|
const {
|
|
iotDevices: devices,
|
|
onAddIotDevice: onAddDevice,
|
|
onUpdateIotDevice: onUpdateDevice,
|
|
onDeleteIotDevice: onDeleteDevice,
|
|
locations,
|
|
coops,
|
|
floors,
|
|
getFullLocationName,
|
|
} = useAppContext();
|
|
|
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
const [editingDevice, setEditingDevice] = useState<IotDevice | null>(null);
|
|
|
|
const handleAddNew = () => {
|
|
setEditingDevice(null);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const handleEdit = (device: IotDevice) => {
|
|
setEditingDevice(device);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const handleCloseForm = () => {
|
|
setIsFormOpen(false);
|
|
setEditingDevice(null);
|
|
};
|
|
|
|
const handleSave = (
|
|
deviceData: Omit<IotDevice, 'id' | 'status' | 'lastHeartbeat'>,
|
|
id?: string
|
|
) => {
|
|
if (id && editingDevice) {
|
|
onUpdateDevice({ ...editingDevice, ...deviceData, id });
|
|
} else {
|
|
onAddDevice(deviceData);
|
|
}
|
|
handleCloseForm();
|
|
};
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<IotDeviceDashboard
|
|
devices={devices}
|
|
onAddNew={handleAddNew}
|
|
onEdit={handleEdit}
|
|
onDelete={onDeleteDevice}
|
|
getFullLocationName={getFullLocationName}
|
|
/>
|
|
{isFormOpen && (
|
|
<IotDeviceForm
|
|
isOpen={isFormOpen}
|
|
onClose={handleCloseForm}
|
|
onSave={handleSave}
|
|
deviceToEdit={editingDevice}
|
|
locations={locations}
|
|
coops={coops}
|
|
floors={floors}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default IotDeviceManagementPage;
|