382 lines
16 KiB
HTML
382 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<link rel="stylesheet" href="{{ url_for('.static', filename='css/mobile_custom.css') }}"/>
|
|
<link rel="stylesheet" href="{{ url_for('.static', filename='css/' ~ arg['sub'] ~ '.css') }}"/>
|
|
|
|
<style>
|
|
.queue-header-container {
|
|
display: flex; justify-content: space-between; align-items: flex-end;
|
|
margin-bottom: 20px; border-bottom: 1px solid rgba(16, 185, 129, 0.2); padding-bottom: 10px;
|
|
}
|
|
.queue-title { color: var(--forest-accent); font-weight: 700; margin: 0; }
|
|
.queue-meta { font-size: 12px; color: #6ee7b7; opacity: 0.6; }
|
|
|
|
.custom-queue-table {
|
|
background: rgba(6, 78, 59, 0.2); border-collapse: separate; border-spacing: 0 4px; color: #ecfdf5;
|
|
}
|
|
.custom-queue-table thead th {
|
|
background: rgba(2, 44, 34, 0.8) !important; color: #6ee7b7; font-size: 13px;
|
|
text-transform: uppercase; border: none !important; padding: 12px 8px !important;
|
|
text-align: center;
|
|
}
|
|
.custom-queue-table tbody tr {
|
|
background: rgba(6, 78, 59, 0.3); transition: all 0.2s;
|
|
}
|
|
.custom-queue-table tbody tr:hover { background: rgba(6, 78, 59, 0.5) !important; }
|
|
.custom-queue-table td { border: none !important; vertical-align: middle !important; padding: 14px 8px !important; }
|
|
|
|
/* Badges & Status */
|
|
.badge-status {
|
|
padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
|
|
display: inline-block; min-width: 60px; text-align: center;
|
|
}
|
|
.status-downloading { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
|
|
.status-wait { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.2); }
|
|
.status-completed { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }
|
|
.status-fail { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
|
|
/* Progress Bar */
|
|
.custom-progress { height: 18px; background: rgba(0,0,0,0.4); border-radius: 9px; overflow: hidden; border: 1px solid rgba(16, 185, 129, 0.1); }
|
|
.custom-progress .progress-bar {
|
|
background: linear-gradient(90deg, #10b981, #059669) !important;
|
|
font-weight: 700; font-size: 11px;
|
|
transition: width 0.4s ease-out;
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.action-btn-mini {
|
|
width: 32px; height: 32px; border-radius: 8px; border: none; font-size: 14px;
|
|
display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s;
|
|
}
|
|
.action-btn-mini.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.action-btn-mini.btn-danger:hover { background: #ef4444; color: white; transform: scale(1.1); }
|
|
.action-btn-mini.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
|
|
.action-btn-mini.btn-warning:hover { background: #f59e0b; color: white; transform: scale(1.1); }
|
|
|
|
.action-btn-group { display: flex; justify-content: center; gap: 4px; }
|
|
|
|
.header-buttons { display: flex; gap: 10px; align-items: center; }
|
|
.queue-btn-top {
|
|
display: flex; align-items: center; gap: 6px; padding: 6px 14px;
|
|
border: none; border-radius: 8px; font-weight: 600; font-size: 13px;
|
|
cursor: pointer; transition: all 0.3s ease;
|
|
}
|
|
.queue-btn-top.btn-danger { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
|
|
.queue-btn-top.btn-danger:hover { background: #ef4444; color: white; box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
|
|
.queue-btn-top.btn-warning { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
|
|
.queue-btn-top.btn-warning:hover { background: #f59e0b; color: white; box-shadow: 0 0 15px rgba(245, 158, 11, 0.4); }
|
|
|
|
/* Details */
|
|
.queue-detail-container { color: #d1fae5; font-size: 13px; }
|
|
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px 20px; }
|
|
.detail-item { display: flex; gap: 10px; align-items: flex-start; }
|
|
.detail-item .label { color: #6ee7b7; font-weight: 700; min-width: 100px; opacity: 0.7; font-size: 11px; text-transform: uppercase; }
|
|
.detail-item .value { color: #ecfdf5; word-break: break-all; }
|
|
|
|
/* Smooth Load */
|
|
.content-cloak { opacity: 0; transition: opacity 0.5s ease-out; }
|
|
.content-cloak.visible { opacity: 1; }
|
|
</style>
|
|
|
|
<div class="content-cloak">
|
|
<div class="queue-header-container">
|
|
<h4 class="queue-title"><i class="fa fa-download"></i> 다운로드 큐</h4>
|
|
<div class="header-buttons">
|
|
<button id="reset_btn" class="queue-btn-top btn-danger">
|
|
<i class="fa fa-refresh"></i> 초기화
|
|
</button>
|
|
<button id="delete_completed_btn" class="queue-btn-top btn-warning">
|
|
<i class="fa fa-trash"></i> 완료 삭제
|
|
</button>
|
|
</div>
|
|
<div class="queue-meta">실시간 동기화 활성화됨 (3초 주기)</div>
|
|
</div>
|
|
|
|
<div class="table-responsive-custom">
|
|
<table id="result_table" class="table custom-queue-table tableRowHover">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:5%;">IDX</th>
|
|
<th style="width:8%;">Plugin</th>
|
|
<th style="width:10%;">시작시간</th>
|
|
<th style="width:25%;">파일명</th>
|
|
<th style="width:8%;">상태</th>
|
|
<th style="width:18%;">진행률</th>
|
|
<th style="width:6%;">길이</th>
|
|
<th style="width:5%;">PF</th>
|
|
<th style="width:10%;">현재 상태</th>
|
|
<th style="width:5%;">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="list"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var PACKAGE_NAME = "{{ arg['package_name'] }}";
|
|
var MODULE_NAME = "{{ arg['module_name'] }}";
|
|
var current_list_length = 0;
|
|
|
|
$(document).ready(function(){
|
|
$(".content-cloak").addClass("visible");
|
|
|
|
var protocol = location.protocol;
|
|
var socketUrl = protocol + "//" + document.domain + ":" + location.port;
|
|
|
|
// Queue 전용 소켓 시도
|
|
var queueSocket = null;
|
|
try {
|
|
queueSocket = io.connect(socketUrl + '/anime_downloader/linkkf/queue');
|
|
} catch (e) {
|
|
console.error('Queue socket error:', e);
|
|
}
|
|
|
|
var frameworkSocket = null;
|
|
try {
|
|
frameworkSocket = io.connect(socketUrl + '/framework');
|
|
frameworkSocket.on('linkkf_status', function(data) {
|
|
status_html(data);
|
|
});
|
|
} catch (e) {
|
|
console.error('Framework socket error:', e);
|
|
}
|
|
|
|
var socket = queueSocket;
|
|
if (socket) {
|
|
socket.on('status_change', function(data) { button_html(data); });
|
|
socket.on('status', function(data){ status_html(data); });
|
|
socket.on('last', function(data){ status_html(data); button_html(data); });
|
|
}
|
|
|
|
// GDM 전용 소켓 추가 핸들링 (전역 업데이트 수신용)
|
|
var gdmSocket = null;
|
|
try {
|
|
gdmSocket = io.connect(socketUrl + '/gommi_downloader_manager');
|
|
gdmSocket.on('status', function(data) {
|
|
// 이 모듈과 관련된 작업만 처리
|
|
if (data.caller_plugin === PACKAGE_NAME + '_' + MODULE_NAME) {
|
|
// GDM 데이터를 큐 형식으로 변환하여 UI 업데이트
|
|
// 수동 새로고침 없이 실시간 반영을 위해 renderList 호출 주기를 짧게 하거나 직접 UI 갱신
|
|
silentFetchList(function(newList) {
|
|
renderList(newList);
|
|
});
|
|
}
|
|
});
|
|
} catch (e) {
|
|
console.error('GDM socket error:', e);
|
|
}
|
|
|
|
on_start();
|
|
refreshIntervalId = setInterval(autoRefreshList, 3000);
|
|
});
|
|
|
|
var refreshIntervalId = null;
|
|
|
|
function silentFetchList(callback) {
|
|
$.ajax({
|
|
url: '/' + PACKAGE_NAME + '/ajax/' + MODULE_NAME + '/command',
|
|
type: 'POST',
|
|
cache: false,
|
|
global: false,
|
|
data: {command: 'list'},
|
|
dataType: 'json',
|
|
success: function(data) { if (callback) callback(data); }
|
|
});
|
|
}
|
|
|
|
function autoRefreshList() {
|
|
silentFetchList(function(data) {
|
|
if (data.length !== current_list_length) {
|
|
current_list_length = data.length;
|
|
renderList(data);
|
|
}
|
|
|
|
var hasActiveDownload = false;
|
|
if (data && data.length > 0) {
|
|
for (var j = 0; j < data.length; j++) {
|
|
if (data[j].status_str === 'DOWNLOADING' || data[j].status_str === 'WAITING' || data[j].status_str === 'STARTED') {
|
|
hasActiveDownload = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (!hasActiveDownload && refreshIntervalId) {
|
|
clearInterval(refreshIntervalId);
|
|
refreshIntervalId = null;
|
|
}
|
|
if (hasActiveDownload && !refreshIntervalId) {
|
|
refreshIntervalId = setInterval(autoRefreshList, 3000);
|
|
}
|
|
});
|
|
}
|
|
|
|
function on_start() {
|
|
silentFetchList(function(data) {
|
|
current_list_length = data.length;
|
|
renderList(data);
|
|
});
|
|
}
|
|
|
|
function renderList(data) {
|
|
$("#list").html('');
|
|
if (!data || data.length == 0) {
|
|
$("#list").html("<tr><td colspan='10' style='text-align:center; padding: 40px; color: #6ee7b7;'>다운로드 대기 중인 작업이 없습니다.</td></tr>");
|
|
} else {
|
|
var str = '';
|
|
for(var i in data) {
|
|
str += make_item(data[i]);
|
|
}
|
|
$("#list").html(str);
|
|
}
|
|
}
|
|
|
|
$("body").on('click', '#stop_btn', function(e){
|
|
e.stopPropagation(); e.preventDefault();
|
|
globalSendCommand('stop', $(this).data('idx'), null, null, function(ret){
|
|
refresh_item(ret.data);
|
|
});
|
|
});
|
|
|
|
$("body").on('click', '#reset_btn', function(e){
|
|
e.preventDefault();
|
|
globalConfirmModal('초기화 하시겠습니까?', function(){
|
|
globalSendCommand('reset', null, null, null, function(ret){
|
|
autoRefreshList();
|
|
});
|
|
});
|
|
});
|
|
|
|
$("body").on('click', '#delete_completed_btn', function(e){
|
|
e.preventDefault();
|
|
globalSendCommand('delete_completed', null, null, null, function(ret){
|
|
autoRefreshList();
|
|
});
|
|
});
|
|
|
|
$("body").on('click', '#delete_btn', function(e){
|
|
e.stopPropagation(); e.preventDefault();
|
|
let idx = $(this).data('idx');
|
|
globalSendCommand('remove', idx, null, null, function(ret){
|
|
autoRefreshList();
|
|
});
|
|
});
|
|
|
|
function refresh_item(data) {
|
|
$('#tr1_'+data.idx).html(make_item1(data));
|
|
$('#collapse_'+data.idx).html(make_item2(data));
|
|
}
|
|
|
|
function make_item(data) {
|
|
var str = '<tr id="tr1_'+data.idx+'" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_'+ data.idx + '" aria-expanded="false" >';
|
|
str += make_item1(data);
|
|
str += '</tr>';
|
|
str += '<tr class="collapse tableRowHoverOff" id="collapse_' + data.idx + '">';
|
|
str += make_item2(data);
|
|
str += '</tr>';
|
|
return str;
|
|
}
|
|
|
|
function make_item1(data) {
|
|
var str = '<td style="text-align:center;">'+ data.idx + '</td>';
|
|
str += '<td style="text-align:center;"><span class="badge badge-info">'+ data.callback_id + '</span></td>';
|
|
str += '<td style="text-align:center; font-size: 12px; color: #6ee7b7;">'+ data.start_time + '</td>';
|
|
str += '<td style="font-weight: 600;">'+ data.filename + '</td>';
|
|
|
|
var status_class = 'status-wait';
|
|
if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
|
|
else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
|
|
else if (data.status_str === 'STOP') status_class = 'status-fail';
|
|
|
|
str += '<td id="status_'+data.idx+'" style="text-align:center;"><span class="badge-status ' + status_class + '">'+ data.status_kor + '</span></td>';
|
|
|
|
var visi = (parseInt(data.percent) > 0) ? 'visible' : 'hidden';
|
|
str += '<td><div class="progress custom-progress"><div id="progress_'+data.idx+'" class="progress-bar" style="visibility: '+visi+'; width:'+data.percent+'%">'+data.percent +'%</div></div></td>';
|
|
|
|
str += '<td style="text-align:center;">'+ data.duration_str + '</td>';
|
|
str += '<td id="current_pf_count_'+data.idx+'" style="text-align:center; color: #f87171;">'+ data.current_pf_count + '</td>';
|
|
str += '<td style="text-align:center; font-size: 13px;"><div id="current_speed_'+data.idx+'">'+ data.current_speed + '</div><div id="download_time_'+data.idx+'" style="font-size: 11px; opacity: 0.6;">'+ data.download_time + '</div></td>';
|
|
|
|
str += '<td id="button_'+data.idx+'" style="text-align:center; padding: 10px 4px !important;">';
|
|
str += '<div class="action-btn-group">';
|
|
if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
|
|
str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
|
|
} else {
|
|
str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
|
|
}
|
|
str += '</div>';
|
|
str += '</td>';
|
|
return str;
|
|
}
|
|
|
|
function make_item2(data) {
|
|
var str = '<td colspan="10" style="background: rgba(0,0,0,0.2); padding: 15px !important;">';
|
|
str += '<div id="detail_'+data.idx+'" class="queue-detail-container">';
|
|
str += get_detail(data);
|
|
str += '</div>';
|
|
str += '</td>';
|
|
return str;
|
|
}
|
|
|
|
function get_detail(data) {
|
|
var str = '<div class="detail-grid">';
|
|
str += '<div class="detail-item"><span class="label">파일 경로</span><span class="value">' + data.save_fullpath + '</span></div>';
|
|
str += '<div class="detail-item"><span class="label">URL</span><span class="value text-truncate">' + data.url + '</span></div>';
|
|
str += '<div class="detail-item"><span class="label">진행 상황</span><span class="value">' + data.percent+ '% (' + data.current_duration + ' / ' + data.duration + ')</span></div>';
|
|
str += '<div class="detail-item"><span class="label">비트레이트</span><span class="value">' + data.current_bitrate + '</span></div>';
|
|
str += '<div class="detail-item"><span class="label">허용 에러(PF)</span><span class="value">' + data.max_pf_count + '</span></div>';
|
|
if (data.status_str == 'COMPLETED') {
|
|
str += '<div class="detail-item"><span class="label">파일 크기</span><span class="value">' + data.filesize_str + '</span></div>';
|
|
str += '<div class="detail-item"><span class="label">최종 속도</span><span class="value">' + (data.download_speed || 'N/A') + '</span></div>';
|
|
}
|
|
str += '</div>';
|
|
return str;
|
|
}
|
|
|
|
function button_html(data) {
|
|
var str = '<div class="action-btn-group">';
|
|
if (data.status_str == 'DOWNLOADING' || data.status_str == 'WAITING') {
|
|
str += '<button id="stop_btn" class="action-btn-mini btn-danger" data-idx="'+data.idx+'" title="중지"><i class="fa fa-stop"></i></button>';
|
|
} else {
|
|
str += '<button id="delete_btn" class="action-btn-mini btn-warning" data-idx="'+data.idx+'" title="삭제"><i class="fa fa-times"></i></button>';
|
|
}
|
|
str += '</div>';
|
|
$("#button_" + data.idx).html(str);
|
|
}
|
|
|
|
function status_html(data) {
|
|
var progress = document.getElementById("progress_" + data.idx);
|
|
if (!progress) return;
|
|
|
|
progress.style.width = data.percent+ '%';
|
|
progress.innerHTML = data.percent+ '%';
|
|
progress.style.visibility = 'visible';
|
|
|
|
var statusEl = document.getElementById("status_" + data.idx);
|
|
if (statusEl) {
|
|
var status_class = 'status-wait';
|
|
if (data.status_str === 'DOWNLOADING') status_class = 'status-downloading';
|
|
else if (data.status_str === 'COMPLETED') status_class = 'status-completed';
|
|
else if (data.status_str === 'STOP') status_class = 'status-fail';
|
|
statusEl.innerHTML = '<span class="badge-status ' + status_class + '">'+ data.status_kor + '</span>';
|
|
}
|
|
|
|
var pfEl = document.getElementById("current_pf_count_" + data.idx);
|
|
if (pfEl) pfEl.innerHTML = data.current_pf_count;
|
|
|
|
var speedEl = document.getElementById("current_speed_" + data.idx);
|
|
if (speedEl) speedEl.innerHTML = data.current_speed;
|
|
|
|
var timeEl = document.getElementById("download_time_" + data.idx);
|
|
if (timeEl) timeEl.innerHTML = data.download_time;
|
|
|
|
var detailEl = document.getElementById("detail_" + data.idx);
|
|
if (detailEl) detailEl.innerHTML = get_detail(data);
|
|
}
|
|
</script>
|
|
|
|
{% endblock %}
|
|
|