mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
Add editableList widget and update Switch/Change nodes to use it
This commit is contained in:
Nick O'Leary
parent
2f6ed47168
commit
291240dd94
@ -126,7 +126,8 @@ module.exports = function(grunt) {
|
||||
"editor/js/ui/notifications.js",
|
||||
"editor/js/ui/subflow.js",
|
||||
"editor/js/ui/touch/radialMenu.js",
|
||||
"editor/js/ui/typedInput.js"
|
||||
"editor/js/ui/typedInput.js",
|
||||
"editor/js/ui/editableList.js"
|
||||
],
|
||||
dest: "public/red/red.js"
|
||||
},
|
||||
|
||||
130
editor/js/ui/editableList.js
Normal file
130
editor/js/ui/editableList.js
Normal file
@ -0,0 +1,130 @@
|
||||
/**
|
||||
* Copyright 2016 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.
|
||||
**/
|
||||
(function($) {
|
||||
|
||||
$.widget( "nodered.editableList", {
|
||||
_create: function() {
|
||||
var that = this;
|
||||
|
||||
this.element.addClass('red-ui-editableList-list');
|
||||
this.uiWidth = this.element.width();
|
||||
this.uiContainer = this.element
|
||||
.wrap( "<div>" )
|
||||
.parent();
|
||||
this.topContainer = this.uiContainer.wrap("<div>").parent();
|
||||
|
||||
this.topContainer.addClass('red-ui-editableList');
|
||||
|
||||
var addLabel = "foo";
|
||||
if (RED && RED._) {
|
||||
addLabel = RED._("editableList.add");
|
||||
}
|
||||
|
||||
var addButton = $('<a href="#" class="editor-button editor-button-small" style="margin-top: 4px;"><i class="fa fa-plus"></i> '+addLabel+'</a>').appendTo(this.topContainer);
|
||||
addButton.click(function(evt) {
|
||||
evt.preventDefault();
|
||||
that.addItem({});
|
||||
});
|
||||
|
||||
this.uiContainer.addClass("red-ui-editableList-container");
|
||||
|
||||
this.uiHeight = this.element.height();
|
||||
|
||||
var minHeight = this.element.css("minHeight");
|
||||
if (minHeight !== '0px') {
|
||||
this.uiContainer.css("minHeight",minHeight);
|
||||
this.element.css("minHeight",0);
|
||||
}
|
||||
|
||||
if (this.options.sortable) {
|
||||
this.element.sortable({
|
||||
axis: "y",
|
||||
update: function( event, ui ) {
|
||||
if (that.options.updateOrder) {
|
||||
that.options.updateOrder(that.items());
|
||||
}
|
||||
},
|
||||
handle:".red-ui-editableList-item-handle",
|
||||
cursor: "move"
|
||||
});
|
||||
}
|
||||
|
||||
this._resize();
|
||||
|
||||
// this.menu = this._createMenu(this.types, function(v) { that.type(v) });
|
||||
// this.type(this.options.default||this.types[0].value);
|
||||
},
|
||||
_resize: function() {
|
||||
var currentFullHeight = this.topContainer.height();
|
||||
var innerHeight = this.uiContainer.height();
|
||||
var delta = currentFullHeight - innerHeight;
|
||||
this.uiContainer.height(this.uiHeight-delta);
|
||||
if (this.options.resize) {
|
||||
this.options.resize();
|
||||
}
|
||||
if (this.options.resizeItem) {
|
||||
var that = this;
|
||||
this.element.children().each(function(i) {
|
||||
that.options.resizeItem($(this).find(".red-ui-editableList-item-content"));
|
||||
});
|
||||
}
|
||||
},
|
||||
_destroy: function() {
|
||||
},
|
||||
width: function(desiredWidth) {
|
||||
this.uiWidth = desiredWidth;
|
||||
this._resize();
|
||||
},
|
||||
height: function(desiredHeight) {
|
||||
this.uiHeight = desiredHeight;
|
||||
this._resize();
|
||||
},
|
||||
addItem: function(data) {
|
||||
var that = this;
|
||||
data = data || {};
|
||||
var li = $('<li>').appendTo(this.element);
|
||||
li.data('data',data);
|
||||
var row = $('<div/>').addClass("red-ui-editableList-item-content").appendTo(li);
|
||||
if (this.options.sortable) {
|
||||
$('<i class="red-ui-editableList-item-handle fa fa-bars"></i>').appendTo(li);
|
||||
li.addClass("red-ui-editableList-item-sortable");
|
||||
}
|
||||
if (this.options.deletable) {
|
||||
var deleteButton = $('<a/>',{href:"#",class:"red-ui-editableList-item-delete editor-button editor-button-small"}).appendTo(li);
|
||||
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
|
||||
li.addClass("red-ui-editableList-item-deletable");
|
||||
deleteButton.click(function() {
|
||||
li.addClass("red-ui-editableList-item-deleting")
|
||||
li.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
if (that.options.deleteItem) {
|
||||
that.options.deleteItem(li.data('data'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
if (this.options.addItem) {
|
||||
var index = that.element.children().length-1;
|
||||
setTimeout(function() {
|
||||
that.options.addItem(row,index,data);
|
||||
},0);
|
||||
}
|
||||
},
|
||||
items: function() {
|
||||
return this.element.children().map(function(i) { return $(this).find(".red-ui-editableList-item-content"); });
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
67
editor/sass/editableList.scss
Normal file
67
editor/sass/editableList.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/**
|
||||
* Copyright 2016 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.
|
||||
**/
|
||||
|
||||
|
||||
.red-ui-editableList-container {
|
||||
min-height: 200px;
|
||||
border: 1px solid $form-input-border-color;
|
||||
border-radius: 4px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
overflow-y:scroll;
|
||||
|
||||
.red-ui-editableList-list {
|
||||
list-style-type:none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
margin:0;
|
||||
padding:8px 0px;
|
||||
border-bottom: 1px solid $secondary-border-color;
|
||||
|
||||
.red-ui-editableList-item-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
margin-top: -7px;
|
||||
color: #eee;
|
||||
cursor: move;
|
||||
}
|
||||
.red-ui-editableList-item-delete {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
margin-top: -9px;
|
||||
}
|
||||
//.red-ui-editableList-item-content { outline: 1px solid red}
|
||||
|
||||
&.red-ui-editableList-item-sortable .red-ui-editableList-item-content {
|
||||
margin-left: 22px;
|
||||
}
|
||||
&.red-ui-editableList-item-deletable .red-ui-editableList-item-content {
|
||||
margin-right: 28px;
|
||||
}
|
||||
&.red-ui-editableList-item-deleting {
|
||||
background: #fee;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -42,6 +42,7 @@
|
||||
@import "flow";
|
||||
|
||||
@import "typedInput";
|
||||
@import "editableList";
|
||||
|
||||
@import "dragdrop";
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<!--
|
||||
Copyright 2013, 2015 IBM Corp.
|
||||
Copyright 2013, 2016 IBM Corp.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
@ -22,13 +22,8 @@
|
||||
<div class="form-row">
|
||||
<span data-i18n="switch.label.property"></span> <input type="text" id="node-input-property" style="width: 300px;"/>
|
||||
</div>
|
||||
<div class="form-row node-input-rule-container-row" style="margin-bottom: 0px;">
|
||||
<div id="node-input-rule-container-div" style="min-height: 200px; 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="editor-button editor-button-small" id="node-input-add-rule" style="margin-top: 4px;"><i class="fa fa-plus"></i> <span data-i18n="switch.label.rule"></span></a>
|
||||
<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;">
|
||||
@ -89,9 +84,10 @@
|
||||
var andLabel = this._("switch.and");
|
||||
var caseLabel = this._("switch.ignorecase");
|
||||
|
||||
this.resizeRule = function(rule,newWidth) {
|
||||
function resizeRule(rule) {
|
||||
var newWidth = rule.width();
|
||||
var selectField = rule.find("select");
|
||||
var type = selectField.children("option:selected").val();
|
||||
var type = selectField.children("option:selected").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");
|
||||
@ -104,129 +100,99 @@
|
||||
selectWidth = 120;
|
||||
}
|
||||
selectField.width(selectWidth);
|
||||
|
||||
if (type === "btwn") {
|
||||
var labelWidth = rule.find(".node-input-rule-btwn-label").width();
|
||||
btwnField1.typedInput("width",(newWidth-selectWidth-120));
|
||||
btwnField2.typedInput("width",(newWidth-selectWidth-120));
|
||||
btwnField1.typedInput("width",(newWidth-selectWidth-80));
|
||||
btwnField2.typedInput("width",(newWidth-selectWidth-80));
|
||||
} else {
|
||||
if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
|
||||
// valueField.hide();
|
||||
} else {
|
||||
valueField.typedInput("width",(newWidth-selectWidth-120));
|
||||
valueField.typedInput("width",(newWidth-selectWidth-80));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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; padding-left: 175px;"}).appendTo(container);
|
||||
var row3 = $('<div/>',{style:"padding-top: 5px; padding-left: 120px;"}).appendTo(container);
|
||||
$("#node-input-rule-container").css('min-height','300px').css('min-width','450px').editableList({
|
||||
addItem: function(container,i,opt) {
|
||||
var rule = opt||{t:"",v:"",v2:""};
|
||||
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 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 finalspan = $('<span/>',{style:"float: right;margin-top: 6px;margin-right: 10px;"}).appendTo(row);
|
||||
finalspan.append(' → <span class="node-input-rule-index">'+(i+1)+'</span> ');
|
||||
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() {
|
||||
resizeRule(container);
|
||||
var type = selectField.children("option:selected").val();
|
||||
|
||||
$('<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).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 finalspan = $('<span/>',{style:"float: right;margin-right: 10px;"}).appendTo(row);
|
||||
finalspan.append(' → <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);
|
||||
|
||||
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() {
|
||||
var width = $("#node-input-rule-container").width();
|
||||
var type = selectField.children("option:selected").val();
|
||||
node.resizeRule(container,width);
|
||||
if (type === "btwn") {
|
||||
valueField.parent().hide();
|
||||
btwnValueField.parent().show();
|
||||
} else {
|
||||
btwnValueField.parent().hide();
|
||||
if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
|
||||
if (type === "btwn") {
|
||||
valueField.parent().hide();
|
||||
btwnValueField.parent().show();
|
||||
} else {
|
||||
valueField.parent().show();
|
||||
btwnValueField.parent().hide();
|
||||
if (type === "true" || type === "false" || type === "null" || type === "nnull" || type === "else") {
|
||||
valueField.parent().hide();
|
||||
} else {
|
||||
valueField.parent().show();
|
||||
}
|
||||
}
|
||||
if (type === "regex") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
} else if (type === "btwn"){
|
||||
row2.hide();
|
||||
row3.show();
|
||||
} else {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
}
|
||||
}
|
||||
if (type === "regex") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
} else if (type === "btwn"){
|
||||
row2.hide();
|
||||
row3.show();
|
||||
} else {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
}
|
||||
});
|
||||
|
||||
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.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();
|
||||
}
|
||||
|
||||
$("#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);
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
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();
|
||||
},
|
||||
deleteItem: function(opt) {
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
|
||||
},
|
||||
resizeItem: resizeRule,
|
||||
updateOrder: function(rules) {
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
rules.each(function(i) { $(this).find(".node-input-rule-index").html(i+1); });
|
||||
},
|
||||
sortable: true,
|
||||
deletable: true
|
||||
});
|
||||
|
||||
for (var i=0;i<this.rules.length;i++) {
|
||||
var rule = this.rules[i];
|
||||
generateRule(i+1,rule);
|
||||
$("#node-input-rule-container").editableList('addItem',rule);
|
||||
}
|
||||
|
||||
$( "#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();
|
||||
},
|
||||
oneditsave: function() {
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
var ruleset;
|
||||
var node = this;
|
||||
node.rules= [];
|
||||
@ -261,14 +227,7 @@
|
||||
}
|
||||
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");
|
||||
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
var node = this;
|
||||
rules.each(function(i) {
|
||||
node.resizeRule($(this),newWidth);
|
||||
})
|
||||
$("#node-input-rule-container").editableList('height',height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -22,13 +22,8 @@
|
||||
<div class="form-row" style="margin-bottom:0;">
|
||||
<label><i class="fa fa-list"></i> <span data-i18n="change.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="min-height: 200px; box-sizing:border-box; border-radius:5px; height:300px; 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="change.label.rule"></span></a>
|
||||
<div class="form-row node-input-rule-container-row">
|
||||
<ol id="node-input-rule-container"></ol>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
@ -106,123 +101,117 @@
|
||||
var replace = this._("change.action.replace");
|
||||
var regex = this._("change.label.regex");
|
||||
|
||||
function generateRule(rule) {
|
||||
if (rule.t === "change" && rule.re) {
|
||||
rule.fromt = 're';
|
||||
delete rule.re;
|
||||
}
|
||||
if (rule.t === "set" && !rule.tot) {
|
||||
if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
|
||||
rule.to = rule.to.substring(4);
|
||||
rule.tot = "msg";
|
||||
} else {
|
||||
rule.tot = "str";
|
||||
}
|
||||
}
|
||||
if (rule.t === "move" && !rule.tot) {
|
||||
rule.tot = "msg";
|
||||
}
|
||||
function resizeRule(rule) {
|
||||
var newWidth = rule.width();
|
||||
rule.find('.red-ui-typedInput').typedInput("width",newWidth-150);
|
||||
|
||||
var container = $('<li/>',{style:"background:#fff; margin:0; padding:8px 0px; border-bottom:1px solid #ccc;"});
|
||||
var row1 = $('<div/>').appendTo(container);
|
||||
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
|
||||
var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
|
||||
var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
|
||||
for (var i=0;i<4;i++) {
|
||||
selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
|
||||
}
|
||||
|
||||
var propertyName = $('<input/>',{style:"width:250px",class:"node-input-rule-property-name",type:"text"})
|
||||
.appendTo(row1)
|
||||
.typedInput({types:['msg','flow','global']});
|
||||
var finalspan = $('<span/>',{style:"float:right; margin-right:10px;"})
|
||||
.appendTo(row1);
|
||||
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);
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row2);
|
||||
var propertyValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-value",type:"text"})
|
||||
.appendTo(row2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','date']});
|
||||
|
||||
var row3_1 = $('<div/>').appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(search)
|
||||
.appendTo(row3_1);
|
||||
var fromValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-search-value",type:"text"})
|
||||
.appendTo(row3_1)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','re','num','bool']});
|
||||
|
||||
var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(replace)
|
||||
.appendTo(row3_2);
|
||||
var toValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-replace-value",type:"text"})
|
||||
.appendTo(row3_2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row4);
|
||||
var moveValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-move-value",type:"text"})
|
||||
.appendTo(row4)
|
||||
.typedInput({default:'msg',types:['msg','flow','global']});
|
||||
|
||||
selectField.change(function() {
|
||||
var width = $("#node-input-rule-container").width();
|
||||
var type = $(this).val();
|
||||
if (type == "set") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "change") {
|
||||
row2.hide();
|
||||
row3.show();
|
||||
row4.hide();
|
||||
} else if (type == "delete") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "move") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.show();
|
||||
}
|
||||
});
|
||||
|
||||
deleteButton.click(function() {
|
||||
container.css({"background":"#fee"});
|
||||
container.fadeOut(300, function() {
|
||||
$(this).remove();
|
||||
});
|
||||
});
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
propertyName.typedInput('value',rule.p);
|
||||
propertyName.typedInput('type',rule.pt);
|
||||
propertyValue.typedInput('value',rule.to);
|
||||
propertyValue.typedInput('type',rule.tot);
|
||||
moveValue.typedInput('value',rule.to);
|
||||
moveValue.typedInput('type',rule.tot);
|
||||
fromValue.typedInput('value',rule.from);
|
||||
fromValue.typedInput('type',rule.fromt);
|
||||
toValue.typedInput('value',rule.to);
|
||||
toValue.typedInput('type',rule.tot);
|
||||
selectField.change();
|
||||
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
container.find('.red-ui-typedInput').typedInput("width",newWidth-180);
|
||||
|
||||
$("#node-input-rule-container").append(container);
|
||||
}
|
||||
$("#node-input-add-rule").click(function() {
|
||||
generateRule({t:"replace",p:"payload"});
|
||||
$('#node-input-rule-container').css('min-height','300px').css('min-width','450px').editableList({
|
||||
addItem: function(container,i,opt) {
|
||||
var rule = opt||{t:"replace",p:"payload"};
|
||||
if (rule.t === "change" && rule.re) {
|
||||
rule.fromt = 're';
|
||||
delete rule.re;
|
||||
}
|
||||
if (rule.t === "set" && !rule.tot) {
|
||||
if (rule.to.indexOf("msg.") === 0 && !rule.tot) {
|
||||
rule.to = rule.to.substring(4);
|
||||
rule.tot = "msg";
|
||||
} else {
|
||||
rule.tot = "str";
|
||||
}
|
||||
}
|
||||
if (rule.t === "move" && !rule.tot) {
|
||||
rule.tot = "msg";
|
||||
}
|
||||
|
||||
var row1 = $('<div/>').appendTo(container);
|
||||
var row2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row3 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
var row4 = $('<div/>',{style:"margin-top:8px;"}).appendTo(container);
|
||||
|
||||
var selectField = $('<select/>',{class:"node-input-rule-type",style:"width:110px; margin-right:10px;"}).appendTo(row1);
|
||||
var selectOptions = [{v:"set",l:set},{v:"change",l:change},{v:"delete",l:del},{v:"move",l:move}];
|
||||
for (var i=0;i<4;i++) {
|
||||
selectField.append($("<option></option>").val(selectOptions[i].v).text(selectOptions[i].l));
|
||||
}
|
||||
|
||||
var propertyName = $('<input/>',{style:"width:250px",class:"node-input-rule-property-name",type:"text"})
|
||||
.appendTo(row1)
|
||||
.typedInput({types:['msg','flow','global']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row2);
|
||||
var propertyValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-value",type:"text"})
|
||||
.appendTo(row2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json','date']});
|
||||
|
||||
var row3_1 = $('<div/>').appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(search)
|
||||
.appendTo(row3_1);
|
||||
var fromValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-search-value",type:"text"})
|
||||
.appendTo(row3_1)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','re','num','bool']});
|
||||
|
||||
var row3_2 = $('<div/>',{style:"margin-top:8px;"}).appendTo(row3);
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(replace)
|
||||
.appendTo(row3_2);
|
||||
var toValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-replace-value",type:"text"})
|
||||
.appendTo(row3_2)
|
||||
.typedInput({default:'str',types:['msg','flow','global','str','num','bool','json']});
|
||||
|
||||
$('<div/>',{style:"display:inline-block;text-align:right; width:120px; padding-right:10px; box-sizing:border-box;"})
|
||||
.text(to)
|
||||
.appendTo(row4);
|
||||
var moveValue = $('<input/>',{style:"width:250px",class:"node-input-rule-property-move-value",type:"text"})
|
||||
.appendTo(row4)
|
||||
.typedInput({default:'msg',types:['msg','flow','global']});
|
||||
|
||||
selectField.change(function() {
|
||||
var width = $("#node-input-rule-container").width();
|
||||
var type = $(this).val();
|
||||
if (type == "set") {
|
||||
row2.show();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "change") {
|
||||
row2.hide();
|
||||
row3.show();
|
||||
row4.hide();
|
||||
} else if (type == "delete") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.hide();
|
||||
} else if (type == "move") {
|
||||
row2.hide();
|
||||
row3.hide();
|
||||
row4.show();
|
||||
}
|
||||
resizeRule(container);
|
||||
});
|
||||
|
||||
selectField.find("option").filter(function() {return $(this).val() == rule.t;}).attr('selected',true);
|
||||
propertyName.typedInput('value',rule.p);
|
||||
propertyName.typedInput('type',rule.pt);
|
||||
propertyValue.typedInput('value',rule.to);
|
||||
propertyValue.typedInput('type',rule.tot);
|
||||
moveValue.typedInput('value',rule.to);
|
||||
moveValue.typedInput('type',rule.tot);
|
||||
fromValue.typedInput('value',rule.from);
|
||||
fromValue.typedInput('type',rule.fromt);
|
||||
toValue.typedInput('value',rule.to);
|
||||
toValue.typedInput('type',rule.tot);
|
||||
selectField.change();
|
||||
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
resizeRule(container);
|
||||
},
|
||||
resizeItem: resizeRule,
|
||||
deletable: true,
|
||||
sortable: true
|
||||
});
|
||||
|
||||
if (!this.rules) {
|
||||
@ -250,11 +239,12 @@
|
||||
}
|
||||
|
||||
for (var i=0;i<this.rules.length;i++) {
|
||||
generateRule(this.rules[i]);
|
||||
var rule = this.rules[i];
|
||||
$("#node-input-rule-container").editableList('addItem',rule);
|
||||
}
|
||||
},
|
||||
oneditsave: function() {
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var rules = $("#node-input-rule-container").editableList('items');
|
||||
var ruleset;
|
||||
var node = this;
|
||||
node.rules= [];
|
||||
@ -289,14 +279,8 @@
|
||||
}
|
||||
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");
|
||||
|
||||
var rules = $("#node-input-rule-container").children();
|
||||
var newWidth = $("#node-input-rule-container").width();
|
||||
rules.each(function(i) {
|
||||
$(this).find('.red-ui-typedInput').typedInput("width",newWidth-180);
|
||||
})
|
||||
$("#node-input-name").width(newWidth-130);
|
||||
$("#node-input-rule-container").editableList('height',height);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -232,5 +232,8 @@
|
||||
"json": "JSON",
|
||||
"date": "timestamp"
|
||||
}
|
||||
},
|
||||
"editableList": {
|
||||
"add": "add"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user