[syslog] Improved filtering with suggestions from existing log

1 files changed, 73 insertions, 28 deletions

diff --git a/modules-available/syslog/templates/page-syslog.html b/modules-available/syslog/templates/page-syslog.html
index 98e94291..cb20a93a 100644
--- a/modules-available/syslog/templates/page-syslog.html
+++ b/modules-available/syslog/templates/page-syslog.html
@@ -1,35 +1,47 @@
 <h1>{{lang_clientLog}}</h1>
+<style type="text/css">
+	.selectize-dropdown {
+		max-width: 500px;
+	}
+</style>
 <form method="post" action="?do=SysLog">
 	<input type="hidden" name="token" value="{{token}}">
+	<div class="pull-left">
+		<label for="filterstring">{{lang_filter}}</label>
+	</div>
+	<div class="clearfix"></div>
 	<div class="input-group">
-		<span class="input-group-addon">{{lang_filter}}</span>
-		<input id="filterstring" type="text" placeholder="id" value="{{filter}}" name="filter" data-role="tagsinput" />
-		<span class="input-group-addon">
-			<input type="checkbox" name="not" {{#not}}checked="checked"{{/not}}> {{lang_not}}
-		</span>
+		<input id="filterstring" placeholder="id" value="{{filter}}" name="filter">
 		<span class="input-group-btn">
-			<button class="btn btn-default" type="submit">{{lang_go}}</button>
-		</span>
+				<button class="btn btn-default" type="submit">{{lang_go}}</button>
+			</span>
+	</div>
+	<div class="pull-left">
+		<div class="checkbox">
+			<input id="notbox" type="checkbox" name="not" {{#not}}checked="checked"{{/not}}>
+			<label for="notbox">{{lang_not}}</label>
+		</div>
 	</div>
 </form>
 {{{pagenav}}}
 <table class="table table-striped table-condensed">
 	<thead>
-		<th width="1"></th>
-		<th>{{lang_when}}</th>
-		<th>{{lang_client}}</th>
-		<th>{{lang_event}}</th>
-		<th width="1">{{lang_details}}</th>
+	<th width="1"></th>
+	<th>{{lang_when}}</th>
+	<th>{{lang_client}}</th>
+	<th>{{lang_event}}</th>
+	<th width="1">{{lang_details}}</th>
 	</thead>
 	<tbody>
 	{{#list}}
 		<tr>
-			<td><span class="glyphicon {{icon}}" title="{{logtypeid}}" onclick="$('#filterstring').tagsinput('add', '{{logtypeid}}')"></span></td>
+			<td><span class="type-button glyphicon {{icon}}" title="{{logtypeid}}"></span></td>
 			<td class="text-right" nowrap="nowrap">{{date}}</td>
 			<td>{{clientip}}</td>
 			<td>{{description}}</td>
 			<td>{{#extra}}
-				<a class="btn btn-default btn-xs pull-left" onclick="$('#details-body').html($('#extra-{{logid}}').html())" data-toggle="modal" data-target="#myModal">&raquo;</a>
+				<a class="btn btn-default btn-xs pull-left" onclick="$('#details-body').html($('#extra-{{logid}}').html())"
+					data-toggle="modal" data-target="#myModal">&raquo;</a>
 				<div class="hidden" id="extra-{{logid}}">{{extra}}</div>
 			{{/extra}}</td>
 		</tr>
@@ -39,20 +51,53 @@
 {{{pagenav}}}
 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="modal-dialog modal-lg">
-    <div class="modal-content">
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-        <h4 class="modal-title" id="myModalLabel">{{lang_details}}</h4>
-      </div>
-      <div class="modal-body">
-			<pre id="details-body"></pre>
-      </div>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-      </div>
-    </div>
-  </div>
+	<div class="modal-dialog modal-lg">
+		<div class="modal-content">
+			<div class="modal-header">
+				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
+						class="sr-only">Close</span></button>
+				<h4 class="modal-title" id="myModalLabel">{{lang_details}}</h4>
+			</div>
+			<div class="modal-body">
+				<pre id="details-body"></pre>
+			</div>
+			<div class="modal-footer">
+				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+			</div>
+		</div>
+	</div>
 </div>
 
+<script type="application/javascript"><!--
+document.addEventListener('DOMContentLoaded', function () {
+
+	function renderOption(item, escape) {
+		return '<div><div class="pull-right badge">' + escape(item.counter) + '</div>' + escape(item.logtypeid) + '</div>';
+	}
+
+	function renderSelected(item, escape) {
+		return '<div>' + escape(item.logtypeid) + '</div>';
+	}
+
+	var opts = {{{types}}} || [];
+	var $box = $('#filterstring').selectize({
+		options: opts,
+		plugins: ["remove_button"],
+		valueField: 'logtypeid',
+		searchField: "logtypeid",
+		openOnFocus: true,
+		create: true,
+		render: {option: renderOption, item: renderSelected},
+		maxItems: null,
+		highlight: false
+	});
+	var inst = $box[0].selectize;
+
+	$('.type-button').click(function() {
+		inst.addOption({logtypeid: this.title, counter: ''});
+		inst.addItem(this.title, true);
+	});
+});
+//--></script>
+