From 44742851b22f225294a693f54161ad8e43a7dfda Mon Sep 17 00:00:00 2001
From: Simon Rettberg
Date: Mon, 28 Jun 2021 15:04:35 +0200
Subject: [eventlog] Check permissions; add synamic suggestions for keys

---
 .../eventlog/templates/page-filters-edit-rule.html | 113 +++++++++++++++++----
 1 file changed, 94 insertions(+), 19 deletions(-)

(limited to 'modules-available/eventlog/templates')

diff --git a/modules-available/eventlog/templates/page-filters-edit-rule.html b/modules-available/eventlog/templates/page-filters-edit-rule.html
index 72a53e9a..2019406a 100644
--- a/modules-available/eventlog/templates/page-filters-edit-rule.html
+++ b/modules-available/eventlog/templates/page-filters-edit-rule.html
@@ -7,7 +7,8 @@
 	<div class="form-group row">
 		<div class="col-md-4">
 			<label for="i-type">{{lang_type}}</label>
-			<input autocomplete="off" id="i-type" list="i-types" class="form-control" name="type" value="{{type}}" required>
+			<input autocomplete="off" id="i-type" list="i-types" class="form-control" name="type" value="{{type}}"
+					 required>
 			<datalist id="i-types">
 				{{#types}}
 				<option value="{{.}}">{{lang_typeExample}}: {{.}}</option>
@@ -30,38 +31,52 @@
 		</div>
 	</div>
 	{{#filter}}
-	<div class="form-group">
-		<label>
+	<div class="form-group row">
+		<div class="col-md-1 col-sm-3">
+			<label>{{lang_index}}</label>
 			<span class="form-control">{{index}}</span>
-		</label>
-		<label>
-			{{lang_filterPath}}
-			<input class="form-control" name="filter[{{index}}][path]" value="{{path}}">
-		</label>
-		<label>
-			{{lang_filterOp}}
-			<select class="form-control op-select" name="filter[{{index}}][op]" data-index="{{index}}">
+		</div>
+		<div class="col-md-2 col-sm-9">
+			<label for="key-{{index}}">
+				{{lang_filterPath}}
+			</label>
+			<input id="key-{{index}}" class="form-control filter-key" name="filter[{{index}}][path]" value="{{path}}"
+					 list="filter-keys"
+					 autocomplete="off" data-index="{{index}}">
+		</div>
+		<div class="col-md-1 col-sm-6">
+			<label for="op-{{index}}">
+				{{lang_filterOp}}
+			</label>
+			<select id="op-{{index}}" class="form-control op-select" name="filter[{{index}}][op]" data-index="{{index}}">
 				{{#operators}}
 				<option {{selected}}>{{name}}</option>
 				{{/operators}}
 			</select>
-		</label>
-		<label>
-			{{lang_filterArg}}
-			<input class="form-control op-arg" name="filter[{{index}}][arg]" value="{{arg}}" data-index="{{index}}">
-		</label>
+		</div>
+		<div class="col-md-3 col-sm-6">
+			<label for="arg-{{index}}">
+				{{lang_filterArg}}
+			</label>
+			<input id="arg-{{index}}" class="form-control op-arg" name="filter[{{index}}][arg]" value="{{arg}}"
+					 data-index="{{index}}">
+		</div>
+		<div class="col-md-5 col-sm-12 small" id="sample-{{index}}" style="word-break:break-all">
+		</div>
 		<!--label>
 			{{lang_filterResult}}
 			<input class="form-control" name="filter[{{index}}][result]" value="{{result}}">
 		</label-->
 	</div>
 	{{/filter}}
+	<datalist id="filter-keys">
+	</datalist>
 	<div>
 		<p>{{lang_hintRegex}}</p>
 	</div>
 	<div class="form-group">
-			<label for="i-subject">{{lang_subject}}</label>
-			<input id="i-subject" class="form-control" name="subject" value="{{subject}}">
+		<label for="i-subject">{{lang_subject}}</label>
+		<input id="i-subject" class="form-control" name="subject" value="{{subject}}">
 	</div>
 	<div class="form-group">
 		<label for="msg-txt">
@@ -93,10 +108,70 @@
 				buttonClass: 'form-control'
 			});
 		}
-		$('.op-select').change(function() {
+		$('.op-select').change(function () {
 			var $t = $(this);
 			var disabled = $t.val() === '*';
 			$('.op-arg[data-index=' + $t.data('index') + ']').prop('disabled', disabled);
 		}).change();
+		var currentType = {};
+		var typeSamples = {};
+		var typeChanged = true;
+		var $type = $('#i-type');
+		var $list = $('#filter-keys');
+		var $fkInputs = $('.filter-key');
+		// Flag if type changed
+		$type.change(function () {
+			typeChanged = true;
+		});
+		// If type changed, fetch sample data, or use cached, and populate autocomplete
+		$fkInputs.focus(function () {
+			if (!typeChanged)
+				return;
+			typeChanged = false;
+			var typeVal = $type.val();
+			if (typeSamples[typeVal]) {
+				setAutocomplete(typeVal);
+				return;
+			}
+			$.ajax('?do=eventlog&show=rules', {
+				data: {type: typeVal, token: TOKEN},
+				method: 'POST',
+				dataType: 'json'
+			}).done(function (data) {
+				typeSamples[typeVal] = data;
+				setAutocomplete(typeVal);
+			});
+		});
+
+		// Population function
+		function setAutocomplete(type) {
+			var t = typeSamples[type];
+			$list.empty();
+			if (!t)
+				return;
+			currentType = t;
+			for (var k in t) {
+				if (!t.hasOwnProperty(k))
+					continue;
+				$list.append($('<option>').text(k));
+			}
+		}
+
+		// Display sample data
+		var chFn = function () {
+			var $this = $(this);
+			var wat = currentType[$this.val()];
+			if (wat) {
+				wat = wat.replace("\r", "\\r").replace("\n", "\\n");
+				if (wat.length > 180) {
+					wat = wat.substr(0, 180) + '...';
+				}
+			} else {
+				wat = '';
+			}
+			var index = $this.data('index');
+			$('#sample-' + index).text(wat);
+		};
+		$fkInputs.on('input', chFn).change(chFn).change();
 	});
 </script>
\ No newline at end of file
-- 
cgit v1.2.3-55-g7522