abo payment logic

snippets/graph.html

@@ -206,6 +206,14 @@ function drawGraph(deveui, alias, property, start, stop, create_graph) {
   }
   
   $.getJSON('https://mini-beieli.ch/metrics?deveui=' + deveui + '&alias=' + alias + '&property=' + property + range, function(mydata) {
+    if ("msg" in mydata) {
+      $('#chart').html(`<article class="message is-danger">
+  <div class="message-body">
+     Abo ist abgelaufen!
+  </div>
+</article>`);
+      return;
+    }
     var options = {
       chart: {
         type: 'line',

snippets/scales.html

@@ -3,7 +3,6 @@
 {{end}}
 {{define "body_content"}}
 {{ if ne .UserName "" }}
-
 <div id="modal" class="modal">
   <div class="modal-background"></div>
   <div class="modal-card">
@@ -83,6 +82,28 @@ Device ID: <span id="deveui"></span>
   </div>
 </div>
 
+<div id="payment_notifier" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Info: Bezahlung durchgef&uuml;hrt</p>
+    </header>
+    <section class="modal-card-body">
+      <article class="message is-info">
+        <div class="message-body">
+Sie haben eine Abo Verlaengerung bezahlt, besten Dank!
+
+Sie erhalten eine Mail, sobald die Zahlung erfolgreich abgeschlossen ist.
+        </div>
+      </article>
+    </section>
+    <footer class="modal-card-foot">
+
+      <button id="payment_notifier_close" class="button is-success">Schliessen</button>
+    </footer>
+  </div>
+</div>
+
 {{range .LastMetrics}}
 <div class="column waage is-full notification is-warning">
   <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span class="alias" id="alias_{{.Deveui}}">{{.Alias}}</span><a class="show-modal" class="block-link"><span style="float:right;" class="icon is-size-4 is-size-5-mobile"><i class="fa fa-cog"></i></span></a></p>
@@ -108,6 +129,14 @@ Device ID: <span id="deveui"></span>
           </div>
         </a>
       </div>
+{{ if (lt .DaysUntilDeactivated 0) }}
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="icon"><i class="fa fa-balance-scale"></i></p>
+          <p id="weight_{{.Deveui}}" class="title is-size-2 has-text-weight-bold has-text-danger">Abo ist abgelaufen</p>
+        </div>
+      </div>
+{{ else }}
       <div class="level-item has-text-centered">
         <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=w">
           <div>
@@ -116,6 +145,7 @@ Device ID: <span id="deveui"></span>
           </div>
         </a>
       </div>
+{{ end }}
       <div class="level-item has-text-centered">
         <a class="block-link" href="/graph.html?deveui={{.Deveui}}&alias={{.Alias}}&property=p">
           <div>
@@ -135,7 +165,7 @@ Device ID: <span id="deveui"></span>
       </nav>
     </div>
     <div class="has-text-centered">
-      <span class="is-size-6 has-text-centered">aktiv bis</span>
+      <span class="is-size-6 has-text-centered">Abo aktiv bis</span>
       <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
     </div>
 {{ if (lt .DaysUntilDeactivated 1095) }}
@@ -205,6 +235,11 @@ $("#cart-close").click(function() {
    $("#cart").removeClass("is-active");
 });
 
+$("#payment_notifier_close").click(function() {
+   $("#payment_notifier").removeClass("is-active");
+   location.reload(true);
+});
+
 $(".abo_plus").click(function() {
    console.log("abo_plus");
    el = $(this).parent().find(".abo_add_years");
@@ -255,7 +290,12 @@ $(".abo_pay").click(function() {
     this_count = Number($( this ).find(".abo_add_years").html());
     if (this_count > 0) {
       counter += this_count;
-      this_date = $( this ).find(".paid_until").html();
+      paid_until = $( this ).find(".paid_until").html();
+      if (moment(paid_until,'DD.MM.YYYY') < moment()) {
+        this_date = moment().format('DD.MM.YYYY');
+      } else {
+        this_date = paid_until;
+      }
       abo_table += '<tr><td>' + $( this ).find('.alias').html() + '</td><td>' + moment(this_date,'DD.MM.YYYY').add('years', this_count).format('DD.MM.YYYY') + '</td><td class="has-text-right">' + (this_count * 24).toFixed(2) + '</td></tr>';
       if (charge_data == '') {
         charge_data = $( this ).find("div").first().attr('id') + ":" + this_count;
@@ -366,7 +406,6 @@ var card = elements.create("card", { style: style });
 card.mount("#card-element");
 $("#card-errors-article").hide();
 
-
 card.addEventListener('change', ({error}) => {
   if (error) {
     $("#card-errors").text(error.message);
@@ -406,6 +445,7 @@ function ConfirmPayment(clientSecret) {
         $('#card-errors-article').hide();
         $("#cart").removeClass("is-active");
         EndPaymentProgress();
+        $('#payment_notifier').addClass('is-active');
       }
     }
   });