more-info dialog for counter (#4038)

* more-info dialog for counter

* address comments

src/common/const.ts

@@ -35,6 +35,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "camera",
   "climate",
   "configurator",
+  "counter",
   "cover",
   "fan",
   "group",

src/common/entity/domain_icon.ts

@@ -14,6 +14,7 @@ const fixedIcons = {
   climate: "hass:thermostat",
   configurator: "hass:settings",
   conversation: "hass:text-to-speech",
+  counter: "hass:counter",
   device_tracker: "hass:account",
   fan: "hass:fan",
   google_assistant: "hass:google-assistant",

src/dialogs/more-info/controls/more-info-content.ts

@@ -10,6 +10,7 @@ import "./more-info-automation";
 import "./more-info-camera";
 import "./more-info-climate";
 import "./more-info-configurator";
+import "./more-info-counter";
 import "./more-info-cover";
 import "./more-info-default";
 import "./more-info-fan";

src/dialogs/more-info/controls/more-info-counter.ts

@@ -0,0 +1,70 @@
+import {
+  LitElement,
+  html,
+  TemplateResult,
+  CSSResult,
+  css,
+  property,
+  customElement,
+} from "lit-element";
+import "@material/mwc-button";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import { HomeAssistant } from "../../../types";
+
+@customElement("more-info-counter")
+class MoreInfoCounter extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public stateObj?: HassEntity;
+
+  protected render(): TemplateResult | void {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    return html`
+      <div class="actions">
+        <mwc-button
+          .action="${"increment"}"
+          @click="${this._handleActionClick}"
+        >
+          ${this.hass!.localize("ui.card.counter.actions.increment")}
+        </mwc-button>
+        <mwc-button
+          .action="${"decrement"}"
+          @click="${this._handleActionClick}"
+        >
+          ${this.hass!.localize("ui.card.counter.actions.decrement")}
+        </mwc-button>
+        <mwc-button .action="${"reset"}" @click="${this._handleActionClick}">
+          ${this.hass!.localize("ui.card.counter.actions.reset")}
+        </mwc-button>
+      </div>
+    `;
+  }
+
+  private _handleActionClick(e: MouseEvent): void {
+    const action = (e.currentTarget as any).action;
+    this.hass.callService("counter", action, {
+      entity_id: this.stateObj!.entity_id,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .actions {
+        margin: 0 8px;
+        padding-top: 20px;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-counter": MoreInfoCounter;
+  }
+}

src/translations/en.json

@@ -417,6 +417,13 @@
         "away_mode": "Away mode",
         "aux_heat": "Aux heat"
       },
+      "counter": {
+        "actions": {
+          "increment": "increment",
+          "decrement": "decrement",
+          "reset": "reset"
+        }
+      },
       "cover": {
         "position": "Position",
         "tilt_position": "Tilt position"