From 6351b4c633a47aa5a235b00330704e8036e7abf7 Mon Sep 17 00:00:00 2001
From: Christopher Viel <viel.christopher@gmail.com>
Date: Wed, 14 Aug 2024 21:17:39 -0400
Subject: [PATCH] fixup! fixup! fixup! fixup! fixup! fixup! Custom card tests

---
 dashboards/overview.yaml |  2 +-
 www/cards/area-card.js   | 25 ++++++++++++-------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/dashboards/overview.yaml b/dashboards/overview.yaml
index 0f21b2cb..b9a12cd8 100644
--- a/dashboards/overview.yaml
+++ b/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
diff --git a/www/cards/area-card.js b/www/cards/area-card.js
index e3e9f217..52c48f42 100644
--- a/www/cards/area-card.js
+++ b/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,
     };
   }
 }