Merge pull request #92 from htmltiger/htmltiger-patch-1

Support last_updated/changed of different entity in secondary_info template

README.md

@@ -43,7 +43,7 @@ or added by clicking the "Add to lovelace" button on the HACS dashboard after in
 | delay | number | `1000` | delay after pressing in ms, `0` to disable
 | speed | number | `0` | long press speed in ms, `0` to disable
 | refresh | number | `0` | `1` to disable debounce when change, may fix issues with updating
-| secondary_info | string |  | `last-changed` `last-updated` or any text/html,<br />you can also display states or other attributes of any entity for eg. <br /> `Light is %light.office_1:state` <br />`Room temp is %climate.heating:attributes:current_temperature`
+| secondary_info | string |  | `last_changed` `last_updated` or any text/html,<br />you can also display states or other attributes of any entity for eg. <br /> `Light is %light.office_1:state` <br />`Room temp is %climate.heating:attributes:current_temperature` <br />`%switch.switch_2:last_updated`
 | unit | string/bool  | `unit_of_measurement` | Override unit string (set to `false` to hide) <br />`time` to display the number in hh:mm:ss<br />`timehm` to display the number in hh:mm
 
 #### Advanced Config for climate/fan/input_datetime etc
@@ -131,6 +131,7 @@ entities:
     secondary_info: >
       Mode:<b style="color:red"> %climate.downstairs_heating:attributes:hvac_action </b><br />
       Current temp:<b style="color:green"> %climate.downstairs_heating:attributes:current_temperature </b>
+      %switch.downstairs_power:last_changed
 ```
 
 

numberbox-card.js

@@ -1,6 +1,6 @@
 ((LitElement) => {
 
-console.info('NUMBERBOX_CARD 4.10');
+console.info('NUMBERBOX_CARD 4.11');
 const html = LitElement.prototype.html;
 const css = LitElement.prototype.css;
 class NumberBox extends LitElement {
@@ -69,41 +69,57 @@ updated(x) {
 	}
 }
 
-
 secondaryInfo(){
-	const s=this.config.secondary_info;
+	let s=this.config.secondary_info;
 	if(!s){return;}
-	let r=s;
-	let h=s;
+	const lu='last_updated last_changed last-updated last-changed'.split(' ');
+	let ret=s;
+	if(lu.indexOf(s)>-1){
+		s='%'+this.config.entity+':'+(s.replace('-','_'));
+	}
+	let r=[];
 	if(s.indexOf('%')> -1){
+		ret='';
 		const j=s.split(' ');
-		for (let i in j) {
-			if(j[i][0]=='%'){
-				j[i]=j[i].substring(1).split(':');
+		while(j.length){
+			let t=j.shift();
+			if(t[0]=='%'){
+				t=t.substring(1).split(':');
 				let b=this._hass.states;
-				for (let d=0; d<j[i].length; d++){
-					if(b.hasOwnProperty(j[i][d])){
-						b=b[ j[i][d] ];
+				for (let d=0; d<t.length; d++){
+					if(lu.indexOf(t[d])>1){t[d]=t[d].replace('-','_');}
+					const id = t[d];
+					if(b.hasOwnProperty(id)){
+						b=b[id];
 						if(!d){
-							this.old.t[ j[i][d] ]=b.last_updated;
+							this.old.t[id]=b.last_updated;
+						}
+						if(lu.indexOf(id)> -1){
+							if(ret){
+								const div = document.createElement('div');
+								div.innerHTML=ret+' ';
+								r.push(html`${div}`);
+								ret = '';
+							}
+							r.push(html`<ha-relative-time .datetime=${new Date(b)} .hass=${this._hass} ></ha-relative-time> `);
+							b='';
+							break;
 						}
 					}
 				}
-				if( b !== Object(b) ){ j[i]=b;}
+				ret += (typeof b !== 'object')? b : t;
+			}else{
+				ret += t;
 			}
+			ret += ' ';
 		}
-		r = j.join(' ');
-
-	}else{
-		const v=s.replace('-','_');
-		if(this.stateObj[v]){
-			h='';
-			r=html`<ha-relative-time .datetime=${new Date(this.stateObj[v])}
-						.hass=${this._hass} ></ha-relative-time>`;
-		}
 	}
-	if(h){h=r; r='';}
-	this.old.h=h;
+	ret=ret.trim();
+	if(ret){
+		const d2=document.createElement('div');
+		d2.innerHTML=ret;
+		r.push(html`${d2}`);
+	}
 	return html`<div class="secondary">${r}</div>`;
 }
 
@@ -494,22 +510,22 @@ render() {
 	></ha-textfield>
 </div><div class="side">
 	<ha-icon-picker
-		label="Icon Plus [mdi:plus]"
-		.value="${this.config.icon_plus}"
+		label="Icon Plus"
+		.value="${(this.config.icon_plus)?this.config.icon_plus:'mdi:plus'}"
 		.configValue=${'icon_plus'}
 		@value-changed=${this.updVal}
 	></ha-icon-picker>
 	<ha-icon-picker
-		label="Icon Minus [mdi:minus]"
-		.value="${this.config.icon_minus}"
+		label="Icon Minus"
+		.value="${(this.config.icon_minus)?this.config.icon_minus:'mdi:minus'}"
 		.configValue=${'icon_minus'}
 		@value-changed=${this.updVal}
 	></ha-icon-picker>
 </div>			
 <div class="side">
 	<ha-textfield
 		label="Initial [?]"
-		.value="${(this.config.initial!==undefined)?this.config.initial:''}"
+		.value="${(this.config.initial!==undefined)?this.config.initial:'?'}"
 		.configValue=${'initial'}
 		@input=${this.updVal}
 		type="number"
@@ -524,15 +540,15 @@ render() {
 </div>
 <div class="side">
 	<ha-textfield
-		label="Update Delay [1000] ms"
-		.value="${(this.config.delay!==undefined)?this.config.delay:''}"
+		label="Update Delay (ms)"
+		.value="${(this.config.delay!==undefined)?this.config.delay:'1000'}"
 		.configValue=${'delay'}
 		@input=${this.updVal}
 		type="number"
 	></ha-textfield>
 	<ha-textfield
-		label="Long press Speed [0] ms"
-		.value="${(this.config.speed!==undefined)?this.config.speed:''}"
+		label="Long press Speed (ms)"
+		.value="${(this.config.speed!==undefined)?this.config.speed:'0'}"
 		.configValue=${'speed'}
 		@input=${this.updVal}
 		type="number"