Skip to content

Commit

Permalink
Add template badge
Browse files Browse the repository at this point in the history
  • Loading branch information
piitaya committed Jul 22, 2024
1 parent f409264 commit ec087ad
Show file tree
Hide file tree
Showing 11 changed files with 576 additions and 1 deletion.
4 changes: 4 additions & 0 deletions src/badges/template/const.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { PREFIX_NAME } from "../../const";

export const TEMPLATE_BADGE_NAME = `${PREFIX_NAME}-template-badge`;
export const TEMPLATE_BADGE_EDITOR_NAME = `${TEMPLATE_BADGE_NAME}-editor`;
32 changes: 32 additions & 0 deletions src/badges/template/template-badge-config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { array, assign, object, optional, string, union } from "superstruct";
import { LovelaceBadgeConfig } from "../../ha";
import {
ActionsSharedConfig,
actionsSharedConfigStruct,
} from "../../shared/config/actions-config";
import { lovelaceBadgeConfigStruct } from "../../shared/config/lovelace-badge-config";

export type TemplateBadgeConfig = LovelaceBadgeConfig &
ActionsSharedConfig & {
entity?: string;
icon?: string;
color?: string;
label?: string;
content?: string;
picture?: string;
entity_id?: string | string[];
};

export const templateBadgeConfigStruct = assign(
lovelaceBadgeConfigStruct,
actionsSharedConfigStruct,
object({
entity: optional(string()),
icon: optional(string()),
color: optional(string()),
label: optional(string()),
content: optional(string()),
picture: optional(string()),
entity_id: optional(union([string(), array(string())])),
})
);
99 changes: 99 additions & 0 deletions src/badges/template/template-badge-editor.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { html, nothing } from "lit";
import { customElement, state } from "lit/decorators.js";
import { assert } from "superstruct";
import { LovelaceBadgeEditor, fireEvent } from "../../ha";
import setupCustomlocalize from "../../localize";
import { computeActionsFormSchema } from "../../shared/config/actions-config";
import { MushroomBaseElement } from "../../utils/base-element";
import { GENERIC_LABELS } from "../../utils/form/generic-fields";
import { HaFormSchema } from "../../utils/form/ha-form";
import { loadHaComponents } from "../../utils/loader";
import { TEMPLATE_BADGE_EDITOR_NAME } from "./const";
import {
TemplateBadgeConfig,
templateBadgeConfigStruct,
} from "./template-badge-config";

export const TEMPLATE_LABELS = ["content", "label", "picture"];

const SCHEMA: HaFormSchema[] = [
{ name: "entity", selector: { entity: {} } },
{
name: "icon",
selector: { template: {} },
},
{
name: "color",
selector: { template: {} },
},
{
name: "label",
selector: { template: {} },
},
{
name: "content",
selector: { template: {} },
},
{
name: "picture",
selector: { template: {} },
},
...computeActionsFormSchema(),
];

@customElement(TEMPLATE_BADGE_EDITOR_NAME)
export class TemplateBadgeEditor
extends MushroomBaseElement
implements LovelaceBadgeEditor
{
@state() private _config?: TemplateBadgeConfig;

connectedCallback() {
super.connectedCallback();
void loadHaComponents();
}

public setConfig(config: TemplateBadgeConfig): void {
assert(config, templateBadgeConfigStruct);
this._config = config;
}

private _computeLabel = (schema: HaFormSchema) => {
const customLocalize = setupCustomlocalize(this.hass!);

if (schema.name === "entity") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entity"
)} (${customLocalize("editor.card.template.entity_extra")})`;
}
if (GENERIC_LABELS.includes(schema.name)) {
return customLocalize(`editor.card.generic.${schema.name}`);
}
if (TEMPLATE_LABELS.includes(schema.name)) {
return customLocalize(`editor.card.template.${schema.name}`);
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);
};

protected render() {
if (!this.hass || !this._config) {
return nothing;
}

return html`
<ha-form
.hass=${this.hass}
.data=${this._config}
.schema=${SCHEMA}
.computeLabel=${this._computeLabel}
@value-changed=${this._valueChanged}
></ha-form>
`;
}

private _valueChanged(ev: CustomEvent): void {
fireEvent(this, "config-changed", { config: ev.detail.value });
}
}
Loading

0 comments on commit ec087ad

Please sign in to comment.