Merge branch 'master' into fix/missing-functionalities

src/_components/modals/LaunchBubbleSettingsModal.vue

@@ -2,10 +2,10 @@
 <template>
   <modal
     name="advanced-settings"
-    :adaptive="true"
     width="90%"
     :maxWidth="600"
     height="auto"
+    scrollable
   >
     <a class="close-btn" @click="hide">
       <i class="fa fa-times"></i>
@@ -295,6 +295,12 @@
   right: 20px;
   font-size: 20px;
 }
+
+.vm--modal {
+  max-width: 600px;
+  left: 50% !important;
+  transform: translate(-50%, 0) !important;
+}
 </style>
 
 <script>

src/_pages/main/bubble/LaunchBubble.vue

@@ -17,7 +17,13 @@
       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" @click="launchBubble">
+      <Button
+        color="default"
+        width="80%"
+        height="60"
+        @click="launchBubble"
+        :disabled="loading()"
+      >
         {{ messages.button_label_launch_bubble }}
       </Button>
 
@@ -161,7 +167,11 @@ export default {
 
     initDefaults() {
       const currentUser = util.currentUser();
-      this.getAllAccountPaymentMethods({userId: currentUser.uuid, messages: this.messages, errors: this.errors});
+      this.getAllAccountPaymentMethods({
+        userId: currentUser.uuid,
+        messages: this.messages,
+        errors: this.errors,
+      });
     },
 
     findRegion(uuid) {

src/_pages/main/bubble/LaunchingBubble.vue

@@ -24,7 +24,11 @@
       >
         <!-- adapted from: https://code-boxx.com/simple-vanilla-javascript-progress-bar/ -->
         <div v-if="stats.percent" class="progress-wrap">
-          <div class="progress-bar" :style="'width: '+stats.percent+'%'" :id="'progressBar_'+networkId"></div>
+          <div
+            class="progress-bar"
+            :style="'width: ' + stats.percent + '%'"
+            :id="'progressBar_' + networkId"
+          ></div>
           <div class="progress-text">
             {{
               messages.label_percent.parseMessage(this, {
@@ -38,7 +42,7 @@
         </div>
         <hr />
       </div>
-      <Button color="default" width="195" height="60">
+      <Button color="default" width="195" height="60" @click="deleteNet">
         {{ messages.button_cancel_lauch_bubble }}
       </Button>
     </div>
@@ -118,6 +122,9 @@ export default {
       refresher: null,
       networkId: this.$route.params.id,
       lottie: null,
+      timerID: null,
+      frameNumber: 0,
+      targetFrameNumber: 0,
     };
   },
 
@@ -148,6 +155,17 @@ export default {
       autoplay: false,
       path: '/launching-bubble.json',
     });
+    this.frameNumber = 0;
+    this.targetFrameNumber = 20;
+
+    setTimeout(() => {
+      this.timerID = setInterval(() => {
+        if (this.frameNumber < this.targetFrameNumber) {
+          console.log(this.frameNumber);
+          this.frameNumber++;
+        }
+      }, 100);
+    }, 2000);
   },
 
   beforeDestroy() {
@@ -245,6 +263,18 @@ export default {
         }
       }
     },
+
+    deleteNet() {
+      if (confirm(this.messages.confirmation_network_action_delete)) {
+        this.errors.clear();
+        this.deleteNetwork({
+          userId: this.user.uuid,
+          networkId: this.networkId,
+          messages: this.messages,
+          errors: this.errors,
+        });
+      }
+    },
   },
 
   watch: {
@@ -283,6 +313,7 @@ export default {
           this.stats.messageKey.startsWith('meter_completed_');
         if ((this.statsError && !isStatsErrorRetry) || isStatsCompleted) {
           this.clearRefresherInterval(this.refresher);
+          this.$router.push(`/bubble/${this.networkId}`);
         }
       } else {
         // status not found for our network
@@ -290,10 +321,7 @@ export default {
       }
 
       if (this.stats) {
-        this.lottie.goToAndStop(
-          (this.lottie.totalFrames / 100) * this.stats.percent,
-          true
-        );
+        this.targetFrameNumber = 20 + (30 / 100) * this.stats.percent;
       }
     },
 
@@ -302,6 +330,13 @@ export default {
         this.$router.replace({ path: '/bubbles' });
       }
     },
+
+    frameNumber() {
+      this.lottie.goToAndStop(this.frameNumber, true);
+      if (this.frameNumber >= 50) {
+        clearInterval(this.timerID);
+      }
+    },
   },
 };
 </script>