bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fileman: allow managing files in the app loader

master
Tom Wallroth 2024-04-10 23:30:26 +02:00
parent fc373c7ab5
commit 096e313a85
2 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
apps/fileman/manage_files.html Normal file
View File

@ -0,0 +1,77 @@
<html>
<head>
<link rel="stylesheet" href="../../css/spectre.min.css">
</head>
<body>
<script src="../../core/lib/interface.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
<table class="table">
<thead><tr><th>Stats</th><th></th></tr></thead>
<tbody><tr v-for="s in stats"><td>{{s[0]}}</td><td>{{s[1]}}</td></tr></tbody>
</table>
<h3>Files</h3>
<div class="form-group">
<label class="form-label">Filter</label>
<input class="form-input" v-model="fileFilter" type="text" />
</div>
<table class="table">
<thead><tr><th>Filename</th><th>show</th><th>delete</th></tr></thead>
<tbody>
<tr v-for="file in filteredFiles">
<td>{{file}}</td>
<td><button v-on:click="showFile(file)" class="btn btn-primary btn-lg mr-2">show</button></td>
<td><button v-on:click="deleteFile(file)" class="btn btn-primary btn-lg mr-2">delete</button></td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
files: ['Click load files to see something'],
fileFilter: '',
stats: [['No stats', 'loaded']],
},
computed: {
filteredFiles: function () {
return this.files.filter((f) => f.includes(this.fileFilter));
}
},
mounted: function () {
setTimeout(() => {
this.loadFiles();
this.getStats();
}, 1000);
},
methods: {
loadFiles: function () {
Puck.eval('require("Storage").list()', (files) => {
this.files = files.filter((f) => !f.startsWith('.')).sort();
});
},
getStats: function () {
Puck.eval('require("Storage").getStats()', (stats) => {
this.stats = Object.entries(stats);
});
},
deleteFile: function (file) {
if(confirm(`Really delete ${file}?`)) {
Puck.eval(`require("Storage").erase("${file}")`);
this.loadFiles();
this.getStats();
}
},
showFile: function (file) {
Puck.eval(`require("Storage").read("${file}")`, (contents) => {
alert(contents);
})
}
}
})
</script>
</body>
</html>

1
apps/fileman/metadata.json
View File

@ -7,6 +7,7 @@
"icon": "icons8-filing-cabinet-48.png", "icon": "icons8-filing-cabinet-48.png",
"tags": "tools", "tags": "tools",
"supports": ["BANGLEJS","BANGLEJS2"], "supports": ["BANGLEJS","BANGLEJS2"],
"interface": "manage_files.html",
"readme": "README.md", "readme": "README.md",
"storage": [ "storage": [
{"name":"fileman.app.js","url":"fileman.app.js"}, {"name":"fileman.app.js","url":"fileman.app.js"},