#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