71 lines
1.7 KiB
TypeScript
71 lines
1.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Camera } from '../types.ts';
|
|
import CameraDashboard from './camera/CameraDashboard.tsx';
|
|
import CameraForm from './camera/CameraForm.tsx';
|
|
import { useAppContext } from '../context/AppContext.tsx';
|
|
|
|
const CameraManagementPage: React.FC = () => {
|
|
const {
|
|
cameras,
|
|
onAddCamera,
|
|
onUpdateCamera,
|
|
onDeleteCamera,
|
|
locations,
|
|
coops,
|
|
floors,
|
|
getFullLocationName,
|
|
} = useAppContext();
|
|
|
|
const [isFormOpen, setIsFormOpen] = useState(false);
|
|
const [editingCamera, setEditingCamera] = useState<Camera | null>(null);
|
|
|
|
const handleAddNew = () => {
|
|
setEditingCamera(null);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const handleEdit = (camera: Camera) => {
|
|
setEditingCamera(camera);
|
|
setIsFormOpen(true);
|
|
};
|
|
|
|
const handleCloseForm = () => {
|
|
setIsFormOpen(false);
|
|
setEditingCamera(null);
|
|
};
|
|
|
|
const handleSave = (cameraData: Omit<Camera, 'id' | 'status'>, id?: string) => {
|
|
if (id && editingCamera) {
|
|
onUpdateCamera({ ...cameraData, id, status: editingCamera.status });
|
|
} else {
|
|
onAddCamera(cameraData);
|
|
}
|
|
handleCloseForm();
|
|
};
|
|
|
|
return (
|
|
<main className="px-4 sm:px-6 lg:px-8 pb-8">
|
|
<CameraDashboard
|
|
cameras={cameras}
|
|
onAddNew={handleAddNew}
|
|
onEdit={handleEdit}
|
|
onDelete={onDeleteCamera}
|
|
getFullLocationName={getFullLocationName}
|
|
/>
|
|
{isFormOpen && (
|
|
<CameraForm
|
|
isOpen={isFormOpen}
|
|
onClose={handleCloseForm}
|
|
onSave={handleSave}
|
|
cameraToEdit={editingCamera}
|
|
locations={locations}
|
|
coops={coops}
|
|
floors={floors}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
};
|
|
|
|
export default CameraManagementPage;
|