node-red-contrib-esphome
Version:
Node-RED nodes to ESPhome devices
213 lines (189 loc) • 7.71 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('esphome-device', {
category: 'config',
defaults: {
name: {},
host: {value: ''},
port: {value: 6053, validate: RED.validators.number()},
reconnect: {value: 15, validate: RED.validators.number()},
loglevel: {value: '0'},
logdump: {value: false},
ble: {value: false}
},
paletteLabel: 'device',
credentials: {
encryptionkey: {type: 'password'},
password: {type: 'password'}
},
label: function () {
return this.name || 'ESPhome';
},
oneditprepare: function () {
let node = this;
function toggleSelect() {
let $val = $('#node-config-input-host').val();
$('#node-config-input-discover').html(`<i class="fa fa-search"></i>`);
$('#node-config-input-host').off('change');
$('#node-config-input-host').replaceWith(
`<input type="text" id="node-config-input-host" style="width: 100%;">`
);
$('#node-config-input-host').val($val);
}
function toggleInput() {
let $val = $('#node-config-input-host').val();
let $password = $('#node-config-input-password').val();
RED.notify(`Discovery ESPhome devices ... (~5 sec)`);
$('#node-config-input-host').prop('disabled', true);
$.post('esphome/discovery')
.done(function (data) {
if (typeof data.message !== 'undefined') {
RED.notify(data.message, 'error');
$('#node-config-input-host').prop('disabled', false);
return;
}
if (data.length === 0) {
RED.notify(`No ESPhome devices found`, 'error');
$('#node-config-input-host').prop('disabled', false);
return;
}
$('#node-config-input-discover').html(`<i class="fa fa-i-cursor"></i>`);
$('#node-config-input-host').replaceWith(
`<select id="node-config-input-host" style="width: 100%;"></select>`
);
data
.sort((a, b) => (a.host > b.host ? 1 : -1))
.map(function (d) {
$('#node-config-input-host').append(
`<option value="${d.address}" data-host="${d.address}" data-port="${d.port}" data-fqdn="${d.host}">${d.host} (${d.board})</option>`
);
});
$('#node-config-input-host').on('change', changeHost);
if (!$val || data.length === 1) {
$val = data[0].host;
}
$('#node-config-input-host').val($val);
$('#node-config-input-host').prop('disabled', false);
if ($val) {
changeHost();
}
})
.fail(function (jqxhr, textStatus, error) {
RED.notify(`Request: ${textStatus}, ${error}`, 'error');
});
}
function changeHost() {
let $elm = $('#node-config-input-host option:selected');
$('#node-config-input-port').val($elm.data('port'));
}
$('#node-config-input-discover').click(function () {
if ($('#node-config-input-host').prop('tagName') === 'INPUT') {
toggleInput();
} else {
toggleSelect();
}
});
},
oneditsave: function () {
let $elm = $('#node-config-input-host option:selected');
if (!$('#node-config-input-name').val()) {
$('#node-config-input-name').val($elm.data('fqdn'));
}
}
});
</script>
<script type="text/html" data-template-name="esphome-device">
<div class="form-row">
<label for="node-config-input-name"><i class="fa fa-tag"></i> Name</label>
<input type="text" id="node-config-input-name" placeholder="Name" />
</div>
<div class="form-row">
<label for="node-config-input-host"><i class="fa fa-globe"></i> Host</label>
<div style="display: inline-block; position: relative; width: 70%; height: 24px;">
<div style="position: absolute; left: 0; right: 42px;">
<input type="text" id="node-config-input-host" style="width: 100%;" placeholder="Host" />
</div>
<a
id="node-config-input-discover"
class="editor-button"
style="position: absolute; right: 0; top: 0; width: 33px;"
><i class="fa fa-search"></i
></a>
</div>
</div>
<div class="form-row">
<label for="node-config-input-port"><i class="fa fa-sign-in"></i> Port</label>
<input type="text" id="node-config-input-port" placeholder="Port" />
</div>
<div class="form-row">
<label for="node-config-input-encryptionkey"><i class="fa fa-key"></i> Encryption</label>
<input type="password" id="node-config-input-encryptionkey" placeholder="Encryption Key" />
</div>
<div class="form-row">
<label for="node-config-input-password"><i class="fa fa-lock"></i> Password</label>
<input type="password" id="node-config-input-password" placeholder="Deprecated" />
</div>
<div class="form-row">
<label for="node-config-input-reconnect"><i class="fa fa-refresh"></i> Reconnect</label>
<input type="text" id="node-config-input-reconnect" placeholder="15 sec" />
</div>
<div class="form-row">
<label for="node-config-input-loglevel"><i class="fa fa-file-o"></i> Log Level</label>
<select id="node-config-input-loglevel" style="width: 70%;">
<option value="0">NONE</option>
<option value="1">ERROR</option>
<option value="2">WARN</option>
<option value="3">INFO</option>
<option value="4">CONFIG</option>
<option value="5">DEBUG</option>
<option value="6">VERBOSE</option>
<option value="7">VERY_VERBOSE</option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-logdump"> </label>
<label for="node-config-input-logdump" style="width:70%">
<input
type="checkbox"
id="node-config-input-logdump"
style="display:inline-block; width:22px; vertical-align:top;"
autocomplete="off"
/><span>dump config</span>
</label>
</div>
<div class="form-row">
<label for="node-config-input-ble"><i class="fa fa-bluetooth"></i> <span>BLE</span></label>
<label for="node-config-input-ble" style="width:70%">
<input
type="checkbox"
id="node-config-input-ble"
style="display:inline-block; width:22px; vertical-align:top;"
autocomplete="off"
/><span>Advertisements</span>
</label>
</div>
<div class="form-row">
<div class="form-tips"><b>Important:</b> Deploy device node to get entities list</div>
</div>
</script>
<script type="text/html" data-help-name="esphome-device">
<p>Connection to ESPhome device</p>
<h3>Configuration</h3>
<dl class="message-properties">
<dt class="required">Host<span class="property-type">string</span></dt>
<dd>host or ip address</dd>
<dt class="required">Port<span class="property-type">number</span></dt>
<dd>port</dd>
<dt class="required">Encryption Key<span class="property-type">password</span></dt>
<dd>encryption key for API</dd>
<dt class="required">Password<span class="property-type">password</span></dt>
<dd>password for API</dd>
<dt class="required">Reconnect<span class="property-type">number</span></dt>
<dd>Reconnect interval in seconds (Default: 15)</dd>
<dt class="required">Log Level<span class="property-type">number</span></dt>
<dd>possible log levels</dd>
<dt class="required">Dump Config<span class="property-type">true|false</span></dt>
<dd>dump config</dd>
<dt class="required">BLE<span class="property-type">true|false</span></dt>
<dd>ble advertising</dd>
</dl>
</script>