98 lines
3.9 KiB
TypeScript
98 lines
3.9 KiB
TypeScript
// src/pages/DevicePage.tsx - Device config page
|
|
import { useEffect, useState } from 'react';
|
|
import { useDeviceStore } from '../stores/deviceStore';
|
|
import type { DeviceFormValues } from '../types';
|
|
|
|
export function DevicePage() {
|
|
const { config, loading, error, fetchDevice, updateDevice } = useDeviceStore();
|
|
const [form, setForm] = useState<DeviceFormValues>({ type: 0, sn: 0, name: '', unit: 1, room: 101, keypad: 1 });
|
|
|
|
useEffect(() => { fetchDevice(); }, [fetchDevice]);
|
|
|
|
useEffect(() => {
|
|
if (config) {
|
|
setForm({
|
|
type: config.type,
|
|
sn: config.sn,
|
|
name: config.name,
|
|
unit: config.unit,
|
|
room: config.room,
|
|
keypad: config.keypad ?? 1
|
|
});
|
|
}
|
|
}, [config]);
|
|
|
|
const handleChange = (field: keyof DeviceFormValues, value: string | number) => {
|
|
setForm({ ...form, [field]: value });
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
await updateDevice(form);
|
|
};
|
|
|
|
return (
|
|
<div className="section">
|
|
<div className="container">
|
|
<h1 className="title is-2">Device Configuration</h1>
|
|
{error && <div className="notification is-danger">{error}</div>}
|
|
|
|
<div className="columns">
|
|
<div className="column is-one-quarter">
|
|
<label className="label">Type</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="number" value={form.type} onChange={e => handleChange('type', Number(e.target.value))} min="0" />
|
|
<span className="icon is-small is-left"><i className="fas fa-microchip"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="column is-one-quarter">
|
|
<label className="label">Serial Number</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="number" value={form.sn} onChange={e => handleChange('sn', Number(e.target.value))} min="0" />
|
|
<span className="icon is-small is-left"><i className="fas fa-fingerprint"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="column">
|
|
<label className="label">Name</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="text" value={form.name} onChange={e => handleChange('name', e.target.value)} />
|
|
<span className="icon is-small is-left"><i className="fas fa-tag"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="columns">
|
|
<div className="column is-one-quarter">
|
|
<label className="label">Unit</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="number" value={form.unit} onChange={e => handleChange('unit', Number(e.target.value))} min="1" />
|
|
<span className="icon is-small is-left"><i className="fas fa-building"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="column is-one-quarter">
|
|
<label className="label">Room</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="text" value={form.room} onChange={e => handleChange('room', Number(e.target.value))} />
|
|
<span className="icon is-small is-left"><i className="fas fa-door-open"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="column is-one-quarter">
|
|
<label className="label">Keypad</label>
|
|
<div className="control has-icons-left">
|
|
<input className="input" type="number" value={form.keypad || ''} onChange={e => handleChange('keypad', Number(e.target.value))} min="1" />
|
|
<span className="icon is-small is-left"><i className="fas fa-keyboard"></i></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" className="button is-success" onClick={handleSave} disabled={loading}>
|
|
{loading ? 'Saving...' : 'Save Device Config'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|