iobroker.lovelace
Version:
With this adapter you can build visualization for ioBroker with Home Assistant Lovelace UI
205 lines (177 loc) • 9.73 kB
HTML
<script type="text/x-iobroker" data-template-name="lovelace">
<div class="row">
<div class="col s2">
<input type="checkbox" data-field="enabled" data-default="false"/>
<span class="translate">enabled</span>
</div>
<div class="col s4">
<select data-field="entity" data-default="">
<option value="" class="translate">auto</option>
<option value="_" class="translate">none</option>
<option value="light" class="translate">light</option>
<option value="camera" class="translate">camera</option>
<option value="plant" class="translate">plant</option>
<option value="sensor" class="translate">sensor</option>
<option value="binary_sensor" class="translate">binary_sensor</option>
<option value="climate" class="translate">climate</option>
<option value="alarm_control_panel" class="translate">alarm</option>
<option value="fan" class="translate">fan</option>
<option value="input_boolean" class="translate">input_boolean</option>
<option value="switch" class="translate">switch</option>
<option value="group" class="translate">group</option>
<option value="automation" class="translate">automation</option>
<option value="cover" class="translate">cover</option>
<option value="input_select" class="translate">input_select</option>
<option value="input_number" class="translate">input_number</option>
<option value="input_text" class="translate">input_text</option>
<option value="lock" class="translate">lock</option>
<option value="media_player" class="translate">media_player</option>
<option value="scene" class="translate">scene</option>
<option value="script" class="translate">script</option>
<option value="timer" class="translate">timer</option>
<option value="vacuum" class="translate">vacuum</option>
<option value="water_heater" class="translate">water_heater</option>
<option value="weblink" class="translate">weblink</option>
<option value="history_graph" class="translate">history_graph</option>
<option value="input_datetime" class="translate">input_datetime</option>
<option value="sun" class="translate">sun</option>
<option value="weather" class="translate">weather</option>
</select>
<label class="translate">Entity type</label>
</div>
<div class="col s4">
<input type="text" data-field="name" size="20" list="suggestionList">
<datalist id="suggestionList"></datalist>
<label class="translate">Entity name</label>
<span class="translate">(unique for one entity type)</span>
</div>
<div class="col s0">
<a data-command="entityNameAutoGenerate" class="values-buttons btn-floating btn-medium waves-effect waves-light translateT" title="Auto generate entity name form object id"><i class="material-icons">create</i></a>
</div>
</div>
</script>
<script type="text/javascript">
$.get({
url: 'adapter/lovelace/words.js',
success: function (script) {
let translation = script.substring(script.indexOf('{'), script.length);
translation = translation.substring(0, translation.lastIndexOf('};') + 1);
$.extend(systemDictionary, JSON.parse(translation));
},
async: false
});
// There are two ways how to predefine default settings:
// - with attribute "data-default" (content independent)
// - with function in global variable "defaults". Function name is equal with adapter name.
// as input function receives object with all information concerning it
if (typeof defaults !== 'undefined') {
defaults["lovelace"] = function (obj, instanceObj) {
return {
enabled: false,
entity: '',
name: ''
};
};
}
if (typeof customPostInits !== 'undefined') {
customPostInits.lovelace = function ($div, values, instanceObj, type, role) {
try {
const myNamespace = instanceObj._id.replace('system.adapter.', '');
const currentObj = gMain.objects[gMain.navigateGetParams()];
const entitiesIdList = [];
const Input = {};
const DataList = {};
const Select = {};
const Button = {};
let selectedEntity ='auto';
if (currentObj && currentObj.common && currentObj.common.custom && currentObj.common.custom[myNamespace] && currentObj.common.custom[myNamespace].entity) {
selectedEntity = currentObj.common.custom[myNamespace].entity;
}
initializeDivs();
initializeSuggestions();
events();
function initializeDivs() {
// Input
Input.name = $div.find('input[data-field="name"]');
// DataList
DataList.suggestionList = $div.find('datalist[id="suggestionList"]');
// Select
Select.entity = $div.find('select[data-field="entity"]');
// Buttons
Button.autoGenerateEntityName = $div.find('.values-buttons');
}
function events() {
Input.name.on('input', function () { //intentionally change 'this' reference here.
if (Input.timeout) {
clearTimeout(Input.timeout);
}
Input.timeout = setTimeout(() => {
if (this.value.length > 0 && entitiesIdList && entitiesIdList.length > 0) {
if (this.value.includes('.')) {
this.value = this.value.replace(/\./g, '_');
}
if (entitiesIdList.includes(`${selectedEntity}.${this.value}`)) {
gMain.showError(_("Entity name '%s' is already in use", this.value));
let num = 1;
while (entitiesIdList.includes(`${selectedEntity}.${this.value}_${num}`)) {
num += 1;
}
this.value += '_' + num;
}
}
}, 300);
});
Select.entity.on('change', function () {
selectedEntity = this.value;
});
Button.autoGenerateEntityName.click(function () {
const id = currentObj._id;
const extractInstance = id.match(/\.\d+\./);
Input.name.val(id.split(extractInstance, 2)[1].replace(/\./g, '_'));
});
}
async function initializeSuggestions() {
const entitiesList = await getEntitiesAsync(myNamespace);
const suggestionList = [];
for (const entity of entitiesList) {
const entityId = entity.entity_id;
if (entityId) {
// add entityId to List
entitiesIdList.push(entityId);
// remove entity type
const prefix = entityId.substring(entityId.indexOf('.') + 1, entityId.length);
if (prefix && prefix.includes('_')) {
// loop trough prefixes
let sug = prefix;
for (let d = 0; d <= prefix.split('_').length - 1; d++) {
sug = sug.substring(0, sug.lastIndexOf('_'));
if (sug) {
const entityIdSuggestion = '<option value="' + sug + '_">';
if (!suggestionList.includes(entityIdSuggestion)) {
// nur zu prefixId array hinzufügen wenn noch nicht vorhanden
suggestionList.push(entityIdSuggestion);
}
}
}
}
}
}
DataList.suggestionList.html(suggestionList.sort().join('\n'));
}
} catch (err) {
gMain.showError(`Error: ${err && err.message}<br>Stack: ${err && err.stack}`);
}
};
}
async function getEntitiesAsync(namespace) {
return new Promise(resolve => {
gMain.socket.emit('sendTo', namespace, 'browse', null, list => {
if (list && Object.keys(list).length > 0) {
resolve(list);
} else {
resolve(null);
}
});
});
}
</script>