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

static/scripts/changer.js

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

static/scripts/grid.js

@@ -50,15 +50,15 @@ class BrickGridSortButton {
 
 // Grid class
 class BrickGrid {
-    constructor(id) {
+    constructor(grid) {
-        this.id = id;
+        this.id = grid.id;
 
         // Grid elements (built based on the initial id)
-        this.html_grid = document.getElementById(id);
+        this.html_grid = document.getElementById(this.id);
-        this.html_sort = document.getElementById(`${id}-sort`);
+        this.html_sort = document.getElementById(`${this.id}-sort`);
-        this.html_search = document.getElementById(`${id}-search`);
+        this.html_search = document.getElementById(`${this.id}-search`);
-        this.html_filter = document.getElementById(`${id}-filter`);
+        this.html_filter = document.getElementById(`${this.id}-filter`);
-        this.html_theme = document.getElementById(`${id}-theme`);
+        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)
+);

static/scripts/table.js

@@ -1,6 +1,19 @@
 class BrickTable {
-    constructor(id, per_page, no_sort = [], number = []) {
+    constructor(table, per_page) {
-        const columns = [];
+        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)
+);

templates/add.html

@@ -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

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

templates/admin/checkbox.html

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

templates/base.html

@@ -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

@@ -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

@@ -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

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

templates/instructions/delete.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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,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

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

templates/missing.html

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

templates/part.html

@@ -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,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

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

templates/set.html

@@ -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

@@ -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

@@ -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

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