added JavaScript based filter mechanism

This commit is contained in:
Andreas Gohr 2020-10-15 12:13:32 +02:00
parent cad4fbf6e2
commit 6071f0eef3
4 changed files with 32 additions and 4 deletions

View File

@ -59,7 +59,7 @@ class admin_plugin_logviewer extends DokuWiki_Admin_Plugin
$form->setHiddenField('do', 'admin'); $form->setHiddenField('do', 'admin');
$form->setHiddenField('page', 'logviewer'); $form->setHiddenField('page', 'logviewer');
$form->setHiddenField('facility', $this->facility); $form->setHiddenField('facility', $this->facility);
$form->addTextInput('date','Date*')->attr('type','date')->val($this->date)->addClass('quickselect'); $form->addTextInput('date',$this->getLang('date'))->attr('type','date')->val($this->date)->addClass('quickselect');
$form->addButton('submit','>')->attr('type','submit'); $form->addButton('submit','>')->attr('type','submit');
echo $form->toHTML(); echo $form->toHTML();

View File

@ -6,4 +6,5 @@
*/ */
$lang['menu'] = 'View Logs'; $lang['menu'] = 'View Logs';
$lang['date'] = 'Date';
$lang['js']['filter'] = 'Filter Loglines:';

View File

@ -3,6 +3,23 @@
*/ */
jQuery(function () { jQuery(function () {
var $dl = jQuery('#plugin__logviewer').find('dl'); var $dl = jQuery('#plugin__logviewer').find('dl');
if(!$dl.length) return; if (!$dl.length) return;
$dl.animate({ scrollTop: $dl.prop("scrollHeight")}, 500); $dl.animate({scrollTop: $dl.prop("scrollHeight")}, 500);
var $filter = jQuery('<input>');
$filter.on('keyup', function (e) {
var re = new RegExp($filter.val(), 'i');
$dl.find('dt').each(function (idx, elem) {
if (elem.innerText.match(re)) {
jQuery(elem).removeClass('hidden');
} else {
jQuery(elem).addClass('hidden');
}
});
});
$dl.before($filter);
$filter.wrap('<label></label>');
$filter.before(LANG.plugins.logviewer.filter + ' ');
}); });

View File

@ -7,6 +7,12 @@
margin-bottom: 2em; margin-bottom: 2em;
} }
label {
display: block;
margin-top: -1em;
margin-bottom: 1em;
}
dl { dl {
max-height: 80vh; max-height: 80vh;
overflow: auto; overflow: auto;
@ -14,6 +20,10 @@
dt { dt {
display: flex; display: flex;
&.hidden {
display: none;
}
.datetime { .datetime {
flex: 0 0 auto; flex: 0 0 auto;
margin-right: 1em; margin-right: 1em;