mirror of https://github.com/espruino/BangleApps
Added proper remove app behaviour
Gordon Williams
parent
d769d27fbd
commit
1eab865e45
29
comms.js
29
comms.js
|
|
@ -1,8 +1,6 @@
|
|||
Puck.debug=3;
|
||||
|
||||
var Comms = {
|
||||
uploadApp : app => {
|
||||
/* eg
|
||||
/* 'app' is of the form:
|
||||
{ name: "T-Rex",
|
||||
icon: "trex.png",
|
||||
description: "T-Rex game in the style of Chrome's offline game",
|
||||
|
|
@ -13,17 +11,26 @@ uploadApp : app => {
|
|||
]
|
||||
}
|
||||
*/
|
||||
|
||||
// FIXME: use UART lib so that we handle errors properly
|
||||
var Comms = {
|
||||
uploadApp : app => {
|
||||
return new Promise((resolve,reject) => {
|
||||
// Load all files
|
||||
Promise.all(app.storage.map(storageFile => httpGet("apps/"+storageFile.file)
|
||||
// map each file to a command to load into storage
|
||||
.then(contents=>`require('Storage').write(${toJS(storageFile.name)},${toJS(contents)});`)))
|
||||
//
|
||||
.then(contents=>`\x10require('Storage').write(${toJS(storageFile.name)},${storageFile.evaluate ? contents : toJS(contents)});`)))
|
||||
.then(function(fileContents) {
|
||||
fileContents = fileContents.join("\n");
|
||||
console.log("uploadApp",fileContents);
|
||||
// reset to ensure we have enough memory to upload what we need to
|
||||
Puck.write("\x03reset();\n", function() {
|
||||
setTimeout(function() { // wait for reset
|
||||
Puck.write(fileContents,function() {
|
||||
resolve();
|
||||
});
|
||||
},500);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
|
|
@ -31,9 +38,21 @@ getInstalledApps : () => {
|
|||
return new Promise((resolve,reject) => {
|
||||
Puck.write("\x03",() => {
|
||||
Puck.eval('require("Storage").list().filter(f=>f[0]=="+").map(f=>f.substr(1))', appList => {
|
||||
console.log("getInstalledApps", appList);
|
||||
resolve(appList);
|
||||
});
|
||||
});
|
||||
});
|
||||
},
|
||||
removeApp : app => { // expects an app structure
|
||||
var cmds = app.storage.map(file=>{
|
||||
return `\x10require("Storage").erase(${toJS(file.name)});\n`;
|
||||
}).join("");
|
||||
console.log("removeApp", cmds);
|
||||
return new Promise((resolve,reject) => {
|
||||
Puck.write("\x03"+cmds,() => {
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,6 +13,10 @@
|
|||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.avatar img {
|
||||
border-radius: 5px 5px 5px 5px;
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
90
index.js
90
index.js
|
|
@ -1,13 +1,15 @@
|
|||
var appjson = [];
|
||||
var appJSON = []; // List of apps and info from apps.json
|
||||
var appsInstalled = []; // list of app IDs
|
||||
|
||||
httpGet("apps.json").then(apps=>{
|
||||
appjson = JSON.parse(apps);
|
||||
appjson.sort(appSorter);
|
||||
appJSON = JSON.parse(apps);
|
||||
appJSON.sort(appSorter);
|
||||
refreshLibrary();
|
||||
});
|
||||
|
||||
// Status
|
||||
// =========================================== Top Navigation
|
||||
function showToast(message) {
|
||||
function showToast(message, type) {
|
||||
// toast-primary, toast-success, toast-warning or toast-error
|
||||
var toastcontainer = document.getElementById("toastcontainer");
|
||||
var msgDiv = htmlElement(`<div class="toast toast-primary"></div>`);
|
||||
|
|
@ -42,7 +44,7 @@ function showPrompt(title, text) {
|
|||
document.body.append(modal);
|
||||
htmlToArray(modal.getElementsByTagName("button")).forEach(button => {
|
||||
button.addEventListener("click",event => {
|
||||
var isYes = event.target.getAttribute("isyes");
|
||||
var isYes = event.target.getAttribute("isyes")=="1";
|
||||
if (isYes) resolve();
|
||||
else reject();
|
||||
modal.remove();
|
||||
|
|
@ -65,39 +67,48 @@ function showTab(tabname) {
|
|||
// =========================================== Library
|
||||
function refreshLibrary() {
|
||||
var panelbody = document.querySelector("#librarycontainer .panel-body");
|
||||
panelbody.innerHTML = appjson.map((app,idx) => `<div class="tile">
|
||||
panelbody.innerHTML = appJSON.map((app,idx) => `<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="apps/${app.icon}" alt="${escapeHtml(app.name)}"></figure>
|
||||
<figure class="avatar"><img src="apps/${app.icon?app.icon:"apps/unknown.png"}" alt="${escapeHtml(app.name)}"></figure>
|
||||
</div>
|
||||
<div class="tile-content">
|
||||
<p class="tile-title text-bold">${escapeHtml(app.name)}</p>
|
||||
<p class="tile-subtitle">${escapeHtml(app.description)}</p>
|
||||
</div>
|
||||
<div class="tile-action">
|
||||
<button class="btn btn-link btn-action btn-lg"><i class="icon icon-upload" appid="${app.id}"></i></button>
|
||||
<button class="btn btn-link btn-action btn-lg"><i class="icon ${appsInstalled.includes(app.id)?"icon-delete":"icon-upload"}" appid="${app.id}"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
// set badge up top
|
||||
var tab = document.querySelector("#tab-librarycontainer a");
|
||||
tab.classList.add("badge");
|
||||
tab.setAttribute("data-badge", appjson.length);
|
||||
tab.setAttribute("data-badge", appJSON.length);
|
||||
htmlToArray(panelbody.getElementsByTagName("button")).forEach(button => {
|
||||
button.addEventListener("click",event => {
|
||||
var icon = event.target;
|
||||
var appid = icon.getAttribute("appid");
|
||||
var app = appjson.find(app=>app.id==appid);
|
||||
var app = appJSON.find(app=>app.id==appid);
|
||||
if (!app) return;
|
||||
if (icon.classList.contains("icon-upload")) {
|
||||
icon.classList.remove("icon-upload");
|
||||
icon.classList.add("loading");
|
||||
Comms.uploadApp(app).then(() => {
|
||||
showToast(app.name+" Uploaded!");
|
||||
appsInstalled.push(app.id);
|
||||
showToast(app.name+" Uploaded!", "success");
|
||||
icon.classList.remove("loading");
|
||||
icon.classList.add("icon-delete");
|
||||
}).catch(() => {
|
||||
refreshMyApps();
|
||||
}).catch(err => {
|
||||
showToast("Upload failed, "+err, "error");
|
||||
icon.classList.remove("loading");
|
||||
icon.classList.add("icon-upload");
|
||||
});
|
||||
} else {
|
||||
icon.classList.remove("icon-delete");
|
||||
icon.classList.add("loading");
|
||||
removeApp(app);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -105,30 +116,49 @@ function refreshLibrary() {
|
|||
refreshLibrary();
|
||||
// =========================================== My Apps
|
||||
|
||||
function removeApp(app) {
|
||||
return showPrompt("Delete","Really remove app '"+appid+"'?").then(() => {
|
||||
Comms.removeApp(app).then(()=>{
|
||||
appsInstalled = appsInstalled.filter(id=>id!=app.id);
|
||||
showToast(app.name+" removed successfully","success");
|
||||
refreshMyApps();
|
||||
refreshLibrary();
|
||||
}, err=>{
|
||||
showToast(app.name+" removal failed, "+err,"error");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function appNameToApp(appName) {
|
||||
var app = appjson.find(app=>app.id==appName);
|
||||
var app = appJSON.find(app=>app.id==appName);
|
||||
if (app) return app;
|
||||
return { id: "appName",
|
||||
/* If app not known, add just one file
|
||||
which is the JSON - so we'll remove it from
|
||||
the menu but may not get rid of all files. */
|
||||
return { id: appName,
|
||||
name: "Unknown app "+appName,
|
||||
icon: "unknown.png",
|
||||
description: "Unknown app",
|
||||
storage: [],
|
||||
storage: [ {name:"+"+appName}],
|
||||
unknown: true,
|
||||
};
|
||||
}
|
||||
|
||||
function refreshMyApps() {
|
||||
function showLoadingIndicator() {
|
||||
var panelbody = document.querySelector("#myappscontainer .panel-body");
|
||||
var tab = document.querySelector("#tab-myappscontainer a");
|
||||
// set badge up top
|
||||
tab.classList.add("badge");
|
||||
tab.setAttribute("data-badge", "");
|
||||
// Loading indicator
|
||||
panelbody.innerHTML = '<div class="loading loading-lg"></div>';
|
||||
// Get apps
|
||||
Comms.getInstalledApps().then(appIDs => {
|
||||
tab.setAttribute("data-badge", appIDs.length);
|
||||
panelbody.innerHTML = appIDs.map(appNameToApp).sort(appSorter).map(app => `<div class="tile">
|
||||
panelbody.innerHTML = '<div class="tile"><div class="tile-content" style="min-height:48px;"><div class="loading loading-lg"></div></div></div>';
|
||||
}
|
||||
|
||||
function refreshMyApps() {
|
||||
var panelbody = document.querySelector("#myappscontainer .panel-body");
|
||||
var tab = document.querySelector("#tab-myappscontainer a");
|
||||
tab.setAttribute("data-badge", appsInstalled.length);
|
||||
panelbody.innerHTML = appsInstalled.map(appNameToApp).sort(appSorter).map(app => `<div class="tile">
|
||||
<div class="tile-icon">
|
||||
<figure class="avatar"><img src="apps/${app.icon}" alt="${escapeHtml(app.name)}"></figure>
|
||||
</div>
|
||||
|
|
@ -146,16 +176,22 @@ function refreshMyApps() {
|
|||
var icon = event.target;
|
||||
var appid = icon.getAttribute("appid");
|
||||
var app = appNameToApp(appid);
|
||||
showPrompt("Delete","Really remove app '"+appid+"'?").then(() => {
|
||||
// remove app!
|
||||
removeApp(app);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function getInstalledApps() {
|
||||
showLoadingIndicator();
|
||||
// Get apps
|
||||
Comms.getInstalledApps().then(appIDs => {
|
||||
appsInstalled = appIDs;
|
||||
refreshMyApps();
|
||||
});
|
||||
});
|
||||
});
|
||||
refreshLibrary();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
document.getElementById("myappsrefresh").addEventListener("click",event=>{
|
||||
refreshMyApps();
|
||||
getInstalledApps();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue