Support format config for date/time values (closes #43)

benct · Mar 8, 2020 · 75455b2 · 75455b2
1 parent 17b6d56
commit 75455b2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,7 @@ This card produces an `entity-row` and must therefore be configured as an entity
 | show_state | bool | `true` | Set to `false` to hide the entity state
 | state_header | string | | Show header text above the main entity state
 | state_color | bool | `false` | Enable colored icon when entity is active
+| format | string | | Format timestamp value (`relative`, `date`, `time`, `datetime`)
 | | | |
 | entities | list | *see below* | Additional entity IDs or entity object(s)
 | secondary_info | string/object | *see below* | Custom `secondary_info` entity object
@@ -63,6 +64,7 @@ attribute value instead of the state value. `icon` lets you display an icon inst
 | icon | string/bool | `false` | Display default or custom icon instead of state or attribute value
 | state_color | bool | `false` | Enable colored icon when entity is active
 | tap_action | object | *see below* | Custom entity tap action
+| format | string | | Format timestamp value (`relative`, `date`, `time`, `datetime`)
 
 ### Secondary Info
 
@@ -76,6 +78,7 @@ or an object containing the following configuration:
 | attribute | string | | A valid attribute key for the entity
 | name | string/bool | `friendly_name` | Override entity `friendly_name`, or `false` to hide
 | unit | string | `unit_of_measurement` | Override entity `unit_of_measurement`
+| format | string | | Format timestamp value (`relative`, `date`, `time`, `datetime`)
 
 ### Tap Action
 

diff --git a/multiple-entity-row.js b/multiple-entity-row.js
@@ -84,34 +84,57 @@
             <div class="flex">
                 <div class="info" @click="${this.onRowClick}">
                     ${this.state.name}
-                    <div class="secondary">
-                        ${this.lastChanged
-                ? html`<ha-relative-time datetime="${this.state.stateObj.last_changed}" .hass="${this._hass}"></ha-relative-time>`
-                : (this.state.info && `${this.state.info.name ? `${this.state.info.name} ` : ''}${this.state.info.value}`)}
-                    </div>
+                    <div class="secondary">${this.renderSecondaryInfo()}</div>
                 </div>
                 ${this.state.entities.map(entity => this.renderEntity(entity))}
                 ${this.state.value ? html`
                 <div class="state entity" @click="${this.onStateClick}">
                     ${this.stateHeader && html`<span>${this.stateHeader}</span>`}
-                    ${this.state.toggle
-                ? html`<div class="toggle"><ha-entity-toggle .stateObj="${this.state.stateObj}" .hass="${this._hass}"></ha-entity-toggle></div>`
-                : html`<div>${this.state.value}</div>`}
+                    ${this.renderMainState()}
                 </div>` : null}
             </div>`;
         }
 
+        renderMainState() {
+            if (this.state.toggle) return html`<div class="toggle">${this.renderToggle(this.state.stateObj)}</div>`;
+            else if (this._config.format) return this.renderTimestamp(this.state.value, this._config.format);
+            else return html`<div>${this.state.value}</div>`;
+        }
+
+        renderSecondaryInfo() {
+            return this.lastChanged
+                ? html`<ha-relative-time datetime="${this.state.stateObj.last_changed}" .hass="${this._hass}"></ha-relative-time>`
+                : this.state.info && this.state.info.format
+                    ? this.renderTimestamp(this.state.info.value, this.state.info.format)
+                    : (this.state.info && `${this.state.info.name ? `${this.state.info.name} ` : ''}${this.state.info.value}`)
+        }
+
+        renderToggle(stateObj) {
+            return html`<ha-entity-toggle .stateObj="${stateObj}" .hass="${this._hass}"></ha-entity-toggle>`;
+        }
+
+        renderTimestamp(value, format) {
+            return !['unknown', 'unavailable'].includes(value.toLowerCase())
+                ? html`<hui-timestamp-display .ts=${new Date(value)} .format=${format} .hass=${this._hass}></hui-timestamp-display>`
+                : html`${value}`;
+        }
+
+        renderIcon(entity) {
+            return html`<state-badge class="icon-small" .stateObj="${entity.stateObj}" .overrideIcon="${entity.icon}" .stateColor="${entity.state_color}"></state-badge>`;
+        }
+
+        renderEntityValue(entity) {
+            if (entity.toggle) return this.renderToggle(entity.stateObj);
+            else if (entity.icon) return this.renderIcon(entity);
+            else if (entity.format) return this.renderTimestamp(entity.value, entity.format);
+            else return html`${entity.value}`;
+        }
+
         renderEntity(entity) {
             return entity ? html`
             <div class="entity" @click="${entity.onClick}">
                 <span>${entity.name}</span>
-                <div>
-                ${entity.toggle
-                ? html`<ha-entity-toggle .stateObj="${entity.stateObj}" .hass="${this._hass}"></ha-entity-toggle>`
-                : entity.icon
-                    ? html`<state-badge class="icon-small" .stateObj="${entity.stateObj}" .overrideIcon="${entity.icon}" .stateColor="${entity.state_color}"></state-badge>`
-                    : html`${entity.value}`}
-                </div>
+                <div>${this.renderEntityValue(entity)}</div>
             </div>` : null;
         }
 
@@ -187,6 +210,7 @@
                     : this.entityStateValue(stateObj, config.unit),
                 toggle: this.checkToggle(config, stateObj),
                 icon: config.icon === true ? stateObj.attributes.icon : config.icon,
+                format: config.format || false,
                 state_color: config.state_color || false,
                 onClick: this.getAction(config.tap_action, stateObj.entity_id),
             };