fixup! fixup! fixup! fixup! fixup! fixup! Custom card tests

dashboards/overview.yaml

@@ -6,7 +6,7 @@ views:
     icon: mdi:hospital-box
     cards:
       - type: custom:area-card
-        entity: sensor.last_motion
+        area: e91b990f7ea74eec85a1bb160d3e0e48
 
   - title: Home
     path: home

www/cards/area-card.js

@@ -1,6 +1,6 @@
 class AreaCard extends HTMLElement {
   set hass(hass) {
-    // Initialize the content if it's not there yet.
+    // hass.areas.{id}.name/icon
     if (!this.content) {
       this.innerHTML = `
         <ha-card header="Example-card">
@@ -10,34 +10,33 @@ class AreaCard extends HTMLElement {
       this.content = this.querySelector("div");
     }
 
-    const entityId = this.config.entity;
-    const state = hass.states[entityId];
-    const stateStr = state ? state.state : "unavailable";
+    const area = hass.area[this.config.area];
+    const icon = area?.icon || 'mdi:help-circle';
+    const name = area?.name || 'Unknown';
 
     this.content.innerHTML = `
-      The state of ${entityId} is ${stateStr}!
-      <br><br>
-      <img src="http://via.placeholder.com/350x150">
+      <hui-icon-element icon="${icon}"></hui-icon-element>
+      ${name}
     `;
   }
 
   setConfig(config) {
-    if (!config.entity) {
+    if (!config.area) {
       throw new Error("You need to define an entity");
     }
     this.config = config;
   }
 
   getCardSize() {
-    return 3;
+    return 6;
   }
 
   getLayoutOptions() {
     return {
-      grid_rows: 3,
-      grid_columns: 2,
-      grid_min_rows: 3,
-      grid_max_rows: 3,
+      grid_rows: 6,
+      grid_columns: 5,
+      grid_min_rows: 6,
+      grid_max_rows: 6,
     };
   }
 }