Split the JS socket with a generic part and one dedicated to load Rebrickable sets
This commit is contained in:
parent
f48ae99179
commit
9113d539f0
244
static/scripts/socket/set.js
Normal file
244
static/scripts/socket/set.js
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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", () => {
|
||||
|
||||
@ -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'] }}',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user