|
| 1 | +import { html, TemplateResult } from "lit"; |
| 2 | +import { customElement, state } from "lit/decorators.js"; |
| 3 | +import memoizeOne from "memoize-one"; |
| 4 | +import { assert } from "superstruct"; |
| 5 | +import { fireEvent, LovelaceCardEditor } from "../../ha"; |
| 6 | +import setupCustomlocalize from "../../localize"; |
| 7 | +import { APPEARANCE_FORM_SCHEMA } from "../../shared/config/appearance-config"; |
| 8 | +import { MushroomBaseElement } from "../../utils/base-element"; |
| 9 | +import { GENERIC_LABELS } from "../../utils/form/generic-fields"; |
| 10 | +import { HaFormSchema } from "../../utils/form/ha-form"; |
| 11 | +import { loadHaComponents } from "../../utils/loader"; |
| 12 | +import { SHOPPING_LIST_CARD_EDITOR_NAME } from "./const"; |
| 13 | +import { ShoppingListCardConfig, shoppingListCardConfigStruct } from "./shopping-list-card-config"; |
| 14 | + |
| 15 | +export const SHOPPING_LIST_LABELS = ["checked_icon", "unchecked_icon"]; |
| 16 | + |
| 17 | +const schema = [ |
| 18 | + { name: "name", selector: { text: {} } }, |
| 19 | + { name: "icon", selector: { icon: {} } }, |
| 20 | + { |
| 21 | + type: "grid", |
| 22 | + name: "", |
| 23 | + schema: [ |
| 24 | + { name: "layout", selector: { "mush-layout": {} } }, |
| 25 | + { name: "primary_info", selector: { "mush-info": {} } }, |
| 26 | + { name: "secondary_info", selector: { "mush-info": {} } }, |
| 27 | + ], |
| 28 | + }, |
| 29 | + { |
| 30 | + type: "grid", |
| 31 | + name: "", |
| 32 | + schema: [ |
| 33 | + { name: "unchecked_icon", selector: { icon: {} } }, |
| 34 | + { name: "checked_icon", selector: { icon: {} } }, |
| 35 | + ], |
| 36 | + }, |
| 37 | +]; |
| 38 | + |
| 39 | +@customElement(SHOPPING_LIST_CARD_EDITOR_NAME) |
| 40 | +export class ShoppingListCardEditor extends MushroomBaseElement implements LovelaceCardEditor { |
| 41 | + @state() private _config?: ShoppingListCardConfig; |
| 42 | + |
| 43 | + connectedCallback() { |
| 44 | + super.connectedCallback(); |
| 45 | + void loadHaComponents(); |
| 46 | + } |
| 47 | + |
| 48 | + public setConfig(config: ShoppingListCardConfig): void { |
| 49 | + assert(config, shoppingListCardConfigStruct); |
| 50 | + this._config = config; |
| 51 | + } |
| 52 | + |
| 53 | + private _computeLabel = (schema: HaFormSchema) => { |
| 54 | + const customLocalize = setupCustomlocalize(this.hass!); |
| 55 | + |
| 56 | + if (GENERIC_LABELS.includes(schema.name)) { |
| 57 | + return customLocalize(`editor.card.generic.${schema.name}`); |
| 58 | + } |
| 59 | + if (SHOPPING_LIST_LABELS.includes(schema.name)) { |
| 60 | + return customLocalize(`editor.card.shopping_list.${schema.name}`); |
| 61 | + } |
| 62 | + return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`); |
| 63 | + }; |
| 64 | + |
| 65 | + protected render(): TemplateResult { |
| 66 | + if (!this.hass || !this._config) { |
| 67 | + return html``; |
| 68 | + } |
| 69 | + |
| 70 | + return html` |
| 71 | + <ha-form |
| 72 | + .hass=${this.hass} |
| 73 | + .data=${this._config} |
| 74 | + .schema=${schema} |
| 75 | + .computeLabel=${this._computeLabel} |
| 76 | + @value-changed=${this._valueChanged} |
| 77 | + ></ha-form> |
| 78 | + `; |
| 79 | + } |
| 80 | + |
| 81 | + private _valueChanged(ev: CustomEvent): void { |
| 82 | + fireEvent(this, "config-changed", { config: ev.detail.value }); |
| 83 | + } |
| 84 | +} |
0 commit comments