Skip to content

Commit

Permalink
Create separate scope to prevent duplicate LitElement declaration (fixes
Browse files Browse the repository at this point in the history 
 #21)
  • Loading branch information
@benct
benct committed Jan 8, 2020
1 parent 8fa9573 commit fa138f7
Showing 1 changed file with 111 additions and 110 deletions.
221 changes: 111 additions & 110 deletions multiple-entity-row.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
const LitElement = Object.getPrototypeOf(customElements.get("hui-view"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;
((LitElement) => {
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;

class MultipleEntityRow extends LitElement {
class MultipleEntityRow extends LitElement {

static get properties() {
return {
_hass: {},
_config: {},
state: {}
static get properties() {
return {
_hass: {},
_config: {},
state: {}
}
}
}

static get styles() {
return css`
static get styles() {
return css`
:host {
display: flex;
align-items: center;
Expand Down Expand Up @@ -68,21 +68,21 @@ class MultipleEntityRow extends LitElement {
.toggle {
margin-left: 8px;
}`;
}
}

renderEntity(data) {
return data ? html`
renderEntity(data) {
return data ? html`
<div class="entity" @click="${() => this.fireEvent(data.entity)}">
<span>${this.entityName(data)}</span>
<div>${data.showToggle
? html`<ha-entity-toggle .stateObj="${data.stateObj}" .hass="${this._hass}"></ha-entity-toggle>`
: data.showIcon ? html`<ha-icon icon="${data.showIcon}"></ha-icon>` : this.entityState(data)}
? html`<ha-entity-toggle .stateObj="${data.stateObj}" .hass="${this._hass}"></ha-entity-toggle>`
: data.showIcon ? html`<ha-icon icon="${data.showIcon}"></ha-icon>` : this.entityState(data)}
</div>
</div>` : null;
}
}

render() {
return html`
render() {
return html`
<state-badge
.stateObj="${this.state.main.stateObj}"
.overrideIcon="${this.state.main.icon}"
Expand All @@ -94,8 +94,8 @@ class MultipleEntityRow extends LitElement {
<div class="secondary">
${this.state.info && `${this.entityName(this.state.info)} ${this.entityState(this.state.info)}`}
${this.state.showLastChanged
? html`<ha-relative-time datetime="${this.state.main.stateObj.last_changed}" .hass="${this._hass}"></ha-relative-time>`
: null}
? html`<ha-relative-time datetime="${this.state.main.stateObj.last_changed}" .hass="${this._hass}"></ha-relative-time>`
: null}
</div>
</div>
${this.renderEntity(this.state.primary)}
Expand All @@ -105,109 +105,110 @@ class MultipleEntityRow extends LitElement {
<div class="state entity">
${this.state.main.name_state && html`<span>${this.state.main.name_state}</span>`}
${this.state.main.showToggle
? html`<div class="toggle"><ha-entity-toggle .stateObj="${this.state.main.stateObj}" .hass="${this._hass}"></ha-entity-toggle></div>`
: html`<div @click="${this.defaultMoreInfo}">${this.entityState(this.state.main)}</div>`}
? html`<div class="toggle"><ha-entity-toggle .stateObj="${this.state.main.stateObj}" .hass="${this._hass}"></ha-entity-toggle></div>`
: html`<div @click="${this.defaultMoreInfo}">${this.entityState(this.state.main)}</div>`}
</div>` : null}
</div>`;
}

entityName(data) {
return data && data.stateObj && data.name !== false ? this.computeStateName(data.stateObj, data.name) : null;
}

entityState(data) {
if (!data || !data.stateObj) return this._hass.localize('state.default.unavailable');
return data.attribute
? (data.attribute in data.stateObj.attributes)
? `${data.stateObj.attributes[data.attribute]} ${data.unit ? data.unit : ''}`
: this._hass.localize('state.default.unavailable')
: this.computeStateValue(data.stateObj, data.unit);
}
}

computeStateName(stateObj, name) {
return name || (stateObj.attributes.friendly_name === undefined
? stateObj.entity_id.substr(stateObj.entity_id.indexOf('.') + 1).replace(/_/g, ' ')
: stateObj.attributes.friendly_name || '');
}
entityName(data) {
return data && data.stateObj && data.name !== false ? this.computeStateName(data.stateObj, data.name) : null;
}

computeStateValue(stateObj, unit) {
let display;
const domain = stateObj.entity_id.substr(0, stateObj.entity_id.indexOf("."));
entityState(data) {
if (!data || !data.stateObj) return this._hass.localize('state.default.unavailable');
return data.attribute
? (data.attribute in data.stateObj.attributes)
? `${data.stateObj.attributes[data.attribute]} ${data.unit ? data.unit : ''}`
: this._hass.localize('state.default.unavailable')
: this.computeStateValue(data.stateObj, data.unit);
}

if (domain === "binary_sensor") {
if (stateObj.attributes.device_class) {
display = this._hass.localize(`state.${domain}.${stateObj.attributes.device_class}.${stateObj.state}`);
}
if (!display) {
display = this._hass.localize(`state.${domain}.default.${stateObj.state}`);
}
} else if (unit !== false && (unit || stateObj.attributes.unit_of_measurement) && !["unknown", "unavailable"].includes(stateObj.state)) {
display = `${stateObj.state} ${unit || stateObj.attributes.unit_of_measurement}`;
} else if (domain === "zwave") {
display = ["initializing", "dead"].includes(stateObj.state)
? this._hass.localize(`state.zwave.query_stage.${stateObj.state}`, 'query_stage', stateObj.attributes.query_stage)
: this._hass.localize(`state.zwave.default.${stateObj.state}`);
} else {
display = this._hass.localize(`state.${domain}.${stateObj.state}`);
computeStateName(stateObj, name) {
return name || (stateObj.attributes.friendly_name === undefined
? stateObj.entity_id.substr(stateObj.entity_id.indexOf('.') + 1).replace(/_/g, ' ')
: stateObj.attributes.friendly_name || '');
}

return display ||
this._hass.localize(`state.default.${stateObj.state}`) ||
this._hass.localize(`component.${domain}.state.${stateObj.state}`) ||
stateObj.state;
}
computeStateValue(stateObj, unit) {
let display;
const domain = stateObj.entity_id.substr(0, stateObj.entity_id.indexOf("."));

if (domain === "binary_sensor") {
if (stateObj.attributes.device_class) {
display = this._hass.localize(`state.${domain}.${stateObj.attributes.device_class}.${stateObj.state}`);
}
if (!display) {
display = this._hass.localize(`state.${domain}.default.${stateObj.state}`);
}
} else if (unit !== false && (unit || stateObj.attributes.unit_of_measurement) && !["unknown", "unavailable"].includes(stateObj.state)) {
display = `${stateObj.state} ${unit || stateObj.attributes.unit_of_measurement}`;
} else if (domain === "zwave") {
display = ["initializing", "dead"].includes(stateObj.state)
? this._hass.localize(`state.zwave.query_stage.${stateObj.state}`, 'query_stage', stateObj.attributes.query_stage)
: this._hass.localize(`state.zwave.default.${stateObj.state}`);
} else {
display = this._hass.localize(`state.${domain}.${stateObj.state}`);
}

setConfig(config) {
if (!config.entity) throw new Error('Please define an entity.');
if (config.primary && !config.primary.entity) throw new Error('Please define a primary entity.');
if (config.secondary && !config.secondary.entity) throw new Error('Please define a secondary entity.');
if (config.tertiary && !config.tertiary.entity) throw new Error('Please define a tertiary entity.');
if (config.info && !config.info.entity) throw new Error('Please define an info entity.');

this.state = {
showLastChanged: config.secondary_info === 'last-changed' && !config.info
};
this._config = config;
}
return display ||
this._hass.localize(`state.default.${stateObj.state}`) ||
this._hass.localize(`component.${domain}.state.${stateObj.state}`) ||
stateObj.state;
}

set hass(hass) {
this._hass = hass;
setConfig(config) {
if (!config.entity) throw new Error('Please define an entity.');
if (config.primary && !config.primary.entity) throw new Error('Please define a primary entity.');
if (config.secondary && !config.secondary.entity) throw new Error('Please define a secondary entity.');
if (config.tertiary && !config.tertiary.entity) throw new Error('Please define a tertiary entity.');
if (config.info && !config.info.entity) throw new Error('Please define an info entity.');

if (hass && this._config) {
this.state = {
...this.state,
main: this.initEntity(this._config),
primary: this.initEntity(this._config.primary),
secondary: this.initEntity(this._config.secondary),
tertiary: this.initEntity(this._config.tertiary),
info: this.initEntity(this._config.info)
showLastChanged: config.secondary_info === 'last-changed' && !config.info
};
this._config = config;
}

set hass(hass) {
this._hass = hass;

if (hass && this._config) {
this.state = {
...this.state,
main: this.initEntity(this._config),
primary: this.initEntity(this._config.primary),
secondary: this.initEntity(this._config.secondary),
tertiary: this.initEntity(this._config.tertiary),
info: this.initEntity(this._config.info)
}
}
}
}

initEntity(config) {
const stateObj = config && this._hass && this._hass.states[config.entity];
return stateObj ? Object.assign({}, config, {
stateObj: stateObj,
showToggle: config.toggle === true && stateObj.state && !["unknown", "unavailable"].includes(stateObj.state),
showIcon: config.icon === true ? stateObj.attributes.icon : config.icon
}) : null;
}
initEntity(config) {
const stateObj = config && this._hass && this._hass.states[config.entity];
return stateObj ? Object.assign({}, config, {
stateObj: stateObj,
showToggle: config.toggle === true && stateObj.state && !["unknown", "unavailable"].includes(stateObj.state),
showIcon: config.icon === true ? stateObj.attributes.icon : config.icon
}) : null;
}

defaultMoreInfo(e) {
e.stopPropagation();
this.fireEvent(this.state.main.entity);
}
defaultMoreInfo(e) {
e.stopPropagation();
this.fireEvent(this.state.main.entity);
}

fireEvent(entity, options = {}) {
const event = new Event('hass-more-info', {
bubbles: options.bubbles || true,
cancelable: options.cancelable || true,
composed: options.composed || true,
});
event.detail = {entityId: entity};
this.dispatchEvent(event);
fireEvent(entity, options = {}) {
const event = new Event('hass-more-info', {
bubbles: options.bubbles || true,
cancelable: options.cancelable || true,
composed: options.composed || true,
});
event.detail = {entityId: entity};
this.dispatchEvent(event);
}
}
}

customElements.define('multiple-entity-row', MultipleEntityRow);
customElements.define('multiple-entity-row', MultipleEntityRow);
})(window.LitElement || Object.getPrototypeOf(customElements.get("hui-view")));

0 comments on commit fa138f7

Please sign in to comment.