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, }; }