Fixed timer

web/src/App.vue

@@ -40,7 +40,6 @@ export default {
         this.worker.listenTo('payment-received', (e)=>{
             console.log('pay received', e.data)
             this.invoice =  e.data.invoice;
-            this.uploadId = e.data.upload_id;
             this.status = e.data.status;
         })
 

web/src/Pay.vue

@@ -2,7 +2,7 @@
 
     <div id="payment">
         <img :src="payreqURI" />
-        <timer v-if="invoice.status != 'paid'" :expires="invoice.expires_at" :expired="expired"></timer>
+        <timer v-if="showTimer" :expires="expires" :expired="expired"></timer>
         <p v-if="invoice.status == 'paid'">Paid on {{paidAt}}</p>
         <p class='paid' v-if="paid">PAID</p>
         <p class='unpaid' v-if="unpaid">UNPAID</p>
@@ -23,6 +23,7 @@ export default {
         return {
             payreqURI: "",
             expired: false,
+            expires: 0,
         }
     },
     props: ['invoice', 'uploadId', 'status'],
@@ -47,12 +48,10 @@ export default {
                 })
         }
     },
-    mounted(){
-        this.expired = (this.invoice.status === 'expired')
-    },
 
     computed: {
         paidAt: function(){
+
             return new Date(this.invoice.paid_at).toGMTString();
         },
         paid: function() {
@@ -62,14 +61,24 @@ export default {
         unpaid: function(){
             return this.invoice.status == 'unpaid';
         },
-
+        showTimer: function(){
+            return !this.paid;
+        }
     },
     watch: {
         invoice: function(val) {
-            if (new Date(val.expires_at*1000) - new Date() <= 0){
+            if (val){
-                this.expired = true;
+                this.expires = val.expires_at;
+
+                if (new Date(val.expires_at*1000) - new Date() <= 0){
+                    this.expired = true;
+                } else {
+                    this.expired = false;
+                }
+
+                this.makeLnQR(val.payreq)
+
             }
-            this.makeLnQR(val.payreq)
         }
     },
     components:{

web/src/Timer.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="timer">
-        <p v-if="!expired && timer">remaining: {{mins}}:{{secs}}</p>
+        <p>remaining: {{mins}}:{{secs}}</p>
-        <p class="expired" v-if="expired">expired</p>
     </div>
 </template>
 
@@ -14,6 +13,12 @@ export default {
             timer: null,
         }
     },
+    methods: {
+        restart(){
+            console.log('restart timer')
+            this.timer = new Timer(new Date(this.expires*1000));
+        }
+    },
     props: ['expires', 'expired'],
     computed: {
         secs: function() {
@@ -30,7 +35,6 @@ export default {
     watch: {
         expires: function(val){
             let self = this;
-
             this.timer = new Timer(new Date(val*1000));
         }
     }