jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make map card trails clickable, provide time context. (#14515)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
karwosts 2022-12-14 09:39:38 -08:00 committed by GitHub
parent ebcbfda92d
commit 77b8152c55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/map/ha-map.ts
View File

@ -23,8 +23,12 @@ import "./ha-entity-marker";
const getEntityId = (entity: string | HaMapEntity): string =>
typeof entity === "string" ? entity : entity.entity_id;
export interface HaMapPathPoint {
point: LatLngTuple;
tooltip: string;
}
export interface HaMapPaths {
points: LatLngTuple[];
points: HaMapPathPoint[];
color?: string;
gradualOpacity?: number;
}
@ -247,19 +251,21 @@ export class HaMap extends ReactiveElement {
// DRAW point
this._mapPaths.push(
Leaflet!.circleMarker(path.points[pointIndex], {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: false,
})
Leaflet!
.circleMarker(path.points[pointIndex].point, {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: true,
})
.bindTooltip(path.points[pointIndex].tooltip, { direction: "top" })
);
// DRAW line between this and next point
this._mapPaths.push(
Leaflet!.polyline(
[path.points[pointIndex], path.points[pointIndex + 1]],
[path.points[pointIndex].point, path.points[pointIndex + 1].point],
{
color: path.color || darkPrimaryColor,
opacity,
@ -275,13 +281,15 @@ export class HaMap extends ReactiveElement {
: undefined;
// DRAW end path point
this._mapPaths.push(
Leaflet!.circleMarker(path.points[pointIndex], {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: false,
})
Leaflet!
.circleMarker(path.points[pointIndex].point, {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: true,
})
.bindTooltip(path.points[pointIndex].tooltip, { direction: "top" })
);
}
this._mapPaths.forEach((marker) => map.addLayer(marker));
@ -491,6 +499,14 @@ export class HaMap extends ReactiveElement {
.leaflet-bottom {
z-index: 1 !important;
}
.leaflet-tooltip {
padding: 8px;
font-size: 90%;
background: rgba(80, 80, 80, 0.9) !important;
color: white !important;
border-radius: 4px;
box-shadow: none !important;
}
`;
}
}

30
src/panels/lovelace/cards/hui-map-card.ts
View File

@ -11,6 +11,7 @@ import {
import { customElement, property, query, state } from "lit/decorators";
import { mdiImageFilterCenterFocus } from "@mdi/js";
import memoizeOne from "memoize-one";
import { isToday } from "date-fns";
import { computeDomain } from "../../../common/entity/compute_domain";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
import "../../../components/ha-card";
@ -23,8 +24,17 @@ import { EntityConfig } from "../entity-rows/types";
import { LovelaceCard } from "../types";
import { MapCardConfig } from "./types";
import "../../../components/map/ha-map";
import type { HaMap, HaMapPaths } from "../../../components/map/ha-map";
import type {
HaMap,
HaMapPaths,
HaMapPathPoint,
} from "../../../components/map/ha-map";
import { getColorByIndex } from "../../../common/color/colors";
import { formatDateTime } from "../../../common/datetime/format_date_time";
import {
formatTime,
formatTimeWeekday,
} from "../../../common/datetime/format_time";
const MINUTE = 60000;
@ -274,16 +284,28 @@ class HuiMapCard extends LitElement implements LovelaceCard {
}
// filter location data from states and remove all invalid locations
const points = entityStates.reduce(
(accumulator: LatLngTuple[], entityState) => {
(accumulator: HaMapPathPoint[], entityState) => {
const latitude = entityState.attributes.latitude;
const longitude = entityState.attributes.longitude;
if (latitude && longitude) {
accumulator.push([latitude, longitude] as LatLngTuple);
const p = {} as HaMapPathPoint;
p.point = [latitude, longitude] as LatLngTuple;
const t = new Date(entityState.last_updated);
if (config.hours_to_show! > 144) {
// if showing > 6 days in the history trail, show the full
// date and time
p.tooltip = formatDateTime(t, this.hass.locale);
} else if (isToday(t)) {
p.tooltip = formatTime(t, this.hass.locale);
} else {
p.tooltip = formatTimeWeekday(t, this.hass.locale);
}
accumulator.push(p);
}
return accumulator;
},
[]
) as LatLngTuple[];
) as HaMapPathPoint[];
paths.push({
points,