jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +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() {
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';

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 '../../../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);