mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-07 17:36:35 +00:00
Random fixes (#1369)
* Random fixes * weather card to use legacy wrapper * Lint
This commit is contained in:
parent
a8063f3359
commit
cdb7a6261e
@ -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);
|
||||
|
@ -49,12 +49,14 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
|
||||
</style>
|
||||
|
||||
<ha-card>
|
||||
<div class='header'>
|
||||
<div class="name">[[_computeTitle(_config)]]</div>
|
||||
<template is="dom-if" if="[[_showHeaderToggle(_config.show_header_toggle)]]">
|
||||
<hui-entities-toggle hass="[[hass]]" entities="[[_config.entities]]"></hui-entities-toggle>
|
||||
</template>
|
||||
</div>
|
||||
<template is='dom-if' if='[[_showHeader(_config)]]'>
|
||||
<div class='header'>
|
||||
<div class="name">[[_config.title]]</div>
|
||||
<template is="dom-if" if="[[_showHeaderToggle(_config.show_header_toggle)]]">
|
||||
<hui-entities-toggle hass="[[hass]]" entities="[[_config.entities]]"></hui-entities-toggle>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div id="states"></div>
|
||||
</ha-card>
|
||||
`;
|
||||
@ -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) {
|
||||
|
@ -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)) {
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-card header="[[_config.title]]">
|
||||
<ha-card header$="[[_config.title]]">
|
||||
<div class="entities">
|
||||
<template is="dom-repeat" items="[[_computeEntities(_config)]]">
|
||||
<template is="dom-if" if="[[_showEntity(item, hass.states)]]">
|
||||
|
@ -12,9 +12,12 @@ class HuiHistoryGraphCard extends PolymerElement {
|
||||
ha-card {
|
||||
padding: 16px;
|
||||
}
|
||||
ha-card[header] {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<ha-card header=[[_config.title]]>
|
||||
<ha-card header$='[[_config.title]]'>
|
||||
<ha-state-history-data
|
||||
hass="[[hass]]"
|
||||
filter-type="recent-entity"
|
||||
|
49
src/panels/lovelace/cards/hui-legacy-wrapper-card.js
Normal file
49
src/panels/lovelace/cards/hui-legacy-wrapper-card.js
Normal file
@ -0,0 +1,49 @@
|
||||
import createErrorCardConfig from '../common/create-error-card-config.js';
|
||||
import validateEntityConfig from '../common/validate-entity-config.js';
|
||||
|
||||
|
||||
export default class LegacyWrapperCard extends HTMLElement {
|
||||
constructor(tag, domain) {
|
||||
super();
|
||||
this._tag = tag.toUpperCase();
|
||||
this._domain = domain;
|
||||
this._element = null;
|
||||
}
|
||||
|
||||
getCardSize() {
|
||||
return 3;
|
||||
}
|
||||
|
||||
setConfig(config) {
|
||||
if (!validateEntityConfig(config, this._domain)) {
|
||||
throw new Error('Error in card configuration.');
|
||||
}
|
||||
|
||||
this._config = config;
|
||||
}
|
||||
|
||||
set hass(hass) {
|
||||
const entityId = this._config.entity;
|
||||
|
||||
if (entityId in hass.states) {
|
||||
this._ensureElement(this._tag);
|
||||
this.lastChild.setProperties({
|
||||
hass,
|
||||
stateObj: hass.states[entityId],
|
||||
});
|
||||
} else {
|
||||
this._ensureElement('HUI-ERROR-CARD');
|
||||
this.lastChild.setConfig(createErrorCardConfig(`No state available for ${entityId}`, this._config));
|
||||
}
|
||||
}
|
||||
|
||||
_ensureElement(tag) {
|
||||
if (this.lastChild && this.lastChild.tagName === tag) return;
|
||||
|
||||
if (this.lastChild) {
|
||||
this.removeChild(this.lastChild);
|
||||
}
|
||||
|
||||
this.appendChild(document.createElement(tag));
|
||||
}
|
||||
}
|
@ -21,10 +21,10 @@ class HuiMarkdownCard extends PolymerElement {
|
||||
:host([no-title]) ha-markdown {
|
||||
padding-top: 16px;
|
||||
}
|
||||
ha-markdown p:first-child {
|
||||
ha-markdown > *: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)',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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();
|
||||
}
|
||||
|
||||
|
@ -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);
|
||||
|
@ -56,6 +56,7 @@ class HUIView extends PolymerElement {
|
||||
<div id='columns' on-rebuild-view='_debouncedConfigChanged'></div>
|
||||
`;
|
||||
}
|
||||
|
||||
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 = [];
|
||||
|
Loading…
x
Reference in New Issue
Block a user