Add remote more info card (#8506)

Co-authored-by: Philip Allgaier <philip.allgaier@gmx.de>

src/common/const.ts

@@ -103,6 +103,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "lock",
   "media_player",
   "person",
+  "remote",
   "script",
   "sun",
   "timer",

src/data/remote.ts

@@ -0,0 +1,16 @@
+import {
+  HassEntityAttributeBase,
+  HassEntityBase,
+} from "home-assistant-js-websocket";
+
+export const REMOTE_SUPPORT_LEARN_COMMAND = 1;
+export const REMOTE_SUPPORT_DELETE_COMMAND = 2;
+export const REMOTE_SUPPORT_ACTIVITY = 4;
+
+export type RemoteEntity = HassEntityBase & {
+  attributes: HassEntityAttributeBase & {
+    current_activity: string | null;
+    activity_list: string[] | null;
+    [key: string]: any;
+  };
+};

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

@@ -0,0 +1,93 @@
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attributes";
+import "../../../components/ha-paper-dropdown-menu";
+import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
+import { HomeAssistant } from "../../../types";
+
+const filterExtraAttributes = "activity_list,current_activity";
+
+@customElement("more-info-remote")
+class MoreInfoRemote extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public stateObj?: RemoteEntity;
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    const stateObj = this.stateObj;
+
+    return html`
+      ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY)
+        ? html`
+            <ha-paper-dropdown-menu
+              .label=${this.hass!.localize(
+                "ui.dialogs.more_info_control.remote.activity"
+              )}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${stateObj.attributes.current_activity}
+                @iron-select=${this.handleActivityChanged}
+                attr-for-selected="item-name"
+              >
+                ${stateObj.attributes.activity_list!.map(
+                  (activity) => html`
+                    <paper-item .itemName=${activity}>
+                      ${activity}
+                    </paper-item>
+                  `
+                )}
+              </paper-listbox>
+            </ha-paper-dropdown-menu>
+          `
+        : ""}
+
+      <ha-attributes
+        .stateObj=${this.stateObj}
+        .extraFilters=${filterExtraAttributes}
+      ></ha-attributes>
+    `;
+  }
+
+  private handleActivityChanged(ev: CustomEvent) {
+    const oldVal = this.stateObj!.attributes.current_activity;
+    const newVal = ev.detail.item.itemName;
+
+    if (!newVal || oldVal === newVal) {
+      return;
+    }
+
+    this.hass.callService("remote", "turn_on", {
+      entity_id: this.stateObj!.entity_id,
+      activity: newVal,
+    });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      paper-item {
+        cursor: pointer;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-remote": MoreInfoRemote;
+  }
+}

src/dialogs/more-info/state_more_info_control.ts

@@ -21,6 +21,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   lock: () => import("./controls/more-info-lock"),
   media_player: () => import("./controls/more-info-media_player"),
   person: () => import("./controls/more-info-person"),
+  remote: () => import("./controls/more-info-remote"),
   script: () => import("./controls/more-info-script"),
   sun: () => import("./controls/more-info-sun"),
   timer: () => import("./controls/more-info-timer"),

src/translations/en.json

@@ -611,6 +611,9 @@
         "updater": {
           "title": "Update Instructions"
         },
+        "remote": {
+          "activity": "Current activity"
+        },
         "restored": {
           "not_provided": "This entity is currently unavailable and is an orphan to a removed, changed or dysfunctional integration or device.",
           "remove_intro": "If the entity is no longer in use, you can clean it up by removing it.",