Extend templating (#102)

* Added styles template
* Added templating for title
* Added templating for name

info.md

@@ -1,6 +1,12 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10700  %}
+- Added `Support for templating for styles`
+- Added `Support for templating for title`
+- Added `Support for templating for name`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10640  %}
 - Added `content_alignment (left, center or right) for rows`
 {% endif %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "room-card",
-  "version": "1.06.41",
+  "version": "1.07.00",
   "description": "Show entities in Home Assistant's Lovelace UI",
   "keywords": [
     "home-assistant",

src/entity.ts

@@ -3,10 +3,10 @@ import { formatNumber } from './lib/format_number';
 import { computeStateDisplay, computeStateDomain } from './lib/compute_state_display';
 import { checkConditionalValue, evalTemplate, getValue, isObject, isUnavailable, renderClasses } from './util';
 import { ActionConfig, handleClick, HomeAssistant } from 'custom-card-helpers';
-import { HomeAssistantEntity, EntityCondition, RoomCardEntity, RoomCardIcon, RoomCardConfig, EntityStyles, RoomCardRow } from './types/room-card-types';
+import { HomeAssistantEntity, EntityCondition, RoomCardEntity, RoomCardIcon, RoomCardConfig, EntityStyles, RoomCardRow, RoomCardAttributeTemplate } from './types/room-card-types';
 import { html, HTMLTemplateResult, LitElement } from 'lit';
 import { LAST_CHANGED, LAST_UPDATED, TIMESTAMP_FORMATS } from './lib/constants';
-import { templateStyling } from './template';
+import { getTemplateOrAttribute, templateStyling } from './template';
 import { hideIfEntity, hideIfRow } from './hide';
 
 export const checkConfig = (config: RoomCardConfig) => {
@@ -17,9 +17,11 @@ export const checkConfig = (config: RoomCardConfig) => {
 
 export const computeEntity = (entityId: string) => entityId.substr(entityId.indexOf('.') + 1);
 
-export const entityName = (entity: RoomCardEntity) => {
+export const entityName = (entity: RoomCardEntity, hass: HomeAssistant) => {
+    const name = getTemplateOrAttribute(entity.name, hass, entity.stateObj)
+
     return (
-        entity.name ||
+        name ||
         (entity.entity ? entity.stateObj.attributes.friendly_name || computeEntity(entity.stateObj.entity_id) : null) ||
         null
     );
@@ -116,14 +118,23 @@ export const entityStateDisplay = (hass: HomeAssistant, entity: RoomCardEntity)
     return computeStateDisplay(hass.localize, modifiedStateObj, hass.locale);
 };
 
-export const entityStyles = (styles: EntityStyles) => 
-    isObject(styles)
-        ? Object.keys(styles)
-            .map((key) => `${key}: ${styles[key]};`)
-            .join('') 
-        : '';
+export const entityStyles = (styles: EntityStyles | RoomCardAttributeTemplate, stateObj: HomeAssistantEntity, hass: HomeAssistant) => {
+    if(!styles) {
+        return '';
+    }
+
+    if ('template' in styles) {
+        const templateDefinition = styles as RoomCardAttributeTemplate;
+        return evalTemplate(hass, stateObj, templateDefinition.template);
+    }
+
+    const entityStyles = styles as EntityStyles;
+    return Object.keys(entityStyles)
+            .map((key) => `${key}: ${entityStyles[key]};`)
+            .join('');
+}    
 
-export const renderRows = (config: RoomCardConfig, rows: RoomCardRow[], hass: HomeAssistant, element: LitElement)  : HTMLTemplateResult => { 
+export const renderRows = (rows: RoomCardRow[], hass: HomeAssistant, element: LitElement)  : HTMLTemplateResult => { 
     const filteredRows = rows.filter(row => { return !hideIfRow(row, hass); });
 
     return html`${filteredRows.map((row) => {
@@ -183,9 +194,9 @@ export const renderEntity = (entity: RoomCardEntity, hass: HomeAssistant, elemen
         }
     };
 
-    return html`<div class="entity" style="${entityStyles(entity.styles)}"
+    return html`<div class="entity" style="${entityStyles(entity.styles, hass.states[entity.entity], hass)}"
             @mousedown="${start}" @mouseup="${end}" @touchstart="${start}" @touchend="${end}" @touchcancel="${end}">
-            ${entity.show_name === undefined || entity.show_name ? html`<span>${entityName(entity)}</span>` : ''}
+            ${entity.show_name === undefined || entity.show_name ? html`<span>${entityName(entity, hass)}</span>` : ''}
             <div>${renderIcon(entity.stateObj, entity, hass)}</div>
             ${entity.show_state ? html`<span>${entityStateDisplay(hass, entity)}</span>` : ''}
         </div>`;
@@ -204,7 +215,7 @@ export const renderIcon = (stateObj: HomeAssistantEntity, config: RoomCardEntity
         .stateObj="${stateObj}"
         .overrideIcon="${isObject(customIcon) ? (customIcon as EntityCondition).icon : customIcon as string}"
         .stateColor="${config.state_color}"
-        style="${customStyling ?? entityStyles(isObject(customIcon) ? (customIcon as EntityCondition).styles : null)}"
+        style="${customStyling ?? entityStyles(isObject(customIcon) ? (customIcon as EntityCondition).styles : null, hass.states[config.entity], hass)}"
     ></state-badge>`;
 }
 
@@ -245,9 +256,12 @@ export const renderMainEntity = (entity: RoomCardEntity | undefined, config: Roo
     if (entity === undefined) {
         return null;
     }
+
+    const stateObj = hass.states[entity.entity];
+
     return html`<div
         class="main-state entity"
-        style="${entityStyles(entity.styles)}">
+        style="${entityStyles(entity.styles, stateObj, hass)}">
         ${config.entities?.length === 0 || config.icon
             ? renderIcon(entity.stateObj, config, hass, "main-icon")
             : entity.show_state !== undefined && entity.show_state === false ? '' : renderValue(entity, hass)}
@@ -261,8 +275,9 @@ export const renderTitle = (entity: RoomCardEntity, config: RoomCardConfig, hass
     const onClick = clickHandler(entity?.stateObj?.entity_id, config.tap_action, hass, element);
     const onDblClick = dblClickHandler(entity?.stateObj?.entity_id, config.double_tap_action, hass, element);
     const hasAction = config.tap_action !== undefined || config.double_tap_action !== undefined;
+    const title = getTemplateOrAttribute(config.title, hass, entity?.stateObj);
 
-    return html`<div class="title${(hasAction ? ' clickable' : null)}" @click="${onClick}" @dblclick="${onDblClick}">${renderMainEntity(entity, config, hass)} ${config.title}</div>`;
+    return html`<div class="title${(hasAction ? ' clickable' : null)}" @click="${onClick}" @dblclick="${onDblClick}">${renderMainEntity(entity, config, hass)} ${title}</div>`;
 }
 
 export const renderInfoEntity = (entity: RoomCardEntity, hass: HomeAssistant, element: LitElement) : HTMLTemplateResult => {
@@ -271,7 +286,7 @@ export const renderInfoEntity = (entity: RoomCardEntity, hass: HomeAssistant, el
     }
 
     const onClick = clickHandler(entity.stateObj.entity_id, entity.tap_action, hass, element);
-    return html`<div class="state entity ${entity.show_icon === true ? 'icon-entity' : ''}" style="${entityStyles(entity.styles)}" @click="${onClick}">${renderValue(entity, hass)}</div>`;
+    return html`<div class="state entity ${entity.show_icon === true ? 'icon-entity' : ''}" style="${entityStyles(entity.styles, entity.stateObj, hass)}" @click="${onClick}">${renderValue(entity, hass)}</div>`;
 }
 
 export const clickHandler = (entity: string, actionConfig: ActionConfig, hass: HomeAssistant, element: LitElement) => {

src/index.ts

@@ -78,15 +78,15 @@ export default class RoomCard extends LitElement {
 
         try {
             return html`
-                <ha-card elevation="2" style="${entityStyles(this.entity?.styles)}">
+                <ha-card elevation="2" style="${entityStyles(this.entity?.styles, this.stateObj, this._hass)}">
                     <div class="card-header">
                         ${renderTitle(this.entity, this.config, this._hass, this)}
                         <div class="entities-info-row">
                             ${this.info_entities.map((entity) => renderInfoEntity(entity, this._hass, this))}
                         </div>
                     </div>
                     ${this.rows !== undefined && this.rows.length > 0 ? 
-                        renderRows(this.config, this.rows, this._hass, this) : 
+                        renderRows(this.rows, this._hass, this) : 
                         renderEntitiesRow(this.config, this.entities, this._hass, this)}
                     ${this._refCards}
                 </ha-card>

src/lib/format_number.ts

@@ -4,7 +4,7 @@ import { FrontendLocaleData } from 'custom-card-helpers';
 import { FormattingOptions, HomeAssistantEntity } from '../types/room-card-types';
 import { NumberFormat } from './constants';
 
-export const round = (value: number, precision = 2) => Math.round(value * 10 ** precision) / 10 ** precision;
+export const round = (value?: number, precision = 2) => Math.round(value * 10 ** precision) / 10 ** precision;
 
 export const isNumericState = (stateObj: HomeAssistantEntity) =>
     !!stateObj.attributes.unit_of_measurement || !!stateObj.attributes.state_class;

src/template.ts

@@ -1,8 +1,8 @@
+/* eslint-disable @typescript-eslint/ban-types */
 import { HomeAssistant } from "custom-card-helpers";
-import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity, RoomCardIcon } from "./types/room-card-types";
+import { HomeAssistantEntity, RoomCardAttributeTemplate, RoomCardConfig, RoomCardEntity, RoomCardIcon } from "./types/room-card-types";
 import { evalTemplate } from "./util";
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 export const templateStyling = (stateObj: HomeAssistantEntity, config: RoomCardEntity | RoomCardConfig, hass: HomeAssistant) : Function => {
     const icon = (config.icon as RoomCardIcon);
 
@@ -20,4 +20,18 @@ export const mapTemplate = (entity: RoomCardEntity, config: RoomCardConfig) => {
     }
 
     return entity;
+}
+
+export const getTemplateOrAttribute = (attribute: string | number | RoomCardAttributeTemplate | boolean, hass: HomeAssistant, stateObj: HomeAssistantEntity) => {
+    if(!attribute) {
+        return attribute;
+    }
+
+    if(typeof attribute == "object") {
+        if('template' in attribute) {
+            return evalTemplate(hass, stateObj, (attribute as RoomCardAttributeTemplate).template);
+        }
+    }
+
+    return attribute;
 }

src/types/room-card-types.ts

@@ -2,7 +2,7 @@ import { ActionConfig, HomeAssistant, LovelaceCardConfig } from 'custom-card-hel
 import { HassEntity } from 'home-assistant-js-websocket';
 
 export interface RoomCardEntity {
-    name?: string;
+    name?: string | RoomCardAttributeTemplate;
     entity?: string;
     tap_action?: ActionConfig;
     hold_action?: ActionConfig;
@@ -18,7 +18,7 @@ export interface RoomCardEntity {
     stateObj: HomeAssistantEntity;
     attribute?: string;
     show_state?: boolean;
-    styles?: EntityStyles;
+    styles?: EntityStyles | RoomCardAttributeTemplate;
     icon?: string | RoomCardIcon;
     template?: string;
 }
@@ -39,9 +39,8 @@ export interface RoomCardConfig extends LovelaceCardConfig {
     icon?: string | RoomCardIcon;
     rows?: RoomCardRow[];
     show_icon?: boolean;
-    title?: string;
-    name?: string;
-    styles?: EntityStyles;
+    title?: string | RoomCardAttributeTemplate;
+    styles?: EntityStyles | RoomCardAttributeTemplate;
     templates?: RoomCardTemplateContainer[];
     content_alignment?: RoomCardAlignment;
 }
@@ -107,4 +106,8 @@ export interface RoomCardTemplateDefinition {
 
 export interface RoomCardLovelaceCardConfig extends LovelaceCardConfig {
     hide_if?: HideIfConfig;
+}
+
+export interface RoomCardAttributeTemplate {
+    template: string;
 }

tests/entity/entityIcon.test.ts

@@ -82,27 +82,29 @@ describe('Testing entity file function entityIcon', () => {
 
         expect(entityIcon(stateObj, config, hass)).toBe('mdi:on-icon');
     }),
-    test.each`
-    entity_id
-    ${'light.test_entity'}
-    ${'switch.test_entity'}
-    ${'binary_sensor.test_entity'}
-    ${'input_boolean.test_entity'}
-    `('Passing config with icon state_on/state_off should return state_off icon', ({entity_id}) => {    
-
-        stateObj.entity_id = entity_id;// 'input_boolean.test_entity';
-        stateObj.state = 'off';
-        const config: RoomCardConfig = {
-            entityIds: [],
-            type: '',
-            show_icon: true,
-            icon: {
-                state_on: 'mdi:on-icon',
-                state_off: 'mdi:off-icon',
-            }
-        };
+
+
+    [
+        ['light.test_entity'],
+        ['switch.test_entity'],
+        ['binary_sensor.test_entity'],
+        ['input_boolean.test_entity']
+    ].forEach(([entity_id]) => {
+        test(`Passing config with icon and entity_id ${entity_id} state_on/state_off should return state_off icon`, () => {
+            stateObj.entity_id = entity_id;// 'input_boolean.test_entity';
+            stateObj.state = 'off';
+            const config: RoomCardConfig = {
+                entityIds: [],
+                type: '',
+                show_icon: true,
+                icon: {
+                    state_on: 'mdi:on-icon',
+                    state_off: 'mdi:off-icon',
+                }
+            };
 
-        expect(entityIcon(stateObj, config, hass)).toBe('mdi:off-icon');
+            expect(entityIcon(stateObj, config, hass)).toBe('mdi:off-icon');
+        })
     }),
     test('Passing config with icon iconditions equals should return condition', () => {    
 

tests/entity/entityName.test.ts

@@ -3,22 +3,24 @@ import { HassEntity } from 'home-assistant-js-websocket';
 import { entityName } from '../../src/entity';
 import { RoomCardEntity } from '../../src/types/room-card-types';
 import { StubHassEntity } from '../testdata';
+import { HomeAssistant } from 'custom-card-helpers';
 
 describe('Testing entity file function computeEntity', () => {
+    const hass = createMock<HomeAssistant>();
     test('Passing RoomCardEntity with name should return entity name', () => {     
         const entity : RoomCardEntity = {
             name: 'Test entity',
             stateObj: StubHassEntity
         };
-        expect(entityName(entity)).toBe(entity.name);
+        expect(entityName(entity, hass)).toBe(entity.name);
     }),
     test('Passing RoomCardEntity with entity should return friendly name', () => {     
         StubHassEntity.attributes.friendly_name = 'Test Entity Friendly'
         const entity : RoomCardEntity = {
             entity: 'sensor.test_entity',
             stateObj: StubHassEntity
         };
-        expect(entityName(entity)).toBe(StubHassEntity.attributes.friendly_name);
+        expect(entityName(entity, hass)).toBe(StubHassEntity.attributes.friendly_name);
     }),
     test('Passing RoomCardEntity with entity should return entity_id', () => {    
         const hassEntity = createMock<HassEntity>();
@@ -27,14 +29,34 @@ describe('Testing entity file function computeEntity', () => {
             entity: 'sensor.test_entity',
             stateObj: hassEntity
         };
-        expect(entityName(entity)).toBe('test_entity_id');
+        expect(entityName(entity, hass)).toBe('test_entity_id');
     }),
     test('Passing RoomCardEntity with no config should return null', () => {    
         const hassEntity = createMock<HassEntity>();
         const entity : RoomCardEntity = {
             stateObj: hassEntity
         };
-        expect(entityName(entity)).toBe(null);
+        expect(entityName(entity, hass)).toBe(null);
+    }),
+
+    [
+        ['off', 'Name off'],
+        ['on', 'Name on']
+    ].forEach(([state, expected]) => {
+        test(`Passing RoomCardEntity with entity state ${state} and name template should return ${expected}`, ()=>{
+            const hassEntity = createMock<HassEntity>();
+            hassEntity.entity_id = 'sensor.test_entity_id';
+            hassEntity.state = state;
+            const entity : RoomCardEntity = {
+                entity: 'sensor.test_entity',
+                stateObj: hassEntity,
+                name: {
+                    template: "if (entity.state == 'on') return 'Name on'; else return 'Name off'; "
+                }
+            };
+
+            expect(entityName(entity, hass)).toBe(expected);
+        })
     })
 })
 

tests/entity/entityStyles.test.ts

@@ -1,12 +1,28 @@
+import { HomeAssistant } from 'custom-card-helpers';
+import { createMock } from 'ts-auto-mock';
 import { entityStyles } from '../../src/entity';
-import { EntityStyles } from '../../src/types/room-card-types';
+import { EntityStyles, HomeAssistantEntity, RoomCardAttributeTemplate } from '../../src/types/room-card-types';
 
 describe('Testing entity file function computeEntity', () => {
-    test('Passing entity_id should return entity name', () => {  
+    const stateObj = createMock<HomeAssistantEntity>();
+    const hass = createMock<HomeAssistant>();
+
+    test('Passing styles object should return style string', () => {  
         const styles: EntityStyles = {
             color: 'red',
             height: '100'
         }      
-        expect(entityStyles(styles)).toBe('color: red;height: 100;');
+        expect(entityStyles(styles, stateObj, hass)).toBe('color: red;height: 100;');
+    }),
+    test.each`
+    state | expected
+    ${'off'}  ${'color: red'}
+    ${'on'}  ${'color: blue'}
+    `('Passing RoomCardAttributeTemplate should return style string', ({ state, expected }) => {  
+        stateObj.state = state;
+        const template: RoomCardAttributeTemplate = {
+            template: "if (entity.state == 'off') return 'color: red'; else return 'color: blue';"
+        }      
+        expect(entityStyles(template, stateObj, hass)).toBe(expected);
     })
 })