{% extends FUNC_BASE_HTML %}
{% load i18n %}
{% load utils %}



{% block css %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/jquery/ui/1.11.1/themes/smoothness/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL|add:"css/jquery/ui/1.11.1/jquery.ui.cWidget.css"|with_version }}" />
<style type="text/css">
<!--
.errorlist {
	color:#ff0000;
	padding-left:1.5em;
}

.class_messagearea {
	background-color:#ccc;
	border:1px solid #aaa;
	margin:3px auto;
	padding:3px;
}

.class_ol {
	margin:1em;
	padding-left:1em;
}
.class_ol a {
	text-decoration:none;
	color:#0000ff;
}

.class_entry {
	position:relative;
	border:solid 1px #c9c9c9;
	width:60%;
	margin:0 auto;
}
.class_entry .class_entry_header {
	background-color:#1e90ff;
	padding-left:0.5em;
	height:2em;
	line-height:2em;
	cursor:pointer;

	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
}
.class_entry .class_entry_body {
	width:100%;
}
.class_entry .class_entry_body table {
	border-collapse:collapse;
	width:100%;
}
.class_entry .class_entry_body table th,
.class_entry .class_entry_body table td {
	border-bottom:#e3e3e3 1px dotted;
	text-align:left;
	padding:3px 10px;
	font-weight:normal;
}
.class_entry .class_entry_body table th {
	width:30%;
}
.class_entry .class_entry_body table td input[type="text"] {
	width:70%;
}
.class_entry .class_entry_body table td .class_prilist ul {
	list-style:none;
}
.class_entry .class_entry_body table td .class_prilist ul li {
	width:33%;
	float:left;
}
.class_entry .class_entry_body table td .class_daylist ul {
	list-style:none;
}
.class_entry .class_entry_body table td .class_daylist ul li {
	width:4.5em;
	float:left;
}
.class_entry .class_entry_button {
	position:absolute;
	width:24px;
	height:2em;
	line-height:2em;
	top:0;
	right:-24px;
	display:table;
}
.class_entry .class_entry_button div {
	display:table-cell;
	vertical-align:middle;
}
.class_entry .class_entry_button div label {
/*	background:url(/static/img/pkg/syslogsrv/delete.png) no-repeat left top;*/
	display:block;
	width:24px;
	height:24px;
	line-height:24px;
	overflow:hidden;
	cursor:pointer;
}
.class_entry .class_entry_button.class_del_entry_button div label {
	background:url(/static/img/pkg/syslogsrv/delete.png) no-repeat left top;
}
.class_entry .class_entry_button.class_add_entry_button div label {
	background:url(/static/img/pkg/syslogsrv/add.png) no-repeat left top;
} 
.class_entry .class_entry_button div label input[type="checkbox"] {
	opacity:0;
}
.class_entry.class_error_entry .class_entry_header {
	background-color:#ff4444;
	color:#ffffff;
}
.class_entry.class_deleted_entry .class_entry_header {
	background-color:#c0c0c0;
}
.class_entry.class_deleted_entry .class_entry_body {
	/*background-color:#939393;*/
	background-color:#d0d0d0;
}
.class_entry.class_deleted_entry .class_entry_button div label {
	background-position:left bottom;
}
.class_entry.class_blank_entry .class_entry_header {
	background-color:#ffffff;
}

fieldset {
	border:1px #000000 solid;
	padding:0.5em;
	margin:0.5em;
}
fieldset .grayout-contents {
	color:#696969;
}
#{{ form.syslog_remaining_capacity.auto_id }} {
	width: 3em;
}
#{{ form.syslog_period.auto_id }} {
	width: 4em;
}

.settings tr,
.settings th,
.settings td {
    border-collapse: collapse;
    border:none;
    //border-bottom: 1px solid silver;
}

.settings th {
	width:15%;
}

li.cblist {
    list-style: none;
    margin-right: 20px;
    float:left;
    white-space:nowrap;
}

ul.cblist {
    //width:530px;
    border:1px solid silver;
    border-radius: 5px;
    //overflow:hidden;
    overflow:auto;
}

.datetime {
    style="font-size:100%;
    //border:1px solid #000;
    //border-radius: 3px;
}

input.keyword {
    width:100%;
}

table.log_table {
	border-collapse: collapse;
	table-layout: fixed;
	word-wrap: break-word;
}
.log_table thead {
	background-color: #e6e6e6;
}
.log_table th, .log_table td {
	border: 1px solid #000;
	text-align: center;
}
.log_table td.log_msg {
	text-align: left;
}
.log_table tr.even {
	background-color: #e6e6e6;
}

-->
</style>
{% endblock css %}


{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/1.10.2/jquery-1.10.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery/ui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL|add:"js/jquery/ui/1.11.1/jquery.ui.cWidget.js"|with_version }}"></script>
<script type="text/javascript">
<!--


(function() {
	function addForm(prefix, empty_form_html, $el) {
		var $totalForms = $("#id_"+ prefix +"-TOTAL_FORMS");
		var $maxNumForms = $("#id_"+ prefix +"-MAX_NUM_FORMS");
		var totalFormsCount = parseInt($totalForms.val());
		var maxNumFormsCount = parseInt($maxNumForms.val());

		if(totalFormsCount >= maxNumFormsCount) {
			return undefined;
		}

		empty_form_html = empty_form_html.replace(new RegExp("__prefix__", "g"), totalFormsCount);
		$empty_form = $(empty_form_html);
		$empty_form.each(function(e) {
			$(this).insertBefore($el);
		});

		$totalForms.val(totalFormsCount + 1);

		return $empty_form;
	}

	$.extend({
		formset: function() {
			var api = arguments[0];
			var args = Array.prototype.slice.call(arguments, 1);

			switch(api) {
				case "add":
					var prefix = args[0];
					var empty_form_html = args[1];
					var $el = args[2];
					return addForm(prefix,
					               empty_form_html,
					               $el);
				default:
					return this;
			}
		},
		__dummy__: 1
	});

})(jQuery);



(function($) {
$(function() {

	$(".class_timerange input[type='text']")
	.timespinner({step:5})
	.width("4em");

	$(".class_entry_body").each(function(i) {
		var $entry = $(this).parent();
		if($(this).find(".errorlist").size()) {
			$entry.addClass("class_error_entry");
		}
	});

	function attachEntryAction($entry, open) {
		var $header = $entry.find(".class_entry_header");
		var $body = $entry.find(".class_entry_body");
		//var $button = $entry.find(".class_entry_button");
		var $button = $entry.find(".class_del_entry_button");
		
		$header
		.on("click", function(e) {
			//$body.find("table")
			$body
			.toggle();
			parent.iFrameResize();
		});
		if(!open) {
			$header.trigger("click");
		}

		$body.find(".class_timerange input[type='text']").each(function(i) {
			$(this)
			.timespinner({step:5})
			.width("4em");
		});
		
		$button.find("input")
		.on("change", function(e) {
			var checked = $(this).prop("checked");
			var $entry = $(this).parent().parent().parent().parent();
			if(checked) {
				$entry.addClass("class_deleted_entry");
			} else {
				$entry.removeClass("class_deleted_entry");
			}
		});
	}

	$(".class_entry").each(function(i) {
		attachEntryAction($(this), false);
	});

	var template = $("#id_template").html();
	var $blank = $("#id_blank_entry");
	$("#id_addform")
	.on("click", function(e) {
		$entry = $.formset("add", "{{ formset.prefix }}",
//		                          $("#id_template").html(),
//		                          $("#id_blank_entry"));
		                          template,
		                          $blank);
		if($entry) {
			attachEntryAction($entry, true);
			parent.iFrameResize();
		} else {
			$("#id_blank_entry h3").text("{% trans "syslogsrv: Can not add any more entries." %}");
		}
	});

});
})($.noConflict(true));
//-->
</script>
{{ block.super }}
<script type="text/javascript">
<!--
$(function() {
});
//-->
</script>
{% endblock js %}



{% block ajaxform_modified %}{{ block.super }}{% endblock ajaxform_modified %}
{% block to_ajaxform %}{% endblock to_ajaxform %}



{% block function %}
<div class="basic_function">
  <fieldset>
    <legend>{% trans "log filter settings" %}</legend>
    <table class="settings">

      <tr>
        <th>{% trans "DateTime" %}</th>
        <td>
          <div class="datetime">{% trans "Timestamp(from)" %}:{{ form.datetime_from }}</div>
          <div class="datetime">{% trans "Timestamp(to)" %}:{{ form.datetime_to }}</div>
        </td>
      </tr>

      <tr>
        <th>{% trans "Facility" %}</th>
        <td>
          <ul class="cblist">
          {% for fac in facs %}
          <li class="cblist">
          {% if fac == 0 %}{{ form.fac0 }}{{ form.fac0.label_tag }}{% endif %}
          {% if fac == 1 %}{{ form.fac1 }}{{ form.fac1.label_tag }}{% endif %}
          {% if fac == 2 %}{{ form.fac2 }}{{ form.fac2.label_tag }}{% endif %}
          {% if fac == 3 %}{{ form.fac3 }}{{ form.fac3.label_tag }}{% endif %}
          {% if fac == 4 %}{{ form.fac4 }}{{ form.fac4.label_tag }}{% endif %}
          {% if fac == 5 %}{{ form.fac5 }}{{ form.fac5.label_tag }}{% endif %}
          {% if fac == 6 %}{{ form.fac6 }}{{ form.fac6.label_tag }}{% endif %}
          {% if fac == 7 %}{{ form.fac7 }}{{ form.fac7.label_tag }}{% endif %}
          {% if fac == 8 %}{{ form.fac8 }}{{ form.fac8.label_tag }}{% endif %}
          {% if fac == 9 %}{{ form.fac9 }}{{ form.fac9.label_tag }}{% endif %}
          {% if fac == 10 %}{{ form.fac10 }}{{ form.fac10.label_tag }}{% endif %}
          {% if fac == 11 %}{{ form.fac11 }}{{ form.fac11.label_tag }}{% endif %}
          {% if fac == 12 %}{{ form.fac12 }}{{ form.fac12.label_tag }}{% endif %}
          {% if fac == 13 %}{{ form.fac13 }}{{ form.fac13.label_tag }}{% endif %}
          {% if fac == 14 %}{{ form.fac14 }}{{ form.fac14.label_tag }}{% endif %}
          {% if fac == 15 %}{{ form.fac15 }}{{ form.fac15.label_tag }}{% endif %}
          {% if fac == 16 %}{{ form.fac16 }}{{ form.fac16.label_tag }}{% endif %}
          {% if fac == 17 %}{{ form.fac17 }}{{ form.fac17.label_tag }}{% endif %}
          {% if fac == 18 %}{{ form.fac18 }}{{ form.fac18.label_tag }}{% endif %}
          {% if fac == 19 %}{{ form.fac19 }}{{ form.fac19.label_tag }}{% endif %}
          {% if fac == 20 %}{{ form.fac20 }}{{ form.fac20.label_tag }}{% endif %}
          {% if fac == 21 %}{{ form.fac21 }}{{ form.fac21.label_tag }}{% endif %}
          {% if fac == 22 %}{{ form.fac22 }}{{ form.fac22.label_tag }}{% endif %}
          {% if fac == 23 %}{{ form.fac23 }}{{ form.fac23.label_tag }}{% endif %}
          {% if fac == 99 %}{{ form.facxx }}{{ form.facxx.label_tag }}{% endif %}
          </li>
          {% endfor %}
          </ul>
        </td>
      </tr>

      <tr>
        <th>{% trans "Priority" %}</th>
        <td>
          <ul class="cblist">
          {% for pri in pris %}
          <li class="cblist">
          {% if pri == 0 %}{{ form.pri0 }}{{ form.pri0.label_tag }}{% endif %}
          {% if pri == 1 %}{{ form.pri1 }}{{ form.pri1.label_tag }}{% endif %}
          {% if pri == 2 %}{{ form.pri2 }}{{ form.pri2.label_tag }}{% endif %}
          {% if pri == 3 %}{{ form.pri3 }}{{ form.pri3.label_tag }}{% endif %}
          {% if pri == 4 %}{{ form.pri4 }}{{ form.pri4.label_tag }}{% endif %}
          {% if pri == 5 %}{{ form.pri5 }}{{ form.pri5.label_tag }}{% endif %}
          {% if pri == 6 %}{{ form.pri6 }}{{ form.pri6.label_tag }}{% endif %}
          {% if pri == 7 %}{{ form.pri7 }}{{ form.pri7.label_tag }}{% endif %}
          {% if pri == 99 %}{{ form.prix }}{{ form.prix.label_tag }}{% endif %}
          </li>
          {% endfor %}
          </ul>
        </td>
      </tr>

      <tr>
        <th>{{ form.hostname.label_tag }}</th>
        <td>{{ form.hostname }}</td>
      </tr>

      <tr>
        <th>{{ form.keyword.label_tag }}</th>
        <td>{{ form.keyword }}</td>
      </tr>

      <tr>
        <td></td>
        <td>
          <div style="text-align:right;">
            <input id="id_apply" class="mbtn" type="submit" name="apply"
                onclick="parent.wait.start()" value="{% trans "Apply" %}" />
            </div>
          <td/>
        <tr/>
    </table>
  </fieldset>

  {% if nums > 0 %}
  <table class="log_table">
    <thead>
      <tr>
        <th width="22%">{% trans "DateTime" %}</th>
        <th>{% trans "Facility" %}</th>
        <th>{% trans "Priority" %}</th>
        <th width="15%">{% trans "Hostname" %}</th>
        <th width="45%">{% trans "Message" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for log in logs %}
        <tr class="{% cycle "odd" "even" %}">
          <td>{{ log.datetime|date:"DATETIME_FORMAT" }}</td>
          <td>{{ log.facility }}</td>
          <td>{{ log.priority }}</td>
          <td>{{ log.hostname }}</td>
          <td class="log_msg">{{ log.message }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

</div>
{% endblock function %}