Initial commit: Retribusi frontend dengan dashboard, event logs, dan settings
This commit is contained in:
mwpn
847
public/dashboard/event.html
Normal file
847
public/dashboard/event.html
Normal file
@@ -0,0 +1,847 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Events - Btekno Retribusi Admin</title>
|
||||
<link rel="stylesheet" href="css/app.css" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
||||
<style>
|
||||
.events-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.events-layout.video-hidden {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.events-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.video-panel {
|
||||
background: #fff;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
}
|
||||
.video-panel-header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.video-panel-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
color: #111827;
|
||||
}
|
||||
.video-toggle {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 0.375rem;
|
||||
background: #fff;
|
||||
color: #374151;
|
||||
cursor: pointer;
|
||||
}
|
||||
.video-toggle:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
background: #000;
|
||||
}
|
||||
.video-container video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
.video-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.events-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.events-table thead {
|
||||
background: #f9fafb;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
.events-table th {
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
}
|
||||
.events-table td {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 0.875rem;
|
||||
color: #111827;
|
||||
}
|
||||
.events-table tbody tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.badge-person {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
.badge-motor {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
.badge-car {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
.loading-overlay {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
}
|
||||
.loading-overlay.visible {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="topbar">
|
||||
<div class="topbar-title">Events</div>
|
||||
<div class="topbar-actions">
|
||||
<a href="dashboard.html" class="topbar-link">Dashboard</a>
|
||||
<a href="settings.html" class="topbar-link">Pengaturan</a>
|
||||
<button id="logout-button" class="topbar-link" style="border-radius:0.5rem;border-color:#d1d5db;">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="container">
|
||||
<section class="filters">
|
||||
<div class="filter-group">
|
||||
<label for="filter-date" class="filter-label">Tanggal</label>
|
||||
<input id="filter-date" type="date" class="filter-control" />
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-location" class="filter-label">Lokasi</label>
|
||||
<select id="filter-location" class="filter-control">
|
||||
<option value="">Semua Lokasi</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="filter-gate" class="filter-label">Gate</label>
|
||||
<select id="filter-gate" class="filter-control">
|
||||
<option value="">Semua Gate</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="events-error" class="error-text" style="margin-bottom:0.5rem; display:none;"></div>
|
||||
|
||||
<div id="events-layout" class="events-layout">
|
||||
<div>
|
||||
<article class="panel">
|
||||
<div class="panel-header">
|
||||
<h2 class="panel-title">Daftar Events</h2>
|
||||
</div>
|
||||
<div class="panel-body" style="position:relative;">
|
||||
<div id="events-loading" class="loading-overlay">
|
||||
<div>Memuat data...</div>
|
||||
</div>
|
||||
<div style="overflow-x:auto;">
|
||||
<table class="events-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Waktu</th>
|
||||
<th>Lokasi</th>
|
||||
<th>Gate</th>
|
||||
<th>Kategori</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Pendapatan</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="events-tbody">
|
||||
<tr>
|
||||
<td colspan="6" style="text-align:center;padding:2rem;color:#6b7280;">
|
||||
Memuat data...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div id="video-panel-container" style="display:none;">
|
||||
<article class="video-panel">
|
||||
<div class="video-panel-header">
|
||||
<div id="video-panel-title" class="video-panel-title">•</div>
|
||||
<button id="video-toggle" class="video-toggle">Hidupkan</button>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<video id="video-player" controls style="display:none;"></video>
|
||||
<div id="video-placeholder" class="video-placeholder">
|
||||
Kamera tidak aktif
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { Auth } from './js/auth.js';
|
||||
import { apiGetLocations, apiGetGates, apiGetEntryEvents, API_CONFIG } from './js/api.js';
|
||||
import './js/realtime.js';
|
||||
|
||||
// Helper untuk build query string
|
||||
function buildQuery(params = {}) {
|
||||
const search = new URLSearchParams();
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value !== undefined && value !== null && value !== '') {
|
||||
search.append(key, value);
|
||||
}
|
||||
});
|
||||
const qs = search.toString();
|
||||
return qs ? `?${qs}` : '';
|
||||
}
|
||||
|
||||
// Check auth
|
||||
if (!Auth.isAuthenticated()) {
|
||||
window.location.href = '../index.php';
|
||||
}
|
||||
|
||||
// Logout handler
|
||||
document.getElementById('logout-button')?.addEventListener('click', () => {
|
||||
Auth.logout();
|
||||
});
|
||||
|
||||
// Video HLS setup - menggunakan URL kamera dari database
|
||||
let gatesCache = {}; // Cache untuk gates dengan camera URL
|
||||
let locationsCache = {}; // Cache untuk locations
|
||||
|
||||
let hls = null;
|
||||
let isVideoPlaying = false;
|
||||
let currentVideoUrl = null;
|
||||
|
||||
const videoPanelContainer = document.getElementById('video-panel-container');
|
||||
const videoPanelTitle = document.getElementById('video-panel-title');
|
||||
const videoEl = document.getElementById('video-player');
|
||||
const placeholderEl = document.getElementById('video-placeholder');
|
||||
const toggleBtn = document.getElementById('video-toggle');
|
||||
|
||||
// Load gates untuk mendapatkan camera URL dari database
|
||||
async function loadGatesForCamera() {
|
||||
try {
|
||||
const response = await apiGetGates(null, { limit: 1000 });
|
||||
let gates = [];
|
||||
if (Array.isArray(response)) {
|
||||
gates = response;
|
||||
} else if (response && Array.isArray(response.data)) {
|
||||
gates = response.data;
|
||||
}
|
||||
|
||||
// Build cache: location_code -> { url, name, gate_name }
|
||||
gatesCache = {};
|
||||
gates.forEach(gate => {
|
||||
const locationCode = gate.location_code || '';
|
||||
const camera = gate.camera || null;
|
||||
|
||||
// Hanya simpan gate yang punya camera URL
|
||||
if (camera && camera.trim() !== '') {
|
||||
// Jika sudah ada, gunakan yang pertama (atau bisa dipilih gate tertentu)
|
||||
if (!gatesCache[locationCode]) {
|
||||
const locationName = locationsCache[locationCode]?.name || locationCode;
|
||||
gatesCache[locationCode] = {
|
||||
url: camera.trim(),
|
||||
name: locationName,
|
||||
gate_name: gate.name || gate.gate_code || '',
|
||||
location_code: locationCode
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('[Video] Gates dengan camera loaded:', Object.keys(gatesCache).length);
|
||||
} catch (err) {
|
||||
console.error('[Video] Error loading gates:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Load locations untuk mendapatkan nama lokasi
|
||||
async function loadLocationsForCamera() {
|
||||
try {
|
||||
const response = await apiGetLocations({ limit: 1000 });
|
||||
let locations = [];
|
||||
if (Array.isArray(response)) {
|
||||
locations = response;
|
||||
} else if (response && Array.isArray(response.data)) {
|
||||
locations = response.data;
|
||||
}
|
||||
|
||||
// Build cache: location_code -> { name }
|
||||
locationsCache = {};
|
||||
locations.forEach(loc => {
|
||||
const code = loc.code || loc.location_code || '';
|
||||
locationsCache[code] = {
|
||||
name: loc.name || loc.label || code
|
||||
};
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('[Video] Error loading locations:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function getCameraForLocation(locationCode) {
|
||||
if (!locationCode) return null;
|
||||
return gatesCache[locationCode] || null;
|
||||
}
|
||||
|
||||
function showVideoPanel(locationCode) {
|
||||
const eventsLayout = document.getElementById('events-layout');
|
||||
const camera = getCameraForLocation(locationCode);
|
||||
if (camera && camera.url) {
|
||||
videoPanelContainer.style.display = 'block';
|
||||
const displayName = camera.gate_name ? `${camera.name} - ${camera.gate_name}` : camera.name;
|
||||
videoPanelTitle.textContent = displayName;
|
||||
currentVideoUrl = camera.url;
|
||||
if (eventsLayout) eventsLayout.classList.remove('video-hidden');
|
||||
// Auto-stop video kalau lokasi berubah
|
||||
if (isVideoPlaying) {
|
||||
stopVideo();
|
||||
}
|
||||
} else {
|
||||
videoPanelContainer.style.display = 'none';
|
||||
if (eventsLayout) eventsLayout.classList.add('video-hidden');
|
||||
if (isVideoPlaying) {
|
||||
stopVideo();
|
||||
}
|
||||
currentVideoUrl = null;
|
||||
}
|
||||
}
|
||||
|
||||
function initVideo() {
|
||||
if (!currentVideoUrl) {
|
||||
console.warn('[Video] Tidak ada URL video untuk lokasi ini');
|
||||
return;
|
||||
}
|
||||
|
||||
if (Hls.isSupported()) {
|
||||
hls = new Hls({
|
||||
enableWorker: true,
|
||||
lowLatencyMode: true,
|
||||
backBufferLength: 90
|
||||
});
|
||||
hls.loadSource(currentVideoUrl);
|
||||
hls.attachMedia(videoEl);
|
||||
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
console.log('[Video] HLS manifest parsed');
|
||||
});
|
||||
|
||||
hls.on(Hls.Events.ERROR, (event, data) => {
|
||||
console.error('[Video] HLS error:', data);
|
||||
if (data.fatal) {
|
||||
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
|
||||
console.log('[Video] Network error, retrying...');
|
||||
hls.startLoad();
|
||||
} else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
|
||||
console.log('[Video] Media error, recovering...');
|
||||
hls.recoverMediaError();
|
||||
} else {
|
||||
console.error('[Video] Fatal error, destroying HLS');
|
||||
hls.destroy();
|
||||
hls = null;
|
||||
stopVideo();
|
||||
}
|
||||
}
|
||||
});
|
||||
} else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
|
||||
// Native HLS support (Safari)
|
||||
videoEl.src = currentVideoUrl;
|
||||
} else {
|
||||
console.error('[Video] HLS tidak didukung di browser ini');
|
||||
}
|
||||
}
|
||||
|
||||
function startVideo() {
|
||||
if (!currentVideoUrl) {
|
||||
console.warn('[Video] Tidak ada URL video untuk lokasi ini');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hls && Hls.isSupported()) {
|
||||
initVideo();
|
||||
}
|
||||
videoEl.style.display = 'block';
|
||||
placeholderEl.style.display = 'none';
|
||||
toggleBtn.textContent = 'Matikan';
|
||||
isVideoPlaying = true;
|
||||
|
||||
if (videoEl.src || (hls && hls.media)) {
|
||||
videoEl.play().catch(e => console.error('[Video] Play error:', e));
|
||||
}
|
||||
}
|
||||
|
||||
function stopVideo() {
|
||||
if (hls) {
|
||||
hls.destroy();
|
||||
hls = null;
|
||||
}
|
||||
videoEl.pause();
|
||||
videoEl.src = '';
|
||||
videoEl.style.display = 'none';
|
||||
placeholderEl.style.display = 'flex';
|
||||
toggleBtn.textContent = 'Hidupkan';
|
||||
isVideoPlaying = false;
|
||||
}
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
if (isVideoPlaying) {
|
||||
stopVideo();
|
||||
} else {
|
||||
startVideo();
|
||||
}
|
||||
});
|
||||
|
||||
// Events table logic
|
||||
const state = {
|
||||
date: new Date().toISOString().split('T')[0],
|
||||
locationCode: '',
|
||||
gateCode: '',
|
||||
category: '',
|
||||
page: 1,
|
||||
limit: 20,
|
||||
total: 0,
|
||||
totalPages: 1
|
||||
};
|
||||
|
||||
// Tariff cache: map dari location_code|gate_code|category ke price
|
||||
let tariffsMap = {};
|
||||
|
||||
async function loadTariffs() {
|
||||
try {
|
||||
const url = `${API_CONFIG.BASE_URL}/retribusi/v1/frontend/tariffs?limit=1000`;
|
||||
const token = localStorage.getItem('token') || '';
|
||||
console.log('[Events] Loading tariffs from:', url);
|
||||
|
||||
const res = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-API-KEY': API_CONFIG.API_KEY,
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
console.warn('[Events] Failed to load tariffs:', res.status, errorText);
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await res.json();
|
||||
console.log('[Events] Tariffs API response:', response);
|
||||
|
||||
let tariffs = [];
|
||||
|
||||
if (response && response.success && Array.isArray(response.data)) {
|
||||
tariffs = response.data;
|
||||
} else if (Array.isArray(response)) {
|
||||
tariffs = response;
|
||||
} else if (response && Array.isArray(response.data)) {
|
||||
tariffs = response.data;
|
||||
}
|
||||
|
||||
// Build map: location_code|gate_code|category -> price
|
||||
tariffsMap = {};
|
||||
tariffs.forEach(tariff => {
|
||||
// Handle berbagai format field name
|
||||
const locationCode = tariff.location_code || tariff.locationCode || '';
|
||||
const gateCode = tariff.gate_code || tariff.gateCode || '';
|
||||
const category = tariff.category || '';
|
||||
const price = tariff.price || 0;
|
||||
|
||||
if (locationCode && gateCode && category) {
|
||||
const key = `${locationCode}|${gateCode}|${category}`;
|
||||
tariffsMap[key] = parseInt(price, 10);
|
||||
console.log('[Events] Tariff mapped:', key, '->', tariffsMap[key], 'from tariff:', tariff);
|
||||
} else {
|
||||
console.warn('[Events] Invalid tariff data:', tariff);
|
||||
}
|
||||
});
|
||||
|
||||
console.log('[Events] Loaded tariffs:', Object.keys(tariffsMap).length, 'tariffs');
|
||||
console.log('[Events] Tariffs map keys:', Object.keys(tariffsMap));
|
||||
console.log('[Events] Sample tariffs map:', Object.fromEntries(Object.entries(tariffsMap).slice(0, 3)));
|
||||
} catch (err) {
|
||||
console.error('[Events] Error loading tariffs:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function getTariffPrice(locationCode, gateCode, category) {
|
||||
if (!locationCode || !gateCode || !category) {
|
||||
return 0;
|
||||
}
|
||||
const key = `${locationCode}|${gateCode}|${category}`;
|
||||
const price = tariffsMap[key] || 0;
|
||||
return price;
|
||||
}
|
||||
|
||||
async function loadLocations() {
|
||||
const select = document.getElementById('filter-location');
|
||||
if (!select) return;
|
||||
select.innerHTML = '<option value="">Semua Lokasi</option>';
|
||||
|
||||
try {
|
||||
const data = await apiGetLocations({ limit: 100 }); // Ambil semua lokasi
|
||||
// Handle pagination response: { data: [...], total, page, limit }
|
||||
// atau langsung array: [...]
|
||||
let items = [];
|
||||
if (Array.isArray(data)) {
|
||||
items = data;
|
||||
} else if (data && Array.isArray(data.data)) {
|
||||
items = data.data;
|
||||
}
|
||||
|
||||
items.forEach(loc => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = loc.code || loc.location_code || '';
|
||||
opt.textContent = loc.name || loc.label || opt.value;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('loadLocations error', err);
|
||||
}
|
||||
}
|
||||
|
||||
async function loadGates() {
|
||||
const select = document.getElementById('filter-gate');
|
||||
if (!select) return;
|
||||
select.innerHTML = '<option value="">Semua Gate</option>';
|
||||
|
||||
if (!state.locationCode) return;
|
||||
|
||||
try {
|
||||
const data = await apiGetGates(state.locationCode);
|
||||
const items = Array.isArray(data) ? data : (Array.isArray(data.data) ? data.data : []);
|
||||
items.forEach(g => {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = g.code || g.gate_code || '';
|
||||
opt.textContent = g.name || g.label || opt.value;
|
||||
select.appendChild(opt);
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('loadGates error', err);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDateTime(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleString('id-ID', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function formatCurrency(value) {
|
||||
return 'Rp ' + new Intl.NumberFormat('id-ID').format(value || 0);
|
||||
}
|
||||
|
||||
function getCategoryBadge(category) {
|
||||
const map = {
|
||||
'person_walk': { text: 'Orang', class: 'badge-person' },
|
||||
'motor': { text: 'Motor', class: 'badge-motor' },
|
||||
'car': { text: 'Mobil', class: 'badge-car' }
|
||||
};
|
||||
const item = map[category] || { text: category, class: '' };
|
||||
return `<span class="badge ${item.class}">${item.text}</span>`;
|
||||
}
|
||||
|
||||
function renderEvents(events) {
|
||||
const tbody = document.getElementById('events-tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
if (!events || events.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:2rem;color:#6b7280;">Tidak ada data</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = events.map(event => {
|
||||
// Mapping untuk struktur response dari entry_events table
|
||||
// Fields: id, location_code, gate_code, category, event_time, source_ip, created_at
|
||||
const timestamp = event.event_time || event.created_at || event.timestamp || event.date || event.time || '-';
|
||||
const location = event.location_code || event.location || '-';
|
||||
const gate = event.gate_code || event.gate || '-';
|
||||
const category = event.category || event.type || '-';
|
||||
|
||||
// Entry events adalah individual events, jadi count = 1
|
||||
const count = 1; // Setiap row adalah 1 event
|
||||
|
||||
// Hitung amount dari tariff price
|
||||
const tariffPrice = getTariffPrice(location, gate, category);
|
||||
const amount = tariffPrice; // 1 event * price = price
|
||||
|
||||
// Debug: log jika amount masih 0
|
||||
if (amount === 0 && location !== '-' && gate !== '-' && category !== '-') {
|
||||
const key = `${location}|${gate}|${category}`;
|
||||
console.warn('[Events] Zero amount for:', { location, gate, category, key, tariffsMapKeys: Object.keys(tariffsMap) });
|
||||
}
|
||||
|
||||
return `
|
||||
<tr>
|
||||
<td>${formatDateTime(timestamp)}</td>
|
||||
<td>${location}</td>
|
||||
<td>${gate}</td>
|
||||
<td>${getCategoryBadge(category)}</td>
|
||||
<td>${count}</td>
|
||||
<td>${formatCurrency(amount)}</td>
|
||||
</tr>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
async function loadEvents() {
|
||||
const loadingEl = document.getElementById('events-loading');
|
||||
const errorEl = document.getElementById('events-error');
|
||||
const tbody = document.getElementById('events-tbody');
|
||||
|
||||
if (loadingEl) loadingEl.classList.add('visible');
|
||||
if (errorEl) {
|
||||
errorEl.style.display = 'none';
|
||||
errorEl.textContent = '';
|
||||
}
|
||||
if (tbody) {
|
||||
tbody.innerHTML = '<tr><td colspan="6" style="text-align:center;padding:2rem;color:#6b7280;">Memuat data...</td></tr>';
|
||||
}
|
||||
|
||||
try {
|
||||
// Sesuai spec: start_date, end_date (bukan date saja)
|
||||
// Jika state.date ada, gunakan sebagai start_date dan end_date
|
||||
const params = {
|
||||
page: state.page || 1,
|
||||
limit: state.limit || 20,
|
||||
location_code: state.locationCode || undefined,
|
||||
gate_code: state.gateCode || undefined,
|
||||
category: state.category || undefined
|
||||
};
|
||||
|
||||
// Jika ada date filter, set start_date dan end_date
|
||||
if (state.date) {
|
||||
params.start_date = state.date;
|
||||
params.end_date = state.date; // Same day
|
||||
}
|
||||
|
||||
// Hapus undefined values
|
||||
Object.keys(params).forEach(key => {
|
||||
if (params[key] === undefined || params[key] === '') {
|
||||
delete params[key];
|
||||
}
|
||||
});
|
||||
|
||||
// Request langsung untuk dapat full response dengan meta
|
||||
const url = `${API_CONFIG.BASE_URL}/retribusi/v1/frontend/entry-events${buildQuery(params)}`;
|
||||
const token = localStorage.getItem('token') || '';
|
||||
|
||||
console.log('[Events] Requesting:', url);
|
||||
console.log('[Events] Params:', params);
|
||||
|
||||
const res = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-API-KEY': API_CONFIG.API_KEY,
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {})
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errorText = await res.text();
|
||||
console.error('[Events] API error:', res.status, errorText);
|
||||
throw new Error(`HTTP ${res.status}: ${errorText}`);
|
||||
}
|
||||
|
||||
const rawResponse = await res.json();
|
||||
console.log('[Events] Raw API response:', rawResponse);
|
||||
|
||||
// Handle response format: { success: true, data: [...], meta: { page, limit, total, pages } }
|
||||
let events = [];
|
||||
let total = 0;
|
||||
let currentPage = 1;
|
||||
let totalPages = 1;
|
||||
|
||||
if (rawResponse && rawResponse.success && Array.isArray(rawResponse.data)) {
|
||||
// Format dengan success dan meta
|
||||
events = rawResponse.data;
|
||||
if (rawResponse.meta) {
|
||||
total = rawResponse.meta.total || events.length;
|
||||
currentPage = rawResponse.meta.page || 1;
|
||||
totalPages = rawResponse.meta.pages || Math.ceil(total / (rawResponse.meta.limit || 20));
|
||||
}
|
||||
} else if (Array.isArray(rawResponse)) {
|
||||
// Langsung array
|
||||
events = rawResponse;
|
||||
total = events.length;
|
||||
} else if (rawResponse && Array.isArray(rawResponse.data)) {
|
||||
// Format tanpa success
|
||||
events = rawResponse.data;
|
||||
total = rawResponse.total || events.length;
|
||||
currentPage = rawResponse.page || 1;
|
||||
totalPages = rawResponse.total_pages || rawResponse.pages || Math.ceil(total / (rawResponse.limit || 20));
|
||||
} else {
|
||||
console.warn('[Events] Unexpected response format:', rawResponse);
|
||||
events = [];
|
||||
}
|
||||
|
||||
console.log('[Events] Parsed events:', events.length, 'items', { total, currentPage, totalPages });
|
||||
eventsCache = events;
|
||||
state.page = currentPage;
|
||||
state.total = total;
|
||||
state.totalPages = totalPages;
|
||||
renderEvents(events);
|
||||
} catch (err) {
|
||||
console.error('loadEvents error', err);
|
||||
|
||||
if (errorEl) {
|
||||
errorEl.textContent = err.message || 'Gagal memuat data events';
|
||||
errorEl.style.display = 'block';
|
||||
}
|
||||
renderEvents([]);
|
||||
} finally {
|
||||
if (loadingEl) loadingEl.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
|
||||
function setupFilters() {
|
||||
const dateInput = document.getElementById('filter-date');
|
||||
if (dateInput) {
|
||||
dateInput.value = state.date;
|
||||
dateInput.addEventListener('change', () => {
|
||||
state.date = dateInput.value || state.date;
|
||||
state.page = 1; // Reset to first page
|
||||
loadEvents();
|
||||
});
|
||||
}
|
||||
|
||||
const locationSelect = document.getElementById('filter-location');
|
||||
if (locationSelect) {
|
||||
locationSelect.addEventListener('change', async () => {
|
||||
state.locationCode = locationSelect.value;
|
||||
state.gateCode = '';
|
||||
state.page = 1; // Reset to first page
|
||||
const gateSelect = document.getElementById('filter-gate');
|
||||
if (gateSelect) gateSelect.value = '';
|
||||
|
||||
// Reload gates untuk update camera cache
|
||||
await loadGates();
|
||||
await loadGatesForCamera(); // Reload camera URLs
|
||||
|
||||
// Show/hide video panel berdasarkan lokasi
|
||||
showVideoPanel(state.locationCode);
|
||||
|
||||
loadEvents();
|
||||
});
|
||||
}
|
||||
|
||||
const gateSelect = document.getElementById('filter-gate');
|
||||
if (gateSelect) {
|
||||
gateSelect.addEventListener('change', () => {
|
||||
state.gateCode = gateSelect.value;
|
||||
state.page = 1; // Reset to first page
|
||||
loadEvents();
|
||||
});
|
||||
}
|
||||
|
||||
// Category filter (jika ada)
|
||||
const categorySelect = document.getElementById('filter-category');
|
||||
if (categorySelect) {
|
||||
categorySelect.addEventListener('change', () => {
|
||||
state.category = categorySelect.value;
|
||||
state.page = 1; // Reset to first page
|
||||
loadEvents();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Listen to realtime events - update summary cards dengan data snapshot
|
||||
let eventsCache = [];
|
||||
let lastSnapshotTime = null;
|
||||
|
||||
function formatNumber(value) {
|
||||
return new Intl.NumberFormat('id-ID').format(value || 0);
|
||||
}
|
||||
|
||||
// formatCurrency sudah didefinisikan di atas, tidak perlu duplikat
|
||||
|
||||
window.addEventListener('realtime:snapshot', (e) => {
|
||||
console.log('[Events] Realtime snapshot:', e.detail);
|
||||
const snapshot = e.detail;
|
||||
lastSnapshotTime = new Date();
|
||||
|
||||
// Snapshot hanya untuk logging, tidak perlu render ke UI
|
||||
// Tabel events akan di-update dari endpoint events yang benar
|
||||
});
|
||||
|
||||
// Update UI untuk show bahwa realtime aktif
|
||||
function updateRealtimeStatus() {
|
||||
const errorEl = document.getElementById('events-error');
|
||||
if (lastSnapshotTime) {
|
||||
const secondsAgo = Math.floor((new Date() - lastSnapshotTime) / 1000);
|
||||
// Status realtime hanya di console, tidak perlu tampil di UI
|
||||
// Supaya UI tetap fokus ke tabel events
|
||||
}
|
||||
}
|
||||
|
||||
// Update status setiap detik
|
||||
setInterval(updateRealtimeStatus, 1000);
|
||||
|
||||
// Init
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setupFilters();
|
||||
await loadLocations();
|
||||
await loadGates();
|
||||
await loadTariffs(); // Load tariffs untuk hitung amount
|
||||
|
||||
// Load locations dan gates untuk camera URL dari database
|
||||
await loadLocationsForCamera();
|
||||
await loadGatesForCamera();
|
||||
|
||||
// Cek lokasi awal untuk show/hide video
|
||||
showVideoPanel(state.locationCode);
|
||||
|
||||
await loadEvents();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user