btcpayserver/BTCPayServer/Plugins/BoltcardBalance/Views/ScanCard.cshtml
2024-02-14 16:45:03 +09:00

106 lines
3.3 KiB
Text

@{
ViewData["Title"] = "C";
Layout = "/Views/Shared/_LayoutWizard.cshtml";
}
<header class="text-center">
<h1>Consult balance</h1>
<p class="lead text-secondary mt-3" id="explanation">Scan your card for consulting the balance</p>
</header>
<div id="body" class="my-4">
<div id="actions" class="d-flex align-items-center justify-content-center">
<div class="d-flex gap-3 mt-3 mt-sm-0">
<a id="ask-permission-btn" class="btn btn-primary" href="#">Ask permission...</a>
</div>
</div>
<div id="qr" class="d-flex flex-column align-items-center justify-content-center">
<div class="d-inline-flex flex-column" style="width:256px">
<div class="qr-container mb-2">
<vc:qr-code data="@Context.Request.GetCurrentUrl()" />
</div>
</div>
<p class="text-secondary">NFC not supported in this device</p>
</div>
<div id="scanning-btn" class="d-flex align-items-center justify-content-center">
<div class="d-flex gap-3 mt-3 mt-sm-0">
<a id="scanning-btn-link" class="btn btn-primary"></a>
</div>
</div>
</div>
<script>
(function () {
var permissionGranted = false;
var ndef = null;
var abortController = null;
async function askPermissionNFC() {
if (!('NDEFReader' in window)) {
return;
}
try {
permissionGranted = navigator.permissions && (await navigator.permissions.query({ name: 'nfc' })).state === 'granted';
} catch (e) { }
if (permissionGranted) {
setState("WaitingForCard");
ndef = new NDEFReader();
abortController = new AbortController();
abortController.signal.onabort = () => setState("WaitingForCard");
await ndef.scan({ signal: abortController.signal })
ndef.onreading = async ({ message }) => {
const record = message.records[0]
const textDecoder = new TextDecoder('utf-8')
const decoded = textDecoder.decode(record.data)
console.log("Read: " + decoded);
};
}
}
function setState(state)
{
if (state === "NFCNotSupported")
{
document.getElementById("actions").classList.add("d-none");
document.getElementById("qr").classList.remove("d-none");
document.getElementById("scanning-btn").classList.add("d-none");
}
else if (state === "WaitingForPermission")
{
document.getElementById("actions").classList.remove("d-none");
document.getElementById("qr").classList.add("d-none");
document.getElementById("scanning-btn").classList.add("d-none");
}
else if (state === "WaitingForCard")
{
document.getElementById("actions").classList.add("d-none");
document.getElementById("qr").classList.add("d-none");
document.getElementById("scanning-btn").classList.remove("d-none");
document.getElementById("scanning-btn-link").innerText = "Please, present your card..."
}
else if (state == "Scanning")
{
document.getElementById("actions").classList.add("d-none");
document.getElementById("qr").classList.add("d-none");
document.getElementById("scanning-btn").classList.remove("d-none");
document.getElementById("scanning-btn-link").innerText = "Reading..."
}
}
document.addEventListener("DOMContentLoaded", () => {
var nfcSupported = 'NDEFReader' in window;
if (!nfcSupported) {
setState("NFCNotSupported");
}
else {
setState("WaitingForPermission");
askPermissionNFC();
}
delegate('click', "#ask-permission-btn", askPermissionNFC);
});
})();
</script>