#1: Add UI for sending money (TODO: submit transaction to server)
parent
2592d57bf0
commit
4a0b8790dd
@ -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) + "");
|
||||||
|
});
|
@ -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"));
|
||||||
|
});
|
@ -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>
|
Loading…
Reference in New Issue