{% extends "layout.html" %}

{% block head %}
    <link rel="stylesheet" href="/static/css/ui.jqgrid.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="/static/js/grid.locale-en.js"></script>
    <script type="text/javascript" src="/static/js/jquery.jqGrid.min.js"></script>
    <style type="text/css">
        .ui-jqgrid tr.jqgrow td {
            white-space: normal !important;
        }

        div#log_type div {
            float: left;
            margin-right: 1em;
        }
    </style>
{% endblock %}

{% block main %}
<script type=text/javascript>
    $(function(){
        $("#logarea").jqGrid({
            url:"{{ url_for('get_logdata') }}",
            datatype: 'json',
            mtype: 'GET',
            postData: {
                log_type:  function () {return $("input[name='log_type']:checked").val();},
                feed:  function () {return $("#feedlist > li > div.selected").attr('id')},
                exec: function () {return $("#execlist > li > div.selected").attr('id')}
            },
            colNames: ['Date','Level','Logger', 'Feed', 'Message'],
            colModel: [
                {name:'created', width:150, align: 'right'},
                {name:'levelno', width:65, sortable: false},
                {name:'logger', width:100, sortable: false},
                {name:'feed', width:100, sortable: false},
                {name:'message', width:900, sortable: false}
            ],
            pager: '#pager',
            autowidth: true,
            height: 400,
            scroll: 1,
            rowNum: 50,
            sortname: 'created',
            sortorder: 'desc',
            viewrecords: true,
            caption: 'Log viewer',
            jsonReader: {
                root: 'rows',
                page: 'page',
                total: 'total',
                records: 'records',
                repeatitems: false,
                id: "id"
            },
            prmNames: {
                npages: 'npages'
            }
        }).navGrid('#pager', {refresh: true, search:false, del:false, edit:false, add:false});
        $("input[name='log_type']").change(function() {
            $("#execlist > li > div").removeClass('selected')
            $("#execlist > li > div:first").addClass('selected')
            $("#feedlist > li > div").removeClass('selected')
            $("#feedlist > li > div:first").addClass('selected')
            refreshGrid();
        });
        $("#feedlist > li > div").click(function() {
            $("#feedlist > li > div").removeClass('selected');
            $(this).addClass('selected');
            $("input[name='log_type']").filter("[value='core']").attr("checked", true);
            refreshGrid();
        });
        $("#execlist > li > div").click(function() {
            $("#execlist > li > div").removeClass('selected');
            $(this).addClass('selected');
            $("input[name='log_type']").filter("[value='core']").attr("checked", true);
            refreshGrid();
        });
        function refreshGrid(){
            if ($("input[name='log_type']:checked").val() == 'webui')
                $("#logarea").hideCol("feed");
            else
                $("#logarea").showCol("feed");
            $("#logarea").trigger("reloadGrid");
        };
    });
</script>
<h1>FlexGet log messages</h1>

<p>
    <div id="log_type">
        <div><input type="radio" name="log_type" value="core" checked> Core</div>
        <div><input type="radio" name="log_type" value="webui"> Webui</div>
        <div><input type="radio" name="log_type" value="all"> All</div>
    </div>
    <div style="clear:left"></div>

    <table id="logarea"></table>
    <div id="pager"></div>
</p>
{% endblock %}

{% block menu %}
<dl>
    <dt><div><b>Executions</b></div></dt>
    <dd>
    <ul id="execlist">
        <li><div class="item selected" id=""><a href="#">All</a></div></li>
        {% for exec in menu_execs -%}
        <li><div class="item" id="{{  exec[0]  }}"><a href="#">{{ exec[1] }}</a></div></li>
        {% endfor %}
    </ul>
    </dd>
    <dt><div><b>Feeds</b></div></dt>
    <dd>
    <ul id="feedlist">
        <li><div id="" class="item selected"><a href="#">All</a></div></li>
        {% for feed in menu_feeds -%}
        <li><div class="item" id="{{ feed }}"><a href="#">{{ feed }}</a></div></li>
        {% endfor %}
    </ul>
    </dd>
</dl>
{% endblock %}