Refactor ComboBoxWidget; enhance createOption and sortOptions functions, update onAdd parameter in render_combobox macro for improved usability and maintainability

static/js/widget.js

@@ -1,11 +1,28 @@
+console.log('ComboBoxWidget loaded');
+
 const ComboBoxWidget = (() => {
+    let tempIdCounter = -1;
+
+    function createOption(text, value = null) {
+        const option = document.createElement('option');
+        option.textContent = text;
+        option.value = value ?? (tempIdCounter--);
+        return option;
+    }
+
+    function sortOptions(selectElement) {
+        const sorted = Array.from(selectElement.options)
+            .sort((a, b) => a.text.localeCompare(b.text));
+        selectElement.innerHTML = '';
+        sorted.forEach(option => selectElement.appendChild(option));
+    }
+
     function initComboBox(ns, config = {}) {
         const input = document.querySelector(`#${ns}-input`);
         const list = document.querySelector(`#${ns}-list`);
         const addBtn = document.querySelector(`#${ns}-add`);
         const removeBtn = document.querySelector(`#${ns}-remove`);
         let currentlyEditing = null;
-        let tempIdCounter = -1;
 
         if (!input || !list || !addBtn || !removeBtn) {
             console.warn(`ComboBoxWidget: Missing elements for namespace '${ns}'`);
@@ -58,16 +75,13 @@ const ComboBoxWidget = (() => {
                 }
                 currentlyEditing = null;
             } else {
-                const option = document.createElement('option');
-                option.textContent = newItem;
-                option.value = tempIdCounter--;
-
                 if (config.onAdd) {
-                    config.onAdd(option);
+                    config.onAdd(newItem, list, createOption);
-                }
+                } else {
-
+                    const option = createOption(newItem);
                     list.appendChild(option);
                 }
+            }
 
             input.value = '';
             addBtn.disabled = true;
@@ -93,16 +107,11 @@ const ComboBoxWidget = (() => {
             removeBtn.disabled = true;
             updateAddButtonIcon();
         });
-
-        function sortOptions(selectElement) {
-            const sorted = Array.from(selectElement.options)
-                .sort((a, b) => a.text.localeCompare(b.text));
-            selectElement.innerHTML = '';
-            sorted.forEach(option => selectElement.appendChild(option));
-        }
     }
 
     return {
-        initComboBox
+        initComboBox,
+        createOption,
+        sortOptions
     };
 })();

templates/fragments/_combobox_fragment.html

@@ -24,7 +24,7 @@
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             ComboBoxWidget.initComboBox("{{ id }}", {
-                {% if onAdd %}onAdd: function(option) { {{ onAdd | safe }} },{% endif %}
+                {% if onAdd %}onAdd: function(newItem, list, createOption) { {{ onAdd | safe }} },{% endif %}
                 {% if onRemove %}onRemove: function(option) { {{ onRemove | safe }} },{% endif %}
                 {% if onEdit %}onEdit: function(option) { {{ onEdit | safe }} }{% endif %}
             });

templates/settings.html

@@ -60,6 +60,9 @@
                 <div class="row">
                     {% set room_editor %}
                     const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
+                    const roomNameInput = document.getElementById('roomName');
+                    roomNameInput.value = document.getElementById('room-input').value;
+                    
                     roomEditor.show();
                     {% endset %}
                     <div class="col">
@@ -111,11 +114,42 @@
                     </div>
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"
-                    <button type="button" class="btn btn-primary">Save</button>
+                        id="roomEditorCancelButton">Cancel</button>
+                    <button type="button" class="btn btn-primary" id="roomEditorSaveButton">Save</button>
                 </div>
             </div>
         </div>
     </div>
 </form>
 {% endblock %}
+
+{% block script %}
+    document.addEventListener('DOMContentLoaded', () => {
+        const modal = document.getElementById('roomEditor');
+        const saveButton = document.getElementById('roomEditorSaveButton');
+        const cancelButton = document.getElementById('roomEditorCancelButton');
+    
+        saveButton.addEventListener('click', () => {
+            console.log('Save button clicked');
+        
+            const name = document.getElementById('roomName').value;
+            const section = document.getElementById('roomSection').value;
+            const func = document.getElementById('roomFunction').value;
+        
+            if (name.trim()) {
+                const newRoom = ComboBoxWidget.createOption(`${name}`, null);
+                document.getElementById('room-list').appendChild(newRoom);
+                ComboBoxWidget.sortOptions(document.getElementById('room-list'));
+                bootstrap.Modal.getInstance(modal).hide();
+            } else {
+                alert('Please enter a room name.');
+            }
+        });
+    
+        cancelButton.addEventListener('click', () => {
+            console.log('Cancel button clicked');
+            bootstrap.Modal.getInstance(modal).hide();
+        });
+    });
+{% endblock %}