FrederikBaerentsen/BrickTracker
4
6
Fork 6
Code Issues 13 Pull Requests 2 Actions Packages Projects 1 Releases 3 Wiki Activity

Simplify the way javascript is loaded (we don't have that many scripts running) and use data attribute to instantiate grid and tables

Browse Source
This commit is contained in:
Gregoo 2025-01-24 15:55:15 +01:00
parent 623b205733
commit 982a1fa8db
25 changed files with 71 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
static/scripts/changer.js
View File

@ -115,13 +115,11 @@ class BrickChanger {
}
// Helper to setup the changer
const setup_changers = () => {
document.querySelectorAll("*[data-changer-id]").forEach(el => {
new BrickChanger(
const setup_changers = () => document.querySelectorAll("*[data-changer-id]").forEach(
el => new BrickChanger(
el.dataset.changerPrefix,
el.dataset.changerId,
el.dataset.changerUrl,
el.dataset.changerParent
);
});
}
)
);

19
static/scripts/grid.js
View File

@ -50,15 +50,15 @@ class BrickGridSortButton {
// Grid class
class BrickGrid {
constructor(id) {
this.id = id;
constructor(grid) {
this.id = grid.id;
// Grid elements (built based on the initial id)
this.html_grid = document.getElementById(id);
this.html_sort = document.getElementById(`${id}-sort`);
this.html_search = document.getElementById(`${id}-search`);
this.html_filter = document.getElementById(`${id}-filter`);
this.html_theme = document.getElementById(`${id}-theme`);
this.html_grid = document.getElementById(this.id);
this.html_sort = document.getElementById(`${this.id}-sort`);
this.html_search = document.getElementById(`${this.id}-search`);
this.html_filter = document.getElementById(`${this.id}-filter`);
this.html_theme = document.getElementById(`${this.id}-theme`);
// Sort buttons
this.html_sort_buttons = {};
@ -251,3 +251,8 @@ class BrickGrid {
}
}
}
// Helper to setup the grids
const setup_grids = () => document.querySelectorAll('*[data-grid="true"]').forEach(
el => new BrickGrid(el)
);

24
static/scripts/table.js
View File

@ -1,6 +1,19 @@
class BrickTable {
constructor(id, per_page, no_sort = [], number = []) {
const columns = [];
constructor(table, per_page) {
const columns = []
const no_sort = [];
const number = [];
// Read the table header for parameters
table.querySelectorAll('th').forEach((th, index) => {
if (th.dataset.tableNoSort) {
no_sort.push(index);
}
if (th.dataset.tableNumber) {
number.push(index);
}
});
if (no_sort.length) {
columns.push({ select: no_sort, sortable: false, searchable: false });
@ -10,7 +23,7 @@ class BrickTable {
columns.push({ select: number, type: "number", searchable: false });
}
this.table = new simpleDatatables.DataTable(`#${id}`, {
this.table = new simpleDatatables.DataTable(`#${table.id}`, {
columns: columns,
pagerDelta: 1,
perPage: per_page,
@ -67,3 +80,8 @@ class BrickTable {
return search;
}
}
// Helper to setup the tables
const setup_tables = (per_page) => document.querySelectorAll('table[data-table="true"]').forEach(
el => new BrickTable(el, per_page)
);

4
templates/add.html
View File

@ -70,7 +70,3 @@
</div>
{% include 'set/socket.html' %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/socket.js') }}"></script>
{% endblock %}

4
templates/admin.html
View File

@ -42,7 +42,3 @@
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
{% endblock %}

5
templates/admin/checkbox.html
View File

@ -60,8 +60,3 @@
</li>
</ul>
{{ accordion.footer() }}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
setup_changers();
});
</script>

16
templates/base.html
View File

@ -78,11 +78,25 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.12.0/baguetteBox.min.js" integrity="sha512-HzIuiABxntLbBS8ClRa7drXZI3cqvkAZ5DD0JCAkmRwUtykSGqzA9uItHivDhRUYnW3MMyY5xqk7qVUHOEMbMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js" integrity="sha512-8ExARjWWkIllMlNzVg7JKq9RKWPlJABQUNq6YvAjE/HobctjH/NA+bSiDMDvouBVjp4Wwnf1VP1OEv7Zgjtuxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.2.1/dist/umd/simple-datatables.min.js"></script>
<!-- BrickTracker scripts -->
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/grid.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/socket.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
setup_grids();
setup_changers();
setup_tables({{ config['DEFAULT_TABLE_PER_PAGE'] }});
baguetteBox.run('[data-lightbox]');
});
</script>
<!-- Bootstrap tooltips -->
<script type="text/javascript">
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% block scripts %}{% endblock %}
</body>
</html>

4
templates/bulk.html
View File

@ -62,7 +62,3 @@
{% include 'set/socket.html' %}
{% endwith %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/socket.js') }}"></script>
{% endblock %}

9
templates/delete.html
View File

@ -12,13 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
{% endblock %}

4
templates/instructions.html
View File

@ -23,7 +23,3 @@
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}

5
templates/instructions/delete.html
View File

@ -28,8 +28,3 @@
<div class="card-footer"></div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>

5
templates/instructions/rename.html
View File

@ -34,8 +34,3 @@
<div class="card-footer"></div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>

13
templates/instructions/table.html
View File

@ -1,14 +1,14 @@
{% import 'macro/table.html' as table %}
<div class="table-responsive-sm">
<table class="table table-striped align-middle" id="instructions">
<table data-table="{% if all %}true{% endif %}" class="table table-striped align-middle" id="instructions">
<thead>
<tr>
<th scope="col"><i class="ri-file-line fw-normal"></i> Filename</th>
<th scope="col"><i class="ri-hashtag fw-normal"></i> Set</th>
<th class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
<th data-table-no-sort="true" class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
{% if g.login.is_authenticated() %}
<th class="no-sort" scope="col"><i class="ri-settings-4-line fw-normal"></i> Actions</th>
<th data-table-no-sort="true" class="no-sort" scope="col"><i class="ri-settings-4-line fw-normal"></i> Actions</th>
{% endif %}
</tr>
</thead>
@ -46,10 +46,3 @@
</tbody>
</table>
</div>
{% if all %}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
new BrickTable('instructions', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [2, 3]);
});
</script>
{% endif %}

12
templates/macro/table.html
View File

@ -1,25 +1,25 @@
{% macro header(color=false, quantity=false, missing=false, missing_parts=false, sets=false, minifigures=false) %}
<thead>
<tr>
<th class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
<th data-table-no-sort="true" class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
<th scope="col"><i class="ri-pencil-line fw-normal"></i> Name</th>
{% if color %}
<th scope="col"><i class="ri-palette-line fw-normal"></i> Color</th>
{% endif %}
{% if quantity %}
<th scope="col"><i class="ri-functions fw-normal"></i> Quantity</th>
<th data-table-number="true" scope="col"><i class="ri-functions fw-normal"></i> Quantity</th>
{% endif %}
{% if missing %}
<th scope="col"><i class="ri-error-warning-line fw-normal"></i> Missing</th>
<th data-table-number="true" scope="col"><i class="ri-error-warning-line fw-normal"></i> Missing</th>
{% endif %}
{% if missing_parts %}
<th scope="col"><i class="ri-error-warning-line fw-normal"></i> Missing parts</th>
<th data-table-number="true" scope="col"><i class="ri-error-warning-line fw-normal"></i> Missing parts</th>
{% endif %}
{% if sets %}
<th scope="col"><i class="ri-hashtag fw-normal"></i> Sets</th>
<th data-table-number="true" scope="col"><i class="ri-hashtag fw-normal"></i> Sets</th>
{% endif %}
{% if minifigures %}
<th scope="col"><i class="ri-group-line fw-normal"></i> Minifigures</th>
<th data-table-number="true" scope="col"><i class="ri-group-line fw-normal"></i> Minifigures</th>
{% endif %}
</tr>
</thead>

5
templates/minifigure.html
View File

@ -12,9 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>
{% endblock %}

9
templates/minifigure/table.html
View File

@ -1,7 +1,7 @@
{% import 'macro/table.html' as table %}
<div class="table-responsive-sm">
<table class="table table-striped align-middle" id="minifigures">
<table data-table="{% if all %}true{% endif %}" class="table table-striped align-middle" id="minifigures">
{{ table.header(quantity=true, missing_parts=true, sets=true) }}
<tbody>
{% for item in table_collection %}
@ -21,10 +21,3 @@
</tbody>
</table>
</div>
{% if all %}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
new BrickTable('minifigures', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0], [2, 3, 4]);
});
</script>
{% endif %}

4
templates/minifigures.html
View File

@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}

4
templates/missing.html
View File

@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}

5
templates/part.html
View File

@ -12,9 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>
{% endblock %}

9
templates/part/table.html
View File

@ -1,7 +1,7 @@
{% import 'macro/table.html' as table %}
<div class="table-responsive-sm">
<table class="table table-striped align-middle {% if not all %}sortable mb-0{% endif %}" {% if all %}id="parts"{% endif %}>
<table data-table="{% if all %}true{% endif %}" class="table table-striped align-middle {% if not all %}sortable mb-0{% endif %}" {% if all %}id="parts"{% endif %}>
{{ table.header(color=true, quantity=not no_quantity, missing=not no_missing, sets=all, minifigures=all) }}
<tbody>
{% for item in table_collection %}
@ -51,10 +51,3 @@
</tbody>
</table>
</div>
{% if all %}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
new BrickTable('parts', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0], [3, 4, 5, 6]);
});
</script>
{% endif %}

4
templates/parts.html
View File

@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}

11
templates/set.html
View File

@ -12,15 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
setup_changers();
});
</script>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
{% endblock %}

13
templates/sets.html
View File

@ -58,7 +58,7 @@
</div>
</div>
<div class="row" id="grid">
<div class="row" data-grid="true" id="grid">
{% for item in collection %}
<div class="col-md-6 col-xl-3 d-flex align-items-stretch">
{% with index=loop.index0 %}
@ -67,19 +67,8 @@
</div>
{% endfor %}
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
new BrickGrid("grid");
setup_changers();
});
</script>
</div>
{% else %}
{% include 'set/empty.html' %}
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/grid.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
{% endblock %}

13
templates/wish/table.html
View File

@ -2,10 +2,10 @@
{% import 'macro/badge.html' as badge %}
<div class="table-responsive-sm">
<table class="table table-striped align-middle" id="wish">
<table data-table="{% if all %}true{% endif %}" class="table table-striped align-middle" id="wish">
<thead>
<tr>
<th class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
<th data-table-no-sort="true" class="no-sort" scope="col"><i class="ri-image-line fw-normal"></i> Image</th>
<th scope="col"><i class="ri-hashtag fw-normal"></i> Set</th>
<th scope="col"><i class="ri-pencil-line fw-normal"></i> Name</th>
<th scope="col"><i class="price-tag-3-line fw-normal"></i> Theme</th>
@ -13,7 +13,7 @@
<th scope="col"><i class="ri-shapes-line fw-normal"></i> Parts</th>
<th scope="col"><i class="ri-calendar-close-line fw-normal"></i> Retirement</th>
{% if g.login.is_authenticated() %}
<th class="no-sort" scope="col"><i class="ri-settings-4-line fw-normal"></i> Actions</th>
<th data-table-no-sort="true" class="no-sort" scope="col"><i class="ri-settings-4-line fw-normal"></i> Actions</th>
{% endif %}
</tr>
</thead>
@ -40,10 +40,3 @@
</tbody>
</table>
</div>
{% if all %}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
new BrickTable('wish', {{ config['DEFAULT_TABLE_PER_PAGE'] }}, [0, 7]);
});
</script>
{% endif %}

4
templates/wishes.html
View File

@ -29,7 +29,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}