klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-09 19:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert nfc input to a web component

Browse Source
This commit is contained in:
Antoine Bartuccio
2024-11-14 12:01:57 +01:00
committed by Bartuccio Antoine
parent 346439076e
commit fce6c3d29c
6 changed files with 353 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/templates/core/widgets/nfc.jinja
View File

@ -1,33 +1,5 @@
<script-once src="{{ statics.js }}" defer></script-once>
<span>
<input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
<!-- NFC icon not available in fontawesome 4.7 -->
<button type="button" id="{{ widget.attrs.id }}_button"><i class="fa-brands fa-nfc-symbol"></i></button>
<nfc-input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %} value="{{ widget.value }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}></nfc-input>
</span>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
let button = document.getElementById("{{ widget.attrs.id }}_button");
button.addEventListener("click", async () => {
let input = document.getElementById("{{ widget.attrs.id }}");
const ndef = new NDEFReader();
await ndef.scan();
ndef.addEventListener("readingerror", () => {
alert("{{ translations.unsupported }}")
});
ndef.addEventListener("reading", ({ message, serialNumber }) => {
input.value = serialNumber.replaceAll(":", "").toUpperCase();
/* Auto submit form */
b = document.createElement("button");
input.appendChild(b)
b.click()
b.remove()
});
});
/* Disable feature if browser is not supported or if not HTTPS */
if (typeof NDEFReader === "undefined") {
button.remove();
}
});
</script>