From 9d60ef5f72ee6e142cc3db1cbaef26070262a07b Mon Sep 17 00:00:00 2001 From: j433866 Date: Mon, 10 Jun 2019 15:39:21 +0100 Subject: [PATCH] Turn output tabs into progress bars! --- src/core/ChefWorker.js | 18 ++++++++++++++ src/core/Recipe.mjs | 1 + src/web/waiters/OutputWaiter.mjs | 30 +++++++++++++++++++---- src/web/waiters/TabWaiter.mjs | 42 ++++++++++++++++++++++++++++++++ src/web/waiters/WorkerWaiter.mjs | 18 +++++++++++--- 5 files changed, 101 insertions(+), 8 deletions(-) diff --git a/src/core/ChefWorker.js b/src/core/ChefWorker.js index d2f4e186..078842a1 100644 --- a/src/core/ChefWorker.js +++ b/src/core/ChefWorker.js @@ -212,6 +212,24 @@ self.sendStatusMessage = function(msg) { }; +/** + * Send progress update to the app. + * + * @param {number} progress + * @param {number} total + */ +self.sendProgressMessage = function(progress, total) { + self.postMessage({ + action: "progressMessage", + data: { + progress: progress, + total: total, + inputNum: self.inputNum + } + }); +}; + + /** * Send an option value update to the app. * diff --git a/src/core/Recipe.mjs b/src/core/Recipe.mjs index 4489756e..bed6845c 100755 --- a/src/core/Recipe.mjs +++ b/src/core/Recipe.mjs @@ -204,6 +204,7 @@ class Recipe { if (ENVIRONMENT_IS_WORKER()) { self.sendStatusMessage(`Baking... (${i+1}/${this.opList.length})`); + self.sendProgressMessage(i + 1, this.opList.length); } if (op.flowControl) { diff --git a/src/web/waiters/OutputWaiter.mjs b/src/web/waiters/OutputWaiter.mjs index 65d5a88a..5e5ebeba 100755 --- a/src/web/waiters/OutputWaiter.mjs +++ b/src/web/waiters/OutputWaiter.mjs @@ -154,6 +154,9 @@ class OutputWaiter { this.outputs[inputNum].data = data; + const tabItem = this.manager.tabs.getOutputTabItem(inputNum); + if (tabItem) tabItem.style.background = ""; + if (set) this.set(inputNum); } @@ -223,11 +226,15 @@ class OutputWaiter { * Updates the stored progress value for the output in the output array * * @param {number} progress + * @param {number} total * @param {number} inputNum */ - updateOutputProgress(progress, inputNum) { + updateOutputProgress(progress, total, inputNum) { if (!this.outputExists(inputNum)) return; this.outputs[inputNum].progress = progress; + + this.manager.tabs.updateOutputTabProgress(inputNum, progress, total); + } /** @@ -283,7 +290,7 @@ class OutputWaiter { this.manager.controls.hideStaleIndicator(); } - if (output.progress !== undefined) { + if (output.progress !== undefined && !this.app.baking) { this.manager.recipe.updateBreakpointIndicator(output.progress); } else { this.manager.recipe.updateBreakpointIndicator(false); @@ -305,7 +312,11 @@ class OutputWaiter { outputHighlighter.display = "none"; inputHighlighter.display = "none"; - outputText.value = output.error; + if (output.error) { + outputText.value = output.error; + } else { + outputText.value = output.data.result; + } outputHtml.innerHTML = ""; } else if (output.status === "baked" || output.status === "inactive") { document.querySelector("#output-loader .loading-msg").textContent = `Loading output ${inputNum}`; @@ -953,6 +964,8 @@ class OutputWaiter { * @param {number} inputNum */ async displayTabInfo(inputNum) { + if (!this.outputExists(inputNum)) return; + const dish = this.getOutputDish(inputNum); let tabStr = ""; @@ -960,11 +973,18 @@ class OutputWaiter { tabStr = await this.getDishStr(this.getOutputDish(inputNum)); tabStr = tabStr.replace(/[\n\r]/g, ""); } - tabStr = tabStr.slice(0, 200); - this.manager.tabs.updateOutputTabHeader(inputNum, tabStr); + this.manager.tabs.updateOutputTabProgress(inputNum, this.outputs[inputNum].progress, this.manager.worker.recipeConfig.length); + const tabItem = this.manager.tabs.getOutputTabItem(inputNum); + if (tabItem) { + if (this.outputs[inputNum].status === "error") { + tabItem.style.color = "#FF0000"; + } else { + tabItem.style.color = ""; + } + } } /** diff --git a/src/web/waiters/TabWaiter.mjs b/src/web/waiters/TabWaiter.mjs index 3e54c814..6ca119a4 100644 --- a/src/web/waiters/TabWaiter.mjs +++ b/src/web/waiters/TabWaiter.mjs @@ -400,6 +400,48 @@ class TabWaiter { this.updateTabHeader(inputNum, data, "output"); } + /** + * Updates the tab background to display the progress of the current tab + * + * @param {number} inputNum - The inputNum of the tab + * @param {number} progress - The current progress + * @param {number} total - The total which the progress is a percent of + * @param {string} io - Either "input" or "output" + */ + updateTabProgress(inputNum, progress, total, io) { + const tabItem = this.getTabItem(inputNum, io); + if (tabItem === null) return; + + const percentComplete = (progress / total) * 100; + if (percentComplete === 100 || progress === false) { + tabItem.style.background = ""; + } else { + tabItem.style.background = `linear-gradient(to right, var(--title-background-colour) ${percentComplete}%, var(--primary-background-colour) ${percentComplete}%)`; + } + } + + /** + * Updates the input tab background to display its progress + * + * @param {number} inputNum + * @param {number} progress + * @param {number} total + */ + updateInputTabProgress(inputNum, progress, total) { + this.updateTabProgress(inputNum, progress, total, "input"); + } + + /** + * Updates the output tab background to display its progress + * + * @param {number} inputNum + * @param {number} progress + * @param {number} total + */ + updateOutputTabProgress(inputNum, progress, total) { + this.updateTabProgress(inputNum, progress, total, "output"); + } + } export default TabWaiter; diff --git a/src/web/waiters/WorkerWaiter.mjs b/src/web/waiters/WorkerWaiter.mjs index 8fa015ef..89cd2646 100644 --- a/src/web/waiters/WorkerWaiter.mjs +++ b/src/web/waiters/WorkerWaiter.mjs @@ -221,9 +221,11 @@ class WorkerWaiter { } break; case "statusMessage": - // Status message should be done per output this.manager.output.updateOutputMessage(r.data.message, r.data.inputNum, true); break; + case "progressMessage": + this.manager.output.updateOutputProgress(r.data.progress, r.data.total, r.data.inputNum); + break; case "optionUpdate": log.debug(`Setting ${r.data.option} to ${r.data.value}`); this.app.options[r.data.option] = r.data.value; @@ -256,7 +258,12 @@ class WorkerWaiter { } this.manager.output.updateOutputProgress(progress, inputNum); this.manager.output.updateOutputValue(data, inputNum, false); - this.manager.output.updateOutputStatus("baked", inputNum); + + if (progress !== false) { + this.manager.output.updateOutputStatus("error", inputNum); + } else { + this.manager.output.updateOutputStatus("baked", inputNum); + } } /** @@ -319,6 +326,11 @@ class WorkerWaiter { this.manager.output.updateOutputStatus("inactive", this.inputNums[i]); } + const tabList = this.manager.tabs.getOutputTabList(); + for (let i = 0; i < tabList.length; i++) { + this.manager.tabs.getOutputTabItem(tabList[i]).style.background = ""; + } + this.inputs = []; this.inputNums = []; this.totalOutputs = 0; @@ -642,7 +654,7 @@ class WorkerWaiter { const bakeButton = document.getElementById("bake"); if (this.app.baking) { if (percentComplete < 100) { - document.getElementById("bake").style.background = `linear-gradient(to left, #fea79a ${percentComplete}%, #f44336 ${percentComplete}%)`; + bakeButton.style.background = `linear-gradient(to left, #fea79a ${percentComplete}%, #f44336 ${percentComplete}%)`; } else { bakeButton.style.background = ""; }