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

This commit is contained in:
Yaro Kasear 2025-06-20 11:55:36 -05:00
parent b182e30c43
commit 3c9806bd34
3 changed files with 62 additions and 19 deletions

View file

@ -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-primary">Save</button>
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
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 %}