don't show trash-card if no events are available (#412)

idaho · Oct 3, 2024 · 498c166 · 498c166
1 parent 2523292
commit 498c166
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 25 deletions.
diff --git a/src/cards/trash-card/container/cards.ts b/src/cards/trash-card/container/cards.ts
@@ -36,7 +36,7 @@ class Cards extends LitElement implements BaseContainerElement {
  }
 
  if (!this.items || this.items.length === 0) {
- return nothing;
+ return html`<trash-card-item-empty .config=${this.config} .hass=${this.hass}/>`;
  }
 
  const itemsPerRow = this.config.items_per_row ?? 1;

diff --git a/src/cards/trash-card/container/chips.ts b/src/cards/trash-card/container/chips.ts
@@ -37,7 +37,7 @@ class Chips extends LitElement implements BaseContainerElement {
  }
 
  if (!this.items || this.items.length === 0) {
- return nothing;
+ return html`<trash-card-item-empty .config=${this.config} .hass=${this.hass}/>`;
  }
 
  const cssClasses = {

diff --git a/src/cards/trash-card/container/icons.ts b/src/cards/trash-card/container/icons.ts
@@ -36,7 +36,7 @@ class Icons extends LitElement implements BaseContainerElement {
  }
 
  if (!this.items || this.items.length === 0) {
- return nothing;
+ return html`<trash-card-item-empty .config=${this.config} .hass=${this.hass}/>`;
  }
 
  const itemsPerRow = this.items.length;

diff --git a/src/cards/trash-card/items/BaseItemElement.ts b/src/cards/trash-card/items/BaseItemElement.ts
@@ -3,7 +3,7 @@ import { LitElement, html } from 'lit';
 import { state } from 'lit/decorators.js';
 import { getPicture } from '../../../utils/getPicture';
 
-import type { CardStyleConfig } from '../trash-card-config';
+import type { TrashCardConfig } from '../trash-card-config';
 import type { CalendarItem } from '../../../utils/calendarItem';
 import type { HomeAssistant } from '../../../utils/ha';
 
@@ -13,7 +13,7 @@ class BaseItemElement<T = {}> extends LitElement {
 
  @state() protected readonly hass?: HomeAssistant;
 
- @state() protected readonly config?: CardStyleConfig;
+ @state() protected readonly config?: TrashCardConfig;
 
  protected withBackground = false;
 

diff --git a/src/cards/trash-card/items/empty.ts b/src/cards/trash-card/items/empty.ts
@@ -0,0 +1,36 @@
+import { html, nothing } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { TRASH_CARD_NAME } from '../const';
+import { BaseItemElement } from './BaseItemElement';
+import setupCustomlocalize from '../../../localize';
+
+@customElement(`${TRASH_CARD_NAME}-item-empty`)
+class ItemCard extends BaseItemElement {
+ public render () {
+ if (!this.hass || !this.config) {
+ return nothing;
+ }
+
+ const customLocalize = setupCustomlocalize(this.hass);
+
+ if (this.config.entities.length === 0) {
+ return html`
+ <ha-alert alert-type="error" .title="TrashCard">
+ <b>${customLocalize('card.not_found.title')}</b>
+ <div>${customLocalize('card.not_found.description')}</div>
+ </ha-alert>
+ `;
+ }
+
+ return html`
+ <ha-alert alert-type="warning" .title="TrashCard">
+ <div><b>TrashCard</b></div>
+ <div>${customLocalize('card.empty.description')}</div>
+ </hui-warning>
+ `;
+ }
+}
+
+export {
+ ItemCard
+};
diff --git a/src/cards/trash-card/trash-card.ts b/src/cards/trash-card/trash-card.ts
@@ -7,15 +7,25 @@ import { TRASH_CARD_EDITOR_NAME, TRASH_CARD_NAME } from './const';
 import { Debugger } from '../../utils/debugger';
 import { getCalendarData } from '../../utils/getCalendarData';
 import { getTimeZoneOffset } from '../../utils/getTimeZoneOffset';
+import { fireEvent } from '../../utils/fireEvent';
 
 import './container';
+import './items/empty';
 
 import type { PropertyValues } from 'lit';
 import type { TrashCardConfig } from './trash-card-config';
 import type { HomeAssistant } from '../../utils/ha';
 import type { CalendarItem } from '../../utils/calendarItem';
 import type { BaseContainerElement } from './container/BaseContainerElement';
 
+declare global {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ interface HASSDomEvents {
+ // eslint-disable-next-line @typescript-eslint/naming-convention
+ 'card-visibility-changed': { value: boolean };
+ }
+}
+
 registerCustomCard({
  type: TRASH_CARD_NAME,
  name: 'TrashCard',
@@ -64,6 +74,10 @@ export class TrashCard extends LitElement {
 
  @property() private debugger?: Debugger;
 
+ @property({ type: Boolean }) public preview = false;
+
+ protected element?: BaseContainerElement;
+
  private lastChanged?: Date;
 
  public get hass (): HomeAssistant | undefined {
@@ -129,7 +143,9 @@ export class TrashCard extends LitElement {
  }
 
  protected shouldUpdate (changedProps: PropertyValues): boolean {
- if (changedProps.has('currentItems')) {
+ super.updated(changedProps);
+
+ if (changedProps.has('currentItems') || changedProps.has('hass')) {
  return true;
  }
 
@@ -139,9 +155,33 @@ export class TrashCard extends LitElement {
  this.fetchCurrentTrashData();
  }
 
+ if (changedProps.has('preview')) {
+ return true;
+ }
+
  return false;
  }
 
+ protected update (changedProps: PropertyValues) {
+ super.update(changedProps);
+
+ if (!this.preview) {
+ if (this.config && this.config.entities.length > 0 && (!this.currentItems || this.currentItems.length === 0)) {
+ this.style.display = 'none';
+ this.toggleAttribute('hidden', true);
+ fireEvent(this, 'card-visibility-changed', { value: false });
+ } else {
+ this.style.display = 'block';
+ this.toggleAttribute('hidden', false);
+ fireEvent(this, 'card-visibility-changed', { value: true });
+ }
+ } else {
+ this.style.display = 'block';
+ this.toggleAttribute('hidden', false);
+ fireEvent(this, 'card-visibility-changed', { value: true });
+ }
+ }
+
  protected createBaseContainerElement (cardStyle: TrashCardConfig['card_style']) {
  try {
  const tag = `trash-card-${cardStyle ?? 'card'}s-container`;
@@ -181,20 +221,16 @@ export class TrashCard extends LitElement {
  return nothing;
  }
 
- if (!this.currentItems || this.currentItems.length === 0) {
- return this.config.debug ? html`<trash-card-debug-container .debugger=${this.debugger}></trash-card-debug-card>` : nothing;
- }
-
- const element = this.createBaseContainerElement(this.config.card_style);
+ this.element = this.createBaseContainerElement(this.config.card_style);
 
- if (!element) {
+ if (!this.element) {
  return nothing;
  }
 
- element.setHass(this.hass);
+ this.element.setHass(this.hass);
 
  return html`
  ${this.config.debug ? html`<trash-card-debug-container .debugger=${this.debugger}></trash-card-debug-card>` : ``}
- ${element}`;
+ ${this.element}`;
  }
 }
diff --git a/src/localize.ts b/src/localize.ts
@@ -11,7 +11,7 @@ import * as sl from './translations/sl.json';
 import * as lv from './translations/lv.json';
 import * as se from './translations/se.json';
 
-import type { HomeAssistant } from './utils/ha';
+import type { HomeAssistant, LocalizeFunc } from './utils/ha';
 
 const languages: Record<string, unknown> = {
  da,
@@ -41,7 +41,7 @@ const getTranslatedString = (key: string, lang: string): string | undefined => {
  }
 };
 
-export default function setupCustomlocalize (hass?: HomeAssistant) {
+export default function setupCustomlocalize (hass?: HomeAssistant): LocalizeFunc {
  return function (key: string) {
  const lang = hass?.locale.language ?? DEFAULT_LANG;
 

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -102,7 +102,13 @@
  }
  },
  "card": {
- "not_found": "Entity not found",
+ "not_found": {
+ "title": "No entites defined",
+ "description": "Please select at least one calendar entity to get TrashCard to work."
+ },
+ "empty": {
+ "description": "Currently no events found. This message is only available during editing."
+ },
  "trash": {
  "today": "today",
  "tomorrow": "tomorrow",

diff --git a/src/utils/getColoredStyle.ts b/src/utils/getColoredStyle.ts
@@ -9,17 +9,21 @@ const isColorModesArray = (modes: TrashCardConfig['color_mode'] | TrashCardConfi
  Boolean(modes && Array.isArray(modes));
 
 const calculateContrast = (currentColorString: string, darkMode: boolean, parentElement?: null | HTMLElement): 'text' | 'background' => {
- const color = new Color(`rgb(${colors[currentColorString]})`);
+ try {
+ const color = new Color(`rgb(${colors[currentColorString]})`);
 
- if (parentElement) {
- const primaryTextColor = getComputedStyle(parentElement).getPropertyValue('--primary-text-color');
- const primaryBackgroundColor = getComputedStyle(parentElement).getPropertyValue('--primary-background-color');
- const primaryConstrast = color.contrast(new Color(primaryTextColor));
+  if (parentElement) {
+  const primaryTextColor = getComputedStyle(parentElement).getPropertyValue('--primary-text-color');
+  const primaryBackgroundColor = getComputedStyle(parentElement).getPropertyValue('--primary-background-color');
+  const primaryConstrast = color.contrast(new Color(primaryTextColor));
 
- return primaryConstrast > color.contrast(new Color(primaryBackgroundColor)) ? 'text' : 'background';
- }
+  return primaryConstrast > color.contrast(new Color(primaryBackgroundColor)) ? 'text' : 'background';
+  }
 
- return color.contrast(new Color(darkMode ? 'white' : 'black')) ? 'text' : 'text';
+ return color.contrast(new Color(darkMode ? 'white' : 'black')) ? 'text' : 'text';
+ } catch {
+ return 'text';
+ }
 };
 
 const getColoredStyle = (modes: TrashCardConfig['color_mode'] | TrashCardConfig['color_mode'][], item: CalendarItem, parentElement?: null | HTMLElement, darkMode = false) => {