path: root/modules-available/eventlog/templates/page-filters-edit-rule.html

<h2>
	{{#ruleid}}
		{{lang_editFilter}}
	{{/ruleid}}
	{{^ruleid}}
		{{lang_createFilter}}
	{{/ruleid}}
</h2>
<h3>{{title}}</h3>

<p>{{lang_filterExampleHelpText}}</p>

<form method="post" action="?do=eventlog&amp;show=rules">
	<input type="hidden" name="token" value="{{token}}">
	<input type="hidden" name="id" value="{{ruleid}}">
	<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>
			<datalist id="i-types">
				{{#types}}
				<option value="{{.}}">{{lang_typeExample}}: {{.}}</option>
				{{/types}}
			</datalist>
		</div>
		<div class="col-md-8">
			<label for="i-title">{{lang_title}}</label>
			<input id="i-title" class="form-control" name="title" value="{{title}}" required>
		</div>
	</div>
	<div class="form-group row">
		<div class="col-md-12">
			<label for="i-description">{{lang_description}}</label>
			<textarea id="i-description" class="form-control" name="description" rows="4">{{description}}</textarea>
		</div>
	</div>
	<div class="form-group row">
		<div class="col-md-12">
			<label for="i-transports">{{lang_transports}}</label>
			<select multiple name="transports[]" id="i-transports" class="form-control multilist">
				{{#transports}}
				<option value="{{transportid}}" {{selected}}>{{title}}</option>
				{{/transports}}
			</select>
		</div>
	</div>
	{{#filter}}
	<div class="form-group row filter-rule-row">
		<div class="col-md-1 col-sm-3">
			<label>{{lang_index}}</label>
			<span class="form-control">{{index}}</span>
		</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>
		</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">
			<label>{{lang_sampleData}}</label>
			<div id="sample-{{index}}" style="word-break:break-all"></div>
		</div>
	</div>
	{{/filter}}
	<datalist id="filter-keys">
	</datalist>
	<datalist id="machine-filter-keys">
		{{#machine_keys}}
		<option>{{.}}</option>
		{{/machine_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}}">
	</div>
	<div class="form-group">
		<label for="msg-txt">
			{{lang_messageTemplate}}
		</label>
		<textarea required id="msg-txt" name="message" class="form-control" rows="10" cols="80">{{message}}</textarea>
		<p>
			{{lang_messageTemplateHelp}}
		</p>
	</div>
	<div class="buttonbar text-right">
		<a class="btn btn-default" href="?do=eventlog&amp;show=rules">
			{{lang_cancel}}
		</a>
		<button class="btn btn-primary" type="submit" name="action" value="save-filter">
			<span class="glyphicon glyphicon-floppy-disk"></span>
			{{lang_save}}
		</button>
	</div>
</form>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		var $multilists = $("select.multilist");
		if ($multilists.multiselect) {
			$multilists.multiselect({
				includeSelectAllOption: true,
				buttonWidth: '100%',
				buttonClass: 'form-control'
			});
		}
		$('.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');
		var $filterRows = $('.filter-rule-row');

		// If type changed, fetch sample data, or use cached, and populate autocomplete
		var typeFieldChangeUpdate = 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);
			});
		};

		// Flag if type changed
		$type.change(function () {
			typeChanged = true;
		}).blur(typeFieldChangeUpdate);

		// Population function
		function setAutocomplete(type) {
			var t = typeSamples[type];
			var m = false;
			$list.empty();
			if (!t)
				return;
			currentType = t;
			for (var k in t) {
				if (!t.hasOwnProperty(k))
					continue;
				$list.append($('<option>').text(k));
				if (k === 'machineuuid') m = true;
			}
			if (m) {
				//$list.append($('#machine-filter-keys').clone());
			}
			$fkInputs.change();
		}

		// Display sample data
		var chFn = function () {
			var $this = $(this);
			var wat = currentType[$this.val()];
			if (typeof(wat) !== 'undefined') {
				if (typeof(wat) === 'string') {
					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);
			var empties = 0;
			$filterRows.each(function() {
				var $this = $(this);
				if ($this.find('.filter-key').val().length === 0) {
					empties++;
					if (empties > 2) {
						$this.hide();
					} else {
						$this.show();
					}
				}
			});
		};
		$fkInputs.on('input', chFn).change(chFn).each(chFn);
		typeFieldChangeUpdate();
	});
</script>