Files
youtube-dl/templates/youtube-dl_list.html
2020-02-05 20:54:30 +09:00

130 lines
3.5 KiB
HTML

{% extends "base.html" %}
{% block content %}
<style>
.row > div {
padding-top: 3px;
padding-bottom:3px;
}
.row {
align-items: center;
word-break: break-all;
}
.row > div:nth-child(odd) {
align-items: right;
text-align: right;
}
.row > div:nth-child(even) {
align-items: left;
text-align: left;
}
</style>
<table id="result_table" class="table table-sm tableRowHover">
<thead>
<tr>
<th style="width:5%">IDX</th>
<th style="width:10%">시작시간</th>
<th style="width:56%">파일명</th>
<th style="width:8%">상태</th>
<th style="width:5%">길이</th>
<th style="width:8%">진행시간</th>
<th style="width:8%">Action</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<script>
"use strict";
$(function () {
var package_name = '{{ arg["package_name"] }}';
$.ajax({
url: '/' + package_name + '/ajax/list',
type: 'POST',
cache: false,
data: { },
dataType: 'json',
success: function (data) {
$('#list').html('');
var str = '';
for (var i in data) {
str += make_item(data[i]);
}
$('#list').html(str);
}
});
$('body').on('click', '#stop', function (e) {
var index = $(this).data('index');
$.ajax({
url: '/' + package_name + '/ajax/stop',
type: 'POST',
cache: false,
data: {
index: index
},
dataType: 'json',
success: function (data) {
location.reload(); // 새로고침
}
});
return false;
});
});
function make_item(data) {
var str = '<tr style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_' + data.index + '" aria-expanded="true">';
str += '<td scope="col" style="width:5%">' + (data.index + 1) + '</td>';
str += '<td scope="col" style="width:10%">' + data.start_time + '</td>';
str += '<td scope="col" style="width:56%">' + data.filename + '</td>';
str += '<td id="status_' + data.index + '" scope="col" style="width:8%">' + data.status_ko + '</td>';
str += '<td scope="col" style="width:5%">' + data.duration_str + '</td>';
str += '<td id="download_time_' + data.index + '" scope="col" style="width:8%">' + data.download_time + '</td>';
str += '<td id="button_' + data.index + '" scope="col" style="width:8%" class="tableRowHoverOff">';
if (data.status_str == 'START') {
str += '<button id="stop" class="align-middle btn btn-outline-danger btn-sm" data-index="' + data.index + '">중지</button>';
}
str += '</td>';
str += '</tr>';
str += '<tr class="collapse tableRowHoverOff" style="cursor: pointer;" id="collapse_' + data.index + '">';
str += '<td colspan="8">';
str += '<div id="detail_' + data.index + '">';
str += get_detail(data);
str += '</div>';
str += '</td>';
str += '</tr>';
return str;
}
function get_detail(data) {
var str = info_html('URL', data.url);
str += info_html('임시경로', data.temp_path + '/' + data.filename);
str += info_html('저장경로', data.save_path + '/' + data.filename);
str += info_html('종료시간', data.end_time);
str += info_html('포맷', data.format);
return str;
}
function info_html(left, right) {
var str = '<div class="row">';
str += '<div class="col-sm-2">';
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">';
if (left == 'URL') {
str += '<a href="' + right + '" target="_blank">';
}
str += right;
if (left == 'URL') {
str += '</a>';
}
str += '</span></div></div></div>';
return str;
}
</script>
{% endblock %}