96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
import {Controller} from "./main";
|
|
import {FileInfo, FileList} from "./api";
|
|
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 = () => {
|
|
const 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 = () => {
|
|
const 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;
|
|
this.view.innerHTML = template.replaceAll("${fileid}", String(fileid))
|
|
|
|
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()
|
|
}
|
|
} |