Add number pad

www/css/styles.css

@@ -79,4 +79,14 @@ html.md .navbar .link {
 #qrcode {
     max-height: calc(100% - var(--f7-navbar-height));
     max-width: 100%;
+}
+
+.numpad-button {
+    height: 10vh;
+    line-height: 10vh;
+}
+
+.numpad-button span {
+    margin: auto auto;
+    font-weight: bold;
 }

www/js/home.js

@@ -11,6 +11,16 @@ $("#payment-popup").on("popup:close", function () {
     stopPaymentCheck = true;
 });
 
+$(".numpad-button").on("click", function () {
+    var val = $(this).data("value");
+    if (val == "C") {
+        $("#amount-box").val("");
+        return;
+    }
+
+    $("#amount-box").val($("#amount-box").val() + val);
+});
+
 $("#showcodebtn").click(function () {
     var amount = $("#amount-box").val() * 1.0;
     if (amount <= 0) {
@@ -47,8 +57,8 @@ function makeQrCode(amount, callback) {
         });
         var base64 = window.btoa(svg);
         $("#qrcode").attr("src", 'data:image/svg+xml;base64,' + base64);
-        $("#pay-amount").text(data.amount);
+        $("#pay-amount").text(data.amount.toFixed(2));
-        $("#paid-amount").text(data.amount);
+        $("#paid-amount").text(data.amount.toFixed(2));
         app.preloader.hide();
         checkPaymentStatus(data.txcode);
         callback(true);
@@ -69,6 +79,7 @@ function checkPaymentStatus(txcode) {
         if (data.complete == true) {
             app.popup.close($("#payment-popup"));
             app.popup.open($("#paid-popup"));
+            $("#amount-box").val("");
         } else {
             setTimeout(function () {
                 checkPaymentStatus(txcode);

www/pages/home.html

@@ -22,16 +22,27 @@
 
         <div class="row justify-content-center">
 
-            <div class="col-100 tablet-50 desktop-25">
+            <div class="col-100 tablet-50 desktop-33">
-                <div class="card">
+                <div class="row justify-content-center margin-horizontal">
-                    <div class="card-content card-content-padding">
+                    <div class="col-100 tablet-75">
-                        <div class="money-input-box">
+                        <div class="money-input-box margin-vertical">
                             <div class="currency">$</div>
                             <input type="tel" min="0.00" max="999.99" placeholder="0.00" id="amount-box" class="money-input" />
                         </div>
                     </div>
-                    <div class="card-footer display-block padding-vertical">
+
-                        <div class="button button-large button-fill button-round button-raised" id="showcodebtn">
+                    <div class="col-100">
+                        <div class="row">
+                            {{#each numpad}}
+                            <div class="col-33">
+                                <div class="button button-large button-raised numpad-button margin-vertical-half" data-value="{{this}}">
+                                    <span>{{this}}</span>
+                                </div>
+                            </div>
+                            {{/each}}
+                        </div>
+
+                        <div class="button button-large button-fill button-round button-raised margin-top" id="showcodebtn">
                             <i class="fas fa-qrcode"></i> Show Code
                         </div>
                     </div>

www/routes.js

@@ -10,16 +10,29 @@ var routes = [
         path: '/home',
         templateUrl: './pages/home.html',
         name: 'home',
+        options: {
+            context: {
+                numpad: [
+                    "7",
+                    "8",
+                    "9",
+                    "4",
+                    "5",
+                    "6",
+                    "1",
+                    "2",
+                    "3",
+                    "0",
+                    ".",
+                    "C"
+                ]
+            }
+        },
         on: {
             pageAfterIn: function () {
-                function tryToLoadHomePage() {
+                $(".numpad-button").each(function () {
-                    if (typeof loadHomePage != "function") {
+                    //$(this).height(Math.min($("body").height() / 10, Math.max($(this).height(), $(this).width() / 1.3)));
-                        setTimeout(tryToLoadHomePage, 500);
+                });
-                    } else {
-                        loadHomePage(function () {});
-                    }
-                }
-                tryToLoadHomePage();
             }
         }
     },