@gregoriusrippenstein/node-red-contrib-nodedev 0.1.8 → 0.2.0

package/nodes/20-pkg-file.html

@@ -47,6 +47,39 @@
 </script>
 
 <script type="text/javascript">
+(function(){
+
+    var returnInfo = (that) => {
+        const escapeHTML = str =>
+            str.replace(
+                /[&<>'"]/g,
+                tag =>
+                ({
+                    '&': '&amp;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                    "'": '&#39;',
+                    '"': '&quot;'
+                }[tag] || tag)
+            );
+
+        switch(that.format) {
+            case 'markdown':
+            case 'text':
+                return that.template
+                
+            case "json":
+            case "yaml":
+            case "javascript":
+            case "css":
+                return ["```" + that.format, that.template, "```"].join("\n")
+
+            case "html":
+                return ["```" + that.format, escapeHTML(that.template), "```"].join("\n")
+        }
+        return ""
+    };
+
     RED.nodes.registerType('PkgFile',{
         color:"#e5e4ef",
         category: 'nodedev',
@@ -58,15 +91,20 @@
             template: {value:""},
             output: {value:"str"},
         },
+
         inputs:1,
         outputs:1,
         icon: "font-awesome/fa-file-o",
+        info: function() { return returnInfo(this) },
+
         label: function() {
             return this.name || this.filename || this._def.paletteLabel;
         },
+
         labelStyle: function() {
             return this.name?"node_label_italic":"";
         },
+
         oneditprepare: function() {
             const that = this;
             const stateId = RED.editor.generateViewStateId("node", this, "");
@@ -132,4 +170,5 @@
             this.editor.resize();
         }
     });
+})();
 </script>

package/nodes/node-factory-sidebar-cfg.js

@@ -66,6 +66,20 @@ module.exports = function (RED) {
         }
     }
 
+    function createGroup(pkgname, pversion, allFiles) {
+        return {
+            "id": RED.util.generateId(), 
+             "type": "group",
+             "name": "Package: " + pkgname + "@" + pversion,
+             "style": {
+                "label": true,
+                "label-position": "ne",
+                "color": "#001f60"
+            },
+            "nodes": allFiles.map( d => d.id )
+        }
+    }
+
     RED.httpAdmin.post("/NodeFactorySidebarCfg",
         RED.auth.needsPermission("nodedev.write"),
         (req, res) => {
@@ -101,9 +115,13 @@ module.exports = function (RED) {
                             lastNode.wires[0].push(tarballNode.id)
 
                             allFiles.push(nodeDevOp);
-                            allFiles.push(tarballNode)
-                            allFiles.push(nrInstallNode)
-                            
+                            allFiles.push(tarballNode);
+                            allFiles.push(nrInstallNode);
+
+                            allFiles = [
+                                createGroup(msg.pkgname, nodeDevOp.pversion || msg.pkgversion, allFiles)
+                            ].concat(allFiles);
+
                             RED.comms.publish(
                                 "nodedev:perform-autoimport-nodes",
                                 RED.util.encodeObject({

package/nodes/templates/locale/en-US/tmpl.json

@@ -1,24 +1,45 @@
 {
   "{{ node.name }}": {
 {{#node.bak2frtcomm}}
-      "notify": {
+      "label": {
          "commfrombackend": "Backend sent something to the frontend - check browser console.",
          "msgfrombackend": "message from backend"
   {{ #node.frt2bakcomm }}
-      },
-  {{ /node.frt2bakcomm }}
-  {{ ^node.frt2bakcomm }}
-      }
+         ,
+          "submissionfailed": "submission failed",
+          "buttonpressed": "button pressed on frontend",
+          "success": "Successfully sent something to the backend"
   {{ /node.frt2bakcomm }}
+      },
 {{/node.bak2frtcomm}}
 
-{{ #node.frt2bakcomm }}
-      "notifyf2b": {
+{{^node.bak2frtcomm}}
+  {{#node.frt2bakcomm }}
+      "label": {
           "submissionfailed": "submission failed",
           "buttonpressed": "button pressed on frontend",
           "success": "Successfully sent something to the backend"
-      }
-{{ /node.frt2bakcomm }}
+      },
+  {{/node.frt2bakcomm }}
+{{/node.bak2frtcomm}}
+
+{{^node.bak2frtcomm}}
+  {{^node.frt2bakcomm }}
+    "label": {
+      "hello": "world"
+    },
+  {{/node.frt2bakcomm }}
+{{/node.bak2frtcomm}}
+
+    "errors": {
+
+    },
+    "tip": {
 
+    },
+    "status": {
+      "waiting": "Waiting for Godot",
+      "timeout": "No more time to waiting"
+    }
   }
 }

package/nodes/templates/tmpl.html

@@ -15,7 +15,7 @@
         }),
 
         success: function (resp) {
-          RED.notify( RED._("{{ node.name}}.notifyf2b.success"), {
+          RED.notify( RED._("{{ node.name}}.label.success"), {
             type: "warning",
             id: "{{node.name}}",
             timeout: 2000
@@ -84,7 +84,7 @@
       this.messageFromBackendHandler = (topic,dataobj) => {
         console.log( "here goes the code for handling a message from the backend", topic, dataobj);
 
-        RED.notify(RED._("{{ node.name}}.notify.commfrombackend"), {
+        RED.notify(RED._("{{ node.name}}.label.commfrombackend"), {
             type: "success",
             id: "{{node.name}}",
             timeout: 2000
@@ -125,7 +125,7 @@
 
         {{ #node.frt2bakcomm }}
         var that = this;
-        sendToBackend(that, {"payload": RED._("{{ node.name}}.notifyf2b.buttonpressed")})
+        sendToBackend(that, {"payload": RED._("{{ node.name}}.label.buttonpressed")})
         {{ /node.frt2bakcomm }}
 
         /* here goes the button code to be executed on click */

package/nodes/templates/tmpl.js

@@ -15,7 +15,7 @@ module.exports = function(RED) {
         RED.comms.publish("{{node.name}}:message-from-backend",
                RED.util.encodeObject({
                   ...msg,
-                  "data": RED._("{{ node.name}}.notify.msgfrombackend"),
+                  "data": RED._("{{ node.name}}.label.msgfrombackend"),
                 })
         );
       {{/node.bak2frtcomm}}
@@ -49,7 +49,7 @@ module.exports = function(RED) {
         } catch (err) {
           console.error(err);
           res.status(500).send(err.toString());
-          node.error("{{ node.name }}: " + RED._("{{ node.name }}.notifyf2b.submissionfailed") + ": " + err.toString())
+          node.error("{{ node.name }}: " + RED._("{{ node.name }}.label.submissionfailed") + ": " + err.toString())
         }
       } else {
         res.sendStatus(404);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name" : "@gregoriusrippenstein/node-red-contrib-nodedev",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "dependencies": {
     "pako":          "latest",
     "tar-stream":    "latest",

package/plugins/node-factory-sidebar.html

@@ -11,8 +11,8 @@
          contentType: "application/json; charset=utf-8",
 
          data: JSON.stringify({
-            pkgname: $("#node-input-nodefactorysidebar-package-name").val(),
-            pkgversion: $("#node-input-nodefactorysidebar-package-version").val()
+            pkgname: $("#node-input-nodefactorysidebar-package-name").val().trim(),
+            pkgversion: $("#node-input-nodefactorysidebar-package-version").val().trim()
          }),
 
          success: function (resp) {
@@ -104,8 +104,8 @@
       // --> more details: https://nodered.org/docs/api/ui/sidebar/
       RED.sidebar.addTab({
          id: "NodeFactorySidebar",
-         label: "Node Factory", // short name for the tab
-         name: "Node Factory", // long name for the menu
+         label: "Pkg Import", // short name for the tab
+         name: "Package Import", // long name for the menu
          content: content,
          closeable: true,
          // disableOnEdit: true,
@@ -122,19 +122,17 @@
 
       $('#node-input-nodefactorysidebar-generate-btn').on('click', doSomething );
 
-      $("#node-input-nodefactorysidebar-package-version").val(globalYourConfigNode.pkgversion);
-
       $("#node-input-nodefactorysidebar-package-version").on("change", function() {
          ensureYourConfigNodeExists();
 
          let data = $(this).val();
 
          if (globalYourConfigNode.pkgversion != data) {
-           globalYourConfigNode.pkgversion = data;
+           globalYourConfigNode.pkgversion = data.trim();
            RED.nodes.dirty(true);
          }
       })
-      $("#node-input-nodefactorysidebar-package-name").val(globalYourConfigNode.pkgname);
+      $("#node-input-nodefactorysidebar-package-version").val(globalYourConfigNode.pkgversion);
 
       $("#node-input-nodefactorysidebar-package-name").on("change", function() {
         ensureYourConfigNodeExists();
@@ -142,11 +140,11 @@
         let data = $(this).val();
 
         if (globalYourConfigNode.pkgname != data) {
-           globalYourConfigNode.pkgname = data;
+           globalYourConfigNode.pkgname = data.trim();
            RED.nodes.dirty(true);
         }
       })
-
+      $("#node-input-nodefactorysidebar-package-name").val(globalYourConfigNode.pkgname);
    };
 
    RED.events.on('runtime-state', initialiseConfigNodeOnce);
@@ -156,6 +154,12 @@
 <!-- The html for the right sidebar plugin screen -->
 <script type="text/x-red" data-template-name="NodeFactorySidebar">
    <div class="form-row" style="margin-left: 10px; margin-top: 30px;">
+      Import <a href="https://npmjs.com" target=_blank>npmJs.com</a> packages as a flow. packages
+      are imported as a collection of PkgFile nodes. This can help to learn from other
+      peoples experiences and code.
+   </div>
+
+   <div class="form-row" style="margin-left: 10px;">
       Enter package details here:
    </div>
 
@@ -181,7 +185,7 @@
       <div style="position: relative; height: 100%; margin: 15px;">
          <button id="node-input-nodefactorysidebar-generate-btn" 
                  class="red-ui-button"
-                 style="width: 100%; margin-top: 30px">Generate Nodes</button>
+                 style="width: 100%; margin-top: 30px">Import Package</button>
       </div>
    </div>