Clean up device card (#4108)

src/panels/config/devices/device-detail/ha-device-card.js

@@ -1,157 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-import "../../../../components/ha-card";
-
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import { compare } from "../../../../common/string/compare";
-import { updateDeviceRegistryEntry } from "../../../../data/device_registry";
-import {
-  loadDeviceRegistryDetailDialog,
-  showDeviceRegistryDetailDialog,
-} from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HaDeviceCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        ha-card {
-          flex: 1 0 100%;
-          padding-bottom: 10px;
-          min-width: 0;
-        }
-        .card-header {
-          display: flex;
-          justify-content: space-between;
-        }
-        .card-header .name {
-          width: 90%;
-        }
-        .device {
-          width: 30%;
-        }
-        .device .name {
-          font-weight: bold;
-        }
-        .device .model,
-        .device .manuf,
-        .device .area {
-          color: var(--secondary-text-color);
-        }
-        .area .extra-info .name {
-          color: var(--primary-text-color);
-        }
-        .extra-info {
-          margin-top: 8px;
-        }
-        .manuf,
-        .entity-id,
-        .area {
-          color: var(--secondary-text-color);
-        }
-      </style>
-      <ha-card>
-        <div class="card-content">
-          <div class="info">
-            <div class="model">[[device.model]]</div>
-            <div class="manuf">
-              [[localize('ui.panel.config.integrations.config_entry.manuf',
-              'manufacturer', device.manufacturer)]]
-            </div>
-            <template is="dom-if" if="[[device.area_id]]">
-              <div class="area">
-                <div class="extra-info">
-                  [[localize('ui.panel.config.integrations.device_registry.area')]]
-                  <span class="name">{{_computeArea(areas, device)}}</span>
-                </div>
-              </div>
-            </template>
-          </div>
-          <template is="dom-if" if="[[device.via_device_id]]">
-            <div class="extra-info">
-              [[localize('ui.panel.config.integrations.config_entry.via')]]
-              <span class="hub"
-                >[[_computeDeviceName(devices, device.via_device_id)]]</span
-              >
-            </div>
-          </template>
-          <template is="dom-if" if="[[device.sw_version]]">
-            <div class="extra-info">
-              [[localize('ui.panel.config.integrations.config_entry.firmware',
-              'version', device.sw_version)]]
-            </div>
-          </template>
-        </div>
-      </ha-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      device: Object,
-      devices: Array,
-      areas: Array,
-      hass: Object,
-      narrow: {
-        type: Boolean,
-        reflectToAttribute: true,
-      },
-      _childDevices: {
-        type: Array,
-        computed: "_computeChildDevices(device, devices)",
-      },
-    };
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    loadDeviceRegistryDetailDialog();
-  }
-
-  _computeArea(areas, device) {
-    if (!areas || !device || !device.area_id) {
-      return "No Area";
-    }
-    // +1 because of "No Area" entry
-    return areas.find((area) => area.area_id === device.area_id).name;
-  }
-
-  _computeChildDevices(device, devices) {
-    return devices
-      .filter((dev) => dev.via_device_id === device.id)
-      .sort((dev1, dev2) => compare(dev1.name, dev2.name));
-  }
-
-  _deviceName(device) {
-    return device.name_by_user || device.name;
-  }
-
-  _computeDeviceName(devices, deviceId) {
-    const device = devices.find((dev) => dev.id === deviceId);
-    return device
-      ? this._deviceName(device)
-      : `(${this.localize(
-          "ui.panel.config.integrations.config_entry.device_unavailable"
-        )})`;
-  }
-
-  _gotoSettings() {
-    const device = this.device;
-    showDeviceRegistryDetailDialog(this, {
-      device,
-      updateEntry: async (updates) => {
-        await updateDeviceRegistryEntry(this.hass, device.id, updates);
-      },
-    });
-  }
-
-  _openMoreInfo(ev) {
-    this.fire("hass-more-info", { entityId: ev.model.entity.entity_id });
-  }
-}
-
-customElements.define("ha-device-card", HaDeviceCard);

src/panels/config/devices/device-detail/ha-device-card.ts

@@ -0,0 +1,132 @@
+import "../../../../components/ha-card";
+
+import { DeviceRegistryEntry } from "../../../../data/device_registry";
+import { loadDeviceRegistryDetailDialog } from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
+import {
+  LitElement,
+  html,
+  customElement,
+  property,
+  TemplateResult,
+  CSSResult,
+  css,
+} from "lit-element";
+import { HomeAssistant } from "../../../../types";
+import { AreaRegistryEntry } from "../../../../data/area_registry";
+
+@customElement("ha-device-card")
+export class HaDeviceCard extends LitElement {
+  @property() public hass!: HomeAssistant;
+  @property() public device!: DeviceRegistryEntry;
+  @property() public devices!: DeviceRegistryEntry[];
+  @property() public areas!: AreaRegistryEntry[];
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          <div class="info">
+            <div class="model">${this.device.model}</div>
+            <div class="manuf">
+              ${this.hass.localize(
+                "ui.panel.config.integrations.config_entry.manuf",
+                "manufacturer",
+                this.device.manufacturer
+              )}
+            </div>
+            ${this.device.area_id
+              ? html`
+                  <div class="area">
+                    <div class="extra-info">
+                      ${this.hass.localize(
+                        "ui.panel.config.integrations.config_entry.area",
+                        "area",
+                        this._computeArea(this.areas, this.device)
+                      )}
+                    </div>
+                  </div>
+                `
+              : ""}
+          </div>
+          ${this.device.via_device_id
+            ? html`
+                <div class="extra-info">
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.via"
+                  )}
+                  <span class="hub"
+                    >${this._computeDeviceName(
+                      this.devices,
+                      this.device.via_device_id
+                    )}</span
+                  >
+                </div>
+              `
+            : ""}
+          ${this.device.sw_version
+            ? html`
+                <div class="extra-info">
+                  ${this.hass.localize(
+                    "ui.panel.config.integrations.config_entry.firmware",
+                    "version",
+                    this.device.sw_version
+                  )}
+                </div>
+              `
+            : ""}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    loadDeviceRegistryDetailDialog();
+  }
+
+  private _computeArea(areas, device) {
+    if (!areas || !device || !device.area_id) {
+      return "No Area";
+    }
+    // +1 because of "No Area" entry
+    return areas.find((area) => area.area_id === device.area_id).name;
+  }
+
+  private _deviceName(device) {
+    return device.name_by_user || device.name;
+  }
+
+  private _computeDeviceName(devices, deviceId) {
+    const device = devices.find((dev) => dev.id === deviceId);
+    return device
+      ? this._deviceName(device)
+      : `(${this.hass.localize(
+          "ui.panel.config.integrations.config_entry.device_unavailable"
+        )})`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-card {
+        flex: 1 0 100%;
+        padding-bottom: 10px;
+        min-width: 0;
+      }
+      .device {
+        width: 30%;
+      }
+      .area {
+        color: var(--primary-text-color);
+      }
+      .extra-info {
+        margin-top: 8px;
+      }
+      .manuf,
+      .entity-id,
+      .model {
+        color: var(--secondary-text-color);
+      }
+    `;
+  }
+}

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -62,6 +62,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                   ${stateObj
                     ? html`
                         <state-badge
+                          @click=${this._openMoreInfo}
                           .stateObj=${stateObj}
                           slot="item-icon"
                         ></state-badge>
@@ -72,7 +73,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                           .icon=${domainIcon(computeDomain(entry.entity_id))}
                         ></ha-icon>
                       `}
-                  <paper-item-body two-line>
+                  <paper-item-body two-line @click=${this._openMoreInfo}>
                     <div class="name">${entry.stateName}</div>
                     <div class="secondary entity-id">${entry.entity_id}</div>
                   </paper-item-body>
@@ -139,6 +140,12 @@ export class HaDeviceEntitiesCard extends LitElement {
       .disabled-entry {
         color: var(--secondary-text-color);
       }
+      state-badge {
+        cursor: pointer;
+      }
+      paper-icon-item:not(.disabled-entry) paper-item-body {
+        cursor: pointer;
+      }
     `;
   }
 }

src/translations/en.json

@@ -1204,6 +1204,7 @@
             "firmware": "Firmware: {version}",
             "device_unavailable": "device unavailable",
             "entity_unavailable": "entity unavailable",
+            "area": "In {area}",
             "no_area": "No Area"
           },
           "config_flow": {