Adds progress log and ui enhancements

1 files changed, 47 insertions, 19 deletions

diff --git a/app/src/pages/Home.vue b/app/src/pages/Home.vue
index bfe92bf..8385a46 100644
--- a/app/src/pages/Home.vue
+++ b/app/src/pages/Home.vue
@@ -1,22 +1,38 @@
 <template>
   <div class="wrap">
     <div class="panels">
-      <Panel v-model="from" @connect="connectFrom" />
-      <Panel v-model="to" @connect="connectTo" />
+      <div>
+        <h1>FROM</h1>
+        {{ from.error }}
+        <Panel v-model="from" @connect="connectFrom" />
+        <ul v-if="from.folders">
+          <Folders :folder="from.folders" />
+        </ul>
+      </div>
+
+      <div>
+        <h1>TO</h1>
+        {{ to.error }}
+        <Panel v-model="to" @connect="connectTo" />
+        <ul v-if="to.folders">
+          <Folders :folder="to.folders" />
+        </ul>
+      </div>
     </div>
-    <button @click="migrate">
+
+    <button class="button" @click="migrate">
       Migrate!
     </button>
 
-    <h1>FROM</h1>
-    <ul v-if="from.folders">
-      <Folders :folder="from.folders" />
-    </ul>
-
-    <h1>TO</h1>
-    <ul v-if="to.folders">
-      <Folders :folder="to.folders" />
-    </ul>
+    <div class="progress-screen">
+      <b>{{ progress }}</b>
+      <br>
+      <div class="progress-screen__log">
+        <div v-for="(msg, idx) in log" :key="idx">
+          {{ msg }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -31,7 +47,10 @@ export default {
   },
 
   data () {
-    return {};
+    return {
+      progress: '',
+      log: [],
+    };
   },
 
   computed: {
@@ -61,6 +80,18 @@ export default {
     this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
       this.to.folders = folders;
     });
+
+    this.$electron.ipcRenderer.on('imap:from:error', (event, error) => {
+      this.from.error = error;
+    });
+    this.$electron.ipcRenderer.on('imap:to:error', (event, error) => {
+      this.to.error = error;
+    });
+
+    this.$electron.ipcRenderer.on('imap:migrate:progress', (event, progress) => {
+      this.progress = progress;
+      this.log.push(progress);
+    });
   },
 
   methods: {
@@ -73,6 +104,9 @@ export default {
     },
 
     async migrate () {
+      this.progress = '';
+      this.log = [];
+
       this.$electron.ipcRenderer.send('imap:migrate', {
         from: JSON.parse(JSON.stringify(this.from)),
         to: JSON.parse(JSON.stringify(this.to)),
@@ -83,12 +117,6 @@ export default {
 </script>
 
 <style lang="scss">
-body {
-  margin: 0;
-  font-size: 1rem;
-  font-family: Helvetica, sans-serif;
-}
-
 .panels {
   display: flex;
   justify-content: space-between;