add: upload result modal

frontend/src/components/UploadScreen.vue

@@ -4,6 +4,7 @@
         <div class="upload-dashboard">
             <va-file-upload dropzone type="single" @file-added="handleFile"></va-file-upload>
         </div>
+        <va-modal v-model="showModal" :message="result.message" :title="result.status" hide-default-actions />
     </div>
 </template>
 
@@ -26,9 +27,24 @@ export default {
                 .then(res => res.json())
                 .then(data => this.response = data)
                 .catch((e) => console.log(e))
-                .then(()=>console.log(this.response))
+                .then(()=>this.showModal=!this.showModal)
         }
     },
+    computed: {
+        result(){
+            if (this.response.status === "Success") {
+                return {
+                    status: "Success!",
+                    message: `Accepted: ${this.response.accepted}\nProcessed: ${this.response.processed}\nProcessing time ${this.response.process_time}`
+                }
+            } else {
+                return {
+                    status: "Failure!",
+                    message: this.response.detail
+                }
+            }
+        },
+    }
 }
 </script>
 

frontend/src/main.js

@@ -28,6 +28,7 @@ import {
     VaProgressCircle,
     VaSlider,
     VaChip,
+    VaModal,
 } from 'vuestic-ui'
 import 'vuestic-ui/dist/styles/essential.css'
 import 'vuestic-ui/dist/styles/grid.css'
@@ -70,6 +71,7 @@ app.use(createVuesticEssential({
         VaProgressCircle,
         VaSlider,
         VaChip,
+        VaModal,
     }
 }));