From 4a0b8790dd861865bfba17ded95378f18d1cfe12 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Wed, 27 Mar 2019 01:08:58 -0600 Subject: [PATCH] #1: Add UI for sending money (TODO: submit transaction to server) --- www/css/styles.css | 36 ++++++++++++ www/index.html | 1 + www/js/input_type_money.js | 35 +++++++++++ www/js/main.js | 5 ++ www/js/sendmoney.js | 56 ++++++++++++++++++ www/pages/home.html | 7 ++- www/pages/sendmoney.html | 116 +++++++++++++++++++++++++++++++++++++ www/routes.js | 24 +++++++- 8 files changed, 274 insertions(+), 6 deletions(-) create mode 100644 www/js/input_type_money.js create mode 100644 www/js/sendmoney.js create mode 100644 www/pages/sendmoney.html diff --git a/www/css/styles.css b/www/css/styles.css index c6d9435..9101d08 100644 --- a/www/css/styles.css +++ b/www/css/styles.css @@ -29,4 +29,40 @@ h3.display { .card-header .secondary-text { 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; } \ No newline at end of file diff --git a/www/index.html b/www/index.html index 38525db..9e52f71 100644 --- a/www/index.html +++ b/www/index.html @@ -30,6 +30,7 @@ + diff --git a/www/js/input_type_money.js b/www/js/input_type_money.js new file mode 100644 index 0000000..d1b0231 --- /dev/null +++ b/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) + ""); +}); \ No newline at end of file diff --git a/www/js/main.js b/www/js/main.js index dee42b2..20c3379 100644 --- a/www/js/main.js +++ b/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 diff --git a/www/js/sendmoney.js b/www/js/sendmoney.js new file mode 100644 index 0000000..1afa3f8 --- /dev/null +++ b/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")); +}); \ No newline at end of file diff --git a/www/pages/home.html b/www/pages/home.html index ffa28fa..d16b0ea 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -26,6 +26,7 @@
+
@@ -41,10 +42,10 @@
-  Add Funds + Add Funds - -  Send Money + + Send Money
diff --git a/www/pages/sendmoney.html b/www/pages/sendmoney.html new file mode 100644 index 0000000..40dd902 --- /dev/null +++ b/www/pages/sendmoney.html @@ -0,0 +1,116 @@ + + +
+ +
+
+
+ + + +
+
Send Money
+
+
+ + +
+ + + +
+ + + +
+ +
+ + + + + +
\ No newline at end of file diff --git a/www/routes.js b/www/routes.js index 090eb53..479bd8c 100644 --- a/www/routes.js +++ b/www/routes.js @@ -10,9 +10,17 @@ var routes = [ path: '/home', templateUrl: './pages/home.html', name: 'home', - options: { - context: { - } + async: function (routeTo, routeFrom, resolve, reject) { + 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',