{% extends "base.html" %}

{% block heading %}
oyster
{% endblock %}

{% block body %}
<script type="text/javascript">
    var REFRESH = 2000;
    var MAX_ROWS = 100;
    setInterval(function() {
        jQuery.getJSON('{{request.script_root}}/?json', function(data) {
            jQuery('#tracking_val').text(data.tracking);
            jQuery('#need_update_val').text(data.need_update);
            var latest_link = jQuery('tr td a')[0]['href'].split('/tracked/')[1];
            var new_rows = ''
            for(var i=0; i < data.logs.length; ++i) {
                if(latest_link == data.logs[i].url) {
                    break;
                }
                if(data.logs[i].error) { 
                    new_rows += '<tr class="error">'
                } else {
                    new_rows += '<tr>';
                }
                new_rows += '<td>' + data.logs[i].action + '</td>\n';
                new_rows += '<td><a href="{{request.script_root}}/tracked/' + data.logs[i].url + '">' + data.logs[i].url + '</td>';
                new_rows += '<td>' + data.logs[i].timestamp + '</td>';
                if(data.logs[i].error) { 
                    new_rows += '<td>' + data.logs[i].error + '</td></tr>';
                } else {
                    new_rows += '<td></td></tr>';
                }
            }
            jQuery('tr:first').after(new_rows);
            jQuery('tr:gt(' + MAX_ROWS + ')').empty()
        });
    }, REFRESH);
</script>

<div class="span-4">
    <h2>Stats</h2>
    <dl>
        <dt>Tracking</dt><dd id="tracking_val">{{tracking}}</dd>
        <dt>Need Update</dt><dd id="need_update_val">{{need_update}}</dd>
        <dt>Mongo Host</dt><dd>{{mongo_host}}</dd>
    </dl>
</div>

<div class="span-12 prepend-2 last">
    <h2>Logs</h2>
    <table>
        <tr>
            <th>action</th>
            <th>description</th>
            <th>timestamp</th>
            <th>&nbsp;</th>
        </tr>
        {% for log in logs %}
            {% include "log_row.html" %}
        {% endfor %}
    </table>
</div>

{% endblock %}