initial code

2026-01-09 13:17:13 +07:00
commit d56d1c193b
68 changed files with 6529 additions and 0 deletions
--- a/src/features/device/add/index.tsx
+++ b/src/features/device/add/index.tsx
@@ -0,0 +1,150 @@
+import { useState } from "react";
+import {
+  getDevices,
+  saveDevices,
+  isDuplicateDevice,
+} from "../../../utils/storage";
+import { useNavigate } from "@tanstack/react-router";
+
+const initialState: DeviceData = {
+  towerNumber: "",
+  floorName: "",
+  unitNumber: "",
+  roomName: "",
+  deviceName: "",
+  deviceType: "",
+  code: "",
+  payload: "",
+  active: true,
+  status: false,
+};
+
+export default function AddDeviceFeature() {
+  const [form, setForm] = useState<DeviceData>(initialState);
+  const navigate = useNavigate();
+
+  function handleChange(
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+  ) {
+    const { name, value } = e.target;
+    setForm((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+
+    const devices = getDevices();
+
+    const deviceToSave: DeviceData = {
+      ...form,
+      deviceLabel: form.deviceLabel || `${form.roomName} ${form.deviceName}`,
+    };
+
+    if (isDuplicateDevice(devices, deviceToSave)) {
+      return;
+    }
+
+    saveDevices([...devices, deviceToSave]);
+    setForm(initialState);
+    navigate({ to: '/' });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="p-4">
+      <h2 className="text-lg font-semibold mb-4">Add Device</h2>
+      <div className="flex flex-col gap-4">
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Tower
+          </label>
+          <input
+            name="towerNumber"
+            value={form.towerNumber}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Floor
+          </label>
+          <input
+            name="floorName"
+            value={form.floorName}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Room
+          </label>
+          <input
+            name="roomName"
+            value={form.roomName}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Unit
+          </label>
+          <input
+            name="unitNumber"
+            value={form.unitNumber}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Device Name
+          </label>
+          <input
+            name="deviceName"
+            value={form.deviceName}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Device Type
+          </label>
+          <input
+            name="deviceType"
+            value={form.deviceType}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required 
+          />
+        </div>
+        <div>
+          <label className="mb-1 text-neutral-900 block font-semibold">
+            Device Label
+          </label>
+          <input
+            name="deviceLabel"
+            value={form.deviceLabel}
+            onChange={handleChange}
+            className="p-2 border border-neutral-200 w-full rounded-md"
+            required 
+          />
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-orange-500 text-white py-2 rounded-lg mt-8"
+      >
+        Save Device
+      </button>
+    </form>
+  );
+}