diff options
Diffstat (limited to 'modules-available/eventlog/templates/page-filters-edit-rule.html')
| -rw-r--r-- | modules-available/eventlog/templates/page-filters-edit-rule.html | 113 |
1 files changed, 94 insertions, 19 deletions
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 |