Turn output tabs into progress bars!

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.
  *

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) {

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 = "";
+            }
+        }
     }
 
     /**

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;

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 = "";
             }