297 lines
13 KiB
PHP
297 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Verifikasi RFID | Pustaka Nawasena</title>
|
|
<link rel="icon" href="{{ asset('images/kartu.png') }}" type="image/png">
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--lib-navy: #0f172a;
|
|
--lib-gold: #b45309;
|
|
}
|
|
|
|
* { user-select: none; }
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background-color: #0f172a;
|
|
background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url("{{ asset('images/utama.jpg') }}");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* HEADER */
|
|
.top-bar {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
backdrop-filter: blur(15px);
|
|
border-bottom: 4px solid var(--lib-gold);
|
|
padding: 0.5rem 3rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 90px;
|
|
z-index: 100;
|
|
}
|
|
|
|
.logo-frame {
|
|
background: white; border: 2px solid #e2e8f0;
|
|
padding: 6px 16px; border-radius: 16px;
|
|
display: flex; align-items: center; gap: 12px;
|
|
}
|
|
|
|
/* KIOSK CARD */
|
|
.main-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
|
|
|
|
.kiosk-card {
|
|
background: white; width: 100%; max-width: 950px;
|
|
border-radius: 2.5rem; display: grid;
|
|
grid-template-columns: 0.8fr 1.2fr;
|
|
overflow: hidden; box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.visual-side {
|
|
background: var(--lib-navy); padding: 3rem;
|
|
display: flex; flex-direction: column;
|
|
justify-content: center; align-items: center;
|
|
color: white; text-align: center;
|
|
}
|
|
|
|
/* RFID RIPPLE ANIMATION */
|
|
.scanner-container { position: relative; width: 140px; height: 140px; margin-bottom: 2rem; display: flex; align-items: center; justify-content: center; }
|
|
.ripple {
|
|
position: absolute; width: 100%; height: 100%;
|
|
border: 2px solid var(--lib-gold); border-radius: 50%;
|
|
animation: rippleEffect 2s infinite; opacity: 0;
|
|
}
|
|
@keyframes rippleEffect {
|
|
0% { transform: scale(0.6); opacity: 1; }
|
|
100% { transform: scale(1.4); opacity: 0; }
|
|
}
|
|
|
|
.process-side { padding: 4rem; display: flex; flex-direction: column; justify-content: center; background: white; }
|
|
|
|
.status-badge {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 6px 12px; background: #f8fafc;
|
|
border: 1px solid #e2e8f0; border-radius: 100px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.dot-pulse { width: 8px; height: 8px; border-radius: 50%; }
|
|
.online { background: #22c55e; box-shadow: 0 0 8px #22c55e; }
|
|
.offline { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
|
|
|
|
.lib-footer {
|
|
background: rgba(0, 0, 0, 0.9); color: rgba(255,255,255,0.4);
|
|
padding: 0.8rem; text-align: center; font-size: 0.7rem; letter-spacing: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="top-bar">
|
|
<div class="logo-frame">
|
|
<img src="{{ asset('images/kartu.png') }}" class="h-10">
|
|
<div class="w-[1px] h-8 bg-slate-200"></div>
|
|
<img src="{{ asset('images/bakorwil.png') }}" class="h-10">
|
|
<div class="ml-2">
|
|
<h1 class="text-slate-800 font-extrabold text-xl leading-none">NAWASENA</h1>
|
|
<p class="text-orange-700 text-[9px] font-bold uppercase tracking-[0.2em]">Smart Library System</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<div id="clock" class="text-4xl font-black text-slate-800 tracking-tighter">00:00</div>
|
|
<div id="date" class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">Memuat...</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
<div class="kiosk-card">
|
|
<div class="visual-side">
|
|
<div class="scanner-container">
|
|
<div class="ripple"></div>
|
|
<div class="ripple" style="animation-delay: 0.6s"></div>
|
|
<div class="relative z-10 w-24 h-24 bg-gradient-to-br from-orange-500 to-orange-700 rounded-3xl shadow-2xl flex items-center justify-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<h2 class="text-2xl font-black mb-2 uppercase">Verifikasi<br>Identitas</h2>
|
|
<div class="w-12 h-1 bg-orange-500 rounded-full mb-6"></div>
|
|
<p class="text-[11px] text-slate-400 leading-relaxed px-8 italic">
|
|
Tempelkan Kartu Anggota Anda pada Reader untuk menyelesaikan transaksi.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="process-side">
|
|
<div class="status-badge">
|
|
<div id="mqtt-dot" class="dot-pulse offline"></div>
|
|
<span id="mqtt-status-text" class="text-[10px] font-extrabold text-slate-500 uppercase tracking-widest">Broker Disconnected</span>
|
|
</div>
|
|
|
|
<h3 id="main-status-text" class="text-3xl font-extrabold text-slate-800 tracking-tighter leading-tight mb-4">
|
|
SILAKAN SCAN <br><span class="text-orange-600">KARTU ANGGOTA</span>
|
|
</h3>
|
|
|
|
<p id="sub-status-text" class="text-sm text-slate-400 leading-relaxed mb-10 max-w-sm">
|
|
Sistem sedang dalam mode siaga. Pastikan kartu anggota terdaftar di Pustaka Nawasena.
|
|
</p>
|
|
|
|
<div id="success-box" class="hidden transform transition-all duration-500">
|
|
<div class="bg-emerald-50 border border-emerald-200 rounded-2xl p-6 flex items-center gap-4">
|
|
<div class="w-12 h-12 bg-emerald-500 rounded-full flex items-center justify-center text-white text-xl">✓</div>
|
|
<div>
|
|
<p class="text-emerald-700 font-black text-sm uppercase" id="member-name">Memproses...</p>
|
|
<p class="text-emerald-600 text-[11px]">Identitas berhasil diverifikasi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-auto pt-8 border-t border-slate-100 flex justify-between items-center">
|
|
<button onclick="batalTrx()" class="text-[10px] font-bold text-slate-400 hover:text-red-500 transition-colors uppercase tracking-widest">
|
|
← Batalkan
|
|
</button>
|
|
<div class="flex items-center gap-2">
|
|
<span id="device-status" class="text-[9px] font-bold text-slate-300 uppercase">Hardware Offline</span>
|
|
<div id="device-dot" class="w-2 h-2 bg-slate-300 rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="lib-footer">
|
|
Bakorwil III Malang • Smart Terminal Node v4.2.0 • 2026
|
|
</footer>
|
|
|
|
<script>
|
|
// 1. Clock Engine
|
|
function updateDateTime() {
|
|
const now = new Date();
|
|
document.getElementById('clock').textContent = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
|
|
document.getElementById('date').textContent = now.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
|
|
}
|
|
setInterval(updateDateTime, 1000);
|
|
updateDateTime();
|
|
|
|
// 2. MQTT Setup
|
|
const mqttDot = document.getElementById('mqtt-dot');
|
|
const mqttStatusText = document.getElementById('mqtt-status-text');
|
|
const mainStatusText = document.getElementById('main-status-text');
|
|
const subStatusText = document.getElementById('sub-status-text');
|
|
const successBox = document.getElementById("success-box");
|
|
const memberNameText = document.getElementById("member-name");
|
|
|
|
const client = mqtt.connect('ws://' + window.location.hostname + ':9001');
|
|
|
|
client.on('connect', () => {
|
|
mqttDot.classList.replace('offline', 'online');
|
|
mqttStatusText.textContent = "Broker Connected";
|
|
client.subscribe('rfid/scan/member');
|
|
client.subscribe('rfid/device/status');
|
|
|
|
// Set ESP32 ke mode baca member
|
|
client.publish('rfid/mode/set', 'scan_member');
|
|
});
|
|
|
|
client.on('message', async (topic, message) => {
|
|
const payload = message.toString();
|
|
|
|
if (topic === 'rfid/scan/member') {
|
|
handleRfidScan(payload);
|
|
}
|
|
|
|
if (topic === 'rfid/device/status' && payload === 'online') {
|
|
document.getElementById('device-dot').classList.replace('bg-slate-300', 'bg-green-400');
|
|
document.getElementById('device-status').textContent = "ESP32 Online";
|
|
}
|
|
});
|
|
|
|
async function handleRfidScan(uid) {
|
|
// Beri Feedback Visual saat scan terdeteksi
|
|
mainStatusText.innerHTML = "MEMVALIDASI... <br><span class='text-orange-600'>HARAP TUNGGU</span>";
|
|
|
|
try {
|
|
const res = await fetch(`/api/esp/check-member?uid=${uid}`);
|
|
const data = await res.json();
|
|
|
|
if (data.status === "berhasil") {
|
|
mainStatusText.innerHTML = "VERIFIKASI <br><span class='text-emerald-600'>BERHASIL!</span>";
|
|
memberNameText.textContent = data.nama;
|
|
|
|
// Sembunyikan instruksi lama, tampilkan box sukses
|
|
subStatusText.classList.add('hidden');
|
|
successBox.classList.remove('hidden');
|
|
|
|
// --- LOGIKA PENYIMPANAN DATA TRANSAKSI ---
|
|
// Ambil data buku yang disimpan di halaman sebelumnya (Scan Barcode)
|
|
const bukuRaw = localStorage.getItem('trx_buku');
|
|
const bukuData = bukuRaw ? JSON.parse(bukuRaw) : {};
|
|
|
|
// Gabungkan data member + data buku ke key 'trx'
|
|
const finalTrx = {
|
|
// Data dari Database Member (API)
|
|
anggota_id: data.id,
|
|
nama_peminjam: data.nama,
|
|
rfid_uid: uid,
|
|
|
|
// Data dari LocalStorage sebelumnya (Buku)
|
|
biblio_id: bukuData.id || bukuData.biblio_id,
|
|
barcode: bukuData.barcode,
|
|
judul: bukuData.judul,
|
|
penulis: bukuData.penulis,
|
|
|
|
// Metadata Transaksi
|
|
waktu_transaksi: new Date().toLocaleTimeString('id-ID'),
|
|
tanggal: new Date().toISOString().split('T')[0]
|
|
};
|
|
|
|
localStorage.setItem('trx', JSON.stringify(finalTrx));
|
|
|
|
// Beri instruksi ke hardware (suara/led sukses)
|
|
client.publish('rfid/status', 'success');
|
|
|
|
// Redirect ke halaman hasil
|
|
setTimeout(() => {
|
|
window.location.href = "/transaksi/hasil";
|
|
}, 1800);
|
|
|
|
} else {
|
|
mainStatusText.innerHTML = "KARTU <br><span class='text-red-600'>TIDAK TERDAFTAR</span>";
|
|
client.publish('rfid/status', 'error');
|
|
|
|
setTimeout(() => {
|
|
mainStatusText.innerHTML = "SILAKAN SCAN <br><span class='text-orange-600'>KARTU ANGGOTA</span>";
|
|
}, 3000);
|
|
}
|
|
} catch (err) {
|
|
console.error("API Error:", err);
|
|
}
|
|
}
|
|
|
|
function batalTrx() {
|
|
client.publish('rfid/mode/set', 'standby');
|
|
window.location.href = "/transaksi/scan-barcode";
|
|
}
|
|
|
|
client.on('close', () => {
|
|
mqttDot.classList.replace('online', 'offline');
|
|
mqttStatusText.textContent = "Broker Offline";
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|