From 86a3287859b4444b90597ec256998834f9f03619 Mon Sep 17 00:00:00 2001
From: joyfuI <jong970105@gmail.com>
Date: Fri, 5 Feb 2021 21:35:49 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=9C=EC=9D=B4=EC=BF=BC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=B5=9C=EC=86=8C=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/youtube-dl_download.html |  96 ++++++++++-----------
 templates/youtube-dl_list.html     | 130 ++++++++++++++++-------------
 templates/youtube-dl_setting.html  |  73 ++++++++--------
 3 files changed, 152 insertions(+), 147 deletions(-)

diff --git a/templates/youtube-dl_download.html b/templates/youtube-dl_download.html
index c192cfd..0921f76 100644
--- a/templates/youtube-dl_download.html
+++ b/templates/youtube-dl_download.html
@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% macro setting_select2(id, title, options, col='9', desc=None, value=None) %}
+{% macro my_setting_select(id, title, options, col='9', desc=None, value=None) %}
     {{ macros.setting_top(title) }}
     <div class="input-group col-sm-{{ col }}">
         <select id="{{ id }}" name="{{ id }}" class="form-control form-control-sm">
@@ -31,68 +31,62 @@
 
 {% block content %}
 
-    <div>
+    <form id="download">
         {{ macros.setting_input_text('url', 'URL', placeholder='http:// 주소', desc='유튜브, 네이버TV 등 동영상 주소') }}
         {{ macros.setting_input_text('filename', '파일명', value=arg['filename'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template 참고') }}
         {{ macros.setting_select('preset', '동영상 포맷 프리셋', arg['preset_list'], col='3') }}
         {{ macros.setting_input_text('format', '동영상 포맷', desc=['포맷 지정은 https://github.com/ytdl-org/youtube-dl/#format-selection 참고', '빈칸으로 두면 최고 화질로 다운로드합니다.']) }}
-        {{ setting_select2('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
+        {{ my_setting_select('postprocessor', '후처리', arg['postprocessor_list'], col='3', desc='다운로드 후 FFmpeg로 후처리합니다.') }}
         {{ macros.setting_button([['download_btn', '다운로드']]) }}
-    </div>
+    </form>
 
     <script>
         "use strict";
         const package_name = '{{ arg["package_name"] }}';
 
-        $(function () {
-            // 프리셋 변경
-            $('#preset').change(function () {
-                if ($(this).val() === '_custom') {
-                    return;
-                }
-                $('#format').val($(this).val());
-            });
-            $('#format').change(function () {
-                $('#preset').val('_custom');
-            });
+        // 프리셋 변경
+        const preset = document.getElementById('preset');
+        const format = document.getElementById('format');
+        preset.addEventListener('change', () => {
+            if (preset.value !== '_custom') {
+                format.value = preset.value;
+            }
+        });
+        format.addEventListener('input', () => {
+            preset.value = '_custom';
+        });
 
-            // 후처리 변경
-            $('#postprocessor').change(function () {
-                if ($(this).find($(`option[value="${$(this).val()}"]`)).parent().attr('label') === '오디오 추출') {
-                    $('#preset').val('bestaudio/best').change();
-                }
-            });
+        // 후처리 변경
+        const postprocessor = document.getElementById('postprocessor');
+        postprocessor.addEventListener('change', () => {
+            const select = postprocessor.selectedOptions[0];
+            if (select.parentElement.label === '오디오 추출') {
+                preset.value = 'bestaudio/best';
+                format.value = preset.value;
+            }
+        });
 
-            // 다운로드
-            $('#download_btn').click(function () {
-                let url = $('#url').val();
-                if (url.startsWith('http') === false) {
-                    $.notify('<strong>URL을 입력하세요.</strong>', {
-                        type: 'warning'
-                    });
-                    return false;
-                }
-                $.ajax({
-                    url: `/${package_name}/ajax/download`,
-                    type: 'POST',
-                    cache: false,
-                    data: {
-                        url: url,
-                        filename: $('#filename').val(),
-                        format: $('#format').val(),
-                        postprocessor: $('#postprocessor').val()
-                    },
-                    dataType: 'json'
-                }).done(function () {
-                    $.notify('<strong>분석중..</strong>', {
-                        type: 'info'
-                    });
-                }).fail(function () {
-                    $.notify('<strong>다운로드 요청 실패</strong>', {
-                        type: 'danger'
-                    });
-                });
-                return false;
+        // 다운로드
+        const download_btn = document.getElementById('download_btn');
+        download_btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            const url = document.getElementById('url').value;
+            if (!url.startsWith('http')) {
+                notify('URL을 입력하세요.', 'warning');
+                return;
+            }
+
+            fetch(`/${package_name}/ajax/download`, {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                body: get_formdata('#download')
+            }).then(response => response.json()).then(() => {
+                notify('분석중..', 'info');
+            }).catch(() => {
+                notify('다운로드 요청 실패', 'danger');
             });
         });
     </script>
diff --git a/templates/youtube-dl_list.html b/templates/youtube-dl_list.html
index f60fd25..81548f9 100644
--- a/templates/youtube-dl_list.html
+++ b/templates/youtube-dl_list.html
@@ -19,6 +19,15 @@
         .row > div:nth-child(even) {
             text-align: left;
         }
+
+        .cursor-pointer {
+            cursor: pointer
+        }
+
+        .info-padding {
+            padding-left: 10px;
+            padding-top: 3px;
+        }
     </style>
 
     {{ macros.m_row_start() }}
@@ -26,7 +35,7 @@
     {{ macros.m_row_end() }}
     <div class="d-inline-block"></div>
 
-    <table id="result_table" class="table table-sm tableRowHover">
+    <table id="list_table" class="table table-sm tableRowHover">
         <thead>
         <tr>
             <th style="width: 5%">IDX</th>
@@ -40,75 +49,80 @@
             <th style="width: 8%">Action</th>
         </tr>
         </thead>
-        <tbody id="list"></tbody>
+        <tbody id="list_tbody"></tbody>
     </table>
 
     <script>
         "use strict";
         const package_name = '{{ arg["package_name"] }}';
 
-        $(function () {
-            let socket = io.connect(`${location.origin}/${package_name}`);
+        // 소켓
+        const socket = io.connect(`${location.origin}/${package_name}`);
+        const list_tbody = document.getElementById('list_tbody');
+        socket.on('add', (data) => {
+            list_tbody.innerHTML += make_item(data);
+        });
+        socket.on('status', (data) => {
+            status_html(data);
+        });
 
-            socket.on('add', function (data) {
-                $('#list').append(make_item(data));
-            });
+        // 목록 불러오기
+        fetch(`/${package_name}/ajax/list`, {
+            method: 'POST',
+            cache: 'no-cache',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+            }
+        }).then(response => response.json()).then((data) => {
+            let str = '';
+            for (const item of data) {
+                str += make_item(item);
+            }
+            list_tbody.innerHTML = str;
+        });
 
-            socket.on('status', function (data) {
-                status_html(data);
-            });
-
-            $.ajax({
-                url: `/${package_name}/ajax/list`,
-                type: 'POST',
-                cache: false,
-                data: {},
-                dataType: 'json'
-            }).done(function (data) {
-                let str = '';
-                for (let item of data) {
-                    str += make_item(item);
+        // 전체 중지
+        const all_stop_btn = document.getElementById('all_stop_btn');
+        all_stop_btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            fetch(`/${package_name}/ajax/all_stop`, {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                 }
-                $('#list').html(str);
+            }).then(response => response.json()).then(() => {
+                location.reload();
             });
+        });
 
-            // 전체 중지
-            $('#all_stop_btn').click(function () {
-                $.ajax({
-                    url: `/${package_name}/ajax/all_stop`,
-                    type: 'POST',
-                    cache: false,
-                    data: {},
-                    dataType: 'json'
-                }).done(function () {
-                    location.reload();
-                });
-                return false;
-            });
-
-            // 중지
-            $('#list').on('click', '.youtube-dl_stop', function () {
-                let index = $(this).data('index');
-                $.ajax({
-                    url: `/${package_name}/ajax/stop`,
-                    type: 'POST',
-                    cache: false,
-                    data: {
-                        index: index
-                    },
-                    dataType: 'json'
-                }).done(function () {
-                    location.reload();
-                });
-                return false;
+        // 중지
+        const list_table = document.getElementById('list_table');
+        list_table.addEventListener('click', (event) => {
+            event.preventDefault();
+            const target = event.target;
+            if (!target.classList.contains('youtubeDl-stop')) {
+                return;
+            }
+            fetch(`/${package_name}/ajax/stop`, {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                body: new URLSearchParams({
+                    index: target.dataset.index
+                })
+            }).then(response => response.json()).then(() => {
+                location.reload();
             });
         });
 
         function make_item(data) {
-            let str = `<tr id="item_${data.index}" aria-expanded="true" style="cursor: pointer" data-toggle="collapse" data-target="#collapse_${data.index}">`;
+            let str = `<tr id="item_${data.index}" class="cursor-pointer" aria-expanded="true" data-toggle="collapse" data-target="#collapse_${data.index}">`;
             str += get_item(data);
             str += '</tr>';
-            str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff" style="cursor: pointer">`;
+            str += `<tr id="collapse_${data.index}" class="collapse tableRowHoverOff">`;
             str += '<td colspan="9">';
             str += `<div id="detail_${data.index}">`;
             str += get_detail(data);
@@ -133,7 +147,7 @@
             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 youtubeDl-stop" data-index="${data.index}">중지</button>`;
             }
             str += '</td>';
             return str;
@@ -157,13 +171,13 @@
 
         function info_html(left, right, option) {
             let str = '<div class="row">';
-            let link = (left === 'URL' || left === '업로더');
+            const link = (left === 'URL' || left === '업로더');
             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">';
+            str += '<span class="text-left info-padding">';
             if (link) {
                 str += `<a href="${option}" target="_blank">`;
             }
@@ -176,8 +190,8 @@
         }
 
         function status_html(data) {
-            $(`#item_${data.index}`).html(get_item(data));
-            $(`#detail_${data.index}`).html(get_detail(data));
+            document.getElementById(`item_${data.index}`).innerHTML = get_item(data);
+            document.getElementById(`detail_${data.index}`).innerHTML = get_detail(data);
         }
     </script>
 
diff --git a/templates/youtube-dl_setting.html b/templates/youtube-dl_setting.html
index b819341..55fb8c0 100644
--- a/templates/youtube-dl_setting.html
+++ b/templates/youtube-dl_setting.html
@@ -1,49 +1,46 @@
 {% extends "base.html" %}
 {% block content %}
 
-    <div>
-        <form id="setting">
-            {{ macros.setting_radio('youtube_dl_package', 'youtube-dl', arg['package_list'], value=arg['youtube_dl_package'], desc='사용할 youtube-dl 패키지를 선택합니다. 설정 저장 후 재시작이 필요합니다.') }}
-            {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version'], disabled=True) }}
-            {{ macros.setting_input_text_and_buttons('ffmpeg_path', 'FFmpeg 경로', [['ffmpeg_version', '버전확인']], value=arg['ffmpeg_path'], placeholder='ffmpeg', desc='SJVA에 내장된 버전 말고 원하는 버전을 사용할 수 있습니다.') }}
-            {{ macros.setting_input_text('temp_path', '임시 폴더', value=arg['temp_path'], desc='다운로드 파일이 임시로 저장될 폴더입니다.') }}
-            {{ macros.setting_input_text('save_path', '저장 폴더', value=arg['save_path'], desc='정상적으로 완료된 파일이 이동할 폴더입니다.') }}
-            {{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder=arg['DEFAULT_FILENAME'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template 참고') }}
-            {{ macros.setting_input_text('proxy', '프록시', value=arg['proxy'], 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([['global_setting_save_btn', '저장']]) }}
-        </form>
-    </div>
+    <form id="setting">
+        {{ macros.setting_radio('youtube_dl_package', 'youtube-dl', arg['package_list'], value=arg['youtube_dl_package'], desc='사용할 youtube-dl 패키지를 선택합니다. 설정 저장 후 재시작이 필요합니다.') }}
+        {{ macros.setting_input_text('youtube_dl_version', 'youtube-dl 버전', value=arg['youtube_dl_version'], disabled=True) }}
+        {{ macros.setting_input_text_and_buttons('ffmpeg_path', 'FFmpeg 경로', [['ffmpeg_version_btn', '버전확인']], value=arg['ffmpeg_path'], placeholder='ffmpeg', desc='SJVA에 내장된 버전 말고 원하는 버전을 사용할 수 있습니다.') }}
+        {{ macros.setting_input_text('temp_path', '임시 폴더', value=arg['temp_path'], desc='다운로드 파일이 임시로 저장될 폴더입니다.') }}
+        {{ macros.setting_input_text('save_path', '저장 폴더', value=arg['save_path'], desc='정상적으로 완료된 파일이 이동할 폴더입니다.') }}
+        {{ macros.setting_input_text('default_filename', '기본 파일명', value=arg['default_filename'], placeholder=arg['DEFAULT_FILENAME'], desc='템플릿 규칙은 https://github.com/ytdl-org/youtube-dl/#output-template 참고') }}
+        {{ macros.setting_input_text('proxy', '프록시', value=arg['proxy'], 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([['global_setting_save_btn', '저장']]) }}
+    </form>
 
     <script>
         "use strict";
         const package_name = '{{ arg["package_name"] }}';
 
-        $(function () {
-            // FFmpeg 버전확인
-            $('#ffmpeg_version').click(function () {
-                let ffmpeg_path = $('#ffmpeg_path').val();
-                if (ffmpeg_path.length === 0) {
-                    ffmpeg_path = 'ffmpeg';
-                }
-                $.ajax({
-                    url: `/${package_name}/ajax/ffmpeg_version`,
-                    type: 'POST',
-                    cache: false,
-                    data: {
-                        path: ffmpeg_path
-                    },
-                    dataType: 'json'
-                }).done(function (data) {
-                    $('#modal_title').html(`${ffmpeg_path} -version`);
-                    $('#modal_body').html(data);
-                    $('#large_modal').modal();
-                }).fail(function () {
-                    $.notify(`<strong>버전확인 실패</strong><br>${ffmpeg_path} -version`, {
-                        type: 'danger'
-                    });
-                });
-                return false;
+        // FFmpeg 버전확인
+        const ffmpeg_version_btn = document.getElementById('ffmpeg_version_btn');
+        ffmpeg_version_btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            let ffmpeg_path = document.getElementById('ffmpeg_path').value;
+            if (ffmpeg_path.length === 0) {
+                ffmpeg_path = 'ffmpeg';
+            }
+
+            fetch(`/${package_name}/ajax/ffmpeg_version`, {
+                method: 'POST',
+                cache: 'no-cache',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
+                },
+                body: new URLSearchParams({
+                    path: ffmpeg_path
+                })
+            }).then(response => response.json()).then((data) => {
+                document.getElementById('modal_title').innerHTML = `${ffmpeg_path} -version`;
+                document.getElementById('modal_body').innerHTML = data;
+                $('#large_modal').modal();
+            }).catch(() => {
+                notify('버전확인 실패', 'danger');
             });
         });
     </script>