Split the grid javascript code

static/scripts/grid/grid.js

@@ -1,53 +1,3 @@
-// Sort button
-class BrickGridSortButton {
-    constructor(button, grid) {
-        this.button = button;
-        this.grid = grid;
-        this.data = this.button.dataset;
-
-        // Setup
-        button.addEventListener("click", ((grid, button) => (e) => {
-            grid.sort(button);
-        })(grid, this));
-    }
-
-    // Active
-    active() {
-        this.button.classList.remove("btn-outline-primary");
-        this.button.classList.add("btn-primary");
-    }
-
-    // Inactive
-    inactive() {
-        delete this.button.dataset.sortOrder;
-        this.button.classList.remove("btn-primary");
-        this.button.classList.add("btn-outline-primary");
-    }
-
-    // Toggle sorting
-    toggle(order) {
-        // Cleanup
-        delete this.button.dataset.sortOrder;
-
-        let icon = this.button.querySelector("i.ri");
-        if (icon) {
-            this.button.removeChild(icon);
-        }
-
-        // Set order
-        if (order) {
-            this.active();
-
-            this.button.dataset.sortOrder = order;
-
-            icon = document.createElement("i");
-            icon.classList.add("ri", "ms-1", `ri-sort-${order}`);
-
-            this.button.append(icon);
-        }
-    }
-}
-
 // Grid class
 class BrickGrid {
     constructor(grid, target = "div#grid>div") {

static/scripts/grid/sort.js

@@ -0,0 +1,49 @@
+// Sort button
+class BrickGridSortButton {
+    constructor(button, grid) {
+        this.button = button;
+        this.grid = grid;
+        this.data = this.button.dataset;
+
+        // Setup
+        button.addEventListener("click", ((grid, button) => (e) => {
+            grid.sort(button);
+        })(grid, this));
+    }
+
+    // Active
+    active() {
+        this.button.classList.remove("btn-outline-primary");
+        this.button.classList.add("btn-primary");
+    }
+
+    // Inactive
+    inactive() {
+        delete this.button.dataset.sortOrder;
+        this.button.classList.remove("btn-primary");
+        this.button.classList.add("btn-outline-primary");
+    }
+
+    // Toggle sorting
+    toggle(order) {
+        // Cleanup
+        delete this.button.dataset.sortOrder;
+
+        let icon = this.button.querySelector("i.ri");
+        if (icon) {
+            this.button.removeChild(icon);
+        }
+
+        // Set order
+        if (order) {
+            this.active();
+
+            this.button.dataset.sortOrder = order;
+
+            icon = document.createElement("i");
+            icon.classList.add("ri", "ms-1", `ri-sort-${order}`);
+
+            this.button.append(icon);
+        }
+    }
+}

templates/base.html

@@ -80,7 +80,8 @@
     <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/grid/grid.js') }}"></script>
+    <script src="{{ url_for('static', filename='scripts/grid/sort.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/socket/socket.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/socket/instructions.js') }}"></script>