chore: update panel-config3

2026-07-01 12:36:03 +00:00
parent 060ecf3a45
commit c2bc729d02
30 changed files with 3162 additions and 0 deletions
--- a/src/pages/DevicePage.tsx
+++ b/src/pages/DevicePage.tsx
@@ -0,0 +1,97 @@
+// 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>
+  );
+}