From 8b1ca3526012692191b4be483d185b84ee902f6a Mon Sep 17 00:00:00 2001 From: Tamsy Date: Mon, 19 Aug 2024 12:47:13 +0700 Subject: [PATCH 01/18] Creeate pt-br.json by alexandrechoske (#8) Credits go to https://github.com/alexandrechoske --- src/languages/pt-br.json | 59 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/languages/pt-br.json diff --git a/src/languages/pt-br.json b/src/languages/pt-br.json new file mode 100644 index 0000000..9d9f88b --- /dev/null +++ b/src/languages/pt-br.json @@ -0,0 +1,59 @@ +{ + "name": "Português BR", + "nativeName": "Português", + "card": { + "phase": { + "firstQuarterMoon": "Primeiro quarto", + "fullMoon": "Lua cheia", + "thirdQuarterMoon": "Último quarto", + "newMoon": "Lua nova", + "waxingCrescentMoon": "Lua crescente crescente", + "waxingGibbousMoon": "Lua crescente convexa", + "waningCrescentMoon": "Lua minguante crescente", + "waningGibbousMoon": "Lua minguante convexa" + }, + "illumination": "Iluminação", + "illuminated": "Iluminada", + "moonRise": "Nascer da lua", + "moonSet": "Pôr da lua", + "moonHigh": "Lua mais alta", + "moonAge": "Idade da lua", + "distance": "Distância", + "azimuth": "Azimute", + "altitude": "Altitude", + "fullMoon": "Lua chei", + "newMoon": "Lua nova", + "relativeTime": { + "days": "dias", + "justNow": "agora mesmo", + "minutesAgo": "há {0} minutos", + "hoursAgo": "há {0} horas", + "inMinutes": "em {0} minutos", + "inHours": "em {0} horas" + } + }, + "editor": { + "viewConfig": { + "title": "Idioma e modo de visualização", + "description": "Definir uma configuração para idioma e plano de fundo" + }, + "baseConfig": { + "title": "Latitude e Longitude", + "description": "Definir uma configuração para latitude e longitude" + }, + "optionsConfig": { + "useDefault": "Usar sistema", + "useEntity": "Usar entidade", + "useCustom": "Usar personalizado" + }, + "compactView": "Visualização compacta", + "showBackground": "Mostrar plano de fundo", + "timeFormat": "Formato de 12 horas", + "placeHolder": { + "latitude": "Inserir latitude", + "longitude": "Inserir longitude", + "customBackground": "URL ou caminho para a imagem", + "language": "Selecionar idioma" + } + } +} \ No newline at end of file From f3e2e9d433a7c776a662a1a9a5918b827419d677 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Mon, 19 Aug 2024 09:12:42 +0200 Subject: [PATCH 02/18] chore: Update language imports to include Portuguese translation --- .gitignore | 1 + scripts/missing_translations.json | 8 -------- src/languages/{pt-br.json => pt.json} | 4 ++-- src/localize/languageImports.ts | 3 +++ src/localize/languageList.json | 3 ++- 5 files changed, 8 insertions(+), 11 deletions(-) delete mode 100644 scripts/missing_translations.json rename src/languages/{pt-br.json => pt.json} (96%) diff --git a/.gitignore b/.gitignore index f4a9d51..be8eb75 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ src/test/ .DS_Store swiper-bundle.css scripts/missing_translations.json + diff --git a/scripts/missing_translations.json b/scripts/missing_translations.json deleted file mode 100644 index 1f58afa..0000000 --- a/scripts/missing_translations.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "id.json": [ - { - "key": "card.illuminated", - "value": "Illuminated" - } - ] -} \ No newline at end of file diff --git a/src/languages/pt-br.json b/src/languages/pt.json similarity index 96% rename from src/languages/pt-br.json rename to src/languages/pt.json index 9d9f88b..06720f8 100644 --- a/src/languages/pt-br.json +++ b/src/languages/pt.json @@ -1,6 +1,6 @@ { - "name": "Português BR", - "nativeName": "Português", + "name": "Portuguese", + "nativeName": "Português (Brasil)", "card": { "phase": { "firstQuarterMoon": "Primeiro quarto", diff --git a/src/localize/languageImports.ts b/src/localize/languageImports.ts index d6e0f0d..d56e0ae 100644 --- a/src/localize/languageImports.ts +++ b/src/localize/languageImports.ts @@ -5,6 +5,7 @@ import * as da from '../languages/da.json'; import * as de from '../languages/de.json'; import * as en from '../languages/en.json'; import * as id from '../languages/id.json'; +import * as pt from '../languages/pt.json'; const languages: any = { cs: cs, @@ -12,6 +13,7 @@ const languages: any = { de: de, en: en, id: id, + pt: pt, }; export const languageOptions = [ @@ -20,6 +22,7 @@ export const languageOptions = [ { key: 'de', name: de.name, nativeName: de.nativeName }, { key: 'en', name: en.name, nativeName: en.nativeName }, { key: 'id', name: id.name, nativeName: id.nativeName }, + { key: 'pt', name: pt.name, nativeName: pt.nativeName }, ]; export { languages }; diff --git a/src/localize/languageList.json b/src/localize/languageList.json index 64bbcf4..5ae2c6f 100644 --- a/src/localize/languageList.json +++ b/src/localize/languageList.json @@ -3,5 +3,6 @@ "da.json", "de.json", "en.json", - "id.json" + "id.json", + "pt.json" ] \ No newline at end of file From 197398b02ed69d44149098612e847b8f580ae0a3 Mon Sep 17 00:00:00 2001 From: Viet Ngoc <96962827+ngocjohn@users.noreply.github.com> Date: Tue, 20 Aug 2024 23:16:47 +0200 Subject: [PATCH 03/18] Update css font size for header - moon phase name (#9) * Update defaultConfig to include selected_language and set it to 'en' * chore: Update LunarPhaseCard component to include latitude and longitude in the stub config * chore: Update CSS styles for LunarPhaseCard component --- src/css/style.css | 51 +++++++++++++++++++++++++++++++++++------ src/lunar-phase-card.ts | 35 +++++++++++++++++++--------- src/types.ts | 1 + src/utils/helpers.ts | 4 +++- 4 files changed, 72 insertions(+), 19 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index b323684..fb19939 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -12,6 +12,7 @@ 'Helvetica Neue', sans-serif; } + *:focus { outline: none; } @@ -52,12 +53,17 @@ ha-card.--background { justify-content: space-between; align-items: center; padding: 8px 0 14px 6px; + width: 100%; } .lunar-card-header.flexend { justify-content: flex-end; } +.lunar-card-header.compact { + padding: 0; +} + h1 { color: var(--ha-card-header-color, --primary-text-color); font-family: var(--ha-card-header-font-family, inherit); @@ -66,13 +72,16 @@ h1 { margin-block-end: 0px; font-weight: 400; text-transform: capitalize; + font-size: x-large; } + .btn-calendar { display: block; color: var(--disabled-text-color); cursor: pointer; transition: all 0.3s ease; } + .btn-calendar:hover { color: var(--primary-text-color); opacity: 1; @@ -98,6 +107,7 @@ h1 { flex-direction: column; gap: 8px; } + .moon-image { display: block; width: 100%; @@ -108,23 +118,26 @@ h1 { user-select: none; } -.moon-image > img { +.moon-image>img { width: 100%; height: 100%; - transform: rotate(0deg); /* Initial state */ + transform: rotate(0deg); + /* Initial state */ filter: grayscale(1) brightness(1); } .moon-image img.rotatable { transform-origin: center center; will-change: transform; - transition: transform 0.5s ease; /* Smooth rotation */ + transition: transform 0.5s ease; + /* Smooth rotation */ } @keyframes fadeIn { 0% { opacity: 0; } + 100% { opacity: 1; } @@ -137,6 +150,7 @@ h1 { .moon-data { width: 100%; } + .moon-data-item { display: flex; flex-direction: row; @@ -152,14 +166,14 @@ h1 { padding-bottom: 0; } -.moon-data-item > span.label { +.moon-data-item>span.label { display: block; color: var(--primary-text-color); width: auto; text-wrap: nowrap; } -.moon-data-item > .value { +.moon-data-item>.value { display: flex; color: var(--primary-text-color); font-weight: 600; @@ -167,7 +181,8 @@ h1 { text-wrap: nowrap !important; justify-content: flex-end; } -.value > span { + +.value>span { font-weight: 400; font-size: smaller; padding-right: 2px; @@ -189,12 +204,14 @@ section { height: auto; overflow: hidden; } + .swiper-container { width: 100%; height: 100%; display: block; backdrop-filter: blur(4px); } + /* .swiper-wrapper { margin-bottom: 1rem; } */ @@ -207,10 +224,12 @@ section { .swiper-pagination { position: relative !important; } + .swiper-pagination-bullet { background-color: var(--swiper-theme-color); transition: all 0.3s ease-in-out !important; } + .swiper-pagination-bullet-active { width: 12px !important; border-radius: 0.5rem !important; @@ -225,6 +244,7 @@ section { gap: 1rem; --calendar-background-color: #ffffff1f; } + .date-input-wrapper { display: flex; width: 100%; @@ -234,6 +254,7 @@ section { gap: 1rem; text-wrap: nowrap; } + .date-input-label { display: block; color: var(--primary-text-color); @@ -241,6 +262,7 @@ section { font-weight: 600; margin-bottom: 8px; } + .date-input { display: block; width: fit-content; @@ -256,6 +278,7 @@ section { appearance: none; cursor: pointer; } + .date-input:focus { border-color: var(--primary-color); outline: none; @@ -271,6 +294,7 @@ button.date-input-btn { transition: all 0.3s ease; font-weight: 600; } + button.date-input-btn:hover { background-color: var(--primary-color); color: var(--primary-background-color); @@ -283,6 +307,7 @@ button.date-input-btn:hover { top: 1rem; right: 1rem; } + .compact-view { display: flex; width: 100%; @@ -305,6 +330,18 @@ button.date-input-btn:hover { --mdc-icon-size: 17px; } +.compact-item { + display: flex; + width: calc(100% / 3); + flex-direction: column; + justify-content: center; + align-items: center; +} + +.compact-item .icon-value { + text-wrap: nowrap; +} + .compact-item .value { color: var(--secondary-text-color); -} +} \ No newline at end of file diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index b4cf940..c075fd0 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup } from 'lit'; +import { LitElement, html, TemplateResult, PropertyValues, CSSResultGroup, nothing } from 'lit'; import { customElement, property, state } from 'lit/decorators'; import { classMap } from 'lit/directives/class-map.js'; import { styleMap } from 'lit-html/directives/style-map.js'; @@ -32,9 +32,13 @@ export class LunarPhaseCard extends LitElement { @state() private _connected: boolean = false; @state() private _refreshInterval: number | undefined; - public static getStubConfig = (): Record => { + public static getStubConfig = (hass: HomeAssistant): Record => { + const defaultLatitude = hass.config.latitude || 0; + const defaultLongitude = hass.config.longitude || 0; return { ...defaultConfig, + latitude: defaultLatitude, + longitude: defaultLongitude, }; }; @@ -73,8 +77,13 @@ export class LunarPhaseCard extends LitElement { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - this.fetchBaseMoonData(); this._setBackgroundCss(); + // Initialize Swiper only if the parent element does not have the class 'preview' + if (this.parentElement && !this.parentElement.classList.contains('preview')) { + setTimeout(() => { + this.fetchBaseMoonData(); + }, 300); + } } connectedCallback(): void { @@ -196,10 +205,10 @@ export class LunarPhaseCard extends LitElement { if (!this.hass || !this.config) { return html``; } - + const compactView = this.config.compact_view; return html` - ${this.renderHeader()} + ${!compactView ? this.renderHeader() : this._activeCard === 'calendar' ? this.renderHeader() : nothing}
${this.renderPage(this._activeCard)} @@ -222,10 +231,9 @@ export class LunarPhaseCard extends LitElement { } private renderHeader(): TemplateResult | void { - if (this.config.compact_view && this._activeCard === 'base') return; - + const compactView = this.config.compact_view && this._activeCard === 'base'; return html` -
+

${this._moonPhaseName}

this.togglePage()} class="btn-calendar click-shrink"> @@ -276,12 +284,17 @@ export class LunarPhaseCard extends LitElement { `; }; - return html` -
+ const headerNameBtn = html`
+

${this._moonPhaseName}

+
this.togglePage()} class="btn-calendar click-shrink">
+
`; + const phaseName = html`
${this._moonPhaseName}
`; + return html`
-

${this._moonPhaseName}

+ ${this.renderHeader()} +
${moonFraction.value} ${moonFraction.unit} ${this.localize('card.illuminated')}
${renderCompactItem('mdi:progress-clock', moonAge.value, moonAge.unit, moonAge.label)} diff --git a/src/types.ts b/src/types.ts index a4580aa..fa71ef9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -53,6 +53,7 @@ export const defaultConfig: Partial = { use_custom: false, use_entity: false, show_background: true, + selected_language: 'en', compact_view: true, '12hr_format': false, }; diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 38f7d6b..fa10f5b 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -51,8 +51,10 @@ export function formatTimeToHHMM(dateString: string, lang: string, timeFormat: b if (!dateString || dateString === '') { return ''; } + // console.log(dateString, lang, timeFormat); + const newLang = lang || 'en-US'; const date = new Date(dateString); - return date.toLocaleTimeString(lang, { hour: '2-digit', minute: '2-digit', hour12: timeFormat }); + return date.toLocaleTimeString(newLang, { hour: '2-digit', minute: '2-digit', hour12: timeFormat }); } export function formatDate(date: Date): string { From ca4bb539a974589602ad96397ee7d59f1435324e Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:12:26 +0200 Subject: [PATCH 04/18] chore: Update repository URL in package.json --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 45dc536..b175c5f 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "author": "Viet Ngoc", "repository": { "type": "git", - "url": "https://github.com/ngocjohn/lunar-phase-card" + "url": "https://github.com/ngocjohn/lunar-phase-card", + "repo": "ngocjohn/lunar-phase-card" }, "module": "lunar-phase-card.js", "license": "MIT", From 2c02bedc387cbfc4d6bd8dd09d5451e4a283a467 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:12:43 +0200 Subject: [PATCH 05/18] chore: Update repository URL and version in const.ts --- src/const.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/const.ts b/src/const.ts index 191ef06..08ad140 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1,6 +1,7 @@ -import { version } from '../package.json'; +import { version, repository } from '../package.json'; -export const CARD_VERSION = version; +export const REPOSITORY = repository.repo; +export const CARD_VERSION = `v${version}`; export const BASE_REFRESH_INTERVAL = 30 * 1000; // 30 seconds import moon_phase_0 from './images/moon_phase_0.png'; From ae3b274052a607faf1339ec33f27232a539e820a Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:12:53 +0200 Subject: [PATCH 06/18] chore: Add compareVersions function and fetchLatestReleaseTag --- src/utils/helpers.ts | 33 +++++++++++++++++++++++++++++++++ src/utils/loader.ts | 20 ++++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index fa10f5b..f0dcac7 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -63,3 +63,36 @@ export function formatDate(date: Date): string { const dd = String(date.getDate()).padStart(2, '0'); return `${yyyy}-${mm}-${dd}`; } + +export function compareVersions(version1, version2) { + // Remove the leading 'v' if present + version1 = version1.startsWith('v') ? version1.slice(1) : version1; + version2 = version2.startsWith('v') ? version2.slice(1) : version2; + + // Split the version into parts: major, minor, patch, and pre-release + const parts1 = version1.split(/[\.-]/).map((part) => (isNaN(part) ? part : parseInt(part, 10))); + const parts2 = version2.split(/[\.-]/).map((part) => (isNaN(part) ? part : parseInt(part, 10))); + + // Compare each part + for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) { + const part1 = parts1[i] !== undefined ? parts1[i] : typeof parts2[i] === 'string' ? '' : 0; + const part2 = parts2[i] !== undefined ? parts2[i] : typeof parts1[i] === 'string' ? '' : 0; + + if (typeof part1 === 'number' && typeof part2 === 'number') { + if (part1 > part2) return 1; + if (part1 < part2) return -1; + } else { + // Handle pre-release versions + if (typeof part1 === 'string' && typeof part2 === 'string') { + if (part1 > part2) return 1; + if (part1 < part2) return -1; + } else if (typeof part1 === 'string') { + return -1; // Pre-release versions are considered lower + } else if (typeof part2 === 'string') { + return 1; // Release version is higher than pre-release + } + } + } + + return 0; // Versions are equal +} diff --git a/src/utils/loader.ts b/src/utils/loader.ts index 953b77e..185f752 100644 --- a/src/utils/loader.ts +++ b/src/utils/loader.ts @@ -1,3 +1,5 @@ +import { REPOSITORY } from '../const'; + // Hack to load ha-components needed for editor export const loadHaComponents = () => { if (!customElements.get('ha-form')) { @@ -23,3 +25,21 @@ export const loadCustomElement = async (name: string) => { await customElements.whenDefined(name); return customElements.get(name) as T; }; + +export async function fetchLatestReleaseTag() { + const apiUrl = `https://api.github.com/repos/${REPOSITORY}/releases/latest`; + + try { + const response = await fetch(apiUrl); + if (response.ok) { + const data = await response.json(); + const releaseTag = data.tag_name; + console.log('Latest release tag:', releaseTag); + return releaseTag; + } else { + console.error('Failed to fetch the latest release tag:', response.statusText); + } + } catch (error) { + console.error('Error fetching the latest release tag:', error); + } +} From 7f3902ab27b02abe9e66b845c5b502a6a61ca133 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:13:20 +0200 Subject: [PATCH 07/18] add Updates notification --- src/css/editor.css | 50 ++++++++++++++++++++++++-- src/editor.ts | 89 ++++++++++++++++++++++++++++++++++++++-------- 2 files changed, 122 insertions(+), 17 deletions(-) diff --git a/src/css/editor.css b/src/css/editor.css index 4ca380c..d25792e 100644 --- a/src/css/editor.css +++ b/src/css/editor.css @@ -19,7 +19,7 @@ ha-textfield { ha-formfield { padding-bottom: 8px; - width: 100%; + width: max-content; } ha-expansion-panel .container { @@ -30,15 +30,18 @@ ha-expansion-panel .container { padding-inline: 0.5rem; cursor: pointer; } + .custom-background-wrapper { display: inline-flex; align-items: center; gap: 1rem; text-wrap: nowrap; } + .file-input { display: none; } + .file-upload { cursor: pointer; display: inline-block; @@ -47,9 +50,11 @@ ha-expansion-panel .container { border-radius: 8px; color: var(--primary-text-color); } + .file-upload:hover { background-color: var(--primary-color); } + .radios-btn { display: flex; align-items: center; @@ -57,7 +62,46 @@ ha-expansion-panel .container { } .version { - margin-top: 1rem; + margin-top: 2rem; color: var(--secondary-text-color); - text-align: start; + justify-content: space-around; + align-items: stretch; + display: flex; + flex-direction: column; + gap: 8px; + position: absolute; + bottom: auto; +} + +.version .update { + color: var(--accent-color); + opacity: 0.7; +} + +#toast { + visibility: hidden; + opacity: 0; + max-height: 0; } + +#toast.show { + visibility: visible; + opacity: 1; + max-height: 100px; + animation: fadeIn 0.3s ease-in-out forwards; + display: flex; + justify-content: center; + align-items: center; +} + +ha-alert { + width: 100%; +} + +ha-alert>.alert-icon { + display: flex; + height: 100%; + align-items: center; + justify-content: center; + padding-inline: 0.5rem; +} \ No newline at end of file diff --git a/src/editor.ts b/src/editor.ts index dc801d1..a860caf 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -6,8 +6,11 @@ import { customElement, property, state } from 'lit/decorators'; import { fireEvent, LovelaceCardEditor } from 'custom-card-helpers'; import { HomeAssistantExtended as HomeAssistant, LunarPhaseCardConfig } from './types'; + import { languageOptions, localize } from './localize/localize'; -import { loadHaComponents } from './utils/loader'; +import { loadHaComponents, fetchLatestReleaseTag } from './utils/loader'; +import { compareVersions } from './utils/helpers'; + import { CARD_VERSION } from './const'; import editorcss from './css/editor.css'; @@ -20,8 +23,9 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit @state() private _newLatitude: number | string = ''; @state() private _newLongitude: number | string = ''; + @state() private _latestRelease = ''; - private _systemLanguage = localStorage.getItem('selectedLanguage') || 'en'; + private _systemLanguage = this.hass?.language; public setConfig(config: LunarPhaseCardConfig): void { this._config = config; @@ -29,18 +33,12 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit protected firstUpdated(changedProps: PropertyValues): void { super.firstUpdated(changedProps); - this._handleFirstUpdate(); - } - private _handleFirstUpdate(): void { - if (!this._config || !this.hass) { - return; - } - if (this._config.use_default) { - this._config.entity = ''; - this._config.latitude = this.hass.config.latitude; - this._config.longitude = this.hass.config.longitude; - fireEvent(this, 'config-changed', { config: this._config }); + if (this._compareVersions() !== 0) { + const toast = this.shadowRoot?.getElementById('toast') as HTMLElement; + const version = this.shadowRoot?.querySelector('.version') as HTMLElement; + version.style.visibility = 'hidden'; + toast.classList.add('show'); } } @@ -67,7 +65,14 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit connectedCallback() { super.connectedCallback(); void loadHaComponents(); + void fetchLatestReleaseTag().then((releaseTag) => { + this._latestRelease = releaseTag; + }); + if (process.env.ROLLUP_WATCH === 'true') { + window.LunarEditor = this; + } } + disconnectedCallback(): void { super.disconnectedCallback(); } @@ -78,8 +83,15 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit } return html` + ${this._renderToast()}
${this._renderBaseConfigSelector()} ${this.renderViewConfiguration()}
-
Version: ${CARD_VERSION}
+
+ ${CARD_VERSION === this._latestRelease + ? CARD_VERSION + : html`version: ${CARD_VERSION} -> ${this._latestRelease}`} +
`; } @@ -323,6 +335,51 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit `; } + private _renderToast(): TemplateResult { + const compareVersionsResult = this._compareVersions(); + if (compareVersionsResult === 0) { + return html``; + } + + const content = { + '-1': { + title: 'New version available', + icon: '🎉', + }, + 1: { + title: 'You are using a beta version', + icon: '🚨', + }, + }; + + return html` +
+ + ${content[compareVersionsResult].icon} + Latest: ${this._latestRelease} + +
+ `; + } + + private _handleAlertDismissed(): void { + const toast = this.shadowRoot?.getElementById('toast') as HTMLElement; + const version = this.shadowRoot?.querySelector('.version') as HTMLElement; + if (toast) { + toast.classList.remove('show'); + version.style.visibility = 'visible'; + } + } + + private _compareVersions() { + return compareVersions(CARD_VERSION, this._latestRelease); + } + private async _handleFilePicked(ev: Event): Promise { const input = ev.target as HTMLInputElement; if (!input.files || input.files.length === 0) { @@ -488,6 +545,10 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit } declare global { + interface Window { + LunarEditor: LunarPhaseCardEditor; + } + interface HTMLElementTagNameMap { 'lunar-phase-card-editor': LunarPhaseCardEditor; } From 73934e0a253b5444845af608c78ceb0b46e04df2 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:17:07 +0200 Subject: [PATCH 08/18] bump v1.1.1-beta3 --- package.json | 2 +- src/lunar-phase-card.ts | 7 ------- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/package.json b/package.json index b175c5f..cd2560d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.1.1-beta", + "version": "1.1.1-beta3", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index c075fd0..a4db9f9 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -284,13 +284,6 @@ export class LunarPhaseCard extends LitElement { `; }; - const headerNameBtn = html`
-

${this._moonPhaseName}

-
this.togglePage()} class="btn-calendar click-shrink"> - -
-
`; - const phaseName = html`
${this._moonPhaseName}
`; return html`
${this.renderHeader()} From 5075ffa7cad1d553b61f583ca90556a2219225fe Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Wed, 21 Aug 2024 00:33:56 +0200 Subject: [PATCH 09/18] v1.2.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cd2560d..e9c03d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.1.1-beta3", + "version": "1.2.0", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", From 7a65592e618570b4e92285619df16fbf6cd28df6 Mon Sep 17 00:00:00 2001 From: Viet Ngoc <96962827+ngocjohn@users.noreply.github.com> Date: Wed, 21 Aug 2024 03:40:17 +0200 Subject: [PATCH 10/18] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6a7b085..bf0e9e5 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ # 🌘 Lunar Phase Card - + ## From d665529242e468c63d1cbe7838ac7be178da3b4c Mon Sep 17 00:00:00 2001 From: Carles Fernandez Date: Wed, 21 Aug 2024 15:57:30 +0200 Subject: [PATCH 11/18] Add Catalan language (#10) --- README.md | 5 +++ src/languages/ca.json | 59 +++++++++++++++++++++++++++++++++ src/localize/languageImports.ts | 3 ++ src/localize/languageList.json | 1 + 4 files changed, 68 insertions(+) create mode 100644 src/languages/ca.json diff --git a/README.md b/README.md index bf0e9e5..5853bf3 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,13 @@ | Language Code | Language (Native Name) | | ------------- | ---------------------- | +| `ca.json` | Català | | `cs.json` | Čeština | +| `da.json` | Dansk | +| `de.json` | Deutsch | | `en.json` | English | +| `id.json` | Bahasa Indonesia | +| `pt.json` | Português (Brasil) | diff --git a/src/languages/ca.json b/src/languages/ca.json new file mode 100644 index 0000000..d8c70c2 --- /dev/null +++ b/src/languages/ca.json @@ -0,0 +1,59 @@ +{ + "name": "Catalan", + "nativeName": "Català", + "card": { + "phase": { + "firstQuarterMoon": "Quart creixent", + "fullMoon": "Lluna plena", + "thirdQuarterMoon": "Quart minvant", + "newMoon": "Lluna nova", + "waxingCrescentMoon": "Lluna creixent", + "waxingGibbousMoon": "Gibosa creixent", + "waningCrescentMoon": "Lluna minvant", + "waningGibbousMoon": "Gibosa minvant" + }, + "illumination": "Il·luminació", + "illuminated": "Il·luminada", + "moonRise": "Sortida de la lluna", + "moonSet": "Posta de la lluna", + "moonHigh": "Punt més alt de la lluna", + "moonAge": "Edat de la lluna", + "distance": "Distància", + "azimuth": "Azimut", + "altitude": "Elevació", + "fullMoon": "Lluna plena", + "newMoon": "Lluna nova", + "relativeTime": { + "days": "dies", + "justNow": "ara", + "minutesAgo": "fa {0} minuts", + "hoursAgo": "fa {0} hores", + "inMinutes": "d'aquí a {0} minuts", + "inHours": "d'aqui a {0} hores" + } + }, + "editor": { + "viewConfig": { + "title": "Llenguatge i mode de vista", + "description": "Fixa una configuració per l'idioma i el fons" + }, + "baseConfig": { + "title": "Latitud i longitud", + "description": "Fixa una configuració per la latitud i la longitud" + }, + "optionsConfig": { + "useDefault": "Fer servir el sistema", + "useEntity": "Fer servir l'entitat", + "useCustom": "Personalitza" + }, + "compactView": "Vista compacta", + "showBackground": "Mostra el fons", + "timeFormat": "Format del temps de 12 hores", + "placeHolder": { + "latitude": "Entra la latitud", + "longitude": "Entra la longitud", + "customBackground": "URL o camí a la imatge del fons", + "language": "Selecciona l'idioma" + } + } +} \ No newline at end of file diff --git a/src/localize/languageImports.ts b/src/localize/languageImports.ts index d56e0ae..2c31246 100644 --- a/src/localize/languageImports.ts +++ b/src/localize/languageImports.ts @@ -1,5 +1,6 @@ // This file is generated automatically by the generate-lang-imports script. Do not modify it manually. +import * as ca from '../languages/ca.json'; import * as cs from '../languages/cs.json'; import * as da from '../languages/da.json'; import * as de from '../languages/de.json'; @@ -8,6 +9,7 @@ import * as id from '../languages/id.json'; import * as pt from '../languages/pt.json'; const languages: any = { + ca: ca, cs: cs, da: da, de: de, @@ -17,6 +19,7 @@ const languages: any = { }; export const languageOptions = [ + { key: 'ca', name: ca.name, nativeName: ca.nativeName }, { key: 'cs', name: cs.name, nativeName: cs.nativeName }, { key: 'da', name: da.name, nativeName: da.nativeName }, { key: 'de', name: de.name, nativeName: de.nativeName }, diff --git a/src/localize/languageList.json b/src/localize/languageList.json index 5ae2c6f..3db2ac5 100644 --- a/src/localize/languageList.json +++ b/src/localize/languageList.json @@ -1,4 +1,5 @@ [ + "ca.json", "cs.json", "da.json", "de.json", From d7899b98f76eca9494d355f72673fd66a5e6aa14 Mon Sep 17 00:00:00 2001 From: ThibaultDenoual Date: Thu, 22 Aug 2024 16:27:02 +0200 Subject: [PATCH 12/18] Add french language (#11) --- README.md | 1 + src/languages/fr.json | 59 +++++++++++++++++++++++++++++++++ src/localize/languageImports.ts | 3 ++ src/localize/languageList.json | 1 + 4 files changed, 64 insertions(+) create mode 100644 src/languages/fr.json diff --git a/README.md b/README.md index 5853bf3..689e2a0 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,7 @@ | `da.json` | Dansk | | `de.json` | Deutsch | | `en.json` | English | +| `fr.json` | Français | | `id.json` | Bahasa Indonesia | | `pt.json` | Português (Brasil) | diff --git a/src/languages/fr.json b/src/languages/fr.json new file mode 100644 index 0000000..0f55d00 --- /dev/null +++ b/src/languages/fr.json @@ -0,0 +1,59 @@ +{ + "name": "French", + "nativeName": "Français", + "card": { + "phase": { + "firstQuarterMoon": "Premier quartier", + "fullMoon": "Pleine lune", + "thirdQuarterMoon": "Dernier quartier", + "newMoon": "Nouvelle lune", + "waxingCrescentMoon": "Premier croissant", + "waxingGibbousMoon": "Lune gibbeuse croissante", + "waningCrescentMoon": "Dernier croissant", + "waningGibbousMoon": "Lune gibbeuse décroissante" + }, + "illumination": "Illumination", + "illuminated": "Illuminé", + "moonRise": "Lever de la lune", + "moonSet": "Coucher de la lune", + "moonHigh": "Lune au plus haut", + "moonAge": "Âge de la lune", + "distance": "Distance", + "azimuth": "Azimuth", + "altitude": "Altitude", + "fullMoon": "Pleine lune", + "newMoon": "Nouvelle lune", + "relativeTime": { + "days": "jours", + "justNow": "maintenant", + "minutesAgo": "il y a {0} minutes", + "hoursAgo": "il y a {0} heures", + "inMinutes": "dans {0} minutes", + "inHours": "dans {0} heures" + } + }, + "editor": { + "viewConfig": { + "title": "Langue et affichage", + "description": "Configuration de la langue et du fond d'écran" + }, + "baseConfig": { + "title": "Latitude et Longitude", + "description": "Configuration de la latitude et de la longitude" + }, + "optionsConfig": { + "useDefault": "Système", + "useEntity": "Entitée", + "useCustom": "Custom" + }, + "compactView": "Affichage compact", + "showBackground": "Afficher fond d'écran", + "timeFormat": "Format 12h", + "placeHolder": { + "latitude": "Entrer latitude", + "longitude": "Entrer longitude", + "customBackground": "URL ou chemin vers une image", + "language": "Langue" + } + } +} \ No newline at end of file diff --git a/src/localize/languageImports.ts b/src/localize/languageImports.ts index 2c31246..36a6b26 100644 --- a/src/localize/languageImports.ts +++ b/src/localize/languageImports.ts @@ -5,6 +5,7 @@ import * as cs from '../languages/cs.json'; import * as da from '../languages/da.json'; import * as de from '../languages/de.json'; import * as en from '../languages/en.json'; +import * as fr from '../languages/fr.json'; import * as id from '../languages/id.json'; import * as pt from '../languages/pt.json'; @@ -14,6 +15,7 @@ const languages: any = { da: da, de: de, en: en, + fr: fr, id: id, pt: pt, }; @@ -24,6 +26,7 @@ export const languageOptions = [ { key: 'da', name: da.name, nativeName: da.nativeName }, { key: 'de', name: de.name, nativeName: de.nativeName }, { key: 'en', name: en.name, nativeName: en.nativeName }, + { key: 'fr', name: fr.name, nativeName: fr.nativeName }, { key: 'id', name: id.name, nativeName: id.nativeName }, { key: 'pt', name: pt.name, nativeName: pt.nativeName }, ]; diff --git a/src/localize/languageList.json b/src/localize/languageList.json index 3db2ac5..f924aab 100644 --- a/src/localize/languageList.json +++ b/src/localize/languageList.json @@ -4,6 +4,7 @@ "da.json", "de.json", "en.json", + "fr.json", "id.json", "pt.json" ] \ No newline at end of file From f7cff206174596d6349a5b27405262085957da82 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Thu, 22 Aug 2024 16:53:51 +0200 Subject: [PATCH 13/18] chore: Bump version to 1.3.0-beta_1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e9c03d3..7f4f440 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lunar-phase-card", - "version": "1.2.0", + "version": "1.3.0-beta_1", "description": "Lovelace custom card for tracking Moon phases", "keywords": [ "home-assistant", From 1bab9c6c84e8eb91ac878b802aa2eadd428c4fc5 Mon Sep 17 00:00:00 2001 From: Viet Ngoc <96962827+ngocjohn@users.noreply.github.com> Date: Sat, 24 Aug 2024 15:57:46 +0200 Subject: [PATCH 14/18] Add font customization options and styles (#13) * chore: Add font customization options * add Font options withi UI Editor * feat: Add font options for UI Editor * chore: Update font customization options and styles * chore: Add utility function for deep merging objects * chore: Update background and font customization options * chore: Update font customization options and styles --- src/const.ts | 18 ++ src/css/editor.css | 32 ++- src/css/style.css | 60 ++--- src/editor.ts | 557 ++++++++++++++++++++++----------------- src/languages/ca.json | 20 ++ src/languages/cs.json | 20 ++ src/languages/da.json | 20 ++ src/languages/de.json | 20 ++ src/languages/en.json | 49 ++++ src/languages/fr.json | 20 ++ src/languages/id.json | 20 ++ src/languages/pt.json | 20 ++ src/localize/string.json | 20 ++ src/lunar-phase-card.ts | 28 +- src/types.ts | 23 ++ src/utils/ha-helper.ts | 34 +++ 16 files changed, 676 insertions(+), 285 deletions(-) create mode 100644 src/utils/ha-helper.ts diff --git a/src/const.ts b/src/const.ts index 08ad140..ad5324f 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1,4 +1,5 @@ import { version, repository } from '../package.json'; +import { FontSizeOptions, FontTextTransformOptions, FontCustomStyles } from './types'; export const REPOSITORY = repository.repo; export const CARD_VERSION = `v${version}`; @@ -42,3 +43,20 @@ export const MOON_IMAGES = [ moon_phase_14, moon_phase_15, ]; + +export const FONTSIZES: FontSizeOptions[] = ['auto', 'small', 'medium', 'large', 'x-large', 'xx-large']; +export const FONTSTYLES: FontTextTransformOptions[] = ['none', 'capitalize', 'uppercase', 'lowercase']; + +export const FONTCOLORS: string[] = [ + 'white', + 'black', + 'red', + 'green', + 'blue', + 'yellow', + 'orange', + 'purple', + 'pink', + 'brown', + 'gray', +]; diff --git a/src/css/editor.css b/src/css/editor.css index d25792e..b871181 100644 --- a/src/css/editor.css +++ b/src/css/editor.css @@ -10,20 +10,40 @@ display: flex; } -ha-select, ha-textfield { display: block; width: 100%; +} + + +ha-select { + width: 100%; +} + + +.font-config-content { + display: grid; + grid-gap: 8px; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 8px; + align-items: center; +} + +.font-config-type { + color: var(--secondary-text-color); + display: flex; + padding: 8px; + justify-content: space-between; + align-items: center; } -ha-formfield { - padding-bottom: 8px; - width: max-content; +.font-config-type .title { + font-weight: 500; + text-transform: uppercase; } -ha-expansion-panel .container { - padding: 0px 1rem !important; +.font-config-type .desc { + font-weight: 400; } .right-icon { diff --git a/src/css/style.css b/src/css/style.css index fb19939..b5b9b22 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -1,16 +1,12 @@ :host { - font-family: - system-ui, - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - Oxygen, - Ubuntu, - Cantarell, - 'Open Sans', - 'Helvetica Neue', - sans-serif; + --swiper-pagination-bullet-inactive-color: var(--secondary-text-color); + --swiper-pagination-bottom: 0; + --lunar-card-padding: 12px; + --lunar-card-header-font-color: var(--lunar-card-header-font-color, #212121); + --lunar-card-label-font-color: var(--lunar-card-label-font-color, #212121); + --lunar-card-header-text-transform: capitalize; + --lunar-card-header-font-size: x-large; + --lunar-card-label-font-size: 14px; } *:focus { @@ -25,27 +21,20 @@ ha-card { height: auto; background-color: var(--card-background-color); letter-spacing: 0.5px; - padding: 1rem; - --swiper-pagination-bullet-inactive-color: var(--secondary-text-color); - --swiper-pagination-bottom: 0; + padding: var(--lunar-card-padding, 12px); + --primary-text-color: var(--lunar-card-label-font-color, #212121); + --swiper-theme-color: var(--primary-text-color); } -/* @media screen and (max-width: 800px) { - .moon-image { - width: 100%; - max-width: 100px !important; - max-height: 100px !important; - } -} */ - ha-card.--background { background-size: cover; background-position: bottom; background-repeat: no-repeat; background-image: var(--lunar-background-image); transition: all 0.5s ease; - --primary-text-color: #e1e1e1; + --primary-text-color: var(--lunar-card-label-font-color, #e1e1e1); --swiper-theme-color: var(--primary-text-color); + } .lunar-card-header { @@ -64,27 +53,31 @@ ha-card.--background { padding: 0; } +ha-card.--background h1 { + color: var(--lunar-card-header-font-color, #e1e1e1); +} + h1 { - color: var(--ha-card-header-color, --primary-text-color); + color: var(--lunar-card-header-font-color, var(--primary-text-color)); font-family: var(--ha-card-header-font-family, inherit); display: block; margin-block-start: 0px; margin-block-end: 0px; font-weight: 400; - text-transform: capitalize; - font-size: x-large; + text-transform: var(--lunar-card-header-text-transform, capitalize); + font-size: var(--lunar-card-header-font-size, x-large); } .btn-calendar { display: block; - color: var(--disabled-text-color); + color: var(--lunar-card-label-font-color); cursor: pointer; - transition: all 0.3s ease; + opacity: 0.4; } .btn-calendar:hover { - color: var(--primary-text-color); - opacity: 1; + color: var(--lunar-card-label-font-color); + opacity: 0.8; } .click-shrink { @@ -101,6 +94,8 @@ h1 { justify-content: space-between; align-items: center; gap: 1.5rem; + font-size: var(--lunar-card-label-font-size, 14px); + text-transform: var(--lunar-card-label-text-transform, none); } .lunar-card-content.flex-col { @@ -343,5 +338,6 @@ button.date-input-btn:hover { } .compact-item .value { - color: var(--secondary-text-color); + color: var(--lunar-card-label-font-color); + opacity: 0.8; } \ No newline at end of file diff --git a/src/editor.ts b/src/editor.ts index a860caf..b0846b7 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -5,30 +5,27 @@ import { customElement, property, state } from 'lit/decorators'; // Custom card helpers import { fireEvent, LovelaceCardEditor } from 'custom-card-helpers'; -import { HomeAssistantExtended as HomeAssistant, LunarPhaseCardConfig } from './types'; +import { HomeAssistantExtended as HomeAssistant, LunarPhaseCardConfig, FontCustomStyles, defaultConfig } from './types'; import { languageOptions, localize } from './localize/localize'; import { loadHaComponents, fetchLatestReleaseTag } from './utils/loader'; import { compareVersions } from './utils/helpers'; +import { deepMerge, InitializeDefaultConfig } from './utils/ha-helper'; -import { CARD_VERSION } from './const'; +import { CARD_VERSION, FONTCOLORS, FONTSTYLES, FONTSIZES } from './const'; import editorcss from './css/editor.css'; @customElement('lunar-phase-card-editor') export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEditor { @property({ attribute: false }) public hass!: HomeAssistant; - @state() private _config?: LunarPhaseCardConfig; - @property({ type: String }) selectedOption: string = 'url'; - - @state() private _newLatitude: number | string = ''; - @state() private _newLongitude: number | string = ''; + @state() private _config!: LunarPhaseCardConfig; @state() private _latestRelease = ''; private _systemLanguage = this.hass?.language; - public setConfig(config: LunarPhaseCardConfig): void { - this._config = config; + public async setConfig(config: LunarPhaseCardConfig): Promise { + this._config = this._config ? config : deepMerge(InitializeDefaultConfig(), config); } protected firstUpdated(changedProps: PropertyValues): void { @@ -50,18 +47,6 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit return localize(string, this.selectedLanguage, search, replace); }; - get _show_background(): boolean { - return this._config?.show_background || false; - } - - get _compact_view(): boolean { - return this._config?.compact_view || false; - } - - get _custom_background(): string { - return this._config?.custom_background || ''; - } - connectedCallback() { super.connectedCallback(); void loadHaComponents(); @@ -77,6 +62,8 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit super.disconnectedCallback(); } + /* --------------------------------- RENDERS -------------------------------- */ + protected render(): TemplateResult { if (!this.hass) { return html``; @@ -84,59 +71,21 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit return html` ${this._renderToast()} -
${this._renderBaseConfigSelector()} ${this.renderViewConfiguration()}
+
${this._renderBaseConfigSelector()} ${this._renderViewConfiguration()} + ${this._renderFontConfiguration()}
+
${CARD_VERSION === this._latestRelease - ? CARD_VERSION - : html`version: ${CARD_VERSION} -> ${this._latestRelease}`}${ + CARD_VERSION === this._latestRelease + ? CARD_VERSION + : html`version: ${CARD_VERSION} -> ${this._latestRelease}` + }
`; } - private _handleRadioChange(ev): void { - if (!this._config || !this.hass) { - return; - } - const target = ev.target; - const configValue = target.value; - - if (this._config[configValue] === true) { - return; - } - - const updates: Partial = {}; - const radiosOptions = this._getBaseConfigSelector().options.map((item) => item.key); - radiosOptions.forEach((item) => { - if (item === configValue) { - updates[item] = true; - } else { - updates[item] = false; - } - }); - - if (configValue === 'use_custom') { - updates.entity = ''; - } - if (configValue === 'use_entity') { - this._newLatitude = ''; - this._newLongitude = ''; - } - - if (configValue === 'use_default') { - updates.entity = ''; - updates.latitude = this.hass.config.latitude; - updates.longitude = this.hass.config.longitude; - } - - if (Object.keys(updates).length > 0) { - this._config = { ...this._config, ...updates }; - console.log('updates', updates); - fireEvent(this, 'config-changed', { config: this._config }); - } - } - private _renderBaseConfigSelector(): TemplateResult { const radiosOptions = this._getBaseConfigSelector().options; @@ -152,52 +101,68 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit `; }); - const customLatLongForms = html` - - - `; - const contentWrapp = html`
${radios}
- ${this._config?.use_default ? this._renderUseDefault() : ''} - ${this._config?.use_custom ? customLatLongForms : ''} - ${this._config?.use_entity ? this._renderEntityPicker() : ''} + ${this._config?.use_default + ? this._renderUseDefault() + : this._config?.use_custom + ? this._renderCustomLatLong() + : this._config?.use_entity + ? this._renderEntityPicker() + : ''}
`; - return this.panelTemplate('baseConfig', 'baseConfig', 'mdi:cog', contentWrapp); + + return this.panelTemplate('baseConfig', 'baseConfig', 'mdi:cog', contentWrapp, true); } private _renderUseDefault(): TemplateResult { - const latitude = this._config?.latitude || this.hass.config.latitude; - const longitude = this._config?.longitude || this.hass.config.longitude; - const content = html` - - - `; - return content; + const latLong = [ + { label: 'Latitude', value: this._config?.latitude }, + { label: 'Longitude', value: this._config?.longitude }, + ]; + + return html`
+ ${latLong.map((item) => { + return html` `; + })} +
`; + } + + private _renderCustomLatLong(): TemplateResult { + const latLong = [ + { label: this.localize('editor.placeHolder.latitude'), configKey: 'latitude' }, + { label: this.localize('editor.placeHolder.longitude'), configKey: 'longitude' }, + ]; + + return html`
+ ${latLong.map((item) => { + return html` + + `; + })} +
`; } private _renderEntityPicker(): TemplateResult { + // Filter entities with moon_phase const entities = Object.keys(this.hass.states) .filter((entity) => entity.startsWith('sensor') && entity.endsWith('_moon_phase')) - .filter((entity) => entity.startsWith('sensor') && !entity.endsWith('next_moon_phase')) - .sort(); + .filter((entity) => entity.startsWith('sensor') && !entity.endsWith('next_moon_phase')); + + // Filter entities with latitude and longitude + const entitiesWithLatLong = Object.keys(this.hass.states).filter( + (entity) => this.hass.states[entity].attributes.latitude && this.hass.states[entity].attributes.longitude, + ); + + const combinedEntities = [...entities, 'separator', ...entitiesWithLatLong]; + const entityPicker = html` `; + const entitySelected = this._config?.entity ? true : false; const entityLatLong = this._getEntityLatLong(); - const entityContent = entityLatLong.map((item) => { - return html` `; - }); - const content = html` ${entityPicker} ${entitySelected ? entityContent : ''} `; - return content; - } - - private _getEntityLatLong(): { label: string; value: number | string }[] { - if (!this._config?.entity) { - return []; - } + const entityContent = html`
+ ${entityLatLong.map((item) => { + return html` `; + })} +
`; - const entity = this.hass.states[this._config.entity]; - if (!entity || !entity.attributes) { - return []; - } + const content = html` ${entityPicker} ${entitySelected ? entityContent : ''} `; - return [ - { - label: 'City', - value: entity.attributes.location.name, - }, - { - label: 'Latitude', - value: entity.attributes.location.latitude, - }, - { - label: 'Longitude', - value: entity.attributes.location.longitude, - }, - ]; + return content; } - private renderViewConfiguration(): TemplateResult { + private _renderViewConfiguration(): TemplateResult { const langOpts = [...languageOptions.sort((a, b) => a.name.localeCompare(b.name))]; + // Map langOpts to the format expected by _haComboBox + const itemsLang = langOpts.map((lang) => ({ + value: lang.key, + label: `${lang.name} (${lang.nativeName})`, + })); + + const viewItemMap = [ + { label: 'compactView', configValue: 'compact_view' }, + { label: 'showBackground', configValue: 'show_background' }, + { label: 'timeFormat', configValue: '12hr_format' }, + ]; const viewOptions = html`
- - - - - - - - + ${viewItemMap.map((item) => this._tempCheckBox(item.label, item.configValue, item.configValue))}
`; - const languageSelect = html` - ev.stopPropagation()} - > - ${langOpts.map( - (lang) => - html`${lang.nativeName ? lang.nativeName : lang.name} `, - )} - + + // Create the ha-combo-box using the _haComboBox method + const langComboBox = html` + ${this._haComboBox( + itemsLang, // Passing the mapped language options + 'placeHolder.language', // Localization key for the label + this._config?.selected_language || this._systemLanguage, // Currently selected language + 'selected_language', // Config value key + false, // Allow custom value + )} `; const textFormInput = html` @@ -293,10 +226,10 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit - ${!this._custom_background + ${!this._config?.custom_background ? html` this.shadowRoot?.getElementById('file-upload-new')?.click()}> Upload @@ -316,16 +249,83 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit `}
`; - const content = html` ${viewOptions} ${languageSelect} ${textFormInput} `; + const content = html` ${viewOptions} ${langComboBox} ${textFormInput} `; return this.panelTemplate('viewConfig', 'viewConfig', 'mdi:image', content); } - private panelTemplate(title: string, secondary: string, icon: string, content: TemplateResult): TemplateResult { + private _renderFontConfiguration(): TemplateResult { + const _fontPrefix = 'fontOptions'; + + // Helper function for localization + const localizeKey = (key: string) => this.localize(`editor.${_fontPrefix}.${key}`); + + const createFontConfigRow = (prefix: 'header' | 'label') => { + // Function to generate the ha-combo-box elements + const createComboBox = (type: 'size' | 'style' | 'color', allowCustomValue = true) => { + const configKey = `${prefix}_font_${type}`; + + // Ensure font_customize is defined, fallback to defaults if undefined + const fontCustomize = this._config?.font_customize ?? defaultConfig.font_customize; + + const items = + type === 'color' + ? FONTCOLORS.map((color) => ({ value: color, label: color })) + : type === 'size' + ? FONTSIZES.map((size) => ({ value: size, label: size })) + : FONTSTYLES.map((style) => ({ value: style, label: style })); + + return this._haComboBox( + items, + `${_fontPrefix}.${prefix}Font${type.charAt(0).toUpperCase() + type.slice(1)}`, + fontCustomize[configKey] || (type === 'size' ? 'auto' : type === 'style' ? 'none' : ''), + configKey, + allowCustomValue, + ); + }; + + return html` ${createComboBox('size')} ${createComboBox('style', false)} ${createComboBox('color')} `; + }; + + const hideLabelCompactView = this._config?.compact_view + ? this._tempCheckBox('fontOptions.hideLabel', 'font_customize.hide_label', 'hide_label') + : ''; + + return this.panelTemplate( + 'fontOptions', + 'fontOptions', + 'mdi:format-font', + html` +
+
+ ${localizeKey('headerFontConfig.title')} + ${localizeKey('headerFontConfig.description')} +
+
${createFontConfigRow('header')}
+
+ +
+
+ ${localizeKey('labelFontConfig.title')} + ${localizeKey('labelFontConfig.description')} +
+
${createFontConfigRow('label')} ${hideLabelCompactView}
+
+ `, + ); + } + + private panelTemplate( + title: string, + secondary: string, + icon: string, + content: TemplateResult, + expanded: boolean = false, + ): TemplateResult { const localTitle = this.localize(`editor.${title}.title`); const localDesc = this.localize(`editor.${secondary}.description`); return html`
- +
@@ -367,6 +367,147 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit `; } + /* ---------------------------- RENDER TEMPLATES ---------------------------- */ + + private _haComboBox = ( + items: { value: string; label: string }[], + labelKey: string, + valueKey: string, + configValue: string, + allowCustomValue = true, + ): TemplateResult => { + return html` + + `; + }; + + private _tempCheckBox = (labelKey: string, checkedValue, configValueKey: string): TemplateResult => { + return html` + + `; + }; + + /* ----------------------------- HANDLER METHODS ---------------------------- */ + + private _handleValueChange(ev) { + if (!this._config || !this.hass) { + return; + } + + const target = ev.target as any; + const configValue = target?.configValue; + + // Safely access the value, add a fallback to an empty string if undefined + const value = target?.checked !== undefined ? target.checked : ev.detail.value; + + const updates: Partial = {}; + + // Define default values for FontCustomStyles + const defaultFontCustomStyles: FontCustomStyles = { + header_font_size: 'x-large', + header_font_style: 'capitalize', + header_font_color: '', + label_font_size: 'auto', + label_font_style: 'none', + label_font_color: '', + hide_label: false, + }; + + // Check if the configValue is a key of FontCustomStyles + if (configValue in this._config.font_customize) { + const key = configValue as keyof FontCustomStyles; + + // If the current value is undefined, use the default value + const updatedValue = value !== undefined ? value : defaultFontCustomStyles[key]; + + updates.font_customize = { + ...this._config.font_customize, + [key]: updatedValue, + }; + } else { + // Update the main configuration object + updates[configValue] = value; + } + + if (Object.keys(updates).length > 0) { + this._config = { ...this._config, ...updates }; + fireEvent(this, 'config-changed', { config: this._config }); + } + } + + private _getEntityLatLong(): { label: string; value: number | string }[] { + if (!this._config?.entity) { + return []; + } + + const entity = this.hass.states[this._config.entity]; + if (!entity || !entity.attributes) { + return []; + } + + return [ + { + label: 'Latitude', + value: entity.attributes.latitude ?? entity.attributes.location.latitude, + }, + { + label: 'Longitude', + value: entity.attributes.longitude ?? entity.attributes.location.longitude, + }, + ]; + } + + private _handleRadioChange(ev): void { + if (!this._config || !this.hass) { + return; + } + const target = ev.target; + const configValue = target.value; + + if (this._config[configValue] === true) { + return; + } + + const updates: Partial = {}; + const radiosOptions = this._getBaseConfigSelector().options.map((item) => item.key); + radiosOptions.forEach((item) => { + if (item === configValue) { + updates[item] = true; + } else { + updates[item] = false; + } + }); + + if (configValue === 'use_custom') { + updates.entity = ''; + } + + if (configValue === 'use_default') { + updates.entity = ''; + updates.latitude = this.hass.config.latitude; + updates.longitude = this.hass.config.longitude; + } + + if (Object.keys(updates).length > 0) { + this._config = { ...this._config, ...updates }; + console.log('updates', updates); + fireEvent(this, 'config-changed', { config: this._config }); + } + } + private _handleAlertDismissed(): void { const toast = this.shadowRoot?.getElementById('toast') as HTMLElement; const version = this.shadowRoot?.querySelector('.version') as HTMLElement; @@ -458,85 +599,19 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit return; } const entity = ev.detail.value; - if (this._config.entity === entity) { + if (this._config.entity === entity || !entity) { return; } - const location = this.hass.states[entity].attributes.location; - const latitude = location.latitude; - const longitude = location.longitude; + const attribute = this.hass.states[entity].attributes; + + const latitude = attribute.latitude ?? attribute.location.latitude; + const longitude = attribute.longitude ?? attribute.location.longitude; const updates: Partial = { entity, latitude, longitude }; this._config = { ...this._config, ...updates }; fireEvent(this, 'config-changed', { config: this._config }); } - private _customLatLongChanged(ev): void { - if (!this._config || !this.hass) { - return; - } - const target = ev.target; - const configValue = target.configValue; - - if (this[`${configValue}`] === target.value) { - return; - } - - if (configValue === 'latitude') { - this._newLatitude = target.value; - } - if (configValue === 'longitude') { - this._newLongitude = target.value; - } - - this._config = { - ...this._config, - [configValue]: parseFloat(target.value), - }; - console.log(configValue, target.value); - fireEvent(this, 'config-changed', { config: this._config }); - } - - private _valueChanged(ev): void { - if (!this._config || !this.hass) { - return; - } - const target = ev.target; - const configValue = target.configValue; - - if (this[`${configValue}`] === target.value) { - return; - } - - let newValue: any; - - if (['custom_latitude', 'custom_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; - } - fireEvent(this, 'config-changed', { config: this._config }); - } - static get styles(): CSSResultGroup { return css` ${editorcss} diff --git a/src/languages/ca.json b/src/languages/ca.json index d8c70c2..4174dd3 100644 --- a/src/languages/ca.json +++ b/src/languages/ca.json @@ -46,6 +46,26 @@ "useEntity": "Fer servir l'entitat", "useCustom": "Personalitza" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Vista compacta", "showBackground": "Mostra el fons", "timeFormat": "Format del temps de 12 hores", diff --git a/src/languages/cs.json b/src/languages/cs.json index dba9593..e163ee1 100644 --- a/src/languages/cs.json +++ b/src/languages/cs.json @@ -46,6 +46,26 @@ "useEntity": "Použít entitu", "useCustom": "Použít vlastní" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Kompaktní zobrazení", "showBackground": "Zobrazit pozadí", "timeFormat": "12-hodinový formát času", diff --git a/src/languages/da.json b/src/languages/da.json index b9cc41c..0e1eb84 100644 --- a/src/languages/da.json +++ b/src/languages/da.json @@ -46,6 +46,26 @@ "useEntity": "Brug enhed", "useCustom": "Brug brugerdefineret" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Kompakt udsigt", "showBackground": "Vis baggrund", "timeFormat": "12-timers tidsformat", diff --git a/src/languages/de.json b/src/languages/de.json index f97fac1..5eccfe1 100644 --- a/src/languages/de.json +++ b/src/languages/de.json @@ -46,6 +46,26 @@ "useEntity": "Entität verwenden", "useCustom": "Benutzerdefinierte Einstellungen verwenden " }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Kompakte Ansicht", "showBackground": "Hintergrund anzeigen", "timeFormat": "12-Stunden-Zeitformat", diff --git a/src/languages/en.json b/src/languages/en.json index bdcaac0..297844e 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -46,6 +46,55 @@ "useEntity": "Use entity", "useCustom": "Use custom" }, + "fontOptions": { + "title": "Font customization", + "description": "Set a configuration for font size and color", + "hideLabel": "Hide label", + "headerFontConfig": { + "title": "Header font", + "description": "Set a configuration for header font" + }, + "labelFontConfig": { + "title": "Label font", + "description": "Set a configuration for label font" + }, + "headerFontSize": "Header font size", + "headerFontColor": "Header font color", + "headerFontStyle": "Header font style", + "labelFontSize": "Label font size", + "labelFontColor": "Label font color", + "labelFontStyle": "Label font style", + "valueFontSize": "Value font size", + "fontSize": "Font size", + "fontColor": "Font color", + "fontTextTransform": "Text transform", + "textTransformOptions": { + "none": "None", + "capitalize": "Capitalize", + "uppercase": "Uppercase", + "lowercase": "Lowercase" + }, + "fontSizes": { + "auto": "Auto", + "small": "Small", + "medium": "Medium", + "large": "Large", + "x-large": "X-Large", + "xx-large": "XX-Large" + }, + "fontStyles": { + "none": "None", + "capitalize": "Capitalize", + "uppercase": "Uppercase", + "lowercase": "Lowercase" + }, + "header_font_size": "Header font size", + "header_font_color": "Header font color", + "header_font_style": "Header font style", + "label_font_size": "Label font size", + "label_font_color": "Label font color", + "label_font_style": "Label font style" + }, "compactView": "Compact view", "showBackground": "Show background", "timeFormat": "12-hour time format", diff --git a/src/languages/fr.json b/src/languages/fr.json index 0f55d00..43e5254 100644 --- a/src/languages/fr.json +++ b/src/languages/fr.json @@ -46,6 +46,26 @@ "useEntity": "Entitée", "useCustom": "Custom" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Affichage compact", "showBackground": "Afficher fond d'écran", "timeFormat": "Format 12h", diff --git a/src/languages/id.json b/src/languages/id.json index b1c12b4..bf75b27 100644 --- a/src/languages/id.json +++ b/src/languages/id.json @@ -46,6 +46,26 @@ "useEntity": "Gunakan entitas", "useCustom": "Gunakan pengaturan khusus" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Tampilan kompak", "showBackground": "Tampilkan gambar latar belakang", "timeFormat": "Format waktu 12 jam", diff --git a/src/languages/pt.json b/src/languages/pt.json index 06720f8..57b6b7e 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -46,6 +46,26 @@ "useEntity": "Usar entidade", "useCustom": "Usar personalizado" }, + "fontOptions": { + "title": "", + "description": "", + "hideLabel": "", + "headerFontConfig": { + "title": "", + "description": "" + }, + "labelFontConfig": { + "title": "", + "description": "" + }, + "headerFontSize": "", + "headerFontColor": "", + "headerFontStyle": "", + "labelFontSize": "", + "labelFontColor": "", + "labelFontStyle": "", + "valueFontSize": "" + }, "compactView": "Visualização compacta", "showBackground": "Mostrar plano de fundo", "timeFormat": "Formato de 12 horas", diff --git a/src/localize/string.json b/src/localize/string.json index bdcaac0..dbe604c 100644 --- a/src/localize/string.json +++ b/src/localize/string.json @@ -46,6 +46,26 @@ "useEntity": "Use entity", "useCustom": "Use custom" }, + "fontOptions": { + "title": "Font customization", + "description": "Set a configuration for font size and color", + "hideLabel": "Hide label", + "headerFontConfig": { + "title": "Header font", + "description": "Set a configuration for header font" + }, + "labelFontConfig": { + "title": "Label font", + "description": "Set a configuration for label font" + }, + "headerFontSize": "Header font size", + "headerFontColor": "Header font color", + "headerFontStyle": "Header font style", + "labelFontSize": "Label font size", + "labelFontColor": "Label font color", + "labelFontStyle": "Label font style", + "valueFontSize": "Value font size" + }, "compactView": "Compact view", "showBackground": "Show background", "timeFormat": "12-hour time format", diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index a4db9f9..55bbb01 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -77,13 +77,16 @@ export class LunarPhaseCard extends LitElement { protected firstUpdated(changedProps: PropertyValues) { super.firstUpdated(changedProps); - this._setBackgroundCss(); // Initialize Swiper only if the parent element does not have the class 'preview' if (this.parentElement && !this.parentElement.classList.contains('preview')) { setTimeout(() => { this.fetchBaseMoonData(); }, 300); } + this._setBackgroundCss(); + if (this.config.font_customize) { + this._setCustomVars(); + } } connectedCallback(): void { @@ -96,9 +99,6 @@ export class LunarPhaseCard extends LitElement { } disconnectedCallback(): void { - if (process.env.ROLLUP_WATCH === 'true' && window.LunarCard === this) { - window.LunarCard = undefined; - } this.clearRefreshInterval(); this._connected = false; super.disconnectedCallback(); @@ -279,7 +279,7 @@ export class LunarPhaseCard extends LitElement { ${value} ${unit}
- ${label} + ${!this.config.font_customize.hide_label ? html` ${label}` : nothing}
`; }; @@ -454,6 +454,22 @@ export class LunarPhaseCard extends LitElement { this.style.setProperty('--lunar-background-image', `url(${background})`); } + private _setCustomVars() { + const fontOptions = this.config.font_customize; + if (!fontOptions) return; + const varCss = { + '--lunar-card-header-font-size': fontOptions.header_font_size, + '--lunar-card-header-text-transform': fontOptions.header_font_style, + '--lunar-card-header-font-color': fontOptions.header_font_color, + '--lunar-card-label-font-size': fontOptions.label_font_size, + '--lunar-card-label-text-transform': fontOptions.label_font_style, + '--lunar-card-label-font-color': fontOptions.label_font_color, + }; + Object.entries(varCss).forEach(([key, value]) => { + this.style.setProperty(key, value); + }); + } + // https://lit.dev/docs/components/styles/ public static get styles(): CSSResultGroup { return [style]; @@ -470,7 +486,7 @@ export class LunarPhaseCard extends LitElement { declare global { interface Window { - LunarCard: LunarPhaseCard | undefined; + LunarCard: LunarPhaseCard; } interface HTMLElementTagNameMap { 'lunar-phase-card': LunarPhaseCard; diff --git a/src/types.ts b/src/types.ts index fa71ef9..af5508b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -31,6 +31,19 @@ export type HomeAssistantExtended = HomeAssistant & { formatEntityAttributeValue: (entityId: string, attribute: string) => string; }; +export type FontSizeOptions = 'auto' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large'; +export type FontTextTransformOptions = 'none' | 'capitalize' | 'uppercase' | 'lowercase'; + +export interface FontCustomStyles { + header_font_size: FontSizeOptions; + header_font_style: FontTextTransformOptions; + header_font_color: string; + label_font_size: FontSizeOptions; + label_font_style: FontTextTransformOptions; + label_font_color: string; + hide_label: boolean; +} + export interface LunarPhaseCardConfig extends LovelaceCardConfig { type: string; entity?: string; @@ -44,6 +57,7 @@ export interface LunarPhaseCardConfig extends LovelaceCardConfig { selected_language?: string | null; latitude: number; longitude: number; + font_customize: FontCustomStyles; } export const defaultConfig: Partial = { @@ -56,6 +70,15 @@ export const defaultConfig: Partial = { selected_language: 'en', compact_view: true, '12hr_format': false, + font_customize: { + header_font_size: 'x-large', + header_font_style: 'capitalize', + header_font_color: '', + label_font_size: 'auto', + label_font_style: 'none', + label_font_color: '', + hide_label: false, + }, }; export interface LunarPhaseData { diff --git a/src/utils/ha-helper.ts b/src/utils/ha-helper.ts new file mode 100644 index 0000000..4f2fd8a --- /dev/null +++ b/src/utils/ha-helper.ts @@ -0,0 +1,34 @@ +import { HomeAssistantExtended as HomeAssistant, LunarPhaseCardConfig } from '../types'; + +export function deepMerge(target: any, source: any): any { + for (const key of Object.keys(source)) { + if (source[key] instanceof Object && key in target) { + Object.assign(source[key], deepMerge(target[key], source[key])); + } + } + return { ...target, ...source }; +} + +export function InitializeDefaultConfig(): Record { + const defaultConfig: Partial = { + type: 'custom:lunar-phase-card', + entity: '', + use_default: true, + use_custom: false, + use_entity: false, + show_background: true, + selected_language: 'en', + compact_view: true, + '12hr_format': false, + font_customize: { + header_font_size: 'x-large', + header_font_style: 'capitalize', + header_font_color: '', + label_font_size: 'auto', + label_font_style: 'none', + label_font_color: '', + hide_label: false, + }, + }; + return defaultConfig; +} From b27604f7e82ae992acfc295faba596ed067dc419 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Sat, 24 Aug 2024 15:59:58 +0200 Subject: [PATCH 15/18] chore: Update font customization options and styles --- src/const.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/const.ts b/src/const.ts index ad5324f..b688399 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1,5 +1,5 @@ import { version, repository } from '../package.json'; -import { FontSizeOptions, FontTextTransformOptions, FontCustomStyles } from './types'; +import { FontSizeOptions, FontTextTransformOptions } from './types'; export const REPOSITORY = repository.repo; export const CARD_VERSION = `v${version}`; From 7cae89c5c58f56682c8a8378fc6cb3923755cdfe Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Sat, 24 Aug 2024 16:18:22 +0200 Subject: [PATCH 16/18] feat: Update font customization options and styles --- src/editor.ts | 4 ++-- src/lunar-phase-card.ts | 2 +- src/types.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index b0846b7..86fe050 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -25,7 +25,7 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit private _systemLanguage = this.hass?.language; public async setConfig(config: LunarPhaseCardConfig): Promise { - this._config = this._config ? config : deepMerge(InitializeDefaultConfig(), config); + this._config = deepMerge(InitializeDefaultConfig(), config); } protected firstUpdated(changedProps: PropertyValues): void { @@ -393,7 +393,7 @@ export class LunarPhaseCardEditor extends LitElement implements LovelaceCardEdit private _tempCheckBox = (labelKey: string, checkedValue, configValueKey: string): TemplateResult => { return html` diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 55bbb01..28b12c0 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -279,7 +279,7 @@ export class LunarPhaseCard extends LitElement { ${value} ${unit}
- ${!this.config.font_customize.hide_label ? html` ${label}` : nothing} + ${this.config?.font_customize.hide_label ? html`` : html` ${label}`}
`; }; diff --git a/src/types.ts b/src/types.ts index af5508b..f2ef5fb 100644 --- a/src/types.ts +++ b/src/types.ts @@ -41,7 +41,7 @@ export interface FontCustomStyles { label_font_size: FontSizeOptions; label_font_style: FontTextTransformOptions; label_font_color: string; - hide_label: boolean; + hide_label?: boolean; } export interface LunarPhaseCardConfig extends LovelaceCardConfig { From f55d359a53a4499b6e6fb09456d420a62a738250 Mon Sep 17 00:00:00 2001 From: Viet Ngoc Date: Sat, 24 Aug 2024 16:38:03 +0200 Subject: [PATCH 17/18] feat: Update font customization options and styles --- src/languages/cs.json | 28 ++++++++++++++-------------- src/languages/en.json | 31 +------------------------------ src/lunar-phase-card.ts | 2 +- 3 files changed, 16 insertions(+), 45 deletions(-) diff --git a/src/languages/cs.json b/src/languages/cs.json index e163ee1..5a071fb 100644 --- a/src/languages/cs.json +++ b/src/languages/cs.json @@ -47,24 +47,24 @@ "useCustom": "Použít vlastní" }, "fontOptions": { - "title": "", - "description": "", - "hideLabel": "", + "title": "Stylizace textu", + "description": "Nastavte stylizaci textu", + "hideLabel": "Skrýt popisek", "headerFontConfig": { - "title": "", - "description": "" + "title": "Nadpis", + "description": "Nastavte stylizaci nadpisu" }, "labelFontConfig": { - "title": "", - "description": "" + "title": "Popisek", + "description": "Nastavte stylizaci popisku" }, - "headerFontSize": "", - "headerFontColor": "", - "headerFontStyle": "", - "labelFontSize": "", - "labelFontColor": "", - "labelFontStyle": "", - "valueFontSize": "" + "headerFontSize": "Velikost písma nadpisu", + "headerFontColor": "Barva písma nadpisu", + "headerFontStyle": "Styl písma nadpisu", + "labelFontSize": "Velikost písma popisku", + "labelFontColor": "Barva písma popisku", + "labelFontStyle": "Styl písma popisku", + "valueFontSize": "Velikost písma hodnoty" }, "compactView": "Kompaktní zobrazení", "showBackground": "Zobrazit pozadí", diff --git a/src/languages/en.json b/src/languages/en.json index 297844e..dbe604c 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -64,36 +64,7 @@ "labelFontSize": "Label font size", "labelFontColor": "Label font color", "labelFontStyle": "Label font style", - "valueFontSize": "Value font size", - "fontSize": "Font size", - "fontColor": "Font color", - "fontTextTransform": "Text transform", - "textTransformOptions": { - "none": "None", - "capitalize": "Capitalize", - "uppercase": "Uppercase", - "lowercase": "Lowercase" - }, - "fontSizes": { - "auto": "Auto", - "small": "Small", - "medium": "Medium", - "large": "Large", - "x-large": "X-Large", - "xx-large": "XX-Large" - }, - "fontStyles": { - "none": "None", - "capitalize": "Capitalize", - "uppercase": "Uppercase", - "lowercase": "Lowercase" - }, - "header_font_size": "Header font size", - "header_font_color": "Header font color", - "header_font_style": "Header font style", - "label_font_size": "Label font size", - "label_font_color": "Label font color", - "label_font_style": "Label font style" + "valueFontSize": "Value font size" }, "compactView": "Compact view", "showBackground": "Show background", diff --git a/src/lunar-phase-card.ts b/src/lunar-phase-card.ts index 28b12c0..1f482bd 100644 --- a/src/lunar-phase-card.ts +++ b/src/lunar-phase-card.ts @@ -279,7 +279,7 @@ export class LunarPhaseCard extends LitElement { ${value} ${unit}
- ${this.config?.font_customize.hide_label ? html`` : html` ${label}`} + ${this.config.font_customize.hide_label ? html`` : html` ${label}`}
`; }; From 7a5d7c2893263d2ee4559462cf5702045220b2f1 Mon Sep 17 00:00:00 2001 From: ThibaultDenoual Date: Sat, 24 Aug 2024 19:12:54 +0200 Subject: [PATCH 18/18] Update fr.json --- src/languages/fr.json | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/languages/fr.json b/src/languages/fr.json index 43e5254..63a582e 100644 --- a/src/languages/fr.json +++ b/src/languages/fr.json @@ -47,24 +47,24 @@ "useCustom": "Custom" }, "fontOptions": { - "title": "", - "description": "", - "hideLabel": "", + "title": "Modification polices", + "description": "Configuration de la taille et couleur des polices", + "hideLabel": "Cacher label", "headerFontConfig": { - "title": "", - "description": "" + "title": "Police titre", + "description": "Configuration de la police du titre" }, "labelFontConfig": { - "title": "", - "description": "" + "title": "Police label", + "description": "Configuration de la police du label" }, - "headerFontSize": "", - "headerFontColor": "", - "headerFontStyle": "", - "labelFontSize": "", - "labelFontColor": "", - "labelFontStyle": "", - "valueFontSize": "" + "headerFontSize": "Taille police titre", + "headerFontColor": "Couleur police titre", + "headerFontStyle": "Style police titre", + "labelFontSize": "Taille police label", + "labelFontColor": "Couleur police label", + "labelFontStyle": "Style police label", + "valueFontSize": "Valeur taille police" }, "compactView": "Affichage compact", "showBackground": "Afficher fond d'écran", @@ -76,4 +76,4 @@ "language": "Langue" } } -} \ No newline at end of file +}