@gregoriusrippenstein/node-red-contrib-introspection 0.11.5 → 0.12.0

package/nodes/60-client-code.html

@@ -2,7 +2,7 @@
 
 function handleMsgTracePacket(e,r){if(r.nodeid){let a=RED.nodes.node(r.nodeid);if(a){var s,r=$("#node-input-msgtracer-trace-treelist").treeList("data");let t=!1;r.forEach(e=>{e.id==a.id&&(t=!0,e.seenCounter+=1,e.sublabel=e.seenCounter+" @ "+e.workspaceLabel)}),t?$("#node-input-msgtracer-trace-treelist").treeList("data",r):(s={id:a.id,label:"",_label:RED.utils.getNodeLabel(a),seenCounter:1,workspaceLabel:(RED.nodes.workspace(a.z)||{label:a.z}).label,sublabel:"1 @ "+(RED.nodes.workspace(a.z)||{label:a.z}).label,selected:!1,checkbox:!1,node:a,icon:RED.utils.createNodeIcon(a,!0)},$("#node-input-msgtracer-trace-treelist").treeList("data",[s,...r]))}}}RED.comms.subscribe("msgtracer:node-received",(e,t)=>{try{handleMsgTracePacket(e,t)}catch(e){console.error(e)}});
  
-function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid,_msg,msg,node,payload,topic;"execfunc"==data.msg&&(doSend=(o,d,e)=>{"object"==typeof o&&(o={...e,...o}),$.ajax({url:"ClientCode/"+d,type:"POST",contentType:"application/json; charset=utf-8",data:JSON.stringify(o),success:function(o){},error:function(o,e,t){RED.notify("ClientCode Communcation Failure: "+d+": "+e,{type:"error",id:d,timeout:3e3})}})},doStatus=(o,d,e)=>{$.ajax({url:"ClientCode/"+d+"/status",type:"POST",contentType:"application/json; charset=utf-8",data:JSON.stringify(o),success:function(o){},error:function(o,e,t){RED.notify("ClientCode Communcation Failure: "+d+": "+e,{type:"error",id:d,timeout:3e3})}})},doError=(o,e,t)=>{RED.notify("ClientCode Failed: "+e+": "+o,{type:"error",id:e,timeout:3e3}),console.log("ClientCode: Error with node: "+e+": "+o)},nodeid=data.nodeid,_msg=data._msg,msg=data._msg,node={id:data.nodeid,send:o=>{doSend(o,nodeid,_msg)},error:o=>{doError(o,nodeid,_msg)},status:o=>{doStatus(o,nodeid,_msg)}},payload=data.payload,topic=data.topic,eval(data.func))}RED.comms.subscribe("introspect:client-code-perform",(o,e)=>{try{handleClientCodeFrontend(o,e)}catch(o){console.error(o)}});
+function handleClientCodeFrontend(event,data){if("execfunc"==data.msg){let doSend=(e,n,t)=>{"object"==typeof e&&(e={...t,...e}),$.ajax({url:"ClientCode/"+n,type:"POST",contentType:"application/json; charset=utf-8",data:JSON.stringify(e),success:function(e){},error:function(e,t,o){RED.notify("ClientCode Communcation Failure: "+n+": "+t,{type:"error",id:n,timeout:3e3})}})},doStatus=(e,n,t)=>{$.ajax({url:"ClientCode/"+n+"/status",type:"POST",contentType:"application/json; charset=utf-8",data:JSON.stringify(e),success:function(e){},error:function(e,t,o){RED.notify("ClientCode Communcation Failure: "+n+": "+t,{type:"error",id:n,timeout:3e3})}})},doError=(e,t,o)=>{RED.notify("ClientCode Failed: "+t+": "+e,{type:"error",id:t,timeout:3e3}),console.log("ClientCode: Error with node: "+t+": "+e)},nodeid=data.nodeid,_msg=data._msg,msg=data._msg??{},cfg=data._cfg,node=(Object.keys(cfg).forEach(e=>{"overwrite"==data._ops[e]?msg[e]=cfg[e]??msg[e]:msg[e]=msg[e]??cfg[e]}),{id:data.nodeid,send:e=>{doSend(e,nodeid,_msg)},error:e=>{doError(e,nodeid,_msg)},status:e=>{doStatus(e,nodeid,_msg)}}),payload=data.payload,topic=data.topic;eval(data.func)}}RED.comms.subscribe("introspect:client-code-perform",(e,t)=>{try{handleClientCodeFrontend(e,t)}catch(e){console.error(e)}});
 
   RED.nodes.registerType('ClientCode',{
     color: '#e5e4ef',
@@ -18,6 +18,9 @@ function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid
       },
       format: {
         value: "javascript"
+      },
+      rules: {
+          value: [{ t: "default", p: "payload", pt: "msg", to: "", tot: "str" }]
       }
     },
     inputs:1,
@@ -35,6 +38,28 @@ function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid
       $('#node-input-clientcode').val(this.editor.getValue());
       this.editor.destroy();
       delete this.editor;
+
+      var rules = $("#node-inpclientcode-defaults-container").editableList('items');
+
+      var node = this;
+      node.rules = [];
+
+      rules.each(function (i) {
+        var rule = $(this);
+        var type = rule.find(".node-input-rule-type").val();
+
+        var r = {
+          t: type,
+          p: rule.find(".node-input-rule-property-name").typedInput('value'),
+          pt: rule.find(".node-input-rule-property-name").typedInput('type')
+        };
+
+        if (type !== "notset" && type !== "debug" && type !== "set") {
+          r.to = rule.find(".node-input-rule-property-value").typedInput('value');
+          r.tot = rule.find(".node-input-rule-property-value").typedInput('type');
+        }        
+        node.rules.push(r);
+      });
     },
 
     oneditcancel: function() {
@@ -42,16 +67,169 @@ function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid
       delete this.editor;
     },
 
+    //
+    // ***********************
+    // Prepare editor panel
+    // ***********************
+    //
     oneditprepare: function() {
       const that = this;
+      const node = this;
       const stateId = RED.editor.generateViewStateId("node", this, "");
 
+      var to = this._("clientcode.action.to");
+      var toValueLabel = this._("clientcode.action.toValue", to);
+      var search = this._("clientcode.action.search");
+      var replace = this._("clientcode.action.replace");
+      var regex = this._("clientcode.label.regex");
+
+      function createPropertyValue(row2_1, row2_2, defaultType) {
+        var propValInput = $('<input/>', { class: "node-input-rule-property-value", type: "text" })
+          .appendTo(row2_1)
+          .typedInput({ default: defaultType || 'str', types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'jsonata'] });
+
+        propValInput.on("change", function (evt, type, val) {
+          row2_2.toggle(type === "msg" || type === "flow" || type === "global" || type === "env");
+        })
+        return [propValInput, undefined];
+      }
+
+      var tabs = RED.tabs.create({
+        id: "client-code-tabs",
+        onchange: function (tab) {
+          $("#client-code-tabs-content").children().hide();
+          $("#" + tab.id).show();
+        }
+      });
+
+      tabs.addTab({
+        id: "client-code-tabs-default-values",
+        iconClass: "fa fa-cog",
+        label: "msg parameters"
+      });
+
+      tabs.addTab({
+        id: "client-code-tabs-code-editor",
+        iconClass: "fa fa-edit",
+        label: "editor"
+      });
+
+      tabs.activateTab("client-code-tabs-code-editor");
+
+
+      $('#node-inpclientcode-defaults-container').css('min-height', '150px').css('min-width', '450px').editableList({
+        addItem: function (container, i, opt) {
+          var rule = opt;
+          if (!rule.hasOwnProperty('t')) {
+            rule = { t: "default", p: "payload", to: "", tot: "str" };
+          }
+          container.css({
+            overflow: 'hidden',
+            whiteSpace: 'nowrap'
+          });
+          let fragment = document.createDocumentFragment();
+          var row1 = $('<div/>', { style: "display:flex; align-items: baseline" }).appendTo(fragment);
+          var row2 = $('<div/>', { style: "margin-top:8px;" }).appendTo(fragment);
+          var row3 = $('<div/>', { style: "margin-top:8px;" }).appendTo(fragment);
+          var row4 = $('<div/>', { style: "display:flex;margin-top:8px;align-items: baseline" }).appendTo(fragment);
+
+          var selectField = $('<select/>', { class: "node-input-rule-type", style: "width:110px; margin-right:10px;" }).appendTo(row1);
+          var selectOptions = [
+            { v: "default" }, 
+            { v: "overwrite" }, 
+          ];
+          for (var i = 0; i < selectOptions.length; i++) {
+            let label = node._("clientcode.action." + (selectOptions[i].l || selectOptions[i].v))
+            selectField.append($("<option></option>").val(selectOptions[i].v).text(label));
+          }
+
+          var propertyName = $('<input/>', { class: "node-input-rule-property-name", type: "text" })
+            .appendTo(row1)
+            .typedInput({ types: ['msg'] });
+
+          var row2_1 = $('<div/>', { style: "display:flex;align-items: baseline" }).appendTo(row2);
+          $('<div/>', { style: "display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;" })
+            .text(toValueLabel)
+            .appendTo(row2_1);
+
+          var row2_2 = $('<div/>', { style: "margin-top: 4px;" }).appendTo(row2);
+
+          var row3_1 = $('<div/>', { style: "display:flex;align-items: baseline" }).appendTo(row3);
+          $('<div/>', { style: "display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;" })
+            .text(search)
+            .appendTo(row3_1);
+
+          var row3_2 = $('<div/>', { style: "display:flex;margin-top:8px;align-items: baseline" }).appendTo(row3);
+          $('<div/>', { style: "display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;" })
+            .text(replace)
+            .appendTo(row3_2);
+
+          $('<div/>', { style: "display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;" })
+            .text(to)
+            .appendTo(row4);
+
+          let propertyValue = null;
+          let fromValue = null;
+          let toValue = null;
+          let moveValue = null;
+
+          selectField.on("change", function () {
+            var type = $(this).val();
+            if (propertyValue) {
+              propertyValue.typedInput('hide');
+            }
+            if (fromValue) {
+              fromValue.typedInput('hide');
+            }
+            if (toValue) {
+              toValue.typedInput('hide');
+            }
+            if (moveValue) {
+              moveValue.typedInput('hide');
+            }
+
+            if (type != "notset" && type != "debug" && type != "set") {
+              if (!propertyValue) {
+                var parts = createPropertyValue(row2_1, row2_2);
+                propertyValue = parts[0];
+              }
+              
+              propertyValue.typedInput('show');
+              propertyValue.typedInput('value', rule.to);
+              propertyValue.typedInput('type', rule.tot);
+
+              row2.show();
+              row3.hide();
+              row4.hide();
+            } else {
+              row2.hide();
+              row3.hide();
+              row4.hide();
+            }
+          });
+
+          selectField.val(rule.t);
+          propertyName.typedInput('value', rule.p);
+          propertyName.typedInput('type', rule.pt);
+          selectField.change();
+          container[0].appendChild(fragment);
+        },
+        removable: true,
+        sortable: true
+      });
+
+      this.rules = this.rules ?? [{t: "default", p: "payload", pt: "msg", to: "", tot: "str"}]
+      for (var i = 0; i < this.rules.length; i++) {
+        var rule = this.rules[i];
+        $("#node-inpclientcode-defaults-container").editableList('addItem', rule);
+      }
+
       this.editor = RED.editor.createEditor({
         id: 'node-input-clientcode-editor',
         mode: 'ace/mode/nrjavascript',
         stateId: stateId,
         globals: {
-          msg:true,          
+          msg:true,     
           RED: true,
           node: true,
           alert: true,
@@ -96,22 +274,53 @@ function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid
 
     },
 
+    //
+    // *******************
+    // Resize event
+    // *******************
+    //
     oneditresize: function(size) {
-      var rows = $("#dialog-form>div:not(.node-text-editor-row)");
+      var rows = $("#dialog-form #client-code-tabs-code-editor>div:not(.node-text-editor-row)");
       var height = $("#dialog-form").height();
       for (var i=0; i<rows.length; i++) {
         height -= $(rows[i]).outerHeight(true);
       }
-      var editorRow = $("#dialog-form>div.node-text-editor-row");
+
+      var rows = $("#dialog-form>.client-code-node-name-row");
+      for (var i=0; i<rows.length; i++) {
+        height -= $(rows[i]).outerHeight(true);
+      }
+
+      // footer
+      height -= 40;
+      
+      var editorRow = $("#dialog-form #client-code-tabs-code-editor>div.node-text-editor-row");
       height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
       $(".node-text-editor").css("height",height+"px");
+
       this.editor.resize();
+
+      //
+      //
+      //
+      if ($('#client-code-tabs-default-values').is(":visible")) {
+        var rows = $("#dialog-form #client-code-tabs-default-values>div:not(.node-inpclientcode-defaults-container-row)");
+        var height = size.height;
+        for (var i=0; i<rows.length; i++) {
+            height -= $(rows[i]).outerHeight(true);
+        }
+        var editorRow = $("#dialog-form #client-code-tabs-default-values>div.node-input-rule-container-row");
+        height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+        $("#node-inpclientcode-defaults-container").editableList('height', height-60);
+      } else {
+        $("#node-inpclientcode-defaults-container").editableList('height', height/3);
+      }
     }
   });
 </script>
 
 <script type="text/html" data-template-name="ClientCode">
-  <div class="form-row">
+  <div class="form-row client-code-node-name-row">
       <label for="node-input-name">
           <i class="fa fa-tag"></i>
           <span data-i18n="common.label.name">Name</span>
@@ -119,40 +328,56 @@ function handleClientCodeFrontend(event,data){var doSend,doStatus,doError,nodeid
       <input type="text" id="node-input-name" placeholder="Name">
   </div>
 
-  <div class="form-row" style="position: relative; margin-bottom: 0px;">
-      <label for="node-input-clientcode">
-          <i class="fa fa-file-code-o"></i> Client Code
-      </label>
+  <div class="form-row func-tabs-row">
+    <ul style="min-width: 400px; margin-bottom: 20px;" id="client-code-tabs"></ul>
+  </div>
+
+  <div id="client-code-tabs-content" style="min-height: calc(100% - 95px);">
 
-      <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
-          Syntax:
-          <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
-              <option value="handlebars">mustache</option>
-              <option value="html">HTML</option>
-              <option value="json">JSON</option>
-              <option value="javascript">JavaScript</option>
-              <option value="css">CSS</option>
-              <option value="markdown">Markdown</option>
-              <option value="php">PHP</option>
-              <option value="python">Python</option>
-              <option value="sql">SQL</option>
-              <option value="yaml">YAML</option>
-              <option value="text">None</option>
-          </select>
-          <button type="button" id="node-clientcode-expand-editor"
-                  class="red-ui-button red-ui-button-small">
-              <i class="fa fa-expand"></i>
-          </button>
+    <div id="client-code-tabs-default-values" style="display:none;">
+      <div class="form-row node-input-rule-container-row node-inpclientcode-defaults-container-row">
+        <ol id="node-inpclientcode-defaults-container"></ol>
       </div>
-  </div>
+    </div>
 
-  <div class="form-row node-text-editor-row">
-      <div style="height: 250px; min-height:150px;"
-           class="node-text-editor"
-           id="node-input-clientcode-editor" ></div>
-  </div>
+    <div id="client-code-tabs-code-editor">
+      <div class="form-row" style="position: relative; margin-bottom: 0px;">
+          <label for="node-input-clientcode">
+              <i class="fa fa-file-code-o"></i> Client Code
+          </label>
+
+          <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
+              Syntax:
+              <select id="node-input-format" style="width:110px; font-size: 10px !important;  height: 24px; padding:0;">
+                  <option value="handlebars">mustache</option>
+                  <option value="html">HTML</option>
+                  <option value="json">JSON</option>
+                  <option value="javascript">JavaScript</option>
+                  <option value="css">CSS</option>
+                  <option value="markdown">Markdown</option>
+                  <option value="php">PHP</option>
+                  <option value="python">Python</option>
+                  <option value="sql">SQL</option>
+                  <option value="yaml">YAML</option>
+                  <option value="text">None</option>
+              </select>
+              <button type="button" id="node-clientcode-expand-editor"
+                      class="red-ui-button red-ui-button-small">
+                  <i class="fa fa-expand"></i>
+              </button>
+          </div>
+      </div>
 
-  <input type="hidden" id="node-input-clientcode" autofocus="autofocus">
+      <div class="form-row node-text-editor-row">
+          <div style="height: 250px; min-height:150px;"
+              class="node-text-editor"
+              id="node-input-clientcode-editor" ></div>
+      </div>
+
+      <input type="hidden" id="node-input-clientcode" autofocus="autofocus">
+    </div>
+
+  </div>
 </script>
 
 <script type="text/html" data-help-name="ClientCode">
@@ -168,6 +393,7 @@ Variables:
   node.id - id of this node, same as `nodeid` above
   payload - a reference to msg.payload as it was received by this node
   topic - a reference to the msg.topic as it was recieved by this node
+  cfg - an object that represents the default values defined in the msg parameters tab
 
 Functionality:
   node.send({..}) - send data to the output port of this node

package/nodes/60-client-code.js

@@ -58,6 +58,49 @@ module.exports = function (RED) {
     var node = this;
     var cfg = config;
 
+    function getToValue(msg, rule, done) {
+      var value = rule.to;
+      
+      if (rule.tot === 'json') {
+        value = JSON.parse(rule.to);
+      } else if (rule.tot === 'bin') {
+        value = Buffer.from(JSON.parse(rule.to))
+      } else if (rule.tot === 'str') {
+        value = rule.to
+      } else if (rule.tot === "num") {
+        value = Number(rule.to)
+      } else if (rule.tot === "bool") {
+        value = /^true$/i.test(rule.to);
+      }
+
+      if (rule.tot === "msg") {
+        value = RED.util.getMessageProperty(msg, rule.to);
+      } else if ((rule.tot === 'flow') || (rule.tot === 'global')) {
+        RED.util.evaluateNodeProperty(rule.to, rule.tot, node, msg, (err, value) => {
+          if (err) {
+            done(undefined, undefined);
+          } else {
+            done(undefined, value);
+          }
+        });
+        return
+      } else if (rule.tot === 'date') {
+        value = RED.util.evaluateNodeProperty(rule.to, rule.tot, node)
+      } else if (rule.tot === 'jsonata') {
+        let jsonExpr = RED.util.prepareJSONataExpression(rule.to, node);
+
+        RED.util.evaluateJSONataExpression(jsonExpr, msg, (err, value) => {
+          if (err) {
+            done(RED._("change.errors.invalid-expr", { error: err.message }))
+          } else {
+            done(undefined, value);
+          }
+        });
+        return;
+      }
+      done(undefined, value);
+    }
+
     node.on('close', function () {
       node.status({});
     });
@@ -72,17 +115,42 @@ module.exports = function (RED) {
         node.error(e)
       }
 
-      RED.comms.publish(
-        "introspect:client-code-perform",
-        RED.util.encodeObject({
-          msg:     "execfunc",
-          payload: msg.payload,
-          topic:   msg.topic,
-          func:    msg.clientcode || cfg.clientcode,
-          nodeid:  node.id,
-          _msg:    msg
-        })
-      );
+      let defaultValues = {}
+      let operationDefValue = {}
+      
+      let stupidLoop = (ruleIdx) => {
+        if ( ruleIdx >= (cfg.rules || []).length) {
+          RED.comms.publish(
+            "introspect:client-code-perform",
+            RED.util.encodeObject({
+              msg: "execfunc",
+              payload: msg.payload,
+              topic: msg.topic,
+              func: msg.clientcode || cfg.clientcode,
+              nodeid: node.id,
+              _msg: msg,
+              _cfg: defaultValues,
+              _ops: operationDefValue
+            })
+          );
+          done()
+        } else {
+          try {
+            let rule = cfg.rules[ruleIdx]
+            let name = rule.p
+            getToValue(msg, rule, (err, value) => {
+              defaultValues[name] = value
+              operationDefValue[name] = rule.t
+              stupidLoop(ruleIdx+1)
+            })
+          } catch (e) {
+            console.log(e)
+            stupidLoop(ruleIdx + 1)
+          }
+        }
+      }
+
+      stupidLoop(0)
     });
   }
   

package/nodes/locales/en-US/60-client-code.json

@@ -0,0 +1,61 @@
+{
+  "clientcode": {
+    "label": {
+      "statusset": "Status Set",
+      "rules": "Rules",
+      "rule": "rule",
+
+      "set": "set __property__",
+      "change": "change __property__",
+      "delete": "delete __property__",
+      "move": "move __property__",
+
+      "changeCount": "assert: __count__ values",
+      "regex": "Use regular expressions",
+      "deepCopy": "Deep copy value",
+      
+      "notmth": "not match __property__",
+      "mth": "match __property__",
+      "eql": "equal __property__",
+      "noteql": "not equal __property__",
+      "notset": "not set __property__",
+      "debug": "debug __property__",
+      "unsupported": "supported rule __property__",
+
+      "ignore_failure_if_succeed": "Ignore failure if succeed once"
+    },
+    
+    "action": {
+      "default": "Default",
+      "overwrite": "Overwrite",
+      "set": "Defined",
+      "change": "Change",
+      "delete": "Delete",
+      "move": "Move",
+      "toValue": "to the value",
+      "to": "to",
+      "search": "Search for",
+      "replace": "Replace with",
+
+      "notmth": "Not Match",
+      "mth": "Match",
+      "eql": "Equal",
+      "noteql": "Not Equal",
+      "notset": "Not Defined",
+      "debug": "Debug"
+    },
+
+    "errors": {
+      "invalid-from": "Invalid 'from' property: __error__",
+      "invalid-json": "Invalid 'to' JSON property",
+      "invalid-expr": "Invalid JSONata expression: __error__",
+      "no-override": "Cannot set property of non-object type: __property__",
+      "invalid-prop": "Invalid property expression: __property__",
+      "invalid-json-data": "Invalid JSON data: __error__"
+    },
+    "status": {
+      "waiting": "Waiting for Godot",
+      "timeout": "No more time to waiting"
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.11.5",
+  "version": "0.12.0",
   "dependencies": {
     "got": "^13",
     "uglify-js": "^3.17.4",