jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-12 03:46:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Love: Add badges to picture elements (#1371)

Browse Source 
* 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:
c727 2018-06-30 15:52:02 +02:00 committed by GitHub
parent 42026f096f
commit 5f44009177
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/panels/dev-info/ha-panel-dev-info.js
View File

@ -339,14 +339,12 @@ class HaPanelDevInfo extends PolymerElement {
} }
_defaultPageText() { _defaultPageText() {
return localStorage.defaultPage === 'lovelace' ? return `>> ${localStorage.defaultPage === 'lovelace' ?
'>> Remove lovelace as default page page on this device <<' : 'Remove' : 'Set'} lovelace as default page on this device <<`;
'>> Set lovelace as default page page on this device <<';
} }
_toggleDefaultPage() { _toggleDefaultPage() {
const curIsLove = localStorage.defaultPage === 'lovelace'; if (localStorage.defaultPage === 'lovelace') {
if (curIsLove) {
delete localStorage.defaultPage; delete localStorage.defaultPage;
} else { } else {
localStorage.defaultPage = 'lovelace'; localStorage.defaultPage = 'lovelace';

86
src/panels/lovelace/cards/hui-picture-elements-card.js
View File

@ -2,9 +2,11 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../../../components/buttons/ha-call-service-button.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/entity/state-badge.js';
import '../../../components/ha-card.js'; import '../../../components/ha-card.js';
import computeDomain from '../../../common/entity/compute_domain.js';
import computeStateDisplay from '../../../common/entity/compute_state_display.js'; import computeStateDisplay from '../../../common/entity/compute_state_display.js';
import computeStateName from '../../../common/entity/compute_state_name.js'; import computeStateName from '../../../common/entity/compute_state_name.js';
import toggleEntity from '../common/entity/toggle-entity.js'; import toggleEntity from '../common/entity/toggle-entity.js';
@ -16,7 +18,7 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
* @appliesMixin EventsMixin * @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin * @appliesMixin LocalizeMixin
*/ */
class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement)) { class HuiPictureElementsCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style> <style>
@ -32,12 +34,12 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
width: 100%; width: 100%;
} }
.element { .element {
white-space: nowrap;
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.state-text { .state-label {
padding: 8px; padding: 8px;
white-space: nowrap;
} }
.clickable { .clickable {
cursor: pointer; cursor: pointer;
@ -59,14 +61,15 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
type: Object, type: Object,
observer: '_hassChanged' observer: '_hassChanged'
}, },
_config: Object, _config: Object
}; };
} }
constructor() { constructor() {
super(); super();
this._requiresStateObj = []; this._stateBadges = [];
this._requiresTextState = []; this._stateIcons = [];
this._stateLabels = [];
} }
ready() { ready() {
@ -90,8 +93,10 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
_buildConfig() { _buildConfig() {
const config = this._config; const config = this._config;
const root = this.$.root; const root = this.$.root;
this._requiresStateObj = [];
this._requiresTextState = []; this._stateBadges = [];
this._stateIcons = [];
this._stateLabels = [];
while (root.lastChild) { while (root.lastChild) {
root.removeChild(root.lastChild); root.removeChild(root.lastChild);
@ -101,34 +106,41 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
img.src = config.image; img.src = config.image;
root.appendChild(img); root.appendChild(img);
config.elements.forEach((element) => { config.elements.forEach((element) => {
const entityId = element.entity;
let el; let el;
if (element.type === 'state-badge') { switch (element.type) {
const entityId = element.entity; case 'service-button':
el = document.createElement('state-badge'); el = document.createElement('ha-call-service-button');
el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle')); el.domain = computeDomain(element.service);
el.classList.add('clickable'); el.service = element.service.substr(el.domain.length + 1);
this._requiresStateObj.push({ el, entityId }); el.serviceData = element.service_data || {};
} else if (element.type === 'state-text') { el.innerText = element.title;
const entityId = element.entity; el.hass = this.hass;
el = document.createElement('div'); break;
el.addEventListener('click', () => this._handleClick(entityId, false)); case 'state-badge':
el.classList.add('clickable', 'state-text'); el = document.createElement('ha-state-label-badge');
this._requiresTextState.push({ el, entityId }); el.state = this.hass.states[entityId];
} else if (element.type === 'service-button') { this._stateBadges.push({ el, entityId });
el = document.createElement('ha-call-service-button'); break;
el.hass = this.hass; case 'state-icon':
el.domain = (element.service && element.domain) || 'homeassistant'; el = document.createElement('state-badge');
el.service = (element.service && element.service.service) || ''; el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
el.serviceData = (element.service && element.service.data) || {}; el.classList.add('clickable');
el.innerText = element.title; 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'); el.classList.add('element');
if (element.style) { Object.keys(element.style).forEach((prop) => {
Object.keys(element.style).forEach((prop) => { el.style.setProperty(prop, element.style[prop]);
el.style.setProperty(prop, element.style[prop]); });
});
}
root.appendChild(el); root.appendChild(el);
}); });
@ -138,14 +150,20 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
} }
_hassChanged(hass) { _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 { el, entityId } = element;
const stateObj = hass.states[entityId]; const stateObj = hass.states[entityId];
el.stateObj = stateObj; el.stateObj = stateObj;
el.title = this._computeTooltip(stateObj); el.title = this._computeTooltip(stateObj);
}); });
this._requiresTextState.forEach((element) => { this._stateLabels.forEach((element) => {
const { el, entityId } = element; const { el, entityId } = element;
const stateObj = hass.states[entityId]; const stateObj = hass.states[entityId];
el.innerText = computeStateDisplay(this.localize, stateObj); el.innerText = computeStateDisplay(this.localize, stateObj);