Add receiving QR code, add support for opening app to send page from QR

www/css/styles.css

@@ -74,4 +74,26 @@ html.md .navbar {
 
 html.md .navbar .link {
     color: white;
+}
+
+.card-expandable .card-header {
+    min-height: var(--f7-card-header-min-height);
+    color: var(--f7-card-header-text-color);
+    font-size: var(--f7-card-header-font-size);
+    font-weight: var(--f7-card-header-font-weight);
+    padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
+}
+
+.card-expandable .card-header:after {
+    display: block !important;
+}
+
+#qrcode {
+    max-width: 100%;
+    max-height: 12em;
+}
+
+.card-expandable #qrcode {
+    height: 50em;
+    max-height: 50vh;
 }

www/index.html

@@ -27,6 +27,7 @@
 
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <script src="node_modules/framework7/js/framework7.bundle.min.js"></script>
+<script src="node_modules/qrcode-generator/qrcode.js"></script>
 
 <script src="settings.js"></script>
 <script src="js/api.js"></script>

www/js/home.js

@@ -8,31 +8,89 @@ var accountBalance = 0.0;
 
 $(".view-main").on("ptr:refresh", ".ptr-content", function () {
     loadHomePage(function () {
-        setTimeout(app.ptr.done, 750);
+        app.ptr.done();
     });
 });
 
+$(".view-main").on("card:open", ".card-expandable", function () {
+    $(".ptr-preloader").addClass("display-none");
+    $(".card-expandable .navbar").removeClass("display-none");
+});
+
+$(".view-main").on("card:close", ".card-expandable", function () {
+    $(".card-expandable .navbar").addClass("display-none");
+});
+
+$(".view-main").on("card:closed", ".card-expandable", function () {
+    $(".ptr-preloader").removeClass("display-none");
+    $("#receive-card").removeClass("card-expandable");
+});
+
 function loadBalance(callback) {
-    $("#balance-error-icon").css("display", "none");
+    $("#balance-error-icon").addClass("display-none");
-    $("#balance-loading").css("display", "");
+    $("#balance-loading").removeClass("display-none");
     callAPI("checkbalance", {
         key: localStorage.getItem("key")
     }, function (data) {
         accountBalance = data.balance;
         $("#balance-amount").text(data.balance);
-        $("#balance-loading").css("display", "none");
+        $("#balance-loading").addClass("display-none");
         $("#balance-error").text("");
         callback(true);
     }, function (msg) {
-        $("#balance-loading").css("display", "none");
+        $("#balance-loading").addClass("display-none");
         $("#balance-error-icon").css("display", "");
         $("#balance-error").text(msg);
-        callback(false);
+        callback(false, msg);
+    });
+}
+
+function openReceiveCard() {
+    $("#receive-card").addClass("card-expandable");
+    app.card.open("#receive-card");
+}
+
+function loadQrCode(callback) {
+    $("#receive-loading").removeClass("display-none");
+    callAPI("getprofile", {
+        key: localStorage.getItem("key"),
+    }, function (data) {
+        app.preloader.hide();
+        //if (data.profile.type * 1 > 1) {
+        var typeNumber = 4;
+        var errorCorrectionLevel = 'L';
+        var qr = qrcode(typeNumber, errorCorrectionLevel);
+        qr.addData('https://app.helpinghelena.org/?sendto=' + data.profile.publicid);
+        qr.make();
+        var svg = qr.createSvgTag({
+            margin: 6,
+            scalable: true
+        });
+        var base64 = window.btoa(svg);
+        $("#qrcode").attr("src", 'data:image/svg+xml;base64,' + base64);
+        $("#publicid").text(data.profile.publicid);
+        $("#receive-loading").addClass("display-none");
+        callback(true);
+        //}
+    }, function (msg) {
+        $("#receive-loading").addClass("display-none");
+        callback(false, msg);
     });
 }
 
 function loadHomePage(callback) {
+    var done = 0;
+    var total = 2;
     loadBalance(function () {
-        callback();
+        done++;
+        if (done >= total) {
+            callback();
+        }
+    });
+    loadQrCode(function () {
+        done++;
+        if (done >= total) {
+            callback();
+        }
     });
 }

www/js/main.js

@@ -100,6 +100,22 @@ function refreshKey(callback) {
     });
 }
 
+function setupKeyRefresh() {
+    // Check and refresh API key as needed
+    // Should mitigate key expiration if the app is left open for
+    // a long time when the key is almost expired
+    setInterval(function () {
+        checkKey(function (valid) {
+            if (!valid) {
+                refreshKey(function (ok) {
+                    if (!ok) {
+                        router.navigate("/setup/0");
+                    }
+                });
+            }
+        });
+    }, 1000 * 60 * 5);
+}
 
 if (localStorage.getItem("configured") == null) {
     // Open the setup page
@@ -107,26 +123,33 @@ if (localStorage.getItem("configured") == null) {
 } else {
     checkKey(function (valid) {
         if (valid) {
-            router.navigate("/home");
+            try {
+                var url = new URL(window.location.href);
+                if (typeof url.searchParams.get("sendto") == "string") {
+                    router.navigate("/sendmoney/" + url.searchParams.get("sendto"));
+                } else {
+                    router.navigate("/home");
+                }
+            } catch (ex) {
+                router.navigate("/home");
+            }
 
-            // Check and refresh API key as needed
+            setupKeyRefresh();
-            // Should mitigate key expiration if the app is left open for
-            // a long time when the key is almost expired
-            setInterval(function () {
-                checkKey(function (valid) {
-                    if (!valid) {
-                        refreshKey(function (ok) {
-                            if (!ok) {
-                                router.navigate("/setup/0");
-                            }
-                        });
-                    }
-                });
-            }, 1000 * 60 * 5);
         } else {
             refreshKey(function (ok) {
                 if (ok) {
-                    router.navigate("/home");
+                    try {
+                        var url = new URL(window.location.href);
+                        if (typeof url.searchParams.get("sendto") == "string") {
+                            router.navigate("/sendmoney/" + url.searchParams.get("sendto"));
+                        } else {
+                            router.navigate("/home");
+                        }
+                    } catch (ex) {
+                        router.navigate("/home");
+                    }
+                    
+                    setupKeyRefresh();
                 } else {
                     //router.navigate("/setup/0");
                 }

www/package.json

@@ -8,6 +8,7 @@
     "dependencies": {
         "@fortawesome/fontawesome-free": "^5.6.3",
         "framework7": "^4",
-        "jquery": "^3.3.1"
+        "jquery": "^3.3.1",
+        "qrcode-generator": "^1.4.3"
     }
 }

www/pages/home.html

@@ -50,6 +50,35 @@
                     </div>
                 </div>
             </div>
+
+            <div class="col-100 tablet-50 desktop-33">
+                <div class="card elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
+
+                    <div class="card-header card-opened-fade-out">
+                        Receive Money
+                        <div>
+                            <span class="preloader" id="receive-loading"></span>
+                        </div>
+                    </div>
+
+                    <div class="card-content text-align-center" style="min-height: 16.58em;">
+                        <div class="navbar display-none">
+                            <div class="navbar-inner">
+                                <div class="title">Receive Money</div>
+
+                                <div class="right">
+                                    <a href="#" class="link icon-only card-close">
+                                        <i class="material-icons">close</i>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+
+                        <image id="qrcode" class="text-align-center card-opened-fade-in" src="" />
+                        <h3 id="publicid" class="text-align-center padding-bottom card-opened-fade-in"></h3>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <!-- Make sure the content won't be blocked by the floating button -->
@@ -58,7 +87,7 @@
     </div>
 
     <div class="fab fab-right-bottom">
-        <a href="/send">
+        <a href="/sendmoney/0">
             <i class="material-icons">add</i>
         </a>
     </div>

www/pages/sendmoney.html

@@ -7,7 +7,7 @@
     <div class="navbar">
         <div class="navbar-inner">
             <div class="left">
-                <a href="#" class="link icon-only back">
+                <a href="/home" class="link icon-only back">
                     <i class="icon icon-back"></i>
                 </a>
             </div>
@@ -81,7 +81,7 @@
                             </div>
                         </div>
                     </div>
-                    
+
                 </div>
             </div>
         </div>

www/yarn.lock

@@ -34,6 +34,11 @@ path-to-regexp@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-3.0.0.tgz#c981a218f3df543fa28696be2f88e0c58d2e012a"
   integrity sha512-ZOtfhPttCrqp2M1PBBH4X13XlvnfhIwD7yCLx+GoGoXRPQyxGOTdQMpIzPSPKXAJT/JQrdfFrgdJOyAzvgpQ9A==
 
+qrcode-generator@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.3.tgz#4876e8f280e65b6c94615f4c19c484f6b964b199"
+  integrity sha512-++rVRvMRq5BlHfmAafl8a4ppUntzUxCCUTT2t0siUgqKwdnqRzY8IH6f6WSX5dZUhD2Ul5/MIKuTJddflwrGzw==
+
 ssr-window@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"