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()],
])}
-