From 909cff215836cf69cd10f2fd1dfff62d38150882 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 8 Sep 2020 17:01:04 +0200
Subject: [PATCH] Fix timer entity display (#6849)

---
 src/common/entity/timer_time_remaining.ts           |  7 ++++++-
 src/dialogs/more-info/controls/more-info-timer.ts   | 13 +++++--------
 .../lovelace/entity-rows/hui-timer-entity-row.ts    |  6 ++++--
 src/state-summary/state-card-timer.js               |  8 +++++---
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/common/entity/timer_time_remaining.ts b/src/common/entity/timer_time_remaining.ts
index cd7c90ef8f..5b2f54654d 100644
--- a/src/common/entity/timer_time_remaining.ts
+++ b/src/common/entity/timer_time_remaining.ts
@@ -1,7 +1,12 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import durationToSeconds from "../datetime/duration_to_seconds";
 
-export const timerTimeRemaining = (stateObj: HassEntity) => {
+export const timerTimeRemaining = (
+  stateObj: HassEntity
+): undefined | number => {
+  if (!stateObj.attributes.remaining) {
+    return undefined;
+  }
   let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
 
   if (stateObj.state === "active") {
diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts
index 809d697c70..c06f549896 100644
--- a/src/dialogs/more-info/controls/more-info-timer.ts
+++ b/src/dialogs/more-info/controls/more-info-timer.ts
@@ -26,15 +26,12 @@ class MoreInfoTimer extends LitElement {
     return html`
       <ha-attributes
         .stateObj=${this.stateObj}
-        .extraFilters=${"remaining"}
+        extra-filters="remaining"
       ></ha-attributes>
       <div class="actions">
         ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
           ? html`
-              <mwc-button
-                .action="${"start"}"
-                @click="${this._handleActionClick}"
-              >
+              <mwc-button .action=${"start"} @click=${this._handleActionClick}>
                 ${this.hass!.localize("ui.card.timer.actions.start")}
               </mwc-button>
             `
@@ -42,7 +39,7 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active"
           ? html`
               <mwc-button
-                .action="${"pause"}"
+                .action=${"pause"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.pause")}
@@ -52,13 +49,13 @@ class MoreInfoTimer extends LitElement {
         ${this.stateObj.state === "active" || this.stateObj.state === "paused"
           ? html`
               <mwc-button
-                .action="${"cancel"}"
+                .action=${"cancel"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.cancel")}
               </mwc-button>
               <mwc-button
-                .action="${"finish"}"
+                .action=${"finish"}
                 @click="${this._handleActionClick}"
               >
                 ${this.hass!.localize("ui.card.timer.actions.finish")}
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
index e744313f26..b77225c28d 100644
--- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
@@ -2,9 +2,9 @@ import { HassEntity } from "home-assistant-js-websocket";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -125,7 +125,9 @@ class HuiTimerEntityRow extends LitElement {
     }
 
     if (stateObj.state === "idle" || this._timeRemaining === 0) {
-      return this.hass!.localize("state.timer." + stateObj.state);
+      return (
+        this.hass!.localize(`state.timer.${stateObj.state}`) || stateObj.state
+      );
     }
 
     let display = secondsToDuration(this._timeRemaining || 0);
diff --git a/src/state-summary/state-card-timer.js b/src/state-summary/state-card-timer.js
index 96586e8804..17d39fde5c 100644
--- a/src/state-summary/state-card-timer.js
+++ b/src/state-summary/state-card-timer.js
@@ -23,7 +23,7 @@ class StateCardTimer extends PolymerElement {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <div class="state">[[_secondsToDuration(timeRemaining)]]</div>
+        <div class="state">[[_displayState(timeRemaining, stateObj)]]</div>
       </div>
     `;
   }
@@ -90,8 +90,10 @@ class StateCardTimer extends PolymerElement {
     this.timeRemaining = timerTimeRemaining(stateObj);
   }
 
-  _secondsToDuration(time) {
-    return secondsToDuration(time);
+  _displayState(time, stateObj) {
+    return time
+      ? secondsToDuration(time)
+      : this.hass.localize(`state.timer.${stateObj.state}`) || stateObj.state;
   }
 }
 customElements.define("state-card-timer", StateCardTimer);