00_MQTT2_SERVER/CLIENT: enhance the traffic display (Forum #127223)

git-svn-id: https://svn.fhem.de/fhem/trunk@26055 2b470e98-0d58-463d-a4d8-8e2adae1ed80

fhem/FHEM/00_MQTT2_CLIENT.pm

@@ -746,8 +746,7 @@ MQTT2_CLIENT_feedTheList($$$)
         delete($fl->{$fwid});
         next;
       }
-      FW_AsyncOutput($cl, "", 
+      FW_AsyncOutput($cl, "", toJSON([defined($cid)?"RCVD":"SENT", $tp,$val]));
-                  defined($cid) ? "RCVD: $tp $val<br>" : "SENT: $tp $val<br>");
     }
     delete($server->{".feedList"}) if(!keys %{$fl});
   }

fhem/FHEM/00_MQTT2_SERVER.pm

@@ -576,8 +576,7 @@ MQTT2_SERVER_doPublish($$$$;$)
         delete($fl->{$fwid});
         next;
       }
-      FW_AsyncOutput($cl, "", 
+      FW_AsyncOutput($cl, "", toJSON([defined($cid)?$cid:"SENT", $tp, $val]));
-                  defined($cid) ? "RCVD: $tp $val<br>" : "SENT: $tp $val<br>");
     }
     delete($server->{".feedList"}) if(!keys %{$fl});
   }

fhem/FHEM/DevIo.pm

@@ -360,9 +360,10 @@ DevIo_Expect($$$)
 # - UNIX:(SEQPACKET|STREAM):filename => Open filename as a UNIX socket
 # - FHEM:DEVIO:IoDev[:IoPort] => Cascade I/O over another FHEM Device
 #
-# callback is only meaningful for TCP/IP (in which case a nonblocking connect
+# callback is only meaningful for TCP/IP, in which case a nonblocking connect
-# is executed) every cases. It will be called with $hash and a (potential)
+# is executed. It will be called with $hash and a (potential) error message.
-# error message. If $hash->{SSL} is set, SSL encryption is activated.
+# If # $hash->{SSL} is set, SSL encryption is activated.
+
 sub
 DevIo_OpenDev($$$;$)
 {

fhem/www/pgm2/console.js

@@ -23,6 +23,28 @@ cons_closeConn()
   consConn = undefined;
 }
 
+function
+consAppender(new_content)
+{
+  // Extract the FHEM-Log, to avoid escaping its formatting (Forum #104842)
+  var logContent = "";
+  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;', '\n':'<br>' };
+  new_content = new_content.replace(
+  /(<div class='fhemlog'>)([\s\S]*?)(<\/div>)/gm,
+  function(all, div1, msg, div2) {
+    logContent += div1+
+                  msg.replace(/[<> \n]/g, function(a){return rTab[a]})+
+                  div2;
+    return "";
+  });
+
+  var isTa = $(consName).is("textarea"); // 102773
+  var ncA = new_content.split(/<br>[\r\n]/);
+  for(var i1=0; i1<ncA.length; i1++)
+    ncA[i1] = ncA[i1].replace(/[<> ]/g, function(a){return rTab[a]});
+  $(consName).append(logContent+ncA.join(isTa?"\n":"<br>"));
+}
+
 function
 consUpdate(evt)
 {
@@ -65,23 +87,7 @@ consUpdate(evt)
     log("console Rcvd: "+new_content.substr(0,120)+
         "..., truncated, original length "+new_content.length);
 
-  // Extract the FHEM-Log, to avoid escaping its formatting (Forum #104842)
+  consAppender(new_content);
-  var logContent = "";
-  var rTab = {'<':'&lt;', '>':'&gt;',' ':'&nbsp;', '\n':'<br>' };
-  new_content = new_content.replace(
-  /(<div class='fhemlog'>)([\s\S]*?)(<\/div>)/gm,
-  function(all, div1, msg, div2) {
-    logContent += div1+
-                  msg.replace(/[<> \n]/g, function(a){return rTab[a]})+
-                  div2;
-    return "";
-  });
-
-  var isTa = $(consName).is("textarea"); // 102773
-  var ncA = new_content.split(/<br>[\r\n]/);
-  for(var i1=0; i1<ncA.length; i1++)
-    ncA[i1] = ncA[i1].replace(/[<> ]/g, function(a){return rTab[a]});
-  $(consName).append(logContent+ncA.join(isTa?"\n":"<br>"));
     
   if(mustScroll)
     $(consName).scrollTop($(consName)[0].scrollHeight);
@@ -340,6 +346,49 @@ consAddRegexpPart()
   });
 }
 
+var c4d_rowNum=0, c4d_filter=".*"
+function
+cons4devAppender(new_content)
+{
+  var cArr = new_content.split("\n");
+  for(var i1=0; i1<cArr.length; i1++) {
+    var cols = [];
+
+    try { cols = JSON.parse(cArr[i1]); } catch(e) { continue; };
+    if(c4d_filter != ".*") {
+      var content = cols.join(" ");
+      if(!content.match(c4d_filter))
+        continue;
+    }
+    var row = $(`<tr class="${c4d_rowNum++%2 ? 'odd':'even'}"><td>
+                 <div class="dname">`+
+                  cols.join('</div></td><td><div class="dval">')+
+                "</div></td></tr>");
+    $(consName+" table").append(row);
+    $(row).find("div.dval")           // Format JSON
+      .css("cursor", "pointer")
+      .click(function(){
+        var content = $(this).attr("data-content");
+        if(!content) {
+          content = $(this).html();
+          $(this).attr("data-content", content);
+        }
+        if(content.match(/^{.*}$/)) {
+          try{
+            var fmt = $(this).attr("data-fmt");
+            fmt = (typeof(fmt)=="undefined" || fmt=="no") ? "yes" : "no";
+            $(this).attr("data-fmt", fmt);
+            if(fmt=="yes") {
+              var js = JSON.parse(content);
+              content = '<pre>'+JSON.stringify(js, undefined, 2)+'</pre>';
+            }
+            $(this).html(content);
+          } catch(e) { }
+        }
+      });
+  }
+}
+
 function
 cons4dev(screenId, filter, feedFn, devName)
 {
@@ -350,6 +399,7 @@ cons4dev(screenId, filter, feedFn, devName)
 
   consName = screenId+">div.console";
   consFilter = filter;
+  consAppender = cons4devAppender;
   var opened;
 
   function
@@ -359,7 +409,16 @@ cons4dev(screenId, filter, feedFn, devName)
     var cmd = FW_root+"?cmd="+encodeURIComponent("{"+feedFn+"('"+devName+"',"+
                         (opened ? 0 : 1)+")}")+"&XHR=1";
     if(!opened) {
-      $(screenId).append('<div class="console block"></div>');
+      $(screenId)
+        .append(`<span class="buttons">
+                  &nbsp;<a href="#" class="reset">Reset</a>
+                  &nbsp;<a href="#" class="filter">Filter:</a>
+                  &nbsp;<span class="filterContent">${c4d_filter}</span>
+                 </span>`);
+      $(screenId)
+        .append(`<div class="console">
+                   <table class="block wide"></table>
+                 </div>`);
       $(consName)
         .width( $("#content").width()-40)
         .height($("#content").height()/2-20)
@@ -371,10 +430,39 @@ cons4dev(screenId, filter, feedFn, devName)
       // clear the flag
       setTimeout(function(){ FW_cmd(cmd) }, 100);
 
+      $(screenId+" .reset").click(function(){ $(consName+" table").html("") });
+      $(screenId+" .filter").click(function(){
+        $('body').append(
+          '<div id="filterdlg">'+
+            '<div>Filter (Regexp, matching the row):</div><br>'+
+            '<div><input id="filtertext" value="'+c4d_filter+'"></div><br>'+
+          '</div>');
+        $('#filterdlg').dialog({ modal:true, width:'auto',
+          position:{ my: "left top", at: "right bottom",
+                     of: this, collision: "flipfit" },
+          close:function(){$('#filterdlg').remove();},
+          buttons:[
+            { text:"Cancel", click:function(){ $(this).dialog('close'); }},
+            { text:"OK", click:function(){
+              var val = $("#filtertext").val().trim();
+              try {
+                new RegExp(val ? val : ".*");
+              } catch(e) {
+                return FW_okDialog(e);
+              }
+              c4d_filter = val ? val : ".*";
+              $(this).dialog('close');
+              $(screenId+" .filterContent").html(c4d_filter);
+              $(consName+" table").html("");
+            }}]
+        });
+      });
+
     } else {
       FW_cmd(cmd);
       $(consName).remove();
       $(screenId+">a").html($(screenId+">a").html().replace("Hide", "Show"));
+      $(screenId+" span.buttons").remove();
       if(consConn) {
         consConn.onclose = undefined;
         cons_closeConn();