From 16a5806765f2e42c726e895f31d2a8ca541f2d44 Mon Sep 17 00:00:00 2001 From: idaho <664101+idaho@users.noreply.github.com> Date: Thu, 4 Jan 2024 14:40:39 +0100 Subject: [PATCH] cleanup editor layout (#156) --- rollup.config.mjs | 3 +- src/cards/trash-card/formSchemas.ts | 89 +++++ src/cards/trash-card/trash-card-editor.ts | 370 ++++++++++-------- .../trash-card/trash-card-pattern-editor.ts | 177 +++++++++ src/cards/trash-card/trash-card.ts | 112 ++---- src/localize.ts | 2 +- src/translations/de.json | 49 ++- src/translations/en.json | 59 ++- src/translations/fr.json | 61 ++- src/translations/it.json | 49 ++- src/translations/sk.json | 59 ++- src/utils/form/date-style.ts | 2 +- src/utils/form/ha-form.ts | 18 +- src/utils/form/ha-selector-date-style.ts | 3 +- src/utils/ha.ts | 1 + src/utils/registerCustomCard.ts | 2 - 16 files changed, 659 insertions(+), 397 deletions(-) create mode 100644 src/cards/trash-card/formSchemas.ts create mode 100644 src/cards/trash-card/trash-card-pattern-editor.ts create mode 100644 src/utils/ha.ts diff --git a/rollup.config.mjs b/rollup.config.mjs index 84b49c1..c601839 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -37,7 +37,8 @@ const plugins = [ files: IGNORED_FILES.map(file => require.resolve(file)) }), typescript({ - declaration: false + declaration: false, + exclude: [ '**/*.test.ts' ] }), nodeResolve(), json(), diff --git a/src/cards/trash-card/formSchemas.ts b/src/cards/trash-card/formSchemas.ts new file mode 100644 index 0000000..50bd3b1 --- /dev/null +++ b/src/cards/trash-card/formSchemas.ts @@ -0,0 +1,89 @@ +import type { HaFormSchema } from '../../utils/form/ha-form'; +import type setupCustomlocalize from '../../localize'; + +// eslint-disable-next-line @typescript-eslint/naming-convention +const SCHEMA_PATTERN_OTHERS: HaFormSchema[] = [ + { + label: 'icon', + name: 'icon', + selector: { icon: {}}, + // eslint-disable-next-line @typescript-eslint/naming-convention + context: { icon_entity: 'entity' } + }, + // eslint-disable-next-line @typescript-eslint/naming-convention + { label: 'color', name: 'color', selector: { ui_color: {}}} + +]; + +// eslint-disable-next-line @typescript-eslint/naming-convention +const SCHEMA_PATTERN: HaFormSchema[] = [ + { label: 'label', name: 'label', selector: { text: {}}}, + ...SCHEMA_PATTERN_OTHERS, + { label: 'pattern', name: 'pattern', selector: { text: {}}} +]; + +const getSchema = (customLocalize: ReturnType) => { + // eslint-disable-next-line @typescript-eslint/naming-convention + const settings: HaFormSchema[] = [ + + // eslint-disable-next-line @typescript-eslint/naming-convention + { name: 'filter_events', selector: { boolean: {}}}, + { name: 'drop_todayevents_from', + default: { + hours: 11, + minutes: 0, + seconds: 0 + }, + selector: { + time: { + } + }}, + { name: 'next_days', + selector: { number: { + min: 1, + max: 365, + step: 1, + mode: 'box' + }}} + + ]; + + // eslint-disable-next-line @typescript-eslint/naming-convention + const appearance: HaFormSchema[] = [ + + // eslint-disable-next-line @typescript-eslint/naming-convention + { name: 'layout', selector: { mush_layout: {}}}, + { name: 'fill_container', selector: { boolean: {}}}, + { name: 'full_size', selector: { boolean: {}}}, + { name: 'use_summary', selector: { boolean: {}}}, + // eslint-disable-next-line @typescript-eslint/naming-convention + { name: 'day_style', selector: { trashcard_datestyle: {}}} + ]; + + // eslint-disable-next-line @typescript-eslint/naming-convention + const schema: HaFormSchema[] = [ + { name: 'entity', selector: { entity: { domain: 'calendar' }}}, + { + type: 'expandable', + name: '', + title: customLocalize('editor.form.tabs.settings'), + icon: 'mdi:cog', + schema: settings + }, + { + type: 'expandable', + name: '', + title: customLocalize('editor.form.tabs.appearance'), + icon: 'mdi:palette', + schema: appearance + } + ]; + + return schema; +}; + +export { + getSchema, + SCHEMA_PATTERN, + SCHEMA_PATTERN_OTHERS +}; diff --git a/src/cards/trash-card/trash-card-editor.ts b/src/cards/trash-card/trash-card-editor.ts index 7e5c6fc..0ae2c1d 100644 --- a/src/cards/trash-card/trash-card-editor.ts +++ b/src/cards/trash-card/trash-card-editor.ts @@ -1,40 +1,44 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/unbound-method */ +/* eslint-disable no-return-assign */ import { animations } from 'lovelace-mushroom/src/utils/entity-styles'; import { assert } from 'superstruct'; import { GENERIC_LABELS } from 'lovelace-mushroom/src/utils/form/generic-fields'; import type { HaFormSchema } from '../../utils/form/ha-form'; +import { type HomeAssistant } from '../../utils/ha'; import { loadHaComponents } from 'lovelace-mushroom/src/utils/loader'; +import memoizeOne from 'memoize-one'; import setupCustomlocalize from '../../localize'; +import type { SubElementEditorConfig } from './trash-card-pattern-editor'; import { TRASH_CARD_EDITOR_NAME } from './const'; import { css, type CSSResultGroup, html, LitElement, nothing, type PropertyValues } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { defaultColorCss, defaultDarkColorCss } from 'lovelace-mushroom/src/utils/colors'; import { entityCardConfigStruct, type TrashCardConfig } from './trash-card-config'; -import { fireEvent, type HomeAssistant, type LovelaceCardEditor } from 'lovelace-mushroom/src/ha'; +import { fireEvent, type HASSDomEvent, type LovelaceCardEditor } from 'lovelace-mushroom/src/ha'; + +import { getSchema, SCHEMA_PATTERN, SCHEMA_PATTERN_OTHERS } from './formSchemas'; import { themeColorCss, themeVariables } from 'lovelace-mushroom/src/utils/theme'; +// eslint-disable-next-line no-duplicate-imports +import './trash-card-pattern-editor'; + +declare global { + // eslint-disable-next-line @typescript-eslint/naming-convention + interface HASSDomEvents { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'config-changed': { + config: TrashCardConfig; + }; + } +} // eslint-disable-next-line @typescript-eslint/naming-convention const TRASH_LABELS = new Set([ - 'organic.label', - 'organic.icon', - 'organic.color', - 'organic.pattern', - 'paper.label', - 'paper.icon', - 'paper.color', - 'paper.pattern', - 'recycle.label', - 'recycle.icon', - 'recycle.color', - 'recycle.pattern', - 'waste.label', - 'waste.icon', - 'waste.color', - 'waste.pattern', - 'others.label', - 'others.icon', - 'others.color', - 'others.pattern' + 'label', + 'icon', + 'color', + 'pattern' ]); // eslint-disable-next-line @typescript-eslint/naming-convention @@ -47,129 +51,6 @@ const OTHER_LABELS = new Set([ 'day_style' ]); -// eslint-disable-next-line @typescript-eslint/naming-convention -const SCHEMA: HaFormSchema[] = [ - { name: 'entity', selector: { entity: { domain: 'calendar' }}}, - { - type: 'grid', - name: 'settings', - schema: [ - { - type: 'grid', - name: 'organic', - label: 'Biomüll', - schema: [ - { label: 'organic.label', name: 'label', selector: { text: {}}}, - { - label: 'organic.icon', - name: 'icon', - selector: { icon: {}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - context: { icon_entity: 'entity' } - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - { label: 'organic.color', name: 'color', selector: { mush_color: {}}}, - { label: 'organic.pattern', name: 'pattern', selector: { text: {}}} - ] - }, - { - type: 'grid', - name: 'paper', - schema: [ - { label: 'paper.label', name: 'label', selector: { text: {}}}, - { - label: 'paper.icon', - name: 'icon', - selector: { icon: {}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - context: { icon_entity: 'entity' } - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - { label: 'paper.color', name: 'color', selector: { mush_color: {}}}, - { label: 'paper.pattern', name: 'pattern', selector: { text: {}}} - ] - }, - { - type: 'grid', - name: 'recycle', - schema: [ - { label: 'recycle.label', name: 'label', selector: { text: {}}}, - { - label: 'recycle.icon', - name: 'icon', - selector: { icon: {}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - context: { icon_entity: 'entity' } - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - { label: 'recycle.color', name: 'color', selector: { mush_color: {}}}, - { label: 'recycle.pattern', name: 'pattern', selector: { text: {}}} - ] - }, - { - type: 'grid', - name: 'waste', - schema: [ - { label: 'waste.label', name: 'label', selector: { text: {}}}, - { - label: 'waste.icon', - name: 'icon', - selector: { icon: {}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - context: { icon_entity: 'entity' } - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - { label: 'waste.color', name: 'color', selector: { mush_color: {}}}, - { label: 'waste.pattern', name: 'pattern', selector: { text: {}}} - ] - }, - { - type: 'grid', - name: 'others', - schema: [ - { - label: 'others.icon', - name: 'icon', - selector: { icon: {}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - context: { icon_entity: 'entity' } - }, - // eslint-disable-next-line @typescript-eslint/naming-convention - { label: 'others.color', name: 'color', selector: { mush_color: {}}} - ] - } - ] - }, - { - type: 'grid', - name: '', - schema: [ - // eslint-disable-next-line @typescript-eslint/naming-convention - { name: 'layout', selector: { mush_layout: {}}}, - { name: 'fill_container', selector: { boolean: {}}}, - { name: 'full_size', selector: { boolean: {}}}, - // eslint-disable-next-line @typescript-eslint/naming-convention - { name: 'day_style', selector: { trashcard_datestyle: {}}}, - { name: 'filter_events', selector: { boolean: {}}}, - { name: 'drop_todayevents_from', - default: { - hours: 11, - minutes: 0, - seconds: 0 - }, - selector: { time: {}}}, - { name: 'use_summary', selector: { boolean: {}}}, - { name: 'next_days', - selector: { number: { - min: 1, - max: 365, - step: 1, - mode: 'box' - }}} - ] - } -]; - export const computeDarkMode = (hass?: HomeAssistant): boolean => { if (!hass) { return false; @@ -185,6 +66,13 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor { // eslint-disable-next-line @typescript-eslint/naming-convention @state() private config?: TrashCardConfig; + @property() private readonly selectedTabIndex = 0; + + // eslint-disable-next-line @typescript-eslint/naming-convention + @state() private subElementEditorConfig?: SubElementEditorConfig; + + @state() private readonly schema = memoizeOne(getSchema); + public connectedCallback (): void { super.connectedCallback(); // eslint-disable-next-line no-void @@ -193,11 +81,30 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor { public setConfig (config: Partial): void { assert(config, entityCardConfigStruct); + this.config = { // eslint-disable-next-line @typescript-eslint/naming-convention drop_todayevents_from: '10:00:00', // eslint-disable-next-line @typescript-eslint/naming-convention next_days: 2, + settings: { + organic: { + icon: 'mdi:flower' + }, + paper: { + icon: 'mdi:newspaper' + }, + recycle: { + icon: 'mdi:recycle-variant' + }, + waste: { + icon: 'mdi:trash-can-outline' + }, + others: { + icon: 'mdi:dump-truck' + }, + ...config.settings + }, // eslint-disable-next-line @typescript-eslint/naming-convention day_style: 'default', @@ -227,34 +134,122 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor { if (GENERIC_LABELS.includes(schema.name) || OTHER_LABELS.has(schema.name)) { return customLocalize(`editor.card.generic.${schema.name}`); } + if (schema.label && TRASH_LABELS.has(schema.label)) { - return customLocalize(`editor.card.trash.${schema.label}`); + return customLocalize(`editor.card.trash.pattern.fields.${schema.label}`); } return this.hass.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`); }; + private editDetailElement (ev: HASSDomEvent<{ subElementConfig: SubElementEditorConfig }>): void { + this.subElementEditorConfig = ev.detail.subElementConfig; + } + + private renderFormPatternsEditor () { + if (!this.hass) { + return nothing; + } + + const customLocalize = setupCustomlocalize(this.hass); + + if (this.subElementEditorConfig) { + return html` +
+
+ + + + ${customLocalize(`editor.card.trash.pattern.title`)} +
+
+ + + `; + } + + return html` + `; + } + + private goBack (): void { + this.subElementEditorConfig = undefined; + } + + private handleSubElementChanged (ev: CustomEvent): void { + ev.stopPropagation(); + if (!this.config || !this.hass || !this.subElementEditorConfig) { + return; + } + + const item = this.subElementEditorConfig.key!; + + const { value } = ev.detail; + + this.config.settings = { + ...this.config.settings, + [item]: { + ...this.config.settings![item] ?? {}, + ...value + } + }; + + this.subElementEditorConfig = { + ...this.subElementEditorConfig, + elementConfig: value + }; + + fireEvent(this, 'config-changed', { config: this.config }); + } + protected render () { if (!this.hass || !this.config) { return nothing; } + const customLocalize = setupCustomlocalize(this.hass); + + const schema = this.schema(customLocalize); - /* eslint-disable @typescript-eslint/unbound-method */ return html` - - `; - /* eslint-enable @typescript-eslint/unbound-method */ + + +
+ + + ${customLocalize('editor.form.tabs.patterns')} +
+
+ ${this.renderFormPatternsEditor()} +
+ + + `; } protected valueChanged (ev: CustomEvent): void { - // @ts-expect-error 2345 fireEvent(this, 'config-changed', { config: ev.detail.value }); } @@ -262,17 +257,56 @@ export class TrashCardEditor extends LitElement implements LovelaceCardEditor { return [ animations, css` - :host { - ${defaultColorCss} - } - :host([dark-mode]) { - ${defaultDarkColorCss} - } - :host { - ${themeColorCss} - ${themeVariables} - } - ` + :host { + ${defaultColorCss} + } + :host([dark-mode]) { + ${defaultDarkColorCss} + } + :host { + ${themeColorCss} + ${themeVariables} + } + + #trashcard-pattern-editor header { + display: flex; + justify-content: space-between; + align-items: center; + } + #trashcard-pattern-editor .back-title { + display: flex; + align-items: center; + font-size: 18px; + } + + #trashcard-pattern-editor ha-icon { + display: flex; + align-items: center; + justify-content: center; + } + + #pattern-expansion-panel { + margin-top: 24px; + display: flex !important; + flex-direction: column; + } + #pattern-expansion-panel ha-form { + display: block; + } + #pattern-expansion-panel .content { + padding: 12px; + } + #pattern-expansion-panel { + display: block; + --expansion-panel-content-padding: 0; + border-radius: 6px; + --ha-card-border-radius: 6px; + } + #ha-expansion-panel ha-svg-icon, + #ha-expansion-panel ha-icon { + color: var(--secondary-text-color); + } + ` ]; } } diff --git a/src/cards/trash-card/trash-card-pattern-editor.ts b/src/cards/trash-card/trash-card-pattern-editor.ts new file mode 100644 index 0000000..c59ea18 --- /dev/null +++ b/src/cards/trash-card/trash-card-pattern-editor.ts @@ -0,0 +1,177 @@ +/* eslint-disable no-underscore-dangle */ +/* eslint-disable @typescript-eslint/unbound-method */ +/* eslint-disable no-return-assign */ +import { fireEvent } from 'lovelace-mushroom/src/ha'; +import { guard } from 'lit/directives/guard.js'; +import type { HomeAssistant } from '../../utils/ha'; +import type { ItemSettings } from '../../utils/itemSettings'; +import setupCustomlocalize from '../../localize'; +import { type TrashCardConfig } from './trash-card-config'; + +import { css, type CSSResultGroup, html, LitElement, nothing, type PropertyValues } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; + +export interface SubElementEditorConfig { + index?: number; + key?: string; + elementConfig?: ItemSettings; + type: string; +} + +declare global { + // eslint-disable-next-line @typescript-eslint/naming-convention + interface HASSDomEvents { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'edit-detail-element': { + subElementConfig: SubElementEditorConfig; + }; + } +} + +@customElement(`trash-card-pattern-editor`) +export class TrashCardPatternEditor extends LitElement { + @property({ attribute: false }) public hass?: HomeAssistant; + + @state() protected settings?: TrashCardConfig['settings']; + + @state() private attached = false; + + public connectedCallback () { + super.connectedCallback(); + this.attached = true; + } + + public disconnectedCallback () { + super.disconnectedCallback(); + this.attached = false; + } + + protected updated (changedProps: PropertyValues): void { + super.updated(changedProps); + + const attachedChanged = changedProps.has('attached'); + const settingsChanged = changedProps.has('settings'); + + if (!settingsChanged && !attachedChanged) { + return; + } + + if (settingsChanged) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.handleSettingsChanged(); + } + } + + private async handleSettingsChanged () { + await this.updateComplete; + } + + protected render () { + if (!this.hass || !this.settings) { + return nothing; + } + + const customLocalize = setupCustomlocalize(this.hass); + const settings = Object.entries(this.settings); + + return html` +
+ ${guard([ this.settings ], + () => settings.map(([ key, settingsConfig ], index) => + html` +
+
+ +
+ +
+
+ ${settingsConfig.label ?? customLocalize(`editor.card.trash.pattern.type.${key}`)} +
+
+ + + + +
`))} +
`; + } + + private editItem (ev: CustomEvent): void { + const { index } = (ev.currentTarget as any); + const settings = Object.entries(this.settings!); + + fireEvent(this, 'edit-detail-element', { + subElementConfig: { + index, + key: settings[index][0], + type: 'setting', + elementConfig: settings[index][1] + } + }); + } + + public static get styles (): CSSResultGroup { + return [ + css` + .settings { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: var(--spacing); + } + + .setting { + display: flex; + align-items: center; + } + + ha-icon { + display: flex; + } + + mushroom-select { + width: 100%; + } + + .setting .icon { + padding-right: 8px; + cursor: move; + } + + .setting .icon > * { + pointer-events: none; + } + + .special-row { + height: 60px; + font-size: 16px; + display: flex; + align-items: center; + justify-content: space-between; + flex-grow: 1; + } + + .special-row div { + display: flex; + flex-direction: column; + } + + .remove-icon, + .edit-icon { + --mdc-icon-button-size: 36px; + color: var(--secondary-text-color); + } + + .secondary { + font-size: 12px; + color: var(--secondary-text-color); + } + ` + ]; + } +} diff --git a/src/cards/trash-card/trash-card.ts b/src/cards/trash-card/trash-card.ts index 7704609..86e7e8f 100644 --- a/src/cards/trash-card/trash-card.ts +++ b/src/cards/trash-card/trash-card.ts @@ -8,6 +8,7 @@ import { eventToItem } from '../../utils/eventToItem'; import { findActiveEvent } from '../../utils/findActiveEvent'; import { getDayFromDate } from '../../utils/getDayFromDate'; import type { HassEntity } from 'home-assistant-js-websocket'; +import type { HomeAssistant } from '../../utils/ha'; import { isTodayAfter } from '../../utils/isTodayAfter'; import { loadHaComponents } from 'lovelace-mushroom/src/utils/loader'; import { normaliseEvents } from '../../utils/normaliseEvents'; @@ -16,7 +17,7 @@ import { registerCustomCard } from '../../utils/registerCustomCard'; import setupCustomlocalize from '../../localize'; import { styleMap } from 'lit/directives/style-map.js'; import type { TrashCardConfig } from './trash-card-config'; -import { actionHandler, computeRTL, computeStateDisplay, hasAction, type HomeAssistant, type LovelaceCard, type LovelaceCardEditor } from 'lovelace-mushroom/src/ha'; +import { actionHandler, computeRTL, computeStateDisplay, hasAction, type LovelaceCard, type LovelaceCardEditor } from 'lovelace-mushroom/src/ha'; import type { CalendarItem, ValidCalendarItem } from '../../utils/calendarItem'; import { computeRgbColor, defaultColorCss, defaultDarkColorCss } from 'lovelace-mushroom/src/utils/colors'; import { css, type CSSResultGroup, html, LitElement, nothing, type PropertyValues, type TemplateResult } from 'lit'; @@ -150,8 +151,8 @@ export class TrashCard extends LitElement implements LovelaceCard { return Boolean(item && item.type !== 'none'); } - protected getDateString (item: ValidCalendarItem): string { - if (!this.hass) { + protected getDateString (item: CalendarItem): string { + if (!this.isValidItem(item) || !this.hass) { return ''; } @@ -219,15 +220,17 @@ export class TrashCard extends LitElement implements LovelaceCard { return nothing; } - if (!this.isValidItem(this.currentItem)) { + const item = this.currentItem; + + if (!this.isValidItem(item)) { return html``; } const appearance = computeAppearance(this.config); const rtl = computeRTL(this.hass); - const { label } = this.currentItem; - const color = this.currentItem.color ?? 'disabled'; + const { label } = item; + const color = item.color ?? 'disabled'; const backgroundStyle = {}; @@ -237,7 +240,7 @@ export class TrashCard extends LitElement implements LovelaceCard { backgroundStyle['background-color'] = `rgba(${rgbColor}, 0.5)`; } - const secondary = this.getDateString(this.currentItem); + const secondary = this.getDateString(item); /* eslint-disable @typescript-eslint/naming-convention */ return html` @@ -249,12 +252,9 @@ export class TrashCard extends LitElement implements LovelaceCard { - ${this.renderIcon(stateObj)} + ${this.renderIcon(stateObj, item)} - // - // - // - // - // - // - // - // - // - // - // `; - // } - protected renderStateInfo ( stateObj: HassEntity, appearance: Appearance, @@ -370,32 +340,32 @@ export class TrashCard extends LitElement implements LovelaceCard { return [ animations, css` - :host { - ${defaultColorCss} - } - :host([dark-mode]) { - ${defaultDarkColorCss} - } - :host { - ${themeColorCss} - ${themeVariables} - } - `, + :host { + ${defaultColorCss} + } + :host([dark-mode]) { + ${defaultDarkColorCss} + } + :host { + ${themeColorCss} + ${themeVariables} + } + `, cardStyle, css` - ha-card.fullsize { - margin-left: -17px; - margin-right: -17px; - margin-top: -4px; - } - mushroom-state-item { - cursor: pointer; - } - mushroom-shape-icon { - --icon-color: rgb(var(--rgb-state-entity)); - --shape-color: rgba(var(--rgb-state-entity), 0.2); - } - ` + ha-card.fullsize { + margin-left: -17px; + margin-right: -17px; + margin-top: -4px; + } + mushroom-state-item { + cursor: pointer; + } + mushroom-shape-icon { + --icon-color: rgb(var(--rgb-state-entity)); + --shape-color: rgba(var(--rgb-state-entity), 0.2); + } + ` ]; } } diff --git a/src/localize.ts b/src/localize.ts index 6106233..6b9cfe3 100644 --- a/src/localize.ts +++ b/src/localize.ts @@ -1,4 +1,4 @@ -import type { HomeAssistant } from 'lovelace-mushroom/src/ha'; +import type { HomeAssistant } from './utils/ha'; import * as de from './translations/de.json'; import * as en from './translations/en.json'; diff --git a/src/translations/de.json b/src/translations/de.json index 258510a..c0edd6b 100644 --- a/src/translations/de.json +++ b/src/translations/de.json @@ -18,6 +18,11 @@ "vertical": "Vertikales Layout", "horizontal": "Horizontales Layout" } + }, + "tabs": { + "settings": "Einstellungen", + "appearance": "Darstellung", + "patterns": "Muster" } }, "card": { @@ -33,33 +38,23 @@ "day_style": "Ereigniss Zeitpunkt anzeigen als" }, "trash": { - "organic": { - "label": "Bio Bezeichnung", - "color": "Bio Farbe", - "icon": "Bio Symbol", - "pattern": "Bio erkennen an pattern" - }, - "paper": { - "label": "Papier Bezeichnung", - "color": "Papier Farbe", - "icon": "Papier Symbol", - "pattern": "Papier erkennen an pattern" - }, - "recycle": { - "label": "Verpackung Bezeichnung", - "color": "Verpackung Farbe", - "icon": "Verpackung Symbol", - "pattern": "Verpackung erkennen an pattern" - }, - "waste": { - "label": "Restmüll Bezeichnung", - "color": "Restmüll Farbe", - "icon": "Restmüll Symbol", - "pattern": "Restmüll erkennen an pattern" - }, - "others": { - "color": "Andere Farbe", - "icon": "Andere Symbol" + "pattern": { + "title": "Muster bearbeiten", + "edit": "bearbeiten", + "delete": "löschen", + "type": { + "organic": "Bio", + "paper": "Papier", + "recycle": "Verpackung", + "waste": "Restmüll", + "others": "Sonstiges" + }, + "fields": { + "label": "Bezeichnung", + "color": "Farbe", + "icon": "Symbol", + "pattern": "erkennen an Muster" + } } } } diff --git a/src/translations/en.json b/src/translations/en.json index 5efe21c..a28c52d 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -6,6 +6,12 @@ "default": "Default color" } }, + "day_style": { + "values": { + "default": "Date", + "counter": "days to" + } + }, "layout_picker": { "values": { "default": "Default layout", @@ -13,11 +19,10 @@ "horizontal": "Horizontal layout" } }, - "day_style": { - "values": { - "default": "Date", - "counter": "days to" - } + "tabs": { + "settings": "Settings", + "appearance": "Appearance", + "patterns": "Patterns" } }, "card": { @@ -33,33 +38,23 @@ "day_style": "Show event time as" }, "trash": { - "organic": { - "label": "Organic label", - "color": "Organic color", - "icon": "Organic icon", - "pattern": "Organic detection pattern" - }, - "paper": { - "label": "Paper label", - "color": "Paper color", - "icon": "Paper icon", - "pattern": "Paper detection pattern" - }, - "recycle": { - "label": "Recycle label", - "color": "Recycle color", - "icon": "Recycle icon", - "pattern": "Recycle detection pattern" - }, - "waste": { - "label": "Waste label", - "color": "Waste color", - "icon": "Waste icon", - "pattern": "Waste detection pattern" - }, - "others": { - "color": "Others color", - "icon": "Others icon" + "pattern": { + "title": "Edit pattern", + "edit": "edit", + "delete": "delete", + "type": { + "organic": "Organic", + "paper": "Paper", + "recycle": "Recycle", + "waste": "Waste", + "others": "Others" + }, + "fields": { + "label": "Label", + "color": "Color", + "icon": "Icon", + "pattern": "Detection patter" + } } } } diff --git a/src/translations/fr.json b/src/translations/fr.json index a52d34a..8318b3e 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -6,6 +6,12 @@ "default": "Couleur par défaut" } }, + "day_style": { + "values": { + "default": "Date", + "compteur": "jours jusqu'à" + } + }, "layout_picker": { "values": { "default": "Disposition par défaut", @@ -13,11 +19,10 @@ "horizontal": "Disposition Horizontale" } }, - "day_style": { - "values": { - "default": "Date", - "compteur": "jours jusqu'à" - } + "tabs": { + "settings": "Paramètres", + "appearance": "Apparence", + "patterns": "Motifs" } }, "card": { @@ -33,33 +38,23 @@ "day_style": "Afficher l'heure de l'événement en tant que" }, "trash": { - "organic": { - "label": "Étiquette organique", - "color": "Couleur organique", - "icon": "Icône organique", - "pattern": "Modèle de détection organique" - }, - "paper": { - "label": "Étiquette papier", - "color": "Couleur papier", - "icon": "Icône papier", - "pattern": "Modèle de détection papier" - }, - "recycle": { - "label": "Étiquette recyclage", - "color": "Couleur recyclage", - "icon": "Icône recyclage", - "pattern": "Modèle de détection recyclage" - }, - "waste": { - "label": "Étiquette déchets", - "color": "Couleur déchets", - "icon": "Icône déchets", - "pattern": "Modèle de détection déchets" - }, - "others": { - "color": "Couleur autres", - "icon": "Icône autres" + "pattern": { + "title": "Modifier le modèle", + "edit": "Modifier", + "delete": "Supprimer", + "type": { + "organic": "Organique", + "paper": "Papier", + "recycle": "Recyclage", + "waste": "Déchets", + "others": "Autres" + }, + "fields": { + "label": "Étiquette", + "color": "Couleur", + "icon": "Icône", + "pattern": "Modèle de détection" + } } } } @@ -79,4 +74,4 @@ "daysleft_more_from_till": "Dans jours\nentre et " } } -} +} \ No newline at end of file diff --git a/src/translations/it.json b/src/translations/it.json index f143d5e..b332438 100644 --- a/src/translations/it.json +++ b/src/translations/it.json @@ -18,6 +18,11 @@ "vertical": "Layout verticale", "horizontal": "Layout orizzontala" } + }, + "tabs": { + "settings": "Impostazioni", + "appearance": "Aspetto", + "patterns": "Modelli" } }, "card": { @@ -33,33 +38,23 @@ "day_style": "Mostra la data degli eventi come" }, "trash": { - "organic": { - "label": "Etichetta Organico", - "color": "Colore Organico", - "icon": "Icona Organico", - "pattern": "Pattern identificazione Organico" - }, - "paper": { - "label": "Etichetta Carta", - "color": "Colore Carta", - "icon": "Icona Carta", - "pattern": "Pattern identificazione Carta" - }, - "recycle": { - "label": "Etichetta Plastica", - "color": "Colore Plastica", - "icon": "Icona Plastica", - "pattern": "Pattern identificazione Plastica" - }, - "waste": { - "label": "Etichetta Indifferenziato", - "color": "Colore Indifferenziato", - "icon": "Icona Indifferenziato", - "pattern": "Pattern identificazione Indifferenziato" - }, - "others": { - "color": "Colore Altro", - "icon": "Icona Altro" + "pattern": { + "title": "Modifica del modello", + "edit": "modificare", + "delete": "cancellare", + "type": { + "organic": "Organico", + "paper": "Carta", + "recycle": "Plastica", + "waste": "Indifferenziato", + "others": "Altro" + }, + "fields": { + "label": "Etichetta", + "color": "Colore", + "icon": "Icona", + "pattern": "Pattern identificazione" + } } } } diff --git a/src/translations/sk.json b/src/translations/sk.json index 1e8deae..662928e 100644 --- a/src/translations/sk.json +++ b/src/translations/sk.json @@ -6,6 +6,12 @@ "default": "Predvolená farba" } }, + "day_style": { + "values": { + "default": "Dátum", + "counter": "dni do" + } + }, "layout_picker": { "values": { "default": "Predvolené rozloženie", @@ -13,11 +19,10 @@ "horizontal": "Horizontálne rozloženie" } }, - "day_style": { - "values": { - "default": "Dátum", - "counter": "dni do" - } + "tabs": { + "settings": "Nastavenia", + "appearance": "Vzhľad", + "patterns": "Pattern" } }, "card": { @@ -33,33 +38,23 @@ "day_style": "Zobraziť čas udalosti ako" }, "trash": { - "organic": { - "label": "Organický štítok", - "color": "Organická farba", - "icon": "Organická ikona", - "pattern": "Vzorec organickej detekcie" - }, - "paper": { - "label": "Papierový štítok", - "color": "Farba papiera", - "icon": "Ikona papiera", - "pattern": "Vzor detekcie papiera" - }, - "recycle": { - "label": "Recyklačný štítok", - "color": "Recyklovaný farba", - "icon": "Recycklované ikona", - "pattern": "Vzor detekcie recyklácie" - }, - "waste": { - "label": "Štítok odpadu", - "color": "Farba odpadu", - "icon": "Opdad ikona", - "pattern": "Vzor detekcie odpadu" - }, - "others": { - "color": "Iné farby", - "icon": "Iné ikony" + "pattern": { + "title": "Upraviť vzor", + "edit": "upraviť", + "delete": "delete", + "type": { + "organic": "Organický", + "paper": "Papiera", + "recycle": "Recyklačný", + "waste": "Odpadu", + "others": "Iné" + }, + "fields": { + "label": "štítok", + "color": "Farba", + "icon": "Ikona", + "pattern": "Vzor detekcie" + } } } } diff --git a/src/utils/form/date-style.ts b/src/utils/form/date-style.ts index 88e8ff9..0ac0575 100644 --- a/src/utils/form/date-style.ts +++ b/src/utils/form/date-style.ts @@ -1,4 +1,4 @@ -import type { HomeAssistant } from 'lovelace-mushroom/src/ha'; +import type { HomeAssistant } from '../ha'; import setupCustomlocalize from '../../localize'; import { css, html, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; diff --git a/src/utils/form/ha-form.ts b/src/utils/form/ha-form.ts index 02dbc1d..3573ab4 100644 --- a/src/utils/form/ha-form.ts +++ b/src/utils/form/ha-form.ts @@ -3,7 +3,15 @@ import type { Selector as MushroomSelectors } from 'lovelace-mushroom/src/utils/ // eslint-disable-next-line @typescript-eslint/consistent-type-imports import { TrashCardDateStyleSelector } from './ha-selector-date-style'; -type Selector = MushroomSelectors | TrashCardDateStyleSelector; +export interface ColorUiSelector { + // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/ban-types + ui_color: {}; +} + +type Selector = +MushroomSelectors | +ColorUiSelector | +TrashCardDateStyleSelector; interface HaDurationData { hours?: number; @@ -23,6 +31,7 @@ export type HaFormSchema = | HaFormTimeSchema | HaFormSelector | HaFormGridSchema + | HaFormExpandableSchema | HaFormPatternSchema; export interface HaFormBaseSchema { @@ -50,6 +59,13 @@ export interface HaFormGridSchema extends HaFormBaseSchema { schema: HaFormSchema[]; } +export interface HaFormExpandableSchema extends HaFormBaseSchema { + type: 'expandable'; + title: string; + icon?: string; + schema: HaFormSchema[]; +} + export interface HaFormSelector extends HaFormBaseSchema { type?: never; selector: Selector; diff --git a/src/utils/form/ha-selector-date-style.ts b/src/utils/form/ha-selector-date-style.ts index 73169af..4a66ae6 100644 --- a/src/utils/form/ha-selector-date-style.ts +++ b/src/utils/form/ha-selector-date-style.ts @@ -1,5 +1,6 @@ +import { fireEvent } from 'lovelace-mushroom/src/ha'; +import { type HomeAssistant } from '../ha'; import { customElement, property } from 'lit/decorators.js'; -import { fireEvent, type HomeAssistant } from 'lovelace-mushroom/src/ha'; import { html, LitElement } from 'lit'; import './date-style'; diff --git a/src/utils/ha.ts b/src/utils/ha.ts new file mode 100644 index 0000000..5ea8099 --- /dev/null +++ b/src/utils/ha.ts @@ -0,0 +1 @@ +export type { HomeAssistant } from 'lovelace-mushroom/src/ha/types'; diff --git a/src/utils/registerCustomCard.ts b/src/utils/registerCustomCard.ts index 0a95507..e83c63e 100644 --- a/src/utils/registerCustomCard.ts +++ b/src/utils/registerCustomCard.ts @@ -13,8 +13,6 @@ const registerCustomCard = (params: RegisterCardParams) => { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition windowWithCards.customCards = windowWithCards.customCards || []; - // Const cardPage = params.type.replace('-card', '').replace('mushroom-', ''); - windowWithCards.customCards.push({ ...params, preview: true,