From 45e174eb9ed9e015056582623dd10df200aa510d Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Tue, 5 May 2020 14:09:14 +0200 Subject: [PATCH 1/6] Add new core configuration UI for external_url & internal_url --- src/data/core.ts | 2 + .../config/core/ha-config-section-core.js | 2 + src/panels/config/core/ha-config-url-form.ts | 162 ++++++++++++++++++ src/translations/en.json | 4 +- 4 files changed, 169 insertions(+), 1 deletion(-) create mode 100644 src/panels/config/core/ha-config-url-form.ts diff --git a/src/data/core.ts b/src/data/core.ts index f02105ac190b..646b4b509837 100644 --- a/src/data/core.ts +++ b/src/data/core.ts @@ -8,6 +8,8 @@ export interface ConfigUpdateValues { elevation: number; unit_system: "metric" | "imperial"; time_zone: string; + external_url?: string | null; + internal_url?: string | null; } export const saveCoreConfig = ( diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js index e33196a14716..0ce46534891f 100644 --- a/src/panels/config/core/ha-config-section-core.js +++ b/src/panels/config/core/ha-config-section-core.js @@ -11,6 +11,7 @@ import "../../../resources/ha-style"; import "../ha-config-section"; import "./ha-config-core-form"; import "./ha-config-name-form"; +import "./ha-config-url-form"; /* * @appliesMixin LocalizeMixin @@ -59,6 +60,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) { + `; } diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts new file mode 100644 index 000000000000..d5edf76ec259 --- /dev/null +++ b/src/panels/config/core/ha-config-url-form.ts @@ -0,0 +1,162 @@ +import "@material/mwc-button/mwc-button"; +import "@polymer/paper-input/paper-input"; +import type { PaperInputElement } from "@polymer/paper-input/paper-input"; +import { + css, + CSSResult, + customElement, + html, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import "../../../components/ha-card"; +import { saveCoreConfig } from "../../../data/core"; +import type { PolymerChangedEvent } from "../../../polymer-types"; +import type { HomeAssistant } from "../../../types"; + +@customElement("ha-config-url-form") +class ConfigUrlForm extends LitElement { + @property() public hass!: HomeAssistant; + + @property() private _working = false; + + @property() private _external_url!: string; + + @property() private _internal_url!: string; + + protected render(): TemplateResult { + const canEdit = ["storage", "default"].includes( + this.hass.config.config_source + ); + const disabled = this._working || !canEdit; + + return html` + ${this.hass.userData?.showAdvanced + ? html` + +
+ ${!canEdit + ? html` +

+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.edit_requires_storage" + )} +

+ ` + : ""} + +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.external_url" + )} +
+ + + +
+ +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.internal_url" + )} +
+ + +
+
+
+ + ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.save_button" + )} + +
+ + ` + : ""} + `; + } + + private get _internalUrlValue() { + return this._internal_url !== undefined + ? this._internal_url + : this.hass.config.internal_url; + } + + private get _externalUrlValue() { + return this._external_url !== undefined + ? this._external_url + : this.hass.config.external_url; + } + + private _handleChange(ev: PolymerChangedEvent) { + const target = ev.currentTarget as PaperInputElement; + this[`_${target.name}`] = target.value; + } + + private async _save() { + this._working = true; + try { + await saveCoreConfig(this.hass, { + external_url: this._external_url || null, + internal_url: this._internal_url || null, + }); + } catch (err) { + alert("Invalid URLs"); + } finally { + this._working = false; + } + } + + static get styles(): CSSResult { + return css` + .row { + display: flex; + flex-direction: row; + margin: 0 -8px; + align-items: center; + } + + .secondary { + color: var(--secondary-text-color); + } + + .flex { + flex: 1; + } + + .row > * { + margin: 0 8px; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-config-url-form": ConfigUrlForm; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index e31c57bf5f43..eb1dc2506d0f 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -590,7 +590,9 @@ "unit_system_metric": "Metric", "imperial_example": "Fahrenheit, pounds", "metric_example": "Celsius, kilograms", - "save_button": "Save" + "save_button": "Save", + "external_url": "External URL", + "internal_url": "Internal URL" } } } From 359a7f134f8099ed43f83b83dc8664e1c88a137d Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Thu, 7 May 2020 21:26:02 +0200 Subject: [PATCH 2/6] Address review comments --- src/panels/config/core/ha-config-url-form.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index d5edf76ec259..abb67769e13e 100644 --- a/src/panels/config/core/ha-config-url-form.ts +++ b/src/panels/config/core/ha-config-url-form.ts @@ -19,6 +19,8 @@ import type { HomeAssistant } from "../../../types"; class ConfigUrlForm extends LitElement { @property() public hass!: HomeAssistant; + @property() private _error?: string; + @property() private _working = false; @property() private _external_url!: string; @@ -45,7 +47,9 @@ class ConfigUrlForm extends LitElement {

` : ""} - + ${this._error + ? html`
${this._error}
` + : ""}
${this.hass.localize( @@ -119,13 +123,14 @@ class ConfigUrlForm extends LitElement { private async _save() { this._working = true; + this._error = undefined; try { await saveCoreConfig(this.hass, { external_url: this._external_url || null, internal_url: this._internal_url || null, }); } catch (err) { - alert("Invalid URLs"); + this._error = err.message || err; } finally { this._working = false; } @@ -151,6 +156,9 @@ class ConfigUrlForm extends LitElement { .row > * { margin: 0 8px; } + .error { + color: var(--error-color); + } `; } } From 3714fd29348e0a9beababae9fe909ff5a9af3216 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Thu, 7 May 2020 15:37:19 -0700 Subject: [PATCH 3/6] Bump home-assistant-js-websocket --- package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 41d7fb77020f..e661f615c119 100644 --- a/package.json +++ b/package.json @@ -93,7 +93,7 @@ "fuse.js": "^3.4.4", "google-timezones-json": "^1.0.2", "hls.js": "^0.12.4", - "home-assistant-js-websocket": "5.0.0", + "home-assistant-js-websocket": "^5.1.1", "idb-keyval": "^3.2.0", "intl-messageformat": "^8.3.9", "js-yaml": "^3.13.1", diff --git a/yarn.lock b/yarn.lock index ac6307aeb6b1..b07a39fb08f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8219,10 +8219,10 @@ hoek@6.x.x: resolved "https://registry.yarnpkg.com/hoek/-/hoek-6.1.3.tgz#73b7d33952e01fe27a38b0457294b79dd8da242c" integrity sha512-YXXAAhmF9zpQbC7LEcREFtXfGq5K1fmd+4PHkBq8NUqmzW3G+Dq10bI/i0KucLRwss3YYFQ0fSfoxBZYiGUqtQ== -home-assistant-js-websocket@5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.0.0.tgz#b8c28666e7a9f70a1feb02d138c7666f0ce49d23" - integrity sha512-Eji+QJMR04DAdKUpEn7WA1VjqopWgTuS1oN/aODLmPmxUtxhQ8jIaWMBdbAFUn0SQvmlIwaSYF0zBl8tbOM9+w== +home-assistant-js-websocket@^5.1.1: + version "5.1.1" + resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.1.1.tgz#562c510b9784b34878fd974e36d28618f4fa301a" + integrity sha512-Zh8eFezcVYXxvZYneWecIlgSO1ulFqVKggWyZ9UcIkX0NK8uXxEqkIbggl+Zb1XXQ3fM7rNVANNBilBb5Rlepw== homedir-polyfill@^1.0.1: version "1.0.3" From dbdde11d6171c0b643ef519a138bf72f58f4469f Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Fri, 8 May 2020 00:42:44 +0200 Subject: [PATCH 4/6] Process review suggestions --- src/panels/config/core/ha-config-url-form.ts | 131 +++++++++---------- 1 file changed, 64 insertions(+), 67 deletions(-) diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index abb67769e13e..2ce8ace27371 100644 --- a/src/panels/config/core/ha-config-url-form.ts +++ b/src/panels/config/core/ha-config-url-form.ts @@ -23,9 +23,9 @@ class ConfigUrlForm extends LitElement { @property() private _working = false; - @property() private _external_url!: string; + @property() private _external_url?: string; - @property() private _internal_url!: string; + @property() private _internal_url?: string; protected render(): TemplateResult { const canEdit = ["storage", "default"].includes( @@ -33,75 +33,72 @@ class ConfigUrlForm extends LitElement { ); const disabled = this._working || !canEdit; - return html` - ${this.hass.userData?.showAdvanced - ? html` - -
- ${!canEdit - ? html` -

- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.edit_requires_storage" - )} -

- ` - : ""} - ${this._error - ? html`
${this._error}
` - : ""} -
-
+ if (this.hass.userData?.showAdvanced) { + return html` + +
+ ${!canEdit + ? html` +

${this.hass.localize( - "ui.panel.config.core.section.core.core_config.external_url" + "ui.panel.config.core.section.core.core_config.edit_requires_storage" )} -

- - - -
- -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.internal_url" - )} -
- - -
+

+ ` + : ""} + ${this._error ? html`
${this._error}
` : ""} +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.external_url" + )}
-
- - ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.save_button" - )} - + + + +
+ +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.internal_url" + )}
- - ` - : ""} - `; + + +
+
+
+ + ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.save_button" + )} + +
+ + `; + } + return html``; } private get _internalUrlValue() { From 1a5a21fb3204c14e41cd722541cbca9815ff6a7c Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Fri, 8 May 2020 00:46:42 +0200 Subject: [PATCH 5/6] Changed to guard render --- src/panels/config/core/ha-config-url-form.ts | 121 ++++++++++--------- 1 file changed, 61 insertions(+), 60 deletions(-) diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts index 2ce8ace27371..216cd7b94781 100644 --- a/src/panels/config/core/ha-config-url-form.ts +++ b/src/panels/config/core/ha-config-url-form.ts @@ -33,72 +33,73 @@ class ConfigUrlForm extends LitElement { ); const disabled = this._working || !canEdit; - if (this.hass.userData?.showAdvanced) { - return html` - -
- ${!canEdit - ? html` -

- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.edit_requires_storage" - )} -

- ` - : ""} - ${this._error ? html`
${this._error}
` : ""} -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.external_url" - )} -
- - - -
+ if (!this.hass.userData?.showAdvanced) { + return html``; + } -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.internal_url" - )} -
- - + return html` + +
+ ${!canEdit + ? html` +

+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.edit_requires_storage" + )} +

+ ` + : ""} + ${this._error ? html`
${this._error}
` : ""} +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.external_url" + )}
+ + +
-
- + +
+
${this.hass.localize( - "ui.panel.config.core.section.core.core_config.save_button" + "ui.panel.config.core.section.core.core_config.internal_url" + )} +
+ + name="internal_url" + type="url" + .disabled=${disabled} + .value=${this._internalUrlValue} + @value-changed=${this._handleChange} + > +
- - `; - } - return html``; +
+
+ + ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.save_button" + )} + +
+ + `; } private get _internalUrlValue() { From 8331b4a685ee64dfa641e6dcb8cc2d3df685055f Mon Sep 17 00:00:00 2001 From: Franck Nijhof Date: Fri, 8 May 2020 01:07:49 +0200 Subject: [PATCH 6/6] Update fake demo data --- src/fake_data/demo_config.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/fake_data/demo_config.ts b/src/fake_data/demo_config.ts index 63b0d493197b..e1d342e45a68 100644 --- a/src/fake_data/demo_config.ts +++ b/src/fake_data/demo_config.ts @@ -18,4 +18,6 @@ export const demoConfig: HassConfig = { whitelist_external_dirs: [], config_source: "storage", safe_mode: false, + internal_url: "http://homeassistant.local:8123", + external_url: null, };