function getInstalledApps() {
showLoadingIndicator("myappscontainer");
- showProgress(`Getting app list...`,undefined,"sticky");
// Get apps and files
return Comms.getInstalledApps()
.then(appJSON => {
- hideProgress("sticky");
appsInstalled = appJSON;
refreshMyApps();
refreshLibrary();
})
.then(() => handleConnectionChange(true))
.catch(err=>{
- hideProgress("sticky");
return Promise.reject();
});
}
@@ -555,15 +435,14 @@ document.getElementById("settime").addEventListener("click",event=>{
});
document.getElementById("removeall").addEventListener("click",event=>{
showPrompt("Remove All","Really remove all apps?").then(() => {
- showProgress("Removing all apps","animate", "sticky");
return Comms.removeAllApps();
}).then(()=>{
- hideProgress("sticky");
+ Progress.hide({sticky:true});
appsInstalled = [];
showToast("All apps removed","success");
return getInstalledApps();
}).catch(err=>{
- hideProgress("sticky");
+ Progress.hide({sticky:true});
showToast("App removal failed, "+err,"error");
});
});
@@ -578,24 +457,23 @@ document.getElementById("installdefault").addEventListener("click",event=>{
appCount = defaultApps.length;
return showPrompt("Install Defaults","Remove everything and install default apps?");
}).then(() => {
- showProgress("Removing all apps","animate", "sticky");
return Comms.removeAllApps();
}).then(()=>{
- hideProgress("sticky");
+ Progress.hide({sticky:true});
appsInstalled = [];
showToast(`Existing apps removed. Installing ${appCount} apps...`);
return new Promise((resolve,reject) => {
function upload() {
var app = defaultApps.shift();
if (app===undefined) return resolve();
- showProgress(`${app.name} (${appCount-defaultApps.length}/${appCount})`,undefined,"sticky");
+ Progress.show({title:`${app.name} (${appCount-defaultApps.length}/${appCount})`,sticky:true});
Comms.uploadApp(app,"skip_reset").then((appJSON) => {
- hideProgress("sticky");
+ Progress.hide({sticky:true});
if (appJSON) appsInstalled.push(appJSON);
showToast(`(${appCount-defaultApps.length}/${appCount}) ${app.name} Uploaded`);
upload();
}).catch(function() {
- hideProgress("sticky");
+ Progress.hide({sticky:true});
reject()
});
}
@@ -607,7 +485,7 @@ document.getElementById("installdefault").addEventListener("click",event=>{
showToast("Default apps successfully installed!","success");
return getInstalledApps();
}).catch(err=>{
- hideProgress("sticky");
+ Progress.hide({sticky:true});
showToast("App Install failed, "+err,"error");
});
});
diff --git a/js/ui.js b/js/ui.js
new file mode 100644
index 000000000..c88091872
--- /dev/null
+++ b/js/ui.js
@@ -0,0 +1,140 @@
+// General UI tools (progress bar, toast, prompt)
+
+/// Handle progress bars
+var Progress = {
+ domElement : null, // the DOM element
+ sticky : false, // Progress.show({..., sticky:true}) don't remove until Progress.hide({sticky:true})
+ interval : undefined, // the interval used if Progress.show({progress:"animate"})
+ percent : undefined, // the current progress percentage
+ min : 0, // scaling for percentage
+ max : 1, // scaling for percentage
+
+ /* Show a Progress message
+ Progress.show({
+ sticky : bool // keep showing text even when Progress.hide is called (unless Progress.hide({sticky:true}))
+ percent : number | "animate"
+ min : // minimum scale for percentage (default 0)
+ max : // maximum scale for percentage (default 1)
+ }) */
+ show : function(options) {
+ options = options||{};
+ var text = options.title;
+ if (options.sticky) Progress.sticky = true;
+ if (options.min!==undefined) Progress.min = options.min;
+ if (options.max!==undefined) Progress.max = options.max;
+ var percent = options.percent;
+ if (percent!==undefined)
+ percent = Progress.min*100 + (Progress.max-Progress.min)*percent;
+ if (!Progress.domElement) {
+ if (Progress.interval) {
+ clearInterval(Progress.interval);
+ Progress.interval = undefined;
+ }
+ if (percent == "animate") {
+ Progress.interval = setInterval(function() {
+ Progress.percent += 2;
+ if (Progress.percent>100) Progress.percent=0;
+ Progress.show({percent:Progress.percent});
+ }, 100);
+ percent = 0;
+ }
+
+ var toastcontainer = document.getElementById("toastcontainer");
+ Progress.domElement = htmlElement(`
+ ${text ? `
${text}
`:``}
+
+
`);
+ toastcontainer.append(Progress.domElement);
+ } else {
+ var pt=document.getElementById("Progress.domElement");
+ pt.setAttribute("aria-valuenow",percent);
+ pt.style.width = percent+"%";
+ }
+ },
+ // Progress.hide({sticky:true}) undoes Progress.show({title:"title", sticky:true})
+ hide : function(options) {
+ options = options||{};
+ if (Progress.sticky && !options.sticky)
+ return;
+ Progress.sticky = false;
+ Progress.min = 0;
+ Progress.max = 1;
+ if (Progress.interval) {
+ clearInterval(Progress.interval);
+ Progress.interval = undefined;
+ }
+ if (Progress.domElement) Progress.domElement.remove();
+ Progress.domElement = undefined;
+ }
+};
+
+/// Add progress handler so we get nice uploads
+Puck.writeProgress = function(charsSent, charsTotal) {
+ if (charsSent===undefined) {
+ Progress.hide();
+ return;
+ }
+ var percent = Math.round(charsSent*100/charsTotal);
+ Progress.show({percent: percent});
+}
+
+/// Show a 'toast' message for status
+function showToast(message, type) {
+ // toast-primary, toast-success, toast-warning or toast-error
+ var style = "toast-primary";
+ if (type=="success") style = "toast-success";
+ else if (type=="error") style = "toast-error";
+ else if (type!==undefined) console.log("showToast: unknown toast "+type);
+ var toastcontainer = document.getElementById("toastcontainer");
+ var msgDiv = htmlElement(`
`);
+ msgDiv.innerHTML = message;
+ toastcontainer.append(msgDiv);
+ setTimeout(function() {
+ msgDiv.remove();
+ }, 5000);
+}
+
+/// Show a yes/no prompt
+function showPrompt(title, text, buttons) {
+ if (!buttons) buttons={yes:1,no:1};
+ return new Promise((resolve,reject) => {
+ var modal = htmlElement(`
+
+
+
+
+
+ ${escapeHtml(text).replace(/\n/g,'
')}
+
+
+
+
+
`);
+ document.body.append(modal);
+ modal.querySelector("a[href='#close']").addEventListener("click",event => {
+ event.preventDefault();
+ reject("User cancelled");
+ modal.remove();
+ });
+ htmlToArray(modal.getElementsByTagName("button")).forEach(button => {
+ button.addEventListener("click",event => {
+ event.preventDefault();
+ var isYes = event.target.getAttribute("isyes")=="1";
+ if (isYes) resolve();
+ else reject("User cancelled");
+ modal.remove();
+ });
+ });
+ });
+}