252 lines
11 KiB
HTML
252 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" data-theme="light">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Download Queue - AniWorld Manager</title>
|
|
<link rel="stylesheet" href="/static/css/styles.css">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<div class="header-title">
|
|
<i class="fas fa-download"></i>
|
|
<h1>Download Queue</h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="/" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i>
|
|
<span>Back to Main</span>
|
|
</a>
|
|
<button id="theme-toggle" class="btn btn-icon" title="Toggle theme">
|
|
<i class="fas fa-moon"></i>
|
|
</button>
|
|
<button id="logout-btn" class="btn btn-secondary" title="Logout" style="display: none;">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span>Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main content -->
|
|
<main class="main-content">
|
|
<!-- Queue Statistics -->
|
|
<section class="queue-stats-section">
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-download text-primary"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="total-items">0</div>
|
|
<div class="stat-label">Total Items</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-clock text-warning"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="pending-items">0</div>
|
|
<div class="stat-label">In Queue</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-check-circle text-success"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="completed-items">0</div>
|
|
<div class="stat-label">Completed</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card">
|
|
<div class="stat-icon">
|
|
<i class="fas fa-exclamation-triangle text-error"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<div class="stat-value" id="failed-items">0</div>
|
|
<div class="stat-label">Failed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Speed and ETA -->
|
|
<div class="speed-eta-section">
|
|
<div class="speed-info">
|
|
<div class="speed-current">
|
|
<span class="label">Current Speed:</span>
|
|
<span class="value" id="current-speed">0 MB/s</span>
|
|
</div>
|
|
<div class="speed-average">
|
|
<span class="label">Average Speed:</span>
|
|
<span class="value" id="average-speed">0 MB/s</span>
|
|
</div>
|
|
</div>
|
|
<div class="eta-info">
|
|
<span class="label">Estimated Time Remaining:</span>
|
|
<span class="value" id="eta-time">--:--</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Active Downloads -->
|
|
<section class="active-downloads-section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<i class="fas fa-play-circle"></i>
|
|
Active Downloads
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="active-downloads-list" id="active-downloads">
|
|
<div class="empty-state">
|
|
<i class="fas fa-pause-circle"></i>
|
|
<p>No active downloads</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pending Queue -->
|
|
<section class="pending-queue-section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<i class="fas fa-clock"></i>
|
|
Download Queue (<span id="queue-count">0</span>)
|
|
</h2>
|
|
<div class="section-actions">
|
|
<button id="clear-pending-btn" class="btn btn-secondary" disabled>
|
|
<i class="fas fa-trash-alt"></i>
|
|
Remove All
|
|
</button>
|
|
<button id="start-queue-btn" class="btn btn-primary" disabled>
|
|
<i class="fas fa-play"></i>
|
|
Start
|
|
</button>
|
|
<button id="stop-queue-btn" class="btn btn-secondary" disabled style="display: none;">
|
|
<i class="fas fa-stop"></i>
|
|
Stop
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pending-queue-list" id="pending-queue">
|
|
<div class="empty-state">
|
|
<i class="fas fa-list"></i>
|
|
<p>No items in queue</p>
|
|
<small>Add episodes from the main page to start downloading</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Completed Downloads -->
|
|
<section class="completed-downloads-section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<i class="fas fa-check-circle"></i>
|
|
Completed (<span id="completed-count">0</span>)
|
|
</h2>
|
|
<div class="section-actions">
|
|
<button id="clear-completed-btn" class="btn btn-secondary" disabled>
|
|
<i class="fas fa-broom"></i>
|
|
Clear Completed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="completed-downloads-list" id="completed-downloads">
|
|
<div class="empty-state">
|
|
<i class="fas fa-check-circle text-success"></i>
|
|
<p>No completed downloads</p>
|
|
<small>Completed episodes will appear here</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Failed Downloads -->
|
|
<section class="failed-downloads-section">
|
|
<div class="section-header">
|
|
<h2>
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
Failed (<span id="failed-count">0</span>)
|
|
</h2>
|
|
<div class="section-actions">
|
|
<button id="retry-all-btn" class="btn btn-warning" disabled>
|
|
<i class="fas fa-redo"></i>
|
|
Retry All
|
|
</button>
|
|
<button id="clear-failed-btn" class="btn btn-secondary" disabled>
|
|
<i class="fas fa-trash"></i>
|
|
Clear Failed
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="failed-downloads-list" id="failed-downloads">
|
|
<div class="empty-state">
|
|
<i class="fas fa-check-circle text-success"></i>
|
|
<p>No failed downloads</p>
|
|
<small>Failed episodes can be retried or removed</small>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Toast notifications -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div id="loading-overlay" class="loading-overlay hidden">
|
|
<div class="loading-spinner">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirm-modal" class="modal hidden">
|
|
<div class="modal-overlay"></div>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="confirm-title">Confirm Action</h3>
|
|
<button id="close-confirm" class="btn btn-icon">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirm-message">Are you sure you want to perform this action?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="confirm-cancel" class="btn btn-secondary">Cancel</button>
|
|
<button id="confirm-ok" class="btn btn-primary">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shared Modules (load in dependency order) -->
|
|
<script src="/static/js/shared/constants.js"></script>
|
|
<script src="/static/js/shared/auth.js"></script>
|
|
<script src="/static/js/shared/api-client.js"></script>
|
|
<script src="/static/js/shared/theme.js"></script>
|
|
<script src="/static/js/shared/ui-utils.js"></script>
|
|
<script src="/static/js/shared/websocket-client.js"></script>
|
|
|
|
<!-- Queue Page Modules -->
|
|
<script src="/static/js/queue/queue-api.js"></script>
|
|
<script src="/static/js/queue/queue-renderer.js"></script>
|
|
<script src="/static/js/queue/progress-handler.js"></script>
|
|
<script src="/static/js/queue/queue-socket-handler.js"></script>
|
|
<script src="/static/js/queue/queue-init.js"></script>
|
|
</body>
|
|
|
|
</html> |