update interaction logic

js/toss.js

@@ -31,10 +31,10 @@ function removeFile(fileName) {
     renderPending(fileHandlers)
 }
 
-async function renderPending(handlers, target = '#fileList') {
+async function renderPending(handlers, target = '#pending') {
     let parent = document.querySelector(target)
 
-    if (target == '#fileList') {
+    if (target == '#pending') {
         parent.innerHTML = handlers.length == 0 
             ? '<p class="text-center py-2 m-0">Pending list</p>' 
             : ''
@@ -54,6 +54,11 @@ async function renderPending(handlers, target = '#fileList') {
 async function showFile(handler, parent) {
     let file = await getFile(handler)
 
+    let expires = file.uploaded ? `
+        <p class="m-0">
+            <span class="badge badge-warning">Expires: ${new Date(Date.parse(file.uploaded) + 24 * 60 * 60 * 1000).toLocaleString()}</span>
+        </p>` : ''
+
     parent.innerHTML +=`
         <div class="card-header" style="background-color: whitesmoke;">
             <div class="d-flex w-100 justify-content-between">
@@ -65,8 +70,11 @@ async function showFile(handler, parent) {
                         <a href="javascript:void(0)" onclick="deleteFile('${file.key}')">Delete</a> &nbsp;
                     </small>
                 </div>
-                <div>
-                    <small>${Math.round(file.size / 1000)}kb</small>
+                <div class="text-right">
+                    ${expires}
+                    <p class="m-0">
+                        <span class="badge badge-primary">Size: ${Math.round(file.size / 1000)}kb</span>
+                    </p>
                 </div>
             </div>
         </div>`
@@ -112,11 +120,17 @@ async function deleteFile(key) {
 }
 
 async function upload() {
-    toast("Conchbrain OSS", "Uploading...")
-
     files.splice(0)
     await getAllFiles(fileHandlers)
 
+    if (files.length == 0) {
+        toast("Conchbrain OSS", "Empty pending list")
+        return
+    }
+
+    updateUploadStatus(true)
+    toast("Conchbrain OSS", "Uploading...")
+
     for (let file of files) {
         let reader = file.stream().getReader();
 
@@ -126,6 +140,7 @@ async function upload() {
         })
         .catch(err => {
             alert(err)
+            updateUploadStatus(false)
         })
 
         while (true) {
@@ -145,13 +160,30 @@ async function upload() {
             renderUploaded()
 
             setTimeout(() => {
+                updateUploadStatus(false)
                 document.querySelector('#progress').style.width = '0'
                 toast("Conchbrain OSS", "Upload Success")
             }, 2000)
         }
     }
 }
 
+function updateUploadStatus(uploading = false) {
+    let html = `
+        <div class="spinner-border" style="height: 17px; width: 17px;" role="status">
+            <span class="sr-only">Loading...</span>
+        </div>`
+
+    let btn = document.querySelector('#btn-upload')
+
+    if (uploading) 
+        btn.setAttribute('disabled', 'disabled')
+    else
+        btn.removeAttribute('disabled')
+
+    btn.innerHTML = uploading ? html : 'Upload'
+}
+
 async function getFile(handler) {
     if (handler.getFile) {
         return await handler.getFile()

serviceworker.js

@@ -13,49 +13,38 @@ const PRE_CACHED_RESOURCES = [
     "images/pic5.png",
     "images/pic6.png",
 
-    "images/cloudshell/alpine.png",
-    "images/cloudshell/archlinux.png",
-    "images/cloudshell/centos.png",
-    "images/cloudshell/debian.png",
-    "images/cloudshell/fedora.png",
-    "images/cloudshell/kali.png",
-    "images/cloudshell/opensuse.png",
-    "images/cloudshell/rockylinux.png",
-    "images/cloudshell/ubuntu.png",
-
     "view/cloudshell.html",
     "view/conch.html",
     "view/corsproxy.html",
-    "view/favourites.html",
+    "view/dockerproxy.html",
     "view/home.html",
     "view/intro.html",
-    "view/kvstorage.html",
+    "view/kv.html",
+    "view/mixstore.html",
     "view/notfound.html",
-    "view/proxyservice.html",
+    "view/toss.html",
+    "view/webproxy.html",
 
-    "css/index.css",
-    "css/notfound.css",
+    "css/cloudshell.css",
+    "css/conch.css",
     "css/home.css",
+    "css/index.css",
     "css/intro.css",
-    "css/conch.css",
-    "css/favourites.css",
-    "css/cloudshell.css",
-    "css/proxyservice.css",
+    "css/notfound.css",
+    "css/webproxy.css",
 
+    "js/conch.js",
     "js/index.js",
     "js/intro.js",
-    "js/favourites.js",
-    "js/conch.js",
-    "js/cloudshell.js",
-    "js/cloudshell_worker.js",
-    "js/proxyservice.js",
+    "js/toss.js",
+    "js/webproxy.js",
 
-    "https://fastly.jsdelivr.net/npm/[email protected].0/dist/css/bootstrap.min.css",
+    "https://fastly.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css",
     "https://fastly.jsdelivr.net/npm/[email protected]/animate.min.css",
     "https://fastly.jsdelivr.net/gh/CodeByZach/pace/themes/blue/pace-theme-barber-shop.css",
 
-    "https://fastly.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js",
-    "https://fastly.jsdelivr.net/npm/[email protected].0/dist/js/bootstrap.bundle.min.js",
+    "https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
+    "https://fastly.jsdelivr.net/npm/[email protected].2/dist/js/bootstrap.bundle.min.js",
     "https://fastly.jsdelivr.net/gh/CodeByZach/pace/pace.min.js"
 ];
 

view/toss.html

@@ -23,7 +23,7 @@ <h1>ConchBrain TOSS</h1>
                     </div>
 
                     <div class="col-md-2">
-                        <button type="button" class="btn btn-outline-secondary btn-block" onclick="upload()">Upload</button>
+                        <button id="btn-upload" type="button" class="btn btn-outline-secondary btn-block" onclick="upload()">Upload</button>
                     </div>
                 </div>
             </div>
@@ -36,7 +36,7 @@ <h1>ConchBrain TOSS</h1>
     </div>
 
     <div class="jumbotron p-3">
-        <div id="fileList" class="accordion">
+        <div id="pending" class="accordion">
             <p class="text-center py-2 m-0">Pending list</p>
         </div>
     </div>