yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor room editor modal logic; enhance event handling and dropdown population for improved user experience

Browse source
This commit is contained in:
Yaro Kasear 2025-06-25 11:54:38 -05:00
parent eddaa69158
commit be1e56ad93
1 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

75
templates/settings.html
View file

@ -57,23 +57,23 @@ submit_button=True
</div> </div>
<div class="row"> <div class="row">
{% set room_editor %} {% set room_editor %}
const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor')); const roomEditorModal = new bootstrap.Modal(document.getElementById('roomEditor'));
const roomNameInput = document.getElementById('roomName');
const input = document.getElementById('room-input'); const input = document.getElementById('room-input');
const name = input.value.trim(); const name = input.value.trim();
const existingOption = Array.from(document.getElementById('room-list').options) const existingOption = Array.from(document.getElementById('room-list').options)
.find(opt => opt.textContent.trim() === name); .find(opt => opt.textContent.trim() === name);
roomNameInput.value = name; const event = new CustomEvent('roomEditor:prepare', {
document.getElementById('roomId').value = existingOption?.value ?? ''; // this will be the ID or temp ID detail: {
id: existingOption?.value ?? '',
name: name,
sectionId: existingOption?.dataset.sectionId ?? '',
functionId: existingOption?.dataset.functionId ?? ''
}
});
if (existingOption?.dataset.sectionId) document.getElementById('roomEditor').dispatchEvent(event);
document.getElementById('roomSection').value = existingOption.dataset.sectionId; roomEditorModal.show();
if (existingOption?.dataset.functionId)
document.getElementById('roomFunction').value = existingOption.dataset.functionId;
roomEditor.show();
document.getElementById('room-input').value = ''; document.getElementById('room-input').value = '';
{% endset %} {% endset %}
@ -187,6 +187,38 @@ submit_button=True
const cancelButton = document.getElementById('roomEditorCancelButton'); const cancelButton = document.getElementById('roomEditorCancelButton');
const form = document.getElementById('settingsForm'); 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 = '<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);
});
});
// Replace the whole submission logic with just JSON // Replace the whole submission logic with just JSON
form.addEventListener('submit', (event) => { form.addEventListener('submit', (event) => {
event.preventDefault(); // 🚨 Stop form from leaving the building 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', () => { saveButton.addEventListener('click', () => {
const name = document.getElementById('roomName').value.trim(); const name = document.getElementById('roomName').value.trim();
const sectionVal = document.getElementById('roomSection').value; const sectionVal = document.getElementById('roomSection').value;