add serverfilter

classes/cronlog-renderer.class.php

@@ -526,7 +526,12 @@ class cronlogrenderer extends cronlog{
                     .'>'.$sServer.'</option>';
         }
         $sHtml=$sHtml 
-                ? '<select'
+                ? '<input id="serverfiltertext" type="text" placeholder="filter server" value=""
+                    onchange="filterServers();"
+                    onkeypress="filterServers();"
+                    onkeyup="filterServers();"
+                    ><button onclick="$(\'#serverfiltertext\').val(\'\'); filterServers();">X</button><br><br>'
+                    .'<select'
                     . ' size="'.( min(array(count($this->getServers())+1 , $iMaxItemsToShow)) ).'"'
                     // . ' size="1"'
                     . ' onchange="setServer(this.value); return false;"'

js/functions.js

@@ -3,6 +3,7 @@ var sSELECTEDSERVER = '';
 var sACTIVESERVERTAB = 'cronlogs';
 var bSETADDRESSBAR = false;
 var sTABLEFILTER = '';
+var sSERVERFILTER = '';
 
 var iRefreshTime = 60;
 var iRefreshCounter = 0;
@@ -115,9 +116,10 @@ function setAdressbar() {
         return false;
     }
     var url = '?'
-            + 'server=' + sSELECTEDSERVER
-            + '&tab=' + sACTIVESERVERTAB
-            + '&q=' + sTABLEFILTER// + $('#datatable1_filter label input').val()+$('#datatable2_filter label input').val()
+            + (sSELECTEDSERVER  ? 'server=' + sSELECTEDSERVER : '')
+            + (sSERVERFILTER    ? '&filter=' + sSERVERFILTER  : '')
+            + (sACTIVESERVERTAB ? '&tab=' + sACTIVESERVERTAB  : '')
+            + '&q=' + sTABLEFILTER // + $('#datatable1_filter label input').val()+$('#datatable2_filter label input').val()
             ;
     window.history.pushState('dummy', 'Title', url);
     // window.location.reload();
@@ -202,7 +204,9 @@ function closeOverlay() {
 }
 
 /**
- * update filter field for datatable with value of param q=
+ * update filter fields 
+ * - for datatable with value of param q=
+ * 
  * @returns {undefined}
  */
 function updateFilterFields() {
@@ -218,6 +222,19 @@ function updateFilterFields() {
     }
 }
 
+function filterServers(sNewValue){
+    if(sNewValue){
+        sSERVERFILTER = sNewValue;
+        $('#serverfiltertext').val(sSERVERFILTER)
+    } else {
+        sSERVERFILTER = $('#serverfiltertext').val();
+    }
+    options=$('#selectserver select option');
+    for(var i=0; i<options.length; i++){
+        options[i].style.display=options[i].text.indexOf(sSERVERFILTER)>=0 ? 'block' : 'none';
+    }
+    setAdressbar();
+}
 
 // ----------------------------------------------------------------------
 // MAIN
@@ -229,6 +246,7 @@ $(document).ready(function () {
     var sServer = oQuery.server ? oQuery.server : 'ALL';
     var q = oQuery.q ? oQuery.q : '';
     var sTab = oQuery.tab ? oQuery.tab : '';
+    sSERVERFILTER = oQuery.filter ? oQuery.filter : '';
 
     setServer(sServer);
     getPageItem('selectserver');
@@ -237,6 +255,9 @@ $(document).ready(function () {
         var oLink = $('a[href="#' + sTab + '"]').first();
         setTab(oLink);
     }
+    if (sSERVERFILTER) {
+        window.setTimeout("filterServers('"+sSERVERFILTER+"');", 500);
+    }
     if (q) {
         sTABLEFILTER=q;
         window.setTimeout("updateFilterFields();", 500);

main.css

@@ -11,7 +11,7 @@
 a {color: #38a;text-decoration: none;}
 a:hover {text-decoration: underline;}
 body{background:var(--bg-main); color:#456; font-family: verdana,arial; font-size:1.0em; margin: 0;}
-button{background:#46a; border: none; color:#fff; padding: 0.5em 1em; border-radius: 0.3em; border: 2px solid rgba(0,0,0,0.1); box-shadow: 0.2em 0.2em 0.5em #aaa;}
+button_{background:#eee; border: none; color:#333; padding: 0.1em 1em; border-radius: 0.3em; border: 2px solid rgba(0,0,0,0.1); box-shadow: 0.2em 0.2em 0.5em #aaa;}
 button.add{background:#8c8;}
 button.del{background:#c88;}
 button:hover{background:#68c;}
@@ -30,7 +30,7 @@ i.fa{font-size: 150%; }
 i.fa.lookup{font-size: 100%; opacity: 0.4;}
 
 nav.servers{float: left; margin-right: 1em;}
-#selectserver{min-height: 20em; border-right: 2px dashed #cde;}
+#selectserver{min-height: 30em; border-right: 0px dashed #cde; padding: 0 0.5em; background: #fff; }
 
 nav.tabs a{display: block; float: left; background: rgba(0,60,60,0.05); padding: 0.5em 1em; color:#345; text-decoration: none; margin-right: 2px; border-top: 4px solid rgba(0,0,0,0.01);}
 nav.tabs a.active{background: #d0e0e0; border-color: rgb(255,0,51); }