From 2829ae2946b099d44cdb250cf4ba80050c6d7707 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= Date: Thu, 9 Jan 2020 21:04:04 +0100 Subject: [PATCH] Fix #2. Fix #5. --- README.md | 5 ++-- src/main.js | 68 +++++++++++++++++++++++++++--------------- template-entity-row.js | 20 ++++++------- 3 files changed, 56 insertions(+), 37 deletions(-) diff --git a/README.md b/README.md index 29d16a7..6d2365c 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/src/main.js b/src/main.js index 380384f..4bbb8fb 100644 --- a/src/main.js +++ b/src/main.js @@ -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`
- +
- ${this.state.name} + ${name}
- ${this.state.secondary} + ${secondary}
- ${this.state.state} + ${state}
diff --git a/template-entity-row.js b/template-entity-row.js index 3108c38..0fe839b 100644 --- a/template-entity-row.js +++ b/template-entity-row.js @@ -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`
- +
- ${this.state.name} + ${s}
- ${this.state.secondary} + ${r}
- ${this.state.state} + ${a}
- `}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}})}]); \ No newline at end of file + `}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}})}]); \ No newline at end of file