mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-09 18:36:35 +00:00
Love: Add badges to picture elements (#1371)
* Love: Add badges to picture elements * Lint * Fix toggle text * Simplify service button config * Add default for service data * Lint
This commit is contained in:
parent
42026f096f
commit
5f44009177
@ -339,14 +339,12 @@ class HaPanelDevInfo extends PolymerElement {
|
||||
}
|
||||
|
||||
_defaultPageText() {
|
||||
return localStorage.defaultPage === 'lovelace' ?
|
||||
'>> Remove lovelace as default page page on this device <<' :
|
||||
'>> Set lovelace as default page page on this device <<';
|
||||
return `>> ${localStorage.defaultPage === 'lovelace' ?
|
||||
'Remove' : 'Set'} lovelace as default page on this device <<`;
|
||||
}
|
||||
|
||||
_toggleDefaultPage() {
|
||||
const curIsLove = localStorage.defaultPage === 'lovelace';
|
||||
if (curIsLove) {
|
||||
if (localStorage.defaultPage === 'lovelace') {
|
||||
delete localStorage.defaultPage;
|
||||
} else {
|
||||
localStorage.defaultPage = 'lovelace';
|
||||
|
@ -2,9 +2,11 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
|
||||
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
|
||||
|
||||
import '../../../components/buttons/ha-call-service-button.js';
|
||||
import '../../../components/entity/ha-state-label-badge.js';
|
||||
import '../../../components/entity/state-badge.js';
|
||||
import '../../../components/ha-card.js';
|
||||
|
||||
import computeDomain from '../../../common/entity/compute_domain.js';
|
||||
import computeStateDisplay from '../../../common/entity/compute_state_display.js';
|
||||
import computeStateName from '../../../common/entity/compute_state_name.js';
|
||||
import toggleEntity from '../common/entity/toggle-entity.js';
|
||||
@ -16,7 +18,7 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
|
||||
* @appliesMixin EventsMixin
|
||||
* @appliesMixin LocalizeMixin
|
||||
*/
|
||||
class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
||||
class HuiPictureElementsCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
@ -32,12 +34,12 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
|
||||
width: 100%;
|
||||
}
|
||||
.element {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.state-text {
|
||||
.state-label {
|
||||
padding: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.clickable {
|
||||
cursor: pointer;
|
||||
@ -59,14 +61,15 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
|
||||
type: Object,
|
||||
observer: '_hassChanged'
|
||||
},
|
||||
_config: Object,
|
||||
_config: Object
|
||||
};
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._requiresStateObj = [];
|
||||
this._requiresTextState = [];
|
||||
this._stateBadges = [];
|
||||
this._stateIcons = [];
|
||||
this._stateLabels = [];
|
||||
}
|
||||
|
||||
ready() {
|
||||
@ -90,8 +93,10 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
|
||||
_buildConfig() {
|
||||
const config = this._config;
|
||||
const root = this.$.root;
|
||||
this._requiresStateObj = [];
|
||||
this._requiresTextState = [];
|
||||
|
||||
this._stateBadges = [];
|
||||
this._stateIcons = [];
|
||||
this._stateLabels = [];
|
||||
|
||||
while (root.lastChild) {
|
||||
root.removeChild(root.lastChild);
|
||||
@ -101,34 +106,41 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
|
||||
img.src = config.image;
|
||||
root.appendChild(img);
|
||||
|
||||
|
||||
config.elements.forEach((element) => {
|
||||
const entityId = element.entity;
|
||||
let el;
|
||||
if (element.type === 'state-badge') {
|
||||
const entityId = element.entity;
|
||||
el = document.createElement('state-badge');
|
||||
el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
|
||||
el.classList.add('clickable');
|
||||
this._requiresStateObj.push({ el, entityId });
|
||||
} else if (element.type === 'state-text') {
|
||||
const entityId = element.entity;
|
||||
el = document.createElement('div');
|
||||
el.addEventListener('click', () => this._handleClick(entityId, false));
|
||||
el.classList.add('clickable', 'state-text');
|
||||
this._requiresTextState.push({ el, entityId });
|
||||
} else if (element.type === 'service-button') {
|
||||
el = document.createElement('ha-call-service-button');
|
||||
el.hass = this.hass;
|
||||
el.domain = (element.service && element.domain) || 'homeassistant';
|
||||
el.service = (element.service && element.service.service) || '';
|
||||
el.serviceData = (element.service && element.service.data) || {};
|
||||
el.innerText = element.title;
|
||||
switch (element.type) {
|
||||
case 'service-button':
|
||||
el = document.createElement('ha-call-service-button');
|
||||
el.domain = computeDomain(element.service);
|
||||
el.service = element.service.substr(el.domain.length + 1);
|
||||
el.serviceData = element.service_data || {};
|
||||
el.innerText = element.title;
|
||||
el.hass = this.hass;
|
||||
break;
|
||||
case 'state-badge':
|
||||
el = document.createElement('ha-state-label-badge');
|
||||
el.state = this.hass.states[entityId];
|
||||
this._stateBadges.push({ el, entityId });
|
||||
break;
|
||||
case 'state-icon':
|
||||
el = document.createElement('state-badge');
|
||||
el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
|
||||
el.classList.add('clickable');
|
||||
this._stateIcons.push({ el, entityId });
|
||||
break;
|
||||
case 'state-label':
|
||||
el = document.createElement('div');
|
||||
el.addEventListener('click', () => this._handleClick(entityId, false));
|
||||
el.classList.add('clickable', 'state-label');
|
||||
this._stateLabels.push({ el, entityId });
|
||||
}
|
||||
|
||||
el.classList.add('element');
|
||||
if (element.style) {
|
||||
Object.keys(element.style).forEach((prop) => {
|
||||
el.style.setProperty(prop, element.style[prop]);
|
||||
});
|
||||
}
|
||||
Object.keys(element.style).forEach((prop) => {
|
||||
el.style.setProperty(prop, element.style[prop]);
|
||||
});
|
||||
root.appendChild(el);
|
||||
});
|
||||
|
||||
@ -138,14 +150,20 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
|
||||
}
|
||||
|
||||
_hassChanged(hass) {
|
||||
this._requiresStateObj.forEach((element) => {
|
||||
this._stateBadges.forEach((element) => {
|
||||
const { el, entityId } = element;
|
||||
el.state = hass.states[entityId];
|
||||
el.hass = hass;
|
||||
});
|
||||
|
||||
this._stateIcons.forEach((element) => {
|
||||
const { el, entityId } = element;
|
||||
const stateObj = hass.states[entityId];
|
||||
el.stateObj = stateObj;
|
||||
el.title = this._computeTooltip(stateObj);
|
||||
});
|
||||
|
||||
this._requiresTextState.forEach((element) => {
|
||||
this._stateLabels.forEach((element) => {
|
||||
const { el, entityId } = element;
|
||||
const stateObj = hass.states[entityId];
|
||||
el.innerText = computeStateDisplay(this.localize, stateObj);
|
||||
|
Loading…
x
Reference in New Issue
Block a user