Changeset 35718

Timestamp:

2021-11-01T21:31:59+13:00 (2 years ago)

Author:

cstephen

Message:

Implement download support

Location:

main/trunk/model-interfaces-dev/atea/macron-restoration/src

Files:

• components/DirectInput.vue (modified) (6 diffs)
• styles/_material.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/macron-restoration/src/components/DirectInput.vue

@@ -6 +6 @@
         {{ output }}
     </div>
+
+    <button class="btn-primary right-column" :disabled="!canDownload" @click="downloadAsText">Download</button>
 </div>
 </template>
@@ -13 +15 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
     gap: 1em;
 }
@@ -21 +24 @@
     overflow: hidden;
 }
+
+.right-column {
+    grid-column: 2;
+}
 </style>
 
 <script>
 import { mapState } from "vuex";
+import { saveAs } from "file-saver"
 import MacronRestorationModule from "../js/MacronRestorationModule"
 
@@ -35 +43 @@
             input: "",
             output: "",
-            transcribeTimeout: null
+            transcribeTimeout: null,
+            waitingOnTranscribe: false
         }
     },
     computed: {
+        canDownload() {
+            return this.output.length > 0 && !this.waitingOnTranscribe;
+        },
         ...mapState({
             translations: state => state.translations
@@ -45 +57 @@
     watch: {
         input() {
+            this.waitingOnTranscribe = true;
+
             if (this.transcribeTimeout !== null) {
                 clearTimeout(this.transcribeTimeout);
@@ -61 +75 @@
         },
         async updateMacronisedText() {
+            // TODO: Handle error
             const response = await macroniser.directMacronisation(this.input);
             this.output = response.fragment2;
+            this.waitingOnTranscribe = false;
+        },
+        downloadAsText() {
+            const blob = new Blob([ this.output ], { type: "text/plain;charset=utf-8" });
+            saveAs(blob, "output.txt");
         }
     }

main/trunk/model-interfaces-dev/atea/macron-restoration/src/styles/_material.scss

@@ -71 +71 @@
     display: flex;
     align-items: center;
-    text-align: left;
+    justify-content: center;
 
     background-color: var(--bg-color);