Content_alignment for entities row (#86)

info.md

@@ -1,6 +1,10 @@
 {% if installed %}
 
 ### Features
+{% if version_installed.replace("v", "").replace(".","") | int < 10630  %}
+- Added `content_alignment (left, center or right) for entities row`
+{% endif %}
+
 {% if version_installed.replace("v", "").replace(".","") | int < 10621  %}
 - Fixed `Cards not updating on every state change`
 {% endif %}

package.json

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

src/entity.ts

@@ -1,7 +1,7 @@
 import { secondsToDuration } from './lib/seconds_to_duration';
 import { formatNumber } from './lib/format_number';
 import { computeStateDisplay, computeStateDomain } from './lib/compute_state_display';
-import { checkConditionalValue, evalTemplate, getValue, isObject, isUnavailable } from './util';
+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 { html, HTMLTemplateResult, LitElement } from 'lit';
@@ -123,20 +123,20 @@ export const entityStyles = (styles: EntityStyles) =>
             .join('') 
         : '';
 
-export const renderRows = (rows: RoomCardRow[], hass: HomeAssistant, element: LitElement)  : HTMLTemplateResult => { 
+export const renderRows = (config: RoomCardConfig, rows: RoomCardRow[], hass: HomeAssistant, element: LitElement)  : HTMLTemplateResult => { 
     const filteredRows = rows.filter(row => { return !hideIfRow(row, hass); });
 
     return html`${filteredRows.map((row) => {
-        return renderEntitiesRow(row.entities, hass, element);
+        return renderEntitiesRow(config, row.entities, hass, element);
     })}`;
 }
 
-export const renderEntitiesRow = (entities: RoomCardEntity[], hass: HomeAssistant, element: LitElement, classes?: string) : HTMLTemplateResult => {    
+export const renderEntitiesRow = (config: RoomCardConfig, entities: RoomCardEntity[], hass: HomeAssistant, element: LitElement, classes?: string) : HTMLTemplateResult => {    
     if(entities === undefined) {
         return null;
-    }
+    }   
 
-    return html`<div class="entities-row${classes !== undefined ? ` ${classes}` : '' }">${entities.map((entity) => renderEntity(entity, hass, element))}</div>`;
+    return html`<div class="${renderClasses(config, classes)}">${entities.map((entity) => renderEntity(entity, hass, element))}</div>`;
 }
 
 export const renderEntity = (entity: RoomCardEntity, hass: HomeAssistant, element: LitElement) : HTMLTemplateResult => {    

src/index.ts

@@ -86,8 +86,8 @@ export default class RoomCard extends LitElement {
                         </div>
                     </div>
                     ${this.rows !== undefined && this.rows.length > 0 ? 
-                        renderRows(this.rows, this._hass, this) : 
-                        renderEntitiesRow(this.entities, this._hass, this)}
+                        renderRows(this.config, this.rows, this._hass, this) : 
+                        renderEntitiesRow(this.config, this.entities, this._hass, this)}
                     ${this._refCards}
                 </ha-card>
             `;

src/styles.ts

@@ -22,7 +22,6 @@ export const style = css`
         flex-direction: row;
         flex-wrap: wrap;
         display: inline-flex;
-        justify-content: left;
         align-items: center;
         padding: 0 20px 10px 20px;
     }
@@ -79,4 +78,13 @@ export const style = css`
     .clickable {
         cursor: pointer;
     }
+    .content-left {
+        justify-content: left;
+    }
+    .content-center {
+        justify-content: center;
+    }
+    .content-right {
+        justify-content: right;
+    }
 `;

src/types/room-card-types.ts

@@ -42,7 +42,14 @@ export interface RoomCardConfig extends LovelaceCardConfig {
     title?: string;
     name?: string;
     styles?: EntityStyles;
-    templates?: RoomCardTemplateContainer[]
+    templates?: RoomCardTemplateContainer[];
+    content_alignment?: RoomCardAlignment
+}
+
+export enum RoomCardAlignment {
+    Left = 'left',
+    Center = 'center',
+    Right = 'right'
 }
 
 export interface RoomCardRow {

src/util.ts

@@ -105,4 +105,8 @@ export const evalTemplate = (hass: HomeAssistant | undefined, state: HassEntity,
       e.name = 'RoomCardJSTemplateError';
       throw e;
     }
-  }
+  }
+
+export const renderClasses = (config: RoomCardConfig, classes?: string): string => {
+    return `entities-row ${config.content_alignment ? `content-${config.content_alignment}` : 'content-left'}${classes !== undefined ? ` ${classes}` : '' }`;
+}

tests/entity/renderEntitiesRow.test.ts

@@ -2,21 +2,23 @@ import { HomeAssistant } from 'custom-card-helpers';
 import { createMock } from 'ts-auto-mock';
 import { LitElement } from 'lit';
 import { renderEntitiesRow } from '../../src/entity';
-import { HomeAssistantEntity, RoomCardEntity } from '../../src/types/room-card-types';
+import { HomeAssistantEntity, RoomCardConfig, RoomCardEntity } from '../../src/types/room-card-types';
 import { getRenderString } from '../utils';
 
 describe('Testing entity file function renderEntitiesRow', () => {
     const hass = createMock<HomeAssistant>();
     const stateObj = createMock<HomeAssistantEntity>();
+    const config = createMock<RoomCardConfig>();
+
     test('Passing empty entities should return entities-row withouth children', () => {   
 
         const entities: RoomCardEntity[] = [];
         const element: LitElement = createMock<LitElement>();
 
-        const result = renderEntitiesRow(entities, hass, element);
+        const result = renderEntitiesRow(config, entities, hass, element);
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<div class="entities-row"></div>');
+        expect(htmlResult).toMatch('<div class="entities-row content-left"></div>');
     }),
     test('Passing entities should return entities-row with one child element', () => {   
 
@@ -30,10 +32,10 @@ describe('Testing entity file function renderEntitiesRow', () => {
         }];
         const element: LitElement = createMock<LitElement>();
 
-        const result = renderEntitiesRow(entities, hass, element);
+        const result = renderEntitiesRow(config, entities, hass, element);
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<div class="entities-row"><div class="entity" style="" @mousedown="start" @mouseup="end" @touchstart="start" @touchend="end" @touchcancel="end"> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
+        expect(htmlResult).toMatch('<div class="entities-row content-left"><div class="entity" style="" @mousedown="start" @mouseup="end" @touchstart="start" @touchend="end" @touchcancel="end"> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
     }),
     test('Passing entities and classes should return entities-row with one child element', () => {   
 
@@ -47,9 +49,9 @@ describe('Testing entity file function renderEntitiesRow', () => {
         }];
         const element: LitElement = createMock<LitElement>();
 
-        const result = renderEntitiesRow(entities, hass, element, 'test-class');
+        const result = renderEntitiesRow(config, entities, hass, element, 'test-class');
         const htmlResult = getRenderString(result);
 
-        expect(htmlResult).toMatch('<div class="entities-row test-class"><div class="entity" style="" @mousedown="start" @mouseup="end" @touchstart="start" @touchend="end" @touchcancel="end"> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
+        expect(htmlResult).toMatch('<div class="entities-row content-left test-class"><div class="entity" style="" @mousedown="start" @mouseup="end" @touchstart="start" @touchend="end" @touchcancel="end"> <span>Test Entity</span> <div><state-badge class="icon-small " .stateObj="" .overrideIcon="mdi:light" .stateColor="" style="" ></state-badge></div> </div></div>');
     })
 })