Browse Source

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

master
Skylar Ittner 3 years ago
parent
commit
4a0b8790dd
  1. 36
      www/css/styles.css
  2. 1
      www/index.html
  3. 35
      www/js/input_type_money.js
  4. 5
      www/js/main.js
  5. 56
      www/js/sendmoney.js
  6. 7
      www/pages/home.html
  7. 116
      www/pages/sendmoney.html
  8. 24
      www/routes.js

36
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;
}

1
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>

35
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) + "");
});

5
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

56
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"));
});

7
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">
<i class="fas fa-arrow-up fa-fw"></i> &nbsp;Send Money
<a href="/sendmoney/0" class="link">
<i class="fas fa-arrow-up fa-fw"></i> Send Money
</a>
</div>
</div>

116
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>

24
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',

Loading…
Cancel
Save