FrederikBaerentsen/BrickTracker
8
20
Fork 12
Code Issues 16 Pull Requests Actions Packages Projects 1 Releases 10 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
Download Patch File Download Diff File Expand all files Collapse all files
templates/add.html
-4
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 %}
templates/admin.html
-4
View File
@@ -42,7 +42,3 @@
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
{% endblock %}
templates/admin/checkbox.html
-5
View File
@@ -60,8 +60,3 @@
</li>
</ul>
{{ accordion.footer() }}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
setup_changers();
});
</script>
templates/base.html
+15 -1
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>
templates/bulk.html
-4
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 %}
templates/delete.html
-9
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 %}
templates/instructions.html
-4
View File
@@ -23,7 +23,3 @@
</div>
{% endif %}
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}
templates/instructions/delete.html
-5
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>
templates/instructions/rename.html
-5
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>
templates/instructions/table.html
+3 -10
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 %}
templates/macro/table.html
+6 -6
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>
templates/minifigure.html
-5
View File
@@ -12,9 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>
{% endblock %}
templates/minifigure/table.html
+1 -8
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 %}
templates/minifigures.html
-4
View File
@@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}
templates/missing.html
-4
View File
@@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}
templates/part.html
-5
View File
@@ -12,9 +12,4 @@
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
baguetteBox.run('[data-lightbox]');
});
</script>
{% endblock %}
templates/part/table.html
+1 -8
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 %}
templates/parts.html
-4
View File
@@ -9,7 +9,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}
templates/set.html
-11
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 %}
templates/sets.html
+1 -12
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 %}
templates/wish/table.html
+3 -10
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 %}
templates/wishes.html
-4
View File
@@ -29,7 +29,3 @@
{% endwith %}
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
{% endblock %}