Button tasks progress bars

jsbroks · Feb 14, 2019 · fa1ea6a · fa1ea6a
1 parent f423c81
commit fa1ea6a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 33 deletions.
diff --git a/app/util/task_util.py b/app/util/task_util.py
@@ -22,8 +22,6 @@ def scan_func(task, socket, dataset):
             pass
 
         for file in files:
-            time.sleep()
-
             path = os.path.join(root, file)
 
             if path.endswith(ImageModel.PATTERN):
@@ -92,7 +90,7 @@ def import_coco_func(task, socket, dataset, coco_json):
 
         # update progress
         progress += 1
-        task.set_progress((progress/total_items)*100)
+        task.set_progress((progress/total_items)*100, socket=socket)
 
     dataset.update(set__categories=dataset.categories)
 
@@ -107,7 +105,7 @@ def import_coco_func(task, socket, dataset, coco_json):
 
         # update progress
         progress += 1
-        task.set_progress((progress/total_items)*100)
+        task.set_progress((progress/total_items)*100, socket=socket)
 
         image_model = images.filter(file_name__exact=image_filename).all()
 
@@ -132,7 +130,7 @@ def import_coco_func(task, socket, dataset, coco_json):
         is_crowd = annotation.get('iscrowed', False)
 
         progress += 1
-        task.set_progress((progress/total_items)*100)
+        task.set_progress((progress/total_items)*100, socket=socket)
 
         if len(segmentation) == 0:
             task.warning(f"Annotation {annotation.get('id')} has no segmentation")
@@ -167,6 +165,6 @@ def import_coco_func(task, socket, dataset, coco_json):
         else:
             task.info(f"Annotation already exists (i:{image_id}, c:{category_id})")
 
-    task.set_progress(100)
+    task.set_progress(100, socket=socket)
 
 
diff --git a/client/src/components/tasks/Task.vue b/client/src/components/tasks/Task.vue
@@ -97,7 +97,12 @@ export default {
     }
   },
   watch: {
-    showLogs: "getLogs"
+    showLogs: "getLogs",
+    completed() {
+      if (this.showLogs) {
+        this.getLogs()
+      }
+    }
   },
   computed: {
     warnings() {

diff --git a/client/src/views/Dataset.vue b/client/src/views/Dataset.vue
@@ -74,8 +74,7 @@
         <button
           type="button"
           class="btn btn-primary btn-block"
-          data-toggle="modal"
-          data-target="#cocoUpload"
+          @click="importModal"
         >
           <div v-if="importing.id != null" class="progress">
             <div
@@ -238,9 +237,11 @@ import ImageCard from "@/components/cards/ImageCard";
 import Pagination from "@/components/Pagination";
 import PanelString from "@/components/PanelInputString";
 import PanelToggle from "@/components/PanelToggle";
-
+import JQuery from "jquery";
 import { mapMutations } from "vuex";
 
+let $ = JQuery
+
 export default {
   name: "Dataset",
   components: {
@@ -346,23 +347,15 @@ export default {
         .finally(() => this.removeProcess(process));
     },
     createScanTask() {
+      if (this.scan.id != null) {
+        this.$router.push({ path: "/tasks", query: { id: this.scan.id } });
+        return;
+      }
+
       Dataset.scan(this.dataset.id)
         .then(response => {
-          let options = {
-            progressBar: true,
-            positionClass: "toast-bottom-left",
-            onclick: () => {
-              let id = response.data.id;
-              this.$router.push({ path: "/tasks", query: { id: id } });
-            }
-          };
-          this.$toastr.success(
-            `Scanning task created with id ${
-              response.data.id
-            } (click to view).`,
-            "Scanning Dataset",
-            options
-          );
+          let id = response.data.id;
+          this.scan.id = id;
         })
         .catch(error => {
           this.axiosReqestError(
@@ -376,17 +369,20 @@ export default {
       let index = this.folders.indexOf(folder);
       this.folders.splice(index + 1, this.folders.length);
     },
+    importModal() {
+      if (this.importing.id != null) {
+        this.$router.push({ path: "/tasks", query: { id: this.importing.id } });
+        return;
+      }
+      
+      $('#cocoUpload').modal('show');
+    },
     importCOCO() {
-      let process = "Uploading COCO annotation file";
-      this.addProcess(process);
-
       let uploaded = document.getElementById("coco");
       Dataset.uploadCoco(this.dataset.id, uploaded.files[0])
         .then(response => {
-          this.axiosReqestSuccess(
-            "Importing COCO",
-            `Task has been created with id ${response.data.id}`
-          );
+          let id = response.data.id;
+          this.importing.id = id;
         })
         .catch(error => {
           this.axiosReqestError("Importing COCO", error.response.data.message);
@@ -430,6 +426,7 @@ export default {
   },
   sockets: {
     taskProgress(data) {
+
       if (data.id === this.scan.id) {
         this.scan.progress = data.progress;
       }
@@ -478,7 +475,15 @@ export default {
         setTimeout(() => {
           this.scan.progress = 0;
           this.scan.id = null;
-        }, 500);
+        }, 1000);
+      }
+    },
+    "importing.progress"(progress) {
+      if (progress >= 100) {
+        setTimeout(() => {
+          this.importing.progress = 0;
+          this.importing.id = null;
+        }, 1000);
       }
     }
   },