Fix sensor card from not working with detail (#7060)

* Fix sensor card from not working with detail

* comments

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -5,22 +5,24 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { string, assert, object, optional, number } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -68,8 +70,8 @@ export class HuiSensorCardEditor extends LitElement
     return this._config!.unit || "";
   }
 
-  get _detail(): number | string {
-    return this._config!.number || "1";
+  get _detail(): number {
+    return this._config!.detail ?? 1;
   }
 
   get _theme(): string {
@@ -97,10 +99,10 @@ export class HuiSensorCardEditor extends LitElement
             "ui.panel.lovelace.editor.card.config.required"
           )})"
           .hass=${this.hass}
-          .value="${this._entity}"
+          .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
+          @change=${this._valueChanged}
           allow-custom-entity
         ></ha-entity-picker>
         <paper-input
@@ -109,9 +111,9 @@ export class HuiSensorCardEditor extends LitElement
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.optional"
           )})"
-          .value="${this._name}"
-          .configValue="${"name"}"
-          @value-changed="${this._valueChanged}"
+          .value=${this._name}
+          .configValue=${"name"}
+          @value-changed=${this._valueChanged}
         ></paper-input>
         <div class="side-by-side">
           <ha-icon-input
@@ -132,15 +134,15 @@ export class HuiSensorCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .configValue="${"graph"}"
-            @value-changed="${this._valueChanged}"
+            .configValue=${"graph"}
+            @value-changed=${this._valueChanged}
           >
             <paper-listbox
               slot="dropdown-content"
-              .selected="${graphs.indexOf(this._graph)}"
+              .selected=${graphs.indexOf(this._graph)}
             >
               ${graphs.map((graph) => {
-                return html` <paper-item>${graph}</paper-item> `;
+                return html`<paper-item>${graph}</paper-item>`;
               })}
             </paper-listbox>
           </paper-dropdown-menu>
@@ -152,28 +154,28 @@ export class HuiSensorCardEditor extends LitElement
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._unit}"
-            .configValue="${"unit"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.graph_detail"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value="${this._detail}"
-            .configValue="${"detail"}"
-            @value-changed="${this._valueChanged}"
+            .value=${this._unit}
+            .configValue=${"unit"}
+            @value-changed=${this._valueChanged}
           ></paper-input>
+          <ha-formfield
+            label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.sensor.show_more_detail"
+            )}
+          >
+            <ha-switch
+              .checked=${this._detail === 2}
+              .configValue=${"detail"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-formfield>
         </div>
         <div class="side-by-side">
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
-            .configValue="${"theme"}"
-            @value-changed="${this._valueChanged}"
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
           <paper-input
             .label="${this.hass.localize(
@@ -182,15 +184,34 @@ export class HuiSensorCardEditor extends LitElement
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             type="number"
-            .value="${this._hours_to_show}"
-            .configValue="${"hours_to_show"}"
-            @value-changed="${this._valueChanged}"
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
       </div>
     `;
   }
 
+  private _change(ev: Event) {
+    if (!this._config || !this.hass) {
+      return;
+    }
+
+    const value = (ev.target! as EditorTarget).checked ? 2 : 1;
+
+    if (this._detail === value) {
+      return;
+    }
+
+    this._config = {
+      ...this._config,
+      detail: value,
+    };
+
+    fireEvent(this, "config-changed", { config: this._config });
+  }
+
   private _valueChanged(ev: EntitiesEditorEvent): void {
     if (!this._config || !this.hass) {
       return;

src/translations/en.json

@@ -2386,7 +2386,7 @@
             },
             "sensor": {
               "name": "Sensor",
-              "graph_detail": "Graph Detail",
+              "show_more_detail": "Show more detail",
               "graph_type": "Graph Type",
               "description": "The Sensor card gives you a quick overview of your sensors state with an optional graph to visualize change over time."
             },