⚡ Displays progress bar during requests

src/components/Configuration/AppVersion.vue

@@ -31,6 +31,7 @@
 
 <script>
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import ErrorHandler from '@/utils/ErrorHandler';
 
 export default {
@@ -39,6 +40,7 @@ export default {
   data() {
     return {
       appVersion: process.env.VUE_APP_VERSION, // Current version, from package.json
+      progress: new ProgressBar(),
       latestVersion: '', // Will store latest version, when request returns
       checksEnabled: true, // Should we check for updates
       isUpToDate: true, // Is current version === latest version
@@ -60,14 +62,17 @@ export default {
     /* Gets the apps latest version from Dashy's git repo */
     checkVersion() {
       const packageUrl = 'https://raw.githubusercontent.com/Lissy93/dashy/master/package.json';
+      this.progress.start();
       axios.get(packageUrl).then((response) => {
         if (response && response.data && response.data.version) {
           this.latestVersion = response.data.version;
           this.isUpToDate = this.checkIfUpToDate(this.appVersion, this.latestVersion);
           this.finished = true;
+          this.progress.end();
         }
       }).catch(() => {
         this.error = true;
+        this.progress.end();
       });
     },
     /* Compares the current version, with the package.json version */

src/components/Configuration/CloudBackupRestore.vue

@@ -59,6 +59,7 @@
 <script>
 
 import sha256 from 'crypto-js/sha256';
+import ProgressBar from 'rsup-progress';
 import Button from '@/components/FormElements/Button';
 import Input from '@/components/FormElements/Input';
 import IconBackup from '@/assets/interface-icons/config-backup.svg';
@@ -77,6 +78,7 @@ export default {
       restorePassword: '',
       restoreCode: '',
       backupId: localStorage[localStorageKeys.BACKUP_ID] || '',
+      progress: new ProgressBar(),
     };
   },
   components: {
@@ -87,11 +89,14 @@ export default {
   },
   methods: {
     restoreBackup() {
+      this.progress.start();
       restore(this.restoreCode, this.restorePassword)
         .then((response) => {
           this.restoreFromBackup(response, this.restoreCode);
+          this.progress.end();
         }).catch((msg) => {
           this.showErrorMsg(msg);
+          this.progress.end();
         });
     },
     checkPass() {
@@ -107,6 +112,7 @@ export default {
       }
     },
     makeBackup() {
+      this.progress.start();
       backup(this.config, this.backupPassword)
         .then((response) => {
           if (!response.data || response.data.errorMsg || !response.data.backupId) {
@@ -114,11 +120,14 @@ export default {
           } else { // All clear, no error
             this.updateUiAfterBackup(response.data.backupId, false);
           }
+          this.progress.end();
         }).catch(() => {
           this.showErrorMsg(this.$t('cloud-sync.backup-error-unknown'));
+          this.progress.end();
         });
     },
     makeUpdate() {
+      this.progress.start();
       update(this.config, this.backupPassword, this.backupId)
         .then((response) => {
           if (!response.data || response.data.errorMsg || !response.data.backupId) {
@@ -126,8 +135,10 @@ export default {
           } else { // All clear, no error
             this.updateUiAfterBackup(response.data.backupId, true);
           }
+          this.progress.end();
         }).catch(() => {
           this.showErrorMsg(this.$t('cloud-sync.backup-error-unknown'));
+          this.progress.end();
         });
     },
     restoreFromBackup(config, backupId) {

src/components/Configuration/JsonEditor.vue

@@ -59,6 +59,7 @@
 <script>
 
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import VJsoneditor from 'v-jsoneditor';
 import { localStorageKeys } from '@/utils/defaults';
 import configSchema from '@/utils/ConfigSchema.json';
@@ -89,6 +90,7 @@ export default {
       responseText: '',
       saveSuccess: undefined,
       allowWriteToDisk: this.shouldAllowWriteToDisk(),
+      progress: new ProgressBar(),
     };
   },
   computed: {
@@ -123,6 +125,7 @@ export default {
       const body = { config: yaml, timestamp: new Date() };
       const request = axios.post(endpoint, body, headers);
       // 3. Make the request, and handle response
+      this.progress.start();
       request.then((response) => {
         this.saveSuccess = response.data.success || false;
         this.responseText = response.data.message;
@@ -132,11 +135,13 @@ export default {
         } else {
           this.showToast(this.$t('config-editor.error-msg-cannot-save'), false);
         }
+        this.progress.end();
       })
         .catch((error) => {
           this.saveSuccess = false;
           this.responseText = error;
           this.showToast(error, false);
+          this.progress.end();
         });
     },
     saveConfigLocally() {

src/components/Configuration/RebuildApp.vue

@@ -46,6 +46,7 @@
 
 <script>
 import axios from 'axios';
+import ProgressBar from 'rsup-progress';
 import Button from '@/components/FormElements/Button';
 import { modalNames } from '@/utils/defaults';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
@@ -69,6 +70,7 @@ export default {
     output: '',
     message: '',
     allowRebuild: true,
+    progress: new ProgressBar(),
   }),
   methods: {
     /* Calls to the rebuild endpoint, to kickoff the app build */
@@ -76,12 +78,15 @@ export default {
       const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
       const endpoint = `${baseUrl}/config-manager/rebuild`;
       this.loading = true;
+      this.progress.start();
       axios.get(endpoint)
         .then((response) => {
           this.finished(response.data || false);
+          this.progress.end();
         })
         .catch((error) => {
           this.finished({ success: false, error });
+          this.progress.end();
         });
     },
     /* Called when rebuild is complete, updates UI with either success or fail message */