work on abo code

snippets/scales.html

@@ -31,8 +31,7 @@
       <div class="field">
         <label class="label">Alarmnummer (SMS)</label>
         <div class="control has-icons-right">
-          <input id="smsnumber" class="input" type="text" maxlength="16">
+          <input id="smsnumber" class="input" type="text" maxlength="16"> <span id="smsnumber_exclamation" class="icon is-small is-right">
-          <span id="smsnumber_exclamation" class="icon is-small is-right">
             <i class="fas fa-exclamation-triangle"></i>
           </span>
         </div>
@@ -50,6 +49,22 @@ Device ID: <span id="deveui"></span>
   </div>
 </div>
 
+<div id="cart" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Abos</p>
+    </header>
+    <section class="modal-card-body">
+      <!-- Content ... -->
+    </section>
+    <footer class="modal-card-foot">
+      <button id="cart-pay" class="button is-success">Bezahlen</button>
+      <button id="cart-close" class="button">Cancel</button>
+    </footer>
+  </div>
+</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>
@@ -105,10 +120,24 @@ Device ID: <span id="deveui"></span>
       <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>
     </div>
+    <div class="has-text-centered is-size-7">
+      <p class="abo_add_years_text" id="abo_add_years_text_{.Deveui}}">&nbsp;</p>
+    </div>
     <div class="has-text-centered">
-      <a class="block-link" id="add_abo_{{.Deveui}}">
+      <p class="abo_add_years" id="abo_add_years_{{.Deveui}}" hidden>0</p>
+      <a class="block-link abo_plus is-unselectable" id="abo_plus_{{.Deveui}}">
         <span class="icon is-medium">
-          <i class="fa fa-2x fa-cart-plus"></i>
+          <i class="fa fa-lg fa-plus"></i>
+        </span>
+      </a>
+      <a class="block-link abo_pay is-unselectable" id="abo_{{.Deveui}}">
+        <span class="icon is-medium">
+          <i class="fa fa-2x fa-shopping-cart"></i>
+        </span>
+      </a>
+      <a class="block-link abo_minus is-unselectable" id="abo_minus_{{.Deveui}}">
+        <span class="icon is-medium">
+          <i class="fa fa-lg fa-minus"></i>
         </span>
       </a>
     </div>
@@ -118,6 +147,7 @@ Device ID: <span id="deveui"></span>
 {{end}}
 
 <script>
+
 function validate(what, text) {
   if (what == 'alias') {
     var re = /^[a-zA-Z0-9 ]{1,16}$/;
@@ -149,6 +179,59 @@ $(".show-modal").click(function() {
   $("#modal").addClass("is-active");  
 });
 
+$(".abo_pay").click(function() {
+  console.log("pay...");
+  el = $(this).parent().find(".abo_add_years");
+  counter = Number(el.html());
+  if (counter > 0) {
+    $("#cart").addClass("is-active");  
+  }
+});
+
+$("#cart-close").click(function() {
+   console.log("blabla");
+   $("#cart").removeClass("is-active");
+});
+
+$("#cart-pay").click(function() {
+   console.log("hoopla");
+  $("#cart").removeClass("is-active");
+});
+
+$(".abo_plus").click(function() {
+   console.log("abo_plus");
+   el = $(this).parent().find(".abo_add_years");
+   el_text = $(this).parent().parent().find(".abo_add_years_text");
+   counter = Number(el.html());
+   if (counter < 3) {
+     counter = counter + 1;
+     el.html(counter);
+     if (counter == 1) {
+       el_text.html("+" + counter + " Jahr");
+     } else {
+       el_text.html("+" + counter + " Jahre");
+     }
+   }
+});
+
+$(".abo_minus").click(function() {
+   console.log("abo_minus");
+   el = $(this).parent().find(".abo_add_years");
+   el_text = $(this).parent().parent().find(".abo_add_years_text");
+   counter = Number(el.html());
+   if (counter > 0) {
+     counter = counter - 1;
+     el.html(counter);
+     if (counter == 0) {
+       el_text.html("&nbsp;");
+     } else if (counter == 1) {
+       el_text.html("+" + counter + " Jahr");
+     } else {
+       el_text.html("+" + counter + " Jahre");
+     }
+   }
+});
+
 $("#modal-close").click(function() {
    console.log("blabla");
    $("#modal").removeClass("is-active");