feat(camera): Refactor camera management with new components, update localization keys, and enhance API integration
This commit is contained in:
192
src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx
Normal file
192
src/pages/Manager/Device/Camera/components/ConfigCameraV6.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
import { apiQueryConfigAlarm } from '@/services/master/MessageController';
|
||||
import { useModel } from '@umijs/max';
|
||||
import { Button, Card, Col, Row, Select, theme, Typography } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
||||
// Recording modes for V6
|
||||
const RECORDING_MODES = [
|
||||
{ label: 'Không ghi', value: 'none' },
|
||||
{ label: 'Theo cảnh báo', value: 'alarm' },
|
||||
{ label: '24/24', value: 'all' },
|
||||
];
|
||||
|
||||
interface CameraV6Props {
|
||||
thing: MasterModel.Thing | null;
|
||||
cameraConfig?: MasterModel.CameraV6 | null;
|
||||
}
|
||||
|
||||
const CameraV6: React.FC<CameraV6Props> = ({ thing, cameraConfig }) => {
|
||||
const { token } = theme.useToken();
|
||||
const { initialState } = useModel('@@initialState');
|
||||
const [selectedAlerts, setSelectedAlerts] = useState<string[]>([]);
|
||||
const [recordingMode, setRecordingMode] = useState<'none' | 'alarm' | 'all'>(
|
||||
'none',
|
||||
);
|
||||
const [alarmConfig, setAlarmConfig] = useState<MasterModel.Alarm[] | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
// Initialize states from cameraConfig when it's available
|
||||
useEffect(() => {
|
||||
if (cameraConfig) {
|
||||
// Set recording mode from config
|
||||
if (cameraConfig.record_type) {
|
||||
setRecordingMode(cameraConfig.record_type);
|
||||
}
|
||||
|
||||
// Set selected alerts from config
|
||||
if (
|
||||
cameraConfig.record_alarm_list &&
|
||||
Array.isArray(cameraConfig.record_alarm_list)
|
||||
) {
|
||||
setSelectedAlerts(cameraConfig.record_alarm_list);
|
||||
}
|
||||
}
|
||||
}, [cameraConfig]);
|
||||
|
||||
// Fetch alarm config when thing data is available and recording mode is 'alarm'
|
||||
useEffect(() => {
|
||||
const fetchAlarmConfig = async () => {
|
||||
if (
|
||||
!thing ||
|
||||
!initialState?.currentUserProfile?.metadata?.frontend_thing_key ||
|
||||
recordingMode !== 'alarm'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const resp = await apiQueryConfigAlarm(
|
||||
thing.metadata?.data_channel_id || '',
|
||||
initialState.currentUserProfile.metadata.frontend_thing_key,
|
||||
{
|
||||
offset: 0,
|
||||
limit: 1,
|
||||
subtopic: `config.${thing.metadata?.type}.alarms`,
|
||||
},
|
||||
);
|
||||
if (resp.messages && resp.messages.length > 0) {
|
||||
const parsed = resp.messages[0].string_value_parsed;
|
||||
if (Array.isArray(parsed)) {
|
||||
setAlarmConfig(parsed as MasterModel.Alarm[]);
|
||||
} else {
|
||||
setAlarmConfig([]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch alarm config:', error);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAlarmConfig();
|
||||
}, [thing, initialState, recordingMode]);
|
||||
|
||||
const handleAlertToggle = (alertId: string) => {
|
||||
if (selectedAlerts.includes(alertId)) {
|
||||
setSelectedAlerts(selectedAlerts.filter((id) => id !== alertId));
|
||||
} else {
|
||||
setSelectedAlerts([...selectedAlerts, alertId]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearAlerts = () => {
|
||||
setSelectedAlerts([]);
|
||||
};
|
||||
|
||||
const handleSubmitAlerts = () => {
|
||||
console.log('Submit alerts:', {
|
||||
recordingMode,
|
||||
selectedAlerts,
|
||||
});
|
||||
// TODO: Call API to save alert configuration
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="p-4">
|
||||
{/* Recording Mode */}
|
||||
<div className="mb-6">
|
||||
<Text strong className="block mb-2">
|
||||
Ghi dữ liệu camera
|
||||
</Text>
|
||||
<div className="flex gap-8 items-center">
|
||||
<Select
|
||||
value={recordingMode}
|
||||
onChange={setRecordingMode}
|
||||
options={RECORDING_MODES}
|
||||
className="w-full sm:w-1/2 md:w-1/3 lg:w-1/4"
|
||||
/>
|
||||
<Button type="primary" onClick={handleSubmitAlerts}>
|
||||
Gửi đi
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Alert List - Only show when mode is 'alarm' */}
|
||||
{recordingMode === 'alarm' && (
|
||||
<div>
|
||||
<Text strong className="block mb-2">
|
||||
Danh sách cảnh báo
|
||||
</Text>
|
||||
|
||||
<div
|
||||
className="flex justify-between items-center mb-4 px-3 py-2 rounded border"
|
||||
style={{
|
||||
background: token.colorBgContainer,
|
||||
borderColor: token.colorBorder,
|
||||
}}
|
||||
>
|
||||
<Text type="secondary">đã chọn {selectedAlerts.length} mục</Text>
|
||||
<Button type="link" onClick={handleClearAlerts}>
|
||||
Xóa
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Alert Cards Grid */}
|
||||
<Row gutter={[12, 12]}>
|
||||
{alarmConfig?.map((alarm) => {
|
||||
const alarmId = alarm.id ?? '';
|
||||
const isSelected =
|
||||
alarmId !== '' && selectedAlerts.includes(alarmId);
|
||||
return (
|
||||
<Col xs={12} sm={8} md={6} lg={4} xl={4} key={alarmId}>
|
||||
<Card
|
||||
size="small"
|
||||
hoverable
|
||||
onClick={() => handleAlertToggle(alarmId)}
|
||||
className="cursor-pointer h-20 flex items-center justify-center"
|
||||
style={{
|
||||
borderColor: isSelected
|
||||
? token.colorPrimary
|
||||
: token.colorBorder,
|
||||
borderWidth: isSelected ? 2 : 1,
|
||||
background: isSelected
|
||||
? token.colorPrimaryBg
|
||||
: token.colorBgContainer,
|
||||
}}
|
||||
>
|
||||
<div className="p-2 text-center w-full">
|
||||
<Text
|
||||
className="text-xs break-words"
|
||||
style={{
|
||||
color: isSelected
|
||||
? token.colorPrimary
|
||||
: token.colorText,
|
||||
}}
|
||||
>
|
||||
{alarm.name}
|
||||
</Text>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
);
|
||||
})}
|
||||
</Row>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default CameraV6;
|
||||
Reference in New Issue
Block a user