From 830aee47a77df960c47cb1f7b4adbc5ca254de88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Fri, 30 Jun 2023 12:33:59 +0200 Subject: [PATCH] More translation fixes (#673) --- src/dashboards/hacs-dashboard.ts | 96 +++++++++------------------ src/hacs.ts | 107 +++++++++++++++++++++++-------- src/main.ts | 61 +----------------- 3 files changed, 116 insertions(+), 148 deletions(-) diff --git a/src/dashboards/hacs-dashboard.ts b/src/dashboards/hacs-dashboard.ts index 045b6786..260ee3a0 100644 --- a/src/dashboards/hacs-dashboard.ts +++ b/src/dashboards/hacs-dashboard.ts @@ -86,37 +86,33 @@ export class HacsDashboard extends LitElement { @property({ type: Boolean }) public isWide!: boolean; - @storage({key: "hacs-table-filters", state: true, subscribe: false}) + @storage({ key: "hacs-table-filter", state: true, subscribe: false }) private activeFilters?: string[] = []; - @storage({key: "hacs-table-sort", state: true, subscribe: false}) + @storage({ key: "hacs-table-sort", state: true, subscribe: false }) private activeSort?: { column: string; direction: SortingDirection }; - @storage({key: "hacs-active-search", state: true, subscribe: false}) + @storage({ key: "hacs-active-search", state: true, subscribe: false }) private _activeSearch?: string; - @storage({key: "hacs-table-active-columns", state: true, subscribe: false}) + @storage({ key: "hacs-table-active-columns", state: true, subscribe: false }) private _tableColumns: Record = tableColumnDefaults; protected async firstUpdated(changedProperties: PropertyValues): Promise { super.firstUpdated(changedProperties); const baseFilters = - this.activeFilters && this.activeFilters.length === 0 - ? [this.hacs.localize("common.downloaded")] - : this.activeFilters; + this.activeFilters && this.activeFilters.length === 0 ? ["downloaded"] : this.activeFilters; const filters = !this._activeSearch?.length ? baseFilters - : baseFilters?.filter((filter) => filter !== this.hacs.localize("common.downloaded")); + : baseFilters?.filter((filter) => filter !== "downloaded"); this.activeFilters = filters?.length ? filters : undefined; } protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); if (changedProperties.has("_activeSearch") && this._activeSearch?.length) { - this.activeFilters = this.activeFilters?.filter( - (filter) => filter !== this.hacs.localize("common.downloaded") - ); + this.activeFilters = this.activeFilters?.filter((filter) => filter !== "downloaded"); } } @@ -141,8 +137,14 @@ export class HacsDashboard extends LitElement { .route=${this.route} clickable .filter=${this._activeSearch} - .activeFilters=${this.activeFilters} - .noDataText=${this.activeFilters?.includes(this.hacs.localize("common.downloaded")) + .activeFilters=${this.activeFilters?.map( + (filter) => + this.hacs.localize( + // @ts-ignore + `common.${filter.startsWith("category_") ? filter.replace("category_", "") : filter}` + ) || filter + )} + .noDataText=${this.activeFilters?.includes("downloaded") ? "No downloaded repositories" : "No repositories matching search"} @row-click=${this._handleRowClicked} @@ -218,8 +220,7 @@ export class HacsDashboard extends LitElement { ${this.hacs.localize("common.downloaded")} @@ -227,7 +228,7 @@ export class HacsDashboard extends LitElement { ${this.hacs.localize("common.new")} @@ -239,20 +240,12 @@ export class HacsDashboard extends LitElement { @selected=${this._handleCategoryFilterChange} @closed=${stopPropagation} naturalMenuWidth - .value=${this.activeFilters?.find((filter) => - filter.startsWith( - `${this.hacs.localize(`dialog_custom_repositories.category`)}: ` - ) - ) || ""} + .value=${this.activeFilters?.find((filter) => filter.startsWith("category_")) || ""} > ${this.hacs.info.categories.map( (category) => html` - + ${this.hacs.localize(`common.${category}`)} ` @@ -279,16 +272,10 @@ export class HacsDashboard extends LitElement { - filter === - `${this.hacs.localize( - `dialog_custom_repositories.category` - )}: ${this.hacs.localize(`common.${category}`)}` + (filter) => filter === `category_${category}` ) ?? false} > @@ -302,25 +289,16 @@ export class HacsDashboard extends LitElement { private _filterRepositories = memoize( (repositories: RepositoryBase[], activeFilters?: string[]): RepositoryBase[] => repositories - .filter((reposiotry) => { - if ( - this.activeFilters?.includes(this.hacs.localize("common.downloaded")) && - !reposiotry.installed - ) { + .filter((repository) => { + if (this.activeFilters?.includes("downloaded") && !repository.installed) { return false; } - if (this.activeFilters?.includes(this.hacs.localize("common.new")) && !reposiotry.new) { + if (this.activeFilters?.includes("new") && !repository.new) { return false; } if ( - activeFilters?.filter((filter) => - filter.startsWith(this.hacs.localize(`dialog_custom_repositories.category`)) - ).length && - !activeFilters.includes( - `${this.hacs.localize(`dialog_custom_repositories.category`)}: ${this.hacs.localize( - `common.${reposiotry.category}` - )}` - ) + activeFilters?.filter((filter) => filter.startsWith("category_")).length && + !activeFilters.includes(`category_${repository.category}`) ) { return false; } @@ -511,17 +489,13 @@ export class HacsDashboard extends LitElement { if ((ev.target as any).nodeName === "HA-RADIO" && (ev.target as any).checked === false) { this.activeFilters = [ ...(this.activeFilters?.filter( - (filter) => - !filter.startsWith(this.hacs.localize(`dialog_custom_repositories.category`)) && - filter !== categoryFilter + (filter) => !filter.startsWith("category_") && filter !== categoryFilter ) || []), ]; } else { this.activeFilters = [ ...(this.activeFilters?.filter( - (filter) => - !filter.startsWith(this.hacs.localize(`dialog_custom_repositories.category`)) && - filter !== categoryFilter + (filter) => !filter.startsWith("category_") && filter !== categoryFilter ) || []), categoryFilter, ]; @@ -553,23 +527,17 @@ export class HacsDashboard extends LitElement { } private _handleDownloadFilterChange(ev: CustomEvent) { - const updatedFilters = - this.activeFilters?.filter( - (filter) => !filter.startsWith(this.hacs.localize("common.downloaded")) - ) || []; + const updatedFilters = this.activeFilters?.filter((filter) => filter !== "downloaded") || []; if (ev.detail.selected) { - updatedFilters.push(this.hacs.localize("common.downloaded")); + updatedFilters.push("downloaded"); } this.activeFilters = updatedFilters.length ? updatedFilters : undefined; } private _handleNewFilterChange(ev: CustomEvent) { - const updatedFilters = - this.activeFilters?.filter( - (filter) => !filter.startsWith(this.hacs.localize("common.new")) - ) || []; + const updatedFilters = this.activeFilters?.filter((filter) => filter !== "new") || []; if (ev.detail.selected) { - updatedFilters.push(this.hacs.localize("common.new")); + updatedFilters.push("new"); } this.activeFilters = updatedFilters.length ? updatedFilters : undefined; } diff --git a/src/hacs.ts b/src/hacs.ts index 17348b56..5305b651 100644 --- a/src/hacs.ts +++ b/src/hacs.ts @@ -7,46 +7,84 @@ import { ProvideHassLitMixin } from "../homeassistant-frontend/src/mixins/provid import type { HomeAssistant } from "../homeassistant-frontend/src/types"; import { computeLocalize } from "../homeassistant-frontend/src/common/translations/localize"; import { getTranslation } from "../homeassistant-frontend/src/util/common-translation"; - -const ALWAYS_UPDATE = new Set(["localize"]); +import { fetchHacsInfo, getRepositories, websocketSubscription } from "./data/websocket"; +import { HacsDispatchEvent } from "./data/common"; export class HacsElement extends ProvideHassLitMixin(LitElement) { - @property({ attribute: false }) public hacs: Partial = { - language: "en", - repositories: [], - info: {} as any, - log: new HacsLogger(), - }; + @property({ attribute: false }) public hacs: Partial = { localize: () => "" }; @state() private _language = "en"; - public connectedCallback() { + public connectedCallback(): void { super.connectedCallback(); - - this._initializeLocalize(); - - this.addEventListener("update-hacs", (e) => - this._updateHacs((e as any).detail as Partial) - ); + if (!this.hasUpdated) { + return; + } + this._initHacs(); } protected willUpdate(changedProperties: PropertyValues) { + if (!this.hasUpdated) { + this._initHacs(); + } if (changedProperties.has("hass")) { const oldHass = changedProperties.get("hass") as HomeAssistant | undefined; if (oldHass?.language !== this.hass.language) { this._language = this.hass.language; - this.hacs.language = this.hass.language; } } - if (changedProperties.has("_language")) { + if (changedProperties.has("_language") || !this.hasUpdated) { this._initializeLocalize(); } } + private async _initHacs(): Promise { + websocketSubscription( + this.hass, + () => this._updateProperties("configuration"), + HacsDispatchEvent.CONFIG + ); + + websocketSubscription( + this.hass, + () => this._updateProperties("status"), + HacsDispatchEvent.STATUS + ); + + websocketSubscription( + this.hass, + () => this._updateProperties("status"), + HacsDispatchEvent.STAGE + ); + + websocketSubscription( + this.hass, + () => this._updateProperties("repositories"), + HacsDispatchEvent.REPOSITORY + ); + + this.hass.connection.subscribeEvents( + async () => this._updateProperties("lovelace"), + "lovelace_updated" + ); + + this._updateHacs({ + log: new HacsLogger(), + }); + + this._updateProperties(); + + this.addEventListener("update-hacs", (e) => + this._updateHacs((e as any).detail as Partial) + ); + } + private async _initializeLocalize() { const { language, data } = await getTranslation(null, this._language); + console.log({ language, data }); + this._updateHacs({ localize: await computeLocalize(this.constructor.prototype, language, { [language]: data, @@ -54,14 +92,33 @@ export class HacsElement extends ProvideHassLitMixin(LitElement) { }); } - protected _updateHacs(obj: Partial) { - if ( - Object.keys(obj).some( - (key) => - ALWAYS_UPDATE.has(key) || JSON.stringify(this.hacs[key] !== JSON.stringify(obj[key])) - ) - ) { - this.hacs = { ...this.hacs, ...obj }; + private async _updateProperties(prop = "all") { + const _updates: any = {}; + const _fetch: any = {}; + + if (prop === "all") { + [_fetch.repositories, _fetch.info] = await Promise.all([ + getRepositories(this.hass), + fetchHacsInfo(this.hass), + ]); + } else if (prop === "info") { + _fetch.info = await fetchHacsInfo(this.hass); + } else if (prop === "repositories") { + _fetch.repositories = await getRepositories(this.hass); + } + + Object.keys(_fetch).forEach((update) => { + if (_fetch[update] !== undefined) { + _updates[update] = _fetch[update]; + } + }); + if (_updates) { + this._updateHacs(_updates); + this.requestUpdate(); } } + + protected _updateHacs(update: Partial) { + this.hacs = { ...this.hacs, ...update }; + } } diff --git a/src/main.ts b/src/main.ts index 1be09aaf..0eb47d1b 100644 --- a/src/main.ts +++ b/src/main.ts @@ -8,9 +8,8 @@ import { isNavigationClick } from "../homeassistant-frontend/src/common/dom/is-n import { navigate } from "../homeassistant-frontend/src/common/navigate"; import { makeDialogManager } from "../homeassistant-frontend/src/dialogs/make-dialog-manager"; import type { HomeAssistant, Route } from "../homeassistant-frontend/src/types"; -import { HacsDispatchEvent, LocationChangedEvent } from "./data/common"; +import { LocationChangedEvent } from "./data/common"; import type { Hacs } from "./data/hacs"; -import { fetchHacsInfo, getRepositories, websocketSubscription } from "./data/websocket"; import { HacsElement } from "./hacs"; import "./hacs-router"; import { HacsStyles } from "./styles/hacs-common-style"; @@ -31,40 +30,10 @@ class HacsFrontend extends HacsElement { this._applyTheme(); - this.hacs.language = this.hass.language; this.addEventListener("hacs-location-changed", (e) => this._setRoute(e as LocationChangedEvent) ); - websocketSubscription( - this.hass, - () => this._updateProperties("configuration"), - HacsDispatchEvent.CONFIG - ); - - websocketSubscription( - this.hass, - () => this._updateProperties("status"), - HacsDispatchEvent.STATUS - ); - - websocketSubscription( - this.hass, - () => this._updateProperties("status"), - HacsDispatchEvent.STAGE - ); - - websocketSubscription( - this.hass, - () => this._updateProperties("repositories"), - HacsDispatchEvent.REPOSITORY - ); - - this.hass.connection.subscribeEvents( - async () => this._updateProperties("lovelace"), - "lovelace_updated" - ); - this._updateProperties(); if (this.route.path === "") { navigate("/hacs/entry", { replace: true }); } @@ -121,34 +90,8 @@ class HacsFrontend extends HacsElement { } } - private async _updateProperties(prop = "all") { - const _updates: any = {}; - const _fetch: any = {}; - - if (prop === "all") { - [_fetch.repositories, _fetch.info] = await Promise.all([ - getRepositories(this.hass), - fetchHacsInfo(this.hass), - ]); - } else if (prop === "info") { - _fetch.info = await fetchHacsInfo(this.hass); - } else if (prop === "repositories") { - _fetch.repositories = await getRepositories(this.hass); - } - - Object.keys(_fetch).forEach((update) => { - if (_fetch[update] !== undefined) { - _updates[update] = _fetch[update]; - } - }); - if (_updates) { - this._updateHacs(_updates); - this.requestUpdate(); - } - } - protected render() { - if (!this.hass || !this.hacs?.info.categories?.length || this.hacs?.localize === undefined) { + if (!this.hass || !this.hacs?.info?.categories?.length || this.hacs?.localize === undefined) { return nothing; }