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

Enhance settings page; add room management functionality with combo box integration and update rendering logic for improved usability

Browse source
This commit is contained in:
Yaro Kasear 2025-06-18 15:36:34 -05:00
parent ad413c3f1b
commit ec08dd8ef1
4 changed files with 56 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

46
static/js/widget.js
View file

@ -1,12 +1,13 @@
const ComboBoxWidget = (() => {
let tempIdCounter = -1;
function initComboBox(ns) {
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}'`);
@ -19,6 +20,7 @@ const ComboBoxWidget = (() => {
input.addEventListener('input', () => {
addBtn.disabled = input.value.trim() === '';
updateAddButtonIcon();
});
list.addEventListener('change', () => {
@ -26,10 +28,9 @@ const ComboBoxWidget = (() => {
removeBtn.disabled = selected.length === 0;
if (selected.length === 1) {
// Load the text into input for editing
input.value = selected[0].textContent;
addBtn.disabled = input.value.trim() === '';
currentlyEditing = selected[0];
addBtn.disabled = input.value.trim() === '';
} else {
input.value = '';
currentlyEditing = null;
@ -42,30 +43,57 @@ const ComboBoxWidget = (() => {
addBtn.addEventListener('click', () => {
const newItem = input.value.trim();
if (!newItem) return;
if (currentlyEditing) {
currentlyEditing.textContent = newItem;
if (config.onEdit) {
config.onEdit(currentlyEditing, newItem);
} else {
currentlyEditing.textContent = newItem;
}
currentlyEditing = null;
} else {
const option = document.createElement('option');
option.textContent = newItem;
option.value = tempIdCounter--;
if (config.onAdd) {
config.onAdd(option);
}
list.appendChild(option);
}
input.value = '';
addBtn.disabled = true;
removeBtn.disabled = true;
sortOptions(list);
updateAddButtonIcon();
if (config.sort !== false) {
sortOptions(list);
}
});
removeBtn.addEventListener('click', () => {
Array.from(list.selectedOptions).forEach(opt => opt.remove());
Array.from(list.selectedOptions).forEach(option => {
if (config.onRemove) {
config.onRemove(option);
}
option.remove();
});
currentlyEditing = null;
removeBtn.disabled = true;
input.value = '';
addBtn.disabled = true;
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));
}
}
function sortOptions(selectElement) {