This commit is contained in:
joyfuI
2020-06-29 19:18:56 +09:00
parent 23c1521588
commit 806f4c616a
8 changed files with 101 additions and 121 deletions

View File

@@ -4,7 +4,7 @@
<style>
.row > div {
padding-top: 3px;
padding-bottom:3px;
padding-bottom: 3px;
}
.row {
align-items: center;
@@ -21,15 +21,15 @@
<table id="result_table" class="table table-sm tableRowHover">
<thead>
<tr>
<th style="width:5%">IDX</th>
<th style="width:8%">Plugin</th>
<th style="width:10%">시작시간</th>
<th style="width:10%">타입</th>
<th style="width:28%">제목</th>
<th style="width:8%">상태</th>
<th style="width:15%">진행률</th>
<th style="width:8%">진행시간</th>
<th style="width:8%">Action</th>
<th style="width: 5%">IDX</th>
<th style="width: 8%">Plugin</th>
<th style="width: 10%">시작시간</th>
<th style="width: 10%">타입</th>
<th style="width: 28%">제목</th>
<th style="width: 8%">상태</th>
<th style="width: 15%">진행률</th>
<th style="width: 8%">진행시간</th>
<th style="width: 8%">Action</th>
</tr>
</thead>
<tbody id="list"></tbody>
@@ -40,7 +40,7 @@
const package_name = '{{ arg["package_name"] }}';
$(function () {
let socket = io.connect(location.origin + "/" + package_name);
let socket = io.connect(location.origin + '/' + package_name);
socket.on('add', function (data) {
$('#list').append(make_item(data));
@@ -84,12 +84,12 @@
});
function make_item(data) {
let str = '<tr id="item_' + data.index + '" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_' + data.index + '" aria-expanded="true">';
let str = `<tr id="item_${data.index}" aria-expanded="true" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_${data.index}">`;
str += get_item(data);
str += '</tr>';
str += '<tr class="collapse tableRowHoverOff" style="cursor: pointer;" id="collapse_' + data.index + '">';
str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`;
str += '<td colspan="9">';
str += '<div id="detail_' + data.index + '">';
str += `<div id="detail_${data.index}">`;
str += get_detail(data);
str += '</div>';
str += '</td>';
@@ -98,21 +98,21 @@
}
function get_item(data) {
let str = '<td>' + (data.index + 1) + '</td>';
str += '<td>' + data.plugin + '</td>';
str += '<td>' + data.start_time + '</td>';
str += '<td>' + data.extractor + '</td>';
str += '<td>' + data.title + '</td>';
str += '<td>' + data.status_ko + '</td>';
let str = `<td>${data.index + 1}</td>`;
str += `<td>${data.plugin}</td>`;
str += `<td>${data.start_time}</td>`;
str += `<td>${data.extractor}</td>`;
str += `<td>${data.title}</td>`;
str += `<td>${data.status_ko}</td>`;
let visi = 'hidden';
if (parseInt(data.percent) > 0 && data.status_str !== 'STOP') {
visi = 'visible';
}
str += '<td><div class="progress"><div class="progress-bar" style="visibility: ' + visi + '; width:' + data.percent + '%">' + data.percent + '%</div></div></td>';
str += '<td>' + data.download_time + '</td>';
str += `<td><div class="progress"><div class="progress-bar" style="visibility: ${visi}; width: ${data.percent}%">${data.percent}%</div></div></td>`;
str += `<td>${data.download_time}</td>`;
str += '<td class="tableRowHoverOff">';
if (data.status_str === 'START' || data.status_str === 'DOWNLOADING' || data.status_str === 'FINISHED') {
str += '<button class="align-middle btn btn-outline-danger btn-sm youtube-dl_stop" data-index="' + data.index + '">중지</button>';
str += `<button class="align-middle btn btn-outline-danger btn-sm youtube-dl_stop" data-index="${data.index}">중지</button>`;
}
str += '</td>';
return str;
@@ -127,8 +127,8 @@
if (data.status_str === 'DOWNLOADING') {
str += info_html('', '<b>현재 다운로드 중인 파일에 대한 정보</b>');
str += info_html('파일명', data.filename);
str += info_html('진행률(current/total)', data.percent + '% (' + data.downloaded_bytes_str + ' / ' + data.total_bytes_str + ')');
str += info_html('남은 시간', data.eta + '초');
str += info_html('진행률(current/total)', `${data.percent}% (${data.downloaded_bytes_str} / ${data.total_bytes_str})`);
str += info_html('남은 시간', `${data.eta}`);
str += info_html('다운 속도', data.speed_str);
}
return str;
@@ -138,13 +138,13 @@
let str = '<div class="row">';
let link = (left === 'URL' || left === '업로더');
str += '<div class="col-sm-2">';
str += '<b>' + left + '</b>';
str += `<b>${left}</b>`;
str += '</div>';
str += '<div class="col-sm-10">';
str += '<div class="input-group col-sm-9">';
str += '<span class="text-left" style="padding-left:10px; padding-top:3px">';
str += '<span class="text-left" style="padding-left: 10px; padding-top: 3px">';
if (link) {
str += '<a href="' + option + '" target="_blank">';
str += `<a href="${option}" target="_blank">`;
}
str += right;
if (link) {

View File

@@ -9,39 +9,13 @@
{{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder='저장 폴더 경로', desc=['템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template 참고', '기본값은 "%(title)s-%(id)s.%(ext)s"입니다.']) }}
{{ macros.setting_input_text('proxy', '프록시', value=arg['proxy'], placeholder='프록시 주소', desc=['HTTP/HTTPS/SOCKS를 지원합니다. 예) socks5://127.0.0.1:1080/', '빈칸으로 두면 프록시를 사용하지 않습니다.']) }}
{{ macros.setting_checkbox('activate_cors', 'CORS 허용', value=arg['activate_cors'], desc='API로의 크로스 도메인 요청을 허용합니다. 설정 저장 후 재시작이 필요합니다.') }}
{{ macros.setting_button([['setting_save', '저장']]) }}
{{ macros.setting_button([['global_setting_save_btn', '저장']]) }}
</form>
</div>
<script>
"use strict";
const package_name = '{{ arg["package_name"] }}';
$(function () {
// 설정 저장
$('#setting_save').click(function () {
let formData = get_formdata('#setting');
$.ajax({
url: '/' + package_name + '/ajax/setting_save',
type: 'POST',
cache: false,
data: formData,
dataType: 'json',
success: function (ret) {
if (ret) {
$.notify('<strong>설정을 저장하였습니다.</strong>', {
type: 'success'
});
} else {
$.notify('<strong>설정을 저장하지 못하였습니다.</strong>', {
type: 'warning'
});
}
}
});
return false;
});
});
</script>
{% endblock %}