fix: server percentage time

Author: motorina0

src/boot/saas.js

@@ -3,6 +3,7 @@ import axios from "axios";
 var saas = {
   slideimg: "assets/images/hero/bitcoin-accounts.png",
   url: "https://api.lnbits.com",
+  serverTime: null,
 
   access_token: localStorage.getItem("token"),
   email: localStorage.getItem("email"),
@@ -83,23 +84,37 @@ var saas = {
 
     return response;
   },
+  status: async function () {
+    const response = await axios({
+      method: "GET",
+      url: this.url,
+    });
+
+    this.serverTime = response.data.timestamp;
+
+    return response;
+  },
   logout: function () {
     this.access_token = null;
     this.email = null;
     localStorage.clear();
+    // todo: call endpoint
   },
 
   mapInstance: function (instance) {
-    const progress = (start, stop) => {
+    const progress = (start, stop, serverTime) => {
       const now = new Date().getTime() / 1000;
-      if (stop - start <= 0) {
+      if (!serverTime) {
+        return 0;
+      }
+      if (stop - start <= 0 || stop - serverTime <= 0) {
         return 100;
       }
 
-      const percentage = (1 - (stop - start) / (stop - now)) * 100;
+      const percentage = (1 - (stop - serverTime) / (stop - start)) * 100;
 
       console.log("## percentage", percentage, start, now, stop);
-      return percentage;
+      return Math.round(percentage);
     };
     return {
       id: instance.id,
@@ -113,7 +128,11 @@ var saas = {
       timestamp: instance.timestamp,
       timestampStop: instance.timestamp_stop,
       lnurl: instance.lnurl,
-      progress: progress(instance.timestamp, instance.timestamp_stop),
+      progress: progress(
+        instance.timestamp,
+        instance.timestamp_stop,
+        this.serverTime
+      ),
     };
   },
 };

src/components/tables/TableDarkMode.vue

@@ -118,7 +118,8 @@
         </template>
 
         <template v-slot:body-cell-Progress="props">
-          <q-td :props="props">
+          <q-td :props="props" tool-tip="xxxxx">
+            <q-tooltip><span v-text="props.row.progress + '%'"></span></q-tooltip>
             <q-linear-progress
               dark
               :color="getColor(props.row.progress)"
@@ -145,11 +146,7 @@
         />
       </p>
       <h5><span v-text="activeInstance.name"></span></h5>
-      <q-linear-progress
-        indeterminate
-        color="secondary"
-        class="q-mt-sm"
-      />
+      <q-linear-progress indeterminate color="secondary" class="q-mt-sm" />
       <div class="row q-mt-md">
         <q-btn
           color="deep-purple"
@@ -400,9 +397,8 @@ export default defineComponent({
       const retryId = setInterval(async () => {
         try {
           const { data } = await saas.getInstances();
-          console.log("### checkInstance", data);
           const updatedInstance = (data || [])
-            .map(saas.mapInstance)
+            .map(i => saas.mapInstance(i))
             .find((i) => i.id === instance.id);
           if (
             updatedInstance &&
@@ -415,14 +411,24 @@ export default defineComponent({
             });
           }
           if (!this.showPaymentQrDialog) {
-            console.log("### clearInterval no dialog", retryId);
             clearInterval(retryId);
           }
         } catch (error) {
           console.warn(error);
         }
       }, 3000);
     },
+    serverStatus: async function () {
+      try {
+        await saas.status();
+      } catch (error) {
+        console.warn(error);
+        this.q.notify({
+          message: "Failed to check SaaS Server status!",
+          color: "negative",
+        });
+      }
+    },
     extendInstance: function (instance) {
       this.activeInstance = instance;
       this.showPaymentQrDialog = true;
@@ -443,7 +449,8 @@ export default defineComponent({
   async created() {
     try {
       const { data } = await saas.getInstances();
-      const tableData = (data || []).map(saas.mapInstance);
+      await this.serverStatus()
+      const tableData = (data || []).map(i => saas.mapInstance(i));
 
       this.data = tableData;
     } catch (error) {