{% extends 'base_mobileui.html' %}

{% block title %}stats{% endblock %}

{% block head %}
  <!-- <meta name="viewport" content=""> -->
  <link rel="stylesheet" type="text/css" href="{{ static_css_stats }}">
  <script type="text/javascript" src="{{ static_js_stats }}"></script>
  <script type="text/javascript" src="{{ static_js_echarts_min }}"></script>
  <style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  /* div{word-break: break-all;} */
  table th {
    background-color: #faf8e9;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    text-align: right;
    word-break: keep-all;
  }
  table td{
    padding-left: 12px;
    padding-right: 12px;
    text-align: center;
  }
  #content_analysis tr:nth-child(1) td {word-break: break-all;}
  #content_analysis tr:nth-child(2) td {word-break: break-all;}
  #content_analysis tr:nth-child(3) td {word-break: break-all;}
  #content_categories, #content_logs {padding: 10px 0;}
  #content_logs p {
    margin: 0 20px;
    word-break: break-all;
  }
  pre {padding: 0 10px;}
  </style>
{% endblock %}

{% block loader %}
<div class="loader" style="display: block;" onclick="hideLoader();"></div>

<script>
window.onload = function(){
  hideLoader();
};
</script>
{% endblock %}


{% block neck %}
<a class="button normal" href="javascript:;" onclick="forceLoader('{{ g.url_jobs_list[node-1] }}')">Jobs</a>
<!-- <a class="button warning" href="javascript:;" onclick="forceLoader('{{ url_utf8_mobile }}')">Log</a> -->
{% if url_refresh %}
<a id="refresh_button" class="button warning" href="javascript:;" onclick="forceLoader('{{ url_refresh }}');">Parsed</a>
{% endif %}
{% endblock %}


{% block body %}
<div class="tab-wrap wrap">
  <ul class="tab tab-header clear-float">
    <li id="header_analysis">Analysis</li>
    <li id="header_categories">Categories</li>
    {% if datas|length > 1 %}
    <li id="header_charts">Charts</li>
    {% endif %}
    <li id="header_logs">Logs</li>
    {% if crawler_stats %}
    <li id="header_stats">Crawler.stats</li>
    {% endif %}
    {% if crawler_engine %}
    <li id="header_engine">Crawler.engine</li>
    {% endif %}
  </ul>

  <ul class="tab tab-content">
    <li id="content_analysis">
      <div class="table vertical-table">
        <table border="1">
          <tr><th>project</th><td>{{ project }}</td></tr>
          <tr><th>spider</th><td>{{ spider }}</td></tr>
          <tr><th>job</th><td>{{ job }}</td></tr>
          <tr><th>first_log_time</th><td>{{ first_log_time }}</td></tr>
          <tr><th>latest_log_time</th><td>{{ latest_log_time }}</td></tr>
          <tr><th>runtime</th><td>{{ runtime }}</td></tr>
          <tr>
            <th>crawled_pages</th>
            <td>
            {% if pages is none %}
              N/A
            {% else %}
              <strong class="{% if pages %}green{% else %}red{% endif %}">{{ pages }}</strong>
            {% endif %}
            </td>
          </tr>
          <tr>
            <th>scraped_items</th>
            <td>
            {% if items is none %}
              N/A
            {% else %}
              <strong class="{% if items %}green{% else %}red{% endif %}">{{ items }}</strong>
            {% endif %}
            </td>
          </tr>
          <tr><th>shutdown_reason</th><td id="shutdown_reason">{{ shutdown_reason }}</td></tr>
          <tr><th>finish_reason</th><td id="finish_reason">{{ finish_reason }}</td></tr>

          <tr><th>log_critical_count</th><td id="log_critical_count">{{ log_categories['critical_logs']['count'] }}</td></tr>
          <tr><th>log_error_count</th><td id="log_error_count">{{ log_categories['error_logs']['count'] }}</td></tr>
          <tr><th>log_warning_count</th><td id="log_warning_count">{{ log_categories['warning_logs']['count'] }}</td></tr>
          <tr><th>log_redirect_count</th><td id="log_redirect_count">{{ log_categories['redirect_logs']['count'] }}</td></tr>
          <tr><th>log_retry_count</th><td id="log_retry_count">{{ log_categories['retry_logs']['count'] }}</td></tr>
          <tr><th>log_ignore_count</th><td id="log_ignore_count">{{ log_categories['ignore_logs']['count'] }}</td></tr>

          <tr><th>latest_crawl</th><td id="latest_crawl"></td></tr>
          <tr><th>latest_scrape</th><td id="latest_scrape"></td></tr>
          <tr><th>latest_log</th><td id="latest_log"></td></tr>
          <tr><th>current_time</th><td id="current_time"></td></tr>
          <tr><th>latest_item</th><td style="word-break: break-all;">{{ latest_matches['latest_item'] or 'N/A' }}</td></tr>
        </table>
      </div>
    </li>

    <li id="content_categories">
      <div class="wrap collapse-wrap">
        <ul class="collapse">
          <h3 style="color: red;">WARNING+</h3>
        {% for title in ['critical_logs', 'error_logs', 'warning_logs'] %}
          {% if not log_categories[title]['count'] %}
          {% else %}
          <li>
            <div class="title">
              <h4>
                <div style="width: 200px; display: inline-block;">{{ title }}</div>
                {% if log_categories[title]['details']|length < log_categories[title]['count'] %}
                  last {{ log_categories[title]['details']|length }} of {{ log_categories[title]['count'] }}
                {% else %}
                  {{ log_categories[title]['count'] }} in total
                {% endif %}
              </h4>
              <i class="iconfont icon-right"></i>
            </div>

            {% for detail in log_categories[title]['details'] %}
            <pre>{{ detail }}</pre>
            {% endfor %}
          </li>
          {% endif %}
        {% endfor %}
        </ul>
      </div>

      <div class="wrap collapse-wrap">
        <ul class="collapse">
          <h3 style="color: orange;">INFO</h3>

        {% for title in ['redirect_logs', 'retry_logs', 'ignore_logs'] %}
          {% if not log_categories[title]['count'] %}
          {% else %}
          <li>
            <div class="title">
              <h4>
                <div style="width: 200px; display: inline-block;">{{ title }}</div>
                {% if log_categories[title]['details']|length < log_categories[title]['count'] %}
                  last {{ log_categories[title]['details']|length }} of {{ log_categories[title]['count'] }}
                {% else %}
                  {{ log_categories[title]['count'] }} in total
                {% endif %}
              </h4>
              <i class="iconfont icon-right"></i>
            </div>

            {% for detail in log_categories[title]['details'] %}
            <pre>{{ detail }}</pre>
            {% endfor %}
          </li>
          {% endif %}
        {% endfor %}
        </ul>
      </div>

      <div class="wrap collapse-wrap">
        <ul class="collapse">
          <h3 style="color: #67c23a;">DEBUG</h3>

        {% for title, log in latest_matches.items() %}
          {% if not log %}
          {% else %}
          <li>
            <div class="title">
              <h4>{{ title }}</h4>
              <i class="iconfont icon-right"></i>
            </div>
            <pre>{{ log }}</pre>
          </li>
          {% endif %}
        {% endfor %}
        </ul>
      </div>
    </li>

    {% if datas|length > 1 %}
    <li id="content_charts">
      <div id="chart_total" style="width: 100%; height: 400px;"></div>
      <div id="chart_minute" style="width: 100%; height: 400px;"></div>
    </li>
    {% endif %}

    <li id="content_logs">
      <div class="wrap collapse-wrap">
        <!-- <h3 style="color: #409EFF;">cat logs</h3> -->
        <ul class="collapse">
          <li>
            <div class="title">
              <h4>Head</h4>
              <i class="iconfont icon-right"></i>
            </div>
            <pre>{{ head }}</pre>
          </li>
          <li>
            <div class="title">
              <h4>Tail</h4>
              <i class="iconfont icon-right"></i>
            </div>
            <pre>{{ tail }}</pre>
          </li>
          <li>
            <div class="title">
              <h4>Log</h4>
              <i class="iconfont icon-right"></i>
            </div>
            <p><a class="link" target="_blank" href="{{ url_opt_opposite }}">{{ url_opt_opposite }}</a></p>
          </li>
          <li>
            <div class="title">
              <h4>Source</h4>
              <i class="iconfont icon-right"></i>
            </div>
            <p><a class="link" target="_blank" href="{{ url_source }}">{{ url_source }}</a></p>
          </li>
        </ul>
      </div>
    </li>

    {% if crawler_stats %}
    <li id="content_stats">
      <div class="table vertical-table">
        <table border="1">
        {% for k, v in crawler_stats.items() %}
          <tr><th>{{ k.replace('/', ' / ').replace('_', ' ') }}</th><td>{{ v }}</td></tr>
        {% endfor %}
        </table>
      </div>
    </li>
    {% endif %}

    {% if crawler_engine %}
    <li id="content_engine">
      <div class="table vertical-table">
        <table border="1">
        {% for k, v in crawler_engine.items() %}
          <tr><th>{{ k }}</th><td>{{ v }}</td></tr>
        {% endfor %}
        </table>
      </div>
    </li>
    {% endif %}
  </ul>
</div>


<script>
var latest_crawl_timestamp = {{ latest_crawl_timestamp }};
var latest_scrape_timestamp = {{ latest_scrape_timestamp }};
var latest_log_timestamp = {{ latest_log_timestamp }};

const LAST_UPDATE_TIMESTAMP = {{ last_update_timestamp }};

//my$('#current_time').innerHTML = new Date();
var now = new Date();
now.setMinutes(now.getMinutes()-now.getTimezoneOffset());
my$('#current_time').innerHTML = now.toISOString().slice(0,19).replace(/T/g, " ");
setColor();
</script>


<script>
{% if url_refresh %}
setInterval(function() {
  var now_timestamp = Date.now() / 1000;
  var seconds = Math.ceil(now_timestamp - LAST_UPDATE_TIMESTAMP);
  my$('#refresh_button').innerHTML = "Parsed <span style='color: black;'>" + seconds + "</span> secs ago";
}, 1000);
{% endif %}
</script>


{% if datas|length > 1 %}
<script>
var datas = {{ datas|safe }};

var chartsArr = [{
  dom: my$('#chart_total'),
  echart: echarts.init(my$('#chart_total')),
  data: datas,
  title: 'count / total',
  label1: 'pages',
  index1: 1,
  label2: 'items',
  index2: 3
}, {
  dom: my$('#chart_minute'),
  echart: echarts.init(my$('#chart_minute')),
  data: datas,
  title: 'count / minute',
  label1: 'pages / minute',
  index1: 2,
  label2: 'items / minute',
  index2: 4
}]

chartsArr.forEach(function(chart) {
  draw(chart.echart, chart.data, chart.title, chart.label1, chart.index1, chart.label2, chart.index2)
  chart.dom.addEventListener('resize', function() {
    chart.echart.resize({ width: chart.dom.clientWidth })
  })
})

window.addEventListener('optimizedResize', function() {
  if (chartsArr[0].dom) {
    chartsArr.forEach(function(chart) {
      //console.log(chart)
      chart.dom.dispatchEvent(new Event('resize'))
    })
  }
})
</script>
{% endif %}


<script>
// tab switcher
(function() {
  var default_tab = 'analysis';
  if (window.localStorage) {
    if (document.referrer.search(/\/\d+\/log\/stats\//) == -1) {
      localStorage.setItem('stats_tab', default_tab);
    }
    var active_tab = localStorage.getItem('stats_tab') || default_tab;
  } else {
    var active_tab = default_tab;
  }
  console.log(active_tab);

  if (!my$('#header_' + active_tab)) {
    active_tab = default_tab;
    console.log(active_tab);
  }
  my$('#header_' + active_tab).classList.add('active');
  my$('#content_' + active_tab).classList.add('active');

  if (my$('#chart_total')) {
    my$('#chart_total').dispatchEvent(new Event('resize'));
    my$('#chart_minute').dispatchEvent(new Event('resize'));
  }


  var index = -1;
  var tabHeaders = my$$('.tab-header>li');
  var tabContents = my$$('.tab-content>li');
  my$('.tab-header').addEventListener('click', function(e) {
    var target = e.target;
    //console.log(target.id);
    if (target.tagName.toLowerCase() !== 'li') return;
    index = Array.prototype.indexOf.call(tabHeaders, target);
    for (var i = 0 ; i < tabHeaders.length; i++) {
      tabHeaders[i].classList.remove('active');
    }
    target.classList.add('active');
    for (var i = 0 ; i < tabContents.length; i++) {
      tabContents[i].classList.remove('active');
    }
    tabContents[index].classList.add('active');

    // When switch to echarts tab
    if (my$('#chart_total')) {
      my$('#chart_total').dispatchEvent(new Event('resize'));
      my$('#chart_minute').dispatchEvent(new Event('resize'));
    }

    if (window.localStorage) {
      localStorage.setItem('stats_tab', target.id.split('_')[1]);
      console.log(localStorage.getItem('stats_tab'));
    }
  });
})();
</script>




<script>
// handle collapse components
(function () {
  var collapse = my$('.collapse');
  var titles = my$$('.collapse .title');
  var lis = my$$('.collapse li');

  //https://stackoverflow.com/questions/32027935/addeventlistener-is-not-a-function-why-does-this-error-occur
  //for(idx in titles){
    //title = titles[idx];
  for (var i = 0 ; i < titles.length; i++) {
    titles[i].addEventListener('click', function(e){
      var index = [].indexOf.call(titles, this);
      lis[index].classList.toggle('active');
    });
  }
})();
</script>

{% endblock %}
