node-red-contrib-prib-functions
Version:
Node-RED added node functions.
182 lines (161 loc) • 7.33 kB
HTML
<!--
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/javascript">
/*globals RED */
RED.nodes.registerType('append', {
category: 'function',
color: '#fdeea2',
defaults: {
name: {value: "append"},
files: {value:[{value:'', type:'require'}], validate:function(value) {
if (value.length ) {
for (var i = 0; i < value.length; i++) {
if (!value[i].value) {
return false;
}
}
return true;
}
return false;
}, required:true},
},
inputs: 1,
outputs: 1,
icon: "file.png",
align: 'left',
paletteLabel: "append",
inputLabels: "Message In",
outputLabels: ["Message Out"],
label: function () {
return this.name || "Append";
},
oneditprepare: function() {
function generateFile(i, file) {
var container = $('<li/>',{style:"background: #fff; margin:0; padding:8px 0px 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);
$('<i style="color:#eee; cursor:move; margin-left:3px;" class="node-input-file-handle fa fa-bars"></i>').appendTo(row);
var valueClass ="node-input-file-value"
if (!file.value) { valueClass ="node-input-file-value input-error"; }
var valueField = $('<input/>',{class:valueClass,type:"text",style:"margin-left: 7px; width: 38%;", placeholder: 'e.g. name',value:file.value}).appendTo(row);//.typedInput({default:'str',types:['str','num','bool']});
valueField.keyup(function() {
if (!$(this).val()) {
$(this).addClass('input-error')
return;
}
if ($(this).hasClass('input-error')) {
$(this).removeClass('input-error')
}
});
var typeField = $('<select/>',{class:"node-input-file-type",type:"text",style:"margin-left:7px; width:25%"}).appendTo(row);//.typedInput({default:'str',types:['str', 'num']});
//var sel = $('<select>').appendTo('body');
$([
{val : "file", text: 'file'},
{val : "require", text: 'require'},
{val : "text", text: 'text'}
]).each(function() {
typeField.append($("<option>").attr('value',this.val).text(this.text).prop('selected',(file.type == this.val)));
});
var requiredContainer= $('<div/>',{style:"display:inline-block; height:34px; margin-left:7px; width:18%;"}).appendTo(row);
var requiredInnerContainer= $('<div/>',{style:"left:35%; position:relative; width:30px"}).appendTo(requiredContainer);
var reqRow=$("<label />",{class:"switch",style:"top:10px; width:30px;"}).appendTo(requiredInnerContainer);
var reqDiv=$("<div />",{class:"slider round"}).appendTo(reqRow);
var finalspan = $('<div/>',{style:"display:inline-block; width:5%;"}).appendTo(row);
var deleteButton = $('<a/>',{href:"#",class:"editor-button editor-button-small", style:"left:45%; position:relative;"}).appendTo(finalspan);
$('<i/>',{class:"fa fa-remove"}).appendTo(deleteButton);
deleteButton.click(function() {
container.find(".node-input-file-value").removeAttr('required')
container.css({"background":"#fee"});
container.fadeOut(300, function() {
$(this).remove();
});
});
$("#node-input-file-container").append(container);
}
$("#node-input-add-file").click(function() {
generateFile($("#node-input-file-container").children().length+1, {});
$("#node-input-file-container-div").scrollTop($("#node-input-file-container-div").get(0).scrollHeight);
});
for (var i=0; i<this.files.length; i++) {
generateFile(i+1,this.files[i]);
}
$( "#node-input-file-container" ).sortable({
axis: "y",
handle:".node-input-file-handle",
cursor: "move"
});
},
oneditsave: function() {
var node = this;
node.files = [];
$("#node-input-file-container").children().each(function(i) {
var file = $(this);
node.files.push( {
value: file.find(".node-input-file-value").val(),//typedInput('value'),
type: file.find(".node-input-file-type").val(),//typedInput('value')
});
});
},
oneditresize: function() {
var files = $("#node-input-file-container").children();
var newWidth = ($("#node-input-file-container").width() - 175)/2;
var node = this;
files.each(function(i) {
node.resizeRule($(this),newWidth);
});
},
resizeRule : function(file,newWidth) {
//file.find(".node-input-file-type").width(newWidth???);
//file.find(".node-input-file-value").width(newWidth??);
}
});
</script>
<script type="text/x-red" data-template-name="append">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row node-input-file-container-row" style="margin-bottom:0px; width:100%; min-width:520px">
<label style="vertical-align:top;"><i class="fa fa-list-alt"></i> Files</label>
<div style="display:inline-block; width:78%; border:1px solid #ccc; border-radius:5px; box-sizing:border-box;">
<div style="width:100%; display: inline-block; background-color:#f3f3f3; padding-top:10px; padding-buttom:10px; border-top:0px solid; border-radius:5px 5px 0 0; border-bottom:1px solid #ccc;">
<div style="width:94%; display:inline-block; margin-left:32px">
<div style="width:38%; text-align:center; float:left;">Name</div>
<div style="margin-left:7px; width:19%; text-align:center; float:left;">Type</div>
<div style="width:16%; text-align:center; float:left;">Remove</div>
</div>
</div>
<div id="node-input-file-container-div" style=" height: 257px; padding: 5px; overflow-y:scroll;">
<ol id="node-input-file-container" style=" list-style-type:none; margin: 0;"></ol>
</div>
</div>
</div>
<div class="form-row">
<a href="#" class="editor-button editor-button-small" id="node-input-add-file" style="margin-top: 4px; margin-left: 103px;"><i class="fa fa-plus"></i> <span>File</span></a>
</div>
</script>
<script type="text/x-red" data-help-name="append">
<p>Appends data to payload from text, file content of require or file</p>
<h3>Inputs</h3>
<dl class="message-properties">
<dt>msg <span class="property-type">payload</span></dt>
<dd>incoming message with payload</dd>
<dt>msg <span class="property-type">topic</span></dt>
<dd></dd>
</dl>
<h3>Outputs</h3>
<dl class="message-properties">
<dt>msg <span class="property-type">payload</span></dt>
<dd>a message payload which has be appended with data specified by this node</dd>
</dl>
</script>