From a5fa0cfa6469002c2deecee1719d26859857b2ad Mon Sep 17 00:00:00 2001 From: Esteban Date: Sat, 20 Dec 2025 19:45:27 -0600 Subject: [PATCH] Concentrators create and edit form logic with TTS mock data --- src/api/concentrators.ts | 35 -- src/pages/concentrators/ConcentratorsPage.tsx | 479 +++++++++++++----- 2 files changed, 350 insertions(+), 164 deletions(-) diff --git a/src/api/concentrators.ts b/src/api/concentrators.ts index 2ca4261..5f8034a 100644 --- a/src/api/concentrators.ts +++ b/src/api/concentrators.ts @@ -19,11 +19,6 @@ export interface ConcentratorRecord { "Installed Time": string; "Communication Time": string; "Instruction Manual": string; - "Gateway ID": number; - "Gateway EUI": string; - "Gateway Name": string; - "Gateway Description": string; - "Antenna Placement": string; }; } @@ -46,11 +41,6 @@ export interface Concentrator { "Installed Time": string; "Communication Time": string; "Instruction Manual": string; - "Gateway ID": number; - "Gateway EUI": string; - "Gateway Name": string; - "Gateway Description": string; - "Antenna Placement": string; } export const fetchConcentrators = async (): Promise => { @@ -77,11 +67,6 @@ export const fetchConcentrators = async (): Promise => { "Installed Time": r.fields["Installed Time"] || "", "Communication Time": r.fields["Communication Time"] || "", "Instruction Manual": r.fields["Instruction Manual"] || "", - "Gateway ID": r.fields["Gateway ID"] || 0, - "Gateway EUI": r.fields["Gateway EUI"] || "", - "Gateway Name": r.fields["Gateway Name"] || "", - "Gateway Description": r.fields["Gateway Description"] || "", - "Antenna Placement": r.fields["Antenna Placement"] || "Indoor", })); } catch (error) { console.error("Error fetching concentrators:", error); @@ -107,11 +92,6 @@ export const createConcentrator = async ( "Installed Time": concentratorData["Installed Time"], "Communication Time": concentratorData["Communication Time"], "Instruction Manual": concentratorData["Instruction Manual"], - "Gateway ID": concentratorData["Gateway ID"], - "Gateway EUI": concentratorData["Gateway EUI"], - "Gateway Name": concentratorData["Gateway Name"], - "Gateway Description": concentratorData["Gateway Description"], - "Antenna Placement": concentratorData["Antenna Placement"], }, }), }); @@ -138,11 +118,6 @@ export const createConcentrator = async ( "Installed Time": createdRecord.fields["Installed Time"] || concentratorData["Installed Time"], "Communication Time": createdRecord.fields["Communication Time"] || concentratorData["Communication Time"], "Instruction Manual": createdRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"], - "Gateway ID": createdRecord.fields["Gateway ID"] || concentratorData["Gateway ID"], - "Gateway EUI": createdRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"], - "Gateway Name": createdRecord.fields["Gateway Name"] || concentratorData["Gateway Name"], - "Gateway Description": createdRecord.fields["Gateway Description"] || concentratorData["Gateway Description"], - "Antenna Placement": createdRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"], }; } catch (error) { console.error("Error creating concentrator:", error); @@ -170,11 +145,6 @@ export const updateConcentrator = async ( "Installed Time": concentratorData["Installed Time"], "Communication Time": concentratorData["Communication Time"], "Instruction Manual": concentratorData["Instruction Manual"], - "Gateway ID": concentratorData["Gateway ID"], - "Gateway EUI": concentratorData["Gateway EUI"], - "Gateway Name": concentratorData["Gateway Name"], - "Gateway Description": concentratorData["Gateway Description"], - "Antenna Placement": concentratorData["Antenna Placement"], }, }), }); @@ -205,11 +175,6 @@ export const updateConcentrator = async ( "Installed Time": updatedRecord.fields["Installed Time"] || concentratorData["Installed Time"], "Communication Time": updatedRecord.fields["Communication Time"] || concentratorData["Communication Time"], "Instruction Manual": updatedRecord.fields["Instruction Manual"] || concentratorData["Instruction Manual"], - "Gateway ID": updatedRecord.fields["Gateway ID"] || concentratorData["Gateway ID"], - "Gateway EUI": updatedRecord.fields["Gateway EUI"] || concentratorData["Gateway EUI"], - "Gateway Name": updatedRecord.fields["Gateway Name"] || concentratorData["Gateway Name"], - "Gateway Description": updatedRecord.fields["Gateway Description"] || concentratorData["Gateway Description"], - "Antenna Placement": updatedRecord.fields["Antenna Placement"] || concentratorData["Antenna Placement"], }; } catch (error) { console.error("Error updating concentrator:", error); diff --git a/src/pages/concentrators/ConcentratorsPage.tsx b/src/pages/concentrators/ConcentratorsPage.tsx index 1d83863..0734845 100644 --- a/src/pages/concentrators/ConcentratorsPage.tsx +++ b/src/pages/concentrators/ConcentratorsPage.tsx @@ -18,6 +18,15 @@ interface User { project?: string; // asignado si no es superadmin } +interface GatewayData { + "Gateway ID": number; + "Gateway EUI": string; + "Gateway Name": string; + "Gateway Description": string; + "Antenna Placement": "Indoor" | "Outdoor"; + concentratorId?: string; +} + /* ================= COMPONENT ================= */ export default function ConcentratorsPage() { // Simulación de usuario actual @@ -99,6 +108,9 @@ export default function ConcentratorsPage() { "Installed Time": new Date().toISOString().slice(0, 10), "Communication Time": new Date().toISOString(), "Instruction Manual": "", + }); + + const getEmptyGatewayData = (): GatewayData => ({ "Gateway ID": 0, "Gateway EUI": "", "Gateway Name": "", @@ -107,10 +119,51 @@ export default function ConcentratorsPage() { }); const [form, setForm] = useState>(getEmptyConcentrator()); + const [gatewayForm, setGatewayForm] = useState(getEmptyGatewayData()); + const [errors, setErrors] = useState<{ [key: string]: boolean }>({}); /* ================= CRUD ================= */ + const createOrUpdateGateway = async (gatewayData: GatewayData): Promise => { + //await fetch('/api/gateways', { method: 'POST', body: JSON.stringify(gatewayData) }) + + return new Promise((resolve) => { + setTimeout(() => { + console.log('Gateway data that would be sent to API:', gatewayData); + resolve(); + }, 500); + }); + }; + + const validateForm = (): boolean => { + const newErrors: { [key: string]: boolean } = {}; + + if (!form["Device Name"].trim()) newErrors["Device Name"] = true; + if (!form["Device S/N"].trim()) newErrors["Device S/N"] = true; + if (!form["Operator"].trim()) newErrors["Operator"] = true; + if (!form["Instruction Manual"].trim()) newErrors["Instruction Manual"] = true; + if (!form["Installed Time"]) newErrors["Installed Time"] = true; + if (!form["Device Time"]) newErrors["Device Time"] = true; + if (!form["Communication Time"]) newErrors["Communication Time"] = true; + + if (!gatewayForm["Gateway ID"] || gatewayForm["Gateway ID"] === 0) { + newErrors["Gateway ID"] = true; + } + if (!gatewayForm["Gateway EUI"].trim()) newErrors["Gateway EUI"] = true; + if (!gatewayForm["Gateway Name"].trim()) newErrors["Gateway Name"] = true; + if (!gatewayForm["Gateway Description"].trim()) newErrors["Gateway Description"] = true; + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + const handleSave = async () => { + if (!validateForm()) { + return; + } + try { + let savedConcentrator: Concentrator; + if (editingSerial) { const concentratorToUpdate = concentrators.find(c => c["Device S/N"] === editingSerial); if (!concentratorToUpdate) { @@ -123,13 +176,30 @@ export default function ConcentratorsPage() { c.id === concentratorToUpdate.id ? updatedConcentrator : c ) ); + savedConcentrator = updatedConcentrator; } else { const newConcentrator = await createConcentrator(form); setConcentrators((prev) => [...prev, newConcentrator]); + savedConcentrator = newConcentrator; } + + try { + const gatewayDataWithRef = { + ...gatewayForm, + concentratorId: savedConcentrator.id, + }; + await createOrUpdateGateway(gatewayDataWithRef); + console.log('Gateway data saved successfully'); + } catch (gatewayError) { + console.error('Error saving gateway data:', gatewayError); + alert('Concentrator saved, but there was an error saving gateway data.'); + } + setShowModal(false); setEditingSerial(null); setForm({ ...getEmptyConcentrator(), "Area Name": selectedProject }); + setGatewayForm(getEmptyGatewayData()); + setErrors({}); setActiveConcentrator(null); } catch (error) { console.error('Error saving concentrator:', error); @@ -223,6 +293,8 @@ export default function ConcentratorsPage() { + - - setForm({ ...form, "Installed Time": e.target.value }) - } - /> +
+ { + setForm({ ...form, "Installed Time": e.target.value }); + if (errors["Installed Time"]) { + setErrors({ ...errors, "Installed Time": false }); + } + }} + required + /> + {errors["Installed Time"] && ( +

This field is required

+ )} +
- - setForm({ - ...form, - "Device Time": new Date(e.target.value).toISOString(), - }) - } - /> +
+ { + setForm({ + ...form, + "Device Time": new Date(e.target.value).toISOString(), + }); + if (errors["Device Time"]) { + setErrors({ ...errors, "Device Time": false }); + } + }} + required + /> + {errors["Device Time"] && ( +

This field is required

+ )} +
- - setForm({ - ...form, - "Communication Time": new Date(e.target.value).toISOString(), - }) - } - /> +
+ { + setForm({ + ...form, + "Communication Time": new Date(e.target.value).toISOString(), + }); + if (errors["Communication Time"]) { + setErrors({ ...errors, "Communication Time": false }); + } + }} + required + /> + {errors["Communication Time"] && ( +

This field is required

+ )} +
+ - - setForm({ ...form, "Gateway ID": parseInt(e.target.value) || 0 }) - } - /> +
+

+ Gateway Information +

- - setForm({ ...form, "Gateway EUI": e.target.value }) - } - /> +
+ { + setGatewayForm({ + ...gatewayForm, + "Gateway ID": parseInt(e.target.value) || 0, + }); + if (errors["Gateway ID"]) { + setErrors({ ...errors, "Gateway ID": false }); + } + }} + required + min="1" + /> + {errors["Gateway ID"] && ( +

This field is required

+ )} +
- - setForm({ ...form, "Gateway Name": e.target.value }) - } - /> +
+ { + setGatewayForm({ ...gatewayForm, "Gateway EUI": e.target.value }); + if (errors["Gateway EUI"]) { + setErrors({ ...errors, "Gateway EUI": false }); + } + }} + required + /> + {errors["Gateway EUI"] && ( +

This field is required

+ )} +
-