#1: Add UI for sending money (TODO: submit transaction to server)
This commit is contained in:
parent
2592d57bf0
commit
4a0b8790dd
@ -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;
|
||||
}
|
||||
@ -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
Normal file
35
www/js/input_type_money.js
Normal file
@ -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) + "");
|
||||
});
|
||||
@ -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
Normal file
56
www/js/sendmoney.js
Normal file
@ -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"));
|
||||
});
|
||||
@ -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> 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> 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
Normal file
116
www/pages/sendmoney.html
Normal file
@ -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> Verified
|
||||
</span>
|
||||
<span id="unverified-badge" class="display-none">
|
||||
<i class="fas fa-question-circle text-color-blue"></i> 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>
|
||||
@ -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…
x
Reference in New Issue
Block a user