diff --git a/src/panels/lovelace/cards/hui-camera-preview-card.js b/src/panels/lovelace/cards/hui-camera-preview-card.js
index eb2262306c..5ecbd62b85 100644
--- a/src/panels/lovelace/cards/hui-camera-preview-card.js
+++ b/src/panels/lovelace/cards/hui-camera-preview-card.js
@@ -1,55 +1,15 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
import '../../../cards/ha-camera-card.js';
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
-class HuiCameraPreviewCard extends PolymerElement {
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: '_hassChanged'
- },
- };
+class HuiCameraPreviewCard extends LegacyWrapperCard {
+ constructor() {
+ super('ha-camera-card', 'camera');
}
getCardSize() {
return 4;
}
-
- setConfig(config) {
- if (!validateEntityConfig(config, 'camera')) {
- throw new Error('Error in card configuration.');
- }
-
- this._config = config;
- this._entityId = null;
-
- if (this.lastChild) {
- this.removeChild(this.lastChild);
- }
-
- const entityId = config.entity;
- if (!(entityId in this.hass.states)) {
- return;
- }
-
- const element = document.createElement('ha-camera-card');
- element.stateObj = this.hass.states[entityId];
- element.hass = this.hass;
- this.appendChild(element);
- this._entityId = entityId;
- }
-
- _hassChanged(hass) {
- const entityId = this._entityId;
- if (entityId && entityId in hass.states) {
- const element = this.lastChild;
- element.stateObj = hass.states[entityId];
- element.hass = hass;
- }
- }
}
customElements.define('hui-camera-preview-card', HuiCameraPreviewCard);
diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js
index 6edc11993d..f5ab0cc5df 100644
--- a/src/panels/lovelace/cards/hui-entities-card.js
+++ b/src/panels/lovelace/cards/hui-entities-card.js
@@ -49,12 +49,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
-
+
+
+
`;
@@ -85,12 +87,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
return 1 + (this._config ? this._config.entities.length : 0);
}
- _computeTitle(config) {
- return config.title;
+ _showHeaderToggle(show) {
+ // If show is undefined, we treat it as true
+ return show !== false;
}
- _showHeaderToggle(show) {
- return show !== false;
+ _showHeader(config) {
+ // Show header if either title or toggle configured to show in it
+ return config.title || config.show_header_toggle;
}
setConfig(config) {
diff --git a/src/panels/lovelace/cards/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
index 3a99384780..4aa221db73 100644
--- a/src/panels/lovelace/cards/hui-glance-card.js
+++ b/src/panels/lovelace/cards/hui-glance-card.js
@@ -22,6 +22,9 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
ha-card {
padding: 16px;
}
+ ha-card[header] {
+ padding-top: 0;
+ }
.entities {
padding: 4px 0;
display: flex;
@@ -47,7 +50,7 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
}
-
+
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
index a9f7998573..d8b3e2c935 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.js
+++ b/src/panels/lovelace/cards/hui-history-graph-card.js
@@ -12,9 +12,12 @@ class HuiHistoryGraphCard extends PolymerElement {
ha-card {
padding: 16px;
}
+ ha-card[header] {
+ padding-top: 0;
+ }
-
+
*:first-child {
margin-top: 0;
}
- ha-markdown p:last-child {
+ ha-markdown > *:last-child {
margin-bottom: 0;
}
ha-markdown a {
@@ -46,7 +46,7 @@ class HuiMarkdownCard extends PolymerElement {
noTitle: {
type: Boolean,
reflectToAttribute: true,
- computed: '_computeNoTitle(config.title)',
+ computed: '_computeNoTitle(_config.title)',
},
};
}
diff --git a/src/panels/lovelace/cards/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js
index e2626f0edf..c9ce79be20 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.js
+++ b/src/panels/lovelace/cards/hui-media-control-card.js
@@ -1,53 +1,10 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
import '../../../cards/ha-media_player-card.js';
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
-class HuiMediaControlCard extends PolymerElement {
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: '_hassChanged'
- },
- };
- }
-
- getCardSize() {
- return 3;
- }
-
- setConfig(config) {
- if (!validateEntityConfig(config, 'media_player')) {
- throw new Error('Error in card configuration.');
- }
-
- this._entityId = null;
-
- if (this.lastChild) {
- this.removeChild(this.lastChild);
- }
-
- const entityId = config.entity;
- if (!(entityId in this.hass.states)) {
- return;
- }
-
- const element = document.createElement('ha-media_player-card');
- element.stateObj = this.hass.states[entityId];
- element.hass = this.hass;
- this.appendChild(element);
- this._entityId = entityId;
- }
-
- _hassChanged(hass) {
- const entityId = this._entityId;
- if (entityId && entityId in hass.states) {
- const element = this.lastChild;
- element.stateObj = hass.states[entityId];
- element.hass = hass;
- }
+class HuiMediaControlCard extends LegacyWrapperCard {
+ constructor() {
+ super('ha-media_player-card', 'media_player');
}
}
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index ccc8ee06a5..2220667c59 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -97,8 +97,15 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
return {
hass: Object,
_config: Object,
- _entitiesDialog: Array,
- _entitiesService: Array,
+ _entitiesDialog: {
+ type: Array,
+ computed: '_computeEntitiesDialog(hass, _config, _entitiesService)',
+ },
+ _entitiesService: {
+ type: Array,
+ value: [],
+ computed: '_computeEntitiesService(hass, _config)',
+ },
};
}
@@ -112,19 +119,23 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
}
this._config = config;
- let dialog = [];
- let service = [];
+ }
+
+ _computeEntitiesDialog(hass, config, entitiesService) {
if (config.force_dialog) {
- dialog = config.entities;
- } else {
- service = config.entities.filter(entity =>
- canToggleState(this.hass, this.hass.states[entity]));
- dialog = config.entities.filter(entity => !service.includes(entity));
+ return config.entities;
}
- this.setProperties({
- _entitiesDialog: dialog,
- _entitiesService: service,
- });
+
+ return config.entities.filter(entity => !entitiesService.includes(entity));
+ }
+
+ _computeEntitiesService(hass, config) {
+ if (config.force_dialog) {
+ return [];
+ }
+
+ return config.entities.filter(entity =>
+ canToggleState(this.hass, this.hass.states[entity]));
}
_showEntity(entityId, states) {
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js
index 1fae28ddda..0b2f9ccb6f 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.js
+++ b/src/panels/lovelace/cards/hui-plant-status-card.js
@@ -1,53 +1,10 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
import '../../../cards/ha-plant-card.js';
-import validateEntityConfig from '../common/validate-entity-config.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
-class HuiPlantStatusCard extends PolymerElement {
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: '_hassChanged'
- },
- };
- }
-
- getCardSize() {
- return 3;
- }
-
- setConfig(config) {
- if (!validateEntityConfig(config, 'plant')) {
- throw new Error('Error in card configuration.');
- }
-
- this._entityId = null;
-
- if (this.lastChild) {
- this.removeChild(this.lastChild);
- }
-
- const entityId = config.entity;
- if (!(entityId in this.hass.states)) {
- return;
- }
-
- const element = document.createElement('ha-plant-card');
- element.stateObj = this.hass.states[entityId];
- element.hass = this.hass;
- this.appendChild(element);
- this._entityId = entityId;
- }
-
- _hassChanged(hass) {
- const entityId = this._entityId;
- if (entityId && entityId in hass.states) {
- const element = this.lastChild;
- element.stateObj = hass.states[entityId];
- element.hass = hass;
- }
+class HuiPlantStatusCard extends LegacyWrapperCard {
+ constructor() {
+ super('ha-plant-card', 'plant');
}
}
diff --git a/src/panels/lovelace/cards/hui-row-card.js b/src/panels/lovelace/cards/hui-row-card.js
index fc36c3a5e0..4e950be970 100644
--- a/src/panels/lovelace/cards/hui-row-card.js
+++ b/src/panels/lovelace/cards/hui-row-card.js
@@ -54,6 +54,7 @@ class HuiRowCard extends PolymerElement {
if (!config || !config.cards || !Array.isArray(config.cards)) {
throw new Error('Card config incorrect.');
}
+ this._config = config;
if (this.$) this._buildConfig();
}
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js
index 0ffcd7cc60..40c38c4f87 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.js
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.js
@@ -1,54 +1,15 @@
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '../../../cards/ha-camera-card.js';
-import '../../../cards/ha-weather-card.js';
+import LegacyWrapperCard from './hui-legacy-wrapper-card.js';
-import validateEntityConfig from '../common/validate-entity-config.js';
-
-class HuiWeatherForecastCard extends PolymerElement {
- static get properties() {
- return {
- hass: {
- type: Object,
- observer: '_hassChanged'
- },
- };
+class HuiWeatherForecastCard extends LegacyWrapperCard {
+ constructor() {
+ super('ha-weather-card', 'weather');
}
getCardSize() {
return 4;
}
-
- setConfig(config) {
- if (!validateEntityConfig(config, 'weather')) {
- throw new Error('Error in card configuration.');
- }
-
- this._entityId = null;
-
- if (this.lastChild) {
- this.removeChild(this.lastChild);
- }
-
- const entityId = config.entity;
- if (!(entityId in this.hass.states)) {
- return;
- }
-
- const element = document.createElement('ha-weather-card');
- element.stateObj = this.hass.states[entityId];
- element.hass = this.hass;
- this.appendChild(element);
- this._entityId = entityId;
- }
-
- _hassChanged(hass) {
- const entityId = this._entityId;
- if (entityId && entityId in hass.states) {
- const element = this.lastChild;
- element.stateObj = hass.states[entityId];
- element.hass = hass;
- }
- }
}
customElements.define('hui-weather-forecast-card', HuiWeatherForecastCard);
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index 08ca649ed5..37d86a835c 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/src/panels/lovelace/hui-view.js
@@ -56,6 +56,7 @@ class HUIView extends PolymerElement {
`;
}
+
static get properties() {
return {
hass: {
@@ -65,16 +66,21 @@ class HUIView extends PolymerElement {
columns: {
type: Number,
- observer: '_configChanged',
},
config: {
type: Object,
- observer: '_configChanged',
},
};
}
+ static get observers() {
+ return [
+ // Put all properties in 1 observer so we only call configChanged once
+ '_configChanged(columns, config)'
+ ];
+ }
+
constructor() {
super();
this._elements = [];