18-filter.html

<script type="text/javascript">
    var operators = [
        { v: "eq", t: "==" },
        { v: "neq", t: "!=" },
        { v: "lt", t: "<" },
        { v: "lte", t: "<=" },
        { v: "gt", t: ">" },
        { v: "gte", t: ">=" },
        { v: "btwn", t: "is between" },
        { v: "cont", t: "contains" },
        { v: "regex", t: "matches regex" },
        { v: "true", t: "is true" },
        { v: "false", t: "is false" },
        { v: "null", t: "is null" },
        { v: "nnull", t: "is not null" },
        { v: "else", t: "otherwise" }
    ];

    var andLabel = 'and';
    var caseLabel = 'ignore case';
    var previousValueType = {
        value: 'prev',
        label: 'previous value',
        hasValue: false
    };

    function resizeItem(rule) {
        var newWidth = rule.width();
        var selectField = rule.find("select");
        var type = selectField.val() || "";
        var valueField = rule.find(".node-input-rule-value");
        var btwnField1 = rule.find(".node-input-rule-btwn-value");
        var btwnField2 = rule.find(".node-input-rule-btwn-value2");
        var selectWidth;
        if (type.length < 4) {
            selectWidth = 60;
        }
        else if (type === "regex") {
            selectWidth = 147;
        }
        else {
            selectWidth = 120;
        }
        selectField.width(selectWidth);
        if (type === "btwn") {
            btwnField1.typedInput("width", (newWidth - selectWidth - 80));
            btwnField2.typedInput("width", (newWidth - selectWidth - 70));
        }
        else {
            if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
                // valueField.hide();
            }
            else {
                valueField.typedInput("width", (newWidth - selectWidth - 80));
            }
        }
    }

    function addItem(container, i, rule) {
        if (!rule.hasOwnProperty('t')) {
            rule.t = 'eq';
        }
        if (!rule.output) {
            rule.output = '1';
        }
        var row = $('<div/>').appendTo(container);
        var row2 = $('<div/>',{style:"padding-top: 5px; padding-left: 175px;"}).appendTo(container);
        var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
        var row4 = $('<div/>',{style:"padding-top: 5px; padding-left: 102px;"}).appendTo(container);
        var selectField = $('<select/>',{style:"width:120px; margin-left: 5px; text-align: center;"}).appendTo(row);
        for (var d in operators) {
            selectField.append($("<option></option>").val(operators[d].v).text(operators[d].t));
        }
        var valueField = $('<input/>',{class:"node-input-rule-value",type:"text",style:"margin-left: 5px; width: 145px;"}).appendTo(row).typedInput({default:'str',types:['msg','flow','global','str','num',previousValueType]});
        var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px;"}).appendTo(row).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
        var btwnAndLabel = $('<span/>',{class:"node-input-rule-btwn-label"}).text(" "+andLabel+" ").appendTo(row3);
        var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"margin-left:2px;"}).appendTo(row3).typedInput({default:'num',types:['msg','flow','global','str','num',previousValueType]});
        var caseSensitive = $('<input/>',{id:"node-input-rule-case-"+i,class:"node-input-rule-case",type:"checkbox",style:"width:auto;vertical-align:top"}).appendTo(row2);
        $('<label/>',{for:"node-input-rule-case-"+i,style:"margin-left: 3px;"}).text(caseLabel).appendTo(row2);
        selectField.change(function() {
            resizeItem(container);
            var type = selectField.val();
            if (type === "btwn") {
                valueField.typedInput('hide');
                btwnValueField.typedInput('show');
            } else {
                btwnValueField.typedInput('hide');
                if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
                    valueField.typedInput('hide');
                } else {
                    valueField.typedInput('show');
                }
            }
            if (type === "regex") {
                row2.show();
                row3.hide();
            } else if (type === "btwn"){
                row2.hide();
                row3.show();
            } else {
                row2.hide();
                row3.hide();
            }
        });
        selectField.val(rule.t);
        if (rule.t == "btwn") {
            btwnValueField.typedInput('value',rule.v);
            btwnValueField.typedInput('type',rule.vt||'num');
            btwnValue2Field.typedInput('value',rule.v2);
            btwnValue2Field.typedInput('type',rule.v2t||'num');
        } else if (typeof rule.v != "undefined") {
            valueField.typedInput('value',rule.v);
            valueField.typedInput('type',rule.vt||'str');
        }
        if (rule.case) {
            caseSensitive.prop('checked',true);
        } else {
            caseSensitive.prop('checked',false);
        }
        selectField.change();

        var finalspan = $('<span/>',{style:"float: right;"}).appendTo(row);
        finalspan.append(' &#8594; <input class="node-input-rule-output-index" style="width:35px" type="text" value="' + (rule.output) + '"></input> ');
    }

    RED.nodes.registerType('filter', {
        category: 'function',
        color: '#A6BBCF',
        defaults: {
            name: { value: "" },
            property: { value: "payload", required: true },
            propertyType: { value: "msg" },
            asArray: { value: false },
            itemProperty: { value: 'payload' },
            itemPropertyType: { value: 'item' },
            rules: {value:[{t:"eq", v:""}]},
            checkall: { value: "true", required: true },
            outputs: { value: 1 }
        },
        inputs: 1,
        outputs: 1,
        icon: "function.png",
        label: function() {
            return this.name || "filter";
        },
        oneditprepare: function() {
            $("#node-input-outputs").spinner({
                min:1
            });

            $("#node-input-property").typedInput({ default: this.propertyType || 'msg', types: ['msg', 'flow', 'global'] });

            var updateFilterType = function() {
                if ($("#node-input-filter-type").prop('checked')) {
                    $("#node-input-item-property-row").show();
                }
                else {
                    $("#node-input-item-property-row").hide();
                }
            };
            $("#node-input-filter-type").change(updateFilterType);
            $("#node-input-filter-type").prop('checked', this.asArray);
            updateFilterType();

            var customType = {
                value: 'item',
                label: '____[i].',
                hasValue: true
            };
            $("#node-input-item-property").typedInput({ default: this.itemPropertyType || 'item', types: [customType, 'flow', 'global'] });
            $("#node-input-item-property").val(this.itemProperty);

            $("#node-input-rule-container")
                .css('min-height','250px')
                .css('min-width','450px')
                .editableList({
                    addItem: addItem,
                    resizeItem: resizeItem,
                    removable: true,
                    sortable: true
                });

            for (var i = 0; i < this.rules.length; i++) {
                var rule = this.rules[i];
                $("#node-input-rule-container").editableList('addItem', rule);
            }
        },
        oneditsave: function() {
            var node = this;
            node.propertyType = $("#node-input-property").typedInput('type');
            node.asArray = $("#node-input-filter-type").prop('checked');
            node.itemProperty = $("#node-input-item-property").typedInput('value');
            node.itemPropertyType = $("#node-input-item-property").typedInput('type');

            var rules = $("#node-input-rule-container").editableList('items');
            var node = this;
            node.rules= [];
            rules.each(function(i) {
                var rule = $(this);
                var type = rule.find("select").val();
                var r = {t:type};
                if (!(type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else")) {
                    if (type === "btwn") {
                        r.v = rule.find(".node-input-rule-btwn-value").typedInput('value');
                        r.vt = rule.find(".node-input-rule-btwn-value").typedInput('type');
                        r.v2 = rule.find(".node-input-rule-btwn-value2").typedInput('value');
                        r.v2t = rule.find(".node-input-rule-btwn-value2").typedInput('type');
                    } else {
                        r.v = rule.find(".node-input-rule-value").typedInput('value');
                        r.vt = rule.find(".node-input-rule-value").typedInput('type');
                    }
                    if (type === "regex") {
                        r.case = rule.find(".node-input-rule-case").prop("checked");
                    }
                }
                // TODO: Deal with bad input
                r.output = parseInt(rule.find('.node-input-rule-output-index').val());
                node.rules.push(r);
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
            var height = size.height;
            for (var i = 0; i < rows.size(); i++) {
                height -= $(rows[i]).outerHeight(true);
            }
            var editorRow = $("#dialog-form>div.node-input-rule-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            $("#node-input-rule-container").editableList('height',height);
        }
    });
</script>

<script type="text/x-red" data-template-name="filter">
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>

    <div class="form-row">
        <label for="node-input-outputs"><i class="fa fa-random"></i> Outputs</label>
        <input id="node-input-outputs" style="width: 60px;" value="1">
    </div>

    <div class="form-row">
        <label for="node-input-property">Property</label>
        <input type="text" id="node-input-property" style="width: 70%"/>
    </div>

    <div class="form-row">
        <label>&nbsp;</label>
        <input type="checkbox" id="node-input-filter-type" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-filter-type" style="width: 70%;">Filter as an array of messages</label>
    </div>

    <div class="form-row" id="node-input-item-property-row">
        <label>&nbsp;</label>
        <input type="text" id="node-input-item-property" style="width: 70%"/>
    </div>

    <div class="form-row node-input-rule-container-row">
        <ol id="node-input-rule-container"></ol>
    </div>

    <div class="form-row">
        <select id="node-input-checkall" style="width:100%; margin-right:5px;">
            <option value="true">checking all rules</option>
            <option value="false">stopping after first match (like an if-statement)</option>
        </select>
    </div>
</script>

<script type="text/x-red" data-help-name="filter">
    <p>A node that filters incoming message(s) based on configured rules.</p>
</script>