Added the ability to cancel bakes

src/web/App.js

@@ -27,7 +27,6 @@ const App = function(categories, operations, defaultFavourites, defaultOptions)
     this.doptions      = defaultOptions;
     this.options       = Utils.extend({}, defaultOptions);
 
-    this.chefWorker    = new ChefWorker();
     this.manager       = new Manager(this);
 
     this.baking        = false;
@@ -35,8 +34,6 @@ const App = function(categories, operations, defaultFavourites, defaultOptions)
     this.autoBakePause = false;
     this.progress      = 0;
     this.ingId         = 0;
-
-    this.chefWorker.addEventListener("message", this.handleChefMessage.bind(this));
 };
 
 
@@ -47,6 +44,7 @@ const App = function(categories, operations, defaultFavourites, defaultOptions)
  */
 App.prototype.setup = function() {
     document.dispatchEvent(this.manager.appstart);
+    this.registerChefWorker();
     this.initialiseSplitter();
     this.loadLocalStorage();
     this.populateOperationsList();
@@ -60,13 +58,23 @@ App.prototype.setup = function() {
 };
 
 
+/**
+ * Sets up the ChefWorker and associated listeners.
+ */
+App.prototype.registerChefWorker = function() {
+    this.chefWorker = new ChefWorker();
+    this.chefWorker.addEventListener("message", this.handleChefMessage.bind(this));
+};
+
+
 /**
  * Fires once all setup activities have completed.
  */
 App.prototype.loaded = function() {
-    // Check that both the app and the worker have loaded successfully before
+    // Check that both the app and the worker have loaded successfully, and that
-    // removing the loading screen.
+    // we haven't already loaded before attempting to remove the loading screen.
-    if (!this.worderLoaded || !this.appLoaded) return;
+    if (!this.workerLoaded || !this.appLoaded ||
+        !document.getElementById("loader-wrapper")) return;
 
     // Trigger CSS animations to remove preloader
     document.body.classList.add("loaded");
@@ -112,12 +120,14 @@ App.prototype.setBakingStatus = function(bakingStatus) {
             outputElement.disabled = true;
             outputLoader.style.visibility = "visible";
             outputLoader.style.opacity = 1;
-        }, 200);
+            this.manager.controls.toggleBakeButtonFunction(true);
+        }.bind(this), 200);
     } else {
         clearTimeout(this.bakingStatusTimeout);
         outputElement.disabled = false;
         outputLoader.style.opacity = 0;
         outputLoader.style.visibility = "hidden";
+        this.manager.controls.toggleBakeButtonFunction(false);
     }
 };
 
@@ -146,6 +156,17 @@ App.prototype.bake = function(step) {
 };
 
 
+/**
+ * Cancels the current bake by terminating the ChefWorker and creating a new one.
+ */
+App.prototype.cancelBake = function() {
+    this.chefWorker.terminate();
+    this.registerChefWorker();
+    this.setBakingStatus(false);
+    this.manager.controls.showStaleIndicator();
+};
+
+
 /**
  * Handler for messages sent back by the ChefWorker.
  *
@@ -163,7 +184,7 @@ App.prototype.handleChefMessage = function(e) {
         case "silentBakeComplete":
             break;
         case "workerLoaded":
-            this.worderLoaded = true;
+            this.workerLoaded = true;
             this.loaded();
             break;
         default:

src/web/ControlsWaiter.js

@@ -78,7 +78,11 @@ ControlsWaiter.prototype.setAutoBake = function(value) {
  * Handler to trigger baking.
  */
 ControlsWaiter.prototype.bakeClick = function() {
-    this.app.bake();
+    if (document.getElementById("bake").textContent.indexOf("Bake") > 0) {
+        this.app.bake();
+    } else {
+        this.app.cancelBake();
+    }
 };
 
 
@@ -386,4 +390,25 @@ ControlsWaiter.prototype.hideStaleIndicator = function() {
     staleIndicator.style.visibility = "hidden";
 };
 
+
+/**
+ * Switches the Bake button between 'Bake' and 'Cancel' functions.
+ *
+ * @param {boolean} cancel - Whether to change to cancel or not
+ */
+ControlsWaiter.prototype.toggleBakeButtonFunction = function(cancel) {
+    const bakeButton = document.getElementById("bake"),
+        btnText = bakeButton.querySelector("span");
+
+    if (cancel) {
+        btnText.innerText = "Cancel";
+        bakeButton.classList.remove("btn-success");
+        bakeButton.classList.add("btn-danger");
+    } else {
+        btnText.innerText = "Bake!";
+        bakeButton.classList.remove("btn-danger");
+        bakeButton.classList.add("btn-success");
+    }
+};
+
 export default ControlsWaiter;

src/web/html/index.html

@@ -122,7 +122,7 @@
                             <div id="bake-group">
                                 <button type="button" class="btn btn-success btn-lg" id="bake">
                                     <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
-                                    Bake!
+                                    <span>Bake!</span>
                                 </button>
                                 <label class="btn btn-success btn-lg" id="auto-bake-label" for="auto-bake">
                                     <input type="checkbox" checked="checked" id="auto-bake">

src/web/stylesheets/layout/_controls.css

@@ -46,7 +46,7 @@
     width: 60px;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-left: 1px solid var(--btn-success-bg-colour);
+    border-left: 1px solid transparent;
 }
 
 #auto-bake-label:hover {