Ajustes UI en formulario de concentradores
This commit is contained in:
@@ -240,11 +240,18 @@ export default function ConcentratorsPage() {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setConcentrators([...concentrators])}
|
||||
onClick={() => {
|
||||
setSearch("");
|
||||
setActiveConcentrator(null);
|
||||
setShowModal(false);
|
||||
setEditingSerial(null);
|
||||
setForm(getEmptyConcentrator());
|
||||
}}
|
||||
className="flex items-center gap-2 px-4 py-2 border border-white/40 rounded-lg"
|
||||
>
|
||||
<RefreshCcw size={16} /> Refresh
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -306,91 +313,91 @@ export default function ConcentratorsPage() {
|
||||
{editingSerial ? "Edit Concentrator" : "Add Concentrator"}
|
||||
</h2>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Device Name</label>
|
||||
<div className="space-y-3">
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Enter device name"
|
||||
placeholder="Device Name"
|
||||
value={form["Device Name"]}
|
||||
onChange={(e) => setForm({ ...form, "Device Name": e.target.value })}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Device Name": e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Device S/N</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Enter device serial number"
|
||||
placeholder="Device S/N"
|
||||
value={form["Device S/N"]}
|
||||
onChange={(e) => setForm({ ...form, "Device S/N": e.target.value })}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Device S/N": e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Operator</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Enter operator name"
|
||||
placeholder="Operator"
|
||||
value={form["Operator"]}
|
||||
onChange={(e) => setForm({ ...form, "Operator": e.target.value })}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Operator": e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Instruction Manual</label>
|
||||
<input
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
placeholder="Enter instruction manual"
|
||||
placeholder="Instruction Manual"
|
||||
value={form["Instruction Manual"]}
|
||||
onChange={(e) => setForm({ ...form, "Instruction Manual": e.target.value })}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Instruction Manual": e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Device Status</label>
|
||||
<button
|
||||
onClick={() =>
|
||||
setForm({
|
||||
...form,
|
||||
"Device Status": form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
||||
"Device Status":
|
||||
form["Device Status"] === "ACTIVE" ? "INACTIVE" : "ACTIVE",
|
||||
})
|
||||
}
|
||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50"
|
||||
className="w-full border rounded px-3 py-2 hover:bg-gray-50 text-left"
|
||||
>
|
||||
Status: {form["Device Status"]}
|
||||
Device Status: {form["Device Status"]}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Installed Time</label>
|
||||
<input
|
||||
type="date"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Installed Time"]}
|
||||
onChange={(e) => setForm({ ...form, "Installed Time": e.target.value })}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, "Installed Time": e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Device Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Device Time"].slice(0, 16)}
|
||||
onChange={(e) => setForm({ ...form, "Device Time": new Date(e.target.value).toISOString() })}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
"Device Time": new Date(e.target.value).toISOString(),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<label className="block text-sm font-medium text-gray-700">Communication Time</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
className="w-full border px-3 py-2 rounded"
|
||||
value={form["Communication Time"].slice(0, 16)}
|
||||
onChange={(e) => setForm({ ...form, "Communication Time": new Date(e.target.value).toISOString() })}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
"Communication Time": new Date(e.target.value).toISOString(),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex justify-end gap-2 pt-3">
|
||||
<button onClick={() => setShowModal(false)}>Cancel</button>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user