From 096e313a85c79486c7857477d90b24119d394fae Mon Sep 17 00:00:00 2001
From: Tom Wallroth <tomwallroth@gmail.com>
Date: Wed, 10 Apr 2024 23:30:26 +0200
Subject: [PATCH] fileman: allow managing files in the app loader

---
 apps/fileman/manage_files.html | 77 ++++++++++++++++++++++++++++++++++
 apps/fileman/metadata.json     |  1 +
 2 files changed, 78 insertions(+)
 create mode 100644 apps/fileman/manage_files.html
diff --git a/apps/fileman/manage_files.html b/apps/fileman/manage_files.html
new file mode 100644
index 000000000..719a188d6
--- /dev/null
+++ b/apps/fileman/manage_files.html
@@ -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>
diff --git a/apps/fileman/metadata.json b/apps/fileman/metadata.json
index f5589e396..52f2fd06d 100644
--- a/apps/fileman/metadata.json
+++ b/apps/fileman/metadata.json
@@ -7,6 +7,7 @@
   "icon": "icons8-filing-cabinet-48.png",
   "tags": "tools",
   "supports": ["BANGLEJS","BANGLEJS2"],
+  "interface": "manage_files.html",
   "readme": "README.md",
   "storage": [
     {"name":"fileman.app.js","url":"fileman.app.js"},
