From a029b2e90274b89eaf29253aa8ddee1aebb81182 Mon Sep 17 00:00:00 2001 From: ABelliqueux Date: Wed, 11 Jan 2023 18:46:49 +0100 Subject: [PATCH] Fix upload queuing --- static/script.js | 149 +++++++++++++++++++++++++++++++++++++++-------- static/style.css | 20 +++++++ 2 files changed, 144 insertions(+), 25 deletions(-) diff --git a/static/script.js b/static/script.js index 9dbc548..20a60f2 100644 --- a/static/script.js +++ b/static/script.js @@ -16,6 +16,7 @@ let t9n = size_unit : " Mio", of : " de ", upload_sent_count_msg : " éléments envoyés", + item_queued : "Synchronisation en attente...", }, en : { statusDefault : "Searching network for live hosts...", @@ -27,6 +28,7 @@ let t9n = size_unit : " MB", of : " of ", upload_sent_count_msg : " elements transferred.", + item_queued : "Queued for file synchronisation...", } }; // Timeline drag and drop elements default attributes @@ -38,7 +40,9 @@ window.currentUser = { status_all : t9n[LOCALE].statusDefault, medias_status : {}, freeze_timeline_update : 0, + freeze_ul : 0, last_ul_host : 0, + ul_queue : [], }; @@ -436,6 +440,36 @@ function update_host_list(infos_array){ } +function freeze_ui_host(host, html_attributes, inner_html=0, inner_text=0){ + // Add an overlay element to freeze part of the UI + // html_attributes, inner_html are objects with structure {"id":, 0 "class": 0, "attr" : "value", } + let container_element = document.getElementById(host); + let siblings = container_element.children; + // Upload dialog container / background + let upload_dialog_cont_element = add_HTML_element("div", html_attributes, 0, host); + container_element.insertBefore(upload_dialog_cont_element, siblings[0]); + if (inner_html){ + let child_node = add_HTML_element("div", inner_html, 0, host) + let new_node = container_element.children.item(html_attributes.id + host).appendChild(child_node); + if (inner_text){ + new_node.innerText = inner_text; + } + } +} + +function freeze_queued_container(command){ + freeze_attributes = {"id":"ul_queued_freeze_", "class": "ul_queued_freeze"}; + inner_html = {"id":"ul_queued_msg_", "class": "ul_queued_msg"}; + inner_text = t9n[LOCALE].item_queued; + freeze_ui_host(command.split("/")[2], freeze_attributes, inner_html, inner_text); +} + +function unfreeze_queued_container(host){ + let container = document.getElementById(host); + let exists = container.querySelector("div.ul_queued_freeze"); + exists? exists.remove(): false; +} + function display_upload_status(command) { // TODO : First this should set the HTMl with empty values, then call update_upload... let host = command.split("/")[2]; @@ -487,37 +521,55 @@ function destroy_upload_status(host) { let container_element = document.getElementById(host); let ul_cont_exists = document.getElementById("ul_dialog_cont_" + host); if ( ul_cont_exists != undefined) { + // Remove ul dialog container_element.removeChild(ul_cont_exists); + // Clear update callback clearTimeout(currentUser["ul_timeout_" + host]); } } async function update_upload_status(current_upload) { - //~ console.log("Updating upload status..."); - //~ console.log(current_upload); if (current_upload.status == -1){ - console.log("Destroying dialog..." + currentUser.last_ul_host); + // Upload finished + console.log("Upload finished - Destroying dialog for " + currentUser.last_ul_host); destroy_upload_status(currentUser.last_ul_host); + // Remove first item from command queue + currentUser.ul_queue.shift(); + // Upload done, un-freeze + currentUser.freeze_ul = 0; + // Call sync_host() again + setTimeout(sync_host, 1000); + } else if (current_upload.status) { - //~ console.log("Filling dialog..."); - document.getElementById("ul_dialog_cont_" + current_upload.host).style.display = "block"; + unfreeze_queued_container(currentUser.last_ul_host); + // Upload in progress + console.log("Updating dialog..."); + //document.getElementById("ul_dialog_cont_" + current_upload.host).style.display = "block"; + document.getElementById("ul_dialog_cont_" + currentUser.last_ul_host).style.display = "block"; // Fill table - document.getElementById("ul_status_progress_cnt_" + current_upload.host).innerHTML = current_upload.progress + " / " + current_upload.total_count + t9n[LOCALE].upload_sent_count_msg; - document.getElementById("ul_status_progress_size_" + current_upload.host).innerHTML = current_upload.transferred_size + t9n[LOCALE].size_unit + t9n[LOCALE].of + current_upload.total_size + t9n[LOCALE].size_unit; - document.getElementById("ul_status_filename_" + current_upload.host).innerHTML = t9n[LOCALE].filename + ": " + current_upload.filename; - document.getElementById("ul_status_filesize_" + current_upload.host).innerHTML = t9n[LOCALE].size + ": " + current_upload.size + t9n[LOCALE].size_unit; + document.getElementById("ul_status_progress_cnt_" + currentUser.last_ul_host).innerHTML = current_upload.progress + " / " + current_upload.total_count + t9n[LOCALE].upload_sent_count_msg; + document.getElementById("ul_status_progress_size_" + currentUser.last_ul_host).innerHTML = current_upload.transferred_size + t9n[LOCALE].size_unit + t9n[LOCALE].of + current_upload.total_size + t9n[LOCALE].size_unit; + document.getElementById("ul_status_filename_" + currentUser.last_ul_host).innerHTML = t9n[LOCALE].filename + ": " + current_upload.filename; + document.getElementById("ul_status_filesize_" + currentUser.last_ul_host).innerHTML = t9n[LOCALE].size + ": " + current_upload.size + t9n[LOCALE].size_unit; // Progress bar CSS if (current_upload.transferred_percent) { - document.getElementById("ul_progress_" + current_upload.host).innerText = current_upload.transferred_percent + "%"; - document.getElementById("ul_progress_" + current_upload.host).style.background = "linear-gradient(90deg, " + TIMELINE_COLOR_CURSOR + " " + current_upload.transferred_percent + "%, #fff " + current_upload.transferred_percent + "%)"; + document.getElementById("ul_progress_" + currentUser.last_ul_host).innerText = current_upload.transferred_percent + "%"; + document.getElementById("ul_progress_" + currentUser.last_ul_host).style.background = "linear-gradient(90deg, " + TIMELINE_COLOR_CURSOR + " " + current_upload.transferred_percent + "%, #fff " + current_upload.transferred_percent + "%)"; } - currentUser["ul_timeout_" + current_upload.host] = setTimeout(send_ajax_cmd, 3000, `/sync/${current_upload.host}/status`); + // Update status callback + currentUser["ul_timeout_" + currentUser.last_ul_host] = setTimeout(send_ajax_cmd, 1000, `/sync/${currentUser.last_ul_host}/status`); } else { - //~ console.log("requesting status data"); - currentUser.last_ul_host = current_upload.host; - send_ajax_cmd(`/sync/${current_upload.host}/status`); - await sleep(500); + // Upload is starting + console.log("Requesting data to update dialog for " + currentUser.last_ul_host); + // Freeze ul cmd + currentUser.freeze_ul = 1; + //~ currentUser.last_ul_host = current_upload.host; + // This will end up calling update_upload_status() again, expecting the ul status value to change from 0 to int + send_ajax_cmd(`/sync/${currentUser.last_ul_host}/status`); + //~ send_ajax_cmd(`/sync/${current_upload.host}/status`); + // Wait a bit for response + await sleep(200); } } @@ -561,12 +613,12 @@ function parse_result(command, infos_array) { //~ console.log("stopping upload..."); //~ console.log(infos_array); //~ destroy_upload_status(); - } else { + } //else { //~ console.log("displaying status"); //~ console.log(infos_array); //~ if (infos_array.total_count) { //~ display_upload_status(infos_array) - } + //} } else { setTimeout(send_ajax_cmd, 180, "/all/list"); setTimeout(send_ajax_cmd, 180, "/all/status"); @@ -618,6 +670,40 @@ function scan_hosts() { setTimeout(scan_hosts, currentUser.scan_interval); } + +function sync_host() { + // If ul is not in progress + if (!currentUser.freeze_ul){ + // If there's something in the queue + if (currentUser.ul_queue.length){ + // Send first command in queue. + let command_q = currentUser.ul_queue[0]; + console.log("Sending command " + command_q); + let host = command_q.split("/")[2]; + // Send ul command + send_ajax_cmd(command_q); + // Update status + currentUser.status_all = t9n[LOCALE].sync; + // Create dialog + // TODO : display grayed out dialog when host is queued for upload + display_upload_status(command_q); + // Set current host + currentUser.last_ul_host = host; + // Send command to update dialog according to upload status + // This ends up calling update_upload_status() + setTimeout(send_ajax_cmd, 200, command_q + "/status"); + } else { + console.log("Nothing else in the queue !"); + // Make sure sane values are set back + currentUser.last_ul_host = 0; + return 0; + } + } + console.log("UL freezed, waiting a bit..."); + return 0; +} + + // UI addEventListener("DOMContentLoaded", function() { //~ adjust_timeline(); @@ -656,17 +742,30 @@ addEventListener("DOMContentLoaded", function() { } else if ( command.indexOf("/sync/") > -1 ) { console.log("Sync command detected"); - currentUser.status_all = t9n[LOCALE].sync; - // Display dialog - display_upload_status(command); - // Request values to fill dialog - //~ request.onload = send_ajax_cmd(command + "/status"); - setTimeout(send_ajax_cmd, 1000, command + "/status"); + // If command not already in queue, add it + if (!currentUser.ul_queue.includes(command)){ + console.log("Queuing command..."); + currentUser.ul_queue.push(command); + freeze_queued_container(command); + } else { + console.log("Command already in queue..."); + } + sync_host(); + //~ if (currentUser.ul_queue.length > 1){ + //~ if (currentUser.freeze_ul){ + //~ console.log("UL freezed, wait for queue to complete.") + // Offload command sending to sync_host() + return 1; + //~ } + //~ currentUser.status_all = t9n[LOCALE].sync; + //~ // Display dialog + //~ display_upload_status(command); + //~ // Request values to fill dialog + //~ setTimeout(send_ajax_cmd, 1000, command + "/status"); } else if ( command.indexOf("/browse") > -1 ) { request.onload = send_ajax_cmd("/all/browse"); } - request.open("GET", command, true); request.send(); }); diff --git a/static/style.css b/static/style.css index b166549..69aa99d 100644 --- a/static/style.css +++ b/static/style.css @@ -34,6 +34,26 @@ tr:nth-child(2n+1) {background-color: #888;} padding: 0; } +.ul_queued_freeze { + height: 100%; + width: 100%; + background-color: #fff8; + display: block; + position: absolute; +} + +.ul_queued_msg { + color: #888; + font-weight: bold; + text-align: center; + width: 25%; + margin: auto; + background: #e6e6e6; + height: 100%; + padding-top: 5%; + font-size: 1.2em; +} + .client_container { border-bottom: #222 solid 1px; display:none;