From 4c747a9662395293e96a7fa7b7e83c34cb489aca Mon Sep 17 00:00:00 2001 From: idaho <664101+idaho@users.noreply.github.com> Date: Tue, 13 Feb 2024 20:31:44 +0100 Subject: [PATCH 1/2] refactor item validation check --- src/cards/trash-card/trash-card.ts | 47 ++++++++++++------------------ src/utils/calendarItem.ts | 9 ++---- src/utils/eventsToItems.ts | 6 ++-- 3 files changed, 24 insertions(+), 38 deletions(-) diff --git a/src/cards/trash-card/trash-card.ts b/src/cards/trash-card/trash-card.ts index 8a514e2..10b9abb 100644 --- a/src/cards/trash-card/trash-card.ts +++ b/src/cards/trash-card/trash-card.ts @@ -1,5 +1,6 @@ import { animations } from 'lovelace-mushroom/src/utils/entity-styles'; import type { Appearance } from 'lovelace-mushroom/src/shared/config/appearance-config'; +import type { CalendarItem } from '../../utils/calendarItem'; import { cardStyle } from 'lovelace-mushroom/src/utils/card-styles'; import { classMap } from 'lit/directives/class-map.js'; import { computeAppearance } from 'lovelace-mushroom/src/utils/appearance'; @@ -19,7 +20,6 @@ import { styleMap } from 'lit/directives/style-map.js'; import type { TrashCardConfig } from './trash-card-config'; import { actionHandler, computeRTL, computeStateDisplay, hasAction, type LovelaceCard, type LovelaceCardEditor } from 'lovelace-mushroom/src/ha'; import type { CalendarEvent, RawCalendarEvent } from '../../utils/calendarEvents'; -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'; import { customElement, property, state } from 'lit/decorators.js'; @@ -152,13 +152,8 @@ export class TrashCard extends LitElement implements LovelaceCard { return false; } - // eslint-disable-next-line class-methods-use-this - protected isValidItem (item?: CalendarItem): item is ValidCalendarItem { - return Boolean(item && item.type !== 'none'); - } - protected getDateString (item: CalendarItem): string { - if (!this.isValidItem(item) || !this.hass) { + if (!this.hass) { return ''; } @@ -227,16 +222,12 @@ export class TrashCard extends LitElement implements LovelaceCard { const entityId = this.config.entity; const stateObj = this.hass.states[entityId] as HassEntity | undefined; + const items = this.currentItems; - if (!stateObj) { + if (!stateObj || !items || items.length === 0) { return nothing; } - const items = this.currentItems; - - if (!items || items.length === 0) { - return html``; - } const itemsPerRow = this.config.items_per_row ?? 1; const cssStyleMap = styleMap({ @@ -246,7 +237,7 @@ export class TrashCard extends LitElement implements LovelaceCard { return html`
- ${items.map(item => this.renderItem(item))} + ${items.map(item => this.renderItem(item))}
`; } @@ -259,7 +250,7 @@ export class TrashCard extends LitElement implements LovelaceCard { const entityId = this.config.entity; const stateObj = this.hass.states[entityId] as HassEntity | undefined; - if (!stateObj || !this.isValidItem(item)) { + if (!stateObj) { return nothing; } @@ -287,7 +278,7 @@ export class TrashCard extends LitElement implements LovelaceCard { }); return html` - + ${this.renderIcon(stateObj, item)} - - + + `; } - protected renderIcon (stateObj: HassEntity, item?: CalendarItem): TemplateResult { - if (!this.isValidItem(item)) { - return html``; - } + // eslint-disable-next-line class-methods-use-this + protected renderIcon (stateObj: HassEntity, item: CalendarItem): TemplateResult { // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition const icon = item.icon ?? 'mdi:delete-outline'; // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition @@ -405,10 +394,10 @@ export class TrashCard extends LitElement implements LovelaceCard { cursor: pointer; } mushroom-shape-icon { - --icon-color: rgb(var(--rgb-state-entity)); + --icon-color: rgb(var(--rgb-state-entity)); --shape-color: rgba(var(--rgb-state-entity), 0.2); } - ` + ` ]; } } diff --git a/src/utils/calendarItem.ts b/src/utils/calendarItem.ts index 89d3028..a6af523 100644 --- a/src/utils/calendarItem.ts +++ b/src/utils/calendarItem.ts @@ -1,17 +1,12 @@ import type { CalendarEvent } from './calendarEvents'; -interface ValidCalendarItem extends CalendarEvent { +interface CalendarItem extends CalendarEvent { label: string; color?: string; icon?: string; type: string; } -type CalendarItem = { - type: 'none'; -} | ValidCalendarItem; - export type { - CalendarItem, - ValidCalendarItem + CalendarItem }; diff --git a/src/utils/eventsToItems.ts b/src/utils/eventsToItems.ts index 2a27b65..c471d18 100644 --- a/src/utils/eventsToItems.ts +++ b/src/utils/eventsToItems.ts @@ -30,7 +30,7 @@ const getData = (event: CalendarEvent, key: T, settings: const typeInSettings = (key: T, settings: Options['settings']): settings is Required => key in settings; -const eventToItem = (event: CalendarEvent | undefined, { settings, useSummary }: Options): CalendarItem => { +const eventToItem = (event: CalendarEvent | undefined, { settings, useSummary }: Options): CalendarItem | { type: 'none' } => { if (!event || !('summary' in event.content)) { return { ...event, @@ -55,7 +55,9 @@ const eventToItem = (event: CalendarEvent | undefined, { settings, useSummary }: }; const eventsToItems = (events: CalendarEvent[], options: Options): CalendarItem[] => - events.map(event => eventToItem(event, options)); + events. + map(event => eventToItem(event, options)). + filter((item): boolean => Boolean(item.type !== 'none')) as CalendarItem[]; export { eventsToItems From 6cbfbd34fb607413f7deb53d21732ed45eb2f332 Mon Sep 17 00:00:00 2001 From: idaho <664101+idaho@users.noreply.github.com> Date: Tue, 13 Feb 2024 20:48:01 +0100 Subject: [PATCH 2/2] option to hide time on non full day events --- README.md | 1 + src/cards/trash-card/formSchemas.ts | 1 + src/cards/trash-card/trash-card-config.ts | 5 ++++- src/cards/trash-card/trash-card-editor.ts | 3 ++- src/cards/trash-card/trash-card.ts | 10 +++++----- src/translations/de.json | 3 ++- src/translations/en.json | 3 ++- src/translations/fr.json | 3 ++- src/translations/it.json | 3 ++- src/translations/sk.json | 3 ++- 10 files changed, 23 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 87c00a1..6a75461 100644 --- a/README.md +++ b/README.md @@ -109,6 +109,7 @@ All the options are available in the lovelace editor but you can use `yaml` if y | `full_size` | boolean | `false` | Show the card without the default card margins | | `drop_todayevents_from` | time | `10:00:00` | From what time to hide all-day event (Format `hh:mm:ss`) | | `use_summary` | boolean | `false` | Shows the event summary instead of matched label | +| `hide_time_range` | boolean | `false` | Option to hide the time on events which aren't fill day events | | `next_days` | number | 2 | How many times the card will look into the future to find the next event | | `day_style` | `default` or `counter` | `default` | Option of how the date of an event should be displayed. `default` shows the date in date format and `counter` shows the number of days remaining until the event. | | `settings` | [Settings](#settings) | Required | Settings to detect the kind of trash and how to display it.| diff --git a/src/cards/trash-card/formSchemas.ts b/src/cards/trash-card/formSchemas.ts index 67517f2..5d552fd 100644 --- a/src/cards/trash-card/formSchemas.ts +++ b/src/cards/trash-card/formSchemas.ts @@ -58,6 +58,7 @@ const getSchema = (customLocalize: ReturnType) => { { name: 'use_summary', selector: { boolean: {}}}, // eslint-disable-next-line @typescript-eslint/naming-convention { name: 'day_style', selector: { trashcard_datestyle: {}}}, + { name: 'hide_time_range', selector: { boolean: { }}}, { name: 'items_per_row', selector: { number: { min: 1, diff --git a/src/cards/trash-card/trash-card-config.ts b/src/cards/trash-card/trash-card-config.ts index 775cb40..8f88f73 100644 --- a/src/cards/trash-card/trash-card-config.ts +++ b/src/cards/trash-card/trash-card-config.ts @@ -34,7 +34,8 @@ EntityWithOutIcon & { drop_todayevents_from?: string; // eslint-disable-next-line @typescript-eslint/naming-convention use_summary?: boolean; - + // eslint-disable-next-line @typescript-eslint/naming-convention + hide_time_range?: boolean; // eslint-disable-next-line @typescript-eslint/naming-convention day_style?: typeof DAYSTYLES[number]; }; @@ -55,6 +56,8 @@ const entityCardConfigStruct = assign( // eslint-disable-next-line @typescript-eslint/naming-convention use_summary: optional(boolean()), // eslint-disable-next-line @typescript-eslint/naming-convention + hide_time_range: optional(boolean()), + // eslint-disable-next-line @typescript-eslint/naming-convention next_days: optional(integer()), // eslint-disable-next-line @typescript-eslint/naming-convention items_per_row: optional(integer()), diff --git a/src/cards/trash-card/trash-card-editor.ts b/src/cards/trash-card/trash-card-editor.ts index b839b23..6e4c331 100644 --- a/src/cards/trash-card/trash-card-editor.ts +++ b/src/cards/trash-card/trash-card-editor.ts @@ -46,7 +46,8 @@ const OTHER_LABELS = new Set([ 'full_size', 'drop_todayevents_from', 'use_summary', - 'day_style' + 'day_style', + 'hide_time_range' ]); export const computeDarkMode = (hass?: HomeAssistant): boolean => { diff --git a/src/cards/trash-card/trash-card.ts b/src/cards/trash-card/trash-card.ts index 10b9abb..750bc68 100644 --- a/src/cards/trash-card/trash-card.ts +++ b/src/cards/trash-card/trash-card.ts @@ -152,7 +152,7 @@ export class TrashCard extends LitElement implements LovelaceCard { return false; } - protected getDateString (item: CalendarItem): string { + protected getDateString (item: CalendarItem, excludeTime?: boolean): string { if (!this.hass) { return ''; } @@ -184,7 +184,7 @@ export class TrashCard extends LitElement implements LovelaceCard { undefined; if (stateDay === todayDay || stateDay === tomorrowDay) { - const key = `card.trash.${stateDay === todayDay ? 'today' : 'tomorrow'}${startTime ? '_from_till' : ''}`; + const key = `card.trash.${stateDay === todayDay ? 'today' : 'tomorrow'}${startTime && !excludeTime ? '_from_till' : ''}`; return `${customLocalize(`${key}`).replace('', startTime ?? '').replace('', endTime ?? '')}`; } @@ -200,7 +200,7 @@ export class TrashCard extends LitElement implements LovelaceCard { const daysLeft = Math.round(Math.abs((todayMorning.getTime() - item.date.start.getTime()) / oneDay)); - return `${customLocalize(`card.trash.daysleft${daysLeft > 1 ? '_more' : ''}${startTime ? '_from_till' : ''}`).replace('', `${daysLeft}`).replace('', startTime ?? '').replace('', endTime ?? '')}`; + return `${customLocalize(`card.trash.daysleft${daysLeft > 1 ? '_more' : ''}${startTime && !excludeTime ? '_from_till' : ''}`).replace('', `${daysLeft}`).replace('', startTime ?? '').replace('', endTime ?? '')}`; } const day = item.date.start.toLocaleDateString(this.hass.language, { @@ -210,7 +210,7 @@ export class TrashCard extends LitElement implements LovelaceCard { day: 'numeric' }); - const key = `card.trash.day${startTime ? '_from_till' : ''}`; + const key = `card.trash.day${startTime && !excludeTime ? '_from_till' : ''}`; return customLocalize(`${key}`).replace('', day).replace('', startTime ?? '').replace('', endTime ?? ''); } @@ -269,7 +269,7 @@ export class TrashCard extends LitElement implements LovelaceCard { backgroundStyle['background-color'] = `rgba(${rgbColor}, 0.5)`; } - const secondary = this.getDateString(item); + const secondary = this.getDateString(item, this.config.hide_time_range ?? false); const cssClassMap = classMap({ // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/src/translations/de.json b/src/translations/de.json index c0edd6b..02c75da 100644 --- a/src/translations/de.json +++ b/src/translations/de.json @@ -35,7 +35,8 @@ "drop_todayevents_from": "Ab wieviel Uhr Ganztages Ereignis ausblenden", "full_size": "Karte ohne Seitenrand", "use_summary": "Ereignisse Bezeichnung anstelle des Lables verwenden", - "day_style": "Ereigniss Zeitpunkt anzeigen als" + "day_style": "Ereigniss Zeitpunkt anzeigen als", + "hide_time_range": "Uhrzeit ausblenden" }, "trash": { "pattern": { diff --git a/src/translations/en.json b/src/translations/en.json index e049c7c..f439eea 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -35,7 +35,8 @@ "drop_todayevents_from": "From what time to hide all-day event", "full_size": "Card without margin", "use_summary": "Event summary instead of label", - "day_style": "Show event time as" + "day_style": "Show event time as", + "hide_time_range": "Hide time" }, "trash": { "pattern": { diff --git a/src/translations/fr.json b/src/translations/fr.json index 8318b3e..a7599fc 100644 --- a/src/translations/fr.json +++ b/src/translations/fr.json @@ -35,7 +35,8 @@ "drop_todayevents_from": "A partir de quelle heure masquer l'événement de toute la journée ?", "full_size": "Carte sans marge", "use_summary": "Résumé de l'événement au lieu de l'étiquette", - "day_style": "Afficher l'heure de l'événement en tant que" + "day_style": "Afficher l'heure de l'événement en tant que", + "hide_time_range": "cacher le temps" }, "trash": { "pattern": { diff --git a/src/translations/it.json b/src/translations/it.json index b332438..287fc94 100644 --- a/src/translations/it.json +++ b/src/translations/it.json @@ -35,7 +35,8 @@ "drop_todayevents_from": "Da quale orario nascondere gli eventi di Tutto il giorno", "full_size": "Card senza margini", "use_summary": "Usa l'oggetto dell'evento al posto dell'etichetta", - "day_style": "Mostra la data degli eventi come" + "day_style": "Mostra la data degli eventi come", + "hide_time_range": "nascondere il tempo" }, "trash": { "pattern": { diff --git a/src/translations/sk.json b/src/translations/sk.json index 662928e..da81619 100644 --- a/src/translations/sk.json +++ b/src/translations/sk.json @@ -35,7 +35,8 @@ "drop_todayevents_from": "d akého času sa má skryť celodenná udalosť", "full_size": "Karta bez marže", "use_summary": "Zhrnutie udalosti namiesto označenia", - "day_style": "Zobraziť čas udalosti ako" + "day_style": "Zobraziť čas udalosti ako", + "hide_time_range": "čas skrývania" }, "trash": { "pattern": {