feat: add upload file list with progress

frontend/src/css/base.css

@@ -1,5 +1,5 @@
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
   padding-top: 4em;
   background-color: #fafafa;
   color: #333333;
@@ -13,7 +13,7 @@ body {
 *:hover,
 *:active,
 *:focus {
-  outline: 0
+  outline: 0;
 }
 
 a {
@@ -44,7 +44,7 @@ i.spin {
 }
 
 #app {
-  transition: .2s ease padding;
+  transition: 0.2s ease padding;
 }
 
 #app.multiple {
@@ -63,17 +63,17 @@ nav .action {
   display: block;
   border-radius: 0;
   font-size: 1.1em;
-  padding: .5em;
+  padding: 0.5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-nav>div {
+nav > div {
   border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-nav .action>* {
+nav .action > * {
   vertical-align: middle;
 }
 
@@ -97,32 +97,47 @@ main {
 
 .breadcrumbs a {
   color: inherit;
-  transition: .1s ease-in;
+  transition: 0.1s ease-in;
-  border-radius: .125em;
+  border-radius: 0.125em;
 }
 
 .breadcrumbs a:hover {
-  background-color: rgba(0,0,0, 0.05);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .breadcrumbs span a {
-  padding: .2em;
+  padding: 0.2em;
 }
 
-#progress {
+.files {
-  position: fixed;
+  position: absolute;
-  top: 0;
+  bottom: 30px;
-  left: 0;
   width: 100%;
-  height: 3px;
+}
+
+.progress {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 30px;
   z-index: 9999999999;
 }
 
-#progress div {
+.progress div,
+.files div div {
   height: 100%;
   background-color: #40c4ff;
   width: 0;
-  transition: .2s ease width;
+  transition: 0.2s ease width;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.files div div {
+  height: 30px;
+  overflow: hidden;
+  background-color: #329fd1;
 }
 
 .break-word {

frontend/src/store/getters.js

@@ -8,8 +8,25 @@ const getters = {
       return 0;
     }
 
+    let totalSize = state.upload.sizes.reduce((a, b) => a + b, 0);
+
     let sum = state.upload.progress.reduce((acc, val) => acc + val);
-    return Math.ceil((sum / state.upload.size) * 100);
+    return Math.ceil((sum / totalSize) * 100);
+  },
+  files: (state) => {
+    let files = [];
+
+    for (let index in state.upload.uploads) {
+      let upload = state.upload.uploads[index];
+      let id = upload.id;
+      let name = decodeURIComponent(upload.path.replace(/^.*[\\/]/, ""));
+      let progress = state.upload.progress[id];
+      let size = state.upload.sizes[id];
+
+      files.push({ id, name, progress: Math.ceil((progress / size) * 100) });
+    }
+
+    return files;
   },
 };
 

frontend/src/store/modules/upload.js

@@ -7,7 +7,7 @@ const UPLOADS_LIMIT = 5;
 
 const state = {
   id: 0,
-  size: 0,
+  sizes: [],
   progress: [],
   queue: [],
   uploads: {},
@@ -19,12 +19,12 @@ const mutations = {
   },
   reset: (state) => {
     state.id = 0;
-    state.size = 0;
+    state.sizes = [];
     state.progress = [];
   },
   addJob: (state, item) => {
     state.queue.push(item);
-    state.size += item.file.size;
+    state.sizes[state.id] = item.file.size;
     state.id++;
   },
   moveJob(state) {

frontend/src/views/Layout.vue

@@ -1,7 +1,16 @@
 <template>
   <div>
-    <div id="progress">
+    <div v-if="files" class="files">
-      <div v-bind:style="{ width: this.progress + '%' }"></div>
+      <div v-for="file in files" :key="file.id">
+        <div v-bind:style="{ width: file.progress + '%' }">
+          {{ file.name + " " + file.progress + "%" }}
+        </div>
+      </div>
+    </div>
+    <div v-if="progress" class="progress">
+      <div v-bind:style="{ width: this.progress + '%' }">
+        {{ this.progress ? this.progress + "%" : "" }}
+      </div>
     </div>
     <sidebar></sidebar>
     <main>
@@ -27,7 +36,7 @@ export default {
     Shell,
   },
   computed: {
-    ...mapGetters(["isLogged", "progress"]),
+    ...mapGetters(["isLogged", "progress", "files"]),
     ...mapState(["user"]),
     isExecEnabled: () => enableExec,
   },