From be1e56ad939bff08858531a81c3ced27dbde3aa8 Mon Sep 17 00:00:00 2001 From: Yaro Kasear Date: Wed, 25 Jun 2025 11:54:38 -0500 Subject: [PATCH] Refactor room editor modal logic; enhance event handling and dropdown population for improved user experience --- templates/settings.html | 75 +++++++++++++++++++++++------------------ 1 file changed, 43 insertions(+), 32 deletions(-) diff --git a/templates/settings.html b/templates/settings.html index 73692c1..024daa9 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -57,23 +57,23 @@ submit_button=True
{% set room_editor %} - const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor')); - const roomNameInput = document.getElementById('roomName'); + const roomEditorModal = new bootstrap.Modal(document.getElementById('roomEditor')); const input = document.getElementById('room-input'); const name = input.value.trim(); const existingOption = Array.from(document.getElementById('room-list').options) .find(opt => opt.textContent.trim() === name); - roomNameInput.value = name; - document.getElementById('roomId').value = existingOption?.value ?? ''; // this will be the ID or temp ID + const event = new CustomEvent('roomEditor:prepare', { + detail: { + id: existingOption?.value ?? '', + name: name, + sectionId: existingOption?.dataset.sectionId ?? '', + functionId: existingOption?.dataset.functionId ?? '' + } + }); - if (existingOption?.dataset.sectionId) - document.getElementById('roomSection').value = existingOption.dataset.sectionId; - - if (existingOption?.dataset.functionId) - document.getElementById('roomFunction').value = existingOption.dataset.functionId; - - roomEditor.show(); + document.getElementById('roomEditor').dispatchEvent(event); + roomEditorModal.show(); document.getElementById('room-input').value = ''; {% endset %} @@ -187,6 +187,38 @@ submit_button=True 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; + + // 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 = ''; + modalFunctions.innerHTML = ''; + + 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); + }); + }); + // Replace the whole submission logic with just JSON form.addEventListener('submit', (event) => { event.preventDefault(); // 🚨 Stop form from leaving the building @@ -200,27 +232,6 @@ submit_button=True } }); - // Modal populates dropdowns fresh from the page every time it opens - modal.addEventListener('show.bs.modal', () => { - const modalSections = document.getElementById('roomSection'); - const modalFunctions = document.getElementById('roomFunction'); - const pageSections = document.getElementById('section-list'); - const pageFunctions = document.getElementById('function-list'); - - modalSections.innerHTML = ''; - modalFunctions.innerHTML = ''; - - modalSections.appendChild(new Option("Select a section", "")); - modalFunctions.appendChild(new Option("Select a function", "")); - - Array.from(pageSections.options).forEach(opt => - modalSections.appendChild(new Option(opt.textContent, opt.value)) - ); - Array.from(pageFunctions.options).forEach(opt => - modalFunctions.appendChild(new Option(opt.textContent, opt.value)) - ); - }); - saveButton.addEventListener('click', () => { const name = document.getElementById('roomName').value.trim(); const sectionVal = document.getElementById('roomSection').value;