Merge pull request #46 from Arielgordon123/progressBar

Show progress bar when importing
brafdlog · Jan 7, 2020 · 66cae2c · 66cae2c
2 parents b3f7b3b + a93425c
commit 66cae2c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/src/renderer/components/MainPage/Importers/Importer.vue b/src/renderer/components/MainPage/Importers/Importer.vue
@@ -44,6 +44,15 @@
       >
         Delete
       </el-button>
+      <el-progress
+        v-show="importing"
+        :percentage="percentage"
+        :show-text="step.startsWith('Step 1')"
+        class="progress-bar"
+      />
+      <div v-show="importing">
+        {{ step }}
+      </div>
     </el-collapse-item>
   </el-card>
 </template>
@@ -68,6 +77,8 @@ export default {
       lastMessage: null,
       showBrowser: false,
       decryptedImporter: null,
+      percentage: 0,
+      step: '',
     };
   },
   computed: {
@@ -91,6 +102,7 @@ export default {
       let errorMessage;
 
       this.importing = true;
+      this.onProgress({ percent: 0 }, '');
       try {
         this.$logger.info('Request to import');
         const result = await scrape(
@@ -99,6 +111,7 @@ export default {
           this.decryptedImporter.loginFields,
           this.showBrowser,
           this.$logger,
+          this.onProgress,
         );
         success = result.success;
         errorMessage = result.errorMessage || result.errorType;
@@ -114,9 +127,16 @@ export default {
         success = false;
         errorMessage = error.message;
       } finally {
+        this.onProgress({ percent: 1 }, 'Done!');
         this.updateStatus(success, errorMessage);
       }
     },
+    onProgress({ percent }, step) {
+      this.percentage = Math.floor(percent * 100);
+      if (step) {
+        this.step = step;
+      }
+    },
     updateStatus(success, errorMessage) {
       this.importing = false;
       this.success = success;
@@ -150,4 +170,7 @@ i.header-icon.el-icon-error {
 i.header-icon.el-icon-success {
   color: green;
 }
+.progress-bar {
+  padding-top: 10px;
+}
 </style>
diff --git a/src/renderer/main.js b/src/renderer/main.js
@@ -20,6 +20,7 @@ import {
   Table,
   TableColumn,
   Link,
+  Progress,
 } from 'element-ui';
 import lang from 'element-ui/lib/locale/lang/en';
 import locale from 'element-ui/lib/locale';
@@ -59,6 +60,7 @@ Vue.use(Checkbox);
 Vue.use(Table);
 Vue.use(TableColumn);
 Vue.use(Link);
+Vue.use(Progress);
 
 /* eslint-disable no-new */
 new Vue({

diff --git a/src/renderer/modules/downloadChromium.js b/src/renderer/modules/downloadChromium.js
@@ -3,8 +3,9 @@ import { getPuppeteerConfig } from 'israeli-bank-scrapers-core';
 
 const revision = getPuppeteerConfig().chromiumRevision;
 
-export default async function (installPath) {
+export default async function (installPath, onProgress) {
+  onProgress({ percent: 0 }, 'Step 1: Downloading Chrome...');
   return download({
-    revision, installPath,
+    revision, installPath, onProgress,
   });
 }
diff --git a/src/renderer/modules/scrapers.js b/src/renderer/modules/scrapers.js
@@ -2,8 +2,9 @@
 import { createScraper } from 'israeli-bank-scrapers-core';
 import getChrome from './downloadChromium';
 
-export default async function scrape(installPath, scraperName, loginFields, showBrowser, logger) {
-  const chromePath = await getChrome(installPath);
+export default async function scrape(installPath, scraperName, loginFields, showBrowser, logger, onProgress) {
+  onProgress({ percent: 0.1 }, 'Step 1: check if Chrome exists');
+  const chromePath = await getChrome(installPath, onProgress);
   const options = {
     companyId: scraperName, // mandatory; one of 'hapoalim', 'leumi', 'discount', 'otsarHahayal', 'visaCal', 'leumiCard', 'isracard', 'amex'
     // startDate: Date, // the date to fetch transactions from (can't be before the minimum allowed time difference for the scraper)
@@ -14,6 +15,7 @@ export default async function scrape(installPath, scraperName, loginFields, show
     executablePath: chromePath, // string // optional. provide a patch to local chromium to be used by puppeteer. Relevant when using `israeli-bank-scrapers-core` library
   };
   if (logger) logger.info(JSON.stringify(options));
+  onProgress({ percent: 0.5 }, `Step 2: Starting to scrape ${scraperName}`);
   const scraper = createScraper(options);
   return scraper.scrape(loginFields);
 }