Exp. UI: add support for more info dialog (#1294)

* Exp. UI: add support for more info dialog

* Sort items

* Rename HIDE_MORE_INFO to DOMAINS_HIDE_MORE_INFO
This commit is contained in:
c727 2018-06-18 16:07:58 +02:00 committed by Paulus Schoutsen
parent d752060f7a
commit d2eb0ef23f
3 changed files with 48 additions and 12 deletions

View File

@ -22,6 +22,36 @@ export const DOMAINS_WITH_CARD = [
'weblink',
];
/** Domains with separate more info dialog. */
export const DOMAINS_WITH_MORE_INFO = [
'alarm_control_panel',
'automation',
'camera',
'climate',
'configurator',
'cover',
'fan',
'group',
'history_graph',
'input_datetime',
'light',
'lock',
'media_player',
'script',
'sun',
'updater',
'vacuum',
'weather'
];
/** Domains that show no more info dialog. */
export const DOMAINS_HIDE_MORE_INFO = [
'input_number',
'input_select',
'input_text',
'scene'
];
/** Domains that should have the history hidden in the more info dialog. */
export const DOMAINS_MORE_INFO_NO_HISTORY = [
'camera',

View File

@ -1,14 +1,5 @@
import computeStateDomain from './compute_state_domain.js';
const DOMAINS_WITH_MORE_INFO = [
'alarm_control_panel', 'automation', 'camera', 'climate', 'configurator',
'cover', 'fan', 'group', 'history_graph', 'light', 'lock', 'media_player', 'script',
'sun', 'updater', 'vacuum', 'input_datetime', 'weather'
];
const HIDE_MORE_INFO = [
'input_select', 'scene', 'input_number', 'input_text'
];
import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from '../const.js';
export default function stateMoreInfoType(stateObj) {
const domain = computeStateDomain(stateObj);
@ -16,7 +7,7 @@ export default function stateMoreInfoType(stateObj) {
if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
return domain;
}
if (HIDE_MORE_INFO.includes(domain)) {
if (DOMAINS_HIDE_MORE_INFO.includes(domain)) {
return 'hidden';
}
return 'default';

View File

@ -3,13 +3,20 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import stateCardType from '../../common/entity/state_card_type.js';
import computeDomain from '../../common/entity/compute_domain.js';
import { DOMAINS_HIDE_MORE_INFO } from '../../common/const.js';
import '../../components/ha-card.js';
// just importing this now as shortcut to import correct state-card-*
import '../../state-summary/state-card-content.js';
class HuiEntitiesCard extends PolymerElement {
import EventsMixin from '../../mixins/events-mixin.js';
/*
* @appliesMixin EventsMixin
*/
class HuiEntitiesCard extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style>
@ -30,6 +37,9 @@ class HuiEntitiesCard extends PolymerElement {
.header .name {
@apply --paper-font-common-nowrap;
}
.state-card-dialog {
cursor: pointer;
}
</style>
<ha-card>
@ -82,6 +92,10 @@ class HuiEntitiesCard extends PolymerElement {
const stateObj = this.hass.states[entityId];
const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display';
const element = document.createElement(tag);
if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))) {
element.classList.add('state-card-dialog');
element.addEventListener('click', () => this.fire('hass-more-info', { entityId }));
}
element.stateObj = stateObj;
element.hass = this.hass;
this._elements.push({ entityId, element });
@ -98,4 +112,5 @@ class HuiEntitiesCard extends PolymerElement {
}
}
}
customElements.define('hui-entities-card', HuiEntitiesCard);