jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mark lang and country required in onboarding (#16277)

Browse Source
This commit is contained in:
Bram Kragten 2023-04-24 01:33:44 +02:00 committed by GitHub
parent 35baf4c779
commit 708d1b81da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 51 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/onboarding/onboarding-core-config.ts
View File

@ -1,10 +1,25 @@
import "@material/mwc-button/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
TemplateResult,
} from "lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize";
import { createCountryListEl } from "../components/country-datalist";
import { createCurrencyListEl } from "../components/currency-datalist";
import "../components/ha-alert";
import "../components/ha-formfield";
import "../components/ha-radio";
import type { HaRadio } from "../components/ha-radio";
import "../components/ha-textfield";
import type { HaTextField } from "../components/ha-textfield";
import { createLanguageListEl } from "../components/language-datalist";
import "../components/map/ha-locations-editor";
import type {
HaLocationsEditor,
@ -20,14 +35,7 @@ import { SYMBOL_TO_ISO } from "../data/currency";
import { onboardCoreConfigStep } from "../data/onboarding";
import type { PolymerChangedEvent } from "../polymer-types";
import type { HomeAssistant } from "../types";
import "../components/ha-radio";
import "../components/ha-formfield";
import type { HaRadio } from "../components/ha-radio";
import type { HaTextField } from "../components/ha-textfield";
import "../components/ha-textfield";
import { getLocalLanguage } from "../util/common-translation";
import { createCountryListEl } from "../components/country-datalist";
import { createLanguageListEl } from "../components/language-datalist";
const amsterdam: [number, number] = [52.3731339, 4.8903147];
const mql = matchMedia("(prefers-color-scheme: dark)");
@ -57,10 +65,18 @@ class OnboardingCoreConfig extends LitElement {
@state() private _country?: ConfigUpdateValues["country"];
@state() private _error?: string;
@query("ha-locations-editor", true) private map!: HaLocationsEditor;
protected render(): TemplateResult {
return html`
${
this._error
? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
: nothing
}
<p>
${this.onboardingLocalize(
"ui.panel.page-onboarding.core-config.intro",
@ -114,21 +130,26 @@ class OnboardingCoreConfig extends LitElement {
<div class="row">
<ha-textfield
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.country"
)}
.label=${
this.hass.localize(
"ui.panel.config.core.section.core.core_config.country"
) || "Country"
}
name="country"
required
.disabled=${this._working}
.value=${this._countryValue}
@change=${this._handleChange}
></ha-textfield>
<ha-textfield
class="flex"
.label=${this.hass.localize(
"ui.panel.config.core.section.core.core_config.language"
)}
.label=${
this.hass.localize(
"ui.panel.config.core.section.core.core_config.language"
) || "Language"
}
name="language"
required
.disabled=${this._working}
.value=${this._languageValue}
@change=${this._handleChange}
@ -251,7 +272,7 @@ class OnboardingCoreConfig extends LitElement {
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
setTimeout(
() => this.shadowRoot!.querySelector("ha-textfield")!.focus(),
() => this.renderRoot.querySelector("ha-textfield")!.focus(),
100
);
this.addEventListener("keypress", (ev) => {
@ -259,39 +280,43 @@ class OnboardingCoreConfig extends LitElement {
this._save(ev);
}
});
const tzInput = this.shadowRoot!.querySelector(
const tzInput = this.renderRoot.querySelector(
"[name=timeZone]"
) as HaTextField;
tzInput.updateComplete.then(() => {
tzInput.shadowRoot!.appendChild(createTimezoneListEl());
tzInput.renderRoot.appendChild(createTimezoneListEl());
tzInput.formElement.setAttribute("list", "timezones");
});
const curInput = this.shadowRoot!.querySelector(
const curInput = this.renderRoot.querySelector(
"[name=currency]"
) as HaTextField;
curInput.updateComplete.then(() => {
curInput.shadowRoot!.appendChild(
curInput.renderRoot.appendChild(
createCurrencyListEl(this.hass.locale.language)
);
curInput.formElement.setAttribute("list", "currencies");
});
const countryInput = this.shadowRoot!.querySelector(
const countryInput = this.renderRoot.querySelector(
"[name=country]"
) as HaTextField;
countryInput.updateComplete.then(() => {
countryInput.shadowRoot!.appendChild(
countryInput.renderRoot.appendChild(
createCountryListEl(this.hass.locale.language)
);
countryInput.formElement.setAttribute("list", "countries");
});
const langInput = this.shadowRoot!.querySelector(
const langInput = this.renderRoot.querySelector(
"[name=language]"
) as HaTextField;
langInput.updateComplete.then(() => {
langInput.shadowRoot!.appendChild(createLanguageListEl(this.hass));
langInput.renderRoot.appendChild(createLanguageListEl(this.hass));
langInput.renderRoot
.querySelector("#label")
?.classList.add("mdc-floating-label--required");
langInput.formElement.setAttribute("list", "languages");
});
}
@ -401,7 +426,7 @@ class OnboardingCoreConfig extends LitElement {
}
this._language = getLocalLanguage();
} catch (err: any) {
alert(`Failed to detect location information: ${err.message}`);
this._error = `Failed to detect location information: ${err.message}`;
} finally {
this._working = false;
}
@ -430,7 +455,7 @@ class OnboardingCoreConfig extends LitElement {
});
} catch (err: any) {
this._working = false;
alert(`Failed to save: ${err.message}`);
this._error = err.message;
}
}