Refactor ComboBoxWidget; enhance createOption and sortOptions functions, update onAdd parameter in render_combobox macro for improved usability and maintainability
This commit is contained in:
parent
b182e30c43
commit
3c9806bd34
3 changed files with 62 additions and 19 deletions
|
@ -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 %}
|
Loading…
Add table
Add a link
Reference in a new issue