mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 13:37:47 +00:00
add actions to state-badge element and state-label-badge (default Lovelace badge type) (#4028)
* add actions to state-badge element * address comments state-label-badge no longer handles clicks added actions to hui-state-label-badge moved ha-badges-card to Lit
This commit is contained in:
parent
3c0ba1d7eb
commit
c25a38b82f
@ -1,31 +0,0 @@
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
import "../components/entity/ha-state-label-badge";
|
||||
|
||||
class HaBadgesCard extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
ha-state-label-badge {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--ha-state-label-badge-margin-bottom, 16px);
|
||||
}
|
||||
</style>
|
||||
<template is="dom-repeat" items="[[states]]">
|
||||
<ha-state-label-badge
|
||||
hass="[[hass]]"
|
||||
state="[[item]]"
|
||||
></ha-state-label-badge>
|
||||
</template>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: Object,
|
||||
states: Array,
|
||||
};
|
||||
}
|
||||
}
|
||||
customElements.define("ha-badges-card", HaBadgesCard);
|
45
src/cards/ha-badges-card.ts
Normal file
45
src/cards/ha-badges-card.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { TemplateResult, html } from "lit-html";
|
||||
import { customElement, LitElement, property } from "lit-element";
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
|
||||
import "../components/entity/ha-state-label-badge";
|
||||
|
||||
import { HomeAssistant } from "../types";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
|
||||
@customElement("ha-badges-card")
|
||||
class HaBadgesCard extends LitElement {
|
||||
@property() public hass?: HomeAssistant;
|
||||
@property() public states?: HassEntity[];
|
||||
|
||||
protected render(): TemplateResult | void {
|
||||
if (!this.hass || !this.states) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.states.map(
|
||||
(state) => html`
|
||||
<ha-state-label-badge
|
||||
.hass=${this.hass}
|
||||
.state=${state}
|
||||
@click=${this._handleClick}
|
||||
></ha-state-label-badge>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleClick(ev: Event) {
|
||||
const entityId = ((ev.target as any).state as HassEntity).entity_id;
|
||||
fireEvent(this, "hass-more-info", {
|
||||
entityId,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-badges-card": HaBadgesCard;
|
||||
}
|
||||
}
|
@ -11,7 +11,6 @@ import {
|
||||
|
||||
import { HassEntity } from "home-assistant-js-websocket";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { HomeAssistant } from "../../types";
|
||||
|
||||
import { computeStateDomain } from "../../common/entity/compute_state_domain";
|
||||
@ -90,16 +89,6 @@ export class HaStateLabelBadge extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
protected firstUpdated(changedProperties: PropertyValues): void {
|
||||
super.firstUpdated(changedProperties);
|
||||
this.addEventListener("click", (ev) => {
|
||||
ev.stopPropagation();
|
||||
if (this.state) {
|
||||
fireEvent(this, "hass-more-info", { entityId: this.state.entity_id });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
protected updated(changedProperties: PropertyValues): void {
|
||||
super.updated(changedProperties);
|
||||
|
||||
|
@ -13,6 +13,9 @@ import { LovelaceBadge } from "../types";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { StateLabelBadgeConfig } from "./types";
|
||||
import { longPress } from "../common/directives/long-press-directive";
|
||||
import { hasDoubleClick } from "../common/has-double-click";
|
||||
import { handleClick } from "../common/handle-click";
|
||||
|
||||
@customElement("hui-state-label-badge")
|
||||
export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
|
||||
@ -41,9 +44,27 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
|
||||
: ""}
|
||||
.icon=${this._config.icon}
|
||||
.image=${this._config.image}
|
||||
@ha-click=${this._handleClick}
|
||||
@ha-hold=${this._handleHold}
|
||||
@ha-dblclick=${this._handleDblClick}
|
||||
.longPress=${longPress({
|
||||
hasDoubleClick: hasDoubleClick(this._config!.double_tap_action),
|
||||
})}
|
||||
></ha-state-label-badge>
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleClick() {
|
||||
handleClick(this, this.hass!, this._config!, false, false);
|
||||
}
|
||||
|
||||
private _handleHold() {
|
||||
handleClick(this, this.hass!, this._config!, true, false);
|
||||
}
|
||||
|
||||
private _handleDblClick() {
|
||||
handleClick(this, this.hass!, this._config!, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { LovelaceBadgeConfig } from "../../../data/lovelace";
|
||||
import { LovelaceBadgeConfig, ActionConfig } from "../../../data/lovelace";
|
||||
import { EntityFilterEntityConfig } from "../entity-rows/types";
|
||||
|
||||
export interface EntityFilterBadgeConfig extends LovelaceBadgeConfig {
|
||||
@ -16,4 +16,7 @@ export interface StateLabelBadgeConfig extends LovelaceBadgeConfig {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
image?: string;
|
||||
tap_action?: ActionConfig;
|
||||
hold_action?: ActionConfig;
|
||||
double_tap_action?: ActionConfig;
|
||||
}
|
||||
|
@ -14,6 +14,9 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
|
||||
import { LovelaceElement, StateBadgeElementConfig } from "./types";
|
||||
import { HomeAssistant } from "../../../types";
|
||||
import { hasConfigOrEntityChanged } from "../common/has-changed";
|
||||
import { longPress } from "../common/directives/long-press-directive";
|
||||
import { hasDoubleClick } from "../common/has-double-click";
|
||||
import { handleClick } from "../common/handle-click";
|
||||
|
||||
@customElement("hui-state-badge-element")
|
||||
export class HuiStateBadgeElement extends LitElement
|
||||
@ -61,9 +64,27 @@ export class HuiStateBadgeElement extends LitElement
|
||||
: this._config.title === null
|
||||
? ""
|
||||
: this._config.title}"
|
||||
@ha-click=${this._handleClick}
|
||||
@ha-hold=${this._handleHold}
|
||||
@ha-dblclick=${this._handleDblClick}
|
||||
.longPress=${longPress({
|
||||
hasDoubleClick: hasDoubleClick(this._config!.double_tap_action),
|
||||
})}
|
||||
></ha-state-label-badge>
|
||||
`;
|
||||
}
|
||||
|
||||
private _handleClick() {
|
||||
handleClick(this, this.hass!, this._config!, false, false);
|
||||
}
|
||||
|
||||
private _handleHold() {
|
||||
handleClick(this, this.hass!, this._config!, true, false);
|
||||
}
|
||||
|
||||
private _handleDblClick() {
|
||||
handleClick(this, this.hass!, this._config!, false, true);
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
@ -9,7 +9,6 @@ import {
|
||||
PropertyValues,
|
||||
} from "lit-element";
|
||||
|
||||
import "../../../components/entity/ha-state-label-badge";
|
||||
import "../components/hui-warning-element";
|
||||
|
||||
import { computeStateDisplay } from "../../../common/entity/compute_state_display";
|
||||
|
@ -48,6 +48,9 @@ export interface ServiceButtonElementConfig extends LovelaceElementConfig {
|
||||
export interface StateBadgeElementConfig extends LovelaceElementConfig {
|
||||
entity: string;
|
||||
title?: string;
|
||||
tap_action?: ActionConfig;
|
||||
hold_action?: ActionConfig;
|
||||
double_tap_action?: ActionConfig;
|
||||
}
|
||||
|
||||
export interface StateIconElementConfig extends LovelaceElementConfig {
|
||||
|
Loading…
x
Reference in New Issue
Block a user