From b56b1b997a9e9b6a6049e61d46057ee32fcdbe9c Mon Sep 17 00:00:00 2001
From: EdwardAJ <13517115@std.stei.itb.ac.id>
Date: Tue, 12 May 2020 13:49:53 +0700
Subject: [PATCH] Add zip file to pascal voc

---
 frontend/package.json          |  2 ++
 frontend/pages/main/pascal.vue | 26 ++++++++++++--------------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 26eabfa..3cb7fbb 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,9 @@
     "bootstrap-vue": "^2.0.0",
     "cookieparser": "^0.1.0",
     "debounce": "^1.2.0",
+    "file-saver": "^2.0.2",
     "js-cookie": "^2.2.1",
+    "jszip": "^3.4.0",
     "nuxt": "^2.0.0",
     "nuxt-dropzone": "^1.0.4",
     "vue-json-viewer": "^2.2.11",
diff --git a/frontend/pages/main/pascal.vue b/frontend/pages/main/pascal.vue
index e519098..4c104a4 100644
--- a/frontend/pages/main/pascal.vue
+++ b/frontend/pages/main/pascal.vue
@@ -52,6 +52,8 @@ import pascalMethods from '~/mixins/outputs/pascalMethods'
 import Convert from 'xml-js'
 import Label from '~/components/label/Label'
 import Dropdown from '~/components/dropdown/Dropdown'
+import JSZip from 'jszip'
+import { saveAs } from 'file-saver'
 
 export default {
   components: {
@@ -70,17 +72,22 @@ export default {
   methods: {
     async getPascalXML () {
       this.pascalJSON = {}
-      var newPascalJSON = {"annotation": []}
       var allImages = await this.getAllImages()
       if (allImages) {
+        // Generate zip file
+        var zip = new JSZip()
+        // Get information about labels
         var allLabels = await this.getAllLabel()
+        // These methods are available in mixins
         await this.setImagesAttr(allImages)
         await this.getObjectsAttr(allLabels)
-        console.log('pascal: ', this.pascalJSON)
         for (var key in this.pascalJSON) {
-          newPascalJSON["annotation"].push(this.pascalJSON[key])
+          var xml = this.convertToXML(this.pascalJSON[key])
+          zip.file(this.pascalJSON[key].filename + '.xml', xml)
         }
-        return newPascalJSON
+        zip.generateAsync({type:'blob'}).then((content) => {
+          saveAs(content, this.dataset)
+        })
       }
     },
     async setImagesAttr (allImages) {
@@ -99,16 +106,7 @@ export default {
       return result
     },
     async downloadXML() {
-      var filename = 'XMLFile.xml'
-      var element = document.createElement('a')
-      var newPascalJSON = await this.getPascalXML()
-      var xml = this.convertToXML(newPascalJSON)
-      element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(xml))
-      element.setAttribute('download',filename)
-      element.style.display = 'none'
-      document.body.appendChild(element)
-      element.click()
-      document.body.removeChild(element)
+      await this.getPascalXML()
     } 
   }
 }
-- 
GitLab