From 7a6c87bd8ed720f7977ece6b58099ff6d5ec0d3f Mon Sep 17 00:00:00 2001
From: Arc <33088785+arcbtc@users.noreply.github.com>
Date: Mon, 13 Apr 2020 21:38:15 +0100
Subject: [PATCH] Update tpos.html

---
 .../extensions/tpos/templates/tpos/tpos.html  | 137 ++++++++++++------
 1 file changed, 92 insertions(+), 45 deletions(-)
diff --git a/lnbits/extensions/tpos/templates/tpos/tpos.html b/lnbits/extensions/tpos/templates/tpos/tpos.html
index e39182295..3fe910790 100644
--- a/lnbits/extensions/tpos/templates/tpos/tpos.html
+++ b/lnbits/extensions/tpos/templates/tpos/tpos.html
@@ -3,7 +3,6 @@
 
 <head>
 
-
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">
     <title>TPoS</title>
@@ -11,12 +10,10 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#363636">
-
-
-
-
-
-
+    <script
+      src="{{ url_for('static', filename='plugins/jscam/qrcode.min.js') }}"
+      type="text/javascript"
+    ></script>
     <style>
         @import url(https://fonts.googleapis.com/css?family=Muli:400,700&display=swap);
         * {
@@ -64,12 +61,6 @@
 </head>
 
 <body>
-
-
- 
-
-
-
     <div id="app">
         <div class="display">
   <div id="qrcode" style="position: absolute;">
@@ -78,9 +69,6 @@
   <div id="field2"></div>
   
   </div>
-  
-
-
         </div>
         <div class="keypad">
             <button onclick="keys(1)" class="btn-numpad">1</button>
@@ -100,18 +88,8 @@
         </div>
     </div>
 
-
-
-
-
 </body>
-
-
-
-
-
-
-         </center>
+</center>
 
 <script>
 
@@ -156,30 +134,99 @@
   return xhr
 }
 
-console.log( "{{ tpos.wallet }}" )
+var total = "";
+  field1 = "field1"
+  field2 = "field2"
+  document.getElementById(field1).innerHTML = "<p style='font-size: 30px;' id=sats></p>"
+  document.getElementById(field2).innerHTML = "<p style='font-size: 50px;' id=fiat></p>"
 
-     postAjax(
-    "{{ url_for('tpos.api_tpos_create_invoice') }}",
-    JSON.stringify({"amount": "100"}),
-    "filla",
+console.log( "{{ rate }}" );
+console.log("cunt")
 
-    function(data) { 
-     console.log(data)
-    }
-    );
+  function keys(num){
+  if(Number.isInteger(num)){
+      total = total + String(num)
+      document.getElementById("fiat").innerHTML = String(parseInt(total)/100) + " " + ""
+
+      document.getElementById("sats").innerHTML = parseInt( (parseInt(total)/100) *  "{{ rate }}") + "Sats"
+
+  }
+  
+  else if(num == "DEL"){
+      total = "0";
+  }
+  else if(num == "C"){
+     location.reload();
+  }
+  else if(num == "<->"){
+  field1 = field2
+  field2 = field1
+  document.getElementById(field1).innerHTML = "<p style='font-size: 30px;' id=sats></p>"
+  document.getElementById(field2).innerHTML = "<p style='font-size: 50px;' id=fiat></p>"
+
+  }
+
+  else if(num == "OK"){
+    satz = document.getElementById("sats").innerHTML
+    console.log(satz)
+    stax = satz.replace("Sats", "")
+    submitforticket(parseInt(stax))
+  }
+}
+
+function submitforticket(sats){
+console.log(sats)
+
+  postAjax(
+    "/tpos/api/v1/tposs/invoice/"  + "{{ tpos }}",
+    JSON.stringify({"amount":  parseInt(sats)}),
+    "lorem",
+
+    function(data) {
+
+      theinvoice = JSON.parse(data).payment_request
+      thehash = JSON.parse(data).checking_id
+      
+     new QRCode(document.getElementById('qrcode'), {
+        text: theinvoice,
+        width: 300,
+        height: 300,
+        colorDark: '#000000',
+        colorLight: '#ffffff',
+        correctLevel: QRCode.CorrectLevel.M
+      })
+  document.getElementById("sats").innerHTML = ""
+  document.getElementById("fiat").innerHTML = ""
 
 
+      document.getElementById("qrcode").style.backgroundColor = "white";
+      document.getElementById("qrcode").style.padding = "20px";
+
+
+      var refreshId = setInterval(function(){
+
+      getAjax('/tpos/api/v1/tposs/invoice/' + thehash, "lorem", function(datab) {
+        console.log(JSON.parse(datab))
+        if (JSON.parse(datab).PAID == true) {
+           
+            document.getElementById("qrcode").innerHTML = ""
+            document.getElementById("qrcode").style.padding = "0px";
+            document.getElementById("qrcode").style.backgroundColor = "#363636";
+               document.getElementById("qrcode").innerHTML = "<h1 style='color:green;font-size: 100px;'>PAID!</h1>"
+               console.log("theinvoice");
+
+          setTimeout(function(){
+                
+                 
+               location.reload();
+           }, 4000);
+          
+      }
+      })}, 3000);
+});
+}
 </script>
-
 <style>
-
 @import url(https://fonts.googleapis.com/css?family=Muli:400,700&display=swap);*,:after,:before{box-sizing:border-box}ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ol[class],ul[class]{list-style:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--primary-color:#ff533d;--primary-bg-color:#363636;--primary-text-color:#f1f1f1;--dimmed-text-color:#818181;--max-width:460px}body,html{font:16px/1.21 Muli,sans-serif;font-weight:400;color:var(--primary-text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{position:relative;min-height:100vh;display:grid;grid-template-rows:1fr 1fr;width:100%;max-width:var(--max-width);margin:0 auto;background:var(--primary-bg-color)}input,select,textarea{display:block;margin-bottom:1.25em;padding:.5em .6em;border:1px solid transparent;box-sizing:border-box;outline:none}input:active{border:1px solid var(--primary-color)}input:focus,select:focus,textarea:focus{outline:none}select{height:2.5em}label{display:block;margin:.5em 0;font-size:90%}button,select{text-transform:none}.btn{background-color:transparent;border-color:var(--primary-text-color);border-width:1px;color:var(--primary-text-color);border-radius:4px;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:calc(.375em - 1px) .75em;text-align:center;white-space:nowrap;height:2.5em}.btn.btn-primary{background-color:var(--primary-color);border-color:transparent}.btn.btn-submit{background-color:var(--submit-color);border-color:transparent}.menu-toggle{position:absolute;top:20px;right:25px;font-size:1.5rem;cursor:pointer;padding:5px;width:40px;height:40px;z-index:2;fill:var(--dimmed-text-color);will-change:fill}.menu-toggle:focus,.menu-toggle:hover{fill:var(--primary-text-color);-webkit-transition:all .3s ease;transition:all .3s ease}.img-responsive{width:100%;height:auto}.main-menu{height:100%;width:0;position:absolute;z-index:1;top:0;left:0;background-color:var(--primary-bg-color);overflow-x:hidden;padding-top:60px;-webkit-transition:.5s;transition:.5s}.main-menu a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:var(--dimmed-text-color);display:block;-webkit-transition:.3s;transition:.3s}.main-menu a:hover{color:var(--primary-text-color)}.main-menu .closebtn{position:absolute;display:block;cursor:pointer;top:0;right:25px;font-size:36px;margin-left:50px}.accordion{width:100%;text-align:left;border:none;outline:none}.title{cursor:pointer;font-weight:700;padding:1rem}.panel{padding:1rem;width:80%;display:none;overflow:hidden}.panel.active{display:block}footer.menu-footer{position:absolute;padding:1rem;bottom:0}footer.menu-footer>a{font-size:80%;padding:0}.display{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:0 10px;text-shadow:2px 4px 15px rgba(0,0,0,.15);color:var(--primary-text-color)}.display .symbol{font-size:1rem}.display .sats{position:absolute;font-size:1.25rem;bottom:10px;left:10px}.display p{margin:0 5px}.keypad{max-height:500px;display:grid;grid-gap:7px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;padding:5px}.keypad *{all:unset;width:100%;height:100%;color:var(--primary-text-color)}.btn-cancel,.btn-confirm,.btn-numpad{border:2px solid var(--primary-text-color);border-radius:10px;background:none;text-align:center;font-size:1.7em}.btn-cancel:active,.btn-confirm:active,.btn-numpad:active{background:var(--primary-color)}@media (hover:hover){.btn-cancel:hover,.btn-confirm:hover,.btn-numpad:hover{background:var(--primary-color)}}.btn-cancel,.btn-confirm{grid-row:auto/span 2}.btn-confirm{background:#6b8e23}.btn-cancel{background:tomato}.modal{position:fixed;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:0;background-color:transparent;overflow:hidden;-webkit-transition:background-color .25s ease;transition:background-color .25s ease;z-index:9998}.modal.open{position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.5);-webkit-transition:background-color .25s;transition:background-color .25s}.modal.open>.content-wrapper{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.modal .content-wrapper{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:90%;max-width:calc(var(--max-width)*0.95);margin:0;padding:2.5rem;background-color:#fff;border-radius:.3125rem;box-shadow:0 0 2.5rem rgba(0,0,0,.5);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .25s;transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;-webkit-transition-delay:.15s;transition-delay:.15s;color:#444}.modal .content-wrapper,.modal .content-wrapper .close,.modal.open.settled .content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal .content-wrapper .close,.modal.open.settled .content-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:.25s linear;transition:.25s linear}.modal .content-wrapper .close{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;border:none;background-color:transparent;font-size:1.5rem}.modal .content-wrapper .close:after,.modal .content-wrapper .close:before{position:absolute;content:"";width:1.25rem;height:.125rem;background-color:var(--primary-bg-color)}.modal .content-wrapper .close:before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.modal .content-wrapper .close:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.modal .content-wrapper .close:hover:after,.modal .content-wrapper .close:hover:before{background-color:var(--dimmed-text-color)}.modal .content-wrapper .modal-header{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0;padding:0 0 1.25rem}.modal .content-wrapper .modal-header h2{font-size:1.5rem;font-weight:700}.modal .content-wrapper .content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;max-width:100%}.modal .content-wrapper .content p{font-size:.875rem;line-height:1.75}.modal .content-wrapper .content p,.modal .content-wrapper .content small{text-align:center;word-wrap:break-word}.modal .content-wrapper .modal-footer{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;width:100%;margin:0;padding:1.875rem 0 0}.modal .content-wrapper .modal-footer .action{position:relative;margin-left:.625rem;padding:.625rem 1.25rem;border:none;background-color:#708090;border-radius:.25rem;color:#fff;font-size:.87rem;font-weight:300;overflow:hidden;z-index:1}.modal .content-wrapper .modal-footer .action:before{position:absolute;content:"";top:0;left:0;width:0;height:100%;background-color:hsla(0,0%,100%,.2);-webkit-transition:width .25s;transition:width .25s;z-index:0}.modal .content-wrapper .modal-footer .action.green{background-color:#6b8e23}.modal .content-wrapper .modal-footer .action.red{background-color:tomato}.modal .content-wrapper .modal-footer .action:hover:before{width:100%}.checkmark{width:56px;height:56px;margin:5rem auto;border-radius:50%;display:block;stroke-width:2;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #7ac142;-webkit-animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;-webkit-animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@-webkit-keyframes stroke{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-dashoffset:0}}@-webkit-keyframes scale{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@keyframes scale{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}.loader{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--primary-bg-color);width:100%;height:100vh;z-index:9999;stroke:var(--primary-color)}.loader svg{height:100px;width:100px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.loader circle{stroke-dasharray:156;stroke-dashoffset:156;-webkit-animation:load 2.3s infinite;animation:load 2.3s infinite}@-webkit-keyframes load{50%{stroke-dashoffset:0}to{stroke-dashoffset:-156}}@keyframes load{50%{stroke-dashoffset:0}to{stroke-dashoffset:-156}}
-
-
-
 </style>
-
-
-
-
 </html>
