{% extends 'base_simpleui.html' %}

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

{% block head %}
    <meta name="viewport" content="">
    <script type="text/javascript" src="{{ url_for('static', filename='common/stats.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='common/echarts.min.js') }}"></script>
    <style>
        div{word-break:break-all;}
        th{text-align:left; background-color: #ddd;}
    </style>
{% endblock %}

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

<script>
window.onload = function(){
    {% if refresh_url %}
    var kwargs = parseQueryString(location.search);
    history.pushState(null, '', window.location.pathname + ((kwargs.ui == 'simple') ? "?ui=simple" : ""));
    {% endif %}

    hideLoader();
};
</script>
{% endblock %}


{% block body %}
{% if refresh_url %}
<a id="refresh" href="{{ refresh_url }}" class="button" onclick="showLoader();">
Using cached version. Click to refresh.
</a>
{% endif %}

<h3><a href="{{ url_source }}">Source: {{ url_source }}</a></h3>

{% if url_utf8 %}
<h3><a href="{{ url_utf8 }}" onclick="showLoader();">UTF8: {{ url_utf8 }}</a></h3>
{% endif %}

<button id="btn_table" onclick="switchTab('table')" class="submenu submenu-pressed">Stats collection</button>
<button id="btn_logs" onclick="switchTab('logs')" class="submenu">Logs categorization</button>
{% if datas and datas[-1][1] %}
<button id="btn_chart" onclick="switchTab('chart')" class="submenu">Progress visualization</button>
{% endif %}

<hr>

<div id="tab_table" style="display: block;">
    <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>start_time</th><td>{{ first_log_time }}</td></tr>
        <tr><th>last_log_time</th><td>{{ last_log_time }}</td></tr>
        <tr><th>elasped</th><td>{{ elasped }}</td></tr>
        <tr><th>crawled_pages</th><td>{{ crawled_pages }}</td></tr>
        <tr><th>scraped_items</th><td>{{ scraped_items }}</td></tr>

        <tr><th>log_critical_count</th><td id="log_critical_count">{{ log_critical_count }}</td></tr>
        <tr><th>log_error_count</th><td id="log_error_count">{{ log_error_count }}</td></tr>
        <tr><th>log_warning_count</th><td id="log_warning_count">{{ log_warning_count }}</td></tr>
        <tr><th>retry_count</th><td id="retry_count">{{ retry_count }}</td></tr>
        <tr><th>redirect_count</th><td id="redirect_count">{{ redirect_count }}</td></tr>
        <tr><th>ignore_count</th><td id="ignore_count">{{ ignore_count }}</td></tr>

        <tr><th>last_crawl</th><td id="last_crawl"></td></tr>
        <tr><th>last_scrape</th><td id="last_scrape"></td></tr>
        <tr><th>last_log</th><td id="last_log"></td></tr>
        <tr><th>current_time</th><td id="current_time"></td></tr>
    </table>
</div>


<div id="tab_logs" style="display: none;">
    <div>
        <b><a href="javascript:;" onclick="displaySwitcher('head_lines')">+/- head -50</a></b>
        <pre id="head_lines" style="display: none;">{{ head_lines }}</pre>
    </div>

    <hr>
    <h4>WARNING+</h4>
    <ul>
    {% for item in re_matchs %}
        {% if item['log_title'] == 'retry_logs' %}
        </ul>
        <hr>
        <h4>INFO</h4>
        <ul>
        {% endif %}

            {% if not item['count'] %}
            <div hidden>
            {% else %}
            <div>
            {% endif %}

                <li><b>{{ item['log_title'] }}</b>
                
                {% if item['lines'] and item['count'] > 1 %}
                    <a href="javascript:;" onclick="displaySwitcher('{{ item['log_details'] }}', '{{ item['log_title'] }}')">
                    +/- DETAILS of {{ item['count'] }} logs
                    </a>
                </li>
                <ul id="{{ item['log_details'] }}" style="display: none;">
                    {% for line in item['lines'] %}
                    <li><pre>{{ line }}</pre></li>
                    {% endfor %}
                </ul>
                {% else %}
                </li>
                {% endif %}
                
                <pre id="{{ item['log_title'] }}" style="color: red; font-size: 18px;">{{ item['line'] }}</pre>
            </div>
    {% endfor %}
    </ul>

    <hr>
    <h4>DEBUG</h4>
    <ul>
    {% for title, line in last_matchs %}
        {% if not line %}
        <div hidden>
        {% else %}
        <div>
        {% endif %}

            <li><b>{{ title }}</b></li>
            <p>{{ line }}</p>
        </div>
    {% endfor %}
    </ul>

    <hr>
    <div>
        <b><a href="javascript:;" onclick="displaySwitcher('tail_lines')">+/- head -50</a></b>
        <pre id="tail_lines" style="display: none;">{{ tail_lines }}</pre>
    </div>
</div>


{% if datas and datas[-1][1] %}
<div id="tab_chart" style="visibility: hidden";>
<div id="chart_total" style="width: 100%; height: 400px;"></div>
<br>
<div id="chart_minute" style="width: 100%; height: 400px;"></div>
</div>
{% endif %}


<script>
var last_crawl_timestamp = {{ last_crawl_timestamp }};
var last_scrape_timestamp = {{ last_scrape_timestamp }};
var last_log_timestamp = {{ last_log_timestamp }};

const LAST_REFRESH_TIMESTAMP = {{ last_refresh_timestamp }};
const LAST_LOG_ALERT_SECONDS = {{ LAST_LOG_ALERT_SECONDS }};

{% if datas and datas[-1][1] %}
var id_of_tabs = new Array('table', 'chart', 'logs');
{% else %}
var id_of_tabs = new Array('table', 'logs');
{% endif %}

//var now_timestamp = Date.now() / 1000;
setTime();
setColor(LAST_LOG_ALERT_SECONDS);
</script>


<script>
{% if refresh_url %}
setInterval(function() {
    var now_timestamp = Date.now() / 1000;
    var seconds = Math.ceil(now_timestamp - LAST_REFRESH_TIMESTAMP);
    my$('#refresh').innerHTML = "Cached " + seconds + " seconds ago, Click to refresh.";
    if(seconds > LAST_LOG_ALERT_SECONDS) {
        my$('#refresh').style = "background: orange;";
    } else {
        my$('#refresh').style = "background: #8BC34A;";
    }
}, 1000);
{% endif %}
</script>


<script>
var datas = {{ datas|safe }};

{% if datas and datas[-1][1] %}
    var myChart1 = echarts.init(my$('#chart_total'));
    var myChart2 = echarts.init(my$('#chart_minute'));
    draw(myChart1, datas, title='count / total', label_1='pages', index_1=1, label_2='items', index_2=3);
    draw(myChart2, datas, title='count / minute', label_1='pages/minute', index_1=2, label_2='items/minute', index_2=4);
{% endif %}
</script>
{% endblock %}
