From b4d2e03de48813316ee6b61b51be520e4f41a6ce Mon Sep 17 00:00:00 2001
From: lixinyang123 <lixinyangemil@outlook.com>
Date: Sat, 6 Jul 2024 07:31:05 +0800
Subject: [PATCH] support delete oos file

---
 js/toss.js     | 63 ++++++++++++++++++++++++++++++++------------------
 view/toss.html | 24 ++++++-------------
 2 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/js/toss.js b/js/toss.js
index ecbfc8c..cd8e5ac 100644
--- a/js/toss.js
+++ b/js/toss.js
@@ -18,20 +18,20 @@ function keyBase() {
 async function addFile() {
     let items = await showOpenFilePicker({ multiple: true })
     fileHandlers.push(...items);
-    render(fileHandlers)
+    renderPending(fileHandlers)
 }
 
 async function addFolder() {
     fileHandlers.push(await showDirectoryPicker())
-    render(fileHandlers)
+    renderPending(fileHandlers)
 }
 
 function removeFile(fileName) {
     fileHandlers.splice(fileHandlers.findIndex(i => i.name == fileName), 1)
-    render(fileHandlers)
+    renderPending(fileHandlers)
 }
 
-async function render(handlers, target = '#fileList') {
+async function renderPending(handlers, target = '#fileList') {
     let parent = document.querySelector(target)
 
     if (target == '#fileList') {
@@ -53,21 +53,16 @@ async function render(handlers, target = '#fileList') {
 
 async function showFile(handler, parent) {
     let file = await getFile(handler)
-    console.log()
 
     parent.innerHTML +=`
         <div class="card-header" style="background-color: whitesmoke;">
             <div class="d-flex w-100 justify-content-between">
                 <div>
                     <p class="mb-1">${file.name}</p>
-                    <small>
-                    ${
-                        (() => {
-                            return file.key 
-                                ? `<a href="${api}/${file.key}" target="_blank">Download</a>` 
-                                : ''
-                        })()
-                    }
+                    <small ${file.key ? '' : 'hidden'}>
+                        <a href="javascript:void(0)" onclick="downloadFile('${file.key}')">View</a> &nbsp;
+                        <a href="javascript:void(0)" onclick="downloadFile('${file.key}', true)">Download</a> &nbsp;
+                        <a href="javascript:void(0)" onclick="deleteFile('${file.key}')">Delete</a> &nbsp;
                     </small>
                 </div>
                 <div>
@@ -94,10 +89,31 @@ async function showFolder(handler, parent) {
         </div>`
 
     let children = await getChildren(handler)
-    await render(children, `#${id}`)
+    await renderPending(children, `#${id}`)
+}
+
+function downloadFile(key, attachment = false) {
+    let url = `${api}/${key}` + (attachment ? '?attachment=true' : '')
+    window.open(url)
+}
+
+async function deleteFile(key) {
+    toast("Conchbrain OSS", "Deleting...")
+
+    await fetch(`${api}/${key}`, {
+        method: 'DELETE',
+    })
+    .catch(err => {
+        alert(err)
+    })
+    .finally(() => {
+        renderUploaded()
+    })
 }
 
 async function upload() {
+    toast("Conchbrain OSS", "Uploading...")
+
     files.splice(0)
     await getAllFiles(fileHandlers)
 
@@ -115,6 +131,7 @@ async function upload() {
         while (true) {
             let { done, value } = await reader.read()
             if (done) break
+
             uploadedSize += value.length
             let progress = (uploadedSize / totalSize) * 100;
 
@@ -124,11 +141,13 @@ async function upload() {
             if (uploadedSize != totalSize) continue
 
             fileHandlers = []
-            render(fileHandlers)
-            showUploaded()
+            renderPending(fileHandlers)
+            renderUploaded()
 
-            document.querySelector('#progress').style.width = '0'
-            toast("OSS", "Upload Success")
+            setTimeout(() => {
+                document.querySelector('#progress').style.width = '0'
+                toast("Conchbrain OSS", "Upload Success")
+            }, 2000)
         }
     }
 }
@@ -181,7 +200,7 @@ async function getAllFiles(handlers, base = '') {
     }
 }
 
-async function showUploaded() {
+async function renderUploaded() {
     let url = `${api}/?prefix=${keyBase()}`
     let res = await fetch(url)
 
@@ -212,7 +231,7 @@ async function showUploaded() {
         })
     })
 
-    render(handlers, '#uploaded')
+    renderPending(handlers, '#uploaded')
 }
 
 function init() {
@@ -226,8 +245,8 @@ function init() {
     }
 
     localStorage.setItem(prefix, id)
-    render(fileHandlers)
-    showUploaded()
+    renderPending(fileHandlers)
+    renderUploaded()
 }
 
 init()
\ No newline at end of file
diff --git a/view/toss.html b/view/toss.html
index e424f26..e65cd10 100644
--- a/view/toss.html
+++ b/view/toss.html
@@ -7,21 +7,7 @@ <h1>ConchBrain TOSS</h1>
     </div>
 
     <div class="jumbotron p-3">
-        <div class="card">
-            <div class="card-body text-center m-5 p-5">
-                <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor"
-                    class="bi bi-file-earmark-arrow-up" viewBox="0 0 16 16">
-                    <path
-                        d="M8.5 11.5a.5.5 0 0 1-1 0V7.707L6.354 8.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 7.707V11.5z" />
-                    <path
-                        d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
-                </svg>
-
-                <p class="lead mt-4">Drag file or folder here</p>
-            </div>
-        </div>
-
-        <div class="input-group my-3">
+        <div class="input-group mb-2">
             <div class="container m-0 p-0">
                 <div class="row">
                     <div class="col-md">
@@ -50,10 +36,14 @@ <h1>ConchBrain TOSS</h1>
     </div>
 
     <div class="jumbotron p-3">
-        <div id="fileList" class="accordion"></div>
+        <div id="fileList" class="accordion">
+            <p class="text-center py-2 m-0">Pending list</p>
+        </div>
     </div>
 
     <div class="jumbotron p-3">
-        <div id="uploaded" class="accordion"></div>
+        <div id="uploaded" class="accordion">
+            <p class="text-center py-2 m-0">Uploaded list</p>
+        </div>
     </div>
 <div>