feat: implement animation control for launching bubble screen

src/_components/modals/AdvancedSettings.vue

@@ -480,7 +480,7 @@ export default {
     },
     newNodeNotification(nn) {
       if (nn && nn.uuid) {
-        this.$router.push({ path: '/bubble/' + nn.networkName });
+        this.$router.push({ path: '/new_pages/launching-bubble/' + nn.networkName });
         this.submitted = false;
       }
     },

src/_pages/main/bubble/LaunchBubble.vue

@@ -14,7 +14,7 @@
       class="d-flex flex-column align-items-center justify-content-center mt-5 mx-auto launch-bubble-wrapper"
     >
       <div ref="lottie" class="lottie"></div>
-      <Button color="default" width="80%" height="60">
+      <Button color="default" width="80%" height="60" @click="launchBubble">
         {{ messages.button_label_launch_bubble }}
       </Button>
 
@@ -72,7 +72,9 @@ export default {
   },
 
   data() {
-    return {};
+    return {
+      lottie: null,
+    };
   },
 
   computed: {
@@ -81,15 +83,13 @@ export default {
   },
 
   mounted() {
-    Lottie.loadAnimation({
+    this.lottie = Lottie.loadAnimation({
       container: this.$refs.lottie,
       renderer: '',
       loop: true,
       autoplay: true,
       path: '/rocket-launch.json',
     });
-
-    console.log(this.user);
   },
 
   methods: {
@@ -97,6 +97,10 @@ export default {
       ev.preventDefault();
       this.$refs.settingsModal.show();
     },
+
+    launchBubble() {
+      
+    },
   },
 
   watch: {},

src/_pages/main/bubble/LaunchingBubble.vue

@@ -13,7 +13,30 @@
     <div
       class="d-flex flex-column align-items-center justify-content-center mt-5 mx-auto launch-bubble-wrapper"
     >
-      <div ref="lottie" class="lottie"></div>
+      <div
+        v-if="
+          stats &&
+            (network.state === 'created' ||
+              network.state === 'starting' ||
+              network.state === 'restoring')
+        "
+      >
+        <!-- adapted from: https://code-boxx.com/simple-vanilla-javascript-progress-bar/ -->
+        <div v-if="stats.percent" class="progress-wrap">
+          <div ref="lottie" class="lottie"></div>
+          <div class="progress-text">
+            {{
+              messages.label_percent.parseMessage(this, {
+                percent: stats.percent,
+              })
+            }}
+          </div>
+        </div>
+        <div v-if="!statsError" :id="'progressBar_details_' + networkId">
+          {{ messages[stats.messageKey] }}
+        </div>
+        <hr />
+      </div>
       <Button color="default" width="195" height="60">
         {{ messages.button_cancel_lauch_bubble }}
       </Button>
@@ -75,7 +98,7 @@
 </style>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapActions } from 'vuex';
 import Lottie from 'lottie-web';
 
 import { util } from '~/_helpers';
@@ -88,28 +111,196 @@ export default {
   },
 
   data() {
-    return {};
+    return {
+      stats: null,
+      statsError: false,
+      refresher: null,
+      networkId: this.$route.params.id,
+      lottie: null,
+    };
   },
 
   computed: {
     ...mapState('system', ['messages']),
     ...mapState('account', ['user']),
+    ...mapState('networks', [
+      'network',
+      'networkStatuses',
+      'deletedNetworkUuid',
+    ]),
+  },
+
+  created() {
+    const user = util.currentUser();
+    this.refreshStatus(user.uuid);
+    this.startStatusRefresher(user);
+    this.restoreKeyCode = this.$route.query.keys_code;
+    this.getAppLinks(user.locale);
+    this.loadSystemConfigs();
+  },
+
+  beforeDestroy() {
+    this.clearRefresherInterval(this.refresher);
+    this.clearRefresherInterval(this.stopRefresher);
+    this.resetRestoreKey();
   },
 
-  mounted() {
-    Lottie.loadAnimation({
-      container: this.$refs.lottie,
-      renderer: '',
-      loop: true,
-      autoplay: true,
-      path: '/launching-bubble.json',
-    });
+  methods: {
+    ...mapActions('networks', [
+      'getNetworkById',
+      'deleteNetwork',
+      'getStatusesByNetworkId',
+      'getNodesByNetworkId',
+      'getLogFlag',
+      'getBackups',
+      'resetRestoreKey',
+    ]),
+    ...mapActions('system', [
+      'getAppLinks',
+      'loadSystemConfigs',
+      'checkForUpgrade',
+      'upgrade',
+    ]),
+
+    refreshStatus(userId) {
+      this.getNetworkById({
+        userId: userId,
+        networkId: this.networkId,
+        messages: this.messages,
+        errors: this.errors,
+      });
+      this.getStatusesByNetworkId({
+        userId: userId,
+        networkId: this.networkId,
+        messages: this.messages,
+        errors: this.errors,
+      });
+      this.getNodesByNetworkId({
+        userId: userId,
+        networkId: this.networkId,
+        nodes: this.nodes,
+        messages: this.messages,
+        errors: this.errors,
+      });
 
-    console.log(this.user);
+      if (this.logFlag === null || this.refresher === null) {
+        this.getLogFlag({
+          networkId: this.networkId,
+          messages: this.messages,
+          errors: this.errors,
+        });
+      }
+      if (this.backups === null || this.refresher === null) {
+        // note about the second part of the condition above: if refreshes is turned on, then fetch backups
+        // from BE only once
+        this.getBackups({
+          userId: userId,
+          networkId: this.networkId,
+          messages: this.messages,
+          errors: this.errors,
+        });
+      }
+    },
+
+    startStatusRefresher(user) {
+      // todo: separate refresher for network -- after "stop" we should refresh the status to show it is stopped
+      this.refresher = setInterval(() => this.refreshStatus(user.uuid), 5000);
+    },
+
+    clearRefresherInterval(refresherId) {
+      if (refresherId !== null) {
+        clearInterval(refresherId);
+        refresherId = null;
+      }
+    },
+
+    stopNet() {
+      if (this.networkUuid === null) {
+        alert(this.messages.network_action_stop_not_ready);
+      } else {
+        if (confirm(this.messages.confirmation_network_action_stop)) {
+          this.errors.clear();
+          this.stopNetwork({
+            userId: this.user.uuid,
+            networkId: this.networkUuid,
+            messages: this.messages,
+            errors: this.errors,
+          });
+          this.clearRefresherInterval(this.refresher);
+          this.stopRefresher = setInterval(
+            () => this.stopRefreshStatus(this.user.uuid),
+            5000
+          );
+        }
+      }
+    },
   },
 
-  methods: {},
+  watch: {
+    network(net) {
+      if (net) {
+        if (net.uuid === 'Not Found')
+          this.$router.replace({ path: '/bubbles' });
+        this.networkUuid = net.uuid;
+        if (net.state !== 'stopping')
+          this.clearRefresherInterval(this.stopRefresher);
+      }
+    },
+
+    networkStatuses(stats) {
+      // console.log('watch.networkStatuses received: '+JSON.stringify(stats));
+      let latestStats = null;
+      if (this.network && stats && stats.length && stats.length > 0) {
+        for (let i = 0; i < stats.length; i++) {
+          if (
+            stats[i].network === this.network.uuid &&
+            (latestStats === null || stats[i].ctime > latestStats.ctime)
+          ) {
+            latestStats = stats[i];
+          }
+        }
+      }
+      if (latestStats !== null) {
+        this.stats = latestStats;
+        this.statsError = this.stats.messageKey.startsWith('meter_error_');
 
-  watch: {},
+        let isStatsErrorRetry = this.stats.messageKey.startsWith(
+          'meter_error_retry_'
+        );
+        let isStatsCompleted =
+          this.stats.percent === 100 ||
+          this.stats.messageKey.startsWith('meter_completed_');
+        if ((this.statsError && !isStatsErrorRetry) || isStatsCompleted) {
+          this.clearRefresherInterval(this.refresher);
+        }
+      } else {
+        // status not found for our network
+        this.clearRefresherInterval(this.refresher);
+      }
+
+      if (this.stats && !this.lottie) {
+        this.lottie = Lottie.loadAnimation({
+          container: this.$refs.lottie,
+          renderer: '',
+          loop: true,
+          autoplay: true,
+          path: '/launching-bubble.json',
+        });
+      }
+
+      if (this.lottie) {
+        this.lottie.goToAndStop(
+          (this.lottie.totalFrames / 100) * this.stats.percent,
+          true
+        );
+      }
+    },
+
+    deletedNetworkUuid(uuid) {
+      if (uuid && this.networkUuid && uuid === this.networkUuid) {
+        this.$router.replace({ path: '/bubbles' });
+      }
+    },
+  },
 };
 </script>

src/_router/index.js

@@ -94,7 +94,7 @@ export const router = new Router({
               component: () => import('~/_pages/main/bubble/LaunchBubble'),
             },
             {
-              path: 'launching-bubble',
+              path: 'launching-bubble/:id',
               component: () => import('~/_pages/main/bubble/LaunchingBubble'),
             },
             {

webpack.config.dev.js

@@ -8,7 +8,8 @@ module.exports = webpackMerge.merge(require('./webpack.config.js'), {
   mode: 'development',
   devServer: {
     proxy: {
-      '/api': 'http://beta.bubv.net:8888',
+    '/api': 'http://beta.bubv.net:8888',
+    // '/api': 'https://beta.bubv.net/',
     },
   },
 });