logs view: update frio template

add search and filter columns support.
add "prev/next" buttons to details popup

view/theme/frio/js/module/admin/logs/view.js

@@ -1,10 +1,51 @@
 $(function(){
-	$(".log-event").on("click", function(ev) {
-		var $modal = $("#logdetail");
-		var tr = $modal.find(".main-data tbody tr")[0];
-		tr.innerHTML = ev.currentTarget.innerHTML;
 
-		var data = JSON.parse(ev.currentTarget.dataset.source);
+	/* column filter */
+	$("a[data-filter]").on("click", function(ev) {
+		var filter = this.dataset.filter;
+		var value = this.dataset.filterValue;
+		var re = RegExp(filter+"=[a-z]*");
+		var newhref = location.href;
+		if (!location.href.indexOf("?") < 0) {
+			newhref = location.href + "?" + filter + "=" + value;
+		} else if (location.href.match(re)) {
+			newhref = location.href.replace(RegExp(filter+"=[a-z]*"), filter+"="+value);
+		} else {
+			newhref = location.href + "&" + filter + "=" + value;
+		}
+		location.href = newhref;
+		return false;
+	});
+
+	/* log details dialog */
+	$(".log-event").on("click", function(ev) {
+		show_details_for_element(ev.currentTarget);
+	});
+
+	$("[data-previous").on("click", function(ev){ 
+		var currentid = document.getElementById("logdetail").dataset.rowId;
+		var $elm = $("#" + currentid).prev();
+		if ($elm.length == 0) return;
+		show_details_for_element($elm[0]);
+	});
+
+	$("[data-next").on("click", function(ev){ 
+		var currentid = document.getElementById("logdetail").dataset.rowId;
+		var $elm = $("#" + currentid).next();
+		if ($elm.length == 0) return;
+		show_details_for_element($elm[0]);
+	});
+
+
+	function show_details_for_element(element) {
+		var $modal = $("#logdetail");
+
+		$modal[0].dataset.rowId = element.id;
+
+		var tr = $modal.find(".main-data tbody tr")[0];
+		tr.innerHTML = element.innerHTML;
+		
+		var data = JSON.parse(element.dataset.source);
 		$modal.find(".source-data td").each(function(i,elm){
 			var k = elm.dataset.value;
 			elm.innerText = data[k];
@@ -12,15 +53,18 @@ $(function(){
 
 		var elm = $modal.find(".event-data")[0];
 		elm.innerHTML = "";
-		var data = ev.currentTarget.dataset.data;
+		var data = element.dataset.data;
 		if (data !== "") {
 			elm.innerHTML = "<h3>Data</h3>";
 			data = JSON.parse(data);
 			elm.innerHTML += recursive_details("", data);
 		}
 
+		$("[data-previous").prop("disabled", $(element).prev().length == 0);
+		$("[data-next").prop("disabled", $(element).next().length == 0);
+		
 		$modal.modal({})
-	})
+	}
 
 	function recursive_details(s, data, lev=0) {
 		for(var k in data) {

view/theme/frio/templates/admin/logs/view.tpl

@@ -6,13 +6,54 @@
 		<div id="admin-error-message-wrapper" class="alert alert-warning">
 			<p>{{$error nofilter}}</p>
 		</div>
-		{{else}}
+	{{else}}
+		<form method="get" class="row">
+			<div class="col-xs-10">
+				<div class="form-group form-group-search">
+					<input accesskey="s" id="nav-search-input-field" class="form-control form-search"
+						type="text" name="q" data-toggle="tooltip" title="Search in logs"
+						placeholder="Search" value="{{$q}}">
+					<button class="btn btn-default btn-sm form-button-search"
+						type="submit">Search</button>
+				</div>
+			</div>
+			<div class="xol-xs-2">
+				<a href="/admin/logs/view" class="btn btn-default">Show all</a>
+			</div>
+		</form>
+
 		<table class="table table-hover">
 			<thead>
 				<tr>
 					<th>Date</th>
-					<th>Level</th>
+					<th class="dropdown">
-					<th>Context</th>
+						<a class="dropdown-toggle text-nowrap" type="button" id="level" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							Level {{if $filters.level}}({{$filters.level}}){{/if}}<span class="caret"></span>
+						</a>
+						<ul class="dropdown-menu" aria-labelledby="level">
+							{{foreach $filtersvalues.level as $v }}
+								<li {{if $filters.level == $v}}class="active"{{/if}}>
+									<a href="/admin/logs/view?level={{$v}}" data-filter="level" data-filter-value="{{$v}}">
+										{{if $v == ""}}ALL{{/if}}{{$v}}
+									</a>
+								</li>
+							{{/foreach}}
+						</ul>
+					</th>
+					<th class="dropdown">
+						<a class="dropdown-toggle text-nowrap" type="button" id="context" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							Context {{if $filters.context}}({{$filters.context}}){{/if}}<span class="caret"></span>
+						</a>
+						<ul class="dropdown-menu" aria-labelledby="context">
+							{{foreach $filtersvalues.context as $v }}
+								<li {{if $filters.context == $v}}class="active"{{/if}}>
+									<a href="/admin/logs/view?context={{$v}}" data-filter="context" data-filter-value="{{$v}}">
+										{{if $v == ""}}ALL{{/if}}{{$v}}
+									</a>
+								</li>
+							{{/foreach}}
+						</ul>
+					</th>
 					<th>Message</th>
 				</tr>
 			</thead>
@@ -28,14 +69,14 @@
 						{{elseif $row->level == "NOTICE"}}bg-info
 						{{elseif $row->level == "DEBUG"}}text-muted
 						{{/if}}
-					   ">{{$row->level}}</td>
+					">{{$row->level}}</td>
 					<td>{{$row->context}}</td>
 					<td style="width:80%">{{$row->message}}</td>
 				</tr>
 				{{/foreach}}
 			</tbody>
 		</table>
-		{{/if}}
+	{{/if}}
 </div>
 
 <div id="logdetail" class="modal fade" tabindex="-1" role="dialog">
@@ -86,6 +127,8 @@
 
 			</div>
 			<div class="modal-footer">
+				<button type="button" class="btn btn-default" data-previous>&lt;</button>
+				<button type="button" class="btn btn-default" data-next>&gt;</button>
 				<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
 			</div>
 		</div><!-- /.modal-content -->