wip

BTCPayServer/Hubs/CrowdfundHub.cs

@@ -38,10 +38,6 @@ namespace BTCPayServer.Hubs
             await Groups.AddToGroupAsync(Context.ConnectionId, appId);
         }
 
-        public async Task PushUpdatedCrowdfundInfo()
-        {
-            
-        }
 
         public async Task CreateInvoice(ContributeToCrowdfund model)
         {
@@ -54,11 +50,6 @@ namespace BTCPayServer.Hubs
             }
             
         }
-
-        public async Task PaymentReceived()
-        {
-            
-        }
     }
 
     public class CrowdfundHubStreamer
@@ -134,7 +125,7 @@ namespace BTCPayServer.Hubs
             var appId = invoiceEvent.Invoice.OrderId.Replace(CrowdfundInvoiceOrderIdPrefix, "", StringComparison.InvariantCultureIgnoreCase);
             if (invoiceEvent.Name == InvoiceEvent.ReceivedPayment)
             {
-                _HubContext.Clients.Group(appId).SendCoreAsync(nameof(CrowdfundHub.PaymentReceived), new object[]{ invoiceEvent.Invoice.AmountPaid } );
+                _HubContext.Clients.Group(appId).SendCoreAsync("PaymentReceived", new object[]{ invoiceEvent.Invoice.AmountPaid } );
             }
         }
         

BTCPayServer/Views/AppsPublic/Crowdfund/VueCrowdfund.cshtml

@@ -23,8 +23,14 @@
 
                     </div>
                     <ul class="list-group list-group-flush col-md-3 col-sm-12">
+                        <li class="list-group-item"  v-if="startDate">
+                            <template>{{started}} {{ended}}</template>
+                        </li>
+                        <li class="list-group-item" v-if="startDate">
+                            <template>Starts {{startDate}}</template>
+                        </li>
                         <li class="list-group-item">
-                            <template v-if="srvModel.endDate">Ends {{srvModel.endDate}}</template>
+                            <template v-if="endDate">Ends {{endDate}}</template>
                             <template v-else>No specific end date</template>
                         </li>
                         <li class="list-group-item">
@@ -55,8 +61,7 @@
 
                     <div class="card shadow" v-if="srvModel.info.daysLeft && srvModel.info.daysLeft  >0">
                         <div class="card-body">
-                            <h5 class="card-title text-center">{{srvModel.info.daysLeft}}</h5>
-                            <h6 class="card-text text-center">Days left</h6>
+                            <h5 class="card-title text-center">Ends {{endDateRelativeTime}}</h5>
                         </div>
                     </div>
                 </div>

BTCPayServer/wwwroot/crowdfund/app.js

@@ -1,17 +1,61 @@
 var app = null;
 var eventAggregator = new Vue();
 window.onload = function (ev) {
-    
-
     app = new Vue({
         el: '#app',
-        data: function () {
+        data: function(){
             return {
-                srvModel: window.srvModel
+                srvModel: window.srvModel,
+                connectionStatus: "",
+                endDate: "",
+                startDate: "",
+                startDateRelativeTime: "",
+                endDateRelativeTime: "",
+                started: false,
+                ended: false                
+            }
+        },
+        computed: {},
+        methods: {
+            updateComputed: function () {
+                if (this.srvModel.endDate) {
+                    var endDateM = moment(this.srvModel.endDate);
+                    this.endDate = endDateM.format('MMMM Do YYYY');
+                    this.endDateRelativeTime = endDateM.fromNow();
+                    this.ended = endDateM.isBefore(moment());
+                }else{
+                    this.ended = true;
+                }
+
+                if (this.srvModel.startDate) {
+                    var startDateM = moment(this.srvModel.startDate);
+                    this.startDate = moment(startDateM).format('MMMM Do YYYY');
+                    this.startDateRelativeTime = moment(startDateM).fromNow();
+                    this.started = startDateM.isBefore(moment());
+                }else{
+                    this.started = true;
+                }
+                setTimeout(this.updateComputed, 1000);
             }
         },
         mounted: function () {
             hubListener.connect();
+            eventAggregator.$on("invoice-created", function (invoiceId) {
+                btcpay.showInvoice(invoiceId);
+            });
+            eventAggregator.$on("info-updated", function (model) {
+                this.srvModel = model;
+            });
+            eventAggregator.$on("connection-pending", function () {
+                this.connectionStatus = "pending";
+            });
+            eventAggregator.$on("connection-failed", function () {
+                this.connectionStatus = "failed";
+            });
+            eventAggregator.$on("connection-lost", function () {
+                this.connectionStatus = "connection lost";
+            });
+            this.updateComputed();
         }
     });
 };

BTCPayServer/wwwroot/crowdfund/services/listener.js

@@ -8,10 +8,15 @@ var hubListener = function(){
         console.error("Connection was closed. Attempting reconnect in 2s");
         setTimeout(connect, 2000);
     });
-
+    connection.on("PaymentReceived", function(amount){
+        eventAggregator.$emit("payment-received", amount);
+    });
     connection.on("InvoiceCreated", function(invoiceId){
         eventAggregator.$emit("invoice-created", invoiceId);
     });
+    connection.on("InfoUpdated", function(model){
+        eventAggregator.$emit("info-updated", model);
+    });
     
     function connect(){