#1: Add UI for sending money (TODO: submit transaction to server)

www/css/styles.css

@@ -30,3 +30,39 @@ h3.display {
     font-weight: 300;
     margin-left: 1em;
 }
+
+input.money-input::-webkit-outer-spin-button,
+input.money-input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input.money-input {
+    -moz-appearance:textfield;
+}
+
+input.money-input:focus::-moz-placeholder {
+    color:transparent;
+}
+input.money-input:focus::-webkit-input-placeholder {
+    color:transparent;
+}
+input.money-input:focus:-ms-input-placeholder {
+    color:transparent;
+}
+
+.money-input-box {
+    font-size: 4em !important;
+    font-weight: 300;
+}
+
+.money-input-box .currency {
+    display: inline;
+    width: 1em;
+}
+
+.money-input-box input {
+    display: inline-block;
+    max-width: calc(100% - 1.1em);
+    text-align: center;
+}

www/index.html

@@ -30,6 +30,7 @@
 
 <script src="settings.js"></script>
 <script src="js/api.js"></script>
+<script src="js/input_type_money.js"></script>
 <script src="routes.js"></script>
 <script src="js/platform.js"></script>
 <script src="js/main.js"></script>

www/js/input_type_money.js

@@ -0,0 +1,35 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$("body").on("keypress", "input.money-input", function (e) {
+    var c = String.fromCharCode(e.which);
+    var k = e.which;
+    if (/[0-9]|[\.]/.test(c)) {
+        // Numbers and period
+    } else if (k == 0 || k == 8) {
+        // Delete, backspace, etc
+    } else {
+        e.preventDefault();
+        return false;
+    }
+});
+
+$("body").on("change", "input.money-input", function (e) {
+    if ($(this).attr("max")) {
+        if ($(this).attr("max") * 1.0 < $(this).val() * 1.0) {
+            $(this).val($(this).attr("max"));
+        }
+    }
+    if ($(this).attr("min")) {
+        if ($(this).attr("min") * 1.0 > $(this).val() * 1.0) {
+            $(this).val($(this).attr("min"));
+        }
+    }
+
+    $(this).val(($(this).val() * 1.0).toFixed(2) + "");
+    console.log(($(this).val() * 1.0).toFixed(2) + "");
+});

www/js/main.js

@@ -8,11 +8,16 @@ var $$ = Dom7;
 // for Cordova, NW.js, or the browser
 initPlatform();
 
+Template7.global = {
+    qrenabled: (platform_type == "cordova")
+};
+
 var app = new Framework7({
     root: "#app",
     name: "HelpingHelena",
     id: "com.netsyms.HelpingHelena",
     theme: platform_theme,
+    debug: true,
     init: true,
     initOnDeviceReady: false,
     routes: routes

www/js/sendmoney.js

@@ -0,0 +1,56 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+
+$("#typecodebtn").on("click", function () {
+    app.dialog.prompt('Enter the recipient\'s code', 'Send Money', function (code) {
+        if (code != "") {
+            app.preloader.show();
+            callAPI("getprofile", {
+                key: localStorage.getItem("key"),
+                id: code
+            }, function (data) {
+                $("#publicid").val(code);
+                loadSendMoneyPage();
+            }, function (msg) {
+                app.preloader.hide();
+                app.dialog.alert(msg, "Error");
+            });
+        }
+    });
+});
+
+function loadSendMoneyPage() {
+    app.preloader.show();
+    if ($("#publicid").val() == "0") {
+        app.preloader.hide();
+        $("#step1").removeClass("display-none");
+        $("#step2").addClass("display-none");
+    } else {
+        $("#step1").addClass("display-none");
+        $("#step2").removeClass("display-none");
+        callAPI("getprofile", {
+            key: localStorage.getItem("key"),
+            id: $("#publicid").val()
+        }, function (data) {
+            app.preloader.hide();
+            console.log("Profile", data.profile);
+            $("#person-name").text(data.profile.name);
+            if (data.profile.verified) {
+                $("#verified-badge").removeClass("display-none");
+            } else {
+                $("#unverified-badge").removeClass("display-none");
+            }
+        }, function (msg) {
+            app.preloader.hide();
+            app.dialog.alert(msg, "Error");
+        });
+    }
+}
+
+$(".preset-amount-button").click(function () {
+    $($(this).data("target")).val($(this).data("amount"));
+});

www/pages/home.html

@@ -26,6 +26,7 @@
         </div>
 
         <div class="row justify-content-center">
+
             <div class="col-100 tablet-50 desktop-33">
                 <div class="card">
                     <div class="card-header">
@@ -41,10 +42,10 @@
                     </div>
                     <div class="card-footer">
                         <a href="#" class="link">
-                            <i class="fas fa-credit-card fa-fw"></i> &nbsp;Add Funds
+                            <i class="fas fa-credit-card fa-fw"></i> Add Funds
                         </a>
-                        <a href="#" class="link">
+                        <a href="/sendmoney/0" class="link">
-                            <i class="fas fa-arrow-up fa-fw"></i> &nbsp;Send Money
+                            <i class="fas fa-arrow-up fa-fw"></i> Send Money
                         </a>
                     </div>
                 </div>

www/pages/sendmoney.html

@@ -0,0 +1,116 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+
+<div class="page" data-name="sendmoney">
+
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Send Money</div>
+        </div>
+    </div>
+
+
+    <div class="page-content">
+
+        <input type="hidden" id="publicid" value="{{this.$route.params.publicID}}" />
+
+        <div class="block">
+            <div id="step1" class="display-none">
+                <div class="row justify-content-center">
+                    {{#if @global.qrenabled}}
+                    <div class="col-100 tablet-50 desktop-25">
+                        <div class="button button-large button-fill button-round">
+                            <i class="fas fa-qrcode"></i> Scan Code
+                        </div>
+                    </div>
+                    {{/if}}
+                    <div class="col-100 tablet-50 desktop-25">
+                        <div class="button button-large button-outline button-round" id="typecodebtn">
+                            <i class="fas fa-keyboard"></i> Enter Code
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="step2" class="display-none">
+                <div class="row justify-content-center">
+                    <div class="col-100 tablet-50 desktop-25">
+                        <div class="card">
+                            <div class="card-content card-content-padding">
+                                <h3><i class="fas fa-user"></i> <span id="person-name"></span></h3>
+                                <div>
+                                    <a id="verified-badge-container" class="link popup-open" href="#" data-popup="#verification-popup">
+                                        <span id="verified-badge" class="display-none">
+                                            <i class="fas fa-check-circle text-color-green"></i> &nbsp; Verified
+                                        </span>
+                                        <span id="unverified-badge" class="display-none">
+                                            <i class="fas fa-question-circle text-color-blue"></i> &nbsp; Unverified
+                                        </span>
+                                    </a>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-100 tablet-50 desktop-25">
+                        <div class="card">
+                            <div class="card-content card-content-padding">
+                                <div class="money-input-box">
+                                    <div class="currency">$</div>
+                                    <input type="tel" min="0.00" max="999.99" placeholder="0.00" id="amount-box" class="money-input" />
+                                </div>
+
+                                <p class="segmented segmented-raised segmented-round">
+                                    <button class="button button-round preset-amount-button" data-target="#amount-box" data-amount="1.00">$1</button>
+                                    <button class="button button-round preset-amount-button" data-target="#amount-box" data-amount="5.00">$5</button>
+                                    <button class="button button-round preset-amount-button" data-target="#amount-box" data-amount="10.00">$10</button>
+                                    <button class="button button-round preset-amount-button" data-target="#amount-box" data-amount="20.00">$20</button>
+                                </p>
+                            </div>
+                            <div class="card-footer display-block">
+                                <div class="button button-large button-fill button-round" id="sendbtn">
+                                    <i class="fas fa-arrow-up"></i> Send
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+
+    <div class="popup" id="verification-popup">
+        <div class="navbar">
+            <div class="navbar-inner">
+                <div class="title">Verified Receivers</div>
+
+                <div class="right">
+                    <a href="#" class="link icon-only popup-close">
+                        <i class="material-icons">close</i>
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div class="block">
+            <p>
+                A verified receiver is a person who is confirmed in need of
+                assistance.
+            <p>
+                They have been vetted by a case worker or other person who works
+                for a local organization that helps people in need.
+            <p>
+                Your money will be used for essentials only, regardless of the
+                receiver's verification status.
+        </div>
+    </div>
+
+    <script src="js/sendmoney.js"></script>
+
+</div>

www/routes.js

@@ -10,9 +10,17 @@ var routes = [
         path: '/home',
         templateUrl: './pages/home.html',
         name: 'home',
-        options: {
+        async: function (routeTo, routeFrom, resolve, reject) {
-            context: {
+            var giver = localStorage.getItem("accttype") == "giver";
-            }
+            var receiver = localStorage.getItem("accttype") == "receiver";
+            resolve({
+                templateUrl: './pages/home.html'
+            }, {
+                context: {
+                    giver: giver,
+                    receiver: receiver
+                }
+            });
         }
     },
     {
@@ -25,6 +33,16 @@ var routes = [
         templateUrl: './pages/setup1.html',
         name: 'setup1'
     },
+    {
+        path: '/sendmoney/:publicID',
+        templateUrl: './pages/sendmoney.html',
+        name: 'sendmoney',
+        on: {
+            pageAfterIn: function () {
+                loadSendMoneyPage();
+            }
+        }
+    },
     {
         path: '/settings',
         name: 'prefs',