Added UI loading indications to the HTML app

This commit is contained in:
toby 2017-04-21 20:04:12 -04:00
parent 3fb660d816
commit a13e2468db
3 changed files with 73 additions and 0 deletions

View file

@ -30,6 +30,7 @@ var App = function(categories, operations, defaultFavourites, defaultOptions) {
this.chef = new Chef();
this.manager = new Manager(this);
this.baking = false;
this.autoBake_ = false;
this.progress = 0;
this.ingId = 0;
@ -67,6 +68,37 @@ App.prototype.handleError = function(err) {
};
/**
* Updates the UI to show if baking is in process or not.
*
* @param {bakingStatus}
*/
App.prototype.setBakingStatus = function(bakingStatus) {
this.baking = bakingStatus;
var inputLoadingIcon = document.querySelector("#input .title .loading-icon"),
outputLoadingIcon = document.querySelector("#output .title .loading-icon"),
inputElement = document.querySelector("#input-text"),
outputElement = document.querySelector("#output-text");
if (bakingStatus) {
inputLoadingIcon.style.display = "inline-block";
outputLoadingIcon.style.display = "inline-block";
inputElement.classList.add("disabled");
outputElement.classList.add("disabled");
inputElement.disabled = true;
outputElement.disabled = true;
} else {
inputLoadingIcon.style.display = "none";
outputLoadingIcon.style.display = "none";
inputElement.classList.remove("disabled");
outputElement.classList.remove("disabled");
inputElement.disabled = false;
outputElement.disabled = false;
}
};
/**
* Calls the Chef to bake the current input using the current recipe.
*
@ -76,6 +108,10 @@ App.prototype.handleError = function(err) {
App.prototype.bake = async function(step) {
var response;
if (this.baking) return;
this.setBakingStatus(true);
try {
response = await this.chef.bake(
this.getInput(), // The user's input
@ -94,6 +130,8 @@ App.prototype.bake = async function(step) {
this.handleError(response.error);
}
this.setBakingStatus(false);
this.options = response.options;
this.dishStr = response.type === "html" ? Utils.stripHtmlTags(response.result, true) : response.result;
this.progress = response.progress;