{% extends "template/template.html" %}
{% block header %}
    <!--<meta http-equiv="refresh" content="60" />-->
    <link rel="stylesheet" type="text/css" href="/fm/event_list_css/" />
    <link type="text/css" rel="stylesheet" href="/static/css/jquery.autocomplete.css">
    <link type="text/css" rel="stylesheet" href="/static/css/jquery.pager.css">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript" src="/static/js/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js/jquery.autocomplete.js"></script>
    <script type="text/javascript" src="/static/js/jquery.pager.js"></script>
{% endblock %}
{% block title %}Fault Management{% endblock %}
<{% block content %}
<h1>Fault Management</h1>

<script type="text/javascript">
function show_result(data) {
    var tb=$("#events_table TBODY");
    tb.empty();
    $.each(data["events"],function(i,r){
        var event_id,status;
        var $tr=$(document.createElement("tr"));
        $tr.addClass(r[0]);
        tb.append($tr);
        $.each(r, function(j,d) {
            if(j>0) {
                var $td=$(document.createElement("td"));
                $tr.append($td);
                if(j==1) {
                    event_id=d;
                    $td.html("<A HREF='"+d+"/'>"+d+"</A>");
                } else if (j==4) {
                    status=d;
                    $td.text({U:"Unclassified",A:"Active",C:"Closed"}[status]);
                } else {
                    $td.text(d);
                }
            }
        });
        var $td=$(document.createElement("td"));
        $tr.append($td);
        if(status=="C") {
            $td.html("<A HREF='/fm/"+event_id+"/status/open/'>[Open]</A><BR/><A HREF='/fm/"+event_id+"/status/reclassify/'>[Reclassify]</A>");
        } else if (status=="A") {
            $td.html("<A HREF='/fm/"+event_id+"/status/close/'>[Close]</A><BR/><A HREF='/fm/"+event_id+"/status/reclassify/'>[Reclassify]</A>");
        }
    });
    // Set up pager
    $("#pager").pager({pagenumber:data["page"]+1,pagecount:data["pages"],buttonClickCallback: pager_click});
    $("#events_count").text(data["count"]);
    window.setTimeout(function() {
        $("#form").submit()
    },60000);
}

function toggle_panel() {
    var fp=$("#form_panel");
    fp.toggle();
    if(fp.is(":hidden")) {
        $("#toggle_panel_link").text("[Show filter]");
    } else {
        $("#toggle_panel_link").text("[Hide filter]");
    }
    return false;
}

function pager_click(number) {
    $("#id_page").val(number);
    $("#form").submit();
}

$(document).ready(function(){
    $("#form").ajaxForm({
        dataType: "json",
        success : show_result,
        url     : "/fm/lookup/events/"
    });
    $("#form").submit();
});

</script>

<DIV ID="form_panel">
    <FORM ID="form">
        <TABLE BORDER="0">
        {{form.as_table}}
        </TABLE>
        <INPUT TYPE="submit" VALUE="Filter" />
    </FORM>
</DIV>
<DIV>Events: <SPAN ID="events_count"></SPAN> <A HREF="#" ID="toggle_panel_link" ONCLICK="toggle_panel();">[Hide filter]</A></DIV>
<TABLE BORDER='0' ID="events_table">
    <THEAD>
        <TR>
            <TH>#</TH>
            <TH>Object</TH>
            <TH>Time</TH>
            <TH>Status</TH>
            <TH>Category</TH>
            <TH>Class</TH>
            <TH>Priority</TH>
            <TH>Subject</TH>
            <TH>Action</TH>
        </TR>
    </THEAD>
    <TBODY>
    </TBODY>
</TABLE>
<DIV ID="pager"></DIV>
{%endblock%}