Refactor ComboBoxWidget and settings form: remove unused handleComboAdd function, enhance form state serialization, and improve room option handling

templates/settings.html

@@ -140,39 +140,52 @@
 {% endblock %}
 
 {% block script %}
-    const formState = {
-        brands: {{ brands | tojson }},
-        types: {{ types | tojson }},
-        sections: {{ sections | tojson }},
-        functions: {{ functions | tojson }},
-        rooms: {{ rooms | tojson }},
-    };
+    function isSerializable(obj) {
+        try {
+            JSON.stringify(obj);
+            return true;
+        } catch {
+            return false;
+        }
+    }
 
     function buildFormState() {
         function extractOptions(id) {
             const select = document.getElementById(`${id}-list`);
-            return Array.from(select.options).map(opt => ({
-                name: opt.textContent.trim(),
-                id: opt.value || undefined
-            }));
+            return Array.from(select.options).map(opt => {
+                const name = opt.textContent.trim();
+                const rawId = opt.value?.trim();
+                return {
+                    name,
+                    ...(rawId ? { id: /^\d+$/.test(rawId) ? parseInt(rawId, 10) : rawId } : {})
+                };
+            });
         }
 
         function sanitizeFk(val) {
-            return val && val !== "null" && val !== "" ? val : null;
+            if (val && val !== "null" && val !== "") {
+                return /^\d+$/.test(val) ? parseInt(val, 10) : val;
+            }
+            return null;
         }
 
         const roomOptions = Array.from(document.getElementById('room-list').options);
+
         const rooms = roomOptions.map(opt => {
-            const data = opt.dataset;
+            const id = opt.value?.trim();
+            const name = opt.textContent.trim();
+            const sectionId = sanitizeFk(opt.dataset.sectionId);
+            const functionId = sanitizeFk(opt.dataset.functionId);
 
-            return {
-                id: opt.value || undefined,
-                name: opt.textContent.trim(),
-                section_id: sanitizeFk(data.sectionId),
-                function_id: sanitizeFk(data.functionId),
+            const result = {
+                name,
+                ...(id ? { id } : {}),
+                ...(sectionId ? { section_id: sectionId } : {}),
+                ...(functionId ? { function_id: functionId } : {})
             };
-        });
 
+            return result;
+        });
 
         return {
             brands: extractOptions("brand"),
@@ -223,9 +236,15 @@
 
         form.addEventListener('submit', async (event) => {
             event.preventDefault();
+            const state = buildFormState(); 
+
+            if (!isSerializable(state)) {
+                console.warn("🚨 Payload is not serializable:", state);
+                alert("Invalid payload — check console.");
+                return;
+            }
+        
             try {
-                const state = buildFormState();
-            
                 const response = await fetch('/api/settings', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -264,42 +283,26 @@
                 alert('Please enter a room name.');
                 return;
             }
-
+        
             const roomList = document.getElementById('room-list');
             let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
-
-            // If it's a brand new ID, generate one (string-based!)
+        
             if (!idRaw) {
                 idRaw = ComboBoxWidget.createTempId("room");
             }
-
+        
             if (!existingOption) {
                 existingOption = ComboBoxWidget.createOption(name, idRaw);
                 roomList.appendChild(existingOption);
             }
-
+        
             existingOption.textContent = name;
             existingOption.value = idRaw;
             existingOption.dataset.sectionId = sectionVal || "";
             existingOption.dataset.functionId = funcVal || "";
-
+        
             ComboBoxWidget.sortOptions(roomList);
-
-            // Update formState.rooms
-            const index = formState.rooms.findIndex(r => r.id === idRaw);
-            const payload = {
-                id: idRaw,
-                name,
-                section_id: sectionVal !== "" ? sectionVal : null,
-                function_id: funcVal !== "" ? funcVal : null
-            };
-
-            if (index >= 0) {
-                formState.rooms[index] = payload;
-            } else {
-                formState.rooms.push(payload);
-            }
-
+        
             bootstrap.Modal.getInstance(modal).hide();
         });