thomas/lovelace-template-entity-row
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix #2. Fix #5.

Browse Source
This commit is contained in:
Thomas Lovén 2020-01-09 21:04:04 +01:00
parent 9ba282687d
commit 2829ae2946
3 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -35,15 +35,16 @@ entities:
```
## Options
- `icon`, `name`, `state`, `secondary` selects what icon, name, state and secondary_info text to display respectively
- `icon`, `name`, `state`, `secondary`, `image` selects what icon, name, state, secondary_info text and entity_picture to display respectively.
- `active` if this evaluates to "true", the icon gets the color `--paper-item-icon-active-color`. Otherwise `--paper-item-icon-color`
- `entity` if this evaluates to an entity id, `icon`, `name`, `state` and `image` will be taken from that entity unless manually overridden.
- `condition` if this is set but does not evaluate to "true", the row is not displayed.
All options accept [jinja2 templates](https://www.home-assistant.io/docs/configuration/templating/).
Jinja templates have access to a few special variables. Those are:
- `config` - an object containing the card, entity row or glance button configuration
- `config` - an object containing the card configuration
- `user` - the username of the currently logged in user
- `browser` - the deviceID of the current browser (see [browser_mod](https://github.com/thomasloven/hass-browser_mod)).
- `hash` - the hash part of the current URL.

68
src/main.js
View File

@ -6,23 +6,15 @@ class TemplateEntityRow extends LitElement {
static get properties() {
return {
hass: {},
_config: {},
state: {},
};
}
setConfig(config) {
this._config = config;
this.state = {
icon: "",
active: "",
name: "",
secondary: "",
state: "",
...config,
};
this.state = config;
for(const k of ["icon", "active", "name", "secondary", "state", "condition"]) {
for(const k of ["icon", "active", "name", "secondary", "state", "condition", "image", "entity"]) {
if(config[k]
&& (String(config[k]).includes("{%") || String(config[k]).includes("{{"))
) {
@ -31,6 +23,7 @@ class TemplateEntityRow extends LitElement {
this.requestUpdate();
}, {
template: config[k],
variables: {config},
entity_ids: config.entity_ids,
});
}
@ -38,31 +31,58 @@ class TemplateEntityRow extends LitElement {
}
render() {
if (this._config.condition && String(this.state.condition).toLowerCase() !== "true")
if (this.state.condition && String(this.state.condition).toLowerCase() !== "true")
return html``;
const active = String(this.state.active).toLowerCase();
const entity = this.hass.states[this.state.entity];
const icon = this.state.icon !== undefined
? this.state.icon || "no:icon"
: entity ? entity.attributes.icon : ""
;
const entity_picture = this.state.image !== undefined
? this.state.image
: entity ? entity.attributes.state_picture : ""
;
const name = this.state.name !== undefined
? this.state.name
: entity ? entity.attributes.friendly_name || entity.entity_id : ""
;
const secondary = this.state.secondary;
const state = this.state.state !== undefined
? this.state.state
: entity ? entity.state : ""
;
const active = String(this.state.active).toLowerCase() === "true";
return html`
<div id="wrapper">
<ha-icon
.icon=${this.state.icon}
style="
color: ${active === "true"
? "var(--paper-item-icon-active-color)"
: "var(--paper-item-icon-color)"
};
"
></ha-icon>
<state-badge
.hass=${this.hass}
.stateObj=${
{
entity_id: entity ? entity.entity_id : "light.",
state: this.state.active !== undefined
? active ? "on" : "off"
: entity ? entity.state : "off"
,
attributes: {
icon,
entity_picture
}
}
}
></state-badge>
<div class="flex">
<div
class="info"
>
${this.state.name}
${name}
<div class="secondary">
${this.state.secondary}
${secondary}
</div>
</div>
<div class="state">
${this.state.state}
${state}
</div>
</div>
</div>

20
template-entity-row.js
View File

@ -1,23 +1,21 @@
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var i=t[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(r,i,function(t){return e[t]}.bind(null,i));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t);const r=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),i=r.prototype.html;r.prototype.css;function o(){return document.querySelector("home-assistant").hass}let s=function(){if(window.fully&&"function"==typeof fully.getDeviceId)return fully.getDeviceId();if(!localStorage["lovelace-player-device-id"]){const e=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);localStorage["lovelace-player-device-id"]=`${e()}${e()}-${e()}${e()}`}return localStorage["lovelace-player-device-id"]}();function a(e,t,n){e||(e=o().connection);let r={user:o().user.name,browser:s,hash:location.hash.substr(1)||" ",...n.variables},i=n.template,a=n.entity_ids;return e.subscribeMessage(e=>t(e.result),{type:"render_template",template:i,variables:r,entity_ids:a})}customElements.define("template-entity-row",class extends r{static get properties(){return{hass:{},_config:{},state:{}}}setConfig(e){this._config=e,this.state={icon:"",active:"",name:"",secondary:"",state:"",...e};for(const t of["icon","active","name","secondary","state","condition"])e[t]&&(String(e[t]).includes("{%")||String(e[t]).includes("{{"))&&a(null,e=>{this.state[t]=e,this.requestUpdate()},{template:e[t],entity_ids:e.entity_ids})}render(){if(this._config.condition&&"true"!==String(this.state.condition).toLowerCase())return i``;const e=String(this.state.active).toLowerCase();return i`
!function(t){var e={};function i(s){if(e[s])return e[s].exports;var n=e[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.m=t,i.c=e,i.d=function(t,e,s){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)i.d(s,n,function(e){return t[e]}.bind(null,n));return s},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=0)}([function(t,e,i){"use strict";i.r(e);const s=customElements.get("home-assistant-main")?Object.getPrototypeOf(customElements.get("home-assistant-main")):Object.getPrototypeOf(customElements.get("hui-view")),n=s.prototype.html;s.prototype.css;function r(){return document.querySelector("home-assistant").hass}let a=function(){if(window.fully&&"function"==typeof fully.getDeviceId)return fully.getDeviceId();if(!localStorage["lovelace-player-device-id"]){const t=()=>Math.floor(1e5*(1+Math.random())).toString(16).substring(1);localStorage["lovelace-player-device-id"]=`${t()}${t()}-${t()}${t()}`}return localStorage["lovelace-player-device-id"]}();function o(t,e,i){t||(t=r().connection);let s={user:r().user.name,browser:a,hash:location.hash.substr(1)||" ",...i.variables},n=i.template,o=i.entity_ids;return t.subscribeMessage(t=>e(t.result),{type:"render_template",template:n,variables:s,entity_ids:o})}customElements.define("template-entity-row",class extends s{static get properties(){return{hass:{},state:{}}}setConfig(t){this._config=t,this.state=t;for(const e of["icon","active","name","secondary","state","condition","image","entity"])t[e]&&(String(t[e]).includes("{%")||String(t[e]).includes("{{"))&&o(null,t=>{this.state[e]=t,this.requestUpdate()},{template:t[e],variables:{config:t},entity_ids:t.entity_ids})}render(){if(this.state.condition&&"true"!==String(this.state.condition).toLowerCase())return n``;const t=this.hass.states[this.state.entity],e=void 0!==this.state.icon?this.state.icon||"no:icon":t?t.attributes.icon:"",i=void 0!==this.state.image?this.state.image:t?t.attributes.state_picture:"",s=void 0!==this.state.name?this.state.name:t?t.attributes.friendly_name||t.entity_id:"",r=this.state.secondary,a=void 0!==this.state.state?this.state.state:t?t.state:"",o="true"===String(this.state.active).toLowerCase();return n`
<div id="wrapper">
<ha-icon
.icon=${this.state.icon}
style="
color: ${"true"===e?"var(--paper-item-icon-active-color)":"var(--paper-item-icon-color)"};
"
></ha-icon>
<state-badge
.hass=${this.hass}
.stateObj=${{entity_id:t?t.entity_id:"light.",state:void 0!==this.state.active?o?"on":"off":t?t.state:"off",attributes:{icon:e,entity_picture:i}}}
></state-badge>
<div class="flex">
<div
class="info"
>
${this.state.name}
${s}
<div class="secondary">
${this.state.secondary}
${r}
</div>
</div>
<div class="state">
${this.state.state}
${a}
</div>
</div>
</div>
`}static get styles(){let e=customElements.get("hui-generic-entity-row").styles;return e.cssText=e.cssText.replace(":host","#wrapper").replace("state-badge","ha-icon")+"\n .state {\n text-align: right;\n }\n #wrapper {\n min-height: 40px;\n }\n ",e}})}]);
`}static get styles(){let t=customElements.get("hui-generic-entity-row").styles;return t.cssText=t.cssText.replace(":host","#wrapper").replace("state-badge","ha-icon")+"\n .state {\n text-align: right;\n }\n #wrapper {\n min-height: 40px;\n }\n ",t}})}]);