Browse Source

Add receiving QR code, add support for opening app to send page from QR

master
Skylar Ittner 3 years ago
parent
commit
7dac0994f4
  1. 22
      www/css/styles.css
  2. 1
      www/index.html
  3. 72
      www/js/home.js
  4. 57
      www/js/main.js
  5. 3
      www/package.json
  6. 31
      www/pages/home.html
  7. 4
      www/pages/sendmoney.html
  8. 5
      www/yarn.lock

22
www/css/styles.css

@ -74,4 +74,26 @@ html.md .navbar {
html.md .navbar .link {
color: white;
}
.card-expandable .card-header {
min-height: var(--f7-card-header-min-height);
color: var(--f7-card-header-text-color);
font-size: var(--f7-card-header-font-size);
font-weight: var(--f7-card-header-font-weight);
padding: var(--f7-card-header-padding-vertical) var(--f7-card-header-padding-horizontal);
}
.card-expandable .card-header:after {
display: block !important;
}
#qrcode {
max-width: 100%;
max-height: 12em;
}
.card-expandable #qrcode {
height: 50em;
max-height: 50vh;
}

1
www/index.html

@ -27,6 +27,7 @@
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/framework7/js/framework7.bundle.min.js"></script>
<script src="node_modules/qrcode-generator/qrcode.js"></script>
<script src="settings.js"></script>
<script src="js/api.js"></script>

72
www/js/home.js

@ -8,31 +8,89 @@ var accountBalance = 0.0;
$(".view-main").on("ptr:refresh", ".ptr-content", function () {
loadHomePage(function () {
setTimeout(app.ptr.done, 750);
app.ptr.done();
});
});
$(".view-main").on("card:open", ".card-expandable", function () {
$(".ptr-preloader").addClass("display-none");
$(".card-expandable .navbar").removeClass("display-none");
});
$(".view-main").on("card:close", ".card-expandable", function () {
$(".card-expandable .navbar").addClass("display-none");
});
$(".view-main").on("card:closed", ".card-expandable", function () {
$(".ptr-preloader").removeClass("display-none");
$("#receive-card").removeClass("card-expandable");
});
function loadBalance(callback) {
$("#balance-error-icon").css("display", "none");
$("#balance-loading").css("display", "");
$("#balance-error-icon").addClass("display-none");
$("#balance-loading").removeClass("display-none");
callAPI("checkbalance", {
key: localStorage.getItem("key")
}, function (data) {
accountBalance = data.balance;
$("#balance-amount").text(data.balance);
$("#balance-loading").css("display", "none");
$("#balance-loading").addClass("display-none");
$("#balance-error").text("");
callback(true);
}, function (msg) {
$("#balance-loading").css("display", "none");
$("#balance-loading").addClass("display-none");
$("#balance-error-icon").css("display", "");
$("#balance-error").text(msg);
callback(false);
callback(false, msg);
});
}
function openReceiveCard() {
$("#receive-card").addClass("card-expandable");
app.card.open("#receive-card");
}
function loadQrCode(callback) {
$("#receive-loading").removeClass("display-none");
callAPI("getprofile", {
key: localStorage.getItem("key"),
}, function (data) {
app.preloader.hide();
//if (data.profile.type * 1 > 1) {
var typeNumber = 4;
var errorCorrectionLevel = 'L';
var qr = qrcode(typeNumber, errorCorrectionLevel);
qr.addData('https://app.helpinghelena.org/?sendto=' + data.profile.publicid);
qr.make();
var svg = qr.createSvgTag({
margin: 6,
scalable: true
});
var base64 = window.btoa(svg);
$("#qrcode").attr("src", 'data:image/svg+xml;base64,' + base64);
$("#publicid").text(data.profile.publicid);
$("#receive-loading").addClass("display-none");
callback(true);
//}
}, function (msg) {
$("#receive-loading").addClass("display-none");
callback(false, msg);
});
}
function loadHomePage(callback) {
var done = 0;
var total = 2;
loadBalance(function () {
callback();
done++;
if (done >= total) {
callback();
}
});
loadQrCode(function () {
done++;
if (done >= total) {
callback();
}
});
}

57
www/js/main.js

@ -100,6 +100,22 @@ function refreshKey(callback) {
});
}
function setupKeyRefresh() {
// Check and refresh API key as needed
// Should mitigate key expiration if the app is left open for
// a long time when the key is almost expired
setInterval(function () {
checkKey(function (valid) {
if (!valid) {
refreshKey(function (ok) {
if (!ok) {
router.navigate("/setup/0");
}
});
}
});
}, 1000 * 60 * 5);
}
if (localStorage.getItem("configured") == null) {
// Open the setup page
@ -107,26 +123,33 @@ if (localStorage.getItem("configured") == null) {
} else {
checkKey(function (valid) {
if (valid) {
router.navigate("/home");
// Check and refresh API key as needed
// Should mitigate key expiration if the app is left open for
// a long time when the key is almost expired
setInterval(function () {
checkKey(function (valid) {
if (!valid) {
refreshKey(function (ok) {
if (!ok) {
router.navigate("/setup/0");
}
});
}
});
}, 1000 * 60 * 5);
try {
var url = new URL(window.location.href);
if (typeof url.searchParams.get("sendto") == "string") {
router.navigate("/sendmoney/" + url.searchParams.get("sendto"));
} else {
router.navigate("/home");
}
} catch (ex) {
router.navigate("/home");
}
setupKeyRefresh();
} else {
refreshKey(function (ok) {
if (ok) {
router.navigate("/home");
try {
var url = new URL(window.location.href);
if (typeof url.searchParams.get("sendto") == "string") {
router.navigate("/sendmoney/" + url.searchParams.get("sendto"));
} else {
router.navigate("/home");
}
} catch (ex) {
router.navigate("/home");
}
setupKeyRefresh();
} else {
//router.navigate("/setup/0");
}

3
www/package.json

@ -8,6 +8,7 @@
"dependencies": {
"@fortawesome/fontawesome-free": "^5.6.3",
"framework7": "^4",
"jquery": "^3.3.1"
"jquery": "^3.3.1",
"qrcode-generator": "^1.4.3"
}
}

31
www/pages/home.html

@ -50,6 +50,35 @@
</div>
</div>
</div>
<div class="col-100 tablet-50 desktop-33">
<div class="card elevation-2" id="receive-card" style="margin-top: var(--f7-card-margin-vertical);" onclick="openReceiveCard()">
<div class="card-header card-opened-fade-out">
Receive Money
<div>
<span class="preloader" id="receive-loading"></span>
</div>
</div>
<div class="card-content text-align-center" style="min-height: 16.58em;">
<div class="navbar display-none">
<div class="navbar-inner">
<div class="title">Receive Money</div>
<div class="right">
<a href="#" class="link icon-only card-close">
<i class="material-icons">close</i>
</a>
</div>
</div>
</div>
<image id="qrcode" class="text-align-center card-opened-fade-in" src="" />
<h3 id="publicid" class="text-align-center padding-bottom card-opened-fade-in"></h3>
</div>
</div>
</div>
</div>
<!-- Make sure the content won't be blocked by the floating button -->
@ -58,7 +87,7 @@
</div>
<div class="fab fab-right-bottom">
<a href="/send">
<a href="/sendmoney/0">
<i class="material-icons">add</i>
</a>
</div>

4
www/pages/sendmoney.html

@ -7,7 +7,7 @@
<div class="navbar">
<div class="navbar-inner">
<div class="left">
<a href="#" class="link icon-only back">
<a href="/home" class="link icon-only back">
<i class="icon icon-back"></i>
</a>
</div>
@ -81,7 +81,7 @@
</div>
</div>
</div>
</div>
</div>
</div>

5
www/yarn.lock

@ -34,6 +34,11 @@ path-to-regexp@^3.0.0:
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-3.0.0.tgz#c981a218f3df543fa28696be2f88e0c58d2e012a"
integrity sha512-ZOtfhPttCrqp2M1PBBH4X13XlvnfhIwD7yCLx+GoGoXRPQyxGOTdQMpIzPSPKXAJT/JQrdfFrgdJOyAzvgpQ9A==
qrcode-generator@^1.4.3:
version "1.4.3"
resolved "https://registry.yarnpkg.com/qrcode-generator/-/qrcode-generator-1.4.3.tgz#4876e8f280e65b6c94615f4c19c484f6b964b199"
integrity sha512-++rVRvMRq5BlHfmAafl8a4ppUntzUxCCUTT2t0siUgqKwdnqRzY8IH6f6WSX5dZUhD2Ul5/MIKuTJddflwrGzw==
ssr-window@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ssr-window/-/ssr-window-1.0.1.tgz#30752a6a4666e7767f0b7e6aa6fc2fdbd0d9b369"

Loading…
Cancel
Save