mirror of
				https://github.com/node-red/node-red.git
				synced 2025-03-01 10:36:34 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			224 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			224 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
| <!--
 | |
|   Copyright 2013, 2015 IBM Corp.
 | |
| 
 | |
|   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="switch">
 | |
|     <div class="form-row">
 | |
|         <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
 | |
|         <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
 | |
|     </div>
 | |
|     <div class="form-row">
 | |
|         <span data-i18n="switch.label.property"></span> msg.<input type="text" id="node-input-property" style="width: 200px;"/>
 | |
|     </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: 310px; 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="btn btn-mini" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
 | |
|     </div>
 | |
|     <div class="form-row">
 | |
|         <select id="node-input-checkall" style="width:100%; margin-right:5px;">
 | |
|             <option value="true" data-i18n="switch.checkall"></option>
 | |
|             <option value="false" data-i18n="switch.stopfirst"></option>
 | |
|         </select>
 | |
|     </div>
 | |
| </script>
 | |
| 
 | |
| <script type="text/x-red" data-help-name="switch">
 | |
|     <p>A simple function node to route messages based on its properties.</p>
 | |
|     <p>When a message arrives, the selected property is evaluated against each
 | |
|     of the defined rules. The message is then sent to the output of <i>all</i>
 | |
|     rules that pass.</p>
 | |
|     <p>Note: the <i>otherwise</i> rule applies as a "not any of" the rules preceding it.</p>
 | |
| </script>
 | |
| 
 | |
| <script type="text/javascript">
 | |
|     RED.nodes.registerType('switch', {
 | |
|         color: "#E2D96E",
 | |
|         category: 'function',
 | |
|         defaults: {
 | |
|             name: {value:""},
 | |
|             property: {value:"payload", required:true},
 | |
|             rules: {value:[{t:"eq", v:""}]},
 | |
|             checkall: {value:"true", required:true},
 | |
|             outputs: {value:1}
 | |
|         },
 | |
|         inputs: 1,
 | |
|         outputs: 1,
 | |
|         icon: "switch.png",
 | |
|         label: function() {
 | |
|             return this.name||"switch";
 | |
|         },
 | |
|         oneditprepare: function() {
 | |
| 
 | |
|             var operators = [
 | |
|                 {v:"eq",t:"=="},
 | |
|                 {v:"neq",t:"!="},
 | |
|                 {v:"lt",t:"<"},
 | |
|                 {v:"lte",t:"<="},
 | |
|                 {v:"gt",t:">"},
 | |
|                 {v:"gte",t:">="},
 | |
|                 {v:"btwn",t:this._("switch.rules.btwn")},
 | |
|                 {v:"cont",t:this._("switch.rules.cont")},
 | |
|                 {v:"regex",t:this._("switch.rules.regex")},
 | |
|                 {v:"true",t:this._("switch.rules.true")},
 | |
|                 {v:"false",t:this._("switch.rules.false")},
 | |
|                 {v:"null",t:this._("switch.rules.null")},
 | |
|                 {v:"nnull",t:this._("switch.rules.nnull")},
 | |
|                 {v:"else",t:this._("switch.rules.else")}
 | |
|             ];
 | |
| 
 | |
|             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);
 | |
|                 var row2 = $('<div/>',{style:"padding-top: 5px; text-align: right;"}).appendTo(container);
 | |
|                 $('<i style="color: #eee; cursor: move;" class="node-input-rule-handle fa fa-bars"></i>').appendTo(row);
 | |
| 
 | |
|                 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);
 | |
|                 var btwnField = $('<span/>').appendTo(row);
 | |
|                 var btwnValueField = $('<input/>',{class:"node-input-rule-btwn-value",type:"text",style:"margin-left: 5px; width: 50px;"}).appendTo(btwnField);
 | |
|                 btwnField.append(" and ");
 | |
|                 var btwnValue2Field = $('<input/>',{class:"node-input-rule-btwn-value2",type:"text",style:"width: 50px;margin-left:2px;"}).appendTo(btwnField);
 | |
| 
 | |
|                 var finalspan = $('<span/>',{style:"float: right; margin-top: 3px;margin-right: 10px;"}).appendTo(row);
 | |
|                 finalspan.append(' → <span class="node-input-rule-index">'+i+'</span> ');
 | |
| 
 | |
|                 var deleteButton = $('<a/>',{href:"#",class:"btn btn-mini", style:"margin-left: 5px;"}).appendTo(finalspan);
 | |
|                 $('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
 | |
| 
 | |
|                 selectField.change(function() {
 | |
|                     var type = selectField.children("option:selected").val();
 | |
|                     if (type.length < 4) {
 | |
|                         selectField.css({"width":"60px"});
 | |
|                     } else if (type === "regex") {
 | |
|                         selectField.css({"width":"147px"});
 | |
|                     } else {
 | |
|                         selectField.css({"width":"120px"});
 | |
|                     }
 | |
|                     if (type === "btwn") {
 | |
|                         valueField.hide();
 | |
|                         btwnField.show();
 | |
|                     } else {
 | |
|                         btwnField.hide();
 | |
|                         if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
 | |
|                             valueField.hide();
 | |
|                         } else {
 | |
|                             valueField.show();
 | |
|                         }
 | |
|                     }
 | |
|                 });
 | |
| 
 | |
| 
 | |
|                 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);
 | |
| 
 | |
|                 selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
 | |
|                 if (rule.t == "btwn") {
 | |
|                     btwnValueField.val(rule.v);
 | |
|                     btwnValue2Field.val(rule.v2);
 | |
|                 } else if (typeof rule.v != "undefined") {
 | |
|                     valueField.val(rule.v);
 | |
|                 }
 | |
|                 selectField.change();
 | |
|             }
 | |
| 
 | |
|             $("#node-input-add-rule").click(function() {
 | |
|                 generateRule($("#node-input-rule-container").children().length+1,{t:"",v:"",v2:""});
 | |
|                 $("#node-input-rule-container-div").scrollTop($("#node-input-rule-container-div").get(0).scrollHeight);
 | |
|             });
 | |
| 
 | |
|             for (var i=0;i<this.rules.length;i++) {
 | |
|                 var rule = this.rules[i];
 | |
|                 generateRule(i+1,rule);
 | |
|             }
 | |
| 
 | |
|             function switchDialogResize() {
 | |
|                 var rows = $("#dialog-form>div:not(.node-input-rule-container-row)");
 | |
|                 var height = $("#dialog-form").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-div").css("height",height+"px");
 | |
|             };
 | |
|             
 | |
|             $( "#node-input-rule-container" ).sortable({
 | |
|                 axis: "y",
 | |
|                 update: function( event, ui ) {
 | |
|                     var rules = $("#node-input-rule-container").children();
 | |
|                     rules.each(function(i) {
 | |
|                         $(this).find(".node-input-rule-index").html(i+1);
 | |
|                     });
 | |
|                 },
 | |
|                 handle:".node-input-rule-handle",
 | |
|                 cursor: "move"
 | |
|             });
 | |
|             $( "#node-input-rule-container .node-input-rule-handle" ).disableSelection();
 | |
| 
 | |
|             $( "#dialog" ).on("dialogresize", switchDialogResize);
 | |
|             $( "#dialog" ).one("dialogopen", function(ev) {
 | |
|                 var size = $( "#dialog" ).dialog('option','sizeCache-switch');
 | |
|                 if (size) {
 | |
|                     $("#dialog").dialog('option','width',size.width);
 | |
|                     $("#dialog").dialog('option','height',size.height);
 | |
|                     switchDialogResize();
 | |
|                 }
 | |
|             });
 | |
|             $( "#dialog" ).one("dialogclose", function(ev,ui) {
 | |
|                 $( "#dialog" ).off("dialogresize",switchDialogResize);
 | |
|             });
 | |
|         },
 | |
|         oneditsave: function() {
 | |
|             var rules = $("#node-input-rule-container").children();
 | |
|             var ruleset;
 | |
|             var node = this;
 | |
|             node.rules= [];
 | |
|             rules.each(function(i) {
 | |
|                 var rule = $(this);
 | |
|                 var type = rule.find("select option:selected").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").val();
 | |
|                         r.v2 = rule.find(".node-input-rule-btwn-value2").val();
 | |
|                     } else {
 | |
|                         r.v = rule.find(".node-input-rule-value").val();
 | |
|                     }
 | |
|                 }
 | |
|                 node.rules.push(r);
 | |
|             });
 | |
|             node.outputs = node.rules.length;
 | |
|         }
 | |
|     });
 | |
| </script>
 |