| <!DOCTYPE html> |
| <html lang="id"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Anichin Scraper — Dashboard</title> |
| <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;700&display=swap" rel="stylesheet" /> |
| <style> |
| |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| :root { |
| --bg: #0a0a0f; |
| --surface: #111118; |
| --surface2: #16161f; |
| --border: #1e1e2e; |
| --accent: #e64040; |
| --accent2: #ff7043; |
| --green: #4ade80; |
| --yellow: #fbbf24; |
| --text: #e2e2ef; |
| --muted: #6b6b8a; |
| --font-display: 'Bebas Neue', sans-serif; |
| --font-mono: 'DM Mono', monospace; |
| --font-body: 'DM Sans', sans-serif; |
| } |
| |
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: var(--font-body); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| inset: 0; |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); |
| pointer-events: none; |
| z-index: 9999; |
| opacity: 0.4; |
| } |
| |
| |
| .sidebar { |
| position: fixed; |
| left: 0; top: 0; bottom: 0; |
| width: 240px; |
| background: var(--surface); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| padding: 0; |
| z-index: 100; |
| } |
| |
| .sidebar-logo { |
| padding: 28px 24px 20px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| .sidebar-logo h1 { |
| font-family: var(--font-display); |
| font-size: 28px; |
| letter-spacing: 2px; |
| color: var(--accent); |
| line-height: 1; |
| } |
| |
| .sidebar-logo p { |
| font-size: 10px; |
| color: var(--muted); |
| font-family: var(--font-mono); |
| margin-top: 4px; |
| letter-spacing: 1px; |
| text-transform: uppercase; |
| } |
| |
| .status-pill { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| margin-top: 12px; |
| padding: 4px 10px; |
| border-radius: 20px; |
| font-family: var(--font-mono); |
| font-size: 10px; |
| background: #1a1a2a; |
| border: 1px solid var(--border); |
| } |
| |
| .status-dot { |
| width: 6px; height: 6px; |
| border-radius: 50%; |
| background: var(--green); |
| } |
| |
| .status-dot.running { |
| background: var(--yellow); |
| animation: pulse 1s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.3; } |
| } |
| |
| .nav { |
| flex: 1; |
| padding: 16px 12px; |
| } |
| |
| .nav-item { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 10px 12px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-size: 13px; |
| font-weight: 500; |
| color: var(--muted); |
| transition: all 0.15s; |
| margin-bottom: 2px; |
| } |
| |
| .nav-item:hover { background: var(--surface2); color: var(--text); } |
| .nav-item.active { background: rgba(230, 64, 64, 0.1); color: var(--accent); border-left: 2px solid var(--accent); } |
| |
| .nav-icon { font-size: 16px; width: 20px; text-align: center; } |
| |
| |
| .main { |
| margin-left: 240px; |
| min-height: 100vh; |
| padding: 32px; |
| } |
| |
| |
| .page-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| margin-bottom: 32px; |
| } |
| |
| .page-title { |
| font-family: var(--font-display); |
| font-size: 48px; |
| letter-spacing: 3px; |
| line-height: 1; |
| background: linear-gradient(135deg, var(--text) 0%, var(--muted) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| } |
| |
| .page-sub { |
| font-family: var(--font-mono); |
| font-size: 11px; |
| color: var(--muted); |
| margin-top: 6px; |
| letter-spacing: 1px; |
| } |
| |
| |
| .stats-grid { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 16px; |
| margin-bottom: 28px; |
| } |
| |
| .stat-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| padding: 20px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .stat-card::after { |
| content: ''; |
| position: absolute; |
| top: 0; left: 0; right: 0; |
| height: 2px; |
| background: linear-gradient(90deg, var(--accent), var(--accent2)); |
| } |
| |
| .stat-label { |
| font-family: var(--font-mono); |
| font-size: 10px; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .stat-value { |
| font-family: var(--font-display); |
| font-size: 38px; |
| letter-spacing: 2px; |
| margin-top: 8px; |
| color: var(--text); |
| } |
| |
| |
| .panel { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| margin-bottom: 20px; |
| } |
| |
| .panel-header { |
| padding: 16px 20px; |
| border-bottom: 1px solid var(--border); |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
| |
| .panel-title { |
| font-family: var(--font-mono); |
| font-size: 12px; |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| } |
| |
| .panel-body { padding: 20px; } |
| |
| |
| .controls-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| } |
| |
| .control-card { |
| background: var(--surface2); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 20px; |
| } |
| |
| .control-card h3 { |
| font-size: 14px; |
| font-weight: 600; |
| margin-bottom: 6px; |
| } |
| |
| .control-card p { |
| font-size: 12px; |
| color: var(--muted); |
| margin-bottom: 16px; |
| line-height: 1.5; |
| } |
| |
| .input-row { |
| display: flex; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
| |
| input[type=text], input[type=number], input[type=url] { |
| flex: 1; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| padding: 8px 12px; |
| color: var(--text); |
| font-family: var(--font-mono); |
| font-size: 12px; |
| outline: none; |
| transition: border 0.2s; |
| } |
| |
| input:focus { border-color: var(--accent); } |
| |
| |
| .btn { |
| padding: 9px 18px; |
| border-radius: 6px; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| font-weight: 500; |
| cursor: pointer; |
| border: none; |
| transition: all 0.15s; |
| white-space: nowrap; |
| } |
| |
| .btn-primary { |
| background: var(--accent); |
| color: white; |
| } |
| |
| .btn-primary:hover { background: #c0392b; } |
| |
| .btn-secondary { |
| background: transparent; |
| border: 1px solid var(--border); |
| color: var(--muted); |
| } |
| |
| .btn-secondary:hover { border-color: var(--text); color: var(--text); } |
| |
| .btn-green { |
| background: rgba(74, 222, 128, 0.1); |
| border: 1px solid rgba(74, 222, 128, 0.3); |
| color: var(--green); |
| } |
| |
| .btn-green:hover { background: rgba(74, 222, 128, 0.2); } |
| |
| .btn:disabled { opacity: 0.4; cursor: not-allowed; } |
| |
| |
| .terminal { |
| background: #060609; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| padding: 16px; |
| height: 220px; |
| overflow-y: auto; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| line-height: 1.8; |
| } |
| |
| .terminal::-webkit-scrollbar { width: 4px; } |
| .terminal::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } |
| |
| .log-entry { color: var(--muted); } |
| .log-entry.info { color: var(--text); } |
| .log-entry.success { color: var(--green); } |
| .log-entry.error { color: var(--accent); } |
| .log-entry.warn { color: var(--yellow); } |
| |
| .log-time { |
| color: var(--border); |
| margin-right: 8px; |
| } |
| |
| |
| .anime-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); |
| gap: 14px; |
| } |
| |
| .anime-card { |
| background: var(--surface2); |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| overflow: hidden; |
| transition: transform 0.15s, border-color 0.15s; |
| cursor: pointer; |
| } |
| |
| .anime-card:hover { |
| transform: translateY(-2px); |
| border-color: var(--accent); |
| } |
| |
| .anime-thumb { |
| width: 100%; |
| aspect-ratio: 2/3; |
| object-fit: cover; |
| background: var(--border); |
| display: block; |
| } |
| |
| .anime-thumb-placeholder { |
| width: 100%; |
| aspect-ratio: 2/3; |
| background: linear-gradient(135deg, #1a1a2e, #16213e); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 32px; |
| } |
| |
| .anime-info { |
| padding: 10px; |
| } |
| |
| .anime-title { |
| font-size: 11px; |
| font-weight: 600; |
| line-height: 1.3; |
| margin-bottom: 4px; |
| display: -webkit-box; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| overflow: hidden; |
| } |
| |
| .anime-meta { |
| display: flex; |
| gap: 4px; |
| } |
| |
| .badge { |
| font-family: var(--font-mono); |
| font-size: 9px; |
| padding: 2px 5px; |
| border-radius: 3px; |
| background: var(--border); |
| color: var(--muted); |
| } |
| |
| .badge.ongoing { background: rgba(74, 222, 128, 0.1); color: var(--green); } |
| .badge.completed { background: rgba(96, 165, 250, 0.1); color: #60a5fa; } |
| |
| |
| .progress-wrap { |
| background: var(--border); |
| border-radius: 99px; |
| height: 4px; |
| margin-top: 12px; |
| overflow: hidden; |
| } |
| |
| .progress-bar { |
| height: 100%; |
| background: linear-gradient(90deg, var(--accent), var(--accent2)); |
| border-radius: 99px; |
| transition: width 0.5s ease; |
| } |
| |
| |
| .tabs { |
| display: flex; |
| gap: 2px; |
| margin-bottom: 20px; |
| background: var(--surface2); |
| border-radius: 8px; |
| padding: 4px; |
| width: fit-content; |
| } |
| |
| .tab { |
| padding: 7px 16px; |
| border-radius: 6px; |
| font-family: var(--font-mono); |
| font-size: 11px; |
| cursor: pointer; |
| color: var(--muted); |
| transition: all 0.15s; |
| } |
| |
| .tab.active { |
| background: var(--surface); |
| color: var(--text); |
| } |
| |
| |
| .search-bar { |
| display: flex; |
| gap: 10px; |
| margin-bottom: 20px; |
| } |
| |
| |
| .view { display: none; } |
| .view.active { display: block; } |
| |
| |
| #toast { |
| position: fixed; |
| bottom: 24px; |
| right: 24px; |
| padding: 12px 20px; |
| border-radius: 8px; |
| font-family: var(--font-mono); |
| font-size: 12px; |
| background: var(--surface); |
| border: 1px solid var(--border); |
| color: var(--text); |
| transform: translateY(80px); |
| opacity: 0; |
| transition: all 0.3s; |
| z-index: 9999; |
| } |
| |
| #toast.show { transform: translateY(0); opacity: 1; } |
| #toast.success { border-color: var(--green); color: var(--green); } |
| #toast.error { border-color: var(--accent); color: var(--accent); } |
| |
| |
| .empty { |
| text-align: center; |
| padding: 60px 20px; |
| color: var(--muted); |
| } |
| |
| .empty-icon { font-size: 48px; margin-bottom: 16px; } |
| .empty h3 { font-size: 16px; margin-bottom: 8px; color: var(--text); } |
| .empty p { font-size: 12px; line-height: 1.5; } |
| |
| |
| .pagination { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| margin-top: 24px; |
| } |
| |
| |
| @media (max-width: 900px) { |
| .sidebar { width: 60px; } |
| .sidebar-logo h1, .sidebar-logo p, .status-pill, .nav-item span { display: none; } |
| .main { margin-left: 60px; } |
| .stats-grid { grid-template-columns: 1fr 1fr; } |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <aside class="sidebar"> |
| <div class="sidebar-logo"> |
| <h1>ANICHIN</h1> |
| <p>Scraper Dashboard</p> |
| <div class="status-pill"> |
| <span class="status-dot" id="statusDot"></span> |
| <span id="statusText">Ready</span> |
| </div> |
| </div> |
|
|
| <nav class="nav"> |
| <div class="nav-item active" onclick="switchView('scraper')"> |
| <span class="nav-icon">⚡</span> |
| <span>Scraper</span> |
| </div> |
| <div class="nav-item" onclick="switchView('library')"> |
| <span class="nav-icon">🗃️</span> |
| <span>Library</span> |
| </div> |
| <div class="nav-item" onclick="switchView('logs')"> |
| <span class="nav-icon">📋</span> |
| <span>Logs</span> |
| </div> |
| </nav> |
| </aside> |
|
|
| |
| <main class="main"> |
|
|
| |
| <div class="view active" id="view-scraper"> |
| <div class="page-header"> |
| <div> |
| <div class="page-title">SCRAPER</div> |
| <div class="page-sub">// anichin.cafe → firebase firestore</div> |
| </div> |
| <button class="btn btn-secondary" onclick="refreshStats()">⟳ Refresh Stats</button> |
| </div> |
|
|
| |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-label">Total Anime</div> |
| <div class="stat-value" id="statTotal">—</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Ongoing</div> |
| <div class="stat-value" id="statOngoing">—</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Last Scrape</div> |
| <div class="stat-value" style="font-size:16px; margin-top:16px;" id="statLastRun">Never</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-label">Status</div> |
| <div class="stat-value" style="font-size:22px; margin-top:12px;" id="statStatus">IDLE</div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header"> |
| <span class="panel-title">// Scrape Controls</span> |
| <span style="font-family:var(--font-mono);font-size:10px;color:var(--muted)" id="progressLabel"></span> |
| </div> |
| <div class="panel-body"> |
| <div class="progress-wrap" id="progressWrap" style="display:none"> |
| <div class="progress-bar" id="progressBar" style="width:0%"></div> |
| </div> |
|
|
| <div class="controls-grid" style="margin-top:16px"> |
| |
| <div class="control-card"> |
| <h3>🚀 Full Scrape</h3> |
| <p>Scrape semua anime dari halaman list + detail lengkap. Cocok buat pertama kali.</p> |
| <div class="input-row"> |
| <input type="number" id="pagesInput" value="10" min="1" max="100" placeholder="Jumlah halaman" /> |
| </div> |
| <button class="btn btn-primary" id="btnFullScrape" onclick="startFullScrape()"> |
| ▶ Mulai Full Scrape |
| </button> |
| </div> |
|
|
| |
| <div class="control-card"> |
| <h3>🔄 Incremental Update</h3> |
| <p>Cek episode baru untuk anime yang masih ongoing. Ringan dan cepet.</p> |
| <p style="margin-bottom:8px;color:var(--yellow)">⏰ Auto-run setiap hari 06:00 WIB</p> |
| <button class="btn btn-green" id="btnUpdate" onclick="startUpdate()"> |
| ↻ Update Sekarang |
| </button> |
| </div> |
|
|
| |
| <div class="control-card"> |
| <h3>🎯 Scrape Anime Tertentu</h3> |
| <p>Input URL anime dari anichin.cafe untuk scrape satu anime aja.</p> |
| <div class="input-row"> |
| <input type="url" id="singleUrl" placeholder="https://anichin.cafe/anime/..." /> |
| </div> |
| <button class="btn btn-secondary" onclick="scrapeSingle()">Scrape</button> |
| </div> |
|
|
| |
| <div class="control-card"> |
| <h3>🔍 Search & Scrape</h3> |
| <p>Cari anime berdasarkan judul dan scrape hasilnya ke database.</p> |
| <div class="input-row"> |
| <input type="text" id="searchQuery" placeholder="Nama anime..." /> |
| </div> |
| <button class="btn btn-secondary" onclick="searchScrape()">Cari & Scrape</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel"> |
| <div class="panel-header"> |
| <span class="panel-title">// Live Log</span> |
| <button class="btn btn-secondary" onclick="clearLog()" style="padding:4px 10px;font-size:10px">Clear</button> |
| </div> |
| <div class="panel-body" style="padding:12px"> |
| <div class="terminal" id="terminal"> |
| <div class="log-entry info"> |
| <span class="log-time">--:--:--</span> |
| Anichin Scraper siap. Tekan tombol scrape untuk mulai. |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="view" id="view-library"> |
| <div class="page-header"> |
| <div> |
| <div class="page-title">LIBRARY</div> |
| <div class="page-sub">// anime database dari firebase</div> |
| </div> |
| </div> |
|
|
| <div class="search-bar"> |
| <input type="text" id="libSearch" placeholder="🔍 Cari anime..." style="max-width:300px" oninput="debounceSearch()" /> |
| <select id="libStatus" onchange="loadLibrary()" style="background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text);font-family:var(--font-mono);font-size:12px;outline:none;"> |
| <option value="">Semua Status</option> |
| <option value="Ongoing">Ongoing</option> |
| <option value="Completed">Completed</option> |
| </select> |
| </div> |
|
|
| <div class="anime-grid" id="animeGrid"> |
| <div class="empty" style="grid-column:1/-1"> |
| <div class="empty-icon">📦</div> |
| <h3>Library Kosong</h3> |
| <p>Belum ada anime. Jalankan scraper dulu!</p> |
| </div> |
| </div> |
|
|
| <div class="pagination" id="pagination"></div> |
| </div> |
|
|
| |
| <div class="view" id="view-logs"> |
| <div class="page-header"> |
| <div> |
| <div class="page-title">LOGS</div> |
| <div class="page-sub">// riwayat scraping activity</div> |
| </div> |
| <button class="btn btn-secondary" onclick="loadLogs()">⟳ Refresh</button> |
| </div> |
|
|
| <div class="panel"> |
| <div class="panel-body" style="padding:12px"> |
| <div class="terminal" id="fullLog" style="height:500px"></div> |
| </div> |
| </div> |
| </div> |
|
|
| </main> |
|
|
| |
| <div id="toast"></div> |
|
|
| <script> |
| |
| let currentPage = 1; |
| let pollInterval = null; |
| let searchTimeout = null; |
| |
| const API = window.location.origin + '/api'; |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| refreshStats(); |
| startPolling(); |
| }); |
| |
| |
| function switchView(name) { |
| document.querySelectorAll('.view').forEach(v => v.classList.remove('active')); |
| document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active')); |
| |
| document.getElementById(`view-${name}`).classList.add('active'); |
| event.currentTarget.classList.add('active'); |
| |
| if (name === 'library') { currentPage = 1; loadLibrary(); } |
| if (name === 'logs') loadLogs(); |
| } |
| |
| |
| async function refreshStats() { |
| try { |
| const res = await fetch(`${API}/stats`); |
| const d = await res.json(); |
| document.getElementById('statTotal').textContent = (d.totalAnimes || 0).toLocaleString(); |
| document.getElementById('statOngoing').textContent = (d.ongoingAnimes || 0).toLocaleString(); |
| if (d.lastScrape) { |
| document.getElementById('statLastRun').textContent = |
| new Date(d.lastScrape).toLocaleString('id-ID', { timeZone: 'Asia/Jakarta' }); |
| } |
| } catch { } |
| } |
| |
| |
| async function startFullScrape() { |
| const pages = parseInt(document.getElementById('pagesInput').value) || 10; |
| setScrapingUI(true); |
| addLogEntry(`🚀 Full scrape dimulai — ${pages} halaman`, 'info'); |
| |
| try { |
| const res = await fetch(`${API}/scrape/full`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ pages }), |
| }); |
| const d = await res.json(); |
| toast(d.message || 'Scrape dimulai!', 'success'); |
| } catch (err) { |
| addLogEntry(`❌ Koneksi error: ${err.message}`, 'error'); |
| setScrapingUI(false); |
| } |
| } |
| |
| async function startUpdate() { |
| setScrapingUI(true); |
| addLogEntry('🔄 Incremental update dimulai...', 'info'); |
| |
| try { |
| const res = await fetch(`${API}/scrape/update`, { method: 'POST' }); |
| const d = await res.json(); |
| toast(d.message, 'success'); |
| } catch (err) { |
| addLogEntry(`❌ ${err.message}`, 'error'); |
| setScrapingUI(false); |
| } |
| } |
| |
| async function scrapeSingle() { |
| const url = document.getElementById('singleUrl').value.trim(); |
| if (!url) return toast('Input URL dulu!', 'error'); |
| |
| addLogEntry(`🎯 Scrape: ${url}`, 'info'); |
| |
| try { |
| const res = await fetch(`${API}/scrape/single`, { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ url }), |
| }); |
| const d = await res.json(); |
| if (d.success) { |
| addLogEntry(`✅ ${d.data.title} — ${d.data.totalEpisodes} eps`, 'success'); |
| toast('Anime berhasil discrape!', 'success'); |
| } else { |
| addLogEntry(`❌ ${d.error}`, 'error'); |
| } |
| } catch (err) { |
| addLogEntry(`❌ ${err.message}`, 'error'); |
| } |
| } |
| |
| async function searchScrape() { |
| const q = document.getElementById('searchQuery').value.trim(); |
| if (!q) return toast('Masukkin query dulu!', 'error'); |
| |
| addLogEntry(`🔍 Search: "${q}"`, 'info'); |
| |
| try { |
| const res = await fetch(`${API}/scrape/search?q=${encodeURIComponent(q)}`); |
| const d = await res.json(); |
| addLogEntry(`✓ Dapet ${d.count} hasil untuk "${q}"`, 'success'); |
| toast(`${d.count} anime ditemukan`, 'success'); |
| } catch (err) { |
| addLogEntry(`❌ ${err.message}`, 'error'); |
| } |
| } |
| |
| |
| async function loadLibrary() { |
| const status = document.getElementById('libStatus').value; |
| const search = document.getElementById('libSearch').value; |
| const grid = document.getElementById('animeGrid'); |
| |
| grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)">Loading...</div>'; |
| |
| try { |
| let url = `${API}/animes?limit=30&page=${currentPage}`; |
| if (status) url += `&status=${status}`; |
| |
| const res = await fetch(url); |
| const d = await res.json(); |
| |
| renderAnimes(d.data || [], d.total || 0); |
| renderPagination(d.total || 0, 30); |
| } catch { |
| grid.innerHTML = ` |
| <div class="empty" style="grid-column:1/-1"> |
| <div class="empty-icon">⚠️</div> |
| <h3>Server Tidak Tersedia</h3> |
| <p>Pastikan server Node.js sudah berjalan.<br>Jalankan: <code style="color:var(--accent)">npm start</code></p> |
| </div>`; |
| } |
| } |
| |
| function renderAnimes(animes, total) { |
| const grid = document.getElementById('animeGrid'); |
| |
| if (!animes.length) { |
| grid.innerHTML = ` |
| <div class="empty" style="grid-column:1/-1"> |
| <div class="empty-icon">📭</div> |
| <h3>Belum Ada Data</h3> |
| <p>Jalankan scraper untuk mulai ngumpulin anime!</p> |
| </div>`; |
| return; |
| } |
| |
| grid.innerHTML = animes.map(a => ` |
| <div class="anime-card" onclick="showDetail('${a.slug || a.id}')"> |
| ${a.thumbnail |
| ? `<img class="anime-thumb" src="${escHtml(a.thumbnail)}" alt="${escHtml(a.title)}" loading="lazy" onerror="this.style.display='none'" />` |
| : `<div class="anime-thumb-placeholder">🎌</div>`} |
| <div class="anime-info"> |
| <div class="anime-title">${escHtml(a.title || '—')}</div> |
| <div class="anime-meta"> |
| ${a.status ? `<span class="badge ${(a.status||'').toLowerCase()}">${escHtml(a.status)}</span>` : ''} |
| ${a.totalEpisodes ? `<span class="badge">${a.totalEpisodes} eps</span>` : ''} |
| </div> |
| </div> |
| </div> |
| `).join(''); |
| } |
| |
| function renderPagination(total, limit) { |
| const pages = Math.ceil(total / limit); |
| const pg = document.getElementById('pagination'); |
| |
| if (pages <= 1) { pg.innerHTML = ''; return; } |
| |
| let html = ''; |
| if (currentPage > 1) html += `<button class="btn btn-secondary" onclick="goPage(${currentPage-1})">← Prev</button>`; |
| html += `<span style="font-family:var(--font-mono);font-size:11px;color:var(--muted)">${currentPage} / ${pages}</span>`; |
| if (currentPage < pages) html += `<button class="btn btn-secondary" onclick="goPage(${currentPage+1})">Next →</button>`; |
| |
| pg.innerHTML = html; |
| } |
| |
| function goPage(p) { currentPage = p; loadLibrary(); window.scrollTo(0,0); } |
| |
| function debounceSearch() { |
| clearTimeout(searchTimeout); |
| searchTimeout = setTimeout(() => { currentPage = 1; loadLibrary(); }, 400); |
| } |
| |
| async function showDetail(slug) { |
| toast(`Memuat detail ${slug}...`, 'success'); |
| } |
| |
| |
| async function loadLogs() { |
| try { |
| const res = await fetch(`${API}/logs`); |
| const logs = await res.json(); |
| const el = document.getElementById('fullLog'); |
| el.innerHTML = logs.map(l => ` |
| <div class="log-entry ${classifyLog(l.msg)}"> |
| <span class="log-time">${new Date(l.time).toLocaleTimeString('id-ID')}</span> |
| ${escHtml(l.msg)} |
| </div>`).join('') || '<div class="log-entry">Belum ada log.</div>'; |
| } catch { |
| document.getElementById('fullLog').innerHTML = '<div class="log-entry error">Server tidak tersedia.</div>'; |
| } |
| } |
| |
| |
| function startPolling() { |
| pollInterval = setInterval(async () => { |
| try { |
| const res = await fetch(`${API}/status`); |
| const d = await res.json(); |
| |
| const dot = document.getElementById('statusDot'); |
| const statusTxt = document.getElementById('statusText'); |
| const statStatus = document.getElementById('statStatus'); |
| |
| if (d.scrapeRunning) { |
| dot.className = 'status-dot running'; |
| statusTxt.textContent = 'Running'; |
| statStatus.textContent = d.progress?.stage?.toUpperCase() || 'RUNNING'; |
| document.getElementById('progressWrap').style.display = 'block'; |
| |
| |
| const logRes = await fetch(`${API}/logs`); |
| const logs = await logRes.json(); |
| if (logs.length) updateTerminalFromServer(logs.slice(0, 20)); |
| } else { |
| dot.className = 'status-dot'; |
| statusTxt.textContent = 'Ready'; |
| statStatus.textContent = 'IDLE'; |
| setScrapingUI(false); |
| document.getElementById('progressWrap').style.display = 'none'; |
| } |
| } catch { } |
| }, 2500); |
| } |
| |
| function updateTerminalFromServer(logs) { |
| const term = document.getElementById('terminal'); |
| term.innerHTML = logs.map(l => ` |
| <div class="log-entry ${classifyLog(l.msg)}"> |
| <span class="log-time">${new Date(l.time).toLocaleTimeString('id-ID')}</span> |
| ${escHtml(l.msg)} |
| </div>`).join(''); |
| } |
| |
| |
| function setScrapingUI(isRunning) { |
| const btns = ['btnFullScrape', 'btnUpdate']; |
| btns.forEach(id => { |
| const el = document.getElementById(id); |
| if (el) el.disabled = isRunning; |
| }); |
| } |
| |
| function addLogEntry(msg, type = 'info') { |
| const term = document.getElementById('terminal'); |
| const time = new Date().toLocaleTimeString('id-ID'); |
| const div = document.createElement('div'); |
| div.className = `log-entry ${type}`; |
| div.innerHTML = `<span class="log-time">${time}</span>${escHtml(msg)}`; |
| term.insertBefore(div, term.firstChild); |
| if (term.children.length > 50) term.removeChild(term.lastChild); |
| } |
| |
| function classifyLog(msg) { |
| if (!msg) return ''; |
| if (msg.includes('✅') || msg.includes('✓')) return 'success'; |
| if (msg.includes('❌')) return 'error'; |
| if (msg.includes('⚠️')) return 'warn'; |
| return 'info'; |
| } |
| |
| function clearLog() { |
| document.getElementById('terminal').innerHTML = ''; |
| } |
| |
| function toast(msg, type = '') { |
| const t = document.getElementById('toast'); |
| t.textContent = msg; |
| t.className = `show ${type}`; |
| setTimeout(() => t.className = '', 3000); |
| } |
| |
| function escHtml(s) { |
| if (!s) return ''; |
| return String(s) |
| .replace(/&/g, '&') |
| .replace(/</g, '<') |
| .replace(/>/g, '>') |
| .replace(/"/g, '"'); |
| } |
| </script> |
| </body> |
| </html> |
|
|
