From 7fb117a95e326783d550eddf70d2ea597cb7b389 Mon Sep 17 00:00:00 2001
From: Yaro Kasear <git@kasear.net>
Date: Thu, 17 Jul 2025 14:04:28 -0500
Subject: [PATCH] Refactor settings template to improve structure and enhance
 readability of room editor functionality

---
 inventory/templates/settings.html | 236 +++++++++++++++---------------
 1 file changed, 119 insertions(+), 117 deletions(-)

diff --git a/inventory/templates/settings.html b/inventory/templates/settings.html
index e159e51..25460aa 100644
--- a/inventory/templates/settings.html
+++ b/inventory/templates/settings.html
@@ -25,32 +25,32 @@
                     };
                 });
             }
-        
+
             function sanitizeFk(val) {
                 if (val && val !== "null" && val !== "" && val !== "None") {
                     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 id = opt.value?.trim();
                 const name = opt.textContent.trim();
                 const sectionId = sanitizeFk(opt.dataset.sectionId);
                 const functionId = sanitizeFk(opt.dataset.functionId);
-            
+
                 const result = {
                     name,
                     ...(id ? { id } : {}),
                     section_id: sectionId,
                     function_id: functionId
                 };
-            
+
                 return result;
             });
-        
+
             return {
                 brands: extractOptions("brand"),
                 types: extractOptions("type"),
@@ -76,9 +76,9 @@
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(state)
             });
-        
+
             const contentType = response.headers.get("content-type");
-        
+
             if (!response.ok) {
                 if (contentType && contentType.includes("application/json")) {
                     const data = await response.json();
@@ -88,11 +88,11 @@
                     throw new Error("Unexpected response:\n" + text.slice(0, 200));
                 }
             }
-        
+
             const data = await response.json();
             console.log("Sync result:", data);
             renderToast({ message: 'Settings updated successfully.', type: 'success' });
-        
+
         } catch (err) {
             console.error("Submission error:", err);
             renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
@@ -112,13 +112,19 @@
 {% endblock %}
 
 {% block content %}
-<form id="settingsForm">
     <div class="container">
-        <div class="card mb-3">
-            <div class="card-body">
-                <h5 class="card-title">
-                    Inventory Settings
-                </h5>
+        <ul class="nav nav-tabs">
+            <li class="nav-item">
+                <button class="nav-link active" id="inventory-tab" data-bs-toggle="tab" data-bs-target="#inventory-tab-pane"
+                    type="button">Inventory</button>
+            </li>
+            <li class="nav-item">
+                <button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location-tab-pane"
+                    type="button">Location</button>
+            </li>
+        </ul>
+        <div class="tab-content" id="tabContent">
+            <div class="tab-pane fade show active border border-top-0 p-3" id="inventory-tab-pane">
                 <div class="row">
                     <div class="col">
                         {{ combos.render_combobox(
@@ -138,10 +144,7 @@
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="card">
-            <div class="card-body">
-                <h5 class="card-title">Location Settings</h5>
+            <div class="tab-pane fade border border-top-0 p-3" id="location-tab-pane">
                 <div class="row">
                     <div class="col">
                         {{ combos.render_combobox(
@@ -196,127 +199,126 @@
                 </div>
             </div>
         </div>
-    </div>
-    <div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
-                </div>
-                <div class="modal-body">
-                    <div class="row">
-                        <div class="col">
-                            <label for="roomName" class="form-label">Room Name</label>
-                            <input type="text" class="form-input" id="roomName" placeholder="Enter room name">
-                            <input type="hidden" id="roomId">
-                        </div>
+        <div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <label for="roomSection" class="form-label">Section</label>
-                            <select id="roomSection" class="form-select">
-                                <option value="">Select a section</option>
-                                {% for section in sections %}
+                    <div class="modal-body">
+                        <div class="row">
+                            <div class="col">
+                                <label for="roomName" class="form-label">Room Name</label>
+                                <input type="text" class="form-input" id="roomName" placeholder="Enter room name">
+                                <input type="hidden" id="roomId">
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col">
+                                <label for="roomSection" class="form-label">Section</label>
+                                <select id="roomSection" class="form-select">
+                                    <option value="">Select a section</option>
+                                    {% for section in sections %}
                                     <option value="{{ section.id }}">{{ section.name }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        <div class="col">
-                            <label class="form-label">Function</label>
-                            <select id="roomFunction" class="form-select">
-                                <option value="">Select a function</option>
-                                {% for function in functions %}
+                                    {% endfor %}
+                                </select>
+                            </div>
+                            <div class="col">
+                                <label class="form-label">Function</label>
+                                <select id="roomFunction" class="form-select">
+                                    <option value="">Select a function</option>
+                                    {% for function in functions %}
                                     <option value="{{ function.id }}">{{ function.name }}</option>
-                                {% endfor %}
-                            </select>
+                                    {% endfor %}
+                                </select>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"
-                        id="roomEditorCancelButton">{{ icons.render_icon('x-lg', 16) }}</button>
-                    {% set editorSaveLogic %}
-                        const modal = document.getElementById('roomEditor');
-                        const name = document.getElementById('roomName').value.trim();
-                        const sectionVal = document.getElementById('roomSection').value;
-                        const funcVal = document.getElementById('roomFunction').value;
-                        let idRaw = document.getElementById('roomId').value;
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="roomEditorCancelButton">{{
+                            icons.render_icon('x-lg', 16) }}</button>
+                        {% set editorSaveLogic %}
+                            const modal = document.getElementById('roomEditor');
+                            const name = document.getElementById('roomName').value.trim();
+                            const sectionVal = document.getElementById('roomSection').value;
+                            const funcVal = document.getElementById('roomFunction').value;
+                            let idRaw = document.getElementById('roomId').value;
 
-                        if (!name) {
-                            alert('Please enter a room name.');
-                            return;
-                        }
+                            if (!name) {
+                                alert('Please enter a room name.');
+                                return;
+                            }
 
-                        const roomList = document.getElementById('room-list');
-                        let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
+                            const roomList = document.getElementById('room-list');
+                            let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
 
-                        if (!idRaw) {
-                            idRaw = ComboBoxWidget.createTempId("room");
-                        }
+                            if (!idRaw) {
+                                idRaw = ComboBoxWidget.createTempId("room");
+                            }
 
-                        if (!existingOption) {
-                            existingOption = ComboBoxWidget.createOption(name, idRaw);
-                            roomList.appendChild(existingOption);
-                        }
+                            if (!existingOption) {
+                                existingOption = ComboBoxWidget.createOption(name, idRaw);
+                                roomList.appendChild(existingOption);
+                            }
 
-                        existingOption.textContent = name;
-                        existingOption.value = idRaw;
-                        existingOption.dataset.sectionId = sectionVal || "";
-                        existingOption.dataset.functionId = funcVal || "";
+                            existingOption.textContent = name;
+                            existingOption.value = idRaw;
+                            existingOption.dataset.sectionId = sectionVal || "";
+                            existingOption.dataset.functionId = funcVal || "";
 
-                        ComboBoxWidget.sortOptions(roomList);
+                            ComboBoxWidget.sortOptions(roomList);
 
-                        bootstrap.Modal.getInstance(modal).hide();
-                    {% endset %}
-                    {{ buttons.render_button(
-                        id='editorSave',
-                        icon='floppy',
-                        logic=editorSaveLogic
-                    ) }}
+                            bootstrap.Modal.getInstance(modal).hide();
+                        {% endset %}
+                        {{ buttons.render_button(
+                            id='editorSave',
+                            icon='floppy',
+                            logic=editorSaveLogic
+                        ) }}
+                    </div>
                 </div>
             </div>
         </div>
     </div>
-</form>
 {% endblock %}
 
 {% block script %}
-        const modal = document.getElementById('roomEditor');
-        const cancelButton = document.getElementById('roomEditorCancelButton');
-        const form = document.getElementById('settingsForm');
+    const modal = document.getElementById('roomEditor');
+    const cancelButton = document.getElementById('roomEditorCancelButton');
+    const form = document.getElementById('settingsForm');
 
-        modal.addEventListener('roomEditor:prepare', (event) => {
-            const { id, name, sectionId, functionId } = event.detail;
-            document.getElementById('roomId').value = id;
-            document.getElementById('roomName').value = name;
+    modal.addEventListener('roomEditor:prepare', (event) => {
+        const { id, name, sectionId, functionId } = event.detail;
+        document.getElementById('roomId').value = id;
+        document.getElementById('roomName').value = name;
 
-            // Populate dropdowns before assigning selection
-            const modalSections = document.getElementById('roomSection');
-            const modalFunctions = document.getElementById('roomFunction');
-            const pageSections = document.getElementById('section-list');
-            const pageFunctions = document.getElementById('function-list');
+        // Populate dropdowns before assigning selection
+        const modalSections = document.getElementById('roomSection');
+        const modalFunctions = document.getElementById('roomFunction');
+        const pageSections = document.getElementById('section-list');
+        const pageFunctions = document.getElementById('function-list');
 
-            modalSections.innerHTML = '<option value="">Select a section</option>';
-            modalFunctions.innerHTML = '<option value="">Select a function</option>';
+        modalSections.innerHTML = '<option value="">Select a section</option>';
+        modalFunctions.innerHTML = '<option value="">Select a function</option>';
 
-            Array.from(pageSections.options).forEach(opt => {
-                const option = new Option(opt.textContent, opt.value);
-                if (opt.value === sectionId) {
-                    option.selected = true;
-                }
-                modalSections.appendChild(option);
-            });
-
-            Array.from(pageFunctions.options).forEach(opt => {
-                const option = new Option(opt.textContent, opt.value);
-                if (opt.value === functionId) {
-                    option.selected = true;
-                }
-                modalFunctions.appendChild(option);
-            });
+        Array.from(pageSections.options).forEach(opt => {
+            const option = new Option(opt.textContent, opt.value);
+            if (opt.value === sectionId) {
+                option.selected = true;
+            }
+            modalSections.appendChild(option);
         });
 
-        cancelButton.addEventListener('click', () => {
-            bootstrap.Modal.getInstance(modal).hide();
+        Array.from(pageFunctions.options).forEach(opt => {
+            const option = new Option(opt.textContent, opt.value);
+            if (opt.value === functionId) {
+                option.selected = true;
+            }
+            modalFunctions.appendChild(option);
         });
+    });
+
+    cancelButton.addEventListener('click', () => {
+        bootstrap.Modal.getInstance(modal).hide();
+    });
 {% endblock %}
\ No newline at end of file