Skip to content

Commit 2752910

Browse files
swingermanswingerman
committed
refactor: Simplify action handling and improve click-through configuration in FluidLevelBackgroundCardEditor
1 parent ae6c7f2 commit 2752910

2 files changed

Lines changed: 124 additions & 68 deletions

File tree

‎src/editor.ts‎

Lines changed: 122 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
122122

123123
public setConfig(config: FluidLevelBackgroundCardConfig): void {
124124
this._config = config;
125-
126125
this.loadCardHelpers();
127126
}
128127

@@ -306,44 +305,76 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
306305
}
307306

308307
renderActionsTab(): TemplateResult {
309-
const actions = ['more-info', 'toggle', 'navigate', 'url', 'call-service', 'none'];
310308
return html`
311309
<div class="form-row-dual">
312310
<ha-formfield label=${localize('editor.tab.actions.labels.allow-click-through')}>
313-
<ha-switch .checked=${this._allow_click_through === true} @change=${this._toggleClickThrough}> </ha-switch>
311+
<ha-switch .checked=${this._allow_click_through} @change=${this._toggleClickThrough}> </ha-switch>
314312
</ha-formfield>
315313
</div>
316314
<div class="help-text">${localize('editor.tab.actions.labels.allow-click-through-help')}</div>
317315
318-
${!this._allow_click_through
319-
? html`
320-
<hui-action-editor
321-
.label="${this.hass?.localize('ui.panel.lovelace.editor.card.generic.tap_action')} (${this.hass?.localize(
322-
'ui.panel.lovelace.editor.card.config.optional',
323-
)})"
324-
.hass=${this.hass}
325-
.config=${this._tap_action}
326-
.actions=${actions}
327-
.configValue=${'tap_action'}
328-
.tooltipText=${this.hass?.localize('ui.panel.lovelace.editor.card.button.default_action_help')}
329-
@value-changed=${this._actionChanged}
330-
></hui-action-editor>
331-
<hui-action-editor
332-
.label="${this.hass?.localize(
333-
'ui.panel.lovelace.editor.card.generic.hold_action',
334-
)} (${this.hass?.localize('ui.panel.lovelace.editor.card.config.optional')})"
335-
.hass=${this.hass}
336-
.config=${this._hold_action}
337-
.actions=${actions}
338-
.configValue=${'hold_action'}
339-
.tooltipText=${this.hass?.localize('ui.panel.lovelace.editor.card.button.default_action_help')}
340-
@value-changed=${this._actionChanged}
341-
></hui-action-editor>
342-
`
343-
: ''}
316+
${this._renderActionEditors()}
317+
`;
318+
}
319+
320+
private _renderActionEditors(): TemplateResult | string {
321+
if (this._allow_click_through) {
322+
return '';
323+
}
324+
325+
return html`
326+
<ha-form
327+
.hass=${this.hass}
328+
.data=${{
329+
tap_action: this._tap_action,
330+
hold_action: this._hold_action,
331+
double_tap_action: this._double_tap_action,
332+
}}
333+
.schema=${[
334+
{
335+
name: 'tap_action',
336+
selector: {
337+
ui_action: {
338+
default_action: 'more-info',
339+
},
340+
},
341+
},
342+
{
343+
name: 'hold_action',
344+
selector: {
345+
ui_action: {
346+
default_action: 'more-info',
347+
},
348+
},
349+
},
350+
{
351+
name: 'double_tap_action',
352+
selector: {
353+
ui_action: {
354+
default_action: 'none',
355+
},
356+
},
357+
},
358+
]}
359+
.computeLabel=${this._computeActionLabel}
360+
@value-changed=${this._actionChanged}
361+
></ha-form>
344362
`;
345363
}
346364

365+
private readonly _computeActionLabel = (schema: { name: string }): string => {
366+
switch (schema.name) {
367+
case 'tap_action':
368+
return `${this.hass?.localize('ui.panel.lovelace.editor.card.generic.tap_action')} (${this.hass?.localize('ui.panel.lovelace.editor.card.config.optional')})`;
369+
case 'hold_action':
370+
return `${this.hass?.localize('ui.panel.lovelace.editor.card.generic.hold_action')} (${this.hass?.localize('ui.panel.lovelace.editor.card.config.optional')})`;
371+
case 'double_tap_action':
372+
return `${this.hass?.localize('ui.panel.lovelace.editor.card.generic.double_tap_action')} (${this.hass?.localize('ui.panel.lovelace.editor.card.config.optional')})`;
373+
default:
374+
return schema.name;
375+
}
376+
};
377+
347378
renderAppearanceTab(): TemplateResult {
348379
const themePrimaryColor = getThemeColor(THEME_PRIMARY_COLOR_VARIABLE, LEVEL_COLOR);
349380
const themeBackgroundColor = getThemeColor(THEME_BACKGROUND_COLOR_VARIABLE, BACKGROUND_COLOR);
@@ -488,8 +519,12 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
488519
if (!this._config) {
489520
return;
490521
}
491-
const newValue = !this._allow_click_through;
492-
this._config = { ...this._config, allow_click_through: newValue };
522+
523+
if (this._allow_click_through) {
524+
this._config = { ...this._config, allow_click_through: false };
525+
} else {
526+
this._config = { ...this._config, allow_click_through: true };
527+
}
493528

494529
fireEvent(this, 'config-changed', { config: this._config });
495530
}
@@ -502,7 +537,7 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
502537
fireEvent(this, 'config-changed', { config: this._config });
503538
}
504539

505-
protected _removeSeverity(ev): void {
540+
protected _removeSeverity(ev: Event): void {
506541
if (!this._config) {
507542
return;
508543
}
@@ -512,27 +547,29 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
512547
fireEvent(this, 'config-changed', { config: this._config });
513548
}
514549

515-
protected _severityColorChanged(ev): void {
550+
protected _severityColorChanged(ev: CustomEvent): void {
516551
if (!this._config) {
517552
return;
518553
}
519-
let severityItem = this._severity[ev.target.index];
554+
const target = ev.target as any;
555+
let severityItem = this._severity[target.index];
520556
const color = ev.detail.value;
521557
const severity = [...this._severity];
522558

523559
severityItem = { ...severityItem, color };
524-
severity[ev.target.index] = severityItem;
560+
severity[target.index] = severityItem;
525561

526562
this._config = { ...this._config, severity };
527563
fireEvent(this, 'config-changed', { config: this._config });
528564
}
529565

530-
protected _severityValueChanged(ev): void {
566+
protected _severityValueChanged(ev: Event): void {
531567
if (!this._config) {
532568
return;
533569
}
534-
const index = ev.target.index;
535-
const value = ev.target.value;
570+
const target = ev.target as any;
571+
const index = target.index;
572+
const value = target.value;
536573
let severityItem = this._severity[index];
537574
const severity = [...this._severity];
538575

@@ -543,13 +580,14 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
543580
fireEvent(this, 'config-changed', { config: this._config });
544581
}
545582

546-
private _getSeverityItemFormEvent(ev): [number, any, Severity] {
547-
const index = ev.target.index;
548-
return [index, ev.target.value, this._severity[index]];
583+
private _getSeverityItemFormEvent(ev: Event): [number, any, Severity] {
584+
const target = ev.target as any;
585+
const index = target.index;
586+
return [index, target.value, this._severity[index]];
549587
}
550588

551589
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
552-
protected _handleCardPicked(ev): void {
590+
protected _handleCardPicked(ev: CustomEvent): void {
553591
ev.stopPropagation();
554592
if (!this._config) {
555593
return;
@@ -568,7 +606,7 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
568606
}
569607

570608
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
571-
protected _handleConfigChanged(ev): void {
609+
protected _handleConfigChanged(ev: CustomEvent): void {
572610
ev.stopPropagation();
573611
if (!this._config) {
574612
return;
@@ -589,20 +627,21 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
589627
this._helpers = await (window as any).loadCardHelpers();
590628
}
591629

592-
private _toggleAction(ev): void {
630+
private _toggleAction(ev: Event): void {
593631
this._toggleThing(ev, options.actions.options);
594632
}
595633

596-
private _toggleOption(ev): void {
634+
private _toggleOption(ev: Event): void {
597635
this._toggleThing(ev, options);
598636
}
599637

600-
private _toggleThing(ev, optionList): void {
601-
const show = !optionList[ev.target.option].show;
638+
private _toggleThing(ev: Event, optionList: any): void {
639+
const target = ev.target as any;
640+
const show = !optionList[target.option].show;
602641
for (const [key] of Object.entries(optionList)) {
603642
optionList[key].show = false;
604643
}
605-
optionList[ev.target.option].show = show;
644+
optionList[target.option].show = show;
606645
this._toggle = !this._toggle;
607646
}
608647

@@ -626,11 +665,11 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
626665
fireEvent(this, 'config-changed', { config: this._config });
627666
}
628667

629-
private _valueChanged(ev): void {
630-
if (!this._config || !this.hass || ev.target.value === '') {
668+
private _valueChanged(ev: Event): void {
669+
if (!this._config || !this.hass || (ev.target as any)?.value === '') {
631670
return;
632671
}
633-
const target = ev.target;
672+
const target = ev.target as any;
634673
if (this[`_${target.configValue}`] === target.value) {
635674
return;
636675
}
@@ -649,32 +688,50 @@ export class FluidLevelBackgroundCardEditor extends LitElement implements Lovela
649688
fireEvent(this, 'config-changed', { config: this._config });
650689
}
651690

652-
private _actionChanged(ev): void {
691+
private _actionChanged(ev: CustomEvent): void {
653692
if (!this._config || !this.hass) {
654693
return;
655694
}
656-
const target = ev.target!;
657-
const value = ev.detail.value;
658695

659-
if (this[`_${target.configValue}`] === value) {
696+
const formData = ev.detail.value;
697+
if (!formData || typeof formData !== 'object') {
660698
return;
661699
}
662-
let newConfig;
663-
if (target.configValue) {
664-
if (value !== false && !value) {
665-
newConfig = { ...this._config };
666-
delete newConfig[target.configValue!];
700+
701+
// Update config with the form data
702+
const newConfig = { ...this._config };
703+
704+
// Update tap_action if present
705+
if (formData.tap_action !== undefined) {
706+
if (!formData.tap_action || formData.tap_action.action === 'none') {
707+
delete newConfig.tap_action;
667708
} else {
668-
newConfig = {
669-
...this._config,
670-
[target.configValue!]: value,
671-
};
709+
newConfig.tap_action = formData.tap_action;
672710
}
673711
}
712+
713+
// Update hold_action if present
714+
if (formData.hold_action !== undefined) {
715+
if (!formData.hold_action || formData.hold_action.action === 'none') {
716+
delete newConfig.hold_action;
717+
} else {
718+
newConfig.hold_action = formData.hold_action;
719+
}
720+
}
721+
722+
// Update double_tap_action if present
723+
if (formData.double_tap_action !== undefined) {
724+
if (!formData.double_tap_action || formData.double_tap_action.action === 'none') {
725+
delete newConfig.double_tap_action;
726+
} else {
727+
newConfig.double_tap_action = formData.double_tap_action;
728+
}
729+
}
730+
674731
fireEvent(this, 'config-changed', { config: newConfig });
675732
}
676733

677-
private _handleSelectedCard(ev) {
734+
private _handleSelectedCard(ev: CustomEvent): void {
678735
this._selectedTab = parseInt(ev.detail.selected, 10);
679736
}
680737

‎src/fluid-level-background-card.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -454,9 +454,8 @@ export class FluidLevelBackgroundCard extends LitElement {
454454

455455
// If click-through is enabled, don't add action handlers to allow inner card interactions
456456
if (this.config.allow_click_through) {
457-
return html`<ha-card tabindex="0" .label=${`FluidProgressBar: ${this._level_entity || 'No Entity Defined'}`}
458-
>${this._card}</ha-card
459-
>`;
457+
const cardLabel = `FluidProgressBar: ${this._level_entity || 'No Entity Defined'}`;
458+
return html` <ha-card tabindex="0" .label=${cardLabel}> ${this._card} </ha-card> `;
460459
}
461460

462461
return html` <ha-card

0 commit comments

Comments
 (0)