fix waiting screen

nodes/dynamic-form.html

@@ -6,10 +6,15 @@
             name: { value: "" },
             group: { type: 'ui-group', required: true },
             order: { value: 0 },
+            options: {
+                value: [{ label: ''}],
+                validate: function (v) {
+                    const unique = new Set(v.map(function (o) { return o.label }));
+                    return v.length === unique.size;
+                }
+            },
             waiting_title: { value: "Waiting for Warten auf den Usertask..." },
             waiting_info: { value: "Der Usertask wird automatisch angezeigt, wenn ein entsprechender Task vorhanden ist." },
-            submit_title: { value: "Submit your task" },
-            cancel_title: { value: "Cancel your task" },
             width: {
                 value: 0,
                 validate: function (v) {
@@ -21,10 +26,14 @@
                     return valid
                 }
             },
-            height: { value: 0 }
+            height: { value: 0 },
+            outputs: { value: 1}
         },
         inputs: 1,
         outputs: 1,
+        outputLabels: function(index) {
+          return this.options[index].label
+        },
         icon: "file.svg",
         label: function() {
             return this.name || "dynamic-form";
@@ -35,7 +44,81 @@
                 height: '#node-input-height',
                 group: '#node-input-group'
             });
-        }
+
+            function generateOption(i, option) {
+                const container = $('<li/>', {
+                    style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px;'
+                });
+
+                // Create input fields for value and label
+                const row = $('<div/>').appendTo(container);
+                $('<input/>', {
+                    class: 'node-input-option-label',
+                    type: 'text',
+                    style: 'margin-left:7px; width:calc(100% - 48px);',
+                    placeholder: 'Label',
+                    value: option.label
+                }).appendTo(row).typedInput({
+                  type: 'str', types: ['str']
+                });
+
+                // $('<input/>', {
+                //     class: 'node-input-option-condition',
+                //     type: 'text',
+                //     style: 'margin-left:7px; width:calc(50% - 32px);',
+                //     placeholder: 'Condition',
+                //     value: option.condition
+                // }).appendTo(row).typedInput({
+                //   type: 'str', types: ['str']
+                // });
+
+                // Create delete button for the option
+                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);
+                $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton);
+
+                deleteButton.click(function () {
+                    container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' });
+                    container.fadeOut(300, function () {
+                        $(this).remove();
+                    });
+                });
+
+                $('#node-input-option-container').append(container);
+            }
+
+            $('#node-input-add-option').click(function () {
+                generateOption($('#node-input-option-container').children().length + 1, {});
+                $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight);
+            });
+
+            for (let i = 0; i < this.options.length; i++) {
+                const option = this.options[i];
+                generateOption(i + 1, option);
+            }
+
+            $('#node-input-option-container').sortable({
+                axis: 'y',
+                handle: '.node-input-option-handle',
+                cursor: 'move'
+            });
+        },
+        oneditsave: function () {
+            const options = $('#node-input-option-container').children();
+            const node = this;
+            node.options = [];
+            options.each(function (i) {
+                const option = $(this);
+                const o = {
+                    label: option.find('.node-input-option-label').val(),
+                    // condition: option.find('.node-input-option-condition').val()
+                };
+
+                node.options.push(o);
+            });
+
+            this.outputs = node.options.length || 1
+        },
     });
 </script>
 
@@ -54,6 +137,26 @@
         <input type="hidden" id="node-input-height">
         <button class="editor-button" id="node-input-size"></button>
     </div>
+
+    <div class="form-row form-row-flex node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Actions</label>
+        <div id="node-input-option-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: 70%;">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+        <a
+            data-html="true"
+            title="Dynamic Property: Send 'msg.options' in order to override this property."
+            class="red-ui-button ui-node-popover-title"
+            style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+            <i style="font-family: ui-serif;">fx</i>
+        </a>
+    </div>
+    <!-- Add Option Button -->
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>action</span></a>
+    </div>
+
     <div class="form-row">
         <label for="node-input-waiting_title"><i class="fa fa-hand"></i>Title for waiting text.</label>
         <input type="text" id="node-input-waiting_title">
@@ -62,12 +165,4 @@
         <label for="node-input-waiting_info"><i class="fa fa-hand"></i>Text for waiting text.</label>
         <input type="text" id="node-input-waiting_info">
     </div>
-    <div class="form-row">
-        <label for="node-input-submit_title"><i class="fa fa-hand"></i>Text for submit button</label>
-        <input type="text" id="node-input-submit_title">
-    </div>
-    <div class="form-row">
-        <label for="node-input-cancel_title"><i class="fa fa-hand"></i>Text for cancel button</label>
-        <input type="text" id="node-input-cancel_title">
-    </div>
-</script>
+</script>

nodes/dynamic-form.js

@@ -37,5 +37,12 @@ module.exports = function (RED) {
         }
     }
 
-    RED.nodes.registerType('dynamic-form', DynamicFormNode)
+    RED.nodes.registerType('dynamic-form', DynamicFormNode, {
+      defaults: {
+        outputs: { value: 1 }
+      },
+      outputs: function(config) {
+        return config.outputs || 1;
+      }
+    })
 }