{% extends "base.html" %}
{% block content %}

{{ macros.m_button_group([['yaml_edit_btn', '편집'], ['terminal_open_btn', 'Terminal 실행'], ['all_append_files_show_btn', '모두 확장'], ['all_append_files_hide_btn', '모두 축소']])}}
{{ macros.m_row_start('5') }}
{{ macros.m_row_end() }}
{{ macros.m_hr_head_bottom() }}
<div id="list_div"></div>


<script type="text/javascript">
var package_name = "{{arg['package_name']}}";
var sub = "{{arg['sub']}}";
var yaml_path = "{{arg['yaml_path']}}";
var current_data = null;

$(document).ready(function(){
  reqeust_info();
});

function reqeust_info() {
  $.ajax({
    url: '/' + package_name + '/ajax/'+sub+'/get_info',
    type: "POST", 
    cache: false,
    data:{},
    dataType: "json",
    success: function (ret) {
      make_list(ret);
    }
  });
}

function make_list(data) {
  current_data = data;
  data = data.commands;
  str = '';
  str = '<table id="result_table" class="table table-sm  tableRowHover "  ><thead class="thead-dark"><tr> \
    <th style="width:10%; text-align:center;">INDEX</th> \
    <th style="width:80%; text-align:left;">제목</th> \
    <th style="width:10%; text-align:center;">실행</th> \
    </tr></thead><tbody id="list">';
  
  if (data.length == 0) str += '<tr><td colspan="3"><h4>명령이 없습니다.</h4></td></tr>';

  for(i in data) {
    console.log(data[i]);
    str += '<tr class="chover" style="cursor: pointer;" data-toggle="collapse" data-target="#collapse_' + i + '" aria-expanded="true" >';
    str += '<td scope="col" style="width:10%; text-align:center;">'+ (parseInt(i)+1) + '</td>';
    str += '<td scope="col" style="width:80%; text-align:left;">'+ data[i].title + '</td>';
    tmp = m_button('terminal_open_btn', '실행', [{'key':'index', 'value':i}]);
    str += '<td scope="col" style="width:10%; text-align:center;">'+ tmp + '</td>';
    
    str += '</tr>';
    
    str += '<tr class="collapse tableRowHoverOff" style="cursor: pointer;"  id="collapse_' + i + '">';
    str += '<td></td><td colspan="2">';
    str += "<pre>"+data[i].command+"</pre>";

      str += '</td>';
      str += '</tr>'

  }
  str += '</table>';
  document.getElementById("list_div").innerHTML = str;

  return

}

$("body").on('click', '#yaml_edit_btn', function(e){
  url = '/flaskcode' + yaml_path;
  window.open(url, '_blank')
});



$("body").on('click', '#terminal_open_btn', function(e){
  e.preventDefault();
  index = $(this).data('index');
  console.log(index);
  if (index == null) {
    window.open("/terminal", "_blank");
  }
    
  $.ajax({
    url: '/' + package_name + '/ajax/' + sub + '/run',
    type: "POST", 
    cache: false,
    data: {index:index},
    dataType: "json",
    success: function (data) {
      if (data.ret == 'success') {
        window.open("/terminal", "_blank");
      }
    }
  });
});


$("body").on('click', '#all_append_files_show_btn', function(e){
  e.preventDefault();
  $('.collapse').collapse('show');

});

$("body").on('click', '#all_append_files_hide_btn', function(e){
  e.preventDefault();
  $('.collapse').collapse('hide');
});
</script>    
{% endblock %}