@gregoriusrippenstein/node-red-contrib-introspection 0.3.5 → 0.4.1

package/README.md

@@ -89,9 +89,17 @@ Inspired by the [dsm](https://flows.nodered.org/node/node-red-contrib-dsm) packa
 
 Send a flow to another Node-RED instance. This will replace **any existing** flows on the other server, use with care. Under the hood this uses the [Node-RED API](https://nodered.org/docs/api/admin/methods/post/flows/) to post a new flow to the server. This node also supports authentication if the other server happens to have some.
 
-### TriggerImport
+### ClientCode
+
+ClientCode is a node for executing client side, i.e., in the editor, Javascript code triggered by a server side event. Any code that can be executed in the browseer console can be executed in the ClientCode node. A ClientCode node can also send a message back to the server using `node.send(...)` which becomes the server side output of the node.
+
+The context in which the code is exected includes:
+
+- `payload` which is the the `msg.payload` value
+- `topic` which is the `msg.topic` value
+- `node.send(payload)` where `payload` becomes the output the node on the server side
+- `node.error("msg")` where msg is shown as a notification within the editor
 
-This node will open the Node-RED import dialog and insert the payload, i.e. a flow object, into the dialog. The flow can then be imported into the existing workspace. See the [RSS example](https://flowhub.org/f/e02ba6e534f7a0f4) for more details. Payload must be a valid flow object, i.e. a Javascript array with one object per node. The import dialog will complain should this not be the case.
 
 ## Node-RED Versions
 
@@ -106,7 +114,7 @@ There are [example flows](/examples) contained in the package, examples can also
 - [Screenshot](https://flowhub.org/f/07b2d0f3b0445ab5)
 - [DrawSVG](https://flowhub.org/f/141037dcda5b69fd)
 - [GetFlows](https://flowhub.org/f/0b1bfbf6e540be66)
-- [TriggerImport](https://flowhub.org/f/e02ba6e534f7a0f4)
+- [ClientCode](https://flowhub.org/f/e02ba6e534f7a0f4)
 
 ## License
 

package/nodes/60-client-code.html

@@ -0,0 +1,197 @@
+<script type="text/javascript">
+
+ RED.comms.subscribe('introspect:client-code-perform', (event,data) => {
+   if ( data.msg == "execfunc" ) {
+
+     var doSend = (data, nodeid) => {
+       $.ajax({
+         url:         "ClientCode/" + nodeid,
+         type:        "POST",
+         contentType: "application/json; charset=utf-8",
+         data: JSON.stringify(data),
+
+         success: function (resp) {
+         },
+
+         error: function (jqXHR, textStatus, errorThrown) {
+           RED.notify("ClientCode Communcation Failure: " +
+                      nodeid + ": " + textStatus, {
+             type: "error",
+             id: nodeid,
+             timeout: 3000
+           });
+         }
+       });
+     };
+
+     var doError = (msg,nodeid) => {
+       RED.notify("ClientCode Failed: " + nodeid + ": " + msg, {
+         type: "error",
+         id: nodeid,
+         timeout: 3000
+       });
+       console.log( "ClientCode: Error with node: " + nodeid +": " +msg);
+     };
+
+     var nodeid = data.nodeid;
+
+     var node = {
+       send: (dt) => {
+         doSend(dt, nodeid)
+       },
+       error: (mg) => {
+         doError(mg, nodeid)
+       }
+     };
+
+     var payload = data.payload;
+     var topic = data.topic;
+
+     eval( data.func );
+   }
+ });
+
+  RED.nodes.registerType('ClientCode',{
+    color: '#e5e4ef',
+    icon: "icons/subflow.svg",
+    category: 'introspection',
+    paletteLabel: "ClientCode",
+    defaults: {
+      name: {
+        value:"",
+      },
+      clientcode: {
+        value: ""
+      },
+      format: {
+        value: ""
+      }
+    },
+    inputs:1,
+    outputs:1,
+
+    label: function() {
+      return (this.name || this._def.paletteLabel);
+    },
+
+    labelStyle: function() {
+      return this.name?"node_label_italic":"";
+    },
+
+    oneditsave: function() {
+      $('#node-input-clientcode').val(this.editor.getValue());
+      this.editor.destroy();
+      delete this.editor;
+    },
+
+    oneditcancel: function() {
+      this.editor.destroy();
+      delete this.editor;
+    },
+
+    oneditprepare: function() {
+      const that = this;
+      const stateId = RED.editor.generateViewStateId("node", this, "");
+
+      this.editor = RED.editor.createEditor({
+        id: 'node-input-clientcode-editor',
+        mode: 'ace/mode/html',
+        stateId: stateId,
+        value: $("#node-input-screenshot").val()
+      });
+
+      this.editor.setValue( that.clientcode );
+
+      $("#node-input-format").on("change", function() {
+        var mod = "ace/mode/"+$("#node-input-format").val();
+        that.editor.getSession().setMode({
+          path: mod,
+          v: Date.now()
+        });
+      });
+
+      RED.popover.tooltip($("#node-clientcode-expand-editor"), RED._("node-red:common.label.expand"));
+      $("#node-clientcode-expand-editor").on("click", function (e) {
+        e.preventDefault();
+        const value = that.editor.getValue();
+        that.editor.saveView();
+        RED.editor.editText({
+          mode: $("#node-input-format").val(),
+          value: value,
+          stateId: stateId,
+          width: "Infinity",
+          focus: true,
+          complete: function (v, cursor) {
+            that.editor.setValue(v, -1);
+            setTimeout(function () {
+              that.editor.restoreView();
+              that.editor.focus();
+            }, 250);
+          }
+        })
+      })
+
+    },
+
+    oneditresize: function(size) {
+      var rows = $("#dialog-form>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");
+      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
+      $(".node-text-editor").css("height",height+"px");
+      this.editor.resize();
+    }
+  });
+</script>
+
+<script type="text/html" data-template-name="ClientCode">
+  <div class="form-row">
+      <label for="node-input-name">
+          <i class="fa fa-tag"></i>
+          <span data-i18n="common.label.name">Name</span>
+      </label>
+      <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>
+      <input type="hidden" id="node-input-clientcode" autofocus="autofocus">
+
+      <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>
+
+  <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">
+</script>
+
+<script type="text/html" data-help-name="ClientCode">
+  <p>Execute Javascript code in the Node-RED frontend, triggered from the server.</p>
+</script>

package/nodes/60-client-code.js

@@ -0,0 +1,49 @@
+module.exports = function(RED) {
+  function ClientCodeFunctionality(config) {
+    RED.nodes.createNode(this,config);
+
+    var node = this;
+    var cfg = config;
+
+    node.on('close', function() {
+      node.status({});
+    });
+
+    node.on("input", function(msg, send, done) {
+      RED.comms.publish(
+        "introspect:client-code-perform",
+        RED.util.encodeObject({
+          msg:     "execfunc",
+          payload: msg.payload,
+          topic:   msg.topic,
+          func:    cfg.clientcode,
+          nodeid:  node.id
+        })
+      );
+    });
+  }
+  RED.nodes.registerType("ClientCode", ClientCodeFunctionality);
+
+  RED.httpAdmin.post("/ClientCode/:id",
+                     RED.auth.needsPermission("ClientCode.write"),
+                     (req,res) => {
+                       var node = RED.nodes.getNode(req.params.id);
+                       if (node != null) {
+                         try {
+                           if (req.body && node.type == "ClientCode" ) {
+                             node.send(req.body);
+                             res.sendStatus(200);
+                           } else {
+                             res.sendStatus(404);
+                           }
+                         } catch(err) {
+                           res.sendStatus(500);
+                           node.error("ClientCode: Submission failed: " +
+                                      err.toString())
+                         }
+                       } else {
+                         res.sendStatus(404);
+                       }
+                     });
+
+}

package/nodes/{55-trigger-import.html → __55-trigger-import.html}

@@ -1,5 +1,37 @@
 <script type="text/javascript">
 
+ /*
+   * How to connect nodes:
+    var namesToId = {}
+
+    RED.nodes.eachNode((n) => {
+    if ( n._def.category == "rssfeeds") {
+      namesToId[n.name] = n.id
+    }
+    })
+
+    RED.nodes.eachNode((n) => {
+      if ( n._def.category == "rssfeeds" && n._def.label() == "Hacker News: New Comments") {
+          var title = n.name.match(/^New[ ]+comment[ ]+by.+\"(.*)\"/)[1];
+          var tgtId = namesToId[title];
+          if ( tgtId ) {
+              var t = RED.nodes.node(tgtId);
+             RED.nodes.addLink( { source: n, sourcePort: 0, target: t});
+             RED.view.select([t,n])
+          }
+       }
+     })
+
+    * How to move
+
+    var t = RED.nodes.node("23e18922a0b896f1")
+    t.x = XXXX;
+    t.y = YYYY;
+    t.dirty = true;
+    RED.view.redraw(true)
+
+  */
+
  RED.comms.subscribe('introspect:trigger-import-delete', (event,data) => {
    if ( data.msg == "delete-old-nodes" ) {
      RED.view.select(false)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gregoriusrippenstein/node-red-contrib-introspection",
-  "version": "0.3.5",
+  "version": "0.4.1",
   "dependencies": {
     "got": "latest"
   },
@@ -16,16 +16,16 @@
   "node-red": {
     "version": ">=2.0.0",
     "nodes": {
-      "seeker":          "nodes/05-seeker.js",
-      "sink":            "nodes/10-sink.js",
-      "screenshot":      "nodes/15-screenshot.js",
-      "orphans":         "nodes/20-orphans.js",
-      "ismobile":        "nodes/25-ismobile.js",
-      "navigator":       "nodes/30-navigator.js",
-      "drawsvg":         "nodes/40-drawsvg.js",
-      "getflows":        "nodes/45-get-flows.js",
-      "sendflow":        "nodes/50-send-flow.js",
-      "triggerimport":   "nodes/55-trigger-import.js"
+      "seeker":        "nodes/05-seeker.js",
+      "sink":          "nodes/10-sink.js",
+      "screenshot":    "nodes/15-screenshot.js",
+      "orphans":       "nodes/20-orphans.js",
+      "ismobile":      "nodes/25-ismobile.js",
+      "navigator":     "nodes/30-navigator.js",
+      "drawsvg":       "nodes/40-drawsvg.js",
+      "getflows":      "nodes/45-get-flows.js",
+      "sendflow":      "nodes/50-send-flow.js",
+      "clientcode":    "nodes/60-client-code.js"
     }
   },
   "description": "Node-RED Editor-only nodes for introspecting flows.",

package/nodes/55-trigger-import.js

@@ -1,38 +0,0 @@
-module.exports = function(RED) {
-  function TriggerImportFunctionality(config) {
-    RED.nodes.createNode(this,config);
-
-    var node = this;
-    var cfg = config;
-
-    node.on('close', function() {
-      node.status({});
-    });
-
-    node.on("input", function(msg, send, done) {
-      if ( msg.payload && msg.payload.cmd == "delete-nodes" ) {
-        RED.comms.publish('introspect:trigger-import-delete',
-                          RED.util.encodeObject({
-                            msg:     "delete-old-nodes",
-                            payload: msg.payload,
-                          })
-        );
-
-        send(msg);
-        return;
-      }
-
-      RED.comms.publish("introspect:trigger-import-tripped",
-                        RED.util.encodeObject({
-                          flowContent:      msg.payload,
-                          msg:              "import-flow",
-                          autoimport:       cfg.autoimport,
-                          removeduplicates: cfg.removeduplicates,
-                        })
-      );
-
-      send(msg);
-    });
-  }
-  RED.nodes.registerType("TriggerImport", TriggerImportFunctionality);
-}