node-red-contrib-smartnora
Version:
Google Smart Home integration via Smart Nora https://smart-nora.eu/
238 lines (226 loc) • 10.2 kB
HTML
<script type="text/javascript">
(function () {
function resizeDialog(size) {
size = size || {
height: $(".red-ui-tray-content form").height()
}
var rows = $("#dialog-form>div:not(.node-input-action-container-row):visible");
var height = size.height;
for (var i = 0; i < rows.length; i++) {
height -= $(rows[i]).outerHeight(true);
}
var editorRow = $("#dialog-form>div.node-input-action-container-row");
height -= (parseInt(editorRow.css("marginTop")) + parseInt(editorRow.css("marginBottom")));
$("#node-input-action-container").editableList('height', height);
}
RED.nodes.registerType('noraf-notify', {
category: 'nora',
color: 'rgb(235, 206, 142)',
icon: 'assistant.png',
defaults: {
tag: {
value: '',
},
title: {
value: 'Sample Title',
},
body: {
value: '',
},
icon: {
value: undefined,
},
name: {
value: ''
},
nora: {
type: 'noraf-config',
required: true
},
topic: {
value: ''
},
actions: {
value: [{
p: 'OK',
v: 'ok',
vt: 'str',
}, {
p: 'Cancel',
v: 'cancel',
vt: 'str',
}]
},
closeNotification: {
value: false,
},
},
inputs: 1,
outputs: 1,
paletteLabel: 'notify',
label: function () {
return this.name || (this.closeNotification ? 'Close ' + this.tag : this.title) ||
'notify';
},
oneditresize: resizeDialog,
oneditprepare: function () {
$('#node-input-action-container').change(function (ev) {
if (ev.target.classList.contains('node-input-action-default')) {
$('.node-input-action-default').not(ev.target).prop('checked', false);
}
});
$('#node-input-closeNotification').change(function () {
$('.hide-if-close')[this.checked ? 'hide' : 'show']();
});
$('#node-input-action-container').css('min-height', '120px').css('min-width', '450px')
.editableList({
addItem: function (container, i, opt) {
var prop = opt;
if (!prop.hasOwnProperty('p')) {
prop = {
p: "",
v: "",
vt: "str",
d: false,
};
}
container.css({
overflow: 'hidden',
whiteSpace: 'nowrap'
});
var row = $('<div/>').appendTo(container);
var propertyName = $('<input/>', {
class: "node-input-action-action-name",
type: "text",
placeholder: "Label",
})
.css("width", "30%")
.val(prop.p)
.appendTo(row);
$('<div/>', {
style: 'display:inline-block; padding:0px 6px;'
})
.text('=>')
.appendTo(row);
var propertyValue = $('<input/>', {
class: "node-input-action-action-value",
type: "text",
placeholder: "msg.payload",
})
.css("width", "calc(70% - 60px)")
.appendTo(row)
.typedInput({
default: 'str',
types: [
'flow', 'global', 'str', 'num', 'bool',
'json', 'bin', 'date', 'jsonata', 'env',
{
value: 'link',
label: 'open link',
icon: 'red/images/typedInput/re.svg',
validate: /^https?:\/\/.+$/
},
]
});
$('<input/>', {
class: "node-input-action-default",
type: "checkbox",
title: "Default Action",
})
.css("width", "30px")
.appendTo(row)
.prop('checked', !!prop.d);
propertyValue.typedInput('value', prop.v);
propertyValue.typedInput('type', prop.vt);
},
removable: true,
sortable: true
});
if (!this.actions) {
this.actions = [];
}
for (var i = 0; i < this.actions.length; i++) {
var action = this.actions[i];
var newAction = {
p: action.p,
v: action.v,
vt: action.vt,
d: action.d,
};
if (newAction.v === undefined) {
if (action.p === 'payload') {
newAction.v = this.payload ? this.payload : '';
newAction.vt = this.payloadType ? this.payloadType : 'date';
} else if (action.p === 'topic' && action.vt === "str") {
newAction.v = this.topic ? this.topic : '';
}
}
$("#node-input-action-container").editableList('addItem', newAction);
}
},
oneditsave: function () {
var actions = $("#node-input-action-container").editableList('items');
var node = this;
node.actions = [];
node.topic = "";
actions.each(function (i) {
var action = $(this);
var p = {
p: action.find(".node-input-action-action-name").val()
};
if (p.p) {
p.v = action.find(".node-input-action-action-value").typedInput(
'value');
p.vt = action.find(".node-input-action-action-value").typedInput(
'type');
p.d = action.find(".node-input-action-default").is(':checked');
node.actions.push(p);
}
});
}
});
})();
</script>
<script type="text/x-red" data-template-name="noraf-notify">
<div class="form-row">
<label for="node-input-nora"><i class="fa fa-table"></i> Config</label>
<input type="text" id="node-input-nora">
</div>
<div class="form-row">
<label for="node-input-tag"><i class="fa fa-i-cursor"></i> Tag</label>
<input type="text" id="node-input-tag">
</div>
<div class="form-row">
<label style="width:auto" for="node-input-closeNotification"><i class="fa fa-arrow-right"></i> Close notification: </label>
<input type="checkbox" id="node-input-closeNotification" style="display:inline-block; width:auto; vertical-align:top;">
</div>
<div class="form-row hide-if-close">
<label for="node-input-title"><i class="fa fa-i-cursor"></i> Title</label>
<input type="text" id="node-input-title">
</div>
<div class="form-row hide-if-close">
<label for="node-input-body"><i class="fa fa-i-cursor"></i> Body</label>
<input type="text" id="node-input-body">
</div>
<div class="form-row hide-if-close">
<label for="node-input-icon" style="padding-left:25px; margin-right:-25px">Icon</label>
<input type="text" id="node-input-icon">
</div>
<label class="hide-if-close"><i class="fa fa-tag"></i> <span>Actions:</span></label>
<div class="form-row node-input-action-container-row hide-if-close">
<ol id="node-input-action-container"></ol>
</div>
<div class="form-row hide-if-close">
<label for="node-input-topic" style="padding-left:15px; margin-right:-15px">Topic</label>
<input type="text" id="node-input-topic" style="width:70%">
</div>
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-input-name">
</div>
</script>
<script type="text/x-red" data-help-name="noraf-notify">
<p>
<a href="https://github.com/andrei-tatar/node-red-contrib-smartnora/blob/master/doc/nodes/notify/README.md">https://github.com/andrei-tatar/node-red-contrib-smartnora/blob/master/doc/nodes/notify/README.md</a>
</p>
</script>