Refactor code structure; improve organization and readability across multiple files
This commit is contained in:
Yaro Kasear
parent
774c28e761
commit
acacf39f8e
14 changed files with 380 additions and 217 deletions
|
|
@ -52,7 +52,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="container-flex m-5">{% block content %}{% endblock %}</main>
|
||||
<main class="container-flex m-5">
|
||||
<form method="POST" id="settingsForm" action="{{ url_for('main.settings') }}">
|
||||
{% block content %}{% endblock %}
|
||||
<input type="hidden" name="formState" id="formStateField">
|
||||
</form>
|
||||
</main>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO"
|
||||
|
|
|
|||
|
|
@ -3,138 +3,159 @@
|
|||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ breadcrumbs.breadcrumb_header(
|
||||
title=title,
|
||||
submit_button=True
|
||||
) }}
|
||||
|
||||
<form method="POST" id="settingsForm" action="{{ url_for('main.settings') }}">
|
||||
<input type="hidden" name="formState" id="formStateField">
|
||||
|
||||
{{ breadcrumbs.breadcrumb_header(
|
||||
title=title,
|
||||
submit_button=True
|
||||
) }}
|
||||
|
||||
<div class="container">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Inventory Settings
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='brand',
|
||||
options=brands,
|
||||
label='Brands',
|
||||
placeholder='Add a new brand'
|
||||
) }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='type',
|
||||
options=types,
|
||||
label='Inventory Types',
|
||||
placeholder='Add a new type'
|
||||
) }}
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Inventory Settings
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='brand',
|
||||
options=brands,
|
||||
label='Brands',
|
||||
placeholder='Add a new brand'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location Settings</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='section',
|
||||
options=sections,
|
||||
label='Sections',
|
||||
placeholder='Add a new section'
|
||||
) }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='function',
|
||||
options=functions,
|
||||
label='Functions',
|
||||
placeholder='Add a new function'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
{{ combos.render_combobox(
|
||||
id='room',
|
||||
options=rooms,
|
||||
label='Rooms',
|
||||
placeholder='Add a new room',
|
||||
onAdd=room_editor
|
||||
) }}
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='type',
|
||||
options=types,
|
||||
label='Inventory Types',
|
||||
placeholder='Add a new type'
|
||||
) }}
|
||||
</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 class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location Settings</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='section',
|
||||
options=sections,
|
||||
label='Sections',
|
||||
placeholder='Add a new section'
|
||||
) }}
|
||||
</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">
|
||||
</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 %}
|
||||
<option value="{{ function.id }}">{{ function.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='function',
|
||||
options=functions,
|
||||
label='Functions',
|
||||
placeholder='Add a new function'
|
||||
) }}
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<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 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();
|
||||
|
||||
document.getElementById('room-input').value = '';
|
||||
{% endset %}
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='room',
|
||||
options=rooms,
|
||||
label='Rooms',
|
||||
placeholder='Add a new room',
|
||||
onAdd=room_editor
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</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">
|
||||
</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 %}
|
||||
<option value="{{ function.id }}">{{ function.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
const formState = {
|
||||
brands: [],
|
||||
types: [],
|
||||
sections: [],
|
||||
functions: [],
|
||||
rooms: []
|
||||
brands: {{ brands | tojson }},
|
||||
types: {{ types | tojson }},
|
||||
sections: {{ sections | tojson }},
|
||||
functions: {{ functions | tojson }},
|
||||
rooms: {{ rooms | tojson }},
|
||||
};
|
||||
|
||||
function buildFormState() {
|
||||
function extractOptions(id) {
|
||||
const select = document.getElementById(`${id}-list`);
|
||||
return Array.from(select.options).map(opt => ({ name: opt.textContent.trim(), id: parseInt(opt.value) || undefined }));
|
||||
}
|
||||
|
||||
const roomOptions = Array.from(document.getElementById('room-list').options);
|
||||
const rooms = roomOptions.map(opt => {
|
||||
const data = opt.dataset;
|
||||
return {
|
||||
name: opt.textContent.trim(),
|
||||
section_id: data.sectionId ? parseInt(data.sectionId) : null,
|
||||
function_id: data.functionId ? parseInt(data.functionId) : null
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
brands: extractOptions("brand"),
|
||||
types: extractOptions("type"),
|
||||
sections: extractOptions("section"),
|
||||
functions: extractOptions("function"),
|
||||
rooms
|
||||
};
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const modal = document.getElementById('roomEditor');
|
||||
const saveButton = document.getElementById('roomEditorSaveButton');
|
||||
|
|
@ -143,7 +164,7 @@
|
|||
|
||||
// Replace the whole submission logic with just JSON
|
||||
form.addEventListener('submit', () => {
|
||||
document.getElementById('formStateField').value = JSON.stringify(formState);
|
||||
document.getElementById('formStateField').value = JSON.stringify(buildFormState());
|
||||
});
|
||||
|
||||
// Modal populates dropdowns fresh from the page every time it opens
|
||||
|
|
@ -204,5 +225,4 @@
|
|||
bootstrap.Modal.getInstance(modal).hide();
|
||||
});
|
||||
});
|
||||
{% endblock %}
|
||||
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue