map.html

<!-- This is the config node for the mappings -->
<script type="text/x-red" data-template-name="map-config">
	<div class="form-row">
        <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-config-input-lhsName"><i class="icon-tag"></i> LHS Name</label>
        <input type="text" id="node-config-input-lhsName" placeholder="Left-hand side Name">
    </div>
	<div class="form-row">
        <label for="node-config-input-rhsName"><i class="icon-tag"></i> RHS Name</label>
        <input type="text" id="node-config-input-rhsName" placeholder="Right-hand side Name">
    </div>
    <div class="form-row node-config-input-mapping-container-row">
        <ol id="node-config-input-mapping-container"></ol>
    </div>
</script>

<script type="text/x-red" data-help-name="map-config">
<p>Configure mappings to be used by the various nodes provided by this plugin.</p> 

<h3>Details</h3>

The following properties can be configured on this configuration node:

<ul>
  <li><b>Name</b><br/>
     The name of this configuration node; this can be used to differentiate between
     different mapping configurations in your nodes. For example, if you have RfxCom 
     based flows, you could have a configuration named <i>RfxComIn</i> for mapping
     input device id's to friendly names, and a configuration named <i>RfxComOut</i>
     for mapping friendly device names to device id's.</li>
  <li><b>LHS Name</b><br/>
     The name of the left-hand side of the mappings. For example, if your left-hand 
     side of the mapping contains device id's (for input devices), you could set 
     this property to <i>Device id</i>. Likewise, if your left-hand side contains 
     device names (for output devices), you could set this property to 
     <i>Device name</i>.</li>
  <li><b>Rhs Name</b><br/>
     The name of the right-hand side of the mappings. For example, if your right-hand 
     side of the mapping contains device id's (for output devices), you could set this 
     property to <i>Device id</i>. Likewise, if your right-hand side contains device 
     names (for input devices), you could set this property to <i>Device name</i>.</li>
  <li><b>Mappings</b><br/>
     By using the <i>Add</i> and <i>Remove</i> buttons, you can modify the actual
     mappings. For example, for the <i>RfxComIn</i> configuration, the left-hand
     side of these mappings would contain the device id like 'AC/0x01010101/1',
     and the right-hand side would contain the device name like 'Motion Sensor 1'.
     Likewise, for the <i>RfxComOut</i> configuration, the left-hand side of these
     mappings would contain the device name like 'light-entrance', and the right-hand
     side would contain the device id like 'AC/0x02020202/1'.</li>
</ul>
</script>

<script type="text/javascript">
	RED.mapFunctions = {
		/**
		 * Find select by id based on given property name, determine current value based on
		 * given property name and node, then call updateLhsOrRhsSelect to update the select.
		 */
		updateLhsOrRhsSelectById: function(config, node, propertyName, readOnly) {
			RED.mapFunctions.updateLhsOrRhsSelect($('#node-input-'+propertyName), config, !node ? null : node[propertyName], readOnly);
		},
		/**
		 * This function will update the given select as follows:
	     * - Remove all previous options
	     * - Append the LHS and RHS options, based on lhsName and rhsName from the given config
	     * - Mark these options as disabled (display:none) if readOnly flag is set
	     * - Select an option based on the given selectedValue
		 */
		updateLhsOrRhsSelect: function(select, config, selectedValue, readOnly) {
			select.find('option').remove().end(); // Remove any old options
			select.append($("<option/>", {
 			    value: 'lhs',
 			    text: !config?'lhs':config.lhsName,
 			    css: readOnly ? {'display':'none'}:{}
 			}));
			select.append($("<option/>", {
 			    value: 'rhs',
 			    text: !config?'rhs':config.rhsName,
 			    css: readOnly ? {'display':'none'}:{}
 			}));
			if ( selectedValue ) {
				select.val(selectedValue);
			}
		},
		/**
		 * Find select by id based on given property name, determine current value based on
		 * given property name and node, then call updateMappingSelect to update the select.
		 */
		updateMappingSelectById: function(config, node, propertyName) {
			RED.mapFunctions.updateMappingSelect($('#node-input-'+propertyName), config, !node ? null : node[propertyName]);
		},
		/**
		 * This function will update the given select as follows:
	     * - Remove all previous options
	     * - Append an option for each mapping defined in the given config
	     * - Select an option based on the given selectedValue
		 */
		updateMappingSelect: function(select, config, selectedValue) {
			if (config) {
				select.find('option').remove().end(); // Remove any old options;
				$.each(config.mappings, function(i, mapping) {
		 			var $option = $("<option/>", {
		 			    value: mapping.lhs+"|"+mapping.rhs,
		 			    text: mapping.lhs+' - '+mapping.rhs
		 			});
		 			select.append($option);
				});
				if ( selectedValue ) {
					select.val(selectedValue);
				}
			}
		}
	}

    RED.nodes.registerType('map-config', {
        category: 'config',
        defaults: {
        	name: {value:"", required:true},
        	lhsName: {value:"lhs", required:true},
        	rhsName: {value:"rhs", required:true},
        	mappings: {value:[{lhs:"lhs", rhs:"rhs"}]}
        },
        label: function () {
            return this.name;
        },
        oneditprepare: function() {
            var node = this;
            $("#node-config-input-mapping-container").css('min-height','250px').css('min-width','450px').editableList({
                addItem: function(container,i,opt) {
                	var mapping = opt.mapping || {lhs:node.lhsName, rhs:node.rhsName};
                    container.css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    });
                    var row = $('<div/>').appendTo(container);
                    var lhsField = $('<input/>',{class:"node-config-input-mapping-lhs",type:"text",style:"width:40%; margin-left: 5px;"}).appendTo(row).val(mapping.lhs);
                    var rhsField = $('<input/>',{class:"node-config-input-mapping-rhs",type:"text",style:"width:40%; margin-left: 5px;"}).appendTo(row).val(mapping.rhs);
                },
                sortable: true,
                removable: true
            });

            for (var i=0;i<node.mappings.length;i++) {
                var mapping = node.mappings[i];
                $("#node-config-input-mapping-container").editableList('addItem',{mapping:mapping,i:i});
            }
        },
        oneditsave: function() {
            var mappings = $("#node-config-input-mapping-container").editableList('items');
            var node = this;
            node.mappings = [];
            mappings.each(function(i) {
                var mapping = $(this);
                var r = {};
                r.lhs = mapping.find(".node-config-input-mapping-lhs").val();
                r.rhs = mapping.find(".node-config-input-mapping-rhs").val();
                node.mappings.push(r);
            });
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-config-input-mapping-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-config-input-mapping-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            $("#node-config-input-mapping-container").editableList('height',height);
        }
    });
</script>




<!-- This node allows for mapping message properties -->
<script type="text/x-red" data-template-name="map-map">
	<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 node-input-config">
        <label for="node-input-config"><i class="icon-bullhorn"></i> Config</label>
        <input type="text" id="node-input-config">
    </div>
    <hr/>
	<div class="form-row">
        <label for="node-input-inLhsOrRhs"><i class="fa fa-ellipsis-h"></i> Get</label>
		<select id="node-input-inLhsOrRhs"></select>
	</div>
	<div class="form-row">
		<label for="node-input-in"><i class="fa fa-ellipsis-h"></i> From</label>
        <input type="text" id="node-input-in" placeholder="payload">
        <input type="hidden" id="node-input-inType">
    </div>
    <hr/>
	<div class="form-row">
        <label for="node-input-outLhsOrRhs"><i class="fa fa-ellipsis-h"></i> Set</label>
		<select id="node-input-outLhsOrRhs" style="background: #eee;cursor:no-drop;"></select>
	</div>
	<div class="form-row">
		<label for="node-input-out"><i class="fa fa-ellipsis-h"></i> On</label>
        <input type="text" id="node-input-out" placeholder="payload">
        <input type="hidden" id="node-input-outType">
    </div>
	<hr/>
	<div class="form-row">
        <input type="checkbox" id="node-input-caseInsensitive" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-caseInsensitive" style="width:90%"><i class="fa fa-tag"></i> Ignore Case</label>
    </div>
	<div class="form-row">
        <input type="checkbox" id="node-input-forwardIfNoMatch" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-forwardIfNoMatch" style="width:90%"><i class="fa fa-tag"></i> Forward message if no matching mapping is found</label>
    </div>
	<div class="form-row" id="row-defaultIfNoMatch">
        <label for="node-input-defaultIfNoMatch" style="padding-left:20px"><i class="icon-bullhorn"></i> Output value</label>
        <input type="text" id="node-input-defaultIfNoMatch">
    </div>
</script>

<!-- Help text for map -->
<script type="text/x-red" data-help-name="map-map">
<p>Map a message input property to a message output property based on the configured mappings.</p>

<p>
For example, configured with a mapping between device id's and corresponding
device names, for each incoming message this node can look up the device id
from a configurable message property, and add the corresponding device name 
to the outgoing message.
</p>

<h3>Details</h3>

The following properties can be configured on this node:

<ul>
  <li><b>Name</b><br/>
     The name of this node.</li>
  <li><b>Config</b><br/>
     The mapping configuration to use.</li>
  <li><b>Get</b><br/>
     Specify whether the incoming message contains values from the left-hand side or 
     right-hand side of the configured mappings.
     The options in this select box show the <i>LHS Name</i> and <i>RHS Name</i> as 
     defined in the mapping configuration, for example allowing you to select whether 
     the incoming message contains a 'device id' or 'device name'.</li>
  <li><b>From</b><br/>
     Specify from which property on the incoming message to retrieve the value to be 
     mapped. For example, this could contain something like <code>msg.topic</code>, 
     <code>msg.topicName</code>, <code>msg.payload</code>, <code>msg.deviceId</code>, 
     or <code>msg.deviceName</code>.</li>
  <li><b>Set</b><br/>
     Specify whether the left-hand side or right-hand side of the configured mappings 
     should be added to the outgoing message. You cannot change this setting; 
     if <i>Get</i> is configured to use the left-hand side of the mapping, then this 
     property will be set to the right-hand side of the mapping, and vice versa.</li>
  <li><b>On</b><br/>
     Specify to which property on the outgoing message the mapped value should be written. 
     For example, this could contain something like <code>msg.topic</code>, 
     <code>msg.topicName</code>, <code>msg.payload</code>, <code>msg.deviceId</code>, 
     or <code>msg.deviceName</code>.</li>
  <li><b>Ignore Case</b><br/>
     If enabled, the node will use a case-insensitive look-up of the incoming message 
     property value in the configured mappings. For example, an incoming message  
     containing 'LIGHT' as the device name will be matched against a mapping containing
     'light' as the device name if this setting is enabled, but will not be matched if 
     this setting is disabled.</li>
  <li><b>Forward message if no matching mapping is found</b><br/>
     If disabled, no message will be forwarded to subsequent nodes if no mapping can be found
     for a given input message value. If enabled, you can configure a default value to
     be added to the outgoing message in case no mapping can be found. </li>
  <li><b>Output Value</b><br/>
     In case no mapping can be found for a given input message value, this property defined
     the value to be written to the outgoing message. This default value can reference
     message properties using Mustache template syntax, for example <i>Unknown: {{{topic}}}</i>.
     This value will be written to the outgoing message property defined in the <b>On</b> configuration
     option.</li>
</ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('map-map', {
        category: 'mappings',
        paletteLabel: 'map',
        defaults: {
            name: {value:""},
            config: {value:"", type:"map-config", required:true},
            in: {value:"payload", validate:RED.validators.typedInput("inType"), required:true},
            inType: {value:"msg", required:true},
            inLhsOrRhs: {value:"lhs", required:true},
            out: {value:"payload", validate:RED.validators.typedInput("outType"), required:true},
            outType: {value:"msg", required:true},
            outLhsOrRhs: {value:"rhs", required:true},
        	caseInsensitive: {value:true},
        	forwardIfNoMatch: {value:true},
        	defaultIfNoMatch: {value:"Unknown: {{{payload}}}"}
        },
        color:"#E2D96E",
        inputs:1,
        outputs:1,
        icon: "swap.png",
        label: function () {
            return this.name || "Map";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
        	var node = this;
            if (!node.in) {
                node.in = 'payload';
                $("#node-input-in").val("payload");
            }
            if (!node.inType) {
                node.inType = 'msg';
            }
            if (!node.inLhsOrRhs) {
            	node.inLhsOrRhs = 'lhs';
            }
            
            $("#node-input-in").typedInput({
                default: 'msg',
                types: ['msg'],
                typeField: $("#node-input-inType")
            });
            if (!node.out) {
                node.out = 'payload';
                $("#node-input-out").val("payload");
            }
            if (!node.outType) {
                node.outType = 'msg';
            }
            
            $("#node-input-out").typedInput({
                default: 'msg',
                types: ['msg'],
                typeField: $("#node-input-outType")
            });
            
            $('#node-input-inLhsOrRhs').change(function() {
            	$('#node-input-outLhsOrRhs').val( $(this).val()==='rhs' ? 'lhs' : 'rhs' );
            });
            $("#node-input-config").change(function() {
            	var config = RED.nodes.node($(this).val());
            	RED.mapFunctions.updateLhsOrRhsSelectById(config, node, "inLhsOrRhs", false);
            	RED.mapFunctions.updateLhsOrRhsSelectById(config, node, "outLhsOrRhs", true);
            	$('#node-input-inLhsOrRhs').change();
            });
            
            $("#node-input-config").change();
            
            $("#node-input-forwardIfNoMatch").change(function() {
            	if ( $(this).is(":checked") ) {
            		$("#row-defaultIfNoMatch").show();
            	} else {
            		$("#row-defaultIfNoMatch").hide();
            	}
            });
            
            $("#node-input-forwardIfNoMatch").change();
            
            $('#node-input-in').data('prev-val', $('#node-input-in').val());

            $('#node-input-in').change(function(){
                var prev = $(this).data('prev-val');
                var current = $(this).val();
                var defaultIfNoMatchElt = $("#node-input-defaultIfNoMatch");
                if (defaultIfNoMatchElt.val()==='Unknown: {{{'+prev+'}}}') {
                	defaultIfNoMatchElt.val('Unknown: {{{'+current+'}}}');
                }
                $('#node-input-in').data('prev-val', current);
            });
            
        }

    });
</script>




<!-- This node allows for setting a message property based on a given mapping -->
<script type="text/x-red" data-template-name="map-set">
	<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 node-input-config">
        <label for="node-input-config"><i class="icon-bullhorn"></i> Config</label>
        <input type="text" id="node-input-config">
    </div>
    <hr/>
	<div class="form-row">
		<label for="node-input-from"><i class="fa fa-ellipsis-h"></i> From</label>
        <select id="node-input-from" style="width:250px;"></select>
    </div>
	<div class="form-row">
        <label for="node-input-outLhsOrRhs"><i class="fa fa-ellipsis-h"></i> Set</label>
		<select id="node-input-outLhsOrRhs" style="width:250px;"></select>
	</div>
	<div class="form-row">
		<label for="node-input-out"><i class="fa fa-ellipsis-h"></i> On</label>
        <input type="text" id="node-input-out" placeholder="payload" style="width:250px;">
        <input type="hidden" id="node-input-outType">
    </div>
</script>

<!-- Help text for map -->
<script type="text/x-red" data-help-name="map-set">
<p>Set a message output property based on the configured mapping.</p>

<p>
For example, configured with a mapping between device id's and corresponding
device names, this node can add either the device id or device name for a
specific device to every incoming message.
</p>

<p>
Within a flow, this allows for selecting a specific device from the list of
configured mappings, for example to send a command to that specific device.
</p>

<h3>Details</h3>

The following properties can be configured on this node:

<ul>
  <li><b>Name</b><br/>
     The name of this node.</li>
  <li><b>Config</b><br/>
     The mapping configuration to use.</li>
  <li><b>From</b><br/>
     Select the mapping from which to retrieve either the right-hand side or left-hand side 
     value to be added to the outgoing message.</li>
  <li><b>Set</b><br/>
     Specify whether the left-hand side or right-hand side of the selected mapping should
     be added to the outgoing message. For example, given the example above,
     this property allows for specifying whether you want to add either the <i>device id</i>
     or <i>device name</i> to the outgoing message.</li>
  <li><b>On</b><br/>
     Specify to which property on the outgoing message the value should be written. 
     For example, this could contain something like <code>msg.topic</code>, 
     <code>msg.topicName</code>, <code>msg.payload</code>, <code>msg.deviceId</code>, 
     or <code>msg.deviceName</code>.</li>
</ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('map-set', {
        category: 'mappings',
        paletteLabel: 'set',
        defaults: {
            name: {value:""},
            config: {value:"", type:"map-config", required:true},
            from: {value:"", required:true},
            out: {value:"payload", validate:RED.validators.typedInput("outType"), required:true},
            outType: {value:"msg", required:true},
            outLhsOrRhs: {value:"rhs", required:true}
        },
        color:"#E2D96E",
        inputs:1,
        outputs:1,
        icon: "swap.png",
        label: function () {
            return this.name || "Set";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
        	var node = this;
            
            if (!node.out) {
                node.out = 'payload';
                $("#node-input-out").val("payload");
            }
            if (!node.outType) {
                node.outType = 'msg';
            }
            if (!node.outLhsOrRhs) {
            	node.outLhsOrRhs = 'rhs';
            }
            
            $("#node-input-out").typedInput({
                default: 'msg',
                types: ['msg'],
                typeField: $("#node-input-outType")
            });
            
            $("#node-input-config").change(function() {
            	var config = RED.nodes.node($(this).val());
            	RED.mapFunctions.updateLhsOrRhsSelectById(config, node, "outLhsOrRhs", false);
            	RED.mapFunctions.updateMappingSelectById(config, node, "from");
            });
            
            $("#node-input-config").change();
            
        }

    });
</script>



<!-- This node provides a switch implementation for a given mapping configuration -->
<script type="text/x-red" data-template-name="map-switch">
	<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">
		<input type="hidden" id="node-input-outputs"/>
    </div>
    <div class="form-row node-input-config">
        <label for="node-input-config"><i class="icon-bullhorn"></i> Config</label>
        <input type="text" id="node-input-config">
    </div>
	<hr/>
	<div class="form-row">
        <label for="node-input-inLhsOrRhs"><i class="fa fa-ellipsis-h"></i> Get</label>
		<select id="node-input-inLhsOrRhs"></select>
	</div>
	<div class="form-row">
		<label for="node-input-in"><i class="fa fa-ellipsis-h"></i> From</label>
        <input type="text" id="node-input-in" placeholder="payload">
        <input type="hidden" id="node-input-inType">
    </div>
    <hr/>
	<div class="form-row">
        <label for="node-input-outLhsOrRhs"><i class="fa fa-ellipsis-h"></i> Output Name</label>
		<select id="node-input-outLhsOrRhs"></select>
	</div>
    <hr/>
	<div class="form-row node-input-switch-container-row">
        <ol id="node-input-switch-container"></ol>
    </div>
	<div class="form-row">
        <input type="checkbox" id="node-input-caseInsensitive" style="display: inline-block; width: auto; vertical-align: top;">
		<label for="node-input-caseInsensitive" style="width:90%"><i class="fa fa-tag"></i> Ignore Case</label>
    </div>
</script>

<!-- Help text for map -->
<script type="text/x-red" data-help-name="map-switch">
<p>Route messages by matching an input message property against the configured mappings.</p>

<p>
For example, configured with a mapping between device id's and corresponding
device names, this node can route incoming messages to different outputs, based
on the device id (or device name) specified in the incoming message.
<p>

<h3>Details</h3>

The following properties can be configured on this node:

<ul>
  <li><b>Name</b><br/>
     The name of this node.</li>
  <li><b>Config</b><br/>
     The mapping configuration to use.</li>
  <li><b>Get</b><br/>
     Specify whether the incoming message contains values from the left-hand side or 
     right-hand side of the configured mappings.
     The options in this select box show the <i>LHS Name</i> and <i>RHS Name</i> as 
     defined in the mapping configuration, for example allowing you to select whether 
     the incoming message contains a 'device id' or 'device name'.</li>
  <li><b>From</b><br/>
     Specify from which property on the incoming message to retrieve the value on which 
     the switch should be performed. For example, this could contain something like 
     <code>msg.topic</code>, <code>msg.topicName</code>, <code>msg.payload</code>, 
     <code>msg.deviceId</code>, or <code>msg.deviceName</code>.</li>
  <li><b>Output Name</b><br/>
     Specify whether the switch output label (as shown in the flow editor) should show
     the left-hand side or right-hand side of the configured mapping. Given the
     example above, the output label could show either the device id or device name.</li>
  <li><b>Switch List</b><br/>
     By using the <i>Add</i> and <i>Remove</i> buttons, you can add switch outputs
     matching the given mapping.</li>
  <li><b>Ignore Case</b><br/>
     If enabled, the node will use a case-insensitive look-up of the incoming message 
     property value in the configured mappings. For example, an incoming message  
     containing 'LIGHT' as the device name will be matched against a mapping containing
     'light' as the device name if this setting is enabled, but will not be matched if 
     this setting is disabled.</li>
</ul>
</script>

<script type="text/javascript">
    RED.nodes.registerType('map-switch', {
        category: 'mappings',
        paletteLabel: 'switch',
        defaults: {
            name: {value:""},
            config: {value:"", type:"map-config", required:true},
            outLhsOrRhs: {value:"rhs", required:true},
            in: {value:"payload", validate:RED.validators.typedInput("inType"), required:true},
            inType: {value:"msg", required:true},
            inLhsOrRhs: {value:"lhs", required:true},
            caseInsensitive: {value:true},
            switchValues: {value:[]},
            outputs: {value:1}
        },
        color:"#E2D96E",
        inputs:1,
        outputs:1,
        icon: "switch.png",
        label: function () {
            return this.name || "Switch";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function() {
        	var node = this;
        	
            if (!node.in) {
                node.in = 'payload';
                $("#node-input-in").val("payload");
            }
            if (!node.inType) {
                node.inType = 'msg';
            }
            if (!node.inLhsOrRhs) {
            	node.inLhsOrRhs = 'lhs';
            }
            
            $("#node-input-in").typedInput({
                default: 'msg',
                types: ['msg'],
                typeField: $("#node-input-inType")
            });
            if (!node.outLhsOrRhs) {
            	node.outLhsOrRhs = 'rhs';
            }
            
            $("#node-input-out").typedInput({
                default: 'msg',
                types: ['msg'],
                typeField: $("#node-input-outType")
            });
            
            $("#node-input-switch-container").css('min-height','250px').css('min-width','450px').editableList({
                addItem: function(container,i,opt) {
                	var config = RED.nodes.node($("#node-input-config").val());
                	var mappings = config.mappings || [];
                	var switchValue = opt.switchValue;
                    container.css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    });
                    var row = $('<div/>').appendTo(container);
                    var select = $('<select/>',{class:"node-input-switch-select",type:"text",style:"width:80%; margin-left: 5px;"}).appendTo(row);
                    RED.mapFunctions.updateMappingSelect(select, config, switchValue);
                    var finalspan = $('<span/>',{style:"float: right;margin-top: 6px;"}).appendTo(row);
                    finalspan.append(' &#8594; <span class="node-config-input-mapping-index">'+(i+1)+'</span> ');
                },
                removeItem: function(item) {
                	var mappingRows = $("#node-input-switch-container").editableList('items');
                	mappingRows.each(function(i,item) {
                        item.find(".node-config-input-mapping-index").html(i+1);
                    });
                },
                sortItems: function(items) {
                    items.each(function(i,item) {
                        item.find(".node-config-input-mapping-index").html(i+1);
                    });
                },
                sortable: true,
                removable: true
            });
            
            $("#node-input-config").change(function() {
            	var config = RED.nodes.node($(this).val());
            	RED.mapFunctions.updateLhsOrRhsSelectById(config, node, "inLhsOrRhs", false);
            	RED.mapFunctions.updateLhsOrRhsSelectById(config, node, "outLhsOrRhs", false);
            	if (config) {
	                if (node.switchValues) {
	                	var container = $("#node-input-switch-container");
	                	container.editableList('empty');
	    	            for (var i=0;i<node.switchValues.length;i++) {
	    	                var switchValue = node.switchValues[i];
	    	                container.editableList('addItem',{switchValue:switchValue,i:i});
	    	            }
	            	}
            	}
            });
            
            $("#node-input-config").change();
        },
        oneditsave: function() {
            var outputsContainer = $("#node-input-switch-container").editableList('items');
            var node = this;
            node.switchValues = [];
            outputsContainer.each(function(i) {
                var value = $(this).find(".node-input-switch-select").val();
                node.switchValues.push(value);
            });
            
            $("#node-input-outputs").val(node.switchValues.length);
        },
        oneditresize: function(size) {
            var rows = $("#dialog-form>div:not(.node-input-switch-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-switch-container-row");
            height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
            $("#node-input-switch-container").editableList('height',height);
        },
        outputLabels: function(index) {
        	var node = this;
            var switchValue = node&&node.switchValues ? node.switchValues[index] : null;
            var label = "";
            if (switchValue) {
            	var config = RED.nodes.node(node.config);
            	var mappings = config.mappings || [];
            	var mapping = mappings.find(function(mapping) {
		    		return mapping.lhs+'|'+mapping.rhs===switchValue;
		    	});
		    	if (mapping) {
            		label = mapping[node.outLhsOrRhs];
		    	}
                return label;
            }
        },

    });
</script>