refactor: Update moon data rendering and localization support

ngocjohn · Oct 31, 2024 · 49c03f2 · 49c03f2
1 parent 9940a7a
commit 49c03f2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 41 deletions.
diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts
@@ -11,6 +11,7 @@ import { Moon } from './utils/moon';
 import './components/moon-data';
 import './components/moon-horizon';
 import { LunarBaseData } from './components/moon-data';
+import { MoonHorizon } from './components/moon-horizon';
 import style from './css/style.css';
 
 @customElement('lunar-phase-card')
@@ -36,6 +37,7 @@ export class LunarPhaseCard extends LitElement {
   @state() _cardWidth: number = 0;
 
   @query('lunar-base-data') _data!: LunarBaseData;
+  @query('moon-horizon') _moonHorizon!: MoonHorizon;
   public static getStubConfig = (hass: HomeAssistant): Record<string, unknown> => {
     const defaultLatitude = hass.config.latitude || 0;
     const defaultLongitude = hass.config.longitude || 0;
@@ -102,6 +104,7 @@ export class LunarPhaseCard extends LitElement {
     this.measureCard();
     this._computeStyles();
   }
+
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (changedProps.has('_activeCard') && this._activeCard !== CurrentPage.BASE) {
       // console.log('shouldUpdate', this._activeCard);
@@ -116,7 +119,8 @@ export class LunarPhaseCard extends LitElement {
         this.startRefreshInterval();
       }
     }
-    return changedProps.has('_activeCard') || (changedProps.has('selectedDate') && this.selectedDate !== undefined);
+
+    return true;
   }
 
   get hass(): HomeAssistant {
@@ -152,8 +156,9 @@ export class LunarPhaseCard extends LitElement {
 
     // Set up a new interval
     this._refreshInterval = window.setInterval(() => {
-      if (this._activeCard === 'base') {
+      if (this._activeCard === CurrentPage.BASE || this._activeCard === CurrentPage.HORIZON) {
         this.requestUpdate();
+        console.log('requestUpdate');
       } else {
         this.clearRefreshInterval();
       }
@@ -330,7 +335,6 @@ export class LunarPhaseCard extends LitElement {
 
   private togglePage = (page: CurrentPage) => {
     this._activeCard = this._activeCard === page ? CurrentPage.BASE : page;
-    console.log('togglePage', this._activeCard);
   };
 
   private measureCard() {

diff --git a/src/utils/moon.ts b/src/utils/moon.ts
@@ -105,31 +105,50 @@ export class Moon {
 
     return data;
   }
-  _getMoonTime = (today: Date): SunCalc.IMoonTimes => {
-    return SunCalc.getMoonTimes(today, this.location.latitude, this.location.longitude);
-  };
-
-  _getMoonTransit = (rise: Date, set: Date): { main: Date | null; invert: Date | null } => {
-    return SunCalc.moonTransit(rise, set, this.location.latitude, this.location.longitude);
-  };
 
-  _convertCardinal = (degrees: number): string => {
-    const cardinalPoints = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'];
-    return cardinalPoints[Math.round(degrees / 45)];
-  };
-
-  _getDirection() {
+  get todayDataItem() {
     const { azimuthDegrees, altitudeDegrees } = this._moonData;
+    const _altitudeDegData = this.moonData.altitudeDegrees;
+    const _moonFraction = this.moonData.moonFraction;
     const formatedPosition = altitudeDegrees > 0 ? 'overHorizon' : 'underHorizon';
     const cardiNalValue = this._convertCardinal(azimuthDegrees);
     const data = {
       positionFormated: this.createItem('position', this.localize(`card.${formatedPosition}`)),
       azimuthCardinal: this.createItem('direction', azimuthDegrees.toFixed(0), '°', cardiNalValue),
+      _altitudeDegData,
+      _moonFraction,
     };
     return data;
   }
+
+  get todayData() {
+    const today = new Date();
+
+    const startTime = new Date(today.setHours(0, 0, 0, 0));
+
+    const _altitudeData = this._getAltituteData(startTime);
+    const dataCotent = {
+      time: SunCalc.getMoonTimes(today, this.location.latitude, this.location.longitude),
+      altitude: this._getAltituteData(startTime),
+      timeLabels: Object.keys(_altitudeData),
+      altitudeData: Object.values(_altitudeData),
+      minMaxY: {
+        sugestedYMax: Math.ceil(Math.max(...Object.values(_altitudeData)) + 10),
+        sugestedYMin: Math.min(...Object.values(_altitudeData)) - 10,
+      },
+      moonPhase: this._moonData.illumination,
+      lang: {
+        rise: this.localize('card.moonRise'),
+        set: this.localize('card.moonSet'),
+      },
+    };
+
+    return dataCotent;
+  }
+
   _getAltituteData = (startTime: Date) => {
     const result: { [key: string]: number } = {};
+
     for (let i = 0; i < 24; i++) {
       const time = new Date(startTime.getTime() + i * 60 * 60 * 1000);
       const formatedTime = formatTime(time, this.locale);
@@ -139,32 +158,16 @@ export class Moon {
     return result;
   };
 
-  _getAltitudeToday = () => {
-    const today = new Date();
+  _getMoonTime = (today: Date): SunCalc.IMoonTimes => {
+    return SunCalc.getMoonTimes(today, this.location.latitude, this.location.longitude);
+  };
 
-    const startTime = new Date(today.setHours(0, 0, 0, 0));
-    const { altitudeDegrees, moonFraction } = this.moonData;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const data: { [key: string]: any } = {};
-
-    data['time'] = SunCalc.getMoonTimes(today, this.location.latitude, this.location.longitude);
-    const altitudeData = this._getAltituteData(startTime);
-    data['altitude'] = altitudeData;
-    data['moonPhase'] = SunCalc.getMoonIllumination(today);
-    data['moonPhase'] = {
-      ...data['moonPhase'],
-    };
-    const direction = this._getDirection();
-    data['dataItem'] = {
-      ...direction,
-      altitudeDegrees,
-      moonFraction,
-    };
+  _getMoonTransit = (rise: Date, set: Date): { main: Date | null; invert: Date | null } => {
+    return SunCalc.moonTransit(rise, set, this.location.latitude, this.location.longitude);
+  };
 
-    data['lang'] = {
-      rise: this.localize('card.moonRise'),
-      set: this.localize('card.moonSet'),
-    };
-    return data;
+  _convertCardinal = (degrees: number): string => {
+    const cardinalPoints = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW', 'N'];
+    return cardinalPoints[Math.round(degrees / 45)];
   };
 }