first commit

2022-04-30 16:45:26 +09:00
commit 4cd21e759c
26 changed files with 4434 additions and 0 deletions
--- a/static/css/inflearn_category.css
+++ b/static/css/inflearn_category.css
@@ -0,0 +1,201 @@
+button.code-button {
+  min-width: 82px !important;
+}
+.tooltip {
+  position: relative;
+  display: block;
+}
+
+[data-tooltip-text]:hover {
+  position: relative;
+}
+
+[data-tooltip-text]:after {
+  -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  -moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  background-color: rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+  color: #ffffff;
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding: 7px 12px;
+  position: absolute;
+  width: auto;
+  min-width: 50px;
+  max-width: 300px;
+  word-wrap: break-word;
+
+  z-index: 9999;
+
+  opacity: 0;
+  left: -9999px;
+  top: 90%;
+
+  content: attr(data-tooltip-text);
+}
+
+[data-tooltip-text]:hover:after {
+  top: 230%;
+  left: 0;
+  opacity: 1;
+}
+[data-tooltip-text]:hover {
+  position: relative;
+}
+
+[data-tooltip-text]:after {
+  -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  -moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  background-color: rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+  color: #ffffff;
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding: 7px 12px;
+  position: absolute;
+  width: auto;
+  min-width: 50px;
+  max-width: 300px;
+  word-wrap: break-word;
+
+  z-index: 9999;
+
+  opacity: 0;
+  left: -9999px;
+  top: -210% !important;
+
+  content: attr(data-tooltip-text);
+}
+
+[data-tooltip-text]:hover:after {
+  top: 130%;
+  left: 0;
+  opacity: 1;
+}
+
+#airing_list {
+  display: none;
+}
+
+.cut-text {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 100%;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 100%;
+  }
+}
+
+#screen_movie_list {
+  margin-top: 10px;
+}
+/*  .spinner {*/
+/*  width: 40px;*/
+/*  height: 40px;*/
+/*  background-color: #333;*/
+
+/*  margin: 100px auto;*/
+/*  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;*/
+/*  animation: sk-rotateplane 1.2s infinite ease-in-out;*/
+/*}*/
+
+/*@-webkit-keyframes sk-rotateplane {*/
+/*  0% { -webkit-transform: perspective(120px) }*/
+/*  50% { -webkit-transform: perspective(120px) rotateY(180deg) }*/
+/*  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }*/
+/*}*/
+
+/*@keyframes sk-rotateplane {*/
+/*  0% {*/
+/*    transform: perspective(120px) rotateX(0deg) rotateY(0deg);*/
+/*    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)*/
+/*  } 50% {*/
+/*    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);*/
+/*    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)*/
+/*  } 100% {*/
+/*    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);*/
+/*    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);*/
+/*  }*/
+
+/*}*/
+.spinner {
+  width: 40px;
+  height: 40px;
+
+  position: relative;
+  margin: 100px auto;
+}
+
+.double-bounce1,
+.double-bounce2 {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #333;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  -webkit-animation: sk-bounce 2s infinite ease-in-out;
+  animation: sk-bounce 2s infinite ease-in-out;
+}
+
+.double-bounce2 {
+  -webkit-animation-delay: -1s;
+  animation-delay: -1s;
+}
+
+@-webkit-keyframes sk-bounce {
+  0%,
+  100% {
+    -webkit-transform: scale(0);
+  }
+  50% {
+    -webkit-transform: scale(1);
+  }
+}
+
+@keyframes sk-bounce {
+  0%,
+  100% {
+    transform: scale(0);
+    -webkit-transform: scale(0);
+  }
+  50% {
+    transform: scale(1);
+    -webkit-transform: scale(1);
+  }
+}
+
+.badge-on-image {
+  position: absolute;
+  top: 2px;
+  /*bottom: 2px; !* position where you want it *!*/
+  right: 2px;
+  padding: 5px 12px;
+}
--- a/static/css/inflearn_list.css
+++ b/static/css/inflearn_list.css
@@ -0,0 +1,192 @@
+{% extends "base.html" %}
+{% block content %}
+<!--{#    <div>#}-->
+<!--{#        미구현#}-->
+<!--{#    </div>#}-->
+<div>
+  <form id="form_search" class="form-inline" style="text-align:left">
+    <div class="container-fluid">
+      <div class="row show-grid">
+        <span class="col-md-4">
+          <select id="order" name="order" class="form-control form-control-sm">
+            <option value="desc">최근순</option>
+            <option value="asc">오래된순</option>
+          </select>
+          <select id="option" name="option" class="form-control form-control-sm">
+            <option value="all">전체</option>
+            <option value="completed">완료</option>
+          </select>
+        </span>
+        <span class="col-md-8">
+          <input id="search_word" name="search_word" class="form-control form-control-sm w-75" type="text" placeholder="" aria-label="Search">
+          <button id="search" class="btn btn-sm btn-outline-success">검색</button>
+          <button id="reset_btn" class="btn btn-sm btn-outline-success">리셋</button>
+        </span>
+      </div>
+    </div>
+  </form>
+  <div id='page1'></div>
+  {{ macros.m_hr_head_top() }}
+  {{ macros.m_row_start('0') }}
+  {{ macros.m_col(2,  macros.m_strong('Poster')) }}
+  {{ macros.m_col(10,  macros.m_strong('Info')) }}
+  {{ macros.m_row_end() }}
+  {{ macros.m_hr_head_bottom() }}
+  <div id="list_div"></div>
+  <div id='page2'></div>
+</div>
+<script type="text/javascript">
+const package_name = "{{arg['package_name']}}";
+// {#const sub = "{{arg['sub']}}";#}
+// {#const sub = "list";#}
+const sub = ""
+let current_data = null;
+
+const get_list = (page, move_top=true) => {
+    let formData = get_formdata('#form_search')
+    // console.log(formData)
+    formData += '&page=' + page;
+    $.ajax({
+        url: '/' + package_name + '/ajax/web_list',
+        type: "POST",
+        cache: false,
+        data: formData,
+        dataType: 'json',
+        success: (data) => {
+          current_data = data;
+          if (data) {
+            if (move_top)
+              window.scrollTo(0,0);
+            make_list(data.list)
+              // {#console.log(data)#}
+              // {#console.log(ret.data)#}
+          } else {
+              $.notify('<strong>분석 실패</strong><br>' + ret.log, {type: 'warning'});
+          }
+        }
+    });
+}
+
+function sub_request_search(page, move_top=true) {
+  let formData = get_formdata('#form_search')
+  // console.log(formData)
+  formData += '&page=' + page;
+  $.ajax({
+    url: '/' + package_name + '/ajax/web_list',
+    type: "POST",
+    cache: false,
+    data: formData,
+    dataType: "json",
+    success: function (data) {
+      current_data = data;
+      if (move_top)
+        window.scrollTo(0,0);
+      make_list(data.list)
+      make_page_html(data.paging)
+    }
+  });
+}
+
+$("body").on('click', '#remove_btn', function(e) {
+  e.preventDefault();
+  let id = $(this).data('id');
+  $.ajax({
+    url: '/'+package_name+'/ajax/db_remove',
+    type: "POST",
+    cache: false,
+    data: {id:id},
+    dataType: "json",
+    success: function (data) {
+      if (data) {
+        $.notify('<strong>삭제되었습니다.</strong>', {
+          type: 'success'
+        });
+        sub_request_search(current_data.paging.current_page, false)
+        // get_list()
+      } else {
+        $.notify('<strong>삭제 실패</strong>', {
+          type: 'warning'
+        });
+      }
+    }
+  });
+});
+
+$(document).ready(function(){
+  // {#global_sub_request_search('1');#}
+    get_list(1)
+});
+
+$("body").on('click', '#page', function(e){
+  e.preventDefault();
+  sub_request_search($(this).data('page'));
+});
+
+$("body").on('click', '#json_btn', function(e){
+  e.preventDefault();
+  var id = $(this).data('id');
+  for (i in current_data.list) {
+    if (current_data.list[i].id == id) {
+      m_modal(current_data.list[i])
+    }
+  }
+});
+
+$("body").on('click', '#self_search_btn', function(e){
+  e.preventDefault();
+  let search_word = $(this).data('title');
+  document.getElementById("search_word").value = search_word;
+  sub_request_search('1')
+});
+
+$("body").on('click', '#request_btn', function(e){
+  e.preventDefault();
+  var content_code = $(this).data('content_code');
+  $(location).attr('href', '/' + package_name + '/request?code=' + content_code)
+});
+
+
+function make_list(data) {
+  //console.log(data)
+  let tmp, tmp2 = '';
+  // console.log(data)
+  if (data.length > 0) {
+    let str = ''
+    for (let i in data) {
+      console.log(data[i])
+      str += m_row_start();
+      str += m_col(1, data[i].id);
+      tmp = (data[i].status == 'completed') ? '완료' : '미완료';
+      str += m_col(1, tmp);
+      tmp = data[i].created_time + '(추가)<br/>';
+      if (data[i].completed_time != null)
+        tmp += data[i].completed_time + '(완료)';
+      str += m_col(3, tmp)
+      tmp_save_path = (data[i].contents_json.save_path) ? (data[i].contents_json.save_path) : ''
+      tmp =  tmp_save_path + '<br />' + data[i].contents_json.filename + '<br /><br />';
+      tmp2 = m_button('json_btn', 'JSON', [{'key': 'id', 'value': data[i].id}]);
+      tmp2 += m_button('request_btn', '작품 검색', [{'key': 'content_code', 'value': data[i].contents_json.program_code}]);
+      tmp2 += m_button('self_search_btn', '목록 검색', [{'key': 'title', 'value': data[i].contents_json.program_title}]);
+      tmp2 += m_button('remove_btn', '삭제', [{'key': 'id', 'value': data[i].id}]);
+      tmp += m_button_group(tmp2)
+      str += m_col(7, tmp)
+      str += m_row_end();
+      if (i != data.length - 1) str += m_hr();
+    }
+    document.getElementById("list_div").innerHTML = str;
+  } else {
+    console.log('목록없슴')
+    return false;
+  }
+}
+
+
+</script>
+<style>
+  @media (min-width: 576px) {
+    .container {
+      max-width: 98%;
+    }
+  }
+</style>
+{% endblock %}
--- a/static/css/inflearn_request.css
+++ b/static/css/inflearn_request.css
@@ -0,0 +1,117 @@
+brg['current_code']}}";utton.code-button {
+  min-width: 82px !important;
+}
+.tooltip {
+  position: relative;
+  display: block;
+}
+
+[data-tooltip-text]:hover {
+  position: relative;
+}
+
+[data-tooltip-text]:after {
+  -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  -moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  background-color: rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+  color: #ffffff;
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding: 7px 12px;
+  position: absolute;
+  width: auto;
+  min-width: 50px;
+  max-width: 300px;
+  word-wrap: break-word;
+
+  z-index: 9999;
+
+  opacity: 0;
+  left: -9999px;
+  top: 90%;
+
+  content: attr(data-tooltip-text);
+}
+
+[data-tooltip-text]:hover:after {
+  top: 230%;
+  left: 0;
+  opacity: 1;
+}
+[data-tooltip-text]:hover {
+  position: relative;
+}
+
+[data-tooltip-text]:after {
+  -webkit-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  -moz-transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  transition: bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
+
+  background-color: rgba(0, 0, 0, 0.8);
+
+  -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+  box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+
+  color: #ffffff;
+  font-size: 12px;
+  margin-bottom: 10px;
+  padding: 7px 12px;
+  position: absolute;
+  width: auto;
+  min-width: 50px;
+  max-width: 300px;
+  word-wrap: break-word;
+
+  z-index: 9999;
+
+  opacity: 0;
+  left: -9999px;
+  top: -210% !important;
+
+  content: attr(data-tooltip-text);
+}
+
+[data-tooltip-text]:hover:after {
+  top: 130%;
+  left: 0;
+  opacity: 1;
+}
+
+#airing_list {
+  display: none;
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 96%;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 94%;
+  }
+}
+@media (min-width: 576px) {
+  .container {
+    max-width: 96%;
+  }
+  .form-inline .form-control {
+    width: 98%;
+
+}
--- a/static/img_loader_x200.svg
+++ b/static/img_loader_x200.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(241, 242, 243); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="translate(27.166666666666664,27.166666666666664)">
+  <rect x="-18.5" y="-18.5" width="37" height="37" fill="#85a2b6">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1;1" begin="-0.3s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(72.83333333333333,27.166666666666664)">
+  <rect x="-18.5" y="-18.5" width="37" height="37" fill="#bbcedd">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1;1" begin="-0.2s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(27.166666666666664,72.83333333333333)">
+  <rect x="-18.5" y="-18.5" width="37" height="37" fill="#dce4eb">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1;1" begin="0s"></animateTransform>
+  </rect>
+</g>
+<g transform="translate(72.83333333333333,72.83333333333333)">
+  <rect x="-18.5" y="-18.5" width="37" height="37" fill="#fdfdfd">
+    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="1.1;1" begin="-0.1s"></animateTransform>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
--- a/static/js/inflearn_category.js
+++ b/static/js/inflearn_category.js
@@ -0,0 +1,791 @@
+// console.log("current_airing_data", current_airing_data);
+let current_data = "";
+let current_airing_data = "";
+let current_screen_movie_data = null;
+let code = "";
+let div_visible = false;
+let page = 1;
+let next_page = Number;
+let current_cate = "";
+let total_page = "";
+
+$("#anime_category #ing").on("click", function () {
+  let spinner = document.getElementById("spinner");
+  spinner.style.display = "block";
+  current_cate = "ing";
+  get_anime_list(1, "ing");
+});
+$("#anime_category #movie").on("click", function () {
+  current_cate = "movie";
+  get_anime_screen_movie(1);
+});
+$("#anime_category #complete_anilist").on("click", function () {
+  current_cate = "complete";
+  get_complete_anilist(1);
+});
+
+$("body").on("click", "#btn_search", function (e) {
+  e.preventDefault();
+  let query = $("#input_search").val();
+  // console.log(query);
+
+  if ($("#input_search").val() === "") {
+    console.log("search keyword nothing");
+    return false;
+  }
+
+  $.ajax({
+    url: "/" + package_name + "/ajax/search",
+    type: "POST",
+    cache: false,
+    data: { query: query },
+    // dataType: "json",
+    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
+    success: function (ret) {
+      if (ret.ret) {
+        make_screen_movie_list(ret);
+      } else {
+        $.notify("<strong>분석 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+const get_airing_list = () => {
+  let spinner = document.getElementById("spinner");
+  spinner.style.display = "block";
+  $.ajax({
+    url: "/" + package_name + "/ajax/airing_list",
+    type: "GET",
+    cache: false,
+    dataType: "json",
+    success: (ret) => {
+      current_airing_data = ret;
+      // console.log("ret::>", ret);
+      if (current_airing_data !== "") {
+        make_airing_list(ret);
+        div_visible = true;
+        spinner.style.display = "none";
+        // console.log(div_visible);
+      }
+    },
+  });
+
+  if (div_visible) {
+    //   {#$('#airing_list').toggle()#}
+  }
+};
+
+const get_anime_list = (page, type) => {
+  let url = "";
+  let data = { page: page, type: type };
+
+  switch (type) {
+    case "ing":
+      url = "/" + package_name + "/ajax/anime_list";
+      current_cate = "ing";
+      break;
+    case "movie":
+      url = "/" + package_name + "/ajax/screen_movie_list";
+      current_cate = "movie";
+      break;
+    case "complete":
+      url = "/" + package_name + "/ajax/screen_movie_list";
+      current_cate = "complete";
+      break;
+    default:
+      break;
+  }
+
+  $.ajax({
+    url: url,
+    type: "POST",
+    data: data,
+    cache: false,
+    dataType: "json",
+    success: (ret) => {
+      current_screen_movie_data = ret;
+      total_page = ret.total_page;
+      // console.log("ret::>", ret);
+
+      if (current_screen_movie_data !== "") {
+        make_screen_movie_list(ret, page);
+        div_visible = true;
+        // console.log(div_visible);
+        // $("img.lazyload").lazyload({
+        //   threshold : 400,
+        //   effect : "fadeIn",
+        // });
+      }
+      next_page = page + 1;
+    },
+  });
+};
+
+const get_anime_screen_movie = (page) => {
+  let data = { page: page };
+  $.ajax({
+    url: "/" + package_name + "/ajax/screen_movie_list",
+    type: "POST",
+    data: data,
+    cache: false,
+    dataType: "json",
+    success: (ret) => {
+      current_screen_movie_data = ret;
+      total_page = ret.total_page;
+      // console.log("ret::>", ret);
+
+      if (current_screen_movie_data !== "") {
+        make_screen_movie_list(ret, page);
+        $("img.lazyload").lazyload({
+          threshold: 100,
+          effect: "fadeIn",
+        });
+        div_visible = true;
+      }
+      next_page = page + 1;
+    },
+  });
+};
+
+const get_complete_anilist = (page) => {
+  let data = { page: page };
+  $.ajax({
+    url: "/" + package_name + "/ajax/complete_anilist",
+    type: "POST",
+    data: data,
+    cache: false,
+    dataType: "json",
+    success: (ret) => {
+      current_screen_movie_data = ret;
+      console.log("get_complete_anilist():ret >", ret);
+      total_page = ret.total_page;
+
+      if (current_screen_movie_data !== "") {
+        make_screen_movie_list(ret, page);
+        $("img.lazyload").lazyload({
+          threshold: 100,
+          effect: "fadeIn",
+        });
+        div_visible = true;
+      }
+      next_page = page + 1;
+    },
+  });
+};
+
+// console.log(div_visible);
+
+$(document).on("click", "button.code-button", function (e) {
+  e.preventDefault();
+  // console.log("click");
+  // console.log("code to click:" + $(this).data("code"));
+  document.getElementById("code").value = $(this).data("code");
+  $("#code").val($(this).data("code"));
+  $("#airing_list").toggle();
+  code = document.getElementById("code").value;
+  document.getElementById("analysis_btn").click();
+});
+$(".code-button").tooltip();
+
+$("body").on("click", "#analysis_btn", function (e) {
+  e.preventDefault();
+  code = document.getElementById("code").value;
+  if (document.getElementById("code").value === "") {
+    console.log("code 값을 입력 해주세요.");
+    return;
+  }
+
+  $.ajax({
+    url: "/" + package_name + "/ajax/analysis",
+    type: "POST",
+    cache: false,
+    data: { code: code },
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret) {
+        make_program(ret);
+      } else {
+        $.notify("<strong>분석 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#go_inflearn_btn", function (e) {
+  e.preventDefault();
+  window.open(inflearn_url, "_blank");
+});
+
+function make_airing_list(data) {
+  let str = "";
+  let tmp = "";
+
+  tmp =
+    '<div id="exModal" class="form-inline" role="dialog" aria-hidden="true">';
+  tmp += "</div>";
+  str += m_hr_black();
+  str +=
+    '<div id="inner_airing" class="d-flex align-content-between flex-wrapd-flex align-content-between flex-wrap">';
+  for (i in data.episode) {
+    tmp =
+      '<div class="mx-1 mb-1"><button id="code_button" data-code="' +
+      data.episode[i].code +
+      '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +
+      '<span data-tooltip-text="' +
+      data.episode[i].title +
+      '">' +
+      data.episode[i].code +
+      "</span></button></div>";
+
+    str += tmp;
+  }
+  str += "</div>";
+  str += m_hr_black();
+
+  document.getElementById("airing_list").innerHTML = str;
+  $("img.lazyload").lazyload({
+    threshold: 100,
+    effect: "fadeIn",
+  });
+}
+
+function make_screen_movie_list(data, page) {
+  let str = "";
+  let tmp = "";
+
+  let page_elem = "";
+  if (page === undefined) {
+  } else {
+    page_elem = '<span class="badge bg-warning">' + page + "</span>";
+  }
+
+  str += "<div>";
+  str +=
+    '<button type="button" class="btn btn-info">Page ' +
+    page_elem +
+    "</button>";
+  str += "</div>";
+  str += '<div id="inner_screen_movie" class="row infinite-scroll">';
+  for (let i in data.episode) {
+    tmp = '<div class="col-6 col-sm-4 col-md-3">';
+    tmp += '<div class="card">';
+    // tmp += '<div class="card-header">';
+
+    // tmp +=
+    //   '<img class="card-img-top lazyload" src="./static/img_loader_x200.svg" data-original="' + data.episode[i].image_link + '" />';
+    tmp +=
+      '<img class="card-img-top lazy" src="./static/img_loader_x200.svg" data-lazy-src="' +
+      data.episode[i].image_link +
+      '" style="cursor: pointer" onclick="location.href=\'./request?code=' +
+      data.episode[i].code +
+      "'\"/>";
+    if (current_cate == "ing") {
+      tmp +=
+        '<span class="badge badge-danger badge-on-image">' +
+        data.episode[i].chapter +
+        "</span>";
+    }
+    tmp += '<div class="card-body">';
+    tmp += '<h5 class="card-title">' + data.episode[i].title + "</h5>";
+    tmp +=
+      '<button id="add_whitelist" name="add_whitelist" class="btn btn-sm btn-success mb-1" data-code="' +
+      data.episode[i].code +
+      '"><p class="card-text">' +
+      data.episode[i].code +
+      " 자동 추가</p></button>";
+    tmp +=
+      '<a href="./request?code=' +
+      data.episode[i].code +
+      '" class="btn btn-primary cut-text">' +
+      data.episode[i].title +
+      "</a>";
+    tmp += "</div>";
+    tmp += "</div>";
+    // tmp += "</div>"
+    tmp += "</div>";
+    str += tmp;
+  }
+  str += "</div>";
+  str += m_hr_black();
+
+  if (page > 1) {
+    const temp = document.createElement("div");
+    temp.innerHTML = str;
+    while (temp.firstChild) {
+      document.getElementById("screen_movie_list").appendChild(temp.firstChild);
+    }
+    page++;
+  } else {
+    document.getElementById("screen_movie_list").innerHTML = str;
+  }
+  $("img.lazyload").lazyload({
+    threshold: 100,
+    effect: "fadeIn",
+  });
+}
+
+const spinner = document.getElementById("spinner");
+const imagesContainer = document.getElementById("inner_screen_movie");
+const infiniteContainer = document.getElementById("screen_movie_list");
+
+const loadNextAnimes = (cate, page) => {
+  spinner.style.display = "block";
+  const data = { type: cate, page: String(page) };
+  let url = "";
+
+  switch (cate) {
+    case "ing":
+      url = "/" + package_name + "/ajax/anime_list";
+      current_cate = "ing";
+      break;
+    case "movie":
+      url = "/" + package_name + "/ajax/screen_movie_list";
+      current_cate = "movie";
+      break;
+    case "complete":
+      url = "/" + package_name + "/ajax/anime_list";
+      current_cate = "complete";
+      break;
+    default:
+      break;
+  }
+
+  // console.log('fetch_url::>', url)
+  console.log("cate::>", cate);
+  console.log("current_cate::>", current_cate);
+
+  if (page > total_page) {
+    console.log("전체 페이지 초과");
+    document.getElementById("spinner").style.display = "none";
+    return false;
+  }
+
+  fetch(url, {
+    method: "POST",
+    cache: "no-cache",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded",
+    },
+    body: new URLSearchParams(data),
+  })
+    .then((res) => {
+      document.getElementById("spinner").style.display = "block";
+      return res.json();
+    })
+    .then((response) => {
+      // console.log("return page:::> ", response.page);
+      make_screen_movie_list(response, response.page);
+      $("img.lazyload").lazyload({
+        threshold: 100,
+        effect: "fadeIn",
+      });
+      page++;
+      next_page++;
+    })
+    .catch((error) => console.error("Error:", error));
+};
+
+const onScroll = (e) => {
+  threshold = 50;
+  console.dir(e.target.scrollingElement.scrollHeight);
+  const { scrollTop, scrollHeight, clientHeight } = e.target.scrollingElement;
+  // if (Math.round(clientHeight + scrollTop) >= scrollHeight + threshold) {
+  if (clientHeight + scrollTop + threshold >= scrollHeight) {
+    document.getElementById("spinner").style.display = "block";
+    // setTimeout()
+    console.log("loading");
+    // console.log(current_cate)
+    // console.log("now page::> ", page);
+    // console.log("next_page::> ", next_page);
+    setTimeout(loadNextAnimes(current_cate, next_page), 1500);
+    $("img.lazyload").lazyload({
+      threshold: 100,
+      effect: "fadeIn",
+    });
+  }
+};
+
+const debounce = (func, delay) => {
+  let timeoutId = null;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(func.bind(null, ...args), delay);
+  };
+};
+
+document.addEventListener("scroll", debounce(onScroll, 300));
+
+function make_program(data) {
+  let str,
+    tmp = "";
+
+  tmp = '<div class="form-inline">';
+  tmp += m_button("check_download_btn", "선택 다운로드 추가", []);
+  tmp += m_button("all_check_on_btn", "전체 선택", []);
+  tmp += m_button("all_check_off_btn", "전체 해제", []);
+  tmp +=
+    '&nbsp;&nbsp;&nbsp;&nbsp;<input id="new_title" name="new_title" class="form-control form-control-sm" value="' +
+    data.title +
+    '">';
+  tmp += "</div>";
+  tmp += '<div class="form-inline">';
+  tmp += m_button("apply_new_title_btn", "저장폴더명 변경", []);
+  tmp +=
+    '&nbsp;&nbsp;&nbsp;&nbsp;<input id="new_season" name="new_season" class="form-control form-control-sm" value="' +
+    data.season +
+    '">';
+  tmp += m_button("apply_new_season_btn", "시즌 변경 (숫자만 가능)", []);
+  tmp += m_button("search_tvdb_btn", "TVDB", []);
+  tmp += m_button("add_whitelist", "스케쥴링 추가", []);
+  tmp += "</div>";
+  tmp = m_button_group(tmp);
+  str += tmp;
+  // program
+  str += m_hr_black();
+  str += m_row_start(0);
+  tmp = "";
+  if (data.poster_url != null)
+    tmp = '<img src="' + data.poster_url + '" class="img-fluid">';
+  str += m_col(3, tmp);
+  tmp = "";
+  tmp += m_row_start(0);
+  tmp += m_col(3, "제목", "right");
+  tmp += m_col(9, data.title);
+  tmp += m_row_end();
+  tmp += m_row_start(0);
+  tmp += m_col(3, "시즌", "right");
+  tmp += m_col(9, data.season);
+  tmp += m_row_end();
+  for (i in data.detail) {
+    tmp += m_row_start(0);
+    key = Object.keys(data.detail[i])[0];
+    value = data.detail[i][key];
+    tmp += m_col(3, key, "right");
+    tmp += m_col(9, value);
+    tmp += m_row_end();
+  }
+
+  str += m_col(9, tmp);
+  str += m_row_end();
+
+  str += m_hr_black();
+  for (i in data.episode) {
+    str += m_row_start();
+    // tmp = '<img src="' + data.episode[i].image + '" class="img-fluid">'
+    // str += m_col(3, tmp)
+    tmp = "<strong>" + data.episode[i].title + "</strong>";
+    tmp += "<br>";
+    tmp += data.episode[i].filename + "<br><p></p>";
+
+    tmp += '<div class="form-inline">';
+    tmp +=
+      '<input id="checkbox_' +
+      data.episode[i].code +
+      '" name="checkbox_' +
+      data.episode[i].code +
+      '" type="checkbox" checked data-toggle="toggle" data-on="선 택" data-off="-" data-onstyle="success" data-offstyle="danger" data-size="small">&nbsp;&nbsp;&nbsp;&nbsp;';
+    tmp += m_button("add_queue_btn", "다운로드 추가", [
+      { key: "code", value: data.episode[i].code },
+    ]);
+    tmp += "</div>";
+    str += m_col(12, tmp);
+    str += m_row_end();
+    if (i != data.length - 1) str += m_hr(0);
+  }
+  document.getElementById("episode_list").innerHTML = str;
+  $('input[id^="checkbox_"]').bootstrapToggle();
+}
+
+$("body").on("click", "#all_check_on_btn", function (e) {
+  e.preventDefault();
+  $('input[id^="checkbox_"]').bootstrapToggle("on");
+});
+
+$("body").on("click", "#all_check_off_btn", function (e) {
+  e.preventDefault();
+  $('input[id^="checkbox_"]').bootstrapToggle("off");
+});
+
+$("body").on("click", "#search_tvdb_btn", function (e) {
+  e.preventDefault();
+  new_title = document.getElementById("new_title").value;
+  url = "https://www.thetvdb.com/search?query=" + new_title;
+  window.open(url, "_blank");
+});
+
+$("body").on("click", "#add_whitelist", function (e) {
+  e.preventDefault();
+  let data_code = $(this).attr("data-code");
+  console.log(data_code);
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_whitelist",
+    type: "POST",
+    cache: false,
+    data: JSON.stringify({ data_code: data_code }),
+    contentType: "application/json;charset=UTF-8",
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret) {
+        $.notify("<strong>추가하였습니다.</strong><br>", {
+          type: "success",
+        });
+        make_program(ret);
+      } else {
+        $.notify("<strong>추가 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#apply_new_title_btn", function (e) {
+  e.preventDefault();
+  new_title = document.getElementById("new_title").value;
+  $.ajax({
+    url: "/" + package_name + "/ajax/apply_new_title",
+    type: "POST",
+    cache: false,
+    data: { new_title: new_title },
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret) {
+        $.notify("<strong>적용하였습니다.</strong><br>", {
+          type: "success",
+        });
+        // console.log(ret);
+        make_program(ret);
+      } else {
+        $.notify("<strong>적용 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#apply_new_season_btn", function (e) {
+  e.preventDefault();
+  new_season = document.getElementById("new_season").value;
+  if ($.isNumeric(new_season) == false) {
+    $.notify("<strong>시즌은 숫자여야 합니다.</strong><br>" + ret.log, {
+      type: "warning",
+    });
+  } else {
+    $.ajax({
+      url: "/" + package_name + "/ajax/apply_new_season",
+      type: "POST",
+      cache: false,
+      data: { new_season: new_season },
+      dataType: "json",
+      success: function (ret) {
+        if (ret.ret) {
+          $.notify("<strong>적용하였습니다.</strong><br>", {
+            type: "success",
+          });
+          make_program(ret);
+        } else {
+          $.notify("<strong>적용 실패</strong><br>" + ret.log, {
+            type: "warning",
+          });
+        }
+      },
+    });
+  }
+});
+
+// 하나씩 다운로드 추가
+$("body").on("click", "#add_queue_btn", function (e) {
+  e.preventDefault();
+  code = $(this).data("code");
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_queue",
+    type: "POST",
+    cache: false,
+    data: { code: code },
+    dataType: "json",
+    success: function (data) {
+      if (data.ret === "success") {
+        $.notify("<strong>다운로드 작업을 추가 하였습니다.</strong>", {
+          type: "success",
+        });
+      } else if (data.ret === "fail") {
+        $.notify("<strong>이미 큐에 있습니다. 삭제 후 추가하세요.</strong>", {
+          type: "warning",
+        });
+      } else if (data.ret === "no_data") {
+        $.notify("<strong>잘못된 코드입니다.</strong>", {
+          type: "warning",
+        });
+      } else {
+        $.notify("<strong>추가 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#check_download_btn", function (e) {
+  e.preventDefault();
+  all = $('input[id^="checkbox_"]');
+  str = "";
+  for (i in all) {
+    if (all[i].checked) {
+      code = all[i].id.split("_")[1];
+      str += code + ",";
+    }
+  }
+  if (str == "") {
+    $.notify("<strong>선택하세요.</strong>", {
+      type: "warning",
+    });
+    return;
+  }
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_queue_checked_list",
+    type: "POST",
+    cache: false,
+    data: { code: str },
+    dataType: "json",
+    success: function (data) {
+      if (data.ret == "success") {
+        $.notify("<strong>" + data.log + "개를 추가하였습니다.</strong>", {
+          type: "success",
+        });
+      } else {
+        $.notify("<strong>" + data.log + "</strong>", {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+// $("#go_modal_airing").on("shown.bs.modal", function () {
+//   // {#get_airing_list()#}
+//   $("#exModal").trigger("focus");
+// });
+
+// $("#go_modal_airing").click(function (e) {
+//   e.preventDefault();
+//   console.log("open modal");
+//   // $("#exModal").bootstrapToggle();
+//   if (current_airing_data === "") {
+//     get_airing_list();
+//   }
+//   $("#inner_airing").toggle();
+//   $("#airing_list").toggle();
+// });
+
+// $("#go_modal_airing").attr("class", "btn btn-primary");
+
+$(document).ready(function () {
+  $("#input_search").keydown(function (key) {
+    if (key.keyCode === 13) {
+      // alert("엔터키를 눌렀습니다.");
+      $("#btn_search").trigger("click");
+    }
+  });
+  let spinner = document.getElementById("spinner");
+  spinner.style.display = "block";
+  get_anime_list(1, "ing");
+  // $("img.lazyload").lazyload({
+  //   threshold : 200,
+  //   effect : "fadeIn",
+  // });
+});
+
+// <!--<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.7.0/dist/lazyload.min.js"></script>-->
+
+// <!--<script>-->
+// <!--  lazyLoadInstance.update();-->
+// <!--</script>-->
+// <!--<script>-->
+// <!--  const lazyLoadInstance = new LazyLoad({-->
+// <!--  // Your custom settings go here-->
+// <!--});-->
+// <!--  lazyLoadInstance.update()-->
+// <!--</script>-->
+window.lazyLoadOptions = {
+  elements_selector:
+    "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]",
+  data_src: "lazy-src",
+  data_srcset: "lazy-srcset",
+  data_sizes: "lazy-sizes",
+  class_loading: "lazyloading",
+  class_loaded: "lazyloaded",
+  threshold: 50,
+  callback_loaded: function (element) {
+    if (
+      element.tagName === "IFRAME" &&
+      element.dataset.rocketLazyload == "fitvidscompatible"
+    ) {
+      if (element.classList.contains("lazyloaded")) {
+        if (typeof window.jQuery != "undefined") {
+          if (jQuery.fn.fitVids) {
+            jQuery(element).parent().fitVids();
+          }
+        }
+      }
+    }
+  },
+};
+window.addEventListener(
+  "LazyLoad::Initialized",
+  function (e) {
+    var lazyLoadInstance = e.detail.instance;
+    if (window.MutationObserver) {
+      var observer = new MutationObserver(function (mutations) {
+        var image_count = 0;
+        var iframe_count = 0;
+        var rocketlazy_count = 0;
+        mutations.forEach(function (mutation) {
+          for (var i = 0; i < mutation.addedNodes.length; i++) {
+            if (
+              typeof mutation.addedNodes[i].getElementsByTagName !== "function"
+            ) {
+              continue;
+            }
+            if (
+              typeof mutation.addedNodes[i].getElementsByClassName !==
+              "function"
+            ) {
+              continue;
+            }
+            images = mutation.addedNodes[i].getElementsByTagName("img");
+            is_image = mutation.addedNodes[i].tagName == "IMG";
+            iframes = mutation.addedNodes[i].getElementsByTagName("iframe");
+            is_iframe = mutation.addedNodes[i].tagName == "IFRAME";
+            rocket_lazy =
+              mutation.addedNodes[i].getElementsByClassName("rocket-lazyload");
+            image_count += images.length;
+            iframe_count += iframes.length;
+            rocketlazy_count += rocket_lazy.length;
+            if (is_image) {
+              image_count += 1;
+            }
+            if (is_iframe) {
+              iframe_count += 1;
+            }
+          }
+        });
+        if (image_count > 0 || iframe_count > 0 || rocketlazy_count > 0) {
+          lazyLoadInstance.update();
+        }
+      });
+      var b = document.getElementsByTagName("body")[0];
+      var config = {
+        childList: !0,
+        subtree: !0,
+      };
+      observer.observe(b, config);
+    }
+  },
+  !1
+);
--- a/static/js/inflearn_list.js
+++ b/static/js/inflearn_list.js
@@ -0,0 +1,155 @@
+const sub = "";
+let current_data = null;
+
+const get_list = (page, move_top = true) => {
+  let formData = get_formdata("#form_search");
+  // console.log(formData)
+  formData += "&page=" + page;
+  $.ajax({
+    url: "/" + package_name + "/ajax/web_list",
+    type: "POST",
+    cache: false,
+    data: formData,
+    dataType: "json",
+    success: (data) => {
+      current_data = data;
+      if (data) {
+        if (move_top) window.scrollTo(0, 0);
+        make_list(data.list);
+        // {#console.log(data)#}
+        // {#console.log(ret.data)#}
+      } else {
+        $.notify("<strong>분석 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+};
+
+function sub_request_search(page, move_top = true) {
+  let formData = get_formdata("#form_search");
+  // console.log(formData)
+  formData += "&page=" + page;
+  $.ajax({
+    url: "/" + package_name + "/ajax/web_list",
+    type: "POST",
+    cache: false,
+    data: formData,
+    dataType: "json",
+    success: function (data) {
+      current_data = data;
+      if (move_top) window.scrollTo(0, 0);
+      make_list(data.list);
+      make_page_html(data.paging);
+    },
+  });
+}
+
+$("body").on("click", "#remove_btn", function (e) {
+  e.preventDefault();
+  let id = $(this).data("id");
+  $.ajax({
+    url: "/" + package_name + "/ajax/db_remove",
+    type: "POST",
+    cache: false,
+    data: { id: id },
+    dataType: "json",
+    success: function (data) {
+      if (data) {
+        $.notify("<strong>삭제되었습니다.</strong>", {
+          type: "success",
+        });
+        sub_request_search(current_data.paging.current_page, false);
+        // get_list()
+      } else {
+        $.notify("<strong>삭제 실패</strong>", {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$(document).ready(function () {
+  // {#global_sub_request_search('1');#}
+  get_list(1);
+});
+
+$("body").on("click", "#page", function (e) {
+  e.preventDefault();
+  sub_request_search($(this).data("page"));
+});
+
+$("body").on("click", "#json_btn", function (e) {
+  e.preventDefault();
+  var id = $(this).data("id");
+  for (i in current_data.list) {
+    if (current_data.list[i].id == id) {
+      m_modal(current_data.list[i]);
+    }
+  }
+});
+
+$("body").on("click", "#self_search_btn", function (e) {
+  e.preventDefault();
+  let search_word = $(this).data("title");
+  document.getElementById("search_word").value = search_word;
+  sub_request_search("1");
+});
+
+$("body").on("click", "#request_btn", function (e) {
+  e.preventDefault();
+  var content_code = $(this).data("content_code");
+  $(location).attr(
+    "href",
+    "/" + package_name + "/request?code=" + content_code
+  );
+});
+
+function make_list(data) {
+  //console.log(data)
+  let tmp,
+    tmp2 = "";
+  // console.log(data)
+  if (data.length > 0) {
+    let str = "";
+    for (let i in data) {
+      console.log(data[i]);
+      str += m_row_start();
+      str += m_col(1, data[i].id);
+      tmp = data[i].status == "completed" ? "완료" : "미완료";
+      str += m_col(1, tmp);
+      tmp = data[i].created_time + "(추가)<br/>";
+      if (data[i].completed_time != null)
+        tmp += data[i].completed_time + "(완료)";
+      str += m_col(3, tmp);
+      tmp_save_path = data[i].contents_json.save_path
+        ? data[i].contents_json.save_path
+        : "";
+      tmp =
+        tmp_save_path +
+        "<br />" +
+        data[i].contents_json.filename +
+        "<br /><br />";
+      tmp2 = m_button("json_btn", "JSON", [{ key: "id", value: data[i].id }]);
+      tmp2 += m_button("request_btn", "작품 검색", [
+        { key: "content_code", value: data[i].contents_json.program_code },
+      ]);
+      tmp2 += m_button("self_search_btn", "목록 검색", [
+        { key: "title", value: data[i].contents_json.program_title },
+      ]);
+      tmp2 += m_button("remove_btn", "삭제", [
+        { key: "id", value: data[i].id },
+      ]);
+      tmp += m_button_group(tmp2);
+      str += m_col(7, tmp);
+      str += m_row_end();
+      if (i != data.length - 1) str += m_hr();
+    }
+    document.getElementById("list_div").innerHTML = str;
+  } else {
+    console.log("목록없슴");
+    return false;
+  }
+}
--- a/static/js/inflearn_request.js
+++ b/static/js/inflearn_request.js
@@ -0,0 +1,432 @@
+let current_data = "";
+let current_airing_data = "";
+let code = "";
+let div_visible = false;
+let total_page = "";
+
+const params = new Proxy(new URLSearchParams(window.location.search), {
+  get: (searchParams, prop) => searchParams.get(prop),
+});
+
+// console.log('current_airing_data', current_airing_data);
+
+const get_airing_list = () => {
+  $.ajax({
+    url: "/" + package_name + "/ajax/airing_list",
+    type: "GET",
+    cache: false,
+    dataType: "json",
+    success: (ret) => {
+      if (ret.ret == "success" && ret.episode != null) {
+        current_airing_data = ret;
+        total_page = ret.total_page;
+        // console.log(ret)
+        if (current_airing_data !== "") {
+          make_airing_list(ret);
+          div_visible = true;
+          // console.log(div_visible)
+        }
+      } else {
+        $.notify("<strong>분석 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+
+  if (div_visible) {
+    // {#$('#airing_list').toggle()#}
+  }
+};
+
+// console.log(div_visible)
+
+$(document).on("click", "button.code-button", function (e) {
+  e.preventDefault();
+  // console.log('click')
+  // console.log('code to click:' + $(this).data("code"))
+  document.getElementById("code").value = $(this).data("code");
+  $("#code").val($(this).data("code"));
+  $("#airing_list").toggle();
+  code = document.getElementById("code").value;
+  document.getElementById("analysis_btn").click();
+});
+$(".code-button").tooltip();
+
+$("body").on("click", "#analysis_btn", function (e) {
+  e.preventDefault();
+  if (document.getElementById("code").value !== "") {
+    code = document.getElementById("code").value;
+  }
+  // console.log('#analysis_btn >>> code::', code)
+  if (code === "") {
+    console.log("code 값을 입력해주세요.");
+    $.notify("<strong>code 값을 입력해주세요.</strong><br>");
+    return;
+  }
+
+  $.ajax({
+    url: "/" + package_name + "/ajax/analysis",
+    type: "POST",
+    cache: false,
+    data: { code: code },
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret == "success" && ret.data != null) {
+        make_program(ret.data);
+      } else {
+        $.notify("<strong>분석 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#go_inflearn_btn", function (e) {
+  e.preventDefault();
+  window.open(inflearn_url, "_blank");
+});
+
+function make_airing_list(data) {
+  let str = "";
+  let tmp = "";
+
+  tmp =
+    '<div id="exModal" class="form-inline" role="dialog" aria-hidden="true">';
+  tmp += "</div>";
+  str += m_hr_black();
+  // {#str += m_row_start(0);#}
+  // {##}
+  // {#str += m_row_end();#}
+  // {#str += m_hr_black();#}
+  str +=
+    '<div id="inner_airing" class="d-flex align-content-between flex-wrapd-flex align-content-between flex-wrap">';
+  for (i in data.episode) {
+    // {#str += m_row_start();#}
+    // {#tmp = '<div class="col-sm"><strong>' + data.episode[i].title+ '</strong>';#}
+    //
+    // {#tmp += '<br />'#}
+    // {#tmp += '' + data.episode[i].code + '</div>';#}
+    // {#str += m_col(12, tmp)#}
+    tmp =
+      '<div class="mx-1 mb-1"><button id="code_button" data-code="' +
+      data.episode[i].code +
+      '" type="button" class="btn btn-primary code-button bootstrap-tooltip" data-toggle="button" data-tooltip="true" aria-pressed="true" autocomplete="off" data-placement="top">' +
+      '<span data-tooltip-text="' +
+      data.episode[i].title +
+      '">' +
+      data.episode[i].code +
+      "</span></button></div>";
+    // {#if (i === 10) {#}
+    // {#    tmp += '<div class="w-100"></div>'#}
+    str += tmp;
+  }
+  str += "</div>";
+  str += m_hr_black();
+
+  document.getElementById("airing_list").innerHTML = str;
+}
+
+function make_program(data) {
+  current_data = data;
+  // console.log('current_data:: ', data)
+  str = "";
+  tmp = '<div class="form-inline w-100">';
+  tmp += m_button("check_download_btn", "선택 다운로드 추가", []);
+  tmp += m_button("all_check_on_btn", "전체 선택", []);
+  tmp += m_button("all_check_off_btn", "전체 해제", []);
+  tmp +=
+    '&nbsp;&nbsp;&nbsp;<input id="new_title" name="new_title" class="form-control form-control-sm" value="' +
+    data.title +
+    '">';
+  tmp += "</div>";
+  tmp += '<div class="form-inline">';
+  tmp += m_button("apply_new_title_btn", "저장폴더명 변경", []);
+  tmp +=
+    '&nbsp;&nbsp;&nbsp;<input id="new_season" name="new_season" class="form-control form-control-sm" value="' +
+    data.season +
+    '">';
+  tmp += m_button("apply_new_season_btn", "시즌 변경 (숫자만 가능)", []);
+  tmp += m_button("search_tvdb_btn", "TVDB", []);
+  tmp += m_button("add_whitelist", "스케쥴링 추가", []);
+  tmp += "</div>";
+  tmp = m_button_group(tmp);
+  str += tmp;
+  // program
+  str += m_hr_black();
+  str += m_row_start(0);
+  tmp = "";
+  if (data.poster_url != null)
+    tmp = '<img src="' + data.poster_url + '" class="img-fluid">';
+  str += m_col(3, tmp);
+  tmp = "";
+  tmp += m_row_start(0);
+  tmp += m_col(3, "제목", "right");
+  tmp += m_col(9, data.title);
+  tmp += m_row_end();
+  tmp += m_row_start(0);
+  tmp += m_col(3, "시즌", "right");
+  tmp += m_col(9, data.season);
+  tmp += m_row_end();
+  for (i in data.detail) {
+    tmp += m_row_start(0);
+    key = Object.keys(data.detail[i])[0];
+    value = data.detail[i][key];
+    tmp += m_col(3, key, "right");
+    tmp += m_col(9, value);
+    tmp += m_row_end();
+  }
+
+  str += m_col(9, tmp);
+  str += m_row_end();
+
+  str += m_hr_black();
+  for (i in data.episode) {
+    str += m_row_start();
+    // tmp = '<img src="' + data.episode[i].image + '" class="img-fluid">'
+    // str += m_col(3, tmp)
+    tmp = "<strong>" + data.episode[i].title + "</strong>";
+    tmp += "<br>";
+    tmp += data.episode[i].filename + "<br><p></p>";
+
+    tmp += '<div class="form-inline">';
+    tmp +=
+      '<input id="checkbox_' +
+      data.episode[i].code +
+      '" name="checkbox_' +
+      data.episode[i].code +
+      '" type="checkbox" checked data-toggle="toggle" data-on="선 택" data-off="-" data-onstyle="success" data-offstyle="danger" data-size="small">&nbsp;&nbsp;&nbsp;&nbsp;';
+    // tmp += m_button('add_queue_btn', '다운로드 추가', [{'key': 'code', 'value': data.episode[i].code}])
+    tmp += m_button("add_queue_btn", "다운로드 추가", [
+      { key: "idx", value: i },
+    ]);
+    tmp += "</div>";
+    str += m_col(12, tmp);
+    str += m_row_end();
+    if (i != data.length - 1) str += m_hr(0);
+  }
+  document.getElementById("episode_list").innerHTML = str;
+  $('input[id^="checkbox_"]').bootstrapToggle();
+}
+
+$("body").on("click", "#all_check_on_btn", function (e) {
+  e.preventDefault();
+  $('input[id^="checkbox_"]').bootstrapToggle("on");
+});
+
+$("body").on("click", "#all_check_off_btn", function (e) {
+  e.preventDefault();
+  $('input[id^="checkbox_"]').bootstrapToggle("off");
+});
+
+$("body").on("click", "#search_tvdb_btn", function (e) {
+  e.preventDefault();
+  new_title = document.getElementById("new_title").value;
+  url = "https://www.thetvdb.com/search?query=" + new_title;
+  window.open(url, "_blank");
+});
+
+$("body").on("click", "#add_whitelist", function (e) {
+  e.preventDefault();
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_whitelist",
+    type: "POST",
+    cache: false,
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret) {
+        $.notify("<strong>추가하였습니다.</strong><br>", {
+          type: "success",
+        });
+        make_program(ret);
+      } else {
+        $.notify("<strong>추가 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#apply_new_title_btn", function (e) {
+  e.preventDefault();
+  new_title = document.getElementById("new_title").value;
+  $.ajax({
+    url: "/" + package_name + "/ajax/apply_new_title",
+    type: "POST",
+    cache: false,
+    data: { new_title: new_title },
+    dataType: "json",
+    success: function (ret) {
+      if (ret.ret) {
+        $.notify("<strong>적용하였습니다.</strong><br>", {
+          type: "success",
+        });
+        // console.log(ret)
+        make_program(ret);
+      } else {
+        $.notify("<strong>적용 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#apply_new_season_btn", function (e) {
+  e.preventDefault();
+  new_season = document.getElementById("new_season").value;
+  if ($.isNumeric(new_season) == false) {
+    $.notify("<strong>시즌은 숫자여야 합니다.</strong><br>" + ret.log, {
+      type: "warning",
+    });
+  } else {
+    $.ajax({
+      url: "/" + package_name + "/ajax/apply_new_season",
+      type: "POST",
+      cache: false,
+      data: { new_season: new_season },
+      dataType: "json",
+      success: function (ret) {
+        if (ret.ret) {
+          $.notify("<strong>적용하였습니다.</strong><br>", {
+            type: "success",
+          });
+          make_program(ret);
+        } else {
+          $.notify("<strong>적용 실패</strong><br>" + ret.log, {
+            type: "warning",
+          });
+        }
+      },
+    });
+  }
+});
+
+// 하나씩 다운로드 추가
+$("body").on("click", "#add_queue_btn", function (e) {
+  e.preventDefault();
+  // code = $(this).data('code');
+  code = current_data.episode[$(this).data("idx")].code;
+  // console.log('code:: ', code)
+  let data = current_data.episode[$(this).data("idx")];
+  // console.log('data:: ', data)
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_queue",
+    type: "POST",
+    cache: false,
+    data: { code: code, data: JSON.stringify(data) },
+    dataType: "json",
+    success: function (data) {
+      // console.log('#add_queue_btn::data >>', data)
+      if (data.ret === "enqueue_db_append") {
+        $.notify("<strong>다운로드 작업을 추가 하였습니다.</strong>", {
+          type: "success",
+        });
+      } else if (data.ret === "enqueue_db_exist") {
+        $.notify("<strong>DB에 존재하는 에피소드입니다.</strong>", {
+          type: "warning",
+        });
+      } else if (data.ret === "db_completed") {
+        $.notify("<strong>DB에 완료 기록이 있습니다.</strong>", {
+          type: "warning",
+        });
+      } else if (data.ret === "fail") {
+        $.notify("<strong>이미 큐에 있습니다. 삭제 후 추가하세요.</strong>", {
+          type: "warning",
+        });
+      } else if (data.ret === "no_data") {
+        $.notify("<strong>잘못된 코드입니다.</strong>", {
+          type: "warning",
+        });
+      } else if (data.ret === "Debugging") {
+        $.notify("<strong>Debugging</strong>", {
+          type: "warning",
+        });
+      } else {
+        $.notify("<strong>추가 실패</strong><br>" + ret.log, {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("body").on("click", "#check_download_btn", function (e) {
+  e.preventDefault();
+  all = $('input[id^="checkbox_"]');
+  str = "";
+  for (i in all) {
+    if (all[i].checked) {
+      code = all[i].id.split("_")[1];
+      str += code + ",";
+    }
+  }
+  if (str == "") {
+    $.notify("<strong>선택하세요.</strong>", {
+      type: "warning",
+    });
+    return;
+  }
+  $.ajax({
+    url: "/" + package_name + "/ajax/add_queue_checked_list",
+    type: "POST",
+    cache: false,
+    data: { code: str },
+    dataType: "json",
+    success: function (data) {
+      if (data.ret == "success") {
+        $.notify("<strong>" + data.log + "개를 추가하였습니다.</strong>", {
+          type: "success",
+        });
+      } else {
+        $.notify("<strong>" + data.log + "</strong>", {
+          type: "warning",
+        });
+      }
+    },
+  });
+});
+
+$("#go_modal_airing").on("shown.bs.modal", function () {
+  // {#get_airing_list()#}
+  $("#exModal").trigger("focus");
+});
+
+$("#go_modal_airing").click(function (e) {
+  e.preventDefault();
+  // console.log('open modal')
+  $("#exModal").bootstrapToggle();
+  if (current_airing_data === "") {
+    get_airing_list();
+  }
+  $("#inner_airing").toggle();
+  $("#airing_list").toggle();
+});
+
+$("#go_modal_airing").attr("class", "btn btn-primary");
+
+// {#$(function () {#}
+// {#  $('[data-tooltip="true"]').tooltip()#}
+// {#});#}
+
+//   <!--{#-->
+// <!--<script src="https://unpkg.com/@popperjs/core@2"></script>-->
+// <!--#} {#-->
+// <!--<script src="https://unpkg.com/tippy.js@6"></script>-->
+// <!--#} {#-->
+// <!--<script>-->
+// <!--  // #}-->
+// <!--  // {#        tippy('.code-button',#}-->
+// <!--  // {#            { content: 'aaaa', // tooltip 내용#}-->
+// <!--  // {#                placement: 'top', // 상단 위치#}-->
+// <!--  // {#                trigger: 'hover', // :hover가 아닌 click시 노출#}-->
+// <!--  // {#                hideOnClick : 'toggle', // click시, toggle() 액션#}-->
+// <!--  // {#                animation: 'shift-away' // 아래에서 위로 올라오며 등장#}-->
+// <!--  // {#        })#}-->
+// <!--  // {##}-->
+// <!--  // {##}-->
+// <!--  // {#-->
+// <!--</script>-->
+// <!--#}--