mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 21:06:34 +00:00
Add new core configuration UI for external_url & internal_url (#5755)
This commit is contained in:
parent
1ca097c5a0
commit
a399d76d06
@ -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",
|
||||
|
@ -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 = (
|
||||
|
@ -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,
|
||||
};
|
||||
|
@ -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) {
|
||||
|
||||
<ha-config-name-form hass="[[hass]]"></ha-config-name-form>
|
||||
<ha-config-core-form hass="[[hass]]"></ha-config-core-form>
|
||||
<ha-config-url-form hass="[[hass]]"></ha-config-url-form>
|
||||
</ha-config-section>
|
||||
`;
|
||||
}
|
||||
|
168
src/panels/config/core/ha-config-url-form.ts
Normal file
168
src/panels/config/core/ha-config-url-form.ts
Normal file
@ -0,0 +1,168 @@
|
||||
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 _error?: string;
|
||||
|
||||
@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;
|
||||
|
||||
if (!this.hass.userData?.showAdvanced) {
|
||||
return html``;
|
||||
}
|
||||
|
||||
return html`
|
||||
<ha-card>
|
||||
<div class="card-content">
|
||||
${!canEdit
|
||||
? html`
|
||||
<p>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.edit_requires_storage"
|
||||
)}
|
||||
</p>
|
||||
`
|
||||
: ""}
|
||||
${this._error ? html`<div class="error">${this._error}</div>` : ""}
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.external_url"
|
||||
)}
|
||||
</div>
|
||||
|
||||
<paper-input
|
||||
class="flex"
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.external_url"
|
||||
)}
|
||||
name="external_url"
|
||||
type="url"
|
||||
.disabled=${disabled}
|
||||
.value=${this._externalUrlValue}
|
||||
@value-changed=${this._handleChange}
|
||||
>
|
||||
</paper-input>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="flex">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.internal_url"
|
||||
)}
|
||||
</div>
|
||||
<paper-input
|
||||
class="flex"
|
||||
.label=${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.internal_url"
|
||||
)}
|
||||
name="internal_url"
|
||||
type="url"
|
||||
.disabled=${disabled}
|
||||
.value=${this._internalUrlValue}
|
||||
@value-changed=${this._handleChange}
|
||||
>
|
||||
</paper-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-actions">
|
||||
<mwc-button @click=${this._save} .disabled=${disabled}>
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.save_button"
|
||||
)}
|
||||
</mwc-button>
|
||||
</div>
|
||||
</ha-card>
|
||||
`;
|
||||
}
|
||||
|
||||
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<string>) {
|
||||
const target = ev.currentTarget as PaperInputElement;
|
||||
this[`_${target.name}`] = target.value;
|
||||
}
|
||||
|
||||
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) {
|
||||
this._error = err.message || err;
|
||||
} 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;
|
||||
}
|
||||
.error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-config-url-form": ConfigUrlForm;
|
||||
}
|
||||
}
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user