<%inherit file="base.html"/>
<%!
	from headphones import helpers
%>

<%def name="headerIncludes()">
    <div id="subhead_container">
        <div id="subhead_menu">
            <a class="menu_link_edit" href="clearLogs"><i class="fa fa-trash-o"></i> Clear log</a>
        </div>
    </div>
</%def>

<%def name="body()">
	<div id="paddingheader">
		<h1 class="clearfix"><i class="fa fa-flag"></i> Logs</h1>
	</div>
	<table class="display" id="log_table">
		<thead>
			<tr>
				<th id="timestamp">Timestamp</th>
				<th id="level">Level</th>
				<th id="message">Message</th>
			</tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<br>
	<div align="center">Refresh rate: 
	<select id="refreshrate" onchange="setRefresh()">
	<option value="0" selected="selected">No Refresh</option>
	<option value="5">5 Seconds</option>
	<option value="15">15 Seconds</option>
	<option value="30">30 Seconds</option>
	<option value="60">60 Seconds</option>
	<option value="300">5 Minutes</option>
	<option value="600">10 Minutes</option>
	</select></div>
	
</%def>

<%def name="headIncludes()">
	<link rel="stylesheet" href="interfaces/default/css/data_table.css">
</%def>

<%def name="javascriptIncludes()">
	<script src="js/libs/jquery.dataTables.min.js"></script>
	<script>
$(document).ready(function() {
    initActions();

	$('#log_table').dataTable( {
		"bProcessing": true,
        "bServerSide": true,
		"sAjaxSource": 'getLog',
        "sPaginationType": "full_numbers",
        "aaSorting": [[0, 'desc']],
        "iDisplayLength": 25,
        "bStateSave": true,
        "oLanguage": {
                    "sSearch":"Filter:",
					"sLengthMenu":"Show _MENU_ lines per page",
					"sEmptyTable": "No log information available",
					"sInfo":"Showing _START_ to _END_ of _TOTAL_ lines",
					"sInfoEmpty":"Showing 0 to 0 of 0 lines",
					"sInfoFiltered":"(filtered from _MAX_ total lines)"},
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                                if (aData[1] === "ERROR")
                                {
                                    $('td', nRow).closest('tr').addClass("gradeX");
                                }
                                else if (aData[1] === "WARNING")
                                {
                                    $('td', nRow).closest('tr').addClass("gradeW");
                                }
                                else
                                {
                                    $('td', nRow).closest('tr').addClass("gradeZ");
                                }

                                return nRow;
                                },
        "fnServerData": function ( sSource, aoData, fnCallback ) {
			/* Add some extra data to the sender */
			$.getJSON( sSource, aoData, function (json) { 
				fnCallback(json)
			} );
		}
	} );
} );
	</script>
	<script>
		var timer; 
		function setRefresh()
		{
			refreshrate = document.getElementById('refreshrate');
			if(refreshrate != null)
			{
				if(timer)
				{
					clearInterval(timer);
				}
				if(refreshrate.value != 0)
				{
					timer = setInterval("$('#log_table').dataTable().fnDraw()",1000*refreshrate.value);
				}
			}
		}
	</script>
</%def>
