Automatically strip area name from entities (#4597)

src/panels/lovelace/cards/types.ts

@@ -178,7 +178,7 @@ export interface PictureEntityCardConfig extends LovelaceCardConfig {
   camera_image?: string;
   camera_view?: HuiImage["cameraView"];
   state_image?: {};
-  state_filter: string[];
+  state_filter?: string[];
   aspect_ratio?: string;
   tap_action?: ActionConfig;
   hold_action?: ActionConfig;

src/panels/lovelace/common/generate-lovelace-config.ts

@@ -20,7 +20,13 @@ import { computeDomain } from "../../../common/entity/compute_domain";
 
 import { LovelaceRowConfig, WeblinkConfig } from "../entity-rows/types";
 import { LocalizeFunc } from "../../../common/translations/localize";
-import { EntitiesCardConfig } from "../cards/types";
+import {
+  EntitiesCardConfig,
+  AlarmPanelCardConfig,
+  PictureEntityCardConfig,
+  ThermostatCardConfig,
+  LightCardConfig,
+} from "../cards/types";
 import {
   subscribeAreaRegistry,
   AreaRegistryEntry,
@@ -107,64 +113,86 @@ export const computeCards = (
   // For entity card
   const entities: Array<string | LovelaceRowConfig> = [];
 
+  const titlePrefix = entityCardOptions.title
+    ? `${entityCardOptions.title} `
+    : undefined;
+
   for (const [entityId, stateObj] of states) {
     const domain = computeDomain(entityId);
 
     if (domain === "alarm_control_panel") {
-      cards.push({
+      const cardConfig: AlarmPanelCardConfig = {
         type: "alarm-panel",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "camera") {
-      cards.push({
+      const cardConfig: PictureEntityCardConfig = {
         type: "picture-entity",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "climate") {
-      cards.push({
+      const cardConfig: ThermostatCardConfig = {
         type: "thermostat",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "history_graph" && stateObj) {
-      cards.push({
+      const cardConfig = {
         type: "history-graph",
         entities: stateObj.attributes.entity_id,
         hours_to_show: stateObj.attributes.hours_to_show,
         title: stateObj.attributes.friendly_name,
         refresh_interval: stateObj.attributes.refresh,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "light" && single) {
-      cards.push({
+      const cardConfig: LightCardConfig = {
         type: "light",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "media_player") {
-      cards.push({
+      const cardConfig = {
         type: "media-control",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "plant") {
-      cards.push({
+      const cardConfig = {
         type: "plant-status",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "weather") {
-      cards.push({
+      const cardConfig = {
         type: "weather-forecast",
         entity: entityId,
-      });
+      };
+      cards.push(cardConfig);
     } else if (domain === "weblink" && stateObj) {
       const conf: WeblinkConfig = {
         type: "weblink",
         url: stateObj.state,
-        name: computeStateName(stateObj),
       };
       if ("icon" in stateObj.attributes) {
         conf.icon = stateObj.attributes.icon;
       }
       entities.push(conf);
     } else {
-      entities.push(entityId);
+      let name: string;
+      const entityConf =
+        titlePrefix &&
+        stateObj &&
+        (name = computeStateName(stateObj)).startsWith(titlePrefix)
+          ? {
+              entity: entityId,
+              name: name.substr(titlePrefix.length),
+            }
+          : entityId;
+
+      entities.push(entityConf);
     }
   }