From d1a3bd2b5f8313df54bdc25616a559f753471d38 Mon Sep 17 00:00:00 2001 From: Norbert Rittel Date: Mon, 9 Dec 2024 18:20:58 +0100 Subject: [PATCH 01/32] More Fixes in the German translation (#48) This PR adds some more polish to the German translation using more consistent grammar and shortening a few strings so they better fit the available space. It also adds the line with "Elevation" that was not present in the German strings compared to English. --- src/languages/de.json | 33 +++++++++++++++++---------------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/src/languages/de.json b/src/languages/de.json index 0e4194e..8b25602 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -57,25 +57,26 @@ "currentTime": "Aktuelle Zeit", "common": { "now": "Jetzt" - } + }, + "elevation": "Elevation" }, "editor": { "viewConfig": { - "title": "Sprach- und Ansichtsmodus", + "title": "Sprache und Darstellung", "description": "Einstellung der Sprache und des Hintergrunds", "customBackground": { - "title": "Benutzerdefinierter Hintergrund", - "description": "Konfiguration für benutzerdefinierten Hintergrund festlegen" + "title": "Hintergrund", + "description": "Einstellung für den Wunsch-Hintergrund" } }, "baseConfig": { "title": "Breiten- und Längengrad", - "description": "Breiten- und Längengradkonfiguration" + "description": "Einstellung des Breiten- und Längengrades" }, "optionsConfig": { - "useDefault": "Systemeinstellungen verwenden", + "useDefault": "Systemeinstellung verwenden", "useEntity": "Entität verwenden", - "useCustom": "Benutzerdefinierte Einstellungen verwenden " + "useCustom": "Eigene Einstellung" }, "fontOptions": { "title": "Schriftartanpassung", @@ -86,8 +87,8 @@ "description": "Schrift der Überschrift anpassen" }, "labelFontConfig": { - "title": "Labels", - "description": "Schrift der Labels anpassen" + "title": "Label", + "description": "Schrift der Label anpassen" }, "headerFontSize": "Schriftgröße der Überschrift", "headerFontColor": "Schriftfarbe der Überschrift", @@ -101,20 +102,20 @@ "title": "Diagramm-Anpassung", "description": "Konfiguration für das Diagramm einstellen", "type": { - "title": "Grafiktyp", - "description": "Wählen Sie einen Grafiktyp aus" + "title": "Diagrammtyp", + "description": "Typ des Diagramms auswählen" }, "visibility": { "title": "Sichtbarkeitsoptionen", - "description": "Spezifische Elemente ausblenden oder anzeigen" + "description": "Einzelne Elemente aus- oder einblenden" }, "customization": { "title": "Anpassungsoptionen", - "description": "Passen Sie die Grafik an" + "description": "Details des Diagramms anpassen" } }, "compactView": "Kompakte Ansicht", - "showBackground": "Hintergrund anzeigen", + "showBackground": "Hintergrund einblenden", "timeFormat": "12-Stunden-Zeitformat", "mileUnit": "Meilen als Maßeinheit", "hideHeader": "Header ausblenden", @@ -134,7 +135,7 @@ "yTicksPosition": "Position der Y-Beschriftung", "legendPosition": "Position der Legende", "legendAlign": "Ausrichtung der Legende", - "graphType": "Grafiktyp" + "graphType": "Diagrammtyp" } } -} \ No newline at end of file +} From 1282160c5036d89c5f905f2bfc52cf69ac425a0f Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Mon, 9 Dec 2024 20:29:23 +0100 Subject: [PATCH 02/32] chore: update issue bug template --- .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml index c1f2405..5450393 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml @@ -34,16 +34,23 @@ body: label: Version 📦 description: The version of the application where the bug was found options: + - v1.9.0-beta.4 + - v1.9.0-beta.3 + - v1.9.0-beta.2 + - v1.9.0-beta.1 - v1.8.1 - v1.8.0 - v1.7.2 - v1.7.1 - v1.7.0 - v1.6.0 + - v1.5.0-beta_1 - v1.5.0 - v1.4.0 - v1.3.0 - v1.2.0 + - v1.1.1-beta1 + - v1.1.1-beta - v1.1.0 - v1.0.0 validations: From 298cc32a03a504bb461e14b4aa94c48c0f59083e Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Mon, 9 Dec 2024 20:40:23 +0100 Subject: [PATCH 03/32] refactor: Improve German translation and fix missing "Elevation" line --- src/languages/de.json | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/languages/de.json b/src/languages/de.json index 8b25602..40ee050 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -57,8 +57,7 @@ "currentTime": "Aktuelle Zeit", "common": { "now": "Jetzt" - }, - "elevation": "Elevation" + } }, "editor": { "viewConfig": { @@ -138,4 +137,4 @@ "graphType": "Diagrammtyp" } } -} +} \ No newline at end of file From b07ac9664d32a254ee203e1588291520c7b2145a Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Mon, 9 Dec 2024 20:40:42 +0100 Subject: [PATCH 04/32] refactor: Remove justifyItems property from stickyPreview in loader.ts --- src/utils/loader.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/loader.ts b/src/utils/loader.ts index 82e5006..2a374dc 100644 --- a/src/utils/loader.ts +++ b/src/utils/loader.ts @@ -46,7 +46,6 @@ export const stickyPreview = () => { position: 'sticky', top: '0', padding: '0', - justifyItems: 'center', }); }; From 050037ea3ee95b4b31fb04c2c2ccdebd0699c020 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Mon, 9 Dec 2024 23:59:25 +0100 Subject: [PATCH 05/32] refactor: improve card layout size --- src/components/moon-calendar-popup.ts | 7 ++-- src/components/moon-horizon-chart.ts | 2 +- src/components/moon-horizon-dynamic.ts | 9 ++--- src/css/style.css | 14 ++++---- src/lunar-phase-card.ts | 48 ++++++++++++++++++++------ src/utils/helpers.ts | 1 - 6 files changed, 56 insertions(+), 25 deletions(-) diff --git a/src/components/moon-calendar-popup.ts b/src/components/moon-calendar-popup.ts index 72858e1..82d86cf 100644 --- a/src/components/moon-calendar-popup.ts +++ b/src/components/moon-calendar-popup.ts @@ -71,9 +71,9 @@ export class LunarCalendarPopup extends LitElement { display: grid; grid-template-columns: repeat(7, 1fr); /* grid-template-rows: repeat(7, 1fr); */ - padding: 0.5em; + padding: 0.3em; cursor: default; - gap: 2px 4px; + /* gap: 2px 4px; */ } @media screen and (max-width: 800px) { #calendar-grid { @@ -146,6 +146,9 @@ export class LunarCalendarPopup extends LitElement {
${renderNavButton(ICON.CLOSE, () => { this.card._calendarPopup = false; + if (this.card._calendarInfo) { + this.card._calendarInfo = false; + } this.viewDate = DateTime.local().startOf('month'); })}
diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index 30b4de8..aa7d3d3 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -42,7 +42,7 @@ export class LunarHorizonChart extends LitElement { @state() private _lastTime: string | null = null; protected async firstUpdated(): Promise { - await new Promise((resolve) => setTimeout(resolve, 10)); + await new Promise((resolve) => setTimeout(resolve, 50)); this.setupChart(); } diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index 8a9d2d8..c4c2c3b 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -24,7 +24,8 @@ export class LunarHorizonDynamic extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) moon!: Moon; @property({ attribute: false }) card!: LunarPhaseCard; - @property({ type: Number }) cardWidth: number = 0; + + @state() private cardWidth: number = 500; @state() public fillColors!: FILL_COLORS; @@ -48,8 +49,7 @@ export class LunarHorizonDynamic extends LitElement { } protected updated(_changedProperties: PropertyValues): void { - if (!this.card.config || !this.moon) return; - if (_changedProperties.has('cardWidth') && this.cardWidth > 0) { + if (_changedProperties.has('cardWidth')) { if (this.dynamicChart) { this.dynamicChart.resize(this.cardWidth, this.cardHeight); } @@ -59,6 +59,7 @@ export class LunarHorizonDynamic extends LitElement { get cardHeight(): number { let height = this.cardWidth * 0.5; height = this.card.config.hide_header ? height : height - 48; + console.log('height dynamic', height); return height; } @@ -325,7 +326,7 @@ export class LunarHorizonDynamic extends LitElement { }; options.responsive = true; options.maintainAspectRatio = false; - options.resizeDelay = 50; + options.resizeDelay = 100; options.layout = layout; options.scales = scales; options.plugins = plugins; diff --git a/src/css/style.css b/src/css/style.css index 9ae03d2..eee6aaa 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -106,7 +106,7 @@ ha-card>.loading[hidden] { } .lunar-card-header>.header-title[full] { - max-width: 100%; + max-width: calc(100% - 8px); padding-top: 12px; } @@ -209,14 +209,13 @@ h1 { .moon-image { display: flex; width: 100%; - max-width: 27%; + max-width: 150px; transition: transform 0.5s; -webkit-user-select: none; -moz-user-select: none; user-select: none; - /* max-width: 135px; */ aspect-ratio: 1; - margin: 8px; + padding: 8px; flex-shrink: 0; z-index: 4; height: fit-content; @@ -227,9 +226,10 @@ h1 { max-width: 24%; } -.moon-image[calendar] { +/* +.moon-image[no-header][calendar] { max-width: 35%; -} +} */ .moon-image img[southern] { transform: scaleX(-1) scaleY(-1); @@ -468,7 +468,7 @@ button.date-input-btn:hover { width: 100%; flex-direction: column; gap: 0.5rem; - margin-inline-start: 8px; + margin-inline: 8px; } diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 94d6e8a..4db45e6 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -163,10 +163,10 @@ export class LunarPhaseCard extends LitElement { protected async firstUpdated(_changedProperties: PropertyValues): Promise { super.firstUpdated(_changedProperties); this._handleFirstRender(); + this.measureCard(); await new Promise((resolve) => setTimeout(resolve, 0)); _setEventListeners(this as any); this._computeStyles(); - this.measureCard(); } protected shouldUpdate(changedProps: PropertyValues): boolean { @@ -211,6 +211,10 @@ export class LunarPhaseCard extends LitElement { return this._activeCard === PageType.CALENDAR; } + get _headerHidden(): boolean { + return this.config.hide_header || false; + } + get _locale(): FrontendLocaleData { const locale = this._hass.locale; const timeFormat = this.config['12hr_format'] ? TimeFormat.am_pm : TimeFormat.twenty_four; @@ -236,6 +240,10 @@ export class LunarPhaseCard extends LitElement { return this.config.default_card || PageType.BASE; } + get _isCompactMode(): boolean { + return this.config.compact_view || false; + } + get isEditorPreview(): boolean { const parentElementClassPreview = this.offsetParent?.classList.contains('element-preview'); return parentElementClassPreview || false; @@ -252,15 +260,23 @@ export class LunarPhaseCard extends LitElement { this._activeCard = PageType.BASE; setTimeout(() => { this._activeCard = PageType.HORIZON; - }, 200); + }, 150); this._cardReady = true; } else { this._activeCard = this._defaultCard; this._cardReady = true; } } else { - this._activeCard = this._defaultCard; - this._cardReady = true; + if (PageType.HORIZON === this._defaultCard) { + this._activeCard = PageType.BASE; + setTimeout(() => { + this._activeCard = PageType.HORIZON; + }, 0); + this._cardReady = true; + } else { + this._activeCard = this._defaultCard; + this._cardReady = true; + } } } @@ -296,11 +312,11 @@ export class LunarPhaseCard extends LitElement { return; } if (this._state !== MoonState.LOADING) { - console.log('Refreshing data'); + // console.log('Refreshing data'); this._state = MoonState.LOADING; setTimeout(() => { this._state = MoonState.READY; - console.log('Data refreshed'); + // console.log('Data refreshed'); }, LOADING_TIMEOUT); } } @@ -399,17 +415,27 @@ export class LunarPhaseCard extends LitElement { const { moonPic } = this.moon.moonImage; const southernHemisphere = this.config.southern_hemisphere ?? false; - return html`
`; } + private _computeMoonImageStyles() { + if (!this._activeCard || this._activeCard === PageType.HORIZON) return; + const activeCard = this._activeCard; + const headerOffset = this._headerHidden ? 48 : 96; + const width = this._cardWidth; + let moonWidth = activeCard === PageType.CALENDAR ? width * 0.5 - headerOffset : width / 3.5; + return styleMap({ maxWidth: `${moonWidth}px` }); + } + private renderMoonData(): TemplateResult { const compactView = this.config.compact_view && this._activeCard === PageType.BASE; const replacer = (key: string, value: any) => { @@ -584,14 +610,15 @@ export class LunarPhaseCard extends LitElement { private _computeHeight() { if (!this._activeCard) return; const isCompact = this.config.compact_view; - const isHeaderHidden = this.config?.hide_header; + const isHeaderHidden = this._headerHidden; const width = this._cardWidth; const height = [PageType.BASE].includes(this._activeCard) && !isCompact && !isHeaderHidden ? width * 0.5 : ''; - return styleMap({ minHeight: height ? `${height}px` : '' }); + const justify = [PageType.BASE].includes(this._activeCard) && !isCompact && !isHeaderHidden ? 'space-between' : ''; + return styleMap({ minHeight: height ? `${height}px` : '', justifyContent: justify }); } private _computeClasses() { - const isHeaderHidden = this.config?.hide_header; + const isHeaderHidden = this.config?.hide_header || false; const reverse = this.config.moon_position === 'right'; const compactHeader = Boolean(this.config.compact_view && this._activeCard === PageType.BASE); const dynamicGraph = this.config.graph_config?.graph_type === 'dynamic'; @@ -601,6 +628,7 @@ export class LunarPhaseCard extends LitElement { '--default-header': !compactHeader && !isHeaderHidden, '--horizon': this._activeCard === PageType.HORIZON && !dynamicGraph, '--dynamic-graph': this._activeCard === PageType.HORIZON && dynamicGraph, + '--no-header': isHeaderHidden, }); } diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 026b07c..517a891 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -187,7 +187,6 @@ export function _handleOverflow(card: LunarPhaseCard): void { const headerEl = lpcHeader?.querySelector('.header-title') as HTMLElement; const titleEl = headerEl?.querySelector('h1') as HTMLElement; if (!headerEl || !titleEl) return; - const clientWidth = headerEl.clientWidth; const scrollWidth = titleEl.scrollWidth; const overflow = scrollWidth > clientWidth; From 7923efac7244a2192565b2e4df23b3d30e831e08 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 07:12:31 +0100 Subject: [PATCH 06/32] chore: Update localization check workflow --- .github/workflows/check-localization.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/check-localization.yml b/.github/workflows/check-localization.yml index f24f1e5..d07fa92 100644 --- a/.github/workflows/check-localization.yml +++ b/.github/workflows/check-localization.yml @@ -36,7 +36,9 @@ jobs: id: filtered-files run: | filtered_files=$(echo "${{ steps.changed-files.outputs.all_changed_files }}" | tr ' ' '\n' | grep '^src/languages/.*\.json$' || true) - echo "filtered_files=$filtered_files" >> $GITHUB_ENV + echo "filtered_files<> $GITHUB_ENV + echo "$filtered_files" >> $GITHUB_ENV + echo "EOF" >> $GITHUB_ENV - name: Run localization check id: check-localization From fbfedcac17c03560a9ccf5485795c3e9039369d8 Mon Sep 17 00:00:00 2001 From: Viet Ngoc <96962827+ngocjohn@users.noreply.github.com> Date: Tue, 10 Dec 2024 07:20:05 +0100 Subject: [PATCH 07/32] Add Calendar popup modal option (#51) This pull request includes several refactorings and a new feature. The refactorings improve the default chart layout size, font size calculation for moon-phase-name, and the calendar popup grid item font size. The config for legend and legend alignment has also been removed. Additionally, a new feature has been added to include a Calendar popup modal option. --- src/components/moon-base-data.ts | 14 +++- src/components/moon-calendar-popup.ts | 41 +++++++--- src/components/moon-horizon-chart.ts | 64 +++++++++------ src/components/moon-horizon-dynamic.ts | 12 +-- src/components/moon-star-field.ts | 19 ++++- src/css/style.css | 85 +++++++++++++++++--- src/editor.ts | 9 ++- src/languages/ca.json | 1 + src/languages/cs.json | 1 + src/languages/da.json | 1 + src/languages/de.json | 1 + src/languages/en.json | 4 +- src/languages/es.json | 1 + src/languages/fr.json | 1 + src/languages/id.json | 1 + src/languages/it.json | 1 + src/languages/nl.json | 1 + src/languages/pt.json | 1 + src/languages/ru.json | 1 + src/languages/sk.json | 1 + src/localize/string.json | 1 + src/lunar-phase-card.ts | 103 ++++++++++++++++++------- src/types/config.ts | 1 + src/utils/helpers.ts | 2 +- 24 files changed, 274 insertions(+), 93 deletions(-) diff --git a/src/components/moon-base-data.ts b/src/components/moon-base-data.ts index d754f51..f38847a 100644 --- a/src/components/moon-base-data.ts +++ b/src/components/moon-base-data.ts @@ -56,6 +56,7 @@ export class LunarBaseData extends LitElement { .moon-phase-name { font-size: 1.5rem; padding-block: 1rem; + white-space: nowrap; } `, mainStyles, @@ -122,7 +123,18 @@ export class LunarBaseData extends LitElement { private _renderPhaseName(): TemplateResult { if (!this.moon.config.hide_header) return html``; - return html`
${this.moon.phaseName}
`; + return html`
${this.moon.phaseName}
`; + } + + private _computeFontSize() { + const parentEl = this.shadowRoot?.querySelector('.moon-phase-name') as HTMLElement; + if (!parentEl) return; + const parentWidth = parentEl.clientWidth; + const scrollWidth = parentEl.scrollWidth; + const fontSize = parseFloat(window.getComputedStyle(parentEl).fontSize); + const ratio = parentWidth / scrollWidth; + const newFontSize = fontSize * ratio; + return `font-size: ${newFontSize}px`; } private _chunkObject = (obj: MoonData, size: number): MoonDataItem => { diff --git a/src/components/moon-calendar-popup.ts b/src/components/moon-calendar-popup.ts index 82d86cf..649c7bb 100644 --- a/src/components/moon-calendar-popup.ts +++ b/src/components/moon-calendar-popup.ts @@ -25,7 +25,7 @@ export class LunarCalendarPopup extends LitElement { styles, css` #lunar-calendar { - max-width: 500px; + /* max-width: 500px; */ margin: 0 auto; backdrop-filter: blur(10px); background: var(--ha-card-background-color, var(--secondary-background-color)); @@ -47,8 +47,9 @@ export class LunarCalendarPopup extends LitElement { justify-content: space-between; align-items: center; font-weight: 600; - font-size: 1.3rem; + font-size: initial; } + .calendar-header__month { display: flex; align-items: center; @@ -75,11 +76,6 @@ export class LunarCalendarPopup extends LitElement { cursor: default; /* gap: 2px 4px; */ } - @media screen and (max-width: 800px) { - #calendar-grid { - grid-template-rows: auto; - } - } .day-of-week { text-align: center; font-weight: 500; @@ -128,6 +124,19 @@ export class LunarCalendarPopup extends LitElement { color: var(--accent-color); } } + @media screen and (max-width: 800px) { + #calendar-grid { + grid-template-rows: auto; + } + .calendar-header { + font-size: 1rem; + font-weight: 400; + } + .calendar-day > .day-symbol { + font-size: 1rem; + padding: 0; + } + } `, ]; } @@ -145,10 +154,7 @@ export class LunarCalendarPopup extends LitElement {
${renderNavButton(ICON.CLOSE, () => { - this.card._calendarPopup = false; - if (this.card._calendarInfo) { - this.card._calendarInfo = false; - } + this._handleClose(); this.viewDate = DateTime.local().startOf('month'); })}
@@ -203,6 +209,17 @@ export class LunarCalendarPopup extends LitElement { `; } + private _handleClose(): void { + if (this.card.config.calendar_modal) { + this.card._dialogOpen = false; + } else { + this.card._calendarPopup = false; + if (this.card._calendarInfo) { + this.card._calendarInfo = false; + } + } + } + private _setEventListeners(): void { const grid = this.shadowRoot?.getElementById('calendar-grid'); if (grid) { @@ -232,7 +249,7 @@ export class LunarCalendarPopup extends LitElement { this.card.selectedDate = date; setTimeout(() => { this.viewDate = DateTime.local().startOf('month'); - this.card._calendarPopup = false; + this._handleClose(); }, 300); } diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index aa7d3d3..cbe4f9e 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -46,12 +46,31 @@ export class LunarHorizonChart extends LitElement { this.setupChart(); } - protected shouldUpdate(_changedProperties: PropertyValues): boolean { + protected updated(_changedProperties: PropertyValues): void { if (_changedProperties.has('cardWidth')) { - this._chart?.resize(); + if (this._chart) { + this._chart.resize(this.cardWidth, this.cardHeight); + } } - return true; } + + // protected shouldUpdate(_changedProperties: PropertyValues): boolean { + // if (_changedProperties.has('moon')) { + // if (this._chart) { + // this._chart.data = this.chartData; + // this._chart.update('none'); + // } + // } + // return true; + // } + + get cardHeight(): number { + let height = this.cardWidth * 0.5 - 96; + height = this.card.config.hide_header ? height + 48 : height; + + return height; + } + static get styles(): CSSResultGroup { return [ styles, @@ -198,15 +217,6 @@ export class LunarHorizonChart extends LitElement { }, }, - onResize: () => { - const width = this.cardWidth; - const height = this.cardWidth / 2; - if (this._chart) { - this._chart.canvas.width = width; - this._chart.canvas.height = height; - this._chart.update(); - } - }, // Hover on point onHover: (_event, elements) => { if (elements.length > 0) { @@ -236,10 +246,17 @@ export class LunarHorizonChart extends LitElement { } protected render(): TemplateResult { + const dataContainer = this.renderDataContainer(); return html`
- +
+ ${dataContainer} + `; + } + + private renderDataContainer(): TemplateResult { + return html`
${this.renderHeaderTime()} -60 ? -60 : sugestedYMin, + suggestedMin: sugestedYMin, + suggestedMax: sugestedYMax, ticks: { ...ticksOptions, display: graphConfig?.y_ticks || false, @@ -432,18 +449,15 @@ export class LunarHorizonChart extends LitElement { const plugins: ChartOptions['plugins'] = {}; plugins['legend'] = { - display: graphConfig?.show_legend ?? true, + display: false, align: graphConfig?.legend_align || 'center', position: graphConfig?.legend_position || 'bottom', labels: { usePointStyle: false, boxWidth: 0, boxHeight: 0, - padding: 10, + padding: 4, color: secondaryTextColor, - font: { - size: 14, - }, }, }; @@ -703,7 +717,7 @@ export class LunarHorizonChart extends LitElement { const yPosition = y.getPixelForValue(0); - const lineOffset = isUp ? Math.round((yPosition - top) / 3) : Math.round((bottom - yPosition) / 2); + const lineOffset = isUp ? Math.round((yPosition - top) / 4) : Math.round((bottom - yPosition) / 2); const maxTextWidth = getMaxValueText(ctx, isUp ? 'Rise' : 'Set', formatedTime, direction); let textAlign: CanvasTextAlign = 'start'; @@ -754,16 +768,16 @@ export class LunarHorizonChart extends LitElement { id: 'expandChartArea', beforeDraw: (chart: Chart) => { chart.chartArea.left = 0; - chart.chartArea.right = chart.width; + chart.chartArea.right = this.cardWidth; chart.chartArea.top = 0; - chart.chartArea.bottom = chart.height; + chart.chartArea.bottom = this.cardHeight; }, afterUpdate: (chart: Chart) => { chart.chartArea.left = 0; - chart.chartArea.right = chart.width; + chart.chartArea.right = this.cardWidth; chart.chartArea.top = 0; - chart.chartArea.bottom = chart.height; + chart.chartArea.bottom = this.cardHeight; }, }; }; diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index c4c2c3b..0310d33 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -24,8 +24,7 @@ export class LunarHorizonDynamic extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) moon!: Moon; @property({ attribute: false }) card!: LunarPhaseCard; - - @state() private cardWidth: number = 500; + @property({ type: Number }) public cardWidth!: number; @state() public fillColors!: FILL_COLORS; @@ -49,6 +48,7 @@ export class LunarHorizonDynamic extends LitElement { } protected updated(_changedProperties: PropertyValues): void { + if (!this.card.config || !this.moon) return; if (_changedProperties.has('cardWidth')) { if (this.dynamicChart) { this.dynamicChart.resize(this.cardWidth, this.cardHeight); @@ -59,7 +59,6 @@ export class LunarHorizonDynamic extends LitElement { get cardHeight(): number { let height = this.cardWidth * 0.5; height = this.card.config.hide_header ? height : height - 48; - console.log('height dynamic', height); return height; } @@ -95,6 +94,7 @@ export class LunarHorizonDynamic extends LitElement { box-sizing: border-box; border-radius: 24px; will-change: backdrop-filter; + margin: -2px; } #dynamic-chart { @@ -348,7 +348,7 @@ export class LunarHorizonDynamic extends LitElement { const index = timeLabels.indexOf(closestTime); return { id: 'nowLine', - beforeDatasetsDraw: (chart: Chart) => { + beforeDatasetDraw: (chart: Chart) => { const now = this._date; const closestTime = timeLabels.reduce((a, b) => Math.abs(b - now.getTime()) < Math.abs(a - now.getTime()) ? b : a @@ -383,7 +383,7 @@ export class LunarHorizonDynamic extends LitElement { ctx.restore(); }, - afterDatasetsDraw: (chart: Chart) => { + afterDatasetDraw: (chart: Chart) => { const dataSet = chart.getDatasetMeta(0); const { ctx, @@ -609,7 +609,7 @@ export class LunarHorizonDynamic extends LitElement { private _expandChartArea = (): Plugin => { return { id: 'expandChartArea', - beforeRender: (chart: Chart) => { + afterRender: (chart: Chart) => { chart.chartArea.right = this.cardWidth; chart.chartArea.bottom = this.cardHeight; }, diff --git a/src/components/moon-star-field.ts b/src/components/moon-star-field.ts index 2a7e0ac..9c788d2 100644 --- a/src/components/moon-star-field.ts +++ b/src/components/moon-star-field.ts @@ -3,16 +3,23 @@ import { customElement, property, state } from 'lit/decorators.js'; import { LunarPhaseCard } from '../lunar-phase-card'; -@customElement('moon-star-field') +@customElement('lunar-star-field') export class LunarStarField extends LitElement { @property({ attribute: false }) _card!: LunarPhaseCard; - @state() public count: number = 30; + @state() private count: number = 30; protected firstUpdated(_changedProperties: PropertyValues): void { super.firstUpdated(_changedProperties); this._createStarfield(); } + protected updated(_changedProperties: PropertyValues): void { + super.updated(_changedProperties); + if (_changedProperties.has('_card')) { + this._createStarfield(); + } + } + static get styles(): CSSResultGroup { return [ css` @@ -69,7 +76,7 @@ export class LunarStarField extends LitElement { const y = Math.random() * starfield.offsetHeight; // Random blink delay - const delay = 20 + Math.random() * 5; + const delay = 3 + Math.random() * 3; star.style.left = `${x}px`; star.style.top = `${y}px`; star.style.animationDelay = `${delay}s`; @@ -77,3 +84,9 @@ export class LunarStarField extends LitElement { } } } + +declare global { + interface HTMLElementTagNameMap { + 'lunar-star-field': LunarStarField; + } +} diff --git a/src/css/style.css b/src/css/style.css index eee6aaa..e78aabc 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -9,6 +9,7 @@ --lunar-card-label-font-size: 14px; } + *, *::before, *::after { @@ -20,7 +21,7 @@ ha-card { overflow: hidden; display: flex; width: 100%; - height: auto; + height: fit-content; flex-direction: column; background-color: var(--card-background-color); letter-spacing: 0.5px; @@ -36,7 +37,7 @@ ha-card.--background { background-repeat: no-repeat; background-image: var(--lunar-background-image); transition: all 0.5s ease; - place-content: space-between; + /* place-content: space-between; */ --primary-text-color: var(--lunar-card-label-font-color, #e1e1e1); --swiper-theme-color: var(--lunar-card-label-font-color, #e1e1e1); } @@ -106,7 +107,7 @@ ha-card>.loading[hidden] { } .lunar-card-header>.header-title[full] { - max-width: calc(100% - 8px); + /* max-width: calc(100% - 8px); */ padding-top: 12px; } @@ -146,20 +147,20 @@ ha-card>.loading[hidden] { -ha-card.--background h1, +ha-card.--background .title, ha-card.--background .moon-phase-name { color: var(--lunar-card-header-font-color, #e1e1e1); /* text-shadow: 2px 2px 4px var(--card-background-color); */ } -.--default-header h1 { - margin-left: var(--lunar-card-padding); +.--default-header .title { + padding-left: var(--lunar-card-padding); } -h1 { +.title { color: var(--lunar-card-header-font-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); - display: block; + display: inline-block; margin-block-start: 0px; margin-block-end: 0px; font-weight: 400; @@ -169,9 +170,6 @@ h1 { } - - - .btn-action { display: block; color: var(--lunar-card-label-font-color); @@ -203,6 +201,7 @@ h1 { font-size: var(--lunar-card-label-font-size, 14px); text-transform: var(--lunar-card-label-text-transform, none); transition: all 300ms ease-in-out; + position: relative; } @@ -210,6 +209,7 @@ h1 { display: flex; width: 100%; max-width: 150px; + min-width: 100px; transition: transform 0.5s; -webkit-user-select: none; -moz-user-select: none; @@ -217,7 +217,7 @@ h1 { aspect-ratio: 1; padding: 8px; flex-shrink: 0; - z-index: 4; + /* z-index: 4; */ height: fit-content; align-self: center; } @@ -469,6 +469,7 @@ button.date-input-btn:hover { flex-direction: column; gap: 0.5rem; margin-inline: 8px; + overflow: hidden; } @@ -533,4 +534,64 @@ button.date-input-btn:hover { .fade-in { animation: fadeIn 0.3s ease; position: relative; +} + +@keyframes dialog-animation { + 0% { + transform: translateY(-30px); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.slide-in { + animation: dialog-animation 0.5s ease-in-out; + animation-iteration-count: 1; +} + +dialog#calendar-dialog { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + z-index: 5; + background-color: rgba(0, 0, 0, 0.7); + /* background-color: var(--mdc-dialog-scrim-color, rgba(0, 0, 0, .32)); */ + backdrop-filter: blur(4px); + display: flex; + justify-content: center; + align-items: center; + border: none; + padding: 0; +} + +dialog#calendar-dialog[grid] { + position: fixed !important; +} + + +dialog#calendar-dialog .dialog-content { + display: block; + width: 100%; + justify-content: center; + /* aspect-ratio: 1; */ + flex-direction: row; +} + +@media screen and (max-width: 800px) { + dialog#calendar-dialog { + position: fixed; + } +} + +@media screen and (min-width: 600px) { + dialog#calendar-dialog .dialog-content { + min-width: 450px; + } } \ No newline at end of file diff --git a/src/editor.ts b/src/editor.ts index 569a486..d5602fc 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -329,6 +329,7 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit { label: 'timeFormat', configValue: '12hr_format' }, { label: 'mileUnit', configValue: 'mile_unit' }, { label: 'hideHeader', configValue: 'hide_header' }, + { label: 'calendarModal', configValue: 'calendar_modal' }, ]; const viewOptions = html` @@ -405,8 +406,8 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit { label: 'xTicks', configValue: 'x_ticks' }, { label: 'showTime', configValue: 'show_time' }, { label: 'showCurrent', configValue: 'show_current' }, - { label: 'showLegend', configValue: 'show_legend' }, - { label: 'showHighest', configValue: 'show_highest' }, + // { label: 'showLegend', configValue: 'show_legend' }, + // { label: 'showHighest', configValue: 'show_highest' }, ]; const checkBoxes = html` @@ -429,8 +430,8 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit const graphType = [{ items: ['default', 'dynamic'], label: 'graphType', value: 'graph_type' }]; const comboBoxes = [ - { items: ['top', 'bottom'], label: 'legendPosition', value: 'legend_position' }, - { items: ['start', 'center', 'end'], label: 'legendAlign', value: 'legend_align' }, + // { items: ['top', 'bottom'], label: 'legendPosition', value: 'legend_position' }, + // { items: ['start', 'center', 'end'], label: 'legendAlign', value: 'legend_align' }, { items: ['left', 'right'], label: 'yTicksPosition', value: 'y_ticks_position' }, ]; diff --git a/src/languages/ca.json b/src/languages/ca.json index 838e497..a84a60c 100644 --- a/src/languages/ca.json +++ b/src/languages/ca.json @@ -124,6 +124,7 @@ "showCurrent": "Posició actual de la Lluna", "showLegend": "Mostra la llegenda", "showHighest": "Mostrar la posició més alta de la Lluna", + "calendarModal": "Calendari popup", "placeHolder": { "latitude": "Entra la latitud", "longitude": "Entra la longitud", diff --git a/src/languages/cs.json b/src/languages/cs.json index 1555175..e4f8ae8 100644 --- a/src/languages/cs.json +++ b/src/languages/cs.json @@ -124,6 +124,7 @@ "showCurrent": "Aktuální poloha Měsíce", "showLegend": "Zobrazit legendu", "showHighest": "Zobrazit nejvyšší polohu Měsíce", + "calendarModal": "Kalendářové popup", "placeHolder": { "latitude": "Zadejte zeměpisnou šířku", "longitude": "Zadejte zeměpisnou délku", diff --git a/src/languages/da.json b/src/languages/da.json index 49f54a9..f201d32 100644 --- a/src/languages/da.json +++ b/src/languages/da.json @@ -124,6 +124,7 @@ "showCurrent": "Nuværende måneposition", "showLegend": "Vis legend", "showHighest": "Vis højeste Måneposition", + "calendarModal": "Kalender popup", "placeHolder": { "latitude": "Indtast breddegrad", "longitude": "Indtast længdegrad", diff --git a/src/languages/de.json b/src/languages/de.json index 40ee050..2c8b8f4 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -124,6 +124,7 @@ "showCurrent": "Aktuelle Mondposition", "showLegend": "Legende einblenden", "showHighest": "Kulmination einblenden", + "calendarModal": "Kalender-Popup", "placeHolder": { "latitude": "Breitengrad eingeben", "longitude": "Längengrad eingeben", diff --git a/src/languages/en.json b/src/languages/en.json index 86a8f74..a588078 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -57,8 +57,7 @@ "currentTime": "Current time", "common": { "now": "Now" - }, - "elevation": "Elevation" + } }, "editor": { "viewConfig": { @@ -125,6 +124,7 @@ "showCurrent": "Current Moon position", "showLegend": "Display legend", "showHighest": "Display highest Moon position", + "calendarModal": "Calendar popup", "placeHolder": { "latitude": "Enter latitude", "longitude": "Enter longitude", diff --git a/src/languages/es.json b/src/languages/es.json index 178229b..b491d57 100644 --- a/src/languages/es.json +++ b/src/languages/es.json @@ -124,6 +124,7 @@ "showCurrent": "Posición actual de la Luna", "showLegend": "Mostrar leyenda", "showHighest": "Mostrar la posición más alta de la Luna", + "calendarModal": "Calendario popup", "placeHolder": { "latitude": "Ingresar latitud", "longitude": "Ingresar longitud", diff --git a/src/languages/fr.json b/src/languages/fr.json index cea4ae4..c8eaed8 100644 --- a/src/languages/fr.json +++ b/src/languages/fr.json @@ -124,6 +124,7 @@ "showCurrent": "Position actuelle de la Lune", "showLegend": "Afficher la légende", "showHighest": "Afficher la position la plus haute de la Lune", + "calendarModal": "Calendrier popup", "placeHolder": { "latitude": "Entrer latitude", "longitude": "Entrer longitude", diff --git a/src/languages/id.json b/src/languages/id.json index 003412c..3a3d541 100644 --- a/src/languages/id.json +++ b/src/languages/id.json @@ -124,6 +124,7 @@ "showCurrent": "Posisi Bulan Saat Ini", "showLegend": "Tampilkan legenda", "showHighest": "Tampilkan posisi Bulan tertinggi", + "calendarModal": "Popup kalender", "placeHolder": { "latitude": "Masukkan garis lintang", "longitude": "Masukkan garis bujur", diff --git a/src/languages/it.json b/src/languages/it.json index 412f117..dde2880 100644 --- a/src/languages/it.json +++ b/src/languages/it.json @@ -124,6 +124,7 @@ "showCurrent": "Posizione attuale della Luna", "showLegend": "Mostra leggenda", "showHighest": "Mostra la posizione più alta della Luna", + "calendarModal": "Popup calendario", "placeHolder": { "latitude": "Inserisci Latitudine", "longitude": "Inserisci Longitudine", diff --git a/src/languages/nl.json b/src/languages/nl.json index 630fbe0..280dc7a 100644 --- a/src/languages/nl.json +++ b/src/languages/nl.json @@ -124,6 +124,7 @@ "showCurrent": "Huidige positie van de Maan", "showLegend": "Toon legenda", "showHighest": "Toon hoogste Maanpositie", + "calendarModal": "Kalender popup", "placeHolder": { "latitude": "Enter breedtegraad", "longitude": "Enter lengtegraad", diff --git a/src/languages/pt.json b/src/languages/pt.json index 068cec2..8fad792 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -124,6 +124,7 @@ "showCurrent": "Posição atual da Lua", "showLegend": "Mostrar legenda", "showHighest": "Exibir a posição mais alta da Lua", + "calendarModal": "Calendário popup", "placeHolder": { "latitude": "Inserir latitude", "longitude": "Inserir longitude", diff --git a/src/languages/ru.json b/src/languages/ru.json index 254ad8e..c1c255e 100644 --- a/src/languages/ru.json +++ b/src/languages/ru.json @@ -124,6 +124,7 @@ "showCurrent": "Текущее положение Луны", "showLegend": "Показать легенду", "showHighest": "Показать высшее положение Луны", + "calendarModal": "Календарь popup", "placeHolder": { "latitude": "Введите широту", "longitude": "Введите долготу", diff --git a/src/languages/sk.json b/src/languages/sk.json index 7cec5e2..87ecd57 100644 --- a/src/languages/sk.json +++ b/src/languages/sk.json @@ -124,6 +124,7 @@ "showCurrent": "Aktuálna poloha Mesiaca", "showLegend": "Zobraziť legendu", "showHighest": "Zobraziť najvyššiu polohu Mesiaca", + "calendarModal": "Kalendárové popup", "placeHolder": { "latitude": "Zadajte zemepisnú šírku", "longitude": "Zadajte zemepisnú dĺžku", diff --git a/src/localize/string.json b/src/localize/string.json index 22541b8..a588078 100644 --- a/src/localize/string.json +++ b/src/localize/string.json @@ -124,6 +124,7 @@ "showCurrent": "Current Moon position", "showLegend": "Display legend", "showHighest": "Display highest Moon position", + "calendarModal": "Calendar popup", "placeHolder": { "latitude": "Enter latitude", "longitude": "Enter longitude", diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 4db45e6..752cc5f 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -42,6 +42,7 @@ export class LunarPhaseCard extends LitElement { @state() private _hass!: HomeAssistant; @property({ attribute: false }) config!: LunarPhaseCardConfig; @property({ attribute: false }) moon!: Moon; + @property({ type: String }) public layout?: string; @state() _activeCard: PageType | null = null; @state() selectedDate: Date | undefined; @@ -59,10 +60,13 @@ export class LunarPhaseCard extends LitElement { @state() private _cardWidth: number = 0; @state() private _cardHeight: number = 0; + @state() public _dialogOpen!: boolean; + @query('lunar-base-data') _data!: LunarBaseData; @query('lunar-horizon-chart') _moonHorizon!: LunarHorizonChart; @query('lunar-horizon-dynamic') _moonHorizonDynamic!: LunarHorizonDynamic; @query('moon-star-field') _starField!: LunarStarField; + @query('#calendar-dialog') _calendarDialog!: HTMLDialogElement; constructor() { super(); @@ -110,7 +114,6 @@ export class LunarPhaseCard extends LitElement { this.clearRefreshInterval(); this.detachResizeObserver(); this._connected = false; - this._resizeInitiated = false; document.removeEventListener('toggle-graph-editor', (ev) => this._handleEditorEvent(ev as CustomEvent)); super.disconnectedCallback(); @@ -193,6 +196,11 @@ export class LunarPhaseCard extends LitElement { _handleOverflow(this as any); } } + if (changedProps.has('_dialogOpen')) { + console.log('dialog open', this._dialogOpen); + this._attachEventListeners(); + this.updateBodyScroll(); + } } get hass(): HomeAssistant { @@ -250,17 +258,19 @@ export class LunarPhaseCard extends LitElement { } private _handleFirstRender() { - if (isEditorMode(this)) { + if (this.isEditorPreview) { this._cardReady = false; const activeGraphEditor = this.isGraphEditor; if (activeGraphEditor && this._activeCard !== PageType.HORIZON) { this._activeCard = PageType.HORIZON; this._cardReady = true; } else if (!activeGraphEditor && this._defaultCard === PageType.HORIZON) { - this._activeCard = PageType.BASE; setTimeout(() => { - this._activeCard = PageType.HORIZON; - }, 150); + this._activeCard = PageType.BASE; + setTimeout(() => { + this._activeCard = PageType.HORIZON; + }, 150); + }, 0); this._cardReady = true; } else { this._activeCard = this._defaultCard; @@ -338,7 +348,6 @@ export class LunarPhaseCard extends LitElement { const card = !this._activeCard ? this._defaultCard : this._activeCard; const header = !this.config.compact_view || [PageType.HORIZON].includes(card) ? this.renderHeader() : nothing; const shouldAddPadding = [PageType.BASE].includes(card) && !this.config.compact_view; - return html` + ${this.renderCalendarDialog()} `; } + private renderCalendarDialog(): TemplateResult | typeof nothing { + if (!this.config.calendar_modal || !this._dialogOpen) return nothing; + const isGridMode = this.layout === 'grid'; + return html` +
+ +
+ `; + } + private renderBaseCard(): TemplateResult | void { return html` ${this.renderMoonImage()} ${this.renderMoonData()}`; } @@ -392,7 +412,7 @@ export class LunarPhaseCard extends LitElement { return html`
-

${headerContent}

+ ${headerContent}
${buttons.map( @@ -427,15 +447,6 @@ export class LunarPhaseCard extends LitElement {
`; } - private _computeMoonImageStyles() { - if (!this._activeCard || this._activeCard === PageType.HORIZON) return; - const activeCard = this._activeCard; - const headerOffset = this._headerHidden ? 48 : 96; - const width = this._cardWidth; - let moonWidth = activeCard === PageType.CALENDAR ? width * 0.5 - headerOffset : width / 3.5; - return styleMap({ maxWidth: `${moonWidth}px` }); - } - private renderMoonData(): TemplateResult { const compactView = this.config.compact_view && this._activeCard === PageType.BASE; const replacer = (key: string, value: any) => { @@ -518,28 +529,56 @@ export class LunarPhaseCard extends LitElement {
`; return html` + +
${this.config.hide_header ? nothing : this.renderHeader()}
${this.renderMoonImage()}${dateInput}
${this.renderMoonData()}
-
- -
+
`; } private _handleCalendarPopup() { - if (!this._calendarInfo) { - this._calendarInfo = true; - setTimeout(() => { + if (this.config.calendar_modal) { + this._dialogOpen = !this._dialogOpen; + } else { + if (!this._calendarInfo) { + this._calendarInfo = true; + setTimeout(() => { + this._calendarPopup = !this._calendarPopup; + }, 100); + } else { this._calendarPopup = !this._calendarPopup; - }, 100); + } + } + } + + private _attachEventListeners() { + const dialog = this.shadowRoot?.getElementById('calendar-dialog') as HTMLDialogElement; + if (!dialog) return; + const dialogContent = dialog.querySelector('.dialog-content'); + if (!dialogContent) return; + dialogContent.classList.toggle('slide-in'); + console.log('dialog', dialog); + dialog.addEventListener('click', (event: MouseEvent) => { + const target = event.target as HTMLElement; + if (target === dialog) { + this._dialogOpen = false; + } + }); + } + private updateBodyScroll(): void { + const body = document.querySelector('body') as HTMLElement; + if (this._dialogOpen) { + body.style.overflow = 'hidden'; } else { - this._calendarPopup = !this._calendarPopup; + body.style.overflow = ''; } + this.requestUpdate(); } private renderHorizon(): TemplateResult { @@ -612,11 +651,21 @@ export class LunarPhaseCard extends LitElement { const isCompact = this.config.compact_view; const isHeaderHidden = this._headerHidden; const width = this._cardWidth; - const height = [PageType.BASE].includes(this._activeCard) && !isCompact && !isHeaderHidden ? width * 0.5 : ''; - const justify = [PageType.BASE].includes(this._activeCard) && !isCompact && !isHeaderHidden ? 'space-between' : ''; + const height = [PageType.BASE].includes(this._activeCard) && !isCompact ? width * 0.5 : ''; + const justify = + [PageType.BASE].includes(this._activeCard) && !isCompact && !isHeaderHidden ? 'space-between' : 'center'; return styleMap({ minHeight: height ? `${height}px` : '', justifyContent: justify }); } + private _computeMoonImageStyles() { + if (!this._activeCard || this._activeCard === PageType.HORIZON) return; + const activeCard = this._activeCard; + const headerOffset = this._headerHidden ? 48 : 96; + const width = this._cardWidth; + let moonWidth = activeCard === PageType.CALENDAR ? width * 0.5 - headerOffset : width / 3.5; + return styleMap({ maxWidth: `${moonWidth}px` }); + } + private _computeClasses() { const isHeaderHidden = this.config?.hide_header || false; const reverse = this.config.moon_position === 'right'; @@ -664,7 +713,7 @@ export class LunarPhaseCard extends LitElement { } public getCardSize(): number { - return 4; + return 2; } } diff --git a/src/types/config.ts b/src/types/config.ts index 0824029..1b62dfa 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -43,6 +43,7 @@ export interface LunarPhaseCardConfig extends LovelaceCardConfig { mile_unit?: boolean; number_decimals?: number; hide_header?: boolean; + calendar_modal?: boolean; default_card?: PageType.BASE | PageType.CALENDAR | PageType.HORIZON; selected_language: string; moon_position?: 'left' | 'right'; diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 517a891..6bdedc6 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -185,7 +185,7 @@ export function _handleOverflow(card: LunarPhaseCard): void { if (!card) return; const lpcHeader = card.shadowRoot?.getElementById('lpc-header') as HTMLElement; const headerEl = lpcHeader?.querySelector('.header-title') as HTMLElement; - const titleEl = headerEl?.querySelector('h1') as HTMLElement; + const titleEl = headerEl?.querySelector('.title') as HTMLElement; if (!headerEl || !titleEl) return; const clientWidth = headerEl.clientWidth; const scrollWidth = titleEl.scrollWidth; From d67b06b342f8d027742d3ebb2d302c3ad03e4b31 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 07:22:05 +0100 Subject: [PATCH 08/32] chore: Bump version to 1.9.0-beta.5 in package.json --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bf1c5aa..e09c834 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.9.0-beta.4", + "version": "1.9.0-beta.5", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", From 699c06b99ba3212baaa88a2cd3b792af208f1b1d Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 07:32:30 +0100 Subject: [PATCH 09/32] --- .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml index 5450393..5445678 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml @@ -34,10 +34,7 @@ body: label: Version 📦 description: The version of the application where the bug was found options: - - v1.9.0-beta.4 - - v1.9.0-beta.3 - - v1.9.0-beta.2 - - v1.9.0-beta.1 + - v1.9.0-beta.5 - v1.8.1 - v1.8.0 - v1.7.2 From 0eaac4ebc099c419ea092aee66131e20bdaab9bf Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 13:37:57 +0100 Subject: [PATCH 10/32] chore: remove legend chart config options --- README.md | 8 ++------ src/types/default-config.ts | 10 ++++------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 97562d5..28d0bd4 100644 --- a/README.md +++ b/README.md @@ -134,6 +134,7 @@ https://github.com/ngocjohn/lunar-phase-card | `12hr_format` | boolean | Optional | Whether to display time in 12-hour format. Defaults to `false`. | | `mile_unit` | boolean | Optional | Whether to display distance in miles. Defaults to `false`. | | `hide_header` | boolean | Optional | Whether to hide the header of the card. Defaults to `false`. | +| `calendar_modal` | boolean | Optional | Whether to use calendar as modal popup. Defaults to `false`. | | `default_card` | string | Optional | Default view of the card. Options: `base`, `calendar`, `horizon`. Defaults to `base`. | | `moon_position` | string | Optional | Position of the moon image. Options: `left`, `right`. Defaults to `left`. | | `southern_hemisphere` | boolean | Optional | Adjusts the moon orientation for southern hemisphere users. Defaults to `false`. | @@ -164,12 +165,9 @@ https://github.com/ngocjohn/lunar-phase-card | `x_ticks` | boolean | Whether to show x-axis ticks. Defaults to `false`. | | `show_time` | boolean | Whether to show time labels on the chart. Defaults to `true`. | | `show_current` | boolean | Whether to show the current moon position. Defaults to `true`. | -| `show_legend` | boolean | Whether to show the chart legend. Defaults to `true`. | | `show_highest` | boolean | Whether to show the highest moon point. Defaults to `true`. | | `y_ticks_position` | string | Position of the y-axis ticks. Options: `left`, `right`. Defaults to `left`.| | `y_ticks_step_size` | number | Step size for y-axis ticks. Defaults to `30`. | -| `legend_position` | string | Position of the legend. Options: `top`, `bottom`. Defaults to `top`. | -| `legend_align` | string | Alignment of the legend. Options: `start`, `center`, `end`. Defaults to `center`. | | `time_step_size` | number | Step size for time labels. Defaults to `30`. | @@ -189,6 +187,7 @@ compact_view: false 12hr_format: false mile_unit: false hide_header: false +calendar_modal: false default_card: base moon_position: left southern_hemisphere: false @@ -198,12 +197,9 @@ graph_config: x_ticks: false show_time: true show_current: true - show_legend: true show_highest: true y_ticks_position: left y_ticks_step_size: 30 - legend_position: top - legend_align: center time_step_size: 30 graph_type: default font_customize: diff --git a/src/types/default-config.ts b/src/types/default-config.ts index ad12453..1daa9d3 100644 --- a/src/types/default-config.ts +++ b/src/types/default-config.ts @@ -8,11 +8,12 @@ export const defaultConfig: Partial = { use_custom: false, use_entity: false, show_background: true, - selected_language: 'en', - compact_view: true, + selected_language: 'system', + compact_view: false, '12hr_format': false, mile_unit: false, hide_header: false, + calendar_modal: false, default_card: PageType.BASE, moon_position: 'left', southern_hemisphere: false, @@ -20,15 +21,12 @@ export const defaultConfig: Partial = { graph_config: { graph_type: 'default', y_ticks: false, - x_ticks: true, + x_ticks: false, show_time: true, show_current: true, - show_legend: true, show_highest: true, y_ticks_position: 'left', y_ticks_step_size: 30, - legend_position: 'top', - legend_align: 'center', time_step_size: 30, }, font_customize: { From 90e219c2c1ab9d3cfe2369f9a6a96be30d1e9a70 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 13:38:40 +0100 Subject: [PATCH 11/32] refactor: Update dymanic chart tooltip with azimuth --- src/components/moon-horizon-chart.ts | 13 ++++++++++--- src/components/moon-horizon-dynamic.ts | 24 ++++++++++++++++++------ src/types/chart-config.ts | 5 ++++- src/utils/moon.ts | 12 +++++++++--- 4 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index cbe4f9e..09c42eb 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -220,7 +220,7 @@ export class LunarHorizonChart extends LitElement { // Hover on point onHover: (_event, elements) => { if (elements.length > 0) { - this.hoverOnChart = true; + // this.hoverOnChart = true; const element = elements[0]; const xTimeNum = element.element.getProps(['raw'], true).raw.x; this.handlePointHover(xTimeNum); @@ -234,7 +234,7 @@ export class LunarHorizonChart extends LitElement { // Add event listeners ctx.addEventListener('mouseout', () => { this.hoverTimeout = window.setTimeout(() => { - this.hoverOnChart = false; + // this.hoverOnChart = false; this._chart?.update(); }, HOVER_TIMEOUT); // Reset the selected date @@ -242,6 +242,8 @@ export class LunarHorizonChart extends LitElement { this.card.selectedDate = undefined; } }); + ctx.addEventListener('touchstart', this._onChartTouchStart.bind(this), { passive: false }); + ctx.addEventListener('touchmove', this._onChartTouchStart.bind(this), { passive: false }); ctx.addEventListener('touchend', this._onChartTouchEnd.bind(this)); } @@ -368,10 +370,11 @@ export class LunarHorizonChart extends LitElement { borderWidth: (ctx: ScriptableLineSegmentContext) => ctx.p0.parsed.y >= -0.001 && ctx.p1.parsed.y >= -0.001 ? 1.2 : 1, }, - radius: () => (this.hoverOnChart ? 1.2 : 0), + // radius: () => (this.hoverOnChart ? 1.2 : 0), pointHoverRadius: 3, pointHoverBackgroundColor: secondaryTextColor, pointHoverBorderWidth: 2, + radius: 0, spanGaps: true, }; @@ -782,6 +785,10 @@ export class LunarHorizonChart extends LitElement { }; }; + private _onChartTouchStart(event: TouchEvent): void { + event.preventDefault(); + } + private _onChartTouchEnd(event: TouchEvent): void { const touch = event.changedTouches[0]; const canvas = this.shadowRoot!.getElementById('moonPositionChart') as HTMLCanvasElement; diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index 0310d33..535a781 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -162,6 +162,8 @@ export class LunarHorizonDynamic extends LitElement { const ctx = this.shadowRoot!.getElementById('dynamic-chart') as HTMLCanvasElement; if (!ctx) return; + ctx.addEventListener('touchstart', this._onChartTouchStart.bind(this), { passive: false }); + ctx.addEventListener('touchmove', this._onChartTouchStart.bind(this), { passive: false }); ctx.addEventListener('touchend', this._onChartTouchEnd.bind(this)); this.dynamicChart = new Chart(ctx, { @@ -174,6 +176,9 @@ export class LunarHorizonDynamic extends LitElement { }); } + private _onChartTouchStart(event: TouchEvent): void { + event.preventDefault(); + } private _onChartTouchEnd(event: TouchEvent): void { const touch = event.changedTouches[0]; const canvas = this.shadowRoot!.getElementById('dynamic-chart') as HTMLCanvasElement; @@ -213,7 +218,7 @@ export class LunarHorizonDynamic extends LitElement { }; const chartData = this.todayData.chartData; const labels = chartData.map((data) => formatTime(new Date(data.timeLabel), this._locale)); - const moonData = chartData.map((data) => data.moon); + const moonData = chartData.map((data) => data.moon.altitude); const moonDataset = { label: 'Moon', data: moonData, @@ -242,12 +247,14 @@ export class LunarHorizonDynamic extends LitElement { private _getChartOptions(): ChartOptions { const elevationLabel = this.card.localize('card.altitude'); + const azimuthLabel = this.card.localize('card.azimuth'); const formatedTitle = (time: number) => { const dateStr = formatDateShort(new Date(time), this._locale); return `${dateStr}`; }; const chartData = this.todayData.chartData; - const values = [...Object.values(chartData).map((data) => data.moon)]; + const direction = chartData.map((data) => data.moon.azimuth); + const values = [...Object.values(chartData).map((data) => data.moon.altitude)]; const minMax = { suggestedMin: Math.round(Math.min(...values) - 10), suggestedMax: Math.round(Math.max(...values) + 30), @@ -312,8 +319,13 @@ export class LunarHorizonDynamic extends LitElement { return formatedDate; }, label: function (tooltipItem) { + const itemIndex = tooltipItem.parsed.x; + const directionValue = direction[itemIndex]; const value = Math.round(tooltipItem.parsed.y); - return `${elevationLabel}: ${value}°`; + const azimuth = `${azimuthLabel}: ${directionValue}`; + const elevation = `${elevationLabel}: ${value}°`; + const body = [elevation, azimuth]; + return body; }, }, }; @@ -361,7 +373,7 @@ export class LunarHorizonDynamic extends LitElement { chartArea: { bottom }, } = chart; const xLabel = chart.scales.x.getPixelForValue(index); - const yLabel = chart.scales.y.getPixelForValue(chartData[index].moon); + const yLabel = chart.scales.y.getPixelForValue(chartData[index].moon.altitude); // const lineColor = hexToRgba(CHART_COLOR.STROKE_LINE, 0.7); ctx.font = '12px Arial'; const width = ctx.measureText(nowText).width; @@ -395,7 +407,7 @@ export class LunarHorizonDynamic extends LitElement { const xPosition = x.getPixelForValue(index) - emojiSize.width / 2; const totalHeight = emojiSize.actualBoundingBoxAscent + emojiSize.actualBoundingBoxDescent; const yPosition = - y.getPixelForValue(chartData[index].moon) + emojiSize.actualBoundingBoxAscent - totalHeight / 2; + y.getPixelForValue(chartData[index].moon.altitude) + emojiSize.actualBoundingBoxAscent - totalHeight / 2; ctx.save(); ctx.font = emojiFontSize; @@ -598,7 +610,7 @@ export class LunarHorizonDynamic extends LitElement { return { id: 'timesMarkers', - afterDatasetDraw: (chart: Chart) => { + beforeDatasetDraw: (chart: Chart) => { const moonTimes = this.moon.timeData.moon; drawMarkers(chart, moonTimes, 20); diff --git a/src/types/chart-config.ts b/src/types/chart-config.ts index 2df23ad..9bb1582 100644 --- a/src/types/chart-config.ts +++ b/src/types/chart-config.ts @@ -37,7 +37,10 @@ export type ChartColors = { export type DynamicChartData = { chartData: { timeLabel: number; - moon: number; + moon: { + altitude: number; + azimuth: string; + }; }[]; times: { moon: number[]; diff --git a/src/utils/moon.ts b/src/utils/moon.ts index a9d292b..38b8adb 100644 --- a/src/utils/moon.ts +++ b/src/utils/moon.ts @@ -287,13 +287,19 @@ export class Moon { const stepSize = step * 60 * 1000; const timeRange = 24 * 60 * 60 * 1000; const steps = timeRange / stepSize; - const result: { timeLabel: number; moon: number }[] = []; + const result: { timeLabel: number; moon: { altitude: number; azimuth: string } }[] = []; for (let i = 0; i < steps; i++) { const time = new Date(startTime.getTime() + i * stepSize); - const moonPosition = SunCalc.getMoonPosition(time, location.latitude, location.longitude).altitudeDegrees; + const { altitudeDegrees, azimuthDegrees } = SunCalc.getMoonPosition(time, location.latitude, location.longitude); + const azimuth = this.formatNumber(azimuthDegrees); + const cardinal = this.convertCardinal(azimuthDegrees); + const direction = `${azimuth}° ${cardinal}`; result.push({ timeLabel: time.getTime(), - moon: Number(moonPosition.toFixed(2)), + moon: { + altitude: Number(altitudeDegrees.toFixed(2)), + azimuth: direction, + }, }); } return result; From d37c6951c2539b432e298796419de463a58a1985 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 13:38:47 +0100 Subject: [PATCH 12/32] refactor: Remove font-weight property from moon-calendar-popup --- src/components/moon-calendar-popup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/moon-calendar-popup.ts b/src/components/moon-calendar-popup.ts index 649c7bb..ad2ae1d 100644 --- a/src/components/moon-calendar-popup.ts +++ b/src/components/moon-calendar-popup.ts @@ -46,7 +46,7 @@ export class LunarCalendarPopup extends LitElement { flex-direction: row; justify-content: space-between; align-items: center; - font-weight: 600; + /* font-weight: 600; */ font-size: initial; } From 523f619a45881d6bfd658730714551c6a94388e3 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Tue, 10 Dec 2024 13:39:17 +0100 Subject: [PATCH 13/32] refactor: Update lunar phase card editor with new icon for base configuration --- src/editor.ts | 2 +- src/lunar-phase-card.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index d5602fc..944a88a 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -205,7 +205,7 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit
${radios} ${southern}
`}`; - return this.contentTemplate('baseConfig', 'baseConfig', 'mdi:cog', contentWrapp); + return this.contentTemplate('baseConfig', 'baseConfig', 'mdi:longitude', contentWrapp); } private _renderLocation(): TemplateResult { diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 752cc5f..1a8dfa8 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -529,15 +529,15 @@ export class LunarPhaseCard extends LitElement {
`; return html` - -
${this.config.hide_header ? nothing : this.renderHeader()}
${this.renderMoonImage()}${dateInput}
${this.renderMoonData()}
-
+
+ +
`; } From f1af89aaf7c3780d15361cabf1962ed3b7a64bce Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 01:58:20 +0100 Subject: [PATCH 14/32] refactor: Update moon-base-data.ts to hide buttons instead of header --- README.md | 4 ++-- src/components/moon-base-data.ts | 2 +- src/editor.ts | 12 +++++++++--- src/languages/ca.json | 20 +++++++++++++++++++- src/languages/cs.json | 20 +++++++++++++++++++- src/languages/da.json | 20 +++++++++++++++++++- src/languages/de.json | 20 +++++++++++++++++++- src/languages/en.json | 20 +++++++++++++++++++- src/languages/es.json | 20 +++++++++++++++++++- src/languages/fr.json | 20 +++++++++++++++++++- src/languages/id.json | 20 +++++++++++++++++++- src/languages/it.json | 20 +++++++++++++++++++- src/languages/nl.json | 20 +++++++++++++++++++- src/languages/pt.json | 20 +++++++++++++++++++- src/languages/ru.json | 20 +++++++++++++++++++- src/languages/sk.json | 20 +++++++++++++++++++- src/localize/string.json | 20 +++++++++++++++++++- src/types/config.ts | 22 +++++++++++----------- src/types/default-config.ts | 18 +++++++++--------- 19 files changed, 298 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 28d0bd4..c10d275 100644 --- a/README.md +++ b/README.md @@ -133,7 +133,7 @@ https://github.com/ngocjohn/lunar-phase-card | `compact_view` | boolean | Optional | Whether to display the card in a compact view. Defaults to `false`. | | `12hr_format` | boolean | Optional | Whether to display time in 12-hour format. Defaults to `false`. | | `mile_unit` | boolean | Optional | Whether to display distance in miles. Defaults to `false`. | -| `hide_header` | boolean | Optional | Whether to hide the header of the card. Defaults to `false`. | +| `hide_buttons` | boolean | Optional | Whether to hide the buttons in header. Defaults to `false`. | | `calendar_modal` | boolean | Optional | Whether to use calendar as modal popup. Defaults to `false`. | | `default_card` | string | Optional | Default view of the card. Options: `base`, `calendar`, `horizon`. Defaults to `base`. | | `moon_position` | string | Optional | Position of the moon image. Options: `left`, `right`. Defaults to `left`. | @@ -186,7 +186,7 @@ selected_language: en compact_view: false 12hr_format: false mile_unit: false -hide_header: false +hide_buttons: false calendar_modal: false default_card: base moon_position: left diff --git a/src/components/moon-base-data.ts b/src/components/moon-base-data.ts index f38847a..4f08ccc 100644 --- a/src/components/moon-base-data.ts +++ b/src/components/moon-base-data.ts @@ -122,7 +122,7 @@ export class LunarBaseData extends LitElement { } private _renderPhaseName(): TemplateResult { - if (!this.moon.config.hide_header) return html``; + if (!this.moon.config.hide_buttons) return html``; return html`
${this.moon.phaseName}
`; } diff --git a/src/editor.ts b/src/editor.ts index 944a88a..9518c50 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -164,7 +164,7 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit const radiosOptions = this._getBaseConfigSelector().options; const radios = radiosOptions.map((item) => { return html` - + { const checkedValue = configKey ? this._config?.[configKey]?.[configValueKey] : this._config?.[configValueKey]; + const titleHelper = labelKey === 'fontOptions.hideLabel' ? 'hideLabel' : labelKey; return html` `; }; @@ -859,20 +862,23 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit } } - private _getBaseConfigSelector(): { options: { key: string; label: string }[] } { + private _getBaseConfigSelector(): { options: { key: string; label: string; title: string }[] } { return { options: [ { key: 'use_default', label: this.localize('editor.optionsConfig.useDefault'), + title: this.localize('editor.titleHelper.useDefault'), }, { key: 'use_custom', label: this.localize('editor.optionsConfig.useCustom'), + title: this.localize('editor.titleHelper.useCustom'), }, { key: 'use_entity', label: this.localize('editor.optionsConfig.useEntity'), + title: this.localize('editor.titleHelper.useEntity'), }, ], }; diff --git a/src/languages/ca.json b/src/languages/ca.json index a84a60c..5fb954f 100644 --- a/src/languages/ca.json +++ b/src/languages/ca.json @@ -117,7 +117,6 @@ "showBackground": "Mostra el fons", "timeFormat": "Format del temps de 12 hores", "mileUnit": "Unitat de milla", - "hideHeader": "Amaga la capçalera", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Marcadors de temps de sortida/posta", @@ -125,6 +124,25 @@ "showLegend": "Mostra la llegenda", "showHighest": "Mostrar la posició més alta de la Lluna", "calendarModal": "Calendari popup", + "hideButtons": "Amaga botons", + "titleHelper": { + "compactView": "Mostra una vista compacta", + "showBackground": "Mostra un fons", + "timeFormat": "Configura un format d'hora (12 hores o 24 hores)", + "mileUnit": "S'utilitzarà quilòmetres si està desactivat", + "yTicks": "Mostra els ticks de l'eix Y", + "xTicks": "Mostra els ticks de l'eix X", + "showTime": "Mostra els marcadors d'hora de sortida/posta", + "showCurrent": "Mostra la posició actual de la Lluna", + "showLegend": "Mostra una llegenda", + "showHighest": "Mostra la posició més alta de la Lluna", + "calendarModal": "El calendari es mostrarà en una finestra emergent", + "hideButtons": "Els botons de la capçalera s'amagaran", + "useDefault": "Utilitza latitud i longitud del sistema", + "useEntity": "Utilitza latitud i longitud de l'entitat", + "useCustom": "Utilitza latitud i longitud personalitzades", + "hideLabel": "Amaga l'etiqueta en vista compacta" + }, "placeHolder": { "latitude": "Entra la latitud", "longitude": "Entra la longitud", diff --git a/src/languages/cs.json b/src/languages/cs.json index e4f8ae8..477c357 100644 --- a/src/languages/cs.json +++ b/src/languages/cs.json @@ -117,7 +117,6 @@ "showBackground": "Zobrazit pozadí", "timeFormat": "12-hodinový formát času", "mileUnit": "Jednotka míle", - "hideHeader": "Skrýt záhlaví", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Značky času východu/západu", @@ -125,6 +124,25 @@ "showLegend": "Zobrazit legendu", "showHighest": "Zobrazit nejvyšší polohu Měsíce", "calendarModal": "Kalendářové popup", + "hideButtons": "Skrýt tlačítka", + "titleHelper": { + "compactView": "Zobrazit kompaktní zobrazení", + "showBackground": "Zobrazit pozadí", + "timeFormat": "Nastavit formát času (12hodinový nebo 24hodinový)", + "mileUnit": "Kilometr bude použit, pokud je zakázáno", + "yTicks": "Zobrazit značky osy Y", + "xTicks": "Zobrazit značky osy X", + "showTime": "Zobrazit značky času východu/západu", + "showCurrent": "Zobrazit aktuální pozici Měsíce", + "showLegend": "Zobrazit legendu", + "showHighest": "Zobrazit nejvyšší pozici Měsíce", + "calendarModal": "Kalendář bude zobrazen v popup okně", + "hideButtons": "Tlačítka v záhlaví budou skryta", + "useDefault": "Použijte výchozí šířku a délku", + "useEntity": "Použijte šířku a délku entity", + "useCustom": "Použijte vlastní šířku a délku", + "hideLabel": "Skrýt popisek v kompaktním zobrazení" + }, "placeHolder": { "latitude": "Zadejte zeměpisnou šířku", "longitude": "Zadejte zeměpisnou délku", diff --git a/src/languages/da.json b/src/languages/da.json index f201d32..0c0b303 100644 --- a/src/languages/da.json +++ b/src/languages/da.json @@ -117,7 +117,6 @@ "showBackground": "Vis baggrund", "timeFormat": "12-timers tidsformat", "mileUnit": "Milenhed", - "hideHeader": "Skjul header", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Markører for opgang/nedgang", @@ -125,6 +124,25 @@ "showLegend": "Vis legend", "showHighest": "Vis højeste Måneposition", "calendarModal": "Kalender popup", + "hideButtons": "Skjul knapper", + "titleHelper": { + "compactView": "Vis en kompakt visning", + "showBackground": "Vis en baggrund", + "timeFormat": "Indstil et tidsformat (12-timers eller 24-timers)", + "mileUnit": "Kilometer vil blive brugt, hvis deaktiveret", + "yTicks": "Vis Y-akse ticks", + "xTicks": "Vis X-akse ticks", + "showTime": "Vis tidspunkter for opgang/nedgang", + "showCurrent": "Vis nuværende måneposition", + "showLegend": "Vis en forklaring", + "showHighest": "Vis højeste måneposition", + "calendarModal": "Kalenderen vises i en popup", + "hideButtons": "Headerknapperne bliver skjult", + "useDefault": "Brug systemets bredde og længde", + "useEntity": "Brug enheds bredde og længde", + "useCustom": "Brug tilpasset bredde og længde", + "hideLabel": "Skjul etiket i kompakt visning" + }, "placeHolder": { "latitude": "Indtast breddegrad", "longitude": "Indtast længdegrad", diff --git a/src/languages/de.json b/src/languages/de.json index 2c8b8f4..bf7fa07 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -117,7 +117,6 @@ "showBackground": "Hintergrund einblenden", "timeFormat": "12-Stunden-Zeitformat", "mileUnit": "Meilen als Maßeinheit", - "hideHeader": "Header ausblenden", "yTicks": "Y-Achse beschriften", "xTicks": "X-Achse beschriften", "showTime": "Zeitmarken für Auf-/Untergang", @@ -125,6 +124,25 @@ "showLegend": "Legende einblenden", "showHighest": "Kulmination einblenden", "calendarModal": "Kalender-Popup", + "hideButtons": "Schaltflächen ausblenden", + "titleHelper": { + "compactView": "Kompakte Ansicht anzeigen", + "showBackground": "Hintergrund anzeigen", + "timeFormat": "Zeitformat einstellen (12-Stunden oder 24-Stunden)", + "mileUnit": "Kilometer werden verwendet, wenn deaktiviert", + "yTicks": "Y-Achsen-Ticks anzeigen", + "xTicks": "X-Achsen-Ticks anzeigen", + "showTime": "Aufgangs-/Untergangszeit anzeigen", + "showCurrent": "Aktuelle Mondposition anzeigen", + "showLegend": "Eine Legende anzeigen", + "showHighest": "Höchste Mondposition anzeigen", + "calendarModal": "Der Kalender wird in einem Popup angezeigt", + "hideButtons": "Die Header-Schaltflächen werden ausgeblendet", + "useDefault": "Verwenden Sie die Standard-Breitengrad- und Längengradwerte", + "useEntity": "Verwenden Sie Breitengrad und Längengrad der Entität", + "useCustom": "Verwenden Sie benutzerdefinierte Breitengrad- und Längengradwerte", + "hideLabel": "Etikett in kompakter Ansicht ausblenden" + }, "placeHolder": { "latitude": "Breitengrad eingeben", "longitude": "Längengrad eingeben", diff --git a/src/languages/en.json b/src/languages/en.json index a588078..7ac3650 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -117,7 +117,6 @@ "showBackground": "Show background", "timeFormat": "12-hour time format", "mileUnit": "Mile unit", - "hideHeader": "Hide header", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Set/Rise time markers", @@ -125,6 +124,25 @@ "showLegend": "Display legend", "showHighest": "Display highest Moon position", "calendarModal": "Calendar popup", + "hideButtons": "Hide buttons", + "titleHelper": { + "compactView": "Show a compact view", + "showBackground": "Show a background", + "timeFormat": "Set a time format (12-hour or 24-hour)", + "mileUnit": "Kilometer will be used if disabled", + "yTicks": "Show a Y-axis ticks", + "xTicks": "Show a X-axis ticks", + "showTime": "Show set/rise time markers", + "showCurrent": "Show current Moon position", + "showLegend": "Display a legend", + "showHighest": "Display highest Moon position", + "calendarModal": "Calendar will be displayed in a popup", + "hideButtons": "The header buttons will be hidden", + "useDefault": "Use system latitude and longitude", + "useEntity": "Use entity latitude and longitude", + "useCustom": "Use custom latitude and longitude", + "hideLabel": "Hide label in compact view" + }, "placeHolder": { "latitude": "Enter latitude", "longitude": "Enter longitude", diff --git a/src/languages/es.json b/src/languages/es.json index b491d57..62ae628 100644 --- a/src/languages/es.json +++ b/src/languages/es.json @@ -117,7 +117,6 @@ "showBackground": "Mostrar fondo", "timeFormat": "Formato de 12 horas", "mileUnit": "Unidad de milla", - "hideHeader": "Ocultar encabezado", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Marcadores de tiempo de salida/puesta", @@ -125,6 +124,25 @@ "showLegend": "Mostrar leyenda", "showHighest": "Mostrar la posición más alta de la Luna", "calendarModal": "Calendario popup", + "hideButtons": "Ocultar botones", + "titleHelper": { + "compactView": "Mostrar una vista compacta", + "showBackground": "Mostrar un fondo", + "timeFormat": "Configurar un formato de hora (12 horas o 24 horas)", + "mileUnit": "Se utilizarán kilómetros si está deshabilitado", + "yTicks": "Mostrar ticks del eje Y", + "xTicks": "Mostrar ticks del eje X", + "showTime": "Mostrar marcadores de hora de salida/puesta", + "showCurrent": "Mostrar la posición actual de la Luna", + "showLegend": "Mostrar una leyenda", + "showHighest": "Mostrar la posición más alta de la Luna", + "calendarModal": "El calendario se mostrará en una ventana emergente", + "hideButtons": "Los botones del encabezado estarán ocultos", + "useDefault": "Usar latitud y longitud del sistema", + "useEntity": "Usar latitud y longitud de la entidad", + "useCustom": "Usar latitud y longitud personalizadas", + "hideLabel": "Ocultar etiqueta en vista compacta" + }, "placeHolder": { "latitude": "Ingresar latitud", "longitude": "Ingresar longitud", diff --git a/src/languages/fr.json b/src/languages/fr.json index c8eaed8..e79f6e6 100644 --- a/src/languages/fr.json +++ b/src/languages/fr.json @@ -117,7 +117,6 @@ "showBackground": "Afficher fond d'écran", "timeFormat": "Format 12h", "mileUnit": "Unité de mille", - "hideHeader": "Masquer l'en-tête", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Marqueurs de temps de lever/coucher", @@ -125,6 +124,25 @@ "showLegend": "Afficher la légende", "showHighest": "Afficher la position la plus haute de la Lune", "calendarModal": "Calendrier popup", + "hideButtons": "Masquer les boutons", + "titleHelper": { + "compactView": "Afficher une vue compacte", + "showBackground": "Afficher un arrière-plan", + "timeFormat": "Définir un format d'heure (12 heures ou 24 heures)", + "mileUnit": "Les kilomètres seront utilisés si désactivé", + "yTicks": "Afficher les graduations de l'axe Y", + "xTicks": "Afficher les graduations de l'axe X", + "showTime": "Afficher les marqueurs de lever/coucher", + "showCurrent": "Afficher la position actuelle de la Lune", + "showLegend": "Afficher une légende", + "showHighest": "Afficher la position la plus haute de la Lune", + "calendarModal": "Le calendrier sera affiché dans une fenêtre popup", + "hideButtons": "Les boutons de l'en-tête seront masqués", + "useDefault": "Utiliser la latitude et la longitude système", + "useEntity": "Utiliser la latitude et la longitude de l'entité", + "useCustom": "Utiliser une latitude et une longitude personnalisées", + "hideLabel": "Masquer l'étiquette en vue compacte" + }, "placeHolder": { "latitude": "Entrer latitude", "longitude": "Entrer longitude", diff --git a/src/languages/id.json b/src/languages/id.json index 3a3d541..986e1f3 100644 --- a/src/languages/id.json +++ b/src/languages/id.json @@ -117,7 +117,6 @@ "showBackground": "Tampilkan gambar latar belakang", "timeFormat": "Format waktu 12 jam", "mileUnit": "Satuan mil", - "hideHeader": "Sembunyikan header", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Penanda waktu terbit/terbenam", @@ -125,6 +124,25 @@ "showLegend": "Tampilkan legenda", "showHighest": "Tampilkan posisi Bulan tertinggi", "calendarModal": "Popup kalender", + "hideButtons": "Sembunyikan tombol", + "titleHelper": { + "compactView": "Tampilkan tampilan ringkas", + "showBackground": "Tampilkan latar belakang", + "timeFormat": "Atur format waktu (12 jam atau 24 jam)", + "mileUnit": "Kilometer akan digunakan jika dinonaktifkan", + "yTicks": "Tampilkan ticks sumbu Y", + "xTicks": "Tampilkan ticks sumbu X", + "showTime": "Tampilkan penanda waktu terbit/tenggelam", + "showCurrent": "Tampilkan posisi Bulan saat ini", + "showLegend": "Tampilkan legenda", + "showHighest": "Tampilkan posisi tertinggi Bulan", + "calendarModal": "Kalender akan ditampilkan dalam popup", + "hideButtons": "Tombol header akan disembunyikan", + "useDefault": "Gunakan lintang dan bujur sistem", + "useEntity": "Gunakan lintang dan bujur entitas", + "useCustom": "Gunakan lintang dan bujur kustom", + "hideLabel": "Sembunyikan label dalam tampilan ringkas" + }, "placeHolder": { "latitude": "Masukkan garis lintang", "longitude": "Masukkan garis bujur", diff --git a/src/languages/it.json b/src/languages/it.json index dde2880..757c164 100644 --- a/src/languages/it.json +++ b/src/languages/it.json @@ -117,7 +117,6 @@ "showBackground": "Mostra sfondo", "timeFormat": "Formato a 12 ore", "mileUnit": "Unità di miglio", - "hideHeader": "Nascondi intestazione", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Indicatori di tempo di alba/tramonto", @@ -125,6 +124,25 @@ "showLegend": "Mostra leggenda", "showHighest": "Mostra la posizione più alta della Luna", "calendarModal": "Popup calendario", + "hideButtons": "Nascondi pulsanti", + "titleHelper": { + "compactView": "Mostra una vista compatta", + "showBackground": "Mostra uno sfondo", + "timeFormat": "Imposta un formato orario (12 ore o 24 ore)", + "mileUnit": "Verranno utilizzati i chilometri se disabilitato", + "yTicks": "Mostra i tick dell'asse Y", + "xTicks": "Mostra i tick dell'asse X", + "showTime": "Mostra i marcatori dell'ora di alba/tramonto", + "showCurrent": "Mostra la posizione attuale della Luna", + "showLegend": "Mostra una legenda", + "showHighest": "Mostra la posizione più alta della Luna", + "calendarModal": "Il calendario verrà visualizzato in un popup", + "hideButtons": "I pulsanti dell'intestazione saranno nascosti", + "useDefault": "Usa latitudine e longitudine di sistema", + "useEntity": "Usa latitudine e longitudine dell'entità", + "useCustom": "Usa latitudine e longitudine personalizzate", + "hideLabel": "Nascondi etichetta in vista compatta" + }, "placeHolder": { "latitude": "Inserisci Latitudine", "longitude": "Inserisci Longitudine", diff --git a/src/languages/nl.json b/src/languages/nl.json index 280dc7a..cab4cad 100644 --- a/src/languages/nl.json +++ b/src/languages/nl.json @@ -117,7 +117,6 @@ "showBackground": "toon achtergrond", "timeFormat": "12-uur formaat", "mileUnit": "Mijleenheid", - "hideHeader": "Verberg koptekst", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Tijdmarkeringen van opkomst/ondergang", @@ -125,6 +124,25 @@ "showLegend": "Toon legenda", "showHighest": "Toon hoogste Maanpositie", "calendarModal": "Kalender popup", + "hideButtons": "Knoppen verbergen", + "titleHelper": { + "compactView": "Toon een compacte weergave", + "showBackground": "Toon een achtergrond", + "timeFormat": "Stel een tijdformaat in (12-uur of 24-uur)", + "mileUnit": "Kilometers worden gebruikt als uitgeschakeld", + "yTicks": "Toon Y-as ticks", + "xTicks": "Toon X-as ticks", + "showTime": "Toon opkomst/ondergang tijdmarkeringen", + "showCurrent": "Toon huidige maanpositie", + "showLegend": "Toon een legenda", + "showHighest": "Toon hoogste maanpositie", + "calendarModal": "De kalender wordt weergegeven in een popup", + "hideButtons": "De kopteksten worden verborgen", + "useDefault": "Gebruik systeem breedte- en lengtegraad", + "useEntity": "Gebruik breedte- en lengtegraad van entiteit", + "useCustom": "Gebruik aangepaste breedte- en lengtegraad", + "hideLabel": "Label verbergen in compacte weergave" + }, "placeHolder": { "latitude": "Enter breedtegraad", "longitude": "Enter lengtegraad", diff --git a/src/languages/pt.json b/src/languages/pt.json index 8fad792..7425ea4 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -117,7 +117,6 @@ "showBackground": "Mostrar plano de fundo", "timeFormat": "Formato de 12 horas", "mileUnit": "Unidade de milha", - "hideHeader": "Ocultar cabeçalho", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Marcadores de tempo de nascer/pôr do sol", @@ -125,6 +124,25 @@ "showLegend": "Mostrar legenda", "showHighest": "Exibir a posição mais alta da Lua", "calendarModal": "Calendário popup", + "hideButtons": "Ocultar botões", + "titleHelper": { + "compactView": "Mostrar uma visualização compacta", + "showBackground": "Mostrar um fundo", + "timeFormat": "Definir um formato de hora (12 horas ou 24 horas)", + "mileUnit": "Quilômetros serão usados se desativado", + "yTicks": "Mostrar ticks do eixo Y", + "xTicks": "Mostrar ticks do eixo X", + "showTime": "Mostrar marcadores de hora de nascer/pôr do sol", + "showCurrent": "Mostrar posição atual da Lua", + "showLegend": "Mostrar uma legenda", + "showHighest": "Mostrar a posição mais alta da Lua", + "calendarModal": "O calendário será exibido em um popup", + "hideButtons": "Os botões do cabeçalho serão ocultados", + "useDefault": "Usar latitude e longitude do sistema", + "useEntity": "Usar latitude e longitude da entidade", + "useCustom": "Usar latitude e longitude personalizadas", + "hideLabel": "Ocultar rótulo na visualização compacta" + }, "placeHolder": { "latitude": "Inserir latitude", "longitude": "Inserir longitude", diff --git a/src/languages/ru.json b/src/languages/ru.json index c1c255e..8f47619 100644 --- a/src/languages/ru.json +++ b/src/languages/ru.json @@ -117,7 +117,6 @@ "showBackground": "Показать фон", "timeFormat": "12-часовой формат времени", "mileUnit": "Единица измерения миль", - "hideHeader": "Скрыть заголовок", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Маркеры времени восхода/заката", @@ -125,6 +124,25 @@ "showLegend": "Показать легенду", "showHighest": "Показать высшее положение Луны", "calendarModal": "Календарь popup", + "hideButtons": "Скрыть кнопки", + "titleHelper": { + "compactView": "Показать компактный вид", + "showBackground": "Показать фон", + "timeFormat": "Установить формат времени (12-часовой или 24-часовой)", + "mileUnit": "Километры будут использоваться, если отключено", + "yTicks": "Показать метки оси Y", + "xTicks": "Показать метки оси X", + "showTime": "Показать время восхода/заката", + "showCurrent": "Показать текущую позицию Луны", + "showLegend": "Показать легенду", + "showHighest": "Показать наивысшую позицию Луны", + "calendarModal": "Календарь будет отображен в всплывающем окне", + "hideButtons": "Кнопки заголовка будут скрыты", + "useDefault": "Использовать системные широту и долготу", + "useEntity": "Использовать широту и долготу объекта", + "useCustom": "Использовать пользовательские широту и долготу", + "hideLabel": "Скрыть метку в компактном виде" + }, "placeHolder": { "latitude": "Введите широту", "longitude": "Введите долготу", diff --git a/src/languages/sk.json b/src/languages/sk.json index 87ecd57..12d3602 100644 --- a/src/languages/sk.json +++ b/src/languages/sk.json @@ -117,7 +117,6 @@ "showBackground": "Zobraziť pozadie", "timeFormat": "12-hodinový formát času", "mileUnit": "Jednotka míle", - "hideHeader": "Skryť hlavičku", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Značky času východu/západu", @@ -125,6 +124,25 @@ "showLegend": "Zobraziť legendu", "showHighest": "Zobraziť najvyššiu polohu Mesiaca", "calendarModal": "Kalendárové popup", + "hideButtons": "Skryť tlačidlá", + "titleHelper": { + "compactView": "Zobraziť kompaktný režim", + "showBackground": "Zobraziť pozadie", + "timeFormat": "Nastaviť formát času (12-hodinový alebo 24-hodinový)", + "mileUnit": "Kilometre sa použijú, ak je zakázané", + "yTicks": "Zobraziť značky na osi Y", + "xTicks": "Zobraziť značky na osi X", + "showTime": "Zobraziť značky času východu/západu", + "showCurrent": "Zobraziť aktuálnu polohu Mesiaca", + "showLegend": "Zobraziť legendu", + "showHighest": "Zobraziť najvyššiu polohu Mesiaca", + "calendarModal": "Kalendár sa zobrazí v kontextovom okne", + "hideButtons": "Tlačidlá hlavičky budú skryté", + "useDefault": "Použiť systémovú zemepisnú šírku a dĺžku", + "useEntity": "Použiť zemepisnú šírku a dĺžku entity", + "useCustom": "Použiť vlastnú zemepisnú šírku a dĺžku", + "hideLabel": "Skryť popis v kompaktnej zobrazení" + }, "placeHolder": { "latitude": "Zadajte zemepisnú šírku", "longitude": "Zadajte zemepisnú dĺžku", diff --git a/src/localize/string.json b/src/localize/string.json index a588078..7ac3650 100644 --- a/src/localize/string.json +++ b/src/localize/string.json @@ -117,7 +117,6 @@ "showBackground": "Show background", "timeFormat": "12-hour time format", "mileUnit": "Mile unit", - "hideHeader": "Hide header", "yTicks": "Y-axis ticks", "xTicks": "X-axis ticks", "showTime": "Set/Rise time markers", @@ -125,6 +124,25 @@ "showLegend": "Display legend", "showHighest": "Display highest Moon position", "calendarModal": "Calendar popup", + "hideButtons": "Hide buttons", + "titleHelper": { + "compactView": "Show a compact view", + "showBackground": "Show a background", + "timeFormat": "Set a time format (12-hour or 24-hour)", + "mileUnit": "Kilometer will be used if disabled", + "yTicks": "Show a Y-axis ticks", + "xTicks": "Show a X-axis ticks", + "showTime": "Show set/rise time markers", + "showCurrent": "Show current Moon position", + "showLegend": "Display a legend", + "showHighest": "Display highest Moon position", + "calendarModal": "Calendar will be displayed in a popup", + "hideButtons": "The header buttons will be hidden", + "useDefault": "Use system latitude and longitude", + "useEntity": "Use entity latitude and longitude", + "useCustom": "Use custom latitude and longitude", + "hideLabel": "Hide label in compact view" + }, "placeHolder": { "latitude": "Enter latitude", "longitude": "Enter longitude", diff --git a/src/types/config.ts b/src/types/config.ts index 1b62dfa..7b65788 100644 --- a/src/types/config.ts +++ b/src/types/config.ts @@ -34,22 +34,22 @@ interface HorizonGraphConfig { export interface LunarPhaseCardConfig extends LovelaceCardConfig { type: string; entity?: string; - use_default?: boolean; - use_custom?: boolean; - use_entity?: boolean; - show_background?: boolean; - compact_view?: boolean; '12hr_format'?: boolean; - mile_unit?: boolean; - number_decimals?: number; - hide_header?: boolean; calendar_modal?: boolean; + compact_view?: boolean; default_card?: PageType.BASE | PageType.CALENDAR | PageType.HORIZON; - selected_language: string; - moon_position?: 'left' | 'right'; - southern_hemisphere?: boolean; + hide_buttons?: boolean; latitude: number; longitude: number; + mile_unit?: boolean; + moon_position?: 'left' | 'right'; + number_decimals?: number; + selected_language: string; + show_background?: boolean; + southern_hemisphere?: boolean; + use_custom?: boolean; + use_default?: boolean; + use_entity?: boolean; location?: LocationAddress; font_customize: FontCustomStyles; graph_config?: HorizonGraphConfig; diff --git a/src/types/default-config.ts b/src/types/default-config.ts index 1daa9d3..8ff8daf 100644 --- a/src/types/default-config.ts +++ b/src/types/default-config.ts @@ -4,20 +4,20 @@ import { LunarPhaseCardConfig } from './config'; export const defaultConfig: Partial = { type: 'custom:lunar-phase-card', entity: '', - use_default: true, - use_custom: false, - use_entity: false, - show_background: true, - selected_language: 'system', - compact_view: false, '12hr_format': false, - mile_unit: false, - hide_header: false, calendar_modal: false, + compact_view: false, default_card: PageType.BASE, + hide_buttons: false, + mile_unit: false, moon_position: 'left', - southern_hemisphere: false, number_decimals: 2, + selected_language: 'system', + show_background: true, + southern_hemisphere: false, + use_custom: false, + use_default: true, + use_entity: false, graph_config: { graph_type: 'default', y_ticks: false, From e81d5c7c090e9e6d140b802a2ffacf6358b18d6d Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 02:49:09 +0100 Subject: [PATCH 15/32] refactor: Update moon-horizon-dynamic.ts to adjust chart tooltip and font sizes --- src/components/moon-horizon-chart.ts | 54 ++++++++++++-------------- src/components/moon-horizon-dynamic.ts | 37 ++++++++++-------- 2 files changed, 45 insertions(+), 46 deletions(-) diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index 09c42eb..d71351f 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -54,19 +54,9 @@ export class LunarHorizonChart extends LitElement { } } - // protected shouldUpdate(_changedProperties: PropertyValues): boolean { - // if (_changedProperties.has('moon')) { - // if (this._chart) { - // this._chart.data = this.chartData; - // this._chart.update('none'); - // } - // } - // return true; - // } - get cardHeight(): number { let height = this.cardWidth * 0.5 - 96; - height = this.card.config.hide_header ? height + 48 : height; + height = this.card.config.hide_buttons ? height + 48 : height; return height; } @@ -220,7 +210,7 @@ export class LunarHorizonChart extends LitElement { // Hover on point onHover: (_event, elements) => { if (elements.length > 0) { - // this.hoverOnChart = true; + this.hoverOnChart = true; const element = elements[0]; const xTimeNum = element.element.getProps(['raw'], true).raw.x; this.handlePointHover(xTimeNum); @@ -234,7 +224,7 @@ export class LunarHorizonChart extends LitElement { // Add event listeners ctx.addEventListener('mouseout', () => { this.hoverTimeout = window.setTimeout(() => { - // this.hoverOnChart = false; + this.hoverOnChart = false; this._chart?.update(); }, HOVER_TIMEOUT); // Reset the selected date @@ -417,8 +407,8 @@ export class LunarHorizonChart extends LitElement { // Scales const scales = {} as ScaleOptions; scales['y'] = { - suggestedMin: sugestedYMin, - suggestedMax: sugestedYMax, + suggestedMin: sugestedYMin - 10, + suggestedMax: sugestedYMax + 10, ticks: { ...ticksOptions, display: graphConfig?.y_ticks || false, @@ -453,15 +443,6 @@ export class LunarHorizonChart extends LitElement { plugins['legend'] = { display: false, - align: graphConfig?.legend_align || 'center', - position: graphConfig?.legend_position || 'bottom', - labels: { - usePointStyle: false, - boxWidth: 0, - boxHeight: 0, - padding: 4, - color: secondaryTextColor, - }, }; plugins['tooltip'] = { @@ -524,6 +505,8 @@ export class LunarHorizonChart extends LitElement { padding: { left: -8, right: -8, + top: 0, + bottom: 0, }, }; // Options @@ -616,7 +599,11 @@ export class LunarHorizonChart extends LitElement { private timeMarkerPlugin = (): Plugin => { const timeMarkers = this.moon.timeMarkers; const { secondaryTextColor, fillColor } = this.cssColors; - const textFontSize = '12px Arial'; + const fontSize = { + primary: '0.9rem Arial', + secondary: '0.8rem Arial', + }; + const minValue = this.todayData.minMaxY.sugestedYMin; // Pre-load SVG images as Image objects const moonUpSvg = new Image(); const moonDownSvg = new Image(); @@ -629,9 +616,10 @@ export class LunarHorizonChart extends LitElement { encodeURIComponent(MOON_SET_ICON.replace('currentcolor', secondaryTextColor)); const getMaxValueText = (ctx: CanvasRenderingContext2D, isUp: string, formatedTime: string, direction: string) => { - ctx.font = textFontSize; + ctx.font = fontSize.primary; const setRiseWidth = ctx.measureText(isUp).width; const timeWidth = ctx.measureText(formatedTime).width; + ctx.font = fontSize.secondary; const directionWidth = ctx.measureText(direction).width; return Math.max(setRiseWidth, timeWidth, directionWidth); }; @@ -679,7 +667,7 @@ export class LunarHorizonChart extends LitElement { ctx.fillStyle = secondaryTextColor; ctx.textAlign = textAlign; - ctx.font = textFontSize; + ctx.font = fontSize.primary; ctx.filter = this.hoverOnChart ? 'opacity(0.4)' : 'opacity(1)'; // Load and draw the SVG based on `isUp` const imgToDraw = isUp ? moonUpSvg : moonDownSvg; @@ -688,14 +676,18 @@ export class LunarHorizonChart extends LitElement { // Draw the time and direction text if (isUp) { + ctx.font = fontSize.secondary; ctx.fillText(direction, xOffset, y - lineOffset - 10); + ctx.font = fontSize.primary; ctx.fillText(formatedTime, xOffset, y - lineOffset - 27); } else { + ctx.font = fontSize.secondary; ctx.fillText(direction, xOffset, y + lineOffset + 27); + ctx.font = fontSize.primary; ctx.fillText(formatedTime, xOffset, y + lineOffset + 10); } // Draw the icon - ctx.drawImage(imgToDraw, iconOffset, isUp ? y - lineOffset - 37 : y + lineOffset - 5, 18, 18); + ctx.drawImage(imgToDraw, iconOffset, isUp ? y - lineOffset - 40 : y + lineOffset - 5, 18, 18); ctx.restore(); }; @@ -706,7 +698,7 @@ export class LunarHorizonChart extends LitElement { if (timeDataSet.type === null || timeDataSet.hidden) return; const { ctx, - chartArea: { left, right, bottom, top }, + chartArea: { left, right }, scales: { x, y }, } = chart; // Iterate over each time marker and draw if necessary @@ -719,8 +711,10 @@ export class LunarHorizonChart extends LitElement { const xPosition = x.getPixelForValue(index) + 2; const yPosition = y.getPixelForValue(0); + const minYposition = y.getPixelForValue(minValue); + const lineOffset = Math.round((minYposition - yPosition) / 2); - const lineOffset = isUp ? Math.round((yPosition - top) / 4) : Math.round((bottom - yPosition) / 2); + // const lineOffset = isUp ? Math.round((yPosition - top) / 4) : Math.round((bottom - yPosition) / 2); const maxTextWidth = getMaxValueText(ctx, isUp ? 'Rise' : 'Set', formatedTime, direction); let textAlign: CanvasTextAlign = 'start'; diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index 535a781..8185bb2 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -58,7 +58,7 @@ export class LunarHorizonDynamic extends LitElement { get cardHeight(): number { let height = this.cardWidth * 0.5; - height = this.card.config.hide_header ? height : height - 48; + height = this.card.config.hide_buttons ? height : height - 48; return height; } @@ -248,6 +248,7 @@ export class LunarHorizonDynamic extends LitElement { private _getChartOptions(): ChartOptions { const elevationLabel = this.card.localize('card.altitude'); const azimuthLabel = this.card.localize('card.azimuth'); + const { DEFAULT_PRIMARY_COLOR } = this.CSS_COLOR; const formatedTitle = (time: number) => { const dateStr = formatDateShort(new Date(time), this._locale); return `${dateStr}`; @@ -256,7 +257,7 @@ export class LunarHorizonDynamic extends LitElement { const direction = chartData.map((data) => data.moon.azimuth); const values = [...Object.values(chartData).map((data) => data.moon.altitude)]; const minMax = { - suggestedMin: Math.round(Math.min(...values) - 10), + suggestedMin: Math.round(Math.min(...values) - 30), suggestedMax: Math.round(Math.max(...values) + 30), }; const SHARED_TICKS_Y = { @@ -309,15 +310,17 @@ export class LunarHorizonDynamic extends LitElement { }; plugins['tooltip'] = { - titleColor: CHART_COLOR.SECONDARY_TEXT, + titleColor: DEFAULT_PRIMARY_COLOR, displayColors: false, - padding: 10, + // padding: 10, callbacks: { - beforeTitle: function (tooltipItem) { + title: function (tooltipItem) { const time = chartData[tooltipItem[0].dataIndex].timeLabel; const formatedDate = formatedTitle(time); - return formatedDate; + const formatedTime = tooltipItem[0].label; + return `${formatedDate} - ${formatedTime}`; }, + label: function (tooltipItem) { const itemIndex = tooltipItem.parsed.x; const directionValue = direction[itemIndex]; @@ -350,7 +353,7 @@ export class LunarHorizonDynamic extends LitElement { private _nowPosition(): Plugin { const chartData = this.todayData.chartData; const emoji = this.todayData.moonIllumination.phase.emoji; - const emojiFontSize = '18px Arial'; + const emojiFontSize = '14px Arial'; const timeLabels = chartData.map((data) => data.timeLabel); const now = this._date; const closestTime = timeLabels.reduce((a, b) => @@ -391,7 +394,7 @@ export class LunarHorizonDynamic extends LitElement { // Draw the time label below the line ctx.font = '12px Arial'; ctx.fillStyle = CHART_COLOR.PRIMARY_TEXT; - ctx.fillText(nowText, xLabel - width / 2, bottom - 10); + ctx.fillText(nowText, xLabel - width / 2, bottom - 5); ctx.restore(); }, @@ -546,7 +549,9 @@ export class LunarHorizonDynamic extends LitElement { primary: '0.9rem Arial', secondary: '0.8rem Arial', }; - + const chartData = this.todayData.chartData; + const values = [...Object.values(chartData).map((data) => data.moon.altitude)]; + const minValue = Math.min(...values); const isPast = (time: number): boolean => new Date(time) < this._date; const calculateDuration = (time: number): string => { @@ -589,11 +594,7 @@ export class LunarHorizonDynamic extends LitElement { if (relativeTime) drawText(relativeTime, 35, fontSize.secondary); }; - const drawMarkers = ( - chart: Chart, - times: { time: string; index: number; originalTime: number }[], - lineHeight: number - ) => { + const drawMarkers = (chart: Chart, times: { time: string; index: number; originalTime: number }[]) => { const { ctx, scales: { x, y }, @@ -604,6 +605,7 @@ export class LunarHorizonDynamic extends LitElement { const yPos = y.getPixelForValue(0); const color = isPast(time.originalTime) ? labelColors.lightColor : labelColors.baseColor; const relativeTime = isPast(time.originalTime) ? '' : calculateDuration(time.originalTime); + const lineHeight = (y.getPixelForValue(minValue) - yPos) / 2; drawPoint(ctx, xPos, yPos, color, time.time, lineHeight, relativeTime); }); }; @@ -612,8 +614,7 @@ export class LunarHorizonDynamic extends LitElement { id: 'timesMarkers', beforeDatasetDraw: (chart: Chart) => { const moonTimes = this.moon.timeData.moon; - - drawMarkers(chart, moonTimes, 20); + drawMarkers(chart, moonTimes); }, }; } @@ -622,13 +623,17 @@ export class LunarHorizonDynamic extends LitElement { return { id: 'expandChartArea', afterRender: (chart: Chart) => { + chart.chartArea.left = 0; chart.chartArea.right = this.cardWidth; chart.chartArea.bottom = this.cardHeight; + chart.chartArea.top = 0; }, afterUpdate: (chart: Chart) => { + chart.chartArea.left = 0; chart.chartArea.right = this.cardWidth; chart.chartArea.bottom = this.cardHeight; + chart.chartArea.top = 0; }, }; }; From 9853d966bfa0dcfd832f2c4391e4991117b64fb5 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 02:49:20 +0100 Subject: [PATCH 16/32] refactor: Update moon-star-field.ts to improve star size and animation --- src/components/moon-star-field.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/components/moon-star-field.ts b/src/components/moon-star-field.ts index 9c788d2..592ab1c 100644 --- a/src/components/moon-star-field.ts +++ b/src/components/moon-star-field.ts @@ -13,13 +13,6 @@ export class LunarStarField extends LitElement { this._createStarfield(); } - protected updated(_changedProperties: PropertyValues): void { - super.updated(_changedProperties); - if (_changedProperties.has('_card')) { - this._createStarfield(); - } - } - static get styles(): CSSResultGroup { return [ css` @@ -34,6 +27,7 @@ export class LunarStarField extends LitElement { z-index: 0; } + .big-star, .star { position: absolute; width: 2px; @@ -44,6 +38,11 @@ export class LunarStarField extends LitElement { animation: blink 1s infinite ease-in-out; } + .big-star { + width: 6px; + height: 6px; + } + @keyframes blink { 0%, 100% { From c7714d963ef04cd2387570b4cf82f35080cbc592 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 02:49:44 +0100 Subject: [PATCH 17/32] refactor: Update moon.ts to round suggested Y values for altitude chart --- src/utils/moon.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils/moon.ts b/src/utils/moon.ts index 38b8adb..d0410cc 100644 --- a/src/utils/moon.ts +++ b/src/utils/moon.ts @@ -200,8 +200,8 @@ export class Moon { const timeLabels = Object.values(dataWithXY).map((item) => item.x); const altitudeValues = Object.values(dataWithXY).map((item) => item.y); const minMaxY = { - sugestedYMax: Math.round(Math.max(...altitudeValues) + 10), - sugestedYMin: Math.round(Math.min(...altitudeValues) - 10), + sugestedYMax: Math.round(Math.max(...altitudeValues)), + sugestedYMin: Math.round(Math.min(...altitudeValues)), }; const dataCotent = { From 081b895164ad2676db88e6d8bb93a437ed04e766 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 02:49:50 +0100 Subject: [PATCH 18/32] refactor: Update CSS to improve dynamic graph display --- src/css/style.css | 16 +------- src/lunar-phase-card.ts | 87 +++++++++++++++++++++++------------------ 2 files changed, 52 insertions(+), 51 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index e78aabc..d437916 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -59,22 +59,10 @@ ha-card.--reverse #main-content[padding] { padding-left: 1.2rem; } -/* ha-card.--default-header .lunar-card-content { - padding: 0.5rem; -} */ - -/* ha-card.--default-header .lunar-card-header { - padding-top: 8px; -} */ - -ha-card.--dynamic-graph .lunar-card-content { - padding: 0; - transition: none; - /* display: block; */ -} - +ha-card.--dynamic-graph .lunar-card-content, ha-card.--horizon .lunar-card-content { display: block; + transition: none; /* padding: 8px 0 12px; */ } diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 1a8dfa8..b9d43e8 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -166,8 +166,8 @@ export class LunarPhaseCard extends LitElement { protected async firstUpdated(_changedProperties: PropertyValues): Promise { super.firstUpdated(_changedProperties); this._handleFirstRender(); - this.measureCard(); await new Promise((resolve) => setTimeout(resolve, 0)); + this.measureCard(); _setEventListeners(this as any); this._computeStyles(); } @@ -197,7 +197,6 @@ export class LunarPhaseCard extends LitElement { } } if (changedProps.has('_dialogOpen')) { - console.log('dialog open', this._dialogOpen); this._attachEventListeners(); this.updateBodyScroll(); } @@ -220,7 +219,7 @@ export class LunarPhaseCard extends LitElement { } get _headerHidden(): boolean { - return this.config.hide_header || false; + return this.config.hide_buttons || false; } get _locale(): FrontendLocaleData { @@ -257,44 +256,48 @@ export class LunarPhaseCard extends LitElement { return parentElementClassPreview || false; } + private get isGraphEditor(): Boolean { + const value = sessionStorage.getItem('activeGraphEditor'); + return value === 'true'; + } + private _handleFirstRender() { + this._cardReady = false; + + const _setActiveCard = (card: PageType) => { + this._activeCard = card; + this._cardReady = true; + }; + + const _setCardTransition = (initialCard: PageType, finalCard: PageType, delay = 0) => { + setTimeout(() => { + this._activeCard = initialCard; + setTimeout(() => { + this._activeCard = finalCard; + }, delay); + }, 0); + this._cardReady = true; + }; + if (this.isEditorPreview) { - this._cardReady = false; const activeGraphEditor = this.isGraphEditor; + if (activeGraphEditor && this._activeCard !== PageType.HORIZON) { - this._activeCard = PageType.HORIZON; - this._cardReady = true; + _setActiveCard(PageType.HORIZON); } else if (!activeGraphEditor && this._defaultCard === PageType.HORIZON) { - setTimeout(() => { - this._activeCard = PageType.BASE; - setTimeout(() => { - this._activeCard = PageType.HORIZON; - }, 150); - }, 0); - this._cardReady = true; + _setCardTransition(PageType.BASE, PageType.HORIZON, 50); } else { - this._activeCard = this._defaultCard; - this._cardReady = true; + _setActiveCard(this._defaultCard); } } else { - if (PageType.HORIZON === this._defaultCard) { - this._activeCard = PageType.BASE; - setTimeout(() => { - this._activeCard = PageType.HORIZON; - }, 0); - this._cardReady = true; + if (this._defaultCard === PageType.HORIZON) { + _setCardTransition(PageType.BASE, PageType.HORIZON); } else { - this._activeCard = this._defaultCard; - this._cardReady = true; + _setActiveCard(this._defaultCard); } } } - private get isGraphEditor(): Boolean { - const value = sessionStorage.getItem('activeGraphEditor'); - return value === 'true'; - } - async startRefreshInterval(): Promise { if (!this._connected || this._activeCard === PageType.CALENDAR) { this.clearRefreshInterval(); @@ -303,6 +306,17 @@ export class LunarPhaseCard extends LitElement { if (this._refreshInterval !== undefined) { clearInterval(this._refreshInterval); } + + const refreshData = () => { + if (this._state !== MoonState.LOADING) { + console.log('Refreshing data'); + this._state = MoonState.LOADING; + setTimeout(() => { + this._state = MoonState.READY; + console.log('Data refreshed'); + }, LOADING_TIMEOUT); + } + }; // Calculate the remaining time until the next full minute const now = new Date(); const remainingMs = (60 - now.getSeconds()) * 1000; @@ -310,9 +324,9 @@ export class LunarPhaseCard extends LitElement { // Set up a new interval setTimeout(() => { // Set up the regular interval to refresh every full minute - this.refreshData(); + refreshData; this._refreshInterval = window.setInterval(() => { - this.refreshData(); + refreshData; }, BASE_REFRESH_INTERVAL); }, remainingMs); } @@ -344,7 +358,6 @@ export class LunarPhaseCard extends LitElement { return html``; } this.createMoon(); - // const isHeaderHidden = this.config?.hide_header; const card = !this._activeCard ? this._defaultCard : this._activeCard; const header = !this.config.compact_view || [PageType.HORIZON].includes(card) ? this.renderHeader() : nothing; const shouldAddPadding = [PageType.BASE].includes(card) && !this.config.compact_view; @@ -356,7 +369,7 @@ export class LunarPhaseCard extends LitElement { class="loading" ?hidden=${this._state !== MoonState.LOADING} > - ${this.config.hide_header || [PageType.CALENDAR].includes(card) ? nothing : header} + ${this.config.hide_buttons || [PageType.CALENDAR].includes(card) ? nothing : header}
${choose(card, [ [PageType.BASE, () => this.renderBaseCard()], @@ -411,10 +424,10 @@ export class LunarPhaseCard extends LitElement { return html`
-
+
${headerContent}
-
+
${buttons.map( (btn) => html` - ${this.config.hide_header ? nothing : this.renderHeader()} + ${this.config.hide_buttons ? nothing : this.renderHeader()}
${this.renderMoonImage()}${dateInput}
${this.renderMoonData()}
@@ -667,7 +680,7 @@ export class LunarPhaseCard extends LitElement { } private _computeClasses() { - const isHeaderHidden = this.config?.hide_header || false; + const isHeaderHidden = this.config?.hide_buttons || false; const reverse = this.config.moon_position === 'right'; const compactHeader = Boolean(this.config.compact_view && this._activeCard === PageType.BASE); const dynamicGraph = this.config.graph_config?.graph_type === 'dynamic'; From d27a7c0931affe06758f9fbc82061adfbc49d13d Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 08:08:43 +0100 Subject: [PATCH 19/32] refactor: Add moon calendar page component --- src/components/index.ts | 1 + src/components/moon-calendar-page.ts | 282 ++++++++++++++++++++++++++ src/components/moon-calendar-popup.ts | 39 ++-- 3 files changed, 301 insertions(+), 21 deletions(-) create mode 100644 src/components/moon-calendar-page.ts diff --git a/src/components/index.ts b/src/components/index.ts index 74d13bb..0c8cd18 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,3 +4,4 @@ export * from './moon-horizon-dynamic'; export * from './moon-horizon-chart'; export * from './moon-star-field'; export * from './moon-editor-search'; +export * from './moon-calendar-page'; diff --git a/src/components/moon-calendar-page.ts b/src/components/moon-calendar-page.ts new file mode 100644 index 0000000..ebb2d46 --- /dev/null +++ b/src/components/moon-calendar-page.ts @@ -0,0 +1,282 @@ +import { formatDate } from 'custom-card-helpers'; +import { LitElement, html, CSSResultGroup, TemplateResult, nothing, PropertyValues, css } from 'lit'; +import { customElement, state, property } from 'lit/decorators.js'; + +import { ICON } from '../const'; +import styles from '../css/style.css'; +import './moon-calendar-popup'; +import { dayFormatter } from '../localize/localize'; +import { LunarPhaseCard } from '../lunar-phase-card'; +import { Moon } from '../utils/moon'; + +@customElement('lunar-calendar-page') +export class LunarCalendarPage extends LitElement { + @property({ attribute: false }) card!: LunarPhaseCard; + @property({ attribute: false }) moon!: Moon; + @state() _calendarPopup: boolean = false; + @state() _calendarInfo: boolean = false; + + protected firstUpdated(_changedProperties: PropertyValues): void { + super.firstUpdated(_changedProperties); + } + + protected shouldUpdate(_changedProperties: PropertyValues): boolean { + if (_changedProperties.has('card')) { + return true; + } + return true; + } + + static get styles(): CSSResultGroup { + return [ + styles, + css` + .title { + padding-left: var(--lunar-card-padding); + } + + /* CALENDAR */ + .calendar-container { + display: block; + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + } + + .calendar-container > .calendar-mini-popup { + display: block; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + z-index: 1; + backdrop-filter: blur(2px); + opacity: 1; + transition: all 0.4s ease-in; + } + + .calendar-mini-popup[hidden] { + opacity: 0; + pointer-events: none; + z-index: -1; + } + + .calendar-wrapper { + position: relative; + display: flex; + width: 100%; + flex-direction: column; + /* gap: 1rem; */ + --calendar-background-color: #ffffff1f; + z-index: 0; + align-items: center; + /* overflow: hidden; */ + } + + .calendar-wrapper > .calendar-info[show='false'] { + max-height: 0px; + overflow: hidden; + transition: all 0.4s ease-in-out; + opacity: 0; + } + + .calendar-wrapper > .calendar-info[show='true'] { + margin-top: 0.5rem; + max-height: 500px; + transition: all 0.4s ease-in-out; + width: 100%; + padding-inline: 1rem; + } + + ha-icon-button.calendar-info-btn[active] { + transform: rotate(180deg); + transition: transform 0.4s ease-in-out; + } + + .date-input-wrapper { + display: flex; + position: relative; + align-items: center; + justify-content: space-between; + color: var(--lunar-card-label-font-color); + /* backdrop-filter: blur(4px); */ + background-color: rgba(0, 0, 0, 0.14); + width: -webkit-fill-available; + /* --mdc-icon-button-size: 24px; */ + /* padding: 0.5rem; */ + } + + .inline-btns { + display: flex; + flex: 3; + justify-content: space-between; + color: var(--secondary-text-color); + } + + .inline-btns > ha-icon-button:hover { + color: var(--primary-text-color); + } + + .date-name { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + flex: 3; + white-space: nowrap; + font-size: 1rem; + font-weight: 400; + } + + .date-name > span { + font-size: 0.9rem; + color: var(--secondary-text-color); + } + + .date-input-label { + display: block; + color: var(--lunar-card-label-font-color); + font-size: 16px; + font-weight: 600; + margin-bottom: 8px; + } + + .date-input { + display: block; + width: fit-content; + padding: 0.5rem; + border: 1px solid var(--divider-color); + border-radius: var(--ha-card-border-radius, 12px); + color: var(--lunar-card-label-font-color); + background-color: var(--calendar-background-color); + transition: all 0.3s ease; + box-sizing: border-box; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; + } + + .date-input:focus { + border-color: var(--primary-color); + outline: none; + } + + button.date-input-btn { + cursor: pointer; + background-color: var(--calendar-background-color); + border: 1px solid var(--divider-color); + border-radius: var(--ha-card-border-radius, 12px); + /* padding: 0.5rem 1rem; */ + color: var(--primary-text-color); + transition: all 0.3s ease; + font-weight: 600; + } + + button.date-input-btn:hover { + background-color: var(--primary-color); + color: var(--primary-background-color); + } + `, + ]; + } + + protected render(): TemplateResult { + const moon = this.card.moon; + const isToday = this.card._date.toDateString() === new Date().toDateString(); + const todayToLocale = dayFormatter(0, this.card.selectedLanguage); + const dateInput = html`
+
+ + (this.card.selectedDate = undefined)} + style="visibility: ${!isToday ? 'visible' : 'hidden'}" + > + + this.updateDate('prev')}> +
+
+ ${formatDate(this.card._date, this.card._locale)} ${isToday ? html`${todayToLocale}` : nothing} +
+ +
+ this.updateDate('next')}> + (this._calendarInfo = !this._calendarInfo)} + ?active=${this._calendarInfo} + > + +
+
`; + return html` +
+ ${this.card.config.hide_buttons ? nothing : this.card.renderHeader()} +
+ ${this.card.renderMoonImage()}${dateInput} +
${this.card.renderMoonData()}
+
+
+ +
+
+ `; + } + + _handleCalAction(event: CustomEvent) { + event.stopPropagation(); + const detail = event.detail; + switch (detail.action) { + case 'close': + this._handleCalendarPopup(); + break; + case 'date-select': + this.card.selectedDate = detail.date; + this._handleCalendarPopup(); + break; + } + } + + private _handleCalendarPopup() { + if (this.card.config.calendar_modal) { + this.card._dialogOpen = !this.card._dialogOpen; + } else { + if (!this._calendarInfo) { + this._calendarInfo = true; + setTimeout(() => { + this._calendarPopup = !this._calendarPopup; + }, 100); + } else { + this._calendarPopup = !this._calendarPopup; + } + } + } + + private updateDate(action?: 'next' | 'prev') { + const date = new Date(this.card._date); + date.setHours(0, 0, 0, 0); + if (action === 'next') { + date.setDate(date.getDate() + 1); + } else if (action === 'prev') { + date.setDate(date.getDate() - 1); + } + this.card.selectedDate = date; + this.requestUpdate(); + } +} + +declare global { + interface HTMLElementTagNameMap { + 'lunar-calendar-page': LunarCalendarPage; + } +} diff --git a/src/components/moon-calendar-popup.ts b/src/components/moon-calendar-popup.ts index ad2ae1d..288279b 100644 --- a/src/components/moon-calendar-popup.ts +++ b/src/components/moon-calendar-popup.ts @@ -154,7 +154,7 @@ export class LunarCalendarPopup extends LitElement {
${renderNavButton(ICON.CLOSE, () => { - this._handleClose(); + this._dispatchEvent('close', {}); this.viewDate = DateTime.local().startOf('month'); })}
@@ -195,7 +195,11 @@ export class LunarCalendarPopup extends LitElement { const moonPhaseIcon = this.moon._getEmojiForPhase(date.toJSDate()); return html` -
this._handleDateSelect(date.toJSDate())}> +
this._dispatchEvent('date-select', { date: date.toJSDate() })} + >
${label}
${moonPhaseIcon}
@@ -209,15 +213,17 @@ export class LunarCalendarPopup extends LitElement { `; } - private _handleClose(): void { - if (this.card.config.calendar_modal) { - this.card._dialogOpen = false; - } else { - this.card._calendarPopup = false; - if (this.card._calendarInfo) { - this.card._calendarInfo = false; - } - } + private _dispatchEvent(action: string, detail: any): void { + this.dispatchEvent( + new CustomEvent('calendar-action', { + detail: { + action, + ...detail, + }, + bubbles: true, + composed: true, + }) + ); } private _setEventListeners(): void { @@ -226,7 +232,7 @@ export class LunarCalendarPopup extends LitElement { // close popup if is clicked to empty space grid.addEventListener('click', (e) => { if (e.target === grid) { - this.card._calendarPopup = false; + this._dispatchEvent('close', {}); this.viewDate = DateTime.local().startOf('month'); } }); @@ -244,15 +250,6 @@ export class LunarCalendarPopup extends LitElement { return daysOfTheWeek; } - private _handleDateSelect(date: Date): void { - // Update the selected date in the card - this.card.selectedDate = date; - setTimeout(() => { - this.viewDate = DateTime.local().startOf('month'); - this._handleClose(); - }, 300); - } - private _updateCalendarDate(type: 'months' | 'years', action: 'prev' | 'next'): void { this.viewDate = action === 'prev' ? this.viewDate.minus({ [type]: 1 }) : this.viewDate.plus({ [type]: 1 }); this.requestUpdate(); From d6e282aa87ff3ebb8ad1f5811c1bcdad47e1f2d2 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 08:09:20 +0100 Subject: [PATCH 20/32] refactor: Improve star size and animation in moon-star-field.ts --- src/components/moon-horizon-chart.ts | 16 +-- src/components/moon-horizon-dynamic.ts | 24 ++-- src/components/moon-star-field.ts | 18 ++- src/css/style.css | 156 +------------------------ 4 files changed, 40 insertions(+), 174 deletions(-) diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index d71351f..7251551 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -42,7 +42,7 @@ export class LunarHorizonChart extends LitElement { @state() private _lastTime: string | null = null; protected async firstUpdated(): Promise { - await new Promise((resolve) => setTimeout(resolve, 50)); + await new Promise((resolve) => setTimeout(resolve, 0)); this.setupChart(); } @@ -50,6 +50,7 @@ export class LunarHorizonChart extends LitElement { if (_changedProperties.has('cardWidth')) { if (this._chart) { this._chart.resize(this.cardWidth, this.cardHeight); + this._chart.update(); } } } @@ -323,14 +324,6 @@ export class LunarHorizonChart extends LitElement { this.card.selectedDate = time; } - private cancelTimeAnimationFrame(): void { - // Cancel the animation frame when the component is disconnected - if (this._timeAnimationFrame) { - cancelAnimationFrame(this._timeAnimationFrame); - this._timeAnimationFrame = null; - } - } - /* -------------------------------- DATASETS -------------------------------- */ private _getChartData = (): ChartData => { @@ -530,15 +523,16 @@ export class LunarHorizonChart extends LitElement { /* --------------------------------- PLUGINS -------------------------------- */ private moonMarkerPlugin = (): Plugin => { const emoji = this.todayData.moonPhase.phase.emoji; - const emojiFontSize = '18px Arial'; + const emojiFontSize = '1rem Arial'; const { currentHourIndex, altitudeDegrees } = this.moon.currentMoonData; const showCurrent = this.card.config?.graph_config?.show_current ?? true; if (!showCurrent) return { id: 'moonMarkerPlugin' }; + const hoverOnChart = this.hoverOnChart; return { id: 'moonMarkerPlugin', afterDatasetsDraw(chart: Chart) { const dataSet = chart.getDatasetMeta(0); - if (dataSet.hidden) return; + if (dataSet.hidden || hoverOnChart) return; const { ctx, scales: { x, y }, diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index 8185bb2..de540c3 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -1,5 +1,5 @@ // Lit -import { LitElement, html, CSSResultGroup, TemplateResult, css, PropertyValues } from 'lit'; +import { LitElement, html, CSSResultGroup, TemplateResult, css, PropertyValues, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import tinycolor from 'tinycolor2'; // Custom Card helpers @@ -86,10 +86,10 @@ export class LunarHorizonDynamic extends LitElement { backdrop-filter: blur(4px); background: transparent !important; width: 100%; - height: 100%; + height: 60%; pointer-events: none; overflow: hidden; - z-index: 1; + z-index: 0; isolation: isolate; box-sizing: border-box; border-radius: 24px; @@ -191,9 +191,10 @@ export class LunarHorizonDynamic extends LitElement { } protected render(): TemplateResult { + const useBackground = this.card.config.show_background; return html`
-
+ ${useBackground ? html`
` : nothing}
`; @@ -485,24 +486,27 @@ export class LunarHorizonDynamic extends LitElement { if (!chartArea || !scales.x || !scales.y) { return; } + const { left, right, bottom, top } = chartArea; - const midX = chart.scales.x.getPixelForValue(closestTimeIndex); - const midY = chart.scales.y.getPixelForValue(0); - const gradientHeight = (bottom - top) * 0.8; + const midX = scales.x.getPixelForValue(closestTimeIndex); + const midY = scales.y.getPixelForValue(0); + const gradientHeight = (bottom - top) * 0.5; // Create gradients const createGradient = (startX: number, color: string) => { const gradient = ctx.createLinearGradient(startX, bottom, startX, bottom - gradientHeight); - gradient.addColorStop(0, hexToRgba(color, 0.8)); - gradient.addColorStop(0.7, hexToRgba(color, 0.6)); + gradient.addColorStop(0, hexToRgba(color, 1)); gradient.addColorStop(1, hexToRgba(color, 0)); return gradient; }; ctx.save(); + + // Draw left gradient ctx.fillStyle = createGradient(left, fillColor.today); ctx.fillRect(left, bottom - gradientHeight, midX - left, gradientHeight); + // Draw right gradient ctx.fillStyle = createGradient(midX, fillColor.nextDay); ctx.fillRect(midX, bottom - gradientHeight, right - midX, gradientHeight); @@ -524,6 +528,8 @@ export class LunarHorizonDynamic extends LitElement { ctx.stroke(); ctx.restore(); + + // Draw labels for the markers drawLabels(ctx, midX, top); }, }; diff --git a/src/components/moon-star-field.ts b/src/components/moon-star-field.ts index 592ab1c..5a7478c 100644 --- a/src/components/moon-star-field.ts +++ b/src/components/moon-star-field.ts @@ -6,11 +6,20 @@ import { LunarPhaseCard } from '../lunar-phase-card'; @customElement('lunar-star-field') export class LunarStarField extends LitElement { @property({ attribute: false }) _card!: LunarPhaseCard; - @state() private count: number = 30; + @state() _baseCardReady!: boolean; + @state() private count: number = 10; protected firstUpdated(_changedProperties: PropertyValues): void { super.firstUpdated(_changedProperties); - this._createStarfield(); + } + + protected updated(_changedProperties: PropertyValues): void { + super.updated(_changedProperties); + if (_changedProperties.has('_baseCardReady') && this._baseCardReady) { + setTimeout(() => { + this._createStarfield(); + }, 1000); + } } static get styles(): CSSResultGroup { @@ -21,7 +30,7 @@ export class LunarStarField extends LitElement { top: 0; left: 0; width: 100%; - height: 20%; + height: 100%; pointer-events: none; overflow: hidden; z-index: 0; @@ -56,6 +65,7 @@ export class LunarStarField extends LitElement { ]; } protected render() { + if (!this._card._cardReady) return html``; return html`
`; } @@ -72,7 +82,7 @@ export class LunarStarField extends LitElement { // Random position const x = Math.random() * starfield.offsetWidth; - const y = Math.random() * starfield.offsetHeight; + const y = (Math.random() * starfield.offsetHeight) / 4; // Random blink delay const delay = 3 + Math.random() * 3; diff --git a/src/css/style.css b/src/css/style.css index d437916..8adb639 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -29,6 +29,7 @@ ha-card { border: none; --primary-text-color: var(--lunar-card-label-font-color, var(--primary-text-color)); --swiper-theme-color: var(--lunar-card-label-font-color, var(--primary-text-color)); + --mdc-ripple-press-opacity: 0; } ha-card.--background { @@ -181,7 +182,7 @@ ha-card.--background .moon-phase-name { } .lunar-card-content { - display: flex; + /* display: flex; */ /* flex-wrap: wrap; */ padding: 0; justify-content: center; @@ -192,6 +193,10 @@ ha-card.--background .moon-phase-name { position: relative; } +.base-card { + display: flex; + width: 100%; +} .moon-image { display: flex; @@ -294,155 +299,6 @@ lunar-base-data { -/* CALENDAR */ -.calendar-container { - display: block; - position: relative; - width: 100%; - height: 100%; - overflow: hidden; -} - -.calendar-container>.calendar-mini-popup { - display: block; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - z-index: 1; - backdrop-filter: blur(2px); - opacity: 1; - transition: all 0.4s ease-in; -} - -.calendar-mini-popup[hidden] { - opacity: 0; - pointer-events: none; - z-index: -1; -} - -.calendar-wrapper { - position: relative; - display: flex; - width: 100%; - flex-direction: column; - /* gap: 1rem; */ - --calendar-background-color: #ffffff1f; - z-index: 0; - align-items: center; - /* overflow: hidden; */ -} - -.calendar-wrapper>.calendar-info[show="false"] { - max-height: 0px; - overflow: hidden; - transition: all 0.4s ease-in-out; - opacity: 0; -} - -.calendar-wrapper>.calendar-info[show="true"] { - margin-top: 0.5rem; - max-height: 500px; - transition: all 0.4s ease-in-out; - width: 100%; - padding-inline: 1rem; -} - -ha-icon-button.calendar-info-btn[active] { - transform: rotate(180deg); - transition: transform 0.4s ease-in-out; -} - -.date-input-wrapper { - display: flex; - position: relative; - align-items: center; - justify-content: space-between; - color: var(--lunar-card-label-font-color); - /* backdrop-filter: blur(4px); */ - background-color: rgba(0, 0, 0, 0.14); - width: -webkit-fill-available; - /* --mdc-icon-button-size: 24px; */ - /* padding: 0.5rem; */ - -} - -.inline-btns { - display: flex; - flex: 3; - justify-content: space-between; - color: var(--secondary-text-color); -} - -.inline-btns>ha-icon-button:hover { - color: var(--primary-text-color); -} - - - -.date-name { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - flex: 3; - white-space: nowrap; - font-size: 1rem; - font-weight: 400; -} - -.date-name>span { - font-size: 0.9rem; - color: var(--secondary-text-color); -} - -.date-input-label { - display: block; - color: var(--lunar-card-label-font-color); - font-size: 16px; - font-weight: 600; - margin-bottom: 8px; -} - -.date-input { - display: block; - width: fit-content; - padding: 0.5rem; - border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); - color: var(--lunar-card-label-font-color); - background-color: var(--calendar-background-color); - transition: all 0.3s ease; - box-sizing: border-box; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - cursor: pointer; -} - -.date-input:focus { - border-color: var(--primary-color); - outline: none; -} - -button.date-input-btn { - cursor: pointer; - background-color: var(--calendar-background-color); - border: 1px solid var(--divider-color); - border-radius: var(--ha-card-border-radius, 12px); - /* padding: 0.5rem 1rem; */ - color: var(--primary-text-color); - transition: all 0.3s ease; - font-weight: 600; -} - -button.date-input-btn:hover { - background-color: var(--primary-color); - color: var(--primary-background-color); -} - /* COMPACT VIEW */ .btn-action.compact { From 122049cbf797eff29c358a599b807b0522241511 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 08:09:41 +0100 Subject: [PATCH 21/32] refactor: Update lunar phase card editor to remove cardId when config is valid --- src/editor.ts | 4 ++ src/lunar-phase-card.ts | 132 ++++++++++------------------------------ src/utils/helpers.ts | 6 +- 3 files changed, 37 insertions(+), 105 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 9518c50..046225d 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -85,6 +85,10 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit fireEvent(this, 'config-changed', { config: this._config }); await _saveConfig(cardId, this._config); console.log('Config is valid'); + } else if (isValid && config.cardId !== undefined) { + this._config = { ...config, cardId: undefined }; + fireEvent(this, 'config-changed', { config: this._config }); + console.log('Config is valid, removing cardId', config.cardId); } } diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index b9d43e8..09c8248 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -1,4 +1,4 @@ -import { LovelaceCardEditor, formatDate, FrontendLocaleData, TimeFormat } from 'custom-card-helpers'; +import { LovelaceCardEditor, FrontendLocaleData, TimeFormat } from 'custom-card-helpers'; import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup, nothing } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { choose } from 'lit/directives/choose.js'; @@ -9,13 +9,14 @@ import { HA as HomeAssistant, LunarPhaseCardConfig, defaultConfig } from './type // Helpers import { BLUE_BG, PageType, MoonState, ICON } from './const'; -import { dayFormatter, localize } from './localize/localize'; +import { localize } from './localize/localize'; import { generateConfig } from './utils/ha-helper'; import { _handleOverflow, _setEventListeners, getDefaultConfig } from './utils/helpers'; import { isEditorMode } from './utils/loader'; // components import { LunarBaseData } from './components/moon-base-data'; +import { LunarCalendarPage } from './components/moon-calendar-page'; import { LunarHorizonChart } from './components/moon-horizon-chart'; import { LunarHorizonDynamic } from './components/moon-horizon-dynamic'; import { LunarStarField } from './components/moon-star-field'; @@ -45,13 +46,10 @@ export class LunarPhaseCard extends LitElement { @property({ type: String }) public layout?: string; @state() _activeCard: PageType | null = null; @state() selectedDate: Date | undefined; - - @state() _calendarPopup: boolean = false; - @state() _calendarInfo: boolean = false; - @state() _resizeInitiated = false; + @state() _cardReady = false; @state() _connected = false; - @state() _cardReady = false; + @state() _resizeInitiated = false; @state() private _state: MoonState = MoonState.READY; @state() private _refreshInterval: number | undefined; @@ -62,10 +60,11 @@ export class LunarPhaseCard extends LitElement { @state() public _dialogOpen!: boolean; - @query('lunar-base-data') _data!: LunarBaseData; - @query('lunar-horizon-chart') _moonHorizon!: LunarHorizonChart; - @query('lunar-horizon-dynamic') _moonHorizonDynamic!: LunarHorizonDynamic; - @query('moon-star-field') _starField!: LunarStarField; + @query('lunar-base-data') _DATA_SWIPER!: LunarBaseData; + @query('lunar-horizon-chart') _HORIZON_DEFAULT!: LunarHorizonChart; + @query('lunar-horizon-dynamic') _HORIZON_DYNAMIC!: LunarHorizonDynamic; + @query('lunar-calendar-page') _CALENDAR_PAGE!: LunarCalendarPage; + @query('lunar-star-field') _starField!: LunarStarField; @query('#calendar-dialog') _calendarDialog!: HTMLDialogElement; constructor() { @@ -181,9 +180,6 @@ export class LunarPhaseCard extends LitElement { if (this.selectedDate !== undefined) { this.selectedDate = undefined; } - if (this._calendarPopup === true) { - this._calendarPopup = false; - } } } return true; @@ -308,12 +304,15 @@ export class LunarPhaseCard extends LitElement { } const refreshData = () => { + if (!this._connected) { + this.clearRefreshInterval(); + return; + } if (this._state !== MoonState.LOADING) { - console.log('Refreshing data'); this._state = MoonState.LOADING; setTimeout(() => { this._state = MoonState.READY; - console.log('Data refreshed'); + // console.log('Data refreshed', this.config?.cardId); }, LOADING_TIMEOUT); } }; @@ -324,27 +323,13 @@ export class LunarPhaseCard extends LitElement { // Set up a new interval setTimeout(() => { // Set up the regular interval to refresh every full minute - refreshData; + refreshData(); this._refreshInterval = window.setInterval(() => { - refreshData; + refreshData(); }, BASE_REFRESH_INTERVAL); }, remainingMs); } - private refreshData() { - if (!this._connected) { - return; - } - if (this._state !== MoonState.LOADING) { - // console.log('Refreshing data'); - this._state = MoonState.LOADING; - setTimeout(() => { - this._state = MoonState.READY; - // console.log('Data refreshed'); - }, LOADING_TIMEOUT); - } - } - private clearRefreshInterval() { if (this._refreshInterval) { clearInterval(this._refreshInterval); @@ -377,7 +362,7 @@ export class LunarPhaseCard extends LitElement { [PageType.HORIZON, () => this.renderHorizon()], ])}
- + ${this.renderCalendarDialog()} `; @@ -388,13 +373,18 @@ export class LunarPhaseCard extends LitElement { const isGridMode = this.layout === 'grid'; return html`
- + this._CALENDAR_PAGE._handleCalAction(ev)} + >
`; } private renderBaseCard(): TemplateResult | void { - return html` ${this.renderMoonImage()} ${this.renderMoonData()}`; + if (this._activeCard !== PageType.BASE) return; + return html`
${this.renderMoonImage()} ${this.renderMoonData()}
`; } private createMoon() { @@ -407,7 +397,7 @@ export class LunarPhaseCard extends LitElement { // console.log('createMoon'); } - private renderHeader(): TemplateResult | void { + renderHeader(): TemplateResult | void { const headerContent = this._activeCard !== PageType.HORIZON ? this.moon?.phaseName : this.localize('card.horizonTitle'); @@ -425,7 +415,7 @@ export class LunarPhaseCard extends LitElement { return html`
- ${headerContent} + ${headerContent}
${buttons.map( @@ -443,7 +433,7 @@ export class LunarPhaseCard extends LitElement { `; } - private renderMoonImage(): TemplateResult | void { + renderMoonImage(): TemplateResult | void { if (!this.moon) return; const { moonPic } = this.moon.moonImage; @@ -460,7 +450,7 @@ export class LunarPhaseCard extends LitElement {
`; } - private renderMoonData(): TemplateResult { + renderMoonData(): TemplateResult { const compactView = this.config.compact_view && this._activeCard === PageType.BASE; const replacer = (key: string, value: any) => { if (['direction', 'position'].includes(key)) { @@ -509,74 +499,16 @@ export class LunarPhaseCard extends LitElement { `; } - private renderCalendar(): TemplateResult | void { - // Initialize selectedDate to today if it is not already set - const isToday = this._date.toDateString() === new Date().toDateString(); - const todayToLocale = dayFormatter(0, this.selectedLanguage); - const dateInput = html`
-
- - (this.selectedDate = undefined)} - style="visibility: ${!isToday ? 'visible' : 'hidden'}" - > - - this.updateDate('prev')}> -
-
- ${formatDate(this._date, this._locale)} ${isToday ? html`${todayToLocale}` : nothing} -
- -
- this.updateDate('next')}> - (this._calendarInfo = !this._calendarInfo)} - ?active=${this._calendarInfo} - > - -
-
`; - - return html` -
- ${this.config.hide_buttons ? nothing : this.renderHeader()} -
- ${this.renderMoonImage()}${dateInput} -
${this.renderMoonData()}
-
-
- -
-
- `; + private renderCalendar(): TemplateResult { + return html` `; } - - private _handleCalendarPopup() { - if (this.config.calendar_modal) { - this._dialogOpen = !this._dialogOpen; - } else { - if (!this._calendarInfo) { - this._calendarInfo = true; - setTimeout(() => { - this._calendarPopup = !this._calendarPopup; - }, 100); - } else { - this._calendarPopup = !this._calendarPopup; - } - } - } - private _attachEventListeners() { const dialog = this.shadowRoot?.getElementById('calendar-dialog') as HTMLDialogElement; if (!dialog) return; const dialogContent = dialog.querySelector('.dialog-content'); if (!dialogContent) return; dialogContent.classList.toggle('slide-in'); - console.log('dialog', dialog); + // console.log('dialog', dialog); dialog.addEventListener('click', (event: MouseEvent) => { const target = event.target as HTMLElement; if (target === dialog) { diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 6bdedc6..fd8f28f 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -28,7 +28,6 @@ export function getDefaultConfig(hass: HomeAssistant) { const selected_language = hass.language; const timeFormat = useAmPm(hass.locale); const mile_unit = length !== 'km'; - const cardId = `lmc-${Math.random().toString(36).substring(2, 9)}`; console.log( 'default config', 'latitude:', @@ -40,9 +39,7 @@ export function getDefaultConfig(hass: HomeAssistant) { 'timeFormat:', timeFormat, 'mile_unit:', - mile_unit, - 'cardId:', - cardId + mile_unit ); return { latitude, @@ -50,7 +47,6 @@ export function getDefaultConfig(hass: HomeAssistant) { selected_language, '12hr_format': timeFormat, mile_unit, - cardId, }; } From f10f744767b4b18533e880af7f21e6b055f73d38 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 08:10:42 +0100 Subject: [PATCH 22/32] refactor: Update package.json version to 1.9.0-beta.6 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e09c834..e31d5c3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.9.0-beta.5", + "version": "1.9.0-beta.6", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", From 9015189fc91a44c1ea8d7d3be4b7ea0fb77a8af7 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 13:32:11 +0100 Subject: [PATCH 23/32] refactor: Improve moon image display --- src/css/style.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index 8adb639..3fe0dbc 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -196,6 +196,7 @@ ha-card.--background .moon-phase-name { .base-card { display: flex; width: 100%; + align-items: center; } .moon-image { @@ -203,6 +204,7 @@ ha-card.--background .moon-phase-name { width: 100%; max-width: 150px; min-width: 100px; + min-height: 100px; transition: transform 0.5s; -webkit-user-select: none; -moz-user-select: none; @@ -211,8 +213,8 @@ ha-card.--background .moon-phase-name { padding: 8px; flex-shrink: 0; /* z-index: 4; */ - height: fit-content; - align-self: center; + height: 100%; + /* align-self: center; */ } .moon-image[compact] { From 940ce88d40ee072898f77f90b92cef08155138e9 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 13:32:19 +0100 Subject: [PATCH 24/32] refactor: Add documentation URL for Lunar Phase Card --- src/lunar-phase-card.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 09c8248..14b0470 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -608,7 +608,7 @@ export class LunarPhaseCard extends LitElement { const headerOffset = this._headerHidden ? 48 : 96; const width = this._cardWidth; let moonWidth = activeCard === PageType.CALENDAR ? width * 0.5 - headerOffset : width / 3.5; - return styleMap({ maxWidth: `${moonWidth}px` }); + return styleMap({ maxWidth: `${moonWidth}px`, maxHeight: `${moonWidth}px` }); } private _computeClasses() { @@ -667,6 +667,7 @@ window.customCards.push({ type: 'lunar-phase-card', name: 'Lunar Phase Card', preview: true, + documentationURL: 'https://github.com/ngocjohn/lunar-phase-card', description: 'A custom card to display the current lunar phase.', }); @@ -683,6 +684,7 @@ declare global { type: string; name: string; preview: boolean; + documentationURL: string; description: string; } From dd2c6cddc15f241286c2bc135758e85a67387e21 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 13:33:20 +0100 Subject: [PATCH 25/32] bump v1.9.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e31d5c3..afb13c0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.9.0-beta.6", + "version": "1.9.0", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", From 138f1d41641eefc7fb0343d22b8369df183ef652 Mon Sep 17 00:00:00 2001 From: Norbert Rittel Date: Wed, 11 Dec 2024 13:41:33 +0100 Subject: [PATCH 26/32] Fix machine translations for proper German grammar (#53) The usual output of Google Translate does not match the grammar and style that is common in German UIs. I also flips the perspective in several translations asking the user to do something which the computer is about to perform. In addition I prefer to translate "show" / "hide" as "einblenden" / "ausblenden" (Mac style) where they are the two options for showing something on screen. "Anzeigen" which machine translations prefer is more for items that are opened in a separate view etc. Finally the machine translations favor the formal "Sie" while Home Assistant uses the less formal "Du" ("you") instead. --- src/languages/de.json | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/languages/de.json b/src/languages/de.json index bf7fa07..07db31f 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -127,33 +127,33 @@ "hideButtons": "Schaltflächen ausblenden", "titleHelper": { "compactView": "Kompakte Ansicht anzeigen", - "showBackground": "Hintergrund anzeigen", - "timeFormat": "Zeitformat einstellen (12-Stunden oder 24-Stunden)", - "mileUnit": "Kilometer werden verwendet, wenn deaktiviert", - "yTicks": "Y-Achsen-Ticks anzeigen", - "xTicks": "X-Achsen-Ticks anzeigen", - "showTime": "Aufgangs-/Untergangszeit anzeigen", - "showCurrent": "Aktuelle Mondposition anzeigen", - "showLegend": "Eine Legende anzeigen", + "showBackground": "Hintergrund einblenden", + "timeFormat": "Zeitformat einstellen (12 oder 24 Stunden)", + "mileUnit": "Wenn deaktiviert werden Kilometer verwendet", + "yTicks": "Y-Achsen-Markierungen einblenden", + "xTicks": "X-Achsen-Markierungen einblenden", + "showTime": "Aufgangs-/Untergangszeit einblenden", + "showCurrent": "Aktuelle Mondposition einblenden", + "showLegend": "Eine Legende einblenden", "showHighest": "Höchste Mondposition anzeigen", - "calendarModal": "Der Kalender wird in einem Popup angezeigt", - "hideButtons": "Die Header-Schaltflächen werden ausgeblendet", - "useDefault": "Verwenden Sie die Standard-Breitengrad- und Längengradwerte", - "useEntity": "Verwenden Sie Breitengrad und Längengrad der Entität", - "useCustom": "Verwenden Sie benutzerdefinierte Breitengrad- und Längengradwerte", - "hideLabel": "Etikett in kompakter Ansicht ausblenden" + "calendarModal": "Kalender in einem Popup anzeigen", + "hideButtons": "Tasten in Kopfleiste ausblenden", + "useDefault": "Standardwerte für Breiten- und Längengrad verwenden", + "useEntity": "Breiten- und Längengrad einer Entität verwenden", + "useCustom": "Eigene Breiten- und Längengradwerte verwenden", + "hideLabel": "Label in kompakter Ansicht ausblenden" }, "placeHolder": { - "latitude": "Breitengrad eingeben", - "longitude": "Längengrad eingeben", + "latitude": "Breitengrad", + "longitude": "Längengrad", "customBackground": "URL oder Pfad zum Hintergrundbild", "language": "Sprachauswahl", - "moonPosition": "Mondposition auf der Karte auswählen", - "defaultCard": "Standardkarte auswählen", + "moonPosition": "Mondposition auf der Karte", + "defaultCard": "Standardkarte", "yTicksPosition": "Position der Y-Beschriftung", "legendPosition": "Position der Legende", "legendAlign": "Ausrichtung der Legende", "graphType": "Diagrammtyp" } } -} \ No newline at end of file +} From 46b62fc69c791fe41fa5009ba5c37cf3ae13c9f6 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 18:28:20 +0100 Subject: [PATCH 27/32] chore: add stale.yml --- .github/workflows/stale.yml | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 .github/workflows/stale.yml diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 0000000..0585f5d --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,14 @@ +name: 'Close stale issues and PRs' +on: + schedule: + - cron: '30 1 * * *' + +jobs: + stale: + runs-on: ubuntu-latest + steps: + - uses: actions/stale@v9 + with: + stale-issue-message: 'This issue is stale because it has been open 7 days with no activity. Remove stale label or comment or this will be closed in 5 days.' + days-before-stale: 7 + days-before-close: 5 \ No newline at end of file From 8c792a671ea18d634700af2a06b4cd6b3f8bf561 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 18:39:15 +0100 Subject: [PATCH 28/32] refactor: Update missing translations file name --- .gitignore | 26 +++++++++----------------- package.json | 9 ++++++++- scripts/add-missing-translations.js | 2 +- 3 files changed, 18 insertions(+), 19 deletions(-) diff --git a/.gitignore b/.gitignore index 917b8a4..3588bc5 100644 --- a/.gitignore +++ b/.gitignore @@ -1,25 +1,17 @@ /node_modules/ /.rpt2_cache/ -package-lock.json /dev dist/ +build/ .vscode -src/utils/testdata.ts -all-keys.asc -all-secret-keys.asc -lunar-phase-card.code-workspace -test/ .env .DS_Store -swiper-bundle.css -scripts/missing_translations.json - -dist/lovelace-horizon-card.js -dist/lunar-phase-card.js -dist/lunar-phase-card.js.map -dist/lunar-phase-card.js -dist/lunar-phase-card.js.map -scripts/convert-img-base.js -build/ +package-lock.json .hass-config/ -scripts/update-bug-template.js +test/ +scripts/* +!scripts/check-localization.js +!scripts/generate-lang-imports.js +!scripts/generate-new-lang-file.js +!scripts/update-languages.js +scripts/add-missing-translations.js diff --git a/package.json b/package.json index afb13c0..d63bd8d 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,16 @@ }, "module": "lunar-phase-card.js", "license": "MIT", + "type": "module", "dependencies": { + "@dotenvx/dotenvx": "^1.29.0", + "@google-cloud/translate": "^8.5.0", "@mdi/js": "^7.4.47", "@noim/suncalc3": "^2.0.5", "@vibrant/color": "^3.2.1-alpha.1", "chart.js": "^4.4.5", "custom-card-helpers": "^1.7.2", + "dotenv": "^16.4.7", "lit": "^3.1.4", "luxon": "^3.5.0", "node-vibrant": "^3.2.1-alpha.1", @@ -65,6 +69,9 @@ "lint": "eslint src/**/*.ts ", "rollup": "rollup -c", "update-lang": "node scripts/update-languages", - "import-lang": "node scripts/generate-lang-imports.js" + "import-lang": "node scripts/generate-lang-imports.js", + "add-missing-translations": "node scripts/add-missing-translations.js", + "translate-new-strings": "npx dotenvx run -- node scripts/translate-new-strings.js", + "update-missing": "npm run translate-new-strings && npm run add-missing-translations" } } \ No newline at end of file diff --git a/scripts/add-missing-translations.js b/scripts/add-missing-translations.js index 2344100..c6e6595 100644 --- a/scripts/add-missing-translations.js +++ b/scripts/add-missing-translations.js @@ -4,7 +4,7 @@ const path = require('path'); // Paths const translationsDir = path.join(__dirname, '../src/languages'); -const missingTranslationsPath = path.join(__dirname, 'missing_translations.json'); +const missingTranslationsPath = path.join(__dirname, 'translated-missing.json'); // Read missing translations JSON const missingTranslations = JSON.parse(fs.readFileSync(missingTranslationsPath, 'utf8')); From 42655a0e42d6fd3fb97fc5e9ca8d139367b52364 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 21:33:05 +0100 Subject: [PATCH 29/32] refactor: Update moon-horizon-chart.ts for improved chart display and interactivity --- src/components/moon-horizon-chart.ts | 67 ++++++++++++-------------- src/components/moon-horizon-dynamic.ts | 8 ++- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/src/components/moon-horizon-chart.ts b/src/components/moon-horizon-chart.ts index 7251551..96a4ad4 100644 --- a/src/components/moon-horizon-chart.ts +++ b/src/components/moon-horizon-chart.ts @@ -24,14 +24,14 @@ import styles from '../css/style.css'; import { ChartColors } from '../types'; import { MOON_RISE_ICON, MOON_SET_ICON } from '../utils/moon-pic'; -const HOVER_TIMEOUT = 200; +const HOVER_TIMEOUT = 150; @customElement('lunar-horizon-chart') export class LunarHorizonChart extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) moon!: Moon; @property({ attribute: false }) card!: LunarPhaseCard; - @property({ type: Number }) cardWidth: number = 0; + @property({ type: Number }) public cardWidth!: number; @state() _chart!: Chart; @state() moreInfo = false; @@ -42,15 +42,16 @@ export class LunarHorizonChart extends LitElement { @state() private _lastTime: string | null = null; protected async firstUpdated(): Promise { - await new Promise((resolve) => setTimeout(resolve, 0)); + await new Promise((resolve) => setTimeout(resolve, 50)); this.setupChart(); } protected updated(_changedProperties: PropertyValues): void { - if (_changedProperties.has('cardWidth')) { + if (!this.card.config || !this.moon) return; + if (_changedProperties.has('cardWidth') && this.cardWidth > 0) { if (this._chart) { this._chart.resize(this.cardWidth, this.cardHeight); - this._chart.update(); + this._chart.update('none'); } } } @@ -58,7 +59,6 @@ export class LunarHorizonChart extends LitElement { get cardHeight(): number { let height = this.cardWidth * 0.5 - 96; height = this.card.config.hide_buttons ? height + 48 : height; - return height; } @@ -66,19 +66,17 @@ export class LunarHorizonChart extends LitElement { return [ styles, css` - .moon-horizon { + #moon-horizon { display: block; position: relative; - margin: 0; + margin: 0 auto; width: 100%; height: 100%; - /* box-shadow: 0 0 6px #e1e0dd30; */ - max-width: 900px; - backdrop-filter: blur(4px); - border-radius: 0; - /* border: 1px solid var(--divider-color); */ + max-width: 1800px; + backdrop-filter: blur(2px); box-sizing: border-box; - /* padding: 0 2px; */ + border-radius: inherit; + overflow: hidden; } #moonPositionChart { @@ -137,13 +135,12 @@ export class LunarHorizonChart extends LitElement { } get plugins(): Plugin[] { - const plugins: Plugin[] = []; - plugins.push(this.fillTopPlugin()); - plugins.push(this.timeMarkerPlugin()); - plugins.push(this.moonMarkerPlugin()); - plugins.push(this.highestAltitudePlugin()); - plugins.push(this.expandChartArea()); - return plugins; + const fillTopPlugin = this.fillTopPlugin(); + const timeMarkerPlugin = this.timeMarkerPlugin(); + const moonMarkerPlugin = this.moonMarkerPlugin(); + const highestAltitudePlugin = this.highestAltitudePlugin(); + const expandChartArea = this.expandChartArea(); + return [fillTopPlugin, timeMarkerPlugin, moonMarkerPlugin, highestAltitudePlugin, expandChartArea]; } get chartData(): ChartData { @@ -218,6 +215,9 @@ export class LunarHorizonChart extends LitElement { this._chart?.update('none'); } }, + onClick: (_event, elements) => { + console.log('onClick', elements); + }, }, plugins: [...customPlugins], @@ -241,7 +241,7 @@ export class LunarHorizonChart extends LitElement { protected render(): TemplateResult { const dataContainer = this.renderDataContainer(); return html` -
+
${dataContainer} @@ -354,11 +354,11 @@ export class LunarHorizonChart extends LitElement { ctx.p0.parsed.y >= -0.001 && ctx.p1.parsed.y >= -0.001 ? 1.2 : 1, }, // radius: () => (this.hoverOnChart ? 1.2 : 0), - pointHoverRadius: 3, + pointHoverRadius: 4, pointHoverBackgroundColor: secondaryTextColor, pointHoverBorderWidth: 2, - radius: 0, - spanGaps: true, + pointRadius: 0, + }; const timeDataset = { @@ -498,8 +498,6 @@ export class LunarHorizonChart extends LitElement { padding: { left: -8, right: -8, - top: 0, - bottom: 0, }, }; // Options @@ -507,16 +505,17 @@ export class LunarHorizonChart extends LitElement { options.interaction = { intersect: false, - mode: 'nearest', - axis: 'xy', + mode: 'index', + axis: 'x', }; options.responsive = true; options.maintainAspectRatio = false; - options.resizeDelay = 50; + options.resizeDelay = 100; + // options.devicePixelRatio = 2; options.scales = scales as ScaleChartOptions; options.plugins = plugins; options.layout = layout; - + options.events = ['mousemove', 'mouseout', 'touchstart', 'touchmove', 'click']; return options; }; @@ -757,17 +756,13 @@ export class LunarHorizonChart extends LitElement { private expandChartArea = (): Plugin => { return { id: 'expandChartArea', - beforeDraw: (chart: Chart) => { - chart.chartArea.left = 0; + beforeRender: (chart: Chart) => { chart.chartArea.right = this.cardWidth; - chart.chartArea.top = 0; chart.chartArea.bottom = this.cardHeight; }, afterUpdate: (chart: Chart) => { - chart.chartArea.left = 0; chart.chartArea.right = this.cardWidth; - chart.chartArea.top = 0; chart.chartArea.bottom = this.cardHeight; }, }; diff --git a/src/components/moon-horizon-dynamic.ts b/src/components/moon-horizon-dynamic.ts index de540c3..81fbfd8 100644 --- a/src/components/moon-horizon-dynamic.ts +++ b/src/components/moon-horizon-dynamic.ts @@ -6,6 +6,9 @@ import tinycolor from 'tinycolor2'; import { FrontendLocaleData, formatDateShort, formatTime } from 'custom-card-helpers'; // Chart.js import { Chart, ChartData, ChartOptions, Plugin, ScriptableLineSegmentContext } from 'chart.js/auto'; + + + // DateTime import { DateTime } from 'luxon'; // Local imports @@ -343,10 +346,11 @@ export class LunarHorizonDynamic extends LitElement { options.responsive = true; options.maintainAspectRatio = false; options.resizeDelay = 100; + // options.devicePixelRatio = 2; options.layout = layout; options.scales = scales; options.plugins = plugins; - options.events = ['mousemove', 'mouseout', 'touchstart', 'touchmove']; + options.events = ['mousemove', 'mouseout', 'touchstart', 'touchmove', 'click']; return options; } @@ -625,6 +629,8 @@ export class LunarHorizonDynamic extends LitElement { }; } + + private _expandChartArea = (): Plugin => { return { id: 'expandChartArea', From 620ce6d70de1e98e892b6ae7f6031b125866bc6c Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 21:33:11 +0100 Subject: [PATCH 30/32] refactor: Update lunar-phase-card.ts for improved graph display and interactivity --- src/lunar-phase-card.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 14b0470..a468cb8 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -545,24 +545,14 @@ export class LunarPhaseCard extends LitElement { ${choose( graphType, [ - ['dynamic', () => dynamicGraph], ['default', () => defaultGraph], + ['dynamic', () => dynamicGraph], ], () => defaultGraph )} `; } - private updateDate(action?: 'next' | 'prev') { - const date = new Date(this._date); - date.setHours(0, 0, 0, 0); - if (action === 'next') { - date.setDate(date.getDate() + 1); - } else if (action === 'prev') { - date.setDate(date.getDate() - 1); - } - this.selectedDate = date; - } private togglePage = (page: PageType) => { this._activeCard = this._activeCard === page ? this._defaultCard : page; From 7ad8cb72a7ef35b75aba3e6380c74a191f7cf51c Mon Sep 17 00:00:00 2001 From: ngocjohn Date: Wed, 11 Dec 2024 20:39:02 +0000 Subject: [PATCH 31/32] update changelog for v1.9.0 changes This commit was created by changelog-from-release in 'Post release' CI workflow --- CHANGELOG.md | 37 ++++++++++++++++++++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b1c1aa..8f2d523 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,37 @@ + +# [v1.9.0](https://github.com/ngocjohn/lunar-phase-card/releases/tag/v1.9.0) - 2024-12-11 + + + +## What's Changed +### New Features 🎉 +- **Dynamic Horizon Chart**: Experience real-time elevation tracking with a seamless 48-hour range, including a 6-hour historical offset for enhanced visualization. By [@ngocjohn](https://github.com/ngocjohn) in [#45](https://github.com/ngocjohn/lunar-phase-card/pull/45) +- **Redesigned Calendar**: A sleek new look for the calendar to align perfectly with the card’s overall style, creating a more cohesive design. By [@ngocjohn](https://github.com/ngocjohn) in [#51](https://github.com/ngocjohn/lunar-phase-card/pull/51) [#46](https://github.com/ngocjohn/lunar-phase-card/pull/46) +- **Hide Header Option**: Added an option to hide the header, perfect for those who prefer a cleaner and minimalist design. + +### Fixes & Improvements +- **Improved Chart Usability**: Resolved issues when manipulating the chart on touch screen devices, ensuring a smoother and more responsive experience. +- **German Translations**: Updated and improved German translations for better localization. By [@NoRi2909](https://github.com/NoRi2909) in [#44](https://github.com/ngocjohn/lunar-phase-card/pull/44) [#48](https://github.com/ngocjohn/lunar-phase-card/pull/48) + +### Showcase +Take a look at the new features in action! + +#### Redesigned Calendar Modal +![calendar-modal](https://github.com/user-attachments/assets/5e2a12f6-18fc-477c-b0bf-c3e0e20d1b64) + +#### Minimalist Design Without Header +![CleanShot 2024-12-11 at 21 30 24@2x](https://github.com/user-attachments/assets/05aa4230-a24c-4754-ac73-bb3580dbf487) + +--- + +If you’re enjoying these updates, please ⭐ the repository to show your support! 🌚 + + +**Full Changelog**: https://github.com/ngocjohn/lunar-phase-card/compare/v1.8.1...v1.9.0 + +[Changes][v1.9.0] + + # [v1.8.1](https://github.com/ngocjohn/lunar-phase-card/releases/tag/v1.8.1) - 2024-11-20 @@ -250,6 +284,7 @@ We welcome contributions and are grateful for your support in improving this pro [Changes][v1.0.0] +[v1.9.0]: https://github.com/ngocjohn/lunar-phase-card/compare/v1.8.1...v1.9.0 [v1.8.1]: https://github.com/ngocjohn/lunar-phase-card/compare/v1.8.0...v1.8.1 [v1.8.0]: https://github.com/ngocjohn/lunar-phase-card/compare/v1.7.2...v1.8.0 [v1.7.2]: https://github.com/ngocjohn/lunar-phase-card/compare/v1.7.1...v1.7.2 @@ -263,4 +298,4 @@ We welcome contributions and are grateful for your support in improving this pro [v1.1.0]: https://github.com/ngocjohn/lunar-phase-card/compare/v1.0.0...v1.1.0 [v1.0.0]: https://github.com/ngocjohn/lunar-phase-card/tree/v1.0.0 - + From f655960eeebd88e9409dab0f927456dac649cc0f Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 11 Dec 2024 21:43:46 +0100 Subject: [PATCH 32/32] refactor: Remove unnecessary code and update package.json version to 1.9.0 --- .github/ISSUE_TEMPLATE/BUG_REPORT.yml | 2 +- README.md | 3 ++- package.json | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml index 5445678..69365b9 100644 --- a/.github/ISSUE_TEMPLATE/BUG_REPORT.yml +++ b/.github/ISSUE_TEMPLATE/BUG_REPORT.yml @@ -34,7 +34,7 @@ body: label: Version 📦 description: The version of the application where the bug was found options: - - v1.9.0-beta.5 + - v1.9.0 - v1.8.1 - v1.8.0 - v1.7.2 diff --git a/README.md b/README.md index c10d275..1b92f84 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ + ### Supported Localization
@@ -60,7 +61,7 @@ | `ru` | Русский | Русский | | `sk` | Slovak | Slovenčina | -
+ ### View options diff --git a/package.json b/package.json index d63bd8d..4ea2907 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ }, "module": "lunar-phase-card.js", "license": "MIT", - "type": "module", "dependencies": { "@dotenvx/dotenvx": "^1.29.0", "@google-cloud/translate": "^8.5.0",