node-red-contrib-neuralnetwork/multiInData/multiInData.html

SmartNode node package, provided by MakerCollider

/**
 * Copyright 2015, 2015 MakerCollider.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/

<script type="text/x-red" data-template-name="multiInData">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="multiInData.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]multiInData.label.placeholder">
    </div>
    <div class="form-row" style="margin-bottom:0;">
        <label><i class="fa fa-list"></i> <span data-i18n="multiInData.label.rules"></span></label>
    </div>
    <div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
        <div id="node-input-rule-container-div" style="box-sizing: border-box; border-radius: 5px; height: 250px; padding: 5px; border: 1px solid #ccc; overflow-y:scroll;">
            <ol id="node-input-rule-container" style=" list-style-type:none; margin: 0;"></ol>
        </div>
    </div>
    <div class="form-row">
        <a href="#" class="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="multiInData.label.addbutton"></span></a>
    </div>
</script>

<script type="text/x-red" data-help-name="multiInData">
</script>

<script type="text/javascript">
    RED.nodes.registerType('multiInData', {
        color: "#E2D96E",
        category: 'brain',
        defaults: {
            name: {value:""},
            rules: {value:[{v:""}]}
        },
        inputs: 1,
        outputs: 1,
        icon: "light.png",
        label: function() {
            return this.name||"multiInData";
        },
        paletteLabel: function () {
            return this.name||this._("multiInData.label.palette");
        },
        oneditprepare: function() {
            function generateRule(i,rule) {
                var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px; border-bottom: 1px solid #ccc;"});

                var row = $('<div/>').appendTo(container);
                $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
                $('<div/>',{style:"display:inline-block; width: 50px; text-align: right;"}).text("msg.").appendTo(row);

                var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row);

                var finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
                finalspan.append(' &#8594; <span class="node-input-rule-index">'+i+'</span> ');
                
                var 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":"#fee"});
                    container.fadeOut(300, function() {
                        $(this).remove();
                        $("#node-input-rule-container").children().each(function(i) {
                            $(this).find(".node-input-rule-index").html(i+1);
                        });

                    });
                });

                $("#node-input-rule-container").append(container);
                valueField.val(rule.name);
            }
            
            //add input param rule
            $("#node-input-add-rule").click(function() {
                generateRule($("#node-input-rule-container").children().length+1,{name:""});
                $("#node-input-rule-container-div").scrollTop($("#node-input-rule-container-div").get(0).scrollHeight);
            });
            
            //init
            for (var i=0;i<this.rules.length;i++) {
                var rule = this.rules[i];
                generateRule(i+1,rule);
            }
        },
        oneditsave: function() {
            function saveRules(e) {
                var rules = $("#node-input-rule-container").children();
                var node = e;
                node.rules= [];
                rules.each(function(i) {
                    var rule = $(this);
                    var n = rule.find(".node-input-rule-value").val();
                    if(n.length > 0){
                        var r = {name:n};
                        node.rules.push(r);
                    }
                });
            }
            saveRules(this);
        }
    });
</script>