Skip to content

Commit

Permalink
fix custom lat long handle
Browse files Browse the repository at this point in the history
  • Loading branch information
@ngocjohn
ngocjohn committed Aug 2, 2024
1 parent 32c27af commit d3a5f39
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 37 deletions.
77 changes: 55 additions & 22 deletions src/editor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { LitElement, html, TemplateResult, css, CSSResultGroup } from 'lit';
import { LitElement, html, TemplateResult, css, CSSResultGroup, PropertyValues } from 'lit';
import { customElement, property, state } from 'lit/decorators';

// Custom card helpers
Expand All @@ -15,9 +15,6 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit

public setConfig(config: LunarPhaseCardConfig): void {
this._config = config;
if (this._config.entity) {
this._config.use_default = false;
}
}

get _entity(): string {
Expand All @@ -36,6 +33,21 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit
return this._config?.compact_view || false;
}

get _latitude(): number {
return this._config?.latitude || 0;
}

get _longitude(): number {
return this._config?.longitude || 0;
}

protected shouldUpdate(changedProps: PropertyValues): boolean {
if (!this._config || !this.hass) {
return false;
}
return super.shouldUpdate(changedProps);
}

protected render(): TemplateResult {
if (!this.hass) {
return html``;
Expand Down Expand Up @@ -67,26 +79,27 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit
}

private renderSwitches(): TemplateResult {
const defaultDisabled = this._config?.entity || (this._config?.latitude && this._config?.longitude) ? true : false;
return html`
<div class="switches">
<ha-formfield .label=${`Compact view`}>
<ha-switch
.checked=${this._compact_view !== false}
.checked=${this._compact_view}
.configValue=${'compact_view'}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${`Default latitude & longitude`}>
<ha-switch
.disabled=${this._config?.entity !== undefined}
.checked=${this._use_default !== false}
.disabled=${defaultDisabled}
.checked=${this._use_default}
.configValue=${'use_default'}
@change=${this._valueChanged}
></ha-switch>
</ha-formfield>
<ha-formfield .label=${`Show background`}>
<ha-switch
.checked=${this._show_background !== false}
.checked=${this._show_background}
.configValue=${'show_background'}
@change=${this._valueChanged}
></ha-switch>
Expand All @@ -101,13 +114,13 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit
.label=${'Latitude'}
.configValue=${'latitude'}
.value=${this._config?.latitude || ''}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
></ha-textfield>
<ha-textfield
.label=${'Longitude'}
.configValue=${'longitude'}
.value=${this._config?.longitude || ''}
@value-changed=${this._valueChanged}
@input=${this._valueChanged}
></ha-textfield>
`;
return this.panelTemplate('Latitude & Longitude', 'Set custom latitude and longitude', 'mdi:map-marker', content);
Expand All @@ -130,23 +143,43 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit
return;
}
const target = ev.target;
if (this[`_${target.configValue}`] === target.value) {
const configValue = target.configValue;

if (this[`_${configValue}`] === target.value) {
return;
}
if (target.configValue) {
if (target.value === '') {
const tmpConfig = { ...this._config };
delete tmpConfig[target.configValue];
this._config = tmpConfig;
} else {
this._config = {
...this._config,
[target.configValue]: target.checked !== undefined ? target.checked : target.value,
};
}

let newValue: any;

if (['latitude', 'longitude'].includes(configValue)) {
newValue = Number(target.value);
this._config = {
...this._config,
[configValue]: newValue,
};
} else if (newValue && newValue.length === 0) {
// Check for an empty array
const tmpConfig = { ...this._config };
delete tmpConfig[configValue];
this._config = tmpConfig;
} else {
newValue = target.checked !== undefined ? target.checked : target.value;
this._config = {
...this._config,
[configValue]: newValue,
};
}

if (newValue && newValue.length === 0) {
// Check for an empty array
const tmpConfig = { ...this._config };
delete tmpConfig[configValue];
this._config = tmpConfig;
}
console.log('value changed', this._config);
fireEvent(this, 'config-changed', { config: this._config });
}

static styles: CSSResultGroup = css`
.card-config {
width: 100%;
Expand Down
43 changes: 28 additions & 15 deletions src/lunar-phase-card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit-html/directives/style-map.js';

import SunCalc from 'suncalc3';
import { LovelaceCardEditor, hasConfigOrEntityChanged } from 'custom-card-helpers';
import { LovelaceCardEditor, hasConfigOrEntityChanged, fireEvent } from 'custom-card-helpers';
import { HomeAssistantExtended as HomeAssistant, LunarPhaseCardConfig, defaultConfig } from './types';
import { formatRelativeTime, formatTimeToHHMM } from './utils/helpers';
import { BACKGROUND } from './const';
Expand All @@ -26,8 +26,8 @@ export class LunarPhaseCard extends LitElement {

@state() private _activeCard: string = '' || 'base';
@state() private _baseMoonData: Record<string, any> = {};
@state() private latitude = 0;
@state() private longitude = 0;
@property({ type: Number }) private latitude: number = 0;
@property({ type: Number }) private longitude: number = 0;
@state() private selectedDate: string | undefined;

public static getStubConfig = (): Record<string, unknown> => {
Expand All @@ -49,7 +49,6 @@ export class LunarPhaseCard extends LitElement {
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
this._setBackgroundCss();
this.getLatLong();
this.fetchBaseMoonData();
}

Expand All @@ -58,26 +57,37 @@ export class LunarPhaseCard extends LitElement {
}

private getLatLong(): { latitude: number; longitude: number } {
if (this.config.latitude && this.config.longitude) {
// console.log('using config');
if (this.config.latitude !== undefined && this.config.longitude !== undefined) {
this.latitude = this.config.latitude;
this.longitude = this.config.longitude;
} else if (this.config.entity) {
this.config.use_default = false; // Changed to assignment
} else if (!this.config.latitude && !this.config.longitude) {
const { latitude, longitude } = this.hass.config;
this.latitude = latitude;
this.longitude = longitude;
this.config.use_default = true; // Changed to assignment
}

if (this.config.entity) {
this.config.use_default = false; // Changed to assignment

const entity = this.hass.states[this.config.entity];
if (entity) {
const { latitude, longitude } = entity.attributes.location;
this.latitude = latitude;
this.longitude = longitude;
// console.log('using entity', latitude, longitude);
this.latitude = entity.attributes.location.latitude;
this.longitude = entity.attributes.location.longitude;
}
} else if (this.config.use_default) {
// console.log('using default');
this.latitude = this.hass.config.latitude;
this.longitude = this.hass.config.longitude;
}

// Ensure the state updates and reflects in the UI
this.requestUpdate();

return { latitude: this.latitude, longitude: this.longitude };
}

toggleUseDefault() {
this.config.use_default = !this.config.use_default;
fireEvent(this, 'config-changed', { config: this.config });
}
get _showBackground(): boolean {
return this.config.show_background || false;
}
Expand Down Expand Up @@ -125,6 +135,9 @@ export class LunarPhaseCard extends LitElement {
this.selectedDate = undefined;
this.fetchBaseMoonData();
}
if (changedProps.has('config')) {
this.getLatLong();
}
}

protected shouldUpdate(changedProps: PropertyValues): boolean {
Expand Down

0 comments on commit d3a5f39

Please sign in to comment.