implement payment

snippets/scales.html

@@ -53,9 +53,10 @@ Device ID: <span id="deveui"></span>
   <div class="modal-background"></div>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title">Abos</p>
+      <p class="modal-card-title">Abo verl&auml;ngern</p>
     </header>
-    <section class="modal-card-body">
+    <p id="charge_data" hidden>0</p>
+    <section class="modal-card-body" id="abos_verlaengern">
       <!-- Content ... -->
     </section>
     <footer class="modal-card-foot">
@@ -66,8 +67,8 @@ Device ID: <span id="deveui"></span>
 </div>
 
 {{range .LastMetrics}}
-<div class="column is-full notification is-warning">
-  <p class="is-size-2 is-size-5-mobile has-text-centered has-text-weight-bold" ><span 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>
+<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>
   <p id="alarmactive_{{.Deveui}}" hidden>{{.Alarmactive}}</p>
   <p id="smsnumber_{{.Deveui}}" hidden>{{.Smsnumber}}</p>
   <p id="lastmeasurement_{{.Deveui}}" class="has-text-centered">letzte &uuml;bermittelte Messung: {{.Timestamp}}</p>
@@ -117,9 +118,10 @@ Device ID: <span id="deveui"></span>
       </nav>
     </div>
     <div class="has-text-centered">
-      <span class="is-size-6 has-text-centered" id="paid_until_{{.Deveui}}">aktiv bis</span>
-      <span class="is-size-6 has-text-centered" id="paid_until_{{.Deveui}}">01.01.1234</span>
+      <span class="is-size-6 has-text-centered">aktiv bis</span>
+      <span class="paid_until is-size-6 has-text-centered">{{.ActiveUntil}}</span>
     </div>
+{{ if (lt .DaysUntilDeactivated 1095) }}
     <div class="has-text-centered is-size-7">
       <p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}">&nbsp;</p>
     </div>
@@ -141,11 +143,14 @@ Device ID: <span id="deveui"></span>
         </span>
       </a>
     </div>
+{{ end }}
   </div>
 </div>
 
 {{end}}
 
+<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+
 <script>
 
 function validate(what, text) {
@@ -218,11 +223,40 @@ $(".abo_minus").click(function() {
    }
 });
 
+function add_years(dt,n) 
+{
+ return new Date(dt.setFullYear(dt.getFullYear() + n));      
+}
+
 $(".abo_pay").click(function() {
   console.log("pay...");
-  el = $(this).parent().find(".abo_add_years");
-  counter = Number(el.html());
+  counter = 0; 
+  charge_data = '';
+  abo_table = '<table class="table is-bordered is-fullwidth" >';
+  abo_table += '<tr><th class="is-2">Alias</th><th>verl&auml;ngern bis</th><th class="has-text-right">Betrag</th></tr>';
+  $(".waage").each(function( index ) {
+    console.log( index + ": " + $( this ).find(".alias").html() );
+    this_count = Number($( this ).find(".abo_add_years").html());
+    if (this_count > 0) {
+      counter += this_count;
+      this_date = $( this ).find(".paid_until").html();
+      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;
+      } else {
+        charge_data += "," + $( this ).find("div").first().attr('id') + ":" + this_count;
+      }
+    }
+    console.log( counter );
+  });
+  abo_table += '<tr><td>Total CHF</td><td></td><td class="has-text-right">' + (counter * 24).toFixed(2) + '</td></tr>';
+  console.log("Counter: "+counter);
+  abo_table += "</table>";
   if (counter > 0) {
+    console.log(abo_table);
+    console.log("charge_data: "+charge_data);
+    $("#abos_verlaengern").html(abo_table);
+    $("#charge_data").html(charge_data);
     $("#cart").addClass("is-active");  
   }
 });
@@ -317,10 +351,7 @@ $("#cart-pay").click(function() {
     type: "get", //send it through get method
     dataType: "json",
     data: { 
-      charge_name: "Abo", 
-      charge_description: "Desription",
-      charge_amount_rappen: 500, 
-      charge_quantity: 1
+      charge_data: $("#charge_data").html()
     },
     success: function(response) {
       console.log('pay success');