youtube-dl/lib/framework/templates/log.html

{% extends "base.html" %}
{% block content %}
<div>
  <nav>
    {{ macros.m_tab_head_start() }}
      {{ macros.m_tab_head('이전', true) }}
      {{ macros.m_tab_head('실시간', false) }}
    {{ macros.m_tab_head_end() }}
  </nav>
  <div class="tab-content" id="nav-tabContent">
    {{ macros.m_tab_content_start('이전', true) }}
      <div>
        <textarea id="log" class="col-md-12" rows="30" charswidth="23" disabled style="background-color:#ffffff;visibility:hidden"></textarea>
      </div>
    {{ macros.m_tab_content_end() }}
    
    {{ macros.m_tab_content_start('실시간', false) }}
      <div>
        <textarea id="add" class="col-md-12" rows="30" charswidth="23" disabled style="background-color:#ffffff;visibility:visible"></textarea>
      </div>
      
      <div class="form-inline">
        <label class="form-check-label" for="auto_scroll">자동 스크롤</label>
        <input id="auto_scroll" name="auto_scroll" class="form-control form-control-sm" type="checkbox" data-toggle="toggle" checked>
        <span class='text-left' style="padding-left:25px; padding-top:0px">
          <button id="clear" class="btn btn-sm btn-outline-success">리셋</button>
        </span>
      </div>
    {{ macros.m_tab_content_end() }}

  </div>
</div>


<script type="text/javascript">
$(document).ready(function() {
  setWide();
  $('#loading').show();
  ResizeTextAreaLog()
})

function ResizeTextAreaLog() {
  ClientHeight = window.innerHeight
  $("#log").height(ClientHeight-240);
  $("#add").height(ClientHeight-260);
}

$(window).resize(function() {
  ResizeTextAreaLog();
});


var protocol = window.location.protocol;
var socket = io.connect(protocol + "//" + document.domain + ":" + location.port + "/log");
socket.emit("start", {'package':'{{package}}'} );
socket.on('on_start', function(data){
  document.getElementById("log").innerHTML += data.data;
  document.getElementById("log").scrollTop = document.getElementById("log").scrollHeight;
  document.getElementById("log").style.visibility = 'visible';
  $('#loading').hide();
});

socket.on('add', function(data){
  if (data.package == "{{package}}") {
    var chk = $('#auto_scroll').is(":checked");
    document.getElementById("add").innerHTML += data.data;
    if (chk) document.getElementById("add").scrollTop = document.getElementById("add").scrollHeight;
  }
});

$("#clear").click(function(e) {
  e.preventDefault(); 
  document.getElementById("add").innerHTML = '';
});

$("#auto_scroll").click(function(){
  var chk = $(this).is(":checked");//.attr('checked');
});
  
</script>    
{% endblock %}