{% extends "base.html" %}

{% block title %}Alerts{% endblock %}

{% block content %}

<form action="{% url "netinfo.alerts.views.index" %}" method="POST">{% csrf_token %}
<p class='heading'>Alerts</p>
<table class='list' style='table-layout: fixed;'>
	<tr class='list'>
		<th class='list' width='15px'></th>
		<th class='list' width='50px'>ID</th>
		<th class='list' width='160px'>AlertTime</th>
		<th class='list' width='90px'>Class</th>
		<th class='list' width='60px'>Severity</th>
		<th class='list' width='70px'>State</th>
		<th class='list' width='120px'>Hostname</th>
		<th class='list' width='220px'>Object</th>
		<th class='list' style='word-wrap:break-word;'>Message</th>
	</tr>
	<tr class='list'>
		<th class='list' width='15px'><input type="checkbox" id="toggleall" onclick="ToggleAllAlerts(this)"></th>
		<th class='list' width='50px'></th>
		<th class='list' width='160px'></th>
		<th class='list' width='90px'></th>
		<th class='list' width='60px'></th>
		<th class='list' width='70px'></th>
		<th class='list' width='120px'><input type="text" name="q_hostname" value="{{q_hostname}}" size="6"/></th>
		<th class='list' width='220px'><input type="text" name="q_object" value="{{q_object}}" size="16"/></th>
		<th class='list' style='word-wrap:break-word;'><input type="text" name="q_message" value="{{q_message}}" size="26"/></th>
	</tr>
{% for alert in page.object_list %}
	{% url "app_views.alerts" alert.a_id as url_a_id %}
	<tr class='list'>
	<td class='list'><input type="checkbox" class="alertlist" name="alertlist[]" value="{{alert.a_id}}"></td>
	<td class='listlink'><a class="listlink" href="{% url "netinfo.alerts.views.detail" alert.a_id %}">{{ alert.a_id }}</a></td>
	<td class='list'>{{ alert.a_alerttime|date:'Y-m-d H:i:s' }}</td>
	<td class='list'>{{ alert.a_class }}</td>
	<td class='list'>{{ alert.a_severity }}</td>
	<td class='list'>{{ alert.a_state }}</td>
	<td class='list'>{{ alert.a_hostname }}</td>
	<td class='list'>{{ alert.a_object }}</td>
	<td class='list'>{{ alert.a_message }}</td>
	</tr>
{% endfor %}
</table>
<p align="left">
  <input type="button" id="resolve_text" name="resolve_text" value="Resolve" onclick="ResolveDialog();" disabled/>
  <input type="submit" id="resolve_alertlist" name="resolve_alertlist" value="" style="visibility:hidden;" disabled/>
</p>
<input type="hidden" id="resolution_text" name="resolution_text" value="" />
</form>

{% include "pagination.html" %}

<p class='divider'>&nbsp</p>


<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });
        //$(this).find('input[type=submit]').hide();
    });
});
</script>
<script type="text/javascript">
function ToggleAllAlerts() {
  element = document.getElementById('toggleall')
  if (element.checked) {
    checked = true;
    $('input[name="resolve_text"]').removeAttr('disabled');
  } else {
    checked = false;
    $('input[name="resolve_text"]').attr('disabled', true);
    $('input[name="resolution_text"]').attr('value', "");
    document.getElementById('resolve_alertlist').style.visibility='hidden';
  }
  checkboxes = document.getElementsByClassName('alertlist');
  for(var i=0 ; i<checkboxes.length ; i++) {
    checkboxes[i].checked = checked;
  }
}
</script>
<script type="text/javascript">
$('input[type="checkbox"]').click(function(){
  var getClass = $(this).attr('class');
  if (getClass == "alertlist") {
    var flag = 0;
    $('input[class="' + getClass + '"]').each(function(){
      if($(this).is(':checked'))
        flag++;
    });
    if(flag > 0) {
      $('input[name="resolve_text"]').removeAttr('disabled');
    } else {
      $('input[name="resolve_text"]').attr('disabled', true);
      $('input[name="resolution_text"]').attr('value', "");
      document.getElementById('resolve_alertlist').style.visibility='hidden';
      document.getElementById('toggleall').checked = false;
    }
  }
});
</script>
<script type="text/javascript">
function ResolveDialog() {
  var resText = prompt("Resolution Text", "");
  if (resText !== null && resText !== "") {
    $('input[name="resolution_text"]').attr('value', resText);
    $('input[name="resolve_alertlist"]').attr('value', 'Resolve All');
    document.getElementById('resolve_text').style.visibility='hidden';
    document.getElementById('resolve_alertlist').style.visibility='visible';
    $('input[name="resolve_alertlist"]').removeAttr('disabled');
  }
}
</script>

{% endblock %}