@flowfuse/node-red-dashboard 1.1.0 → 1.1.1-443cd97-202402211638.0

package/nodes/widgets/locales/en-US/ui_gauge.json

@@ -23,10 +23,12 @@
             "gauge": "Gauge",
             "gap": "Gap",
             "styling": "Styling",
-            "class": "Class"
+            "class": "Class",
+            "units": "Units",
+            "icon": "Icon"
         },
         "errors": {
             "unique": "All 'from' values must be unique."
         }
     }
-  }
+}

package/nodes/widgets/locales/en-US/ui_table.json

@@ -0,0 +1,14 @@
+{
+    "ui-table": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "maxRows": "Max Rows",
+            "columns": "Columns",
+            "autoCalculateColumns": "Auto Calculate Columns",
+            "key": "Key",
+            "label": "Label",
+            "column": "column"
+        }
+    }
+}

package/nodes/widgets/locales/en-US/ui_template.json

@@ -7,9 +7,12 @@
             "widget-ui": "Widget (UI-Scoped)",
             "site-style": "CSS (All Pages)",
             "page-style": "CSS (Single Page)",
+            "ui": "UI",
+            "page": "Page",
             "group": "Group",
             "size": "Size",
-            "name": "Name",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s)",
             "pass-through": "Pass through messages from input.",
             "store-state": "Add output messages to stored state.",
             "template": "Template",

package/nodes/widgets/locales/en-US/ui_text.html

@@ -5,7 +5,7 @@
         alongside the (optional) label.
     </p>
     <p>
-        You can also customise the style of the text by enabling "Apply Custom Style".
+        You can also customise the style of the text by enabling "Apply Style".
         This will show the following options:
         <ul>
             <li><b>Font:</b> Choose from a collection of pre-defined fonts.</li>
@@ -17,6 +17,6 @@
     <p>Any of the following can be appended to a <code>msg.</code> in order to override or set properties on this node at runtime.</p>
     <dl class="message-properties">
         <dt class="optional">class <span class="property-type">string</span></dt>
-        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
+        <dd>Add a CSS class, or more, to the text at runtime.</dd>
     </dl>
 </script>

package/nodes/widgets/locales/en-US/ui_text.json

@@ -0,0 +1,20 @@
+{
+    "ui-text": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "label": "Label",
+            "class": "Class",
+            "optionalCssClassNames": "Optional CSS class name(s)",
+            "layout": "Layout",
+            "label2": "label",
+            "value": "value",
+            "style": "Style",
+            "applyStyle": "Apply Style",
+            "font": "Font",
+            "textSize": "Text Size",
+            "textColor": "Text Color",
+            "enterSampleHere": "Enter Sample Here"
+        }
+    }
+}

package/nodes/widgets/locales/ja/ui_button.html

@@ -0,0 +1,12 @@
+<script type="text/html" data-help-name="ui-button">
+    <p>画面へボタンを追加します。</p>
+    <p>
+        ボタンをクリックすると、<b>ペイロード</b>欄の値が <code>msg.payload</code> に、<b>トピック</b>欄の値が <code>msg.topic</code> に設定されたメッセージが生成されます。
+    </p>
+    <h3>動的プロパティ(入力)</h3>
+    <p>実行時に本ノードのプロパティを設定したり、上書きしたりするため、以下を <code>msg.</code> に追加できます。</p>
+    <dl class="message-properties">
+        <dt class="optional">class <span class="property-type">文字列</span></dt>
+        <dd>実行時にボタンへCSSクラスなどを設定します。</dd>
+    </dl>
+</script>

package/nodes/widgets/locales/ja/ui_button.json

@@ -0,0 +1,25 @@
+{
+    "ui-button": {
+        "label": {
+            "group": "グループ",
+            "size": "サイズ",
+            "icon": "アイコン",
+            "optionalIcon": "任意のアイコン",
+            "label": "ラベル",
+            "optionalLabel": "任意のラベル",
+            "button": "ボタン",
+            "className": "クラス",
+            "classNamePlaceholder": "任意のCSSクラス名",
+            "tooltip": "ツールチップ",
+            "optionalTooltip": "任意のツールチップ",
+            "color": "色",
+            "optionalColor": "任意の文字列とアイコンの色",
+            "background": "背景",
+            "optionalBackgroundColor": "任意の背景色",
+            "whenClicked": "クリックされた時に、以下のメッセージを送信:",
+            "payload": "ペイロード",
+            "topic": "トピック",
+            "emulateClick": "入力にメッセージが届けることでクリックを再現:"
+        }
+    }
+}

package/nodes/widgets/locales/ja/ui_form.html

@@ -0,0 +1,22 @@
+<script type="text/html" data-help-name="ui-form">
+    <p>画面に入力フォームを追加します。</p>
+    <p>ユーザに複数の値を入力してもらうために使います。送信ボタンをクリックすると <code>msg.payload</code> にオブジェクトとして値が格納されます。</p>
+    <p>要素を追加するボタンにより、複数の入力部品を追加できます。</p>
+    <p>各要素には、以下を設定できます:</p>
+    <ul>
+        <li> <b>ラベル</b> : 画面上の部品のラベルとなる値</li>
+        <li> <b>名前</b> : 表示部品に入力された値を格納する <code>msg.payload</code> 内のキー (変数名)</li>
+        <li> <b>型</b> : 入力部品の型を選択するドロップダウン</li>
+        <li> <b>必須</b> : 有効にするとユーザは送信前に値の入力が必須となる設定</li>
+        <li> <b>行数</b> : 複数行の文字列入力ができる部品の行数</li>
+        <li> <b>削除</b> : 入力フォームから現在の部品を削除</li>
+    </ul>
+    <p><b>トピック</b>欄は任意で <code>msg.topic</code> プロパティに値を格納するために使います。</p>
+    <p>中止ボタンの値に空欄 ""を設定することで、中止ボタンを表示しないようにすることもできます。</p>
+    <h3>動的プロパティ(入力)</h3>
+    <p>実行時に本ノードのプロパティを設定したり、上書きしたりするため、以下を <code>msg.</code> に追加できます。</p>
+    <dl class="message-properties">
+        <dt class="optional">class <span class="property-type">文字列</span></dt>
+        <dd>実行時にフォームへCSSクラスなどを設定します。</dd>
+    </dl>
+</script>

package/nodes/widgets/locales/ja/ui_form.json

@@ -0,0 +1,38 @@
+{
+    "ui-form": {
+        "label": {
+            "group": "グループ",
+            "size": "サイズ",
+            "label": "ラベル",
+            "optionalLabel": "任意のラベル",
+            "className": "クラス",
+            "classNamePlaceholder": "任意のCSSクラス名",
+            "formElements": "フォームの要素",
+            "type": "型",
+            "required": "必須",
+            "rows": "行数",
+            "remove": "削除",
+            "egName": "例: 名前",
+            "egName2": "例: name",
+            "text": "文字列",
+            "multiline": "複数行",
+            "number": "数値",
+            "email": "E-メール",
+            "password": "パスワード",
+            "checkbox": "チェックボックス",
+            "switch": "スイッチ",
+            "date": "日付",
+            "time": "時間",
+            "element": "要素",
+            "buttons": "ボタン",
+            "submit": "送信",
+            "submitButtonText": "送信ボタンの文字列",
+            "cancel": "中止",
+            "cancelButtonText": "中止ボタンの文字列",
+            "topic": "トピック",
+            "optionalMsgTopic": "任意のmsg.topic",
+            "splitLayout": "フォーム要素を2列に配置",
+            "resetOnSubmit": "送信後にフォームを初期化"
+        }
+    }
+}

package/nodes/widgets/locales/ja/ui_table.json

@@ -0,0 +1,14 @@
+{
+    "ui-table": {
+        "label": {
+            "group": "グループ",
+            "size": "サイズ",
+            "maxRows": "上限の行数",
+            "columns": "列",
+            "autoCalculateColumns": "列を自動判断",
+            "key": "キー",
+            "label": "ラベル",
+            "column": "列"
+        }
+    }
+}

package/nodes/widgets/locales/ja/ui_template.json

@@ -0,0 +1,23 @@
+{
+    "ui-template": {
+        "label": {
+            "scope": "種類",
+            "widget-group": "部品 (有効範囲-グループ)",
+            "widget-page": "部品 (有効範囲-ページ)",
+            "widget-ui": "部品 (有効範囲-画面)",
+            "site-style": "CSS (全てのページ)",
+            "page-style": "CSS (単一のページ)",
+            "ui": "画面",
+            "page": "ページ",
+            "group": "グループ",
+            "size": "サイズ",
+            "className": "クラス",
+            "classNamePlaceholder": "任意のCSSクラス名",
+            "pass-through": "入力メッセージをそのまま渡す",
+            "store-state": "出力メッセージを状態として保存",
+            "template": "テンプレート",
+            "expand": "展開",
+            "resend": "更新時に最後の値を再度読み込む"
+        }
+    }
+}

package/nodes/widgets/locales/ja/ui_text.html

@@ -0,0 +1,19 @@
+<script type="text/html" data-help-name="ui-text">
+    <p>
+        画面に編集不可の文字列を表示します。受信した各 <code>msg.payload</code> の値は(任意の)ラベルの横に表示されます。
+    </p>
+    <p>
+        「様式を適用」を有効にすることで、文字列の様式を変更できます。以下の設定が表示されます。
+        <ul>
+            <li><b>文字の種類:</b> 事前定義された文字の種類を一覧から選択</li>
+            <li><b>文字サイズ:</b> 表示する文字列の大きさを(ピクセル単位で)定義する数値</li>
+            <li><b>文字の色:</b> 表示する文字列の色を定義する色ピッカー</li>
+        </ul>
+    </p>
+    <h3>動的プロパティ(入力)</h3>
+    <p>実行時に本ノードのプロパティを設定したり、上書きしたりするため、以下を <code>msg.</code> に追加できます。</p>
+    <dl class="message-properties">
+        <dt class="optional">class <span class="property-type">文字列</span></dt>
+        <dd>実行時に文字列へCSSクラスなどを設定します。</dd>
+    </dl>
+</script>

package/nodes/widgets/locales/ja/ui_text.json

@@ -0,0 +1,20 @@
+{
+    "ui-text": {
+        "label": {
+            "group": "グループ",
+            "size": "サイズ",
+            "label": "ラベル",
+            "class": "クラス",
+            "optionalCssClassNames": "任意のCSSクラス名",
+            "layout": "配置",
+            "label2": "ラベル",
+            "value": "値",
+            "style": "様式",
+            "applyStyle": "様式を適用",
+            "font": "文字の種類",
+            "textSize": "文字サイズ",
+            "textColor": "文字の色",
+            "enterSampleHere": "ここに例文を入力"
+        }
+    }
+}

package/nodes/widgets/ui_button.html

@@ -9,7 +9,7 @@
             defaults: {
                 group: { type: 'ui-group', required: true },
                 name: { value: '' },
-                label: { value: 'button' },
+                label: { value: RED._('@flowfuse/node-red-dashboard/ui-button:ui-button.label.button') },
                 order: { value: 0 },
                 width: {
                     value: 0,
@@ -80,7 +80,7 @@
 
 <script type="text/html" data-template-name="ui-button">
     <div class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-button.label.group"></label>
         <input type="text" id="node-input-group">
     </div>
     <div class="form-row">
@@ -94,13 +94,13 @@
         <input type="text" id="node-input-icon" data-i18n="[placeholder]ui-button.label.optionalIcon">
     </div>-->
     <div class="form-row">
-        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> <span data-i18n="ui-button.label.label"></label>
         <input type="text" id="node-input-label" data-i18n="[placeholder]ui-button.label.optionalLabel">
     </div>
     <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-button.label.className"></label>
         <div style="display: inline;">
-            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-button.label.classNamePlaceholder" style="flex-grow: 1;">
             <a
                 data-html="true"
                 title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."

package/nodes/widgets/ui_event.js

@@ -17,7 +17,6 @@ module.exports = function (RED) {
                         console.log('ui-event node not found', id)
                     }
                     if (wNode && id === node.id) {
-                        console.log('running ui-event handler', id)
                         // this was sent by this particular node
                         let msg = {
                             topic: evt,

package/nodes/widgets/ui_form.html

@@ -45,8 +45,8 @@
                 },
                 formValue: { value: {} },
                 payload: { value: '' },
-                submit: { value: 'submit' },
-                cancel: { value: 'clear' },
+                submit: { value: c_('label.submit') },
+                cancel: { value: c_('label.cancel') },
                 resetOnSubmit: { value: true },
                 topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
                 topicType: { value: 'msg' },
@@ -84,7 +84,7 @@
 
                     // label field
                     $('<input/>', { class: 'node-input-option-label', type: 'text', style: 'margin-left:7px; width:20%;', placeholder: c_('label.egName'), value: option.label }).appendTo(row)
-    
+
                     // key field
                     let keyClass = 'node-input-option-key'
                     if (!option.key) { keyClass = 'node-input-option-key input-error' }
@@ -98,7 +98,7 @@
                             }
                         }
                     })
-    
+
                     // type field
                     const typeField = $('<select/>', { class: 'node-input-option-type', type: 'text', style: 'margin-left:7px; width:16%' }).appendTo(row)// .typedInput({default:'str',types:['str', 'num']});
 
@@ -125,7 +125,7 @@
 
                     // which input types don't need a 'require' option
                     const noReqd = ['checkbox', 'switch']
-    
+
                     // required
                     const requiredContainer = $('<div/>', { style: 'display:inline-block; height:34px; width:13%; vertical-align: middle' }).appendTo(row)
                     const requiredInnerContainer = $('<div/>', { style: 'left:35%; position:relative; width:30px' }).appendTo(requiredContainer)
@@ -133,7 +133,7 @@
                     const reqRow = $('<label />', { class: 'switch', style: 'top:10px; width:30px;' }).css('visibility', reqVis).appendTo(requiredInnerContainer)
                     const reqd = $('<input/>', { class: 'node-input-option-required', type: 'checkbox', checked: option.required, style: 'vertical-align:top;' }).appendTo(reqRow)// labelForRequried);//.typedInput({default:'str',types:['str', 'num']});
                     $('<div />', { class: 'slider round' }).appendTo(reqRow)
-    
+
                     // ui rows
                     const rowsVis = option.rows ? 'visible' : 'hidden'
                     const rowsField = $('<input/>', { class: 'node-input-option-rows', type: 'number', style: 'width:10%;', placeholder: 'Rows', value: option.rows }).css('visibility', rowsVis).appendTo(row)
@@ -311,9 +311,9 @@
         <input type="text" id="node-input-label" data-i18n="[placeholder]ui-form.label.optionalLabel">
     </div>
     <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-form.label.className"></label>
         <div style="display: inline;">
-            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-form.label.classNamePlaceholder" style="flex-grow: 1;">
             <a
                 data-html="true"
                 title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."

package/nodes/widgets/ui_gauge.html

@@ -32,6 +32,7 @@
             gstyle: { value: 'needle' },
             title: { value: 'gauge' },
             units: { value: 'units' },
+            icon: { value: '' },
             prefix: { value: '' },
             suffix: { value: '' },
             segments: {
@@ -215,7 +216,11 @@
         </div>
         <div class="form-row" id="ui-gauge-units">
             <label for="node-input-units"><i class="fa fa-calculator"></i> <span data-i18n="ui-gauge.label.units"></span></label>
-            <input type="text" id="node-input-units" placeholder="segmental sub-label">
+            <input type="text" id="node-input-units" placeholder="Unit">
+        </div>
+        <div class="form-row" id="ui-gauge-icon">
+            <label for="node-input-icon"><i class="fa fa-home"></i> <span data-i18n="ui-gauge.label.icon"></span></label>
+            <input type="text" id="node-input-icon" placeholder="Icon from mdi library, e.g. 'home'">
         </div>
     </div>
     <div class="form-row">

package/nodes/widgets/ui_table.html

@@ -62,8 +62,8 @@
 
                     $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-column-handle fa fa-bars"></i>').appendTo(row)
 
-                    $('<input/>', { class: 'node-input-column-key', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Key', value: col.key }).appendTo(row)
-                    $('<input/>', { class: 'node-input-column-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: col.label }).appendTo(row)
+                    $('<input/>', { class: 'node-input-column-key', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key'), value: col.key }).appendTo(row)
+                    $('<input/>', { class: 'node-input-column-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label'), value: col.label }).appendTo(row)
 
                     const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
                     const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
@@ -114,35 +114,35 @@
 
 <script type="text/html" data-template-name="ui-table">
     <div class="form-row">
-        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
-        <input type="text" id="node-input-name">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
     </div>
     <div class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-table.label.group"></label>
         <input type="text" id="node-input-group">
     </div>
     <div class="form-row">
-        <label><i class="fa fa-object-group"></i> Size</label>
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-table.label.size"></label>
         <input type="hidden" id="node-input-width">
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </div>
     <div class="form-row">
-        <label for="node-input-maxrows"><i class="fa fa-tag"></i> Max Rows</label>
+        <label for="node-input-maxrows"><i class="fa fa-tag"></i> <span data-i18n="ui-table.label.maxRows"></label>
         <input type="number" id="node-input-maxrows">
     </div>
     <div class="form-row" style="display:flex;">
-        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> <span data-i18n="ui-table.label.columns"></label>
         <div class="form-row node-input-column-container-row" style="margin-bottom: 0px; width:calc(70% + 15px);">
             <div>
                 <input type="checkbox" checked id="node-input-autocols" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
-                <label style="width:auto" for="node-input-autocols">Auto Calculate Columns</label>
+                <label style="width:auto" for="node-input-autocols" data-i18n="ui-table.label.autoCalculateColumns"></label>
             </div>
             <div id="node-input-columns-container">
                 <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 100%;">
                     <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
                 </div>
-                <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px;"><i class="fa fa-plus"></i> <span>column</span></a>
+                <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px;"><i class="fa fa-plus"></i> <span data-i18n="ui-table.label.columns"></span></a>
             </div>
         </div>
     </div>

package/nodes/widgets/ui_template.html

@@ -324,19 +324,19 @@
         </select>
     </div>
     <div id="template-row-ui" class="form-row">
-        <label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>
+        <label for="node-input-ui"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.ui"></label>
         <input type="text" id="node-input-ui">
     </div>
     <div id="template-row-page" class="form-row">
-        <label for="node-input-page"><i class="fa fa-bookmark"></i> Page</label>
+        <label for="node-input-page"><i class="fa fa-bookmark"></i> <span data-i18n="ui-template.label.page"></label>
         <input type="text" id="node-input-page">
     </div>
     <div id="template-row-group" class="form-row">
-        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-template.label.group"></label>
         <input type="text" id="node-input-group">
     </div>
     <div class="form-row">
-        <label><i class="fa fa-object-group"></i> Size</label>
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-template.label.size"></label>
         <input type="hidden" id="node-input-width">
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
@@ -348,9 +348,9 @@
         <button class="editor-button" id="node-input-size"></button>
     </div>-->
     <div class="form-row">
-        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <label for="node-input-className"><i class="fa fa-code"></i> <span data-i18n="ui-template.label.className"></label>
         <div style="display: inline;">
-            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <input style="width: 70%;" type="text" id="node-input-className" data-i18n="[placeholder]ui-template.label.classNamePlaceholder" style="flex-grow: 1;">
             <a
                 data-html="true"
                 title="Dynamic Property: Send msg.class to append new classes to this widget. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
@@ -361,7 +361,7 @@
         </div>
     </div>
     <div class="form-row" style="margin-bottom:0px;">
-        <label for="node-input-format"><i class="fa fa-copy"></i> <span data-i18n="ui-template.label.template"></span></label>
+        <label for="node-input-format" style="width:110px;"><i class="fa fa-copy"></i> <span data-i18n="ui-template.label.template"></span></label>
         <input type="hidden" id="node-input-format">
         <button id="node-template-expand-editor" class="red-ui-button red-ui-button-small" style="float:right"><i class="fa fa-expand"></i></button>
     </div>