Refactor settings template to improve structure and enhance readability of room editor functionality
This commit is contained in:
Yaro Kasear
parent
34cdc17eee
commit
7fb117a95e
1 changed files with 119 additions and 117 deletions
|
|
@ -112,13 +112,19 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<form id="settingsForm">
|
||||
<div class="container">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Inventory Settings
|
||||
</h5>
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" id="inventory-tab" data-bs-toggle="tab" data-bs-target="#inventory-tab-pane"
|
||||
type="button">Inventory</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" id="location-tab" data-bs-toggle="tab" data-bs-target="#location-tab-pane"
|
||||
type="button">Location</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content" id="tabContent">
|
||||
<div class="tab-pane fade show active border border-top-0 p-3" id="inventory-tab-pane">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
|
|
@ -138,10 +144,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location Settings</h5>
|
||||
<div class="tab-pane fade border border-top-0 p-3" id="location-tab-pane">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
|
|
@ -196,127 +199,126 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomName" class="form-label">Room Name</label>
|
||||
<input type="text" class="form-input" id="roomName" placeholder="Enter room name">
|
||||
<input type="hidden" id="roomId">
|
||||
</div>
|
||||
<div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomSection" class="form-label">Section</label>
|
||||
<select id="roomSection" class="form-select">
|
||||
<option value="">Select a section</option>
|
||||
{% for section in sections %}
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomName" class="form-label">Room Name</label>
|
||||
<input type="text" class="form-input" id="roomName" placeholder="Enter room name">
|
||||
<input type="hidden" id="roomId">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomSection" class="form-label">Section</label>
|
||||
<select id="roomSection" class="form-select">
|
||||
<option value="">Select a section</option>
|
||||
{% for section in sections %}
|
||||
<option value="{{ section.id }}">{{ section.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Function</label>
|
||||
<select id="roomFunction" class="form-select">
|
||||
<option value="">Select a function</option>
|
||||
{% for function in functions %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Function</label>
|
||||
<select id="roomFunction" class="form-select">
|
||||
<option value="">Select a function</option>
|
||||
{% for function in functions %}
|
||||
<option value="{{ function.id }}">{{ function.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
|
||||
id="roomEditorCancelButton">{{ icons.render_icon('x-lg', 16) }}</button>
|
||||
{% set editorSaveLogic %}
|
||||
const modal = document.getElementById('roomEditor');
|
||||
const name = document.getElementById('roomName').value.trim();
|
||||
const sectionVal = document.getElementById('roomSection').value;
|
||||
const funcVal = document.getElementById('roomFunction').value;
|
||||
let idRaw = document.getElementById('roomId').value;
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" data-bs-dismiss="modal" id="roomEditorCancelButton">{{
|
||||
icons.render_icon('x-lg', 16) }}</button>
|
||||
{% set editorSaveLogic %}
|
||||
const modal = document.getElementById('roomEditor');
|
||||
const name = document.getElementById('roomName').value.trim();
|
||||
const sectionVal = document.getElementById('roomSection').value;
|
||||
const funcVal = document.getElementById('roomFunction').value;
|
||||
let idRaw = document.getElementById('roomId').value;
|
||||
|
||||
if (!name) {
|
||||
alert('Please enter a room name.');
|
||||
return;
|
||||
}
|
||||
if (!name) {
|
||||
alert('Please enter a room name.');
|
||||
return;
|
||||
}
|
||||
|
||||
const roomList = document.getElementById('room-list');
|
||||
let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
|
||||
const roomList = document.getElementById('room-list');
|
||||
let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
|
||||
|
||||
if (!idRaw) {
|
||||
idRaw = ComboBoxWidget.createTempId("room");
|
||||
}
|
||||
if (!idRaw) {
|
||||
idRaw = ComboBoxWidget.createTempId("room");
|
||||
}
|
||||
|
||||
if (!existingOption) {
|
||||
existingOption = ComboBoxWidget.createOption(name, idRaw);
|
||||
roomList.appendChild(existingOption);
|
||||
}
|
||||
if (!existingOption) {
|
||||
existingOption = ComboBoxWidget.createOption(name, idRaw);
|
||||
roomList.appendChild(existingOption);
|
||||
}
|
||||
|
||||
existingOption.textContent = name;
|
||||
existingOption.value = idRaw;
|
||||
existingOption.dataset.sectionId = sectionVal || "";
|
||||
existingOption.dataset.functionId = funcVal || "";
|
||||
existingOption.textContent = name;
|
||||
existingOption.value = idRaw;
|
||||
existingOption.dataset.sectionId = sectionVal || "";
|
||||
existingOption.dataset.functionId = funcVal || "";
|
||||
|
||||
ComboBoxWidget.sortOptions(roomList);
|
||||
ComboBoxWidget.sortOptions(roomList);
|
||||
|
||||
bootstrap.Modal.getInstance(modal).hide();
|
||||
{% endset %}
|
||||
{{ buttons.render_button(
|
||||
id='editorSave',
|
||||
icon='floppy',
|
||||
logic=editorSaveLogic
|
||||
) }}
|
||||
bootstrap.Modal.getInstance(modal).hide();
|
||||
{% endset %}
|
||||
{{ buttons.render_button(
|
||||
id='editorSave',
|
||||
icon='floppy',
|
||||
logic=editorSaveLogic
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
const modal = document.getElementById('roomEditor');
|
||||
const cancelButton = document.getElementById('roomEditorCancelButton');
|
||||
const form = document.getElementById('settingsForm');
|
||||
const modal = document.getElementById('roomEditor');
|
||||
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;
|
||||
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');
|
||||
// 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>';
|
||||
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);
|
||||
});
|
||||
Array.from(pageSections.options).forEach(opt => {
|
||||
const option = new Option(opt.textContent, opt.value);
|
||||
if (opt.value === sectionId) {
|
||||
option.selected = true;
|
||||
}
|
||||
modalSections.appendChild(option);
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', () => {
|
||||
bootstrap.Modal.getInstance(modal).hide();
|
||||
Array.from(pageFunctions.options).forEach(opt => {
|
||||
const option = new Option(opt.textContent, opt.value);
|
||||
if (opt.value === functionId) {
|
||||
option.selected = true;
|
||||
}
|
||||
modalFunctions.appendChild(option);
|
||||
});
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', () => {
|
||||
bootstrap.Modal.getInstance(modal).hide();
|
||||
});
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue