added file manager, upload animation, unsaved config indicator

rust/src_webpack/src/fileview.ts

@@ -0,0 +1,97 @@
+import { Controller } from "./main";
+
+const regex = /[^a-zA-Z0-9_.]/g;
+
+function sanitize(str:string){
+  return str.replaceAll(regex, '_')
+} 
+
+export class FileView {
+  readonly fileListView: HTMLElement;
+  readonly controller: Controller;
+  readonly filefreesize: HTMLElement;
+  readonly filetotalsize: HTMLElement;
+  readonly fileusedsize: HTMLElement;
+
+  constructor(controller: Controller) {
+    (document.getElementById("fileview") as HTMLElement).innerHTML = require('./fileview.html') as string;
+    this.fileListView = document.getElementById("fileList") as HTMLElement
+    this.filefreesize = document.getElementById("filefreesize") as HTMLElement
+    this.filetotalsize = document.getElementById("filetotalsize") as HTMLElement
+    this.fileusedsize = document.getElementById("fileusedsize") as HTMLElement
+
+    let fileuploadfile = document.getElementById("fileuploadfile") as HTMLInputElement
+    let fileuploadname = document.getElementById("fileuploadname") as HTMLInputElement
+    let fileuploadbtn = document.getElementById("fileuploadbtn") as HTMLInputElement
+    fileuploadfile.onchange = () => {
+      var selectedFile = fileuploadfile.files?.[0];
+      if (selectedFile == null) {
+        //TODO error dialog here
+        return
+      }
+      
+      fileuploadname.value = sanitize(selectedFile.name)
+    };
+
+    fileuploadname.onchange = () => {
+      let input = fileuploadname.value
+      let clean = sanitize(fileuploadname.value)
+      if (input != clean){
+        fileuploadname.value = clean
+      }
+    }
+
+    fileuploadbtn.onclick = () => {
+      var selectedFile = fileuploadfile.files?.[0];
+      if (selectedFile == null) {
+        //TODO error dialog here
+        return
+      }
+      controller.uploadFile(selectedFile, selectedFile.name)
+    }
+
+
+
+    this.controller = controller;
+  }
+
+  setFileList(fileList: FileList, public_url: string) {
+    this.filetotalsize.innerText = Math.floor(fileList.total / 1024) + "kB"
+    this.fileusedsize.innerText = Math.ceil(fileList.used / 1024) + "kB"
+    this.filefreesize.innerText = Math.ceil((fileList.total - fileList.used) / 1024) + "kB"
+
+    //fast clear
+    this.fileListView.textContent = ""
+    for (let i = 0; i < fileList.files.length; i++) {
+      let file = fileList.files[i]
+      new FileEntry(this.controller, i, file, this.fileListView, public_url);
+    }
+  }
+}
+
+class FileEntry {
+  view: HTMLElement;
+  constructor(controller: Controller, fileid: number, fileinfo: FileInfo, parent: HTMLElement, public_url: string) {
+    this.view = document.createElement("div") as HTMLElement
+    parent.appendChild(this.view)
+    this.view.classList.add("fileentryouter")
+
+    const template = require('./fileviewentry.html') as string;
+    const fileRaw = template.replaceAll("${fileid}", String(fileid));
+    this.view.innerHTML = fileRaw
+
+    let name = document.getElementById("file_" + fileid + "_name") as HTMLElement;
+    let size = document.getElementById("file_" + fileid + "_size") as HTMLElement;
+    let deleteBtn = document.getElementById("file_" + fileid + "_delete") as HTMLButtonElement;
+    deleteBtn.onclick = () => {
+      controller.deleteFile(fileinfo.filename);
+    }
+
+    let downloadBtn = document.getElementById("file_" + fileid + "_download") as HTMLAnchorElement;
+    downloadBtn.href = public_url + "/file?filename=" + fileinfo.filename
+    downloadBtn.download = fileinfo.filename
+
+    name.innerText = fileinfo.filename;
+    size.innerText = fileinfo.size.toString()
+  }
+}