From 77f623d51925f090e0fc3c4077863b4ec9578024 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 21 Jun 2018 14:46:54 -0400 Subject: [PATCH] Lovelace: Small reorg (#1315) * Small reorg * Add markdown card * Tweak closeness --- src/cards/ha-entities-card.js | 3 + .../{ => cards}/hui-camera-preview-card.js | 4 +- .../lovelace/{ => cards}/hui-entities-card.js | 20 +++--- .../{ => cards}/hui-entity-filter-card.js | 20 ++++-- .../hui-entity-picture-card.js} | 14 ++-- .../lovelace/{ => cards}/hui-error-card.js | 0 .../lovelace/{ => cards}/hui-glance-card.js | 12 ++-- .../{ => cards}/hui-history-graph-card.js | 4 +- .../lovelace/cards/hui-markdown-card.js | 67 +++++++++++++++++++ .../{ => cards}/hui-media-control-card.js | 4 +- .../{ => cards}/hui-picture-glance-card.js | 16 ++--- .../{ => cards}/hui-plant-status-card.js | 4 +- .../{ => cards}/hui-weather-forecast-card.js | 4 +- .../lovelace/common/compute-card-element.js | 15 +++++ src/panels/lovelace/hui-view.js | 12 ---- 15 files changed, 141 insertions(+), 58 deletions(-) rename src/panels/lovelace/{ => cards}/hui-camera-preview-card.js (93%) rename src/panels/lovelace/{ => cards}/hui-entities-card.js (85%) rename src/panels/lovelace/{ => cards}/hui-entity-filter-card.js (87%) rename src/panels/lovelace/{hui-picture-card.js => cards/hui-entity-picture-card.js} (88%) rename src/panels/lovelace/{ => cards}/hui-error-card.js (100%) rename src/panels/lovelace/{ => cards}/hui-glance-card.js (89%) rename src/panels/lovelace/{ => cards}/hui-history-graph-card.js (92%) create mode 100644 src/panels/lovelace/cards/hui-markdown-card.js rename src/panels/lovelace/{ => cards}/hui-media-control-card.js (92%) rename src/panels/lovelace/{ => cards}/hui-picture-glance-card.js (90%) rename src/panels/lovelace/{ => cards}/hui-plant-status-card.js (93%) rename src/panels/lovelace/{ => cards}/hui-weather-forecast-card.js (93%) diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js index aa373d6c0c..10832a22b1 100644 --- a/src/cards/ha-entities-card.js +++ b/src/cards/ha-entities-card.js @@ -22,6 +22,9 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) { ha-card { padding: 16px; } + .states { + margin: -4px 0; + } .state { padding: 4px 0; } diff --git a/src/panels/lovelace/hui-camera-preview-card.js b/src/panels/lovelace/cards/hui-camera-preview-card.js similarity index 93% rename from src/panels/lovelace/hui-camera-preview-card.js rename to src/panels/lovelace/cards/hui-camera-preview-card.js index 9f1ffa706a..c034379a25 100644 --- a/src/panels/lovelace/hui-camera-preview-card.js +++ b/src/panels/lovelace/cards/hui-camera-preview-card.js @@ -1,8 +1,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeDomain from '../../common/entity/compute_domain.js'; +import computeDomain from '../../../common/entity/compute_domain.js'; -import '../../cards/ha-camera-card.js'; +import '../../../cards/ha-camera-card.js'; import './hui-error-card.js'; class HuiCameraPreviewCard extends PolymerElement { diff --git a/src/panels/lovelace/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js similarity index 85% rename from src/panels/lovelace/hui-entities-card.js rename to src/panels/lovelace/cards/hui-entities-card.js index d5e3f8a862..69d1e7b131 100644 --- a/src/panels/lovelace/hui-entities-card.js +++ b/src/panels/lovelace/cards/hui-entities-card.js @@ -2,16 +2,16 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes.js'; 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 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'; +import '../../../components/ha-card.js'; // just importing this now as shortcut to import correct state-card-* -import '../../state-summary/state-card-content.js'; +import '../../../state-summary/state-card-content.js'; -import EventsMixin from '../../mixins/events-mixin.js'; +import EventsMixin from '../../../mixins/events-mixin.js'; /* * @appliesMixin EventsMixin @@ -23,8 +23,12 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) { ha-card { padding: 16px; } - .state { - padding: 4px 0; + #states { + margin: -4px 0; + } + #states > * { + display: block; + margin: 4px 0; } .header { @apply --paper-font-headline; diff --git a/src/panels/lovelace/hui-entity-filter-card.js b/src/panels/lovelace/cards/hui-entity-filter-card.js similarity index 87% rename from src/panels/lovelace/hui-entity-filter-card.js rename to src/panels/lovelace/cards/hui-entity-filter-card.js index d96256c464..b85b9fd220 100644 --- a/src/panels/lovelace/hui-entity-filter-card.js +++ b/src/panels/lovelace/cards/hui-entity-filter-card.js @@ -10,8 +10,8 @@ import './hui-picture-glance-card'; import './hui-plant-status-card.js'; import './hui-weather-forecast-card'; -import computeStateDomain from '../../common/entity/compute_state_domain.js'; -import computeCardElement from './common/compute-card-element.js'; +import computeStateDomain from '../../../common/entity/compute_state_domain.js'; +import computeCardElement from '../common/compute-card-element.js'; class HuiEntitiesCard extends PolymerElement { static get properties() { @@ -27,6 +27,11 @@ class HuiEntitiesCard extends PolymerElement { }; } + constructor() { + super(); + this._whenDefined = {}; + } + getCardSize() { return this.lastChild ? this.lastChild.getCardSize() : 1; } @@ -75,6 +80,10 @@ class HuiEntitiesCard extends PolymerElement { error = `Unknown card type encountered: "${config.card}".`; } else if (!customElements.get(tag)) { error = `Custom element doesn't exist: "${tag}".`; + if (!(tag in this._whenDefined)) { + this._whenDefined[tag] = customElements.whenDefined(tag) + .then(() => this._configChanged(this.config)); + } } else if (!config.filter || !Array.isArray(config.filter)) { error = 'No or incorrect filter.'; } @@ -100,14 +109,11 @@ class HuiEntitiesCard extends PolymerElement { } _computeCardConfig(config) { - const cardConfig = Object.assign( + return Object.assign( {}, - config, + config.card_config, { entities: this._getEntities(this.hass, config.filter) } ); - delete cardConfig.card; - delete cardConfig.filter; - return cardConfig; } } customElements.define('hui-entity-filter-card', HuiEntitiesCard); diff --git a/src/panels/lovelace/hui-picture-card.js b/src/panels/lovelace/cards/hui-entity-picture-card.js similarity index 88% rename from src/panels/lovelace/hui-picture-card.js rename to src/panels/lovelace/cards/hui-entity-picture-card.js index 5eb1dbcb10..c40b82f025 100644 --- a/src/panels/lovelace/hui-picture-card.js +++ b/src/panels/lovelace/cards/hui-entity-picture-card.js @@ -1,14 +1,14 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import '../../components/ha-card.js'; +import '../../../components/ha-card.js'; -import { STATES_ON } from '../../common/const.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 { STATES_ON } from '../../../common/const.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 LocalizeMixin from '../../mixins/localize-mixin.js'; +import LocalizeMixin from '../../../mixins/localize-mixin.js'; const DOMAINS_NO_STATE = ['scene', 'script', 'weblink']; @@ -141,4 +141,4 @@ class HuiPictureCard extends LocalizeMixin(PolymerElement) { } } -customElements.define('hui-picture-card', HuiPictureCard); +customElements.define('hui-entity-picture-card', HuiPictureCard); diff --git a/src/panels/lovelace/hui-error-card.js b/src/panels/lovelace/cards/hui-error-card.js similarity index 100% rename from src/panels/lovelace/hui-error-card.js rename to src/panels/lovelace/cards/hui-error-card.js diff --git a/src/panels/lovelace/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js similarity index 89% rename from src/panels/lovelace/hui-glance-card.js rename to src/panels/lovelace/cards/hui-glance-card.js index 74da286b62..599aba8d0b 100644 --- a/src/panels/lovelace/hui-glance-card.js +++ b/src/panels/lovelace/cards/hui-glance-card.js @@ -1,14 +1,14 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeStateDisplay from '../../common/entity/compute_state_display.js'; -import computeStateName from '../../common/entity/compute_state_name.js'; +import computeStateDisplay from '../../../common/entity/compute_state_display.js'; +import computeStateName from '../../../common/entity/compute_state_name.js'; -import '../../components/entity/state-badge.js'; -import '../../components/ha-card.js'; +import '../../../components/entity/state-badge.js'; +import '../../../components/ha-card.js'; -import EventsMixin from '../../mixins/events-mixin.js'; -import LocalizeMixin from '../../mixins/localize-mixin.js'; +import EventsMixin from '../../../mixins/events-mixin.js'; +import LocalizeMixin from '../../../mixins/localize-mixin.js'; /* * @appliesMixin EventsMixin diff --git a/src/panels/lovelace/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js similarity index 92% rename from src/panels/lovelace/hui-history-graph-card.js rename to src/panels/lovelace/cards/hui-history-graph-card.js index f0568a8712..af4820fa57 100644 --- a/src/panels/lovelace/hui-history-graph-card.js +++ b/src/panels/lovelace/cards/hui-history-graph-card.js @@ -1,8 +1,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeDomain from '../../common/entity/compute_domain.js'; +import computeDomain from '../../../common/entity/compute_domain.js'; -import '../../cards/ha-history_graph-card.js'; +import '../../../cards/ha-history_graph-card.js'; import './hui-error-card.js'; class HuiHistoryGraphCard extends PolymerElement { diff --git a/src/panels/lovelace/cards/hui-markdown-card.js b/src/panels/lovelace/cards/hui-markdown-card.js new file mode 100644 index 0000000000..8c991c07ed --- /dev/null +++ b/src/panels/lovelace/cards/hui-markdown-card.js @@ -0,0 +1,67 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +import '../../../components/ha-card.js'; +import '../../../components/ha-markdown.js'; + +class HuiMarkdownCard extends PolymerElement { + static get template() { + return html` + + + + + `; + } + + static get properties() { + return { + config: Object, + noTitle: { + type: Boolean, + reflectToAttribute: true, + computed: '_computeNoTitle(config.title)', + }, + }; + } + + getCardSize() { + return this.config.content.split('\n').length; + } + + _computeNoTitle(title) { + return !title; + } +} + +customElements.define('hui-markdown-card', HuiMarkdownCard); diff --git a/src/panels/lovelace/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js similarity index 92% rename from src/panels/lovelace/hui-media-control-card.js rename to src/panels/lovelace/cards/hui-media-control-card.js index cbe2178d59..ffc811c3e6 100644 --- a/src/panels/lovelace/hui-media-control-card.js +++ b/src/panels/lovelace/cards/hui-media-control-card.js @@ -1,8 +1,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeDomain from '../../common/entity/compute_domain.js'; +import computeDomain from '../../../common/entity/compute_domain.js'; -import '../../cards/ha-media_player-card.js'; +import '../../../cards/ha-media_player-card.js'; import './hui-error-card.js'; class HuiMediaControlCard extends PolymerElement { diff --git a/src/panels/lovelace/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js similarity index 90% rename from src/panels/lovelace/hui-picture-glance-card.js rename to src/panels/lovelace/cards/hui-picture-glance-card.js index 5b6dbf217d..7da67341e7 100644 --- a/src/panels/lovelace/hui-picture-glance-card.js +++ b/src/panels/lovelace/cards/hui-picture-glance-card.js @@ -2,16 +2,16 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import '@polymer/paper-icon-button/paper-icon-button.js'; -import '../../components/ha-card.js'; +import '../../../components/ha-card.js'; -import { STATES_ON } from '../../common/const.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 stateIcon from '../../common/entity/state_icon.js'; +import { STATES_ON } from '../../../common/const.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 stateIcon from '../../../common/entity/state_icon.js'; -import EventsMixin from '../../mixins/events-mixin.js'; -import LocalizeMixin from '../../mixins/localize-mixin.js'; +import EventsMixin from '../../../mixins/events-mixin.js'; +import LocalizeMixin from '../../../mixins/localize-mixin.js'; const DOMAINS_FORCE_DIALOG = ['binary_sensor', 'device_tracker', 'sensor']; diff --git a/src/panels/lovelace/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js similarity index 93% rename from src/panels/lovelace/hui-plant-status-card.js rename to src/panels/lovelace/cards/hui-plant-status-card.js index 17b8a9a520..0d9045b454 100644 --- a/src/panels/lovelace/hui-plant-status-card.js +++ b/src/panels/lovelace/cards/hui-plant-status-card.js @@ -1,8 +1,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeDomain from '../../common/entity/compute_domain.js'; +import computeDomain from '../../../common/entity/compute_domain.js'; -import '../../cards/ha-plant-card.js'; +import '../../../cards/ha-plant-card.js'; import './hui-error-card.js'; class HuiPlantStatusCard extends PolymerElement { diff --git a/src/panels/lovelace/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js similarity index 93% rename from src/panels/lovelace/hui-weather-forecast-card.js rename to src/panels/lovelace/cards/hui-weather-forecast-card.js index d259d5537b..a27614c3ec 100644 --- a/src/panels/lovelace/hui-weather-forecast-card.js +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js @@ -1,8 +1,8 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import computeDomain from '../../common/entity/compute_domain.js'; +import computeDomain from '../../../common/entity/compute_domain.js'; -import '../../cards/ha-weather-card.js'; +import '../../../cards/ha-weather-card.js'; import './hui-error-card.js'; class HuiWeatherForecastCard extends PolymerElement { diff --git a/src/panels/lovelace/common/compute-card-element.js b/src/panels/lovelace/common/compute-card-element.js index 9c43f2880f..da0caab0ac 100644 --- a/src/panels/lovelace/common/compute-card-element.js +++ b/src/panels/lovelace/common/compute-card-element.js @@ -1,9 +1,24 @@ +import '../cards/hui-camera-preview-card.js'; +import '../cards/hui-entities-card.js'; +import '../cards/hui-entity-filter-card.js'; +import '../cards/hui-glance-card'; +import '../cards/hui-history-graph-card.js'; +import '../cards/hui-markdown-card.js'; +import '../cards/hui-media-control-card.js'; +import '../cards/hui-entity-picture-card.js'; +import '../cards/hui-picture-glance-card'; +import '../cards/hui-plant-status-card.js'; +import '../cards/hui-weather-forecast-card'; +import '../cards/hui-error-card.js'; + const CARD_TYPES = [ 'camera-preview', 'entities', 'entity-filter', + 'entity-picture', 'glance', 'history-graph', + 'markdown', 'media-control', 'picture-glance', 'plant-status', diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js index b43255e516..36f2c47a65 100644 --- a/src/panels/lovelace/hui-view.js +++ b/src/panels/lovelace/hui-view.js @@ -1,18 +1,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js'; -import './hui-camera-preview-card.js'; -import './hui-entities-card.js'; -import './hui-entity-filter-card.js'; -import './hui-glance-card'; -import './hui-history-graph-card.js'; -import './hui-media-control-card.js'; -import './hui-picture-card.js'; -import './hui-picture-glance-card'; -import './hui-plant-status-card.js'; -import './hui-weather-forecast-card'; -import './hui-error-card.js'; - import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js'; import computeCardElement from './common/compute-card-element.js';