mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 11:16:35 +00:00
Add more config option to heading entity element (#22063)
Add show state and show icon to heading entity
This commit is contained in:
parent
c30e4a6935
commit
76e53e9738
@ -24,6 +24,7 @@ import {
|
|||||||
attachConditionMediaQueriesListeners,
|
attachConditionMediaQueriesListeners,
|
||||||
checkConditionsMet,
|
checkConditionsMet,
|
||||||
} from "../../common/validate-condition";
|
} from "../../common/validate-condition";
|
||||||
|
import { DEFAULT_CONFIG } from "../../editor/heading-entity/hui-heading-entity-editor";
|
||||||
import type { HeadingEntityConfig } from "../types";
|
import type { HeadingEntityConfig } from "../types";
|
||||||
|
|
||||||
@customElement("hui-heading-entity")
|
@customElement("hui-heading-entity")
|
||||||
@ -54,6 +55,7 @@ export class HuiHeadingEntity extends LitElement {
|
|||||||
: configOrString;
|
: configOrString;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
...DEFAULT_CONFIG,
|
||||||
tap_action: {
|
tap_action: {
|
||||||
action: "none",
|
action: "none",
|
||||||
},
|
},
|
||||||
@ -133,16 +135,24 @@ export class HuiHeadingEntity extends LitElement {
|
|||||||
role=${ifDefined(actionable ? "button" : undefined)}
|
role=${ifDefined(actionable ? "button" : undefined)}
|
||||||
tabindex=${ifDefined(actionable ? "0" : undefined)}
|
tabindex=${ifDefined(actionable ? "0" : undefined)}
|
||||||
>
|
>
|
||||||
|
${config.show_icon
|
||||||
|
? html`
|
||||||
<ha-state-icon
|
<ha-state-icon
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.icon=${config.icon}
|
.icon=${config.icon}
|
||||||
.stateObj=${stateObj}
|
.stateObj=${stateObj}
|
||||||
></ha-state-icon>
|
></ha-state-icon>
|
||||||
|
`
|
||||||
|
: nothing}
|
||||||
|
${config.show_state
|
||||||
|
? html`
|
||||||
<state-display
|
<state-display
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.stateObj=${stateObj}
|
.stateObj=${stateObj}
|
||||||
.content=${config.content || "state"}
|
.content=${config.state_content}
|
||||||
></state-display>
|
></state-display>
|
||||||
|
`
|
||||||
|
: nothing}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -505,8 +505,10 @@ export interface TileCardConfig extends LovelaceCardConfig {
|
|||||||
|
|
||||||
export interface HeadingEntityConfig {
|
export interface HeadingEntityConfig {
|
||||||
entity: string;
|
entity: string;
|
||||||
content?: string | string[];
|
state_content?: string | string[];
|
||||||
icon?: string;
|
icon?: string;
|
||||||
|
show_state?: boolean;
|
||||||
|
show_icon?: boolean;
|
||||||
tap_action?: ActionConfig;
|
tap_action?: ActionConfig;
|
||||||
visibility?: Condition[];
|
visibility?: Condition[];
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { mdiEye, mdiGestureTap } from "@mdi/js";
|
import { mdiEye, mdiGestureTap, mdiPalette } from "@mdi/js";
|
||||||
import { css, html, LitElement, nothing } from "lit";
|
import { css, html, LitElement, nothing } from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import memoizeOne from "memoize-one";
|
import memoizeOne from "memoize-one";
|
||||||
@ -6,12 +6,14 @@ import {
|
|||||||
any,
|
any,
|
||||||
array,
|
array,
|
||||||
assert,
|
assert,
|
||||||
|
boolean,
|
||||||
object,
|
object,
|
||||||
optional,
|
optional,
|
||||||
string,
|
string,
|
||||||
union,
|
union,
|
||||||
} from "superstruct";
|
} from "superstruct";
|
||||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||||
|
import { LocalizeFunc } from "../../../../common/translations/localize";
|
||||||
import "../../../../components/ha-expansion-panel";
|
import "../../../../components/ha-expansion-panel";
|
||||||
import "../../../../components/ha-form/ha-form";
|
import "../../../../components/ha-form/ha-form";
|
||||||
import type {
|
import type {
|
||||||
@ -26,14 +28,25 @@ import "../conditions/ha-card-conditions-editor";
|
|||||||
import { configElementStyle } from "../config-elements/config-elements-style";
|
import { configElementStyle } from "../config-elements/config-elements-style";
|
||||||
import { actionConfigStruct } from "../structs/action-struct";
|
import { actionConfigStruct } from "../structs/action-struct";
|
||||||
|
|
||||||
|
export const DEFAULT_CONFIG: Partial<HeadingEntityConfig> = {
|
||||||
|
show_state: true,
|
||||||
|
show_icon: true,
|
||||||
|
};
|
||||||
|
|
||||||
const entityConfigStruct = object({
|
const entityConfigStruct = object({
|
||||||
entity: string(),
|
entity: string(),
|
||||||
content: optional(union([string(), array(string())])),
|
|
||||||
icon: optional(string()),
|
icon: optional(string()),
|
||||||
|
state_content: optional(union([string(), array(string())])),
|
||||||
|
show_state: optional(boolean()),
|
||||||
|
show_icon: optional(boolean()),
|
||||||
tap_action: optional(actionConfigStruct),
|
tap_action: optional(actionConfigStruct),
|
||||||
visibility: optional(array(any())),
|
visibility: optional(array(any())),
|
||||||
});
|
});
|
||||||
|
|
||||||
|
type FormData = HeadingEntityConfig & {
|
||||||
|
displayed_elements?: string[];
|
||||||
|
};
|
||||||
|
|
||||||
@customElement("hui-heading-entity-editor")
|
@customElement("hui-heading-entity-editor")
|
||||||
export class HuiHeadingEntityEditor
|
export class HuiHeadingEntityEditor
|
||||||
extends LitElement
|
extends LitElement
|
||||||
@ -47,26 +60,60 @@ export class HuiHeadingEntityEditor
|
|||||||
|
|
||||||
public setConfig(config: HeadingEntityConfig): void {
|
public setConfig(config: HeadingEntityConfig): void {
|
||||||
assert(config, entityConfigStruct);
|
assert(config, entityConfigStruct);
|
||||||
this._config = config;
|
this._config = {
|
||||||
|
...DEFAULT_CONFIG,
|
||||||
|
...config,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private _schema = memoizeOne(
|
private _schema = memoizeOne(
|
||||||
() =>
|
(localize: LocalizeFunc) =>
|
||||||
[
|
[
|
||||||
{
|
{
|
||||||
name: "entity",
|
name: "entity",
|
||||||
selector: { entity: {} },
|
selector: { entity: {} },
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "appearance",
|
||||||
|
type: "expandable",
|
||||||
|
flatten: true,
|
||||||
|
iconPath: mdiPalette,
|
||||||
|
schema: [
|
||||||
{
|
{
|
||||||
name: "icon",
|
name: "icon",
|
||||||
selector: { icon: {} },
|
selector: { icon: {} },
|
||||||
context: { icon_entity: "entity" },
|
context: { icon_entity: "entity" },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "content",
|
name: "displayed_elements",
|
||||||
|
selector: {
|
||||||
|
select: {
|
||||||
|
mode: "list",
|
||||||
|
multiple: true,
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
value: "state",
|
||||||
|
label: localize(
|
||||||
|
`ui.panel.lovelace.editor.card.heading.entity_config.displayed_elements_options.state`
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "icon",
|
||||||
|
label: localize(
|
||||||
|
`ui.panel.lovelace.editor.card.heading.entity_config.displayed_elements_options.icon`
|
||||||
|
),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "state_content",
|
||||||
selector: { ui_state_content: {} },
|
selector: { ui_state_content: {} },
|
||||||
context: { filter_entity: "entity" },
|
context: { filter_entity: "entity" },
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "interactions",
|
name: "interactions",
|
||||||
type: "expandable",
|
type: "expandable",
|
||||||
@ -86,18 +133,30 @@ export class HuiHeadingEntityEditor
|
|||||||
] as const satisfies readonly HaFormSchema[]
|
] as const satisfies readonly HaFormSchema[]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
private _displayedElements = memoizeOne((config: HeadingEntityConfig) => {
|
||||||
|
const elements: string[] = [];
|
||||||
|
if (config.show_state) elements.push("state");
|
||||||
|
if (config.show_icon) elements.push("icon");
|
||||||
|
return elements;
|
||||||
|
});
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
if (!this.hass || !this._config) {
|
if (!this.hass || !this._config) {
|
||||||
return nothing;
|
return nothing;
|
||||||
}
|
}
|
||||||
|
|
||||||
const schema = this._schema();
|
const schema = this._schema(this.hass.localize);
|
||||||
|
|
||||||
|
const data: FormData = {
|
||||||
|
...this._config,
|
||||||
|
displayed_elements: this._displayedElements(this._config),
|
||||||
|
};
|
||||||
|
|
||||||
const conditions = this._config.visibility ?? [];
|
const conditions = this._config.visibility ?? [];
|
||||||
return html`
|
return html`
|
||||||
<ha-form
|
<ha-form
|
||||||
.hass=${this.hass}
|
.hass=${this.hass}
|
||||||
.data=${this._config}
|
.data=${data}
|
||||||
.schema=${schema}
|
.schema=${schema}
|
||||||
.computeLabel=${this._computeLabelCallback}
|
.computeLabel=${this._computeLabelCallback}
|
||||||
@value-changed=${this._valueChanged}
|
@value-changed=${this._valueChanged}
|
||||||
@ -132,7 +191,13 @@ export class HuiHeadingEntityEditor
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const config = ev.detail.value as HeadingEntityConfig;
|
const config = ev.detail.value as FormData;
|
||||||
|
|
||||||
|
if (config.displayed_elements) {
|
||||||
|
config.show_state = config.displayed_elements.includes("state");
|
||||||
|
config.show_icon = config.displayed_elements.includes("icon");
|
||||||
|
delete config.displayed_elements;
|
||||||
|
}
|
||||||
|
|
||||||
fireEvent(this, "config-changed", { config });
|
fireEvent(this, "config-changed", { config });
|
||||||
}
|
}
|
||||||
@ -160,7 +225,9 @@ export class HuiHeadingEntityEditor
|
|||||||
schema: SchemaUnion<ReturnType<typeof this._schema>>
|
schema: SchemaUnion<ReturnType<typeof this._schema>>
|
||||||
) => {
|
) => {
|
||||||
switch (schema.name) {
|
switch (schema.name) {
|
||||||
case "content":
|
case "state_content":
|
||||||
|
case "displayed_elements":
|
||||||
|
case "appearance":
|
||||||
return this.hass!.localize(
|
return this.hass!.localize(
|
||||||
`ui.panel.lovelace.editor.card.heading.entity_config.${schema.name}`
|
`ui.panel.lovelace.editor.card.heading.entity_config.${schema.name}`
|
||||||
);
|
);
|
||||||
|
@ -6007,9 +6007,15 @@
|
|||||||
},
|
},
|
||||||
"entities": "Entities",
|
"entities": "Entities",
|
||||||
"entity_config": {
|
"entity_config": {
|
||||||
"content": "Content",
|
|
||||||
"visibility": "Visibility",
|
"visibility": "Visibility",
|
||||||
"visibility_explanation": "The entity will be shown when ALL conditions below are fulfilled. If no conditions are set, the entity will always be shown."
|
"visibility_explanation": "The entity will be shown when ALL conditions below are fulfilled. If no conditions are set, the entity will always be shown.",
|
||||||
|
"appearance": "Appearance",
|
||||||
|
"state_content": "State content",
|
||||||
|
"displayed_elements": "[%key:ui::panel::lovelace::editor::badge::entity::displayed_elements%]",
|
||||||
|
"displayed_elements_options": {
|
||||||
|
"icon": "[%key:ui::panel::lovelace::editor::badge::entity::displayed_elements_options::icon%]",
|
||||||
|
"state": "[%key:ui::panel::lovelace::editor::badge::entity::displayed_elements_options::state%]"
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"default_heading": "Kitchen"
|
"default_heading": "Kitchen"
|
||||||
},
|
},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user