176 lines
6.7 KiB
HTML
176 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Log Donasi — Smart Donation Box</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<style>
|
|
/* Tombol lihat selengkapnya */
|
|
.btn-lihat-semua {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 12px;
|
|
margin-top: 4px;
|
|
background: none;
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: 0 0 12px 12px;
|
|
color: var(--primary-green);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
font-family: 'Poppins', sans-serif;
|
|
cursor: pointer;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
.btn-lihat-semua:hover {
|
|
background: var(--primary-green-light);
|
|
border-color: var(--primary-green);
|
|
}
|
|
.btn-lihat-semua.expanded {
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
tr.hidden-row { display: none; }
|
|
tr.hidden-row.visible { display: table-row; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script type="module">
|
|
if (localStorage.getItem('isLoggedIn') !== 'true') {
|
|
window.location.href = 'login.html';
|
|
}
|
|
|
|
import { initLayout } from './layout.js';
|
|
import { db, formatRp, formatWaktu, isToday } from './firebase-config.js';
|
|
import { ref, onValue } from "https://www.gstatic.com/firebasejs/12.10.0/firebase-database.js";
|
|
|
|
initLayout('log');
|
|
|
|
document.getElementById('content-area').innerHTML = `
|
|
<div class="card stat-card" style="margin-bottom:24px; max-width:400px;">
|
|
<div class="stat-icon bg-green-light"><i class="fa-regular fa-calendar-check"></i></div>
|
|
<div class="stat-info">
|
|
<p>Donasi Hari Ini</p>
|
|
<h2 id="log-donasi-hari-ini">Rp 0</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fa-solid fa-clock-rotate-left" style="color:var(--primary-green);"></i> Riwayat Deteksi</h3>
|
|
</div>
|
|
<table class="styled-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Waktu</th>
|
|
<th>Nominal Donasi</th>
|
|
<th>Confidence Deteksi</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="table-log-donasi">
|
|
<tr><td colspan="4" style="text-align:center; color:var(--text-muted); padding:32px;">
|
|
<i class="fa-solid fa-spinner fa-spin"></i> Memuat data...
|
|
</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<button class="btn-lihat-semua" id="btn-expand-log" style="display:none;">
|
|
<i class="fa-solid fa-chevron-down" id="expand-icon"></i>
|
|
<span id="expand-text">Lihat Selengkapnya</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
|
|
let isExpanded = false;
|
|
|
|
// ── Firebase: Donasi Log ──
|
|
onValue(ref(db, 'smart_donation_box/donasi_log'), (snap) => {
|
|
const data = snap.val() || {};
|
|
// Filter: buang entry dengan nominal 0
|
|
const keys = Object.keys(data)
|
|
.reverse()
|
|
.filter(key => (data[key].nominal || 0) > 0);
|
|
|
|
let donasiHariIni = 0;
|
|
let html = '';
|
|
|
|
if (keys.length === 0) {
|
|
html = `<tr><td colspan="4" style="text-align:center; color:var(--text-muted); padding:32px;">
|
|
Belum ada data donasi
|
|
</td></tr>`;
|
|
document.getElementById('btn-expand-log').style.display = 'none';
|
|
} else {
|
|
keys.forEach((key, i) => {
|
|
const item = data[key];
|
|
if (isToday(item.timestamp)) donasiHariIni += item.nominal;
|
|
|
|
const confPercent = ((item.confidence || 0) * 100).toFixed(0);
|
|
const barColor = confPercent > 80
|
|
? 'var(--primary-green)'
|
|
: confPercent > 50 ? '#F59E0B' : 'var(--danger-red)';
|
|
|
|
// Baris ke-6 dst disembunyikan awal
|
|
const hiddenClass = i >= 5 ? 'hidden-row' : '';
|
|
|
|
html += `
|
|
<tr class="${hiddenClass}">
|
|
<td style="color:var(--text-muted);">${formatWaktu(item.timestamp)}</td>
|
|
<td style="font-weight:600;">${formatRp(item.nominal)}</td>
|
|
<td>
|
|
<div class="confidence-bar">
|
|
<div class="progress-track">
|
|
<div class="progress-fill" style="width:${confPercent}%; background:${barColor};"></div>
|
|
</div>
|
|
<span style="font-size:12px; font-weight:600;">${confPercent}%</span>
|
|
</div>
|
|
</td>
|
|
<td><span class="badge-valid">Valid</span></td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
// Tampilkan tombol hanya jika lebih dari 5 baris
|
|
const btnExpand = document.getElementById('btn-expand-log');
|
|
if (keys.length > 5) {
|
|
btnExpand.style.display = 'flex';
|
|
} else {
|
|
btnExpand.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
document.getElementById('log-donasi-hari-ini').innerText = formatRp(donasiHariIni);
|
|
document.getElementById('table-log-donasi').innerHTML = html;
|
|
|
|
// Re-attach expand handler setelah render
|
|
attachExpandHandler();
|
|
});
|
|
|
|
function attachExpandHandler() {
|
|
const btn = document.getElementById('btn-expand-log');
|
|
if (!btn) return;
|
|
|
|
btn.onclick = () => {
|
|
isExpanded = !isExpanded;
|
|
const hiddenRows = document.querySelectorAll('#table-log-donasi tr.hidden-row');
|
|
const icon = document.getElementById('expand-icon');
|
|
const text = document.getElementById('expand-text');
|
|
|
|
hiddenRows.forEach(row => {
|
|
row.classList.toggle('visible', isExpanded);
|
|
});
|
|
|
|
icon.className = isExpanded ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down';
|
|
text.textContent = isExpanded ? 'Sembunyikan' : 'Lihat Selengkapnya';
|
|
btn.classList.toggle('expanded', isExpanded);
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |