diff --git a/static/scripts/socket/set.js b/static/scripts/socket/set.js
new file mode 100644
index 0000000..60a2244
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/static/scripts/socket.js b/static/scripts/socket/socket.js
similarity index 54%
rename from static/scripts/socket.js
rename to static/scripts/socket/socket.js
index 5a24d06..1a34056 100644
--- a/static/scripts/socket.js
+++ b/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
- this.add_listener = undefined;
- this.confirm_listener = undefined;
+ // Bulk mode
+ this.bulk = bulk;
// 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;
- }
}
}
diff --git a/templates/base.html b/templates/base.html
index 1132f2b..12c4afa 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -82,7 +82,8 @@
-
+
+