63 lines
2.2 KiB
HTML
63 lines
2.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<!-- Page Title -->
|
|
<div class="text-center mb-4">
|
|
<h1 class="fw-bold">NFC Write Process</h1>
|
|
<p class="text-muted">Follow the steps below to write data to your NFC tag.</p>
|
|
</div>
|
|
|
|
<!-- Instruction Section -->
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-3">
|
|
<i class="bi bi-info-circle text-info me-2"></i> Instructions
|
|
</h5>
|
|
<ul class="list-unstyled">
|
|
<li><i class="bi bi-check-circle-fill text-success me-2"></i> Attach NFC tag to spool so you can reach it with the
|
|
top of your phone.
|
|
</li>
|
|
<li><i class="bi bi-wifi text-primary me-2"></i> Allow NFC usage if prompted.</li>
|
|
<li><i class="bi bi-phone text-secondary me-2"></i> Bring the tag close to your phone when prompted.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Button -->
|
|
<div class="text-center mb-3">
|
|
<button id="write" class="btn btn-lg btn-primary shadow" onclick="writeNFC()">
|
|
<i class="bi bi-nfc me-2"></i> Start Writing NFC Tag
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Message Display -->
|
|
<div id="message" class="alert alert-secondary text-center" role="alert">
|
|
Press "Start Writing NFC Tag" to begin.
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
function writeNFC() {
|
|
// Update user message
|
|
const messageBox = document.getElementById("message");
|
|
messageBox.className = "alert alert-info text-center";
|
|
messageBox.textContent = "Bring NFC Tag closer to the phone...";
|
|
if ('NDEFReader' in window) {
|
|
const ndef = new NDEFReader();
|
|
// Attempt to write the NFC tag
|
|
ndef.write({
|
|
records: [{recordType: "url", data: "{{ BASE_URL }}/spool_info?tag_id={{ myuuid }}"}],
|
|
}).then(() => {
|
|
messageBox.className = "alert alert-success text-center";
|
|
messageBox.textContent = "✅ Message successfully written to the NFC tag!";
|
|
}).catch(error => {
|
|
messageBox.className = "alert alert-danger text-center";
|
|
messageBox.textContent = "❌ Write failed. Please try again: " + error;
|
|
});
|
|
} else {
|
|
messageBox.className = "alert alert-danger text-center";
|
|
messageBox.textContent = "Your browser or device does not support NFC writing. Try Android Phone with Chrome browser.";
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|