Translate palette labels and fallback names via the message catalog (#17)

* Translate palette labels and fallback names via the message catalog

Route each node's paletteLabel and the empty-name fallback label through
this._() so they resolve from the i18n catalog instead of hard-coded
strings. Add paletteLabel and label.fallback keys (en-US + de) per node;
the universe fallback interpolates via {{universe}}.

* Use Node-RED interpolation syntax for the universe in node labels

Node-RED configures i18next with __var__ interpolation delimiters, not
the i18next default {{var}}. The universe placeholder in the sacn-in and
sacn-out fallback labels therefore rendered literally instead of being
substituted.

Author: mutec

dist/nodes/sacn-in/locales/de/sacn-in.json

@@ -1,6 +1,8 @@
 {
   "sacn-in": {
+    "paletteLabel": "sACN Eingang",
     "label": {
+      "fallback": "sACN Eingang · U__universe__",
       "interface": "IP-Adresse des Interfaces",
       "mode": "Modus",
       "mode_direct": "Direkt",

dist/nodes/sacn-in/locales/en-US/sacn-in.json

@@ -1,6 +1,8 @@
 {
   "sacn-in": {
+    "paletteLabel": "sACN in",
     "label": {
+      "fallback": "sACN in · U__universe__",
       "interface": "IP-address of interface",
       "mode": "mode",
       "mode_direct": "direct",

dist/nodes/sacn-in/sacn-in.html

@@ -268,10 +268,12 @@ <h3>References</h3>
             },
             inputs: 1,
             outputs: 1,
-            paletteLabel: "sACN in",
+            paletteLabel: function () {
+                return this._("sacn-in.paletteLabel");
+            },
             icon: "sacn-in.svg",
             label: function () {
-                return this.name || `sACN in · U${this.universe}`;
+                return this.name || this._("sacn-in.label.fallback", { universe: this.universe });
             },
             labelStyle: function () {
                 return this.name ? "node_label_italic" : "";

dist/nodes/sacn-out/locales/de/sacn-out.json

@@ -1,6 +1,8 @@
 {
   "sacn-out": {
+    "paletteLabel": "sACN Ausgang",
     "label": {
+      "fallback": "sACN Ausgang · U__universe__",
       "interface": "IP-Adresse des Interfaces",
       "port": "Port",
       "priority": "Priorität",

dist/nodes/sacn-out/locales/en-US/sacn-out.json

@@ -1,6 +1,8 @@
 {
   "sacn-out": {
+    "paletteLabel": "sACN out",
     "label": {
+      "fallback": "sACN out · U__universe__",
       "interface": "IP-address of interface",
       "port": "port",
       "priority": "priority",

dist/nodes/sacn-out/sacn-out.html

@@ -209,10 +209,12 @@ <h3>References</h3>
             },
             inputs: 1,
             outputs: 0,
-            paletteLabel: "sACN out",
+            paletteLabel: function () {
+                return this._("sacn-out.paletteLabel");
+            },
             icon: "sacn-out.svg",
             label: function () {
-                return this.name || `sACN out · U${this.universe}`;
+                return this.name || this._("sacn-out.label.fallback", { universe: this.universe });
             },
             labelStyle: function () {
                 return this.name ? "node_label_italic" : "";

dist/nodes/scene-controller/locales/de/scene-controller.json

@@ -1,6 +1,8 @@
 {
   "scene-controller": {
+    "paletteLabel": "Szenen-Controller",
     "label": {
+      "fallback": "Szenen-Controller",
       "values": "Werte",
       "values_percent": "Prozent (0–100)",
       "values_absolute": "Absolut (0–255)"

dist/nodes/scene-controller/locales/en-US/scene-controller.json

@@ -1,6 +1,8 @@
 {
   "scene-controller": {
+    "paletteLabel": "Scene-Controller",
     "label": {
+      "fallback": "Scene-Controller",
       "values": "values",
       "values_percent": "percent (0–100)",
       "values_absolute": "absolute (0–255)"

dist/nodes/scene-controller/scene-controller.html

@@ -94,10 +94,12 @@ <h3>References</h3>
             },
             inputs: 1,
             outputs: 1,
-            paletteLabel: "Scene-Controller",
+            paletteLabel: function () {
+                return this._("scene-controller.paletteLabel");
+            },
             icon: "scene-controller.svg",
             label: function () {
-                return this.name || "Scene-Controller";
+                return this.name || this._("scene-controller.label.fallback");
             },
             labelStyle: function () {
                 return this.name ? "node_label_italic" : "";

src/nodes/sacn-in/init.ts

@@ -118,10 +118,12 @@ const def: EditorNodeDef<Defaults> = {
   },
   inputs: 1,
   outputs: 1,
-  paletteLabel: "sACN in",
+  paletteLabel: function () {
+    return this._("sacn-in.paletteLabel");
+  },
   icon: "sacn-in.svg",
   label: function () {
-    return this.name || `sACN in · U${this.universe}`;
+    return this.name || this._("sacn-in.label.fallback", { universe: this.universe });
   },
   labelStyle: function () {
     return this.name ? "node_label_italic" : "";