Map card: add prefix & suffix for "label_mode: attribute" (#25033)

* added prefix & suffix

* added prefix & suffix

* added prefix & suffix

* added prefix & suffix

* added prefix & suffix

* remove prefix, rename suffix -> unit

* remove prefix, rename suffix -> unit

* remove prefix, rename suffix -> unit

* remove prefix, rename suffix -> unit

* remove prefix, rename suffix -> unit

src/components/map/ha-entity-marker.ts

@@ -12,6 +12,8 @@ class HaEntityMarker extends LitElement {
 
   @property({ attribute: "entity-name" }) public entityName?: string;
 
+  @property({ attribute: "entity-unit" }) public entityUnit?: string;
+
   @property({ attribute: "entity-picture" }) public entityPicture?: string;
 
   @property({ attribute: "entity-color" }) public entityColor?: string;
@@ -37,7 +39,16 @@ class HaEntityMarker extends LitElement {
                 .hass=${this.hass}
                 .stateObj=${this.hass?.states[this.entityId]}
               ></ha-state-icon>`
-            : this.entityName}
+            : !this.entityUnit
+              ? this.entityName
+              : html`
+                  ${this.entityName}
+                  <span
+                    class="unit"
+                    style="display: ${this.entityUnit ? "initial" : "none"}"
+                    >${this.entityUnit}</span
+                  >
+                `}
       </div>
     `;
   }
@@ -72,6 +83,9 @@ class HaEntityMarker extends LitElement {
       height: 100%;
       width: 100%;
     }
+    .unit {
+      margin-left: 2px;
+    }
   `;
 }
 

src/components/map/ha-map.ts

@@ -56,6 +56,7 @@ export interface HaMapEntity {
   color: string;
   label_mode?: "name" | "state" | "attribute" | "icon";
   attribute?: string;
+  unit?: string;
   name?: string;
   focus?: boolean;
 }
@@ -549,6 +550,12 @@ export class HaMap extends ReactiveElement {
         typeof entity !== "string" && entity.label_mode === "icon";
       entityMarker.entityId = getEntityId(entity);
       entityMarker.entityName = entityName;
+      entityMarker.entityUnit =
+        typeof entity !== "string" &&
+        entity.unit &&
+        entity.label_mode === "attribute"
+          ? entity.unit
+          : "";
       entityMarker.entityPicture =
         entityPicture && (typeof entity === "string" || !entity.label_mode)
           ? this.hass.hassUrl(entityPicture)

src/panels/lovelace/cards/hui-map-card.ts

@@ -45,6 +45,7 @@ export const DEFAULT_ZOOM = 14;
 interface MapEntityConfig extends EntityConfig {
   label_mode?: "state" | "attribute" | "name";
   attribute?: string;
+  unit?: string;
   focus?: boolean;
 }
 
@@ -52,6 +53,7 @@ interface GeoEntity {
   entity_id: string;
   label_mode?: "state" | "attribute" | "name" | "icon";
   attribute?: string;
+  unit?: string;
   focus: boolean;
 }
 
@@ -430,6 +432,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
           entity_id: stateObj.entity_id,
           label_mode: sourceObj?.label_mode ?? allSource?.label_mode,
           attribute: sourceObj?.attribute ?? allSource?.attribute,
+          unit: sourceObj?.unit ?? allSource?.unit,
           focus: sourceObj
             ? (sourceObj.focus ?? true)
             : (allSource?.focus ?? true),
@@ -446,6 +449,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
         color: this._getColor(entityConf.entity),
         label_mode: entityConf.label_mode,
         attribute: entityConf.attribute,
+        unit: entityConf.unit,
         focus: entityConf.focus,
         name: entityConf.name,
       })),

src/panels/lovelace/cards/types.ts

@@ -323,6 +323,7 @@ interface GeoLocationSourceConfig {
   source: string;
   label_mode?: "name" | "state" | "attribute" | "icon";
   attribute?: string;
+  unit?: string;
   focus?: boolean;
 }
 

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -40,6 +40,7 @@ export const mapEntitiesConfigStruct = union([
     entity: string(),
     label_mode: optional(string()),
     attribute: optional(string()),
+    unit: optional(string()),
     focus: optional(boolean()),
     name: optional(string()),
   }),
@@ -51,6 +52,7 @@ const geoSourcesConfigStruct = union([
     source: string(),
     label_mode: optional(string()),
     attribute: optional(string()),
+    unit: optional(string()),
     focus: optional(boolean()),
   }),
   string(),