static/scripts/socket/set.js

@@ -0,0 +1,244 @@
+// Set Socket class
+class BrickSetSocket extends BrickSocket {
+    constructor(id, path, namespace, messages, bulk=false) {
+        super(id, path, namespace, messages, bulk);
+
+        // Listeners
+        this.add_listener = undefined;
+        this.confirm_listener = undefined;
+
+        // Form elements (built based on the initial id)
+        this.html_button = document.getElementById(id);
+        this.html_input = document.getElementById(`${id}-set`);
+        this.html_no_confim = document.getElementById(`${id}-no-confirm`);
+
+        // Card elements
+        this.html_card = document.getElementById(`${id}-card`);
+        this.html_card_set = document.getElementById(`${id}-card-set`);
+        this.html_card_name = document.getElementById(`${id}-card-name`);
+        this.html_card_image_container = document.getElementById(`${id}-card-image-container`);
+        this.html_card_image = document.getElementById(`${id}-card-image`);
+        this.html_card_footer = document.getElementById(`${id}-card-footer`);
+        this.html_card_confirm = document.getElementById(`${id}-card-confirm`);
+        this.html_card_dismiss = document.getElementById(`${id}-card-dismiss`);
+
+        if (this.html_button) {
+            this.add_listener = ((bricksocket) => (e) => {
+                if (!bricksocket.disabled && bricksocket.socket !== undefined && bricksocket.socket.connected) {
+                    bricksocket.toggle(false);
+
+                    // Split and save the list if bulk
+                    if (bricksocket.bulk) {
+                        bricksocket.read_set_list()
+                    }
+
+                    if (bricksocket.bulk || (bricksocket.html_no_confim && bricksocket.html_no_confim.checked)) {
+                        bricksocket.import_set(true);
+                    } else {
+                        bricksocket.load_set();
+                    }
+                }
+            })(this);
+
+            this.html_button.addEventListener("click", this.add_listener);
+        }
+
+        if (this.html_card_dismiss && this.html_card) {
+            this.html_card_dismiss.addEventListener("click", ((card) => (e) => {
+                card.classList.add("d-none");
+            })(this.html_card));
+        }
+
+        // Setup the socket
+        this.setup();
+    }
+
+    // Clear form
+    clear() {
+        super.clear();
+
+        if (this.html_card) {
+            this.html_card.classList.add("d-none");
+        }
+
+        if (this.html_card_footer) {
+            this.html_card_footer.classList.add("d-none");
+
+            if (this.html_card_confirm) {
+                this.html_card_footer.classList.add("d-none");
+            }
+        }
+    }
+
+    // Upon receiving a complete message
+    complete(data) {
+        super.complete(data);
+
+        if (this.bulk) {
+            // Import the next set
+            this.import_set(true, undefined, true);
+        }
+    }
+
+    // Upon receiving a fail message
+    fail(data) {
+        super.fail(data);
+
+        if (this.bulk && this.html_input) {
+            if (this.set_list_last_set !== undefined) {
+                this.set_list.unshift(this.set_list_last_set);
+                this.set_list_last_set = undefined;
+            }
+
+            this.html_input.value = this.set_list.join(', ');
+        }
+    }
+
+    // Import a set
+    import_set(no_confirm, set, from_complete=false) {
+        if (this.html_input) {
+            if (!this.bulk || !from_complete) {
+                // Reset the progress
+                if (no_confirm) {
+                    this.clear();
+                } else {
+                    this.clear_status();
+                }
+            }
+
+            // Grab from the list if bulk
+            if (this.bulk) {
+                set = this.set_list.shift()
+
+                // Abort if nothing left to process
+                if (set === undefined) {
+                    // Clear the input
+                    this.html_input.value = "";
+
+                    // Settle the form
+                    this.spinner(false);
+                    this.toggle(true);
+
+                    return;
+                }
+
+                // Save the pulled set
+                this.set_list_last_set = set;
+            }
+
+            this.spinner(true);
+
+            this.socket.emit(this.messages.IMPORT_SET, {
+                set: (set !== undefined) ? set : this.html_input.value,
+            });
+        } else {
+            this.fail("Could not find the input field for the set number");
+        }
+    }
+
+    // Load a set
+    load_set() {
+        if (this.html_input) {
+            // Reset the progress
+            this.clear()
+            this.spinner(true);
+
+            this.socket.emit(this.messages.LOAD_SET, {
+                set: this.html_input.value
+            });
+        } else {
+            this.fail("Could not find the input field for the set number");
+        }
+    }
+
+    // Bulk: read the input as a list
+    read_set_list() {
+        this.set_list = [];
+
+        if (this.html_input) {
+            const value = this.html_input.value;
+            this.set_list = value.split(",").map((el) => el.trim())
+        }
+    }
+
+    // Set is loaded
+    set_loaded(data) {
+        if (this.html_card) {
+            this.html_card.classList.remove("d-none");
+
+            if (this.html_card_set) {
+                this.html_card_set.textContent = data["set"];
+            }
+
+            if (this.html_card_name) {
+                this.html_card_name.textContent = data["name"];
+            }
+
+            if (this.html_card_image_container) {
+                this.html_card_image_container.setAttribute("style", `background-image: url(${data["image"]})`);
+            }
+
+            if (this.html_card_image) {
+                this.html_card_image.setAttribute("src", data["image"]);
+                this.html_card_image.setAttribute("alt", data["set"]);
+            }
+
+            if (this.html_card_footer) {
+                this.html_card_footer.classList.add("d-none");
+
+                if (!data.download) {
+                    this.html_card_footer.classList.remove("d-none");
+
+                    if (this.html_card_confirm) {
+                        if (this.confirm_listener !== undefined) {
+                            this.html_card_confirm.removeEventListener("click", this.confirm_listener);
+                        }
+
+                        this.confirm_listener = ((bricksocket, set) => (e) => {
+                            if (!bricksocket.disabled) {
+                                bricksocket.toggle(false);
+                                bricksocket.import_set(false, set);
+                            }
+                        })(this, data["set"]);
+
+                        this.html_card_confirm.addEventListener("click", this.confirm_listener);
+                    }
+                }
+            }
+        }
+    }
+
+    // Setup the actual socket
+    setup() {
+        super.setup();
+
+        if (this.socket !== undefined) {
+            // Set loaded
+            this.socket.on(this.messages.SET_LOADED, ((bricksocket) => (data) => {
+                bricksocket.set_loaded(data);
+            })(this));
+        }
+    }
+
+
+    // Toggle clicking on the button, or sending events
+    toggle(enabled) {
+        super.toggle(enabled);
+
+        if (this.html_button) {
+            this.html_button.disabled = !enabled;
+        }
+
+        if (this.html_input) {
+            this.html_input.disabled = !enabled;
+        }
+
+        if (this.html_card_confirm) {
+            this.html_card_confirm.disabled = !enabled;
+        }
+
+        if (this.html_card_dismiss) {
+            this.html_card_dismiss.disabled = !enabled;
+        }
+    }
+}

static/scripts/socket/socket.js

@@ -5,22 +5,17 @@ class BrickSocket {
         this.path = path;
         this.namespace = namespace;
         this.messages = messages;
-        this.bulk = bulk;
 
         this.disabled = false;
         this.socket = undefined;
 
-        // Listeners
+        // Bulk mode
-        this.add_listener = undefined;
+        this.bulk = bulk;
-        this.confirm_listener = undefined;
 
         // Form elements (built based on the initial id)
-        this.html_button = document.getElementById(id);
         this.html_complete = document.getElementById(`${id}-complete`);
         this.html_count = document.getElementById(`${id}-count`);
         this.html_fail = document.getElementById(`${id}-fail`);
-        this.html_input = document.getElementById(`${id}-set`);
-        this.html_no_confim = document.getElementById(`${id}-no-confirm`);
         this.html_progress = document.getElementById(`${id}-progress`);
         this.html_progress_bar = document.getElementById(`${id}-progress-bar`);
         this.html_progress_message = document.getElementById(`${id}-progress-message`);
@@ -28,50 +23,10 @@ class BrickSocket {
         this.html_status = document.getElementById(`${id}-status`);
         this.html_status_icon = document.getElementById(`${id}-status-icon`);
 
-        // Card elements
-        this.html_card = document.getElementById(`${id}-card`);
-        this.html_card_set = document.getElementById(`${id}-card-set`);
-        this.html_card_name = document.getElementById(`${id}-card-name`);
-        this.html_card_image_container = document.getElementById(`${id}-card-image-container`);
-        this.html_card_image = document.getElementById(`${id}-card-image`);
-        this.html_card_footer = document.getElementById(`${id}-card-footer`);
-        this.html_card_confirm = document.getElementById(`${id}-card-confirm`);
-        this.html_card_dismiss = document.getElementById(`${id}-card-dismiss`);
-
-        if (this.html_button) {
-            this.add_listener = ((bricksocket) => (e) => {
-                if (!bricksocket.disabled && bricksocket.socket !== undefined && bricksocket.socket.connected) {
-                    bricksocket.toggle(false);
-
-                    // Split and save the list if bulk
-                    if (bricksocket.bulk) {
-                        bricksocket.read_set_list()
-                    }
-
-                    if (bricksocket.bulk || (bricksocket.html_no_confim && bricksocket.html_no_confim.checked)) {
-                        bricksocket.import_set(true);
-                    } else {
-                        bricksocket.load_set();
-                    }
-                }
-            })(this);
-
-            this.html_button.addEventListener("click", this.add_listener);
-        }
-
-        if (this.html_card_dismiss && this.html_card) {
-            this.html_card_dismiss.addEventListener("click", ((card) => (e) => {
-                card.classList.add("d-none");
-            })(this.html_card));
-        }
-
         // Socket status
         window.setInterval(((bricksocket) => () => {
             bricksocket.status();
         })(this), 500);
-
-        // Setup the socket
-        this.setup();
     }
 
     // Clear form
@@ -89,18 +44,6 @@ class BrickSocket {
         }
 
         this.spinner(false);
-
-        if (this.html_card) {
-            this.html_card.classList.add("d-none");
-        }
-
-        if (this.html_card_footer) {
-            this.html_card_footer.classList.add("d-none");
-
-            if (this.html_card_confirm) {
-                this.html_card_footer.classList.add("d-none");
-            }
-        }
     }
 
     // Clear status message
@@ -141,9 +84,6 @@ class BrickSocket {
 
                 this.html_complete.append(success)
             }
-
-            // Import the next set
-            this.import_set(true, undefined, true);
         } else {
             this.spinner(false);
 
@@ -188,73 +128,8 @@ class BrickSocket {
         if (this.html_progress_bar) {
             this.html_progress_bar.classList.remove("progress-bar-animated");
         }
-
-        if (this.bulk && this.html_input) {
-            if (this.set_list_last_set !== undefined) {
-                this.set_list.unshift(this.set_list_last_set);
-                this.set_list_last_set = undefined;
-            }
-
-            this.html_input.value = this.set_list.join(', ');
-        }
     }
 
-    // Import a set
-    import_set(no_confirm, set, from_complete=false) {
-        if (this.html_input) {
-            if (!this.bulk || !from_complete) {
-                // Reset the progress
-                if (no_confirm) {
-                    this.clear();
-                } else {
-                    this.clear_status();
-                }
-            }
-
-            // Grab from the list if bulk
-            if (this.bulk) {
-                set = this.set_list.shift()
-
-                // Abort if nothing left to process
-                if (set === undefined) {
-                    // Clear the input
-                    this.html_input.value = "";
-
-                    // Settle the form
-                    this.spinner(false);
-                    this.toggle(true);
-
-                    return;
-                }
-
-                // Save the pulled set
-                this.set_list_last_set = set;
-            }
-
-            this.spinner(true);
-
-            this.socket.emit(this.messages.IMPORT_SET, {
-                set: (set !== undefined) ? set : this.html_input.value,
-            });
-        } else {
-            this.fail("Could not find the input field for the set number");
-        }
-    }
-
-    // Load a set
-    load_set() {
-        if (this.html_input) {
-            // Reset the progress
-            this.clear()
-            this.spinner(true);
-
-            this.socket.emit(this.messages.LOAD_SET, {
-                set: this.html_input.value
-            });
-        } else {
-            this.fail("Could not find the input field for the set number");
-        }
-    }
 
     // Update the progress
     progress(data={}) {
@@ -304,63 +179,6 @@ class BrickSocket {
         }
     }
 
-    // Bulk: read the input as a list
-    read_set_list() {
-        this.set_list = [];
-
-        if (this.html_input) {
-            const value = this.html_input.value;
-            this.set_list = value.split(",").map((el) => el.trim())
-        }
-    }
-
-    // Set is loaded
-    set_loaded(data) {
-        if (this.html_card) {
-            this.html_card.classList.remove("d-none");
-
-            if (this.html_card_set) {
-                this.html_card_set.textContent = data["set"];
-            }
-
-            if (this.html_card_name) {
-                this.html_card_name.textContent = data["name"];
-            }
-
-            if (this.html_card_image_container) {
-                this.html_card_image_container.setAttribute("style", `background-image: url(${data["image"]})`);
-            }
-
-            if (this.html_card_image) {
-                this.html_card_image.setAttribute("src", data["image"]);
-                this.html_card_image.setAttribute("alt", data["set"]);
-            }
-
-            if (this.html_card_footer) {
-                this.html_card_footer.classList.add("d-none");
-
-                if (!data.download) {
-                    this.html_card_footer.classList.remove("d-none");
-
-                    if (this.html_card_confirm) {
-                        if (this.confirm_listener !== undefined) {
-                            this.html_card_confirm.removeEventListener("click", this.confirm_listener);
-                        }
-
-                        this.confirm_listener = ((bricksocket, set) => (e) => {
-                            if (!bricksocket.disabled) {
-                                bricksocket.toggle(false);
-                                bricksocket.import_set(false, set);
-                            }
-                        })(this, data["set"]);
-
-                        this.html_card_confirm.addEventListener("click", this.confirm_listener);
-                    }
-                }
-            }
-        }
-    }
-
     // Setup the actual socket
     setup() {
         if (this.socket === undefined) {
@@ -387,11 +205,6 @@ class BrickSocket {
             this.socket.on(this.messages.PROGRESS, ((bricksocket) => (data) => {
                 bricksocket.progress(data);
             })(this));
-
-            // Set loaded
-            this.socket.on(this.messages.SET_LOADED, ((bricksocket) => (data) => {
-                bricksocket.set_loaded(data);
-            })(this));
         }
     }
 
@@ -434,21 +247,5 @@ class BrickSocket {
     // Toggle clicking on the button, or sending events
     toggle(enabled) {
         this.disabled = !enabled;
-
-        if (this.html_button) {
-            this.html_button.disabled = !enabled;
-        }
-
-        if (this.html_input) {
-            this.html_input.disabled = !enabled;
-        }
-
-        if (this.html_card_confirm) {
-            this.html_card_confirm.disabled = !enabled;
-        }
-
-        if (this.html_card_dismiss) {
-            this.html_card_dismiss.disabled = !enabled;
-        }
     }
 }

templates/base.html

@@ -82,7 +82,8 @@
     <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/socket/socket.js') }}"></script>
+    <script src="{{ url_for('static', filename='scripts/socket/set.js') }}"></script>
     <script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
     <script type="text/javascript">
       document.addEventListener("DOMContentLoaded", () => {

templates/set/socket.html

@@ -1,6 +1,6 @@
 <script type="text/javascript">
   document.addEventListener("DOMContentLoaded", () => {
-    new BrickSocket('add', '{{ path }}', '{{ namespace }}', {
+    new BrickSetSocket('add', '{{ path }}', '{{ namespace }}', {
       COMPLETE: '{{ messages['COMPLETE'] }}',
       FAIL: '{{ messages['FAIL'] }}',
       IMPORT_SET: '{{ messages['IMPORT_SET'] }}',