node-red-contrib-myhome-bticino-v2
Version:
Control Bticino / Legrand MyHome components from Node-RED
176 lines (170 loc) • 9.78 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('myhome-shutter',{
category: 'Bticino MyHome',
color: '#a6bbcf',
defaults: {
name: { value: '', required: true },
buslevel: { value: 'private_riser', required: false},
shutterid: { value: '', required: true, validate: RED.validators.number() },
isgroup: { value: false, required: false},
topic: { value: '', required: true},
gateway: { type: 'myhome-gateway', required: true },
smartfilter: { value: true, required: false},
skipevents: { value: false, required: false},
isstatusrequest: { value: false, required: false},
output2_name: { value: 'On', required: false},
output2_type: { value: 'boolean', required: false}
},
inputs: 1,
inputLabels: function () {
return this._("common.input-label-simple") + ": 'OPEN / CLOSE / STOP'";
},
outputs: 2,
outputLabels: function (index) {
if (index === 0) {
return 'payload';
} else if (index === 1) {
let outputTypeDescr;
if (this.output2_type === 'boolean') {
outputTypeDescr = 'true/false';
} else if (this.output2_type === 'text_state') {
outputTypeDescr = 'OPEN/CLOSE/STOP';
} else {
outputTypeDescr = 'string';
}
return 'payload' + ((this.output2_name === '') ? '' : ('.' + this.output2_name)) + " = " + outputTypeDescr;
}
},
icon: function() {
if (this.isgroup) {
return 'mh-shutters-group.svg';
} else {
return 'font-awesome/fa-align-justify';
}
},
paletteLabel: 'MH Shutter',
label: function() {
// Force default values for newly added fields (backward compatibility with prior releases : when never edited before, update/add new fields)
// v2.2.1 Added BUS management
if (this.buslevel === undefined) {this.buslevel = 'private_riser'}
// Return the label itself
return this.name || 'MH Shutter';
},
oneditprepare: function() {
let scope = this;
$('#node-input-topic').on('change', function() {
let topicName = $(this).val();
let topicInfo = scope._('common.topic-info' , {'topicName': (topicName) ? topicName : 'topic'});
$('#node-info-topic').prop('title' , topicInfo);
});
function checkboxEditable (checkBoxID , isEditable, readonlyValue) {
// Function to turn checkbox uneditable (=greyed out box & label, disabled access and value forced), or back editable
$('#' + checkBoxID)
.prop('checked', (isEditable) ? $('#' + checkBoxID).prop('checked') : readonlyValue)
.prop('disabled', !isEditable)
.change()
.next().css('color', (isEditable) ? '' : 'LightGrey');
}
$('#node-input-isgroup').on('change', function() {
// When group mode is enabled, read-only mode (status request) is not allowed
let isEditable = !($(this).prop('checked'));
checkboxEditable ('node-input-isstatusrequest' , isEditable, false);
});
$('#node-input-skipevents').on('change', function() {
// All gateway events are to be ignored. SmartFilter has nothig to filter (so assume is always 'forced on')
let isEditable = !($(this).prop('checked'));
checkboxEditable ('node-input-smartfilter' , isEditable, true);
});
}
});
</script>
<script type="text/x-red" data-template-name="myhome-shutter">
<div class="form-row">
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.name"></span></label>
<input type="text" id="node-input-name" data-i18n="[placeholder]mh-shutter.config.name-placeholder"/>
</div>
<div class="form-row">
<label for="node-input-topic"><i class="fa fa-terminal"></i> <span data-i18n="common.topic"></span></label>
<input type="text" id="node-input-topic" data-i18n="[placeholder]mh-shutter.config.topic-placeholder"/>
<i id="node-info-topic" class="fa fa-info-circle" title=""></i>
</div>
<div class="form-row">
<label for="node-input-gateway"><i class="fa fa-server"></i> <span data-i18n="common.gateway"></span></label>
<input type="text" id="node-input-gateway"/>
</div>
<div style="border-top-style: solid ;border-width: 1px; border-color: #CCCCCC; height: 10px;"></div>
<div class="form-row">
<label for="node-input-shutterid"><i class="fa fa-align-justify"></i> <span data-i18n="mh-shutter.config.shutterid"></span></label>
<div style="display: inline-block; position: relative; width: 70%; height: 20px;">
<select id="node-input-buslevel" style="width:110px">
<option value="private_riser" data-i18n="common.riser-private"></option>
<option value="01" data-i18n="common.riser-localbus-01">[Local bus 1]</option>
<option value="02" data-i18n="common.riser-localbus-02">[Local bus 2]</option>
<option value="03" data-i18n="common.riser-localbus-03">[Local bus 3]</option>
<option value="04" data-i18n="common.riser-localbus-04">[Local bus 4]</option>
<option value="05" data-i18n="common.riser-localbus-05">[Local bus 5]</option>
<option value="06" data-i18n="common.riser-localbus-06">[Local bus 6]</option>
<option value="07" data-i18n="common.riser-localbus-07">[Local bus 7]</option>
<option value="08" data-i18n="common.riser-localbus-08">[Local bus 8]</option>
<option value="09" data-i18n="common.riser-localbus-09">[Local bus 9]</option>
<option value="10" data-i18n="common.riser-localbus-10">[Local bus 10]</option>
<option value="11" data-i18n="common.riser-localbus-11">[Local bus 11]</option>
<option value="12" data-i18n="common.riser-localbus-12">[Local bus 12]</option>
<option value="13" data-i18n="common.riser-localbus-13">[Local bus 13]</option>
<option value="14" data-i18n="common.riser-localbus-14">[Local bus 14]</option>
<option value="15" data-i18n="common.riser-localbus-15">[Local bus 15]</option>
</select>
<div style="position: absolute; left: 114px; right: 0px; top:0px;">
<input type="text" id="node-input-shutterid" style="width:100%" data-i18n="[placeholder]mh-shutter.config.shutterid-placeholder"/>
</div>
</div>
<br>
<div style="display: inline-block; position: relative; width: 100%; height: 20px;">
<div style="position: absolute; left: 210px; right: 0px; top:3px;">
<label for="node-input-isgroup" style="width:100%">
<input type="checkbox" id="node-input-isgroup" style="display:inline-block; margin-left:10px; width:22px; vertical-align:baseline;"/><span data-i18n="mh-shutter.config.shutter-isgroup"></span>
</label>
</div>
</div>
</div>
<div class="form-row">
<label for="node-input-isstatusrequest"><i class="fa fa-eye"></i> <span data-i18n="common.option-readonly"></span></label>
<label for="node-input-isstatusrequest" style="width:70%">
<input type="checkbox" id="node-input-isstatusrequest" style="display:inline-block; margin-left:0px; width:22px; vertical-align:baseline;"/><span data-i18n="common.option-readonly-checkbox"></span>
<i class="fa fa-info-circle" data-i18n="[title]common.option-readonly-info"></i>
</label>
</div>
<div class="form-row">
<label for="node-input-skipevents"><i class="fa fa-ban"></i> <span data-i18n="common.option-skipevents"></span></label>
<label for="node-input-skipevents" style="width:70%">
<input type="checkbox" id="node-input-skipevents" style="display:inline-block; margin-left:0px; width:22px; vertical-align:baseline;"/><span data-i18n="common.option-skipevents-checkbox"></span>
<i class="fa fa-info-circle" data-i18n="[title]common.option-skipevents-info"></i>
</label>
</div>
<div class="form-row">
<label for="node-input-smartfilter"><i class="fa fa-filter"></i> <span data-i18n="common.option-smartfilter"></span></label>
<label for="node-input-smartfilter" style="width:70%">
<input type="checkbox" id="node-input-smartfilter" style="display:inline-block; margin-left:0px; width:22px; vertical-align:baseline;"/><span data-i18n="common.option-smartfilter-checkbox"></span>
<i class="fa fa-info-circle" data-i18n="[title]common.option-smartfilter-info"></i>
</label>
</div>
<div class="form-tips form-row" style="max-width:none; background:#EFEFEF">
<i class="fa fa-sign-out"></i> <b><span data-i18n="common.secondary-output-title"></span></b>
<br>
<p style="max-width:450px" data-i18n="common.secondary-output-intro"></p>
<div class="form-row">
<label for="node-input-output2_name" style="width:130px; margin-left:15px"><i class="fa fa-tags"></i> <span data-i18n="common.secondary-output-name"></span></label>
<input type="text" id="node-input-output2_name" data-i18n="[placeholder]common.secondary-output-name-placeholder" style="width:55%"/>
<label for="node-input-output2_name" style="width:15px">
<i class="fa fa-info-circle" data-i18n="[title]common.secondary-output-name-info"></i>
</label>
</div>
<div class="form-row">
<label for="node-input-output2_type" style="width:130px; margin-left:15px"><i class="fa fa-check-square-o"></i> <span data-i18n="common.secondary-output-content"></span></label>
<select id="node-input-output2_type" style="width:60%">
<option value="boolean" data-i18n="mh-shutter.config.secondary-output-content-state-boolean">[.state (boolean: true / false)]</option>
<option value="text_state" data-i18n="mh-shutter.config.secondary-output-content-state-txt">[.state (string: OPEN / CLOSE / STOP)]</option>
</select>
</div>
</div>
</script>