mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-19 15:26:36 +00:00
Ability to show map icons for geolocation sources (#23247)
This commit is contained in:
parent
31e85836f0
commit
4de8b562bd
@ -1,9 +1,13 @@
|
||||
import { LitElement, html, css } from "lit";
|
||||
import { property } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import "../ha-state-icon";
|
||||
|
||||
class HaEntityMarker extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: "entity-id" }) public entityId?: string;
|
||||
|
||||
@property({ attribute: "entity-name" }) public entityName?: string;
|
||||
@ -12,6 +16,8 @@ class HaEntityMarker extends LitElement {
|
||||
|
||||
@property({ attribute: "entity-color" }) public entityColor?: string;
|
||||
|
||||
@property({ attribute: "show-icon", type: Boolean }) public showIcon = false;
|
||||
|
||||
protected render() {
|
||||
return html`
|
||||
<div
|
||||
@ -26,7 +32,12 @@ class HaEntityMarker extends LitElement {
|
||||
"background-image": `url(${this.entityPicture})`,
|
||||
})}
|
||||
></div>`
|
||||
: this.entityName}
|
||||
: this.showIcon && this.entityId
|
||||
? html`<ha-state-icon
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.hass?.states[this.entityId]}
|
||||
></ha-state-icon>`
|
||||
: this.entityName}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
@ -52,7 +52,7 @@ export interface HaMapPaths {
|
||||
export interface HaMapEntity {
|
||||
entity_id: string;
|
||||
color: string;
|
||||
label_mode?: "name" | "state";
|
||||
label_mode?: "name" | "state" | "icon";
|
||||
name?: string;
|
||||
focus?: boolean;
|
||||
}
|
||||
@ -523,23 +523,24 @@ export class HaMap extends ReactiveElement {
|
||||
.join("")
|
||||
.substr(0, 3));
|
||||
|
||||
const entityMarker = document.createElement("ha-entity-marker");
|
||||
entityMarker.hass = this.hass;
|
||||
entityMarker.showIcon =
|
||||
typeof entity !== "string" && entity.label_mode === "icon";
|
||||
entityMarker.entityId = getEntityId(entity);
|
||||
entityMarker.entityName = entityName;
|
||||
entityMarker.entityPicture =
|
||||
entityPicture && (typeof entity === "string" || !entity.label_mode)
|
||||
? this.hass.hassUrl(entityPicture)
|
||||
: "";
|
||||
if (typeof entity !== "string") {
|
||||
entityMarker.entityColor = entity.color;
|
||||
}
|
||||
|
||||
// create marker with the icon
|
||||
const marker = Leaflet.marker([latitude, longitude], {
|
||||
icon: Leaflet.divIcon({
|
||||
html: `
|
||||
<ha-entity-marker
|
||||
entity-id="${getEntityId(entity)}"
|
||||
entity-name="${entityName}"
|
||||
entity-picture="${
|
||||
entityPicture ? this.hass.hassUrl(entityPicture) : ""
|
||||
}"
|
||||
${
|
||||
typeof entity !== "string"
|
||||
? `entity-color="${entity.color}"`
|
||||
: ""
|
||||
}
|
||||
></ha-entity-marker>
|
||||
`,
|
||||
html: entityMarker,
|
||||
iconSize: [48, 48],
|
||||
className: "",
|
||||
}),
|
||||
|
@ -44,6 +44,7 @@ interface MapEntityConfig extends EntityConfig {
|
||||
|
||||
interface GeoEntity {
|
||||
entity_id: string;
|
||||
label_mode?: "state" | "name" | "icon";
|
||||
focus: boolean;
|
||||
}
|
||||
|
||||
@ -351,6 +352,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||
) {
|
||||
geoEntities.push({
|
||||
entity_id: stateObj.entity_id,
|
||||
label_mode: sourceObj?.label_mode ?? allSource?.label_mode,
|
||||
focus: sourceObj
|
||||
? (sourceObj.focus ?? true)
|
||||
: (allSource?.focus ?? true),
|
||||
@ -370,8 +372,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
|
||||
name: entityConf.name,
|
||||
})),
|
||||
...this._getSourceEntities(this.hass?.states).map((entity) => ({
|
||||
entity_id: entity.entity_id,
|
||||
focus: entity.focus,
|
||||
...entity,
|
||||
color: this._getColor(entity.entity_id),
|
||||
})),
|
||||
];
|
||||
|
@ -309,6 +309,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
|
||||
|
||||
interface GeoLocationSourceConfig {
|
||||
source: string;
|
||||
label_mode?: "name" | "state" | "icon";
|
||||
focus?: boolean;
|
||||
}
|
||||
|
||||
|
@ -48,6 +48,7 @@ export const mapEntitiesConfigStruct = union([
|
||||
const geoSourcesConfigStruct = union([
|
||||
object({
|
||||
source: string(),
|
||||
label_mode: optional(string()),
|
||||
focus: optional(boolean()),
|
||||
}),
|
||||
string(),
|
||||
|
Loading…
x
Reference in New Issue
Block a user