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

Don't allow toggle if can't toggle. Allow hiding info (#1389)

Browse Source 
* Don't allow toggle if can't toggle. Allow hiding info

* Allow tap_action: toggle

* cleanup

* Lint
This commit is contained in:
Paulus Schoutsen 2018-07-02 19:55:46 -04:00 committed by c727
parent 173cd8126c
commit 20d6f6d530
1 changed files with 53 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/panels/lovelace/cards/hui-picture-entity-card.js
View File

@ -10,24 +10,28 @@ import computeStateDomain from '../../../common/entity/compute_state_domain.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';
import EventsMixin from '../../../mixins/events-mixin.js';
import LocalizeMixin from '../../../mixins/localize-mixin.js'; import LocalizeMixin from '../../../mixins/localize-mixin.js';
const UNAVAILABLE = 'Unavailable'; const UNAVAILABLE = 'Unavailable';
/* /*
* @appliesMixin LocalizeMixin * @appliesMixin LocalizeMixin
* @appliesMixin EventsMixin
*/ */
class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) { class HuiPictureEntityCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style> <style>
ha-card { ha-card {
cursor: pointer;
min-height: 75px; min-height: 75px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
} }
.box { ha-card.canInteract {
cursor: pointer;
}
.info {
@apply --paper-font-common-nowrap; @apply --paper-font-common-nowrap;
position: absolute; position: absolute;
left: 0; left: 0;
@ -44,17 +48,20 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
#title { #title {
font-weight: 500; font-weight: 500;
} }
[hidden] {
display: none;
}
</style> </style>
<ha-card on-click="_cardClicked"> <ha-card id='card' on-click="_cardClicked">
<hui-image <hui-image
hass="[[hass]]" hass="[[hass]]"
image="[[_config.image]]" image="[[_config.image]]"
state-image="[[_config.state_image]]" state-image="[[_config.state_image]]"
camera-image="[[_config.camera_image]]" camera-image="[[_config.camera_image]]"
entity="[[_config.entity]]" entity="[[_config.entity]]"
></hui-image> ></hui-image>
<div class="box"> <div class="info" hidden$='[[_computeHideInfo(_config)]]'>
<div id="name"></div> <div id="name"></div>
<div id="state"></div> <div id="state"></div>
</div> </div>
@ -86,29 +93,38 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
_hassChanged(hass) { _hassChanged(hass) {
const config = this._config; const config = this._config;
const entityId = config && config.entity; const entityId = config.entity;
if (!entityId) { const stateObj = hass.states[entityId];
// Nothing changed
if ((!stateObj && this._oldState === UNAVAILABLE) ||
(stateObj && stateObj.state === this._oldState)) {
return; return;
} }
if (!(entityId in hass.states) && this._oldState === UNAVAILABLE) {
return;
}
if (!(entityId in hass.states) || hass.states[entityId].state !== this._oldState) {
this._updateState(hass, entityId, config);
}
}
_updateState(hass, entityId, config) { let name;
const state = entityId in hass.states ? hass.states[entityId].state : UNAVAILABLE; let state;
let stateLabel;
let canInteract = true;
this.$.name.innerText = config.name || (state === UNAVAILABLE ? if (stateObj) {
entityId : computeStateName(hass.states[entityId])); name = config.name || computeStateName(stateObj);
this.$.state.innerText = state === UNAVAILABLE ? state = stateObj.state;
UNAVAILABLE : this._computeState(hass.states[entityId]); stateLabel = this._computeStateLabel(stateObj);
} else {
name = config.name || entityId;
state = UNAVAILABLE;
stateLabel = UNAVAILABLE;
canInteract = false;
}
this.$.name.innerText = name;
this.$.state.innerText = stateLabel;
this._oldState = state; this._oldState = state;
this.$.card.classList.toggle('canInteract', canInteract);
} }
_computeState(stateObj) { _computeStateLabel(stateObj) {
const domain = computeStateDomain(stateObj); const domain = computeStateDomain(stateObj);
switch (domain) { switch (domain) {
case 'scene': case 'scene':
@ -122,9 +138,19 @@ class HuiPictureEntityCard extends LocalizeMixin(PolymerElement) {
} }
} }
_computeHideInfo(config) {
// By default we will show it, so === undefined should be true.
return config.show_info === false;
}
_cardClicked() { _cardClicked() {
const entityId = this._config && this._config.entity; const entityId = this._config && this._config.entity;
if (!(entityId in this.hass.states)) { const stateObj = this.hass.states[entityId];
if (!entityId || !stateObj) return;
if (this._config.tap_action !== 'toggle') {
this.fire('hass-more-info', { entityId });
return; return;
} }