Add options for all areas (#52)

Area identifier `_` sets the options for all areas.
Options for a specific area can still be overridden like before.

Also the HA area-card is added to use as a strategy area-card.

---------

Co-authored-by: DigiLive <info@digilive.nl>

README.md

@@ -161,6 +161,7 @@ at the top of the area subview.
 | `hidden`              | boolean           | false          | Set to `true` to exclude the area from the dashboard and views.                                                                     |
 | `order`               | number            | Infinity       | Ordering position of the area in the list of available areas.                                                                       |
 | `extra_cards`         | array of cards    | unset or empty | A list of cards to show on the top of the area subview.                                                                             |
+| `type`                | string            | `default`      | Set to a type of area card. (Currently supported: `default` & `HaAreaCard`                                                          |
 
 *) `more-info` `toggle` `call-service` `navigate` `url` `none`
 
@@ -191,6 +192,8 @@ strategy:
         order: 2
       garage_id:
         hidden: true
+      hallway_id:
+        type: HaAreaCard
 views: []
 ```
 
@@ -202,6 +205,22 @@ This area is enabled by default and includes the entities that aren't linked to
 The area can be configured like any other area as described above.
 To exclude this area from the dashboard and views, set its property `hidden` to `true`.
 
+#### Setting options for all areas
+
+Use `_` as an identifier to set the options for all areas.
+
+The following example sets the type of all area-cards to Home Assistant's area card:
+
+```yaml
+strategy:
+  type: custom:mushroom-strategy
+  options:
+    areas:
+      _:
+        type: HaAreaCard
+views: []
+```
+
 ### Card Options
 
 The `card_options` entry enables you to specify a card type for an entity or to hide the card from the dashboard.  

src/cards/AreaCard.js

@@ -38,9 +38,15 @@ class AreaCard extends AbstractCard {
    */
   constructor(area, options = {}) {
     super(area);
+
     this.#defaultOptions.primary                    = area.name;
     this.#defaultOptions.tap_action.navigation_path = area.area_id ?? area.name;
 
+    // Set card type to default if a type "default" is given in strategy options.
+    if (options.type === "default") {
+      options.type = this.#defaultOptions.type;
+    }
+
     this.mergeOptions(
         this.#defaultOptions,
         options,

src/cards/HaAreaCard.js

@@ -0,0 +1,47 @@
+import {AbstractCard} from "./AbstractCard";
+
+/**
+ * HA Area Card Class
+ *
+ * Used to create a card for an entity of the area domain using the built in type 'area'.
+ *
+ * @class
+ * @extends AbstractCard
+ */
+class AreaCard extends AbstractCard {
+  /**
+   * Default options of the card.
+   *
+   * @type {HaAreaCardOptions}
+   * @private
+   */
+  #defaultOptions = {
+    type: "area",
+    area: undefined,
+    navigation_path: undefined,
+  };
+
+  /**
+   * Class constructor.
+   *
+   * @param {areaEntity} area The area entity to create a card for.
+   * @param {HaAreaCardOptions} [options={}] Options for the card.
+   * @throws {Error} If the Helper module isn't initialized.
+   */
+
+  constructor(area, options = {}) {
+    super(area);
+    this.#defaultOptions.area            = area.area_id ?? area.name;
+    this.#defaultOptions.navigation_path = area.area_id ?? area.name;
+
+    // Enforce the card type.
+    options.type = this.#defaultOptions.type;
+
+    this.mergeOptions(
+        this.#defaultOptions,
+        options,
+    );
+  }
+}
+
+export {AreaCard};

src/cards/typedefs.js

@@ -112,6 +112,13 @@
  * @memberOf typedefs.cards
  */
 
+/**
+ * @typedef {abstractOptions & Object} HaAreaCardOptions HA Area Card options.
+ * @property {string} area The id of the area.
+ * @property {string} navigation_path The id of the area to navigate to.
+ * @memberOf typedefs.cards
+ */
+
 /**
  * @typedef {abstractOptions & Object} mediaPlayerCardOptions Media Player Card options.
  * @property {boolean} [use_media_info=true] Use media info instead of name, state, and icon when a media is playing

src/mushroom-strategy.js

@@ -191,7 +191,6 @@ class MushroomStrategy {
     }
 
     if (!Helper.strategyOptions.domains.default.hidden) {
-      // TODO: Check if default is hidden
       // Create cards for any other domain.
       // Collect device entities of the current area.
       const areaDevices = Helper.devices.filter(device => device.area_id === area.area_id)

src/typedefs.js

@@ -35,6 +35,7 @@
  * @property {Object[]} [extra_cards] An array of card configurations.
  *                                    The configured cards are added to the dashboard.
  *                                    This property is added by the custom strategy.
+ * @property {boolean} [use_ha_area_card] Set to true to use ha area card instead of mushroom.
  * @memberOf typedefs.generic
  */
 

src/views/HomeView.js

@@ -160,7 +160,7 @@ class HomeView extends AbstractView {
       for (const person of Helper.entities.filter(entity => {
         return entity.entity_id.startsWith("person.")
             && entity.hidden_by == null
-              && entity.disabled_by == null
+            && entity.disabled_by == null;
       })) {
         cards.push(new personModule.PersonCard(person).getCard());
       }
@@ -176,30 +176,61 @@ class HomeView extends AbstractView {
    *
    * @return {Object[]} A card object array.
    */
-  #createAreaCards() {
+  async #createAreaCards() {
-    const groupedCards = [{
+    /**
+     * Cards to be stacked vertically.
+     *
+     * Contains a Title card and horizontal stacks of Area cards.
+     *
+     * @type {[{}]}
+     */
+    const groupedCards = [
+      {
         type: "custom:mushroom-title-card",
         title: "Areas",
-    }];
+      },
+    ];
+    let areaCards      = [];
 
-    import("../cards/AreaCard").then(areaModule => {
+    for (const [i, area] of Helper.areas.entries()) {
-      const areaCards = [];
+      let module;
+      let moduleName =
+              Helper.strategyOptions.areas[area.area_id ?? "undisclosed"]?.type ??
+              Helper.strategyOptions.areas["_"]?.type ??
+              "default";
 
-      for (const area of Helper.areas) {
+      // Load module by type in strategy options.
+      try {
+        module = await import((`../cards/${moduleName}`));
+      } catch (e) {
+        // Fallback to the default strategy card.
+        module = await import("../cards/AreaCard");
+
+        if (Helper.strategyOptions.debug && moduleName !== "default") {
+          console.error(e);
+        }
+      }
+
+      // Get a card for the area.
       if (!Helper.strategyOptions.areas[area.area_id]?.hidden) {
-          areaCards.push(
+        let options = {
-              new areaModule.AreaCard(area, Helper.strategyOptions.areas[area.area_id ?? "undisclosed"]).getCard());
+          ...Helper.strategyOptions.areas["_"],
-        }
+          ...Helper.strategyOptions.areas[area.area_id ?? "undisclosed"],
+        };
+
+        areaCards.push(new module.AreaCard(area, options).getCard());
       }
 
-      // Horizontally group every two area cards.
+      // Horizontally group every two area cards if all cards are created.
+      if (i === Helper.areas.length - 1) {
         for (let i = 0; i < areaCards.length; i += 2) {
           groupedCards.push({
             type: "horizontal-stack",
             cards: areaCards.slice(i, i + 2),
           });
         }
-    });
+      }
+    }
 
     return groupedCards;
   }