- Error: ${this._error}
`
- : ""}
${updatesAvailable > 1
? "Updates Available 🎉"
@@ -76,26 +74,24 @@ export class HassioUpdate extends LitElement {
${this._renderUpdateCard(
"Home Assistant Core",
- this.hassInfo.version,
- this.hassInfo.version_latest,
+ this.hassInfo!,
"hassio/homeassistant/update",
`https://${
- this.hassInfo.version_latest.includes("b") ? "rc" : "www"
- }.home-assistant.io/latest-release-notes/`,
- mdiHomeAssistant
+ this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
+ }.home-assistant.io/latest-release-notes/`
)}
${this._renderUpdateCard(
"Supervisor",
- this.supervisorInfo.version,
- this.supervisorInfo.version_latest,
+ this.supervisorInfo!,
"hassio/supervisor/update",
- `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
+ `https://github.com//home-assistant/hassio/releases/tag/${
+ this.supervisorInfo!.version_latest
+ }`
)}
${this.hassOsInfo
? this._renderUpdateCard(
"Operating System",
- this.hassOsInfo.version,
- this.hassOsInfo.version_latest,
+ this.hassOsInfo,
"hassio/os/update",
`https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
)
@@ -107,28 +103,22 @@ export class HassioUpdate extends LitElement {
private _renderUpdateCard(
name: string,
- curVersion: string,
- lastVersion: string,
+ object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
apiPath: string,
- releaseNotesUrl: string,
- icon?: string
+ releaseNotesUrl: string
): TemplateResult {
- if (!lastVersion || lastVersion === curVersion) {
+ if (!object.update_available) {
return html``;
}
return html`
- ${icon
- ? html`
-
-
Update
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 1ab958891b..8569b8bc60 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -39,7 +39,8 @@ import type { HomeAssistant } from "../../../../src/types";
import { HassioNetworkDialogParams } from "./show-dialog-network";
@customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement implements HassDialog {
+export class DialogHassioNetwork extends LitElement
+ implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _prosessing = false;
diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
new file mode 100644
index 0000000000..fef6e3e0a8
--- /dev/null
+++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
@@ -0,0 +1,245 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDelete } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+ addHassioDockerRegistry,
+ fetchHassioDockerRegistries,
+ removeHassioDockerRegistry,
+} from "../../../../src/data/hassio/docker";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("dialog-hassio-registries")
+class HassioRegistriesDialog extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) private _registries?: {
+ registry: string;
+ username: string;
+ }[];
+
+ @internalProperty() private _registry?: string;
+
+ @internalProperty() private _username?: string;
+
+ @internalProperty() private _password?: string;
+
+ @internalProperty() private _opened = false;
+
+ @internalProperty() private _addingRegistry = false;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ ${this._addingRegistry
+ ? html`
+
+ Add registry
+
+ `
+ : html`${this._registries?.length
+ ? this._registries.map((entry) => {
+ return html`
+
+ ${entry.registry}
+ Username: ${entry.username}
+
+
+
+ `;
+ })
+ : html`
+
+ No registries configured
+
+ `}
+
+ Add new registry
+ `}
+
+
+ `;
+ }
+
+ private _inputChanged(ev: Event) {
+ const target = ev.currentTarget as PaperInputElement;
+ this[`_${target.name}`] = target.value;
+ }
+
+ public async showDialog(_dialogParams: any): Promise {
+ this._opened = true;
+ await this._loadRegistries();
+ await this.updateComplete;
+ }
+
+ public closeDialog(): void {
+ this._addingRegistry = false;
+ this._opened = false;
+ }
+
+ public focus(): void {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ private async _loadRegistries(): Promise {
+ const registries = await fetchHassioDockerRegistries(this.hass);
+ this._registries = Object.keys(registries!.registries).map((key) => ({
+ registry: key,
+ username: registries.registries[key].username,
+ }));
+ }
+
+ private _addRegistry(): void {
+ this._addingRegistry = true;
+ }
+
+ private async _addNewRegistry(): Promise {
+ const data = {};
+ data[this._registry!] = {
+ username: this._username,
+ password: this._password,
+ };
+
+ try {
+ await addHassioDockerRegistry(this.hass, data);
+ await this._loadRegistries();
+ this._addingRegistry = false;
+ } catch (err) {
+ showAlertDialog(this, {
+ title: "Failed to add registry",
+ text: extractApiErrorMessage(err),
+ });
+ }
+ }
+
+ private async _removeRegistry(ev: Event): Promise {
+ const entry = (ev.currentTarget as any).entry;
+
+ try {
+ await removeHassioDockerRegistry(this.hass, entry.registry);
+ await this._loadRegistries();
+ } catch (err) {
+ showAlertDialog(this, {
+ title: "Failed to remove registry",
+ text: extractApiErrorMessage(err),
+ });
+ }
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ haStyleDialog,
+ css`
+ ha-dialog.button-left {
+ --justify-action-buttons: flex-start;
+ }
+ paper-icon-item {
+ cursor: pointer;
+ }
+ .form {
+ color: var(--primary-text-color);
+ }
+ .option {
+ border: 1px solid var(--divider-color);
+ border-radius: 4px;
+ margin-top: 4px;
+ }
+ mwc-button {
+ margin-left: 8px;
+ }
+ mwc-icon-button {
+ color: var(--error-color);
+ margin: -10px;
+ }
+ mwc-list-item {
+ cursor: default;
+ }
+ mwc-list-item span[slot="secondary"] {
+ color: var(--secondary-text-color);
+ }
+ ha-paper-dropdown-menu {
+ display: block;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-hassio-registries": HassioRegistriesDialog;
+ }
+}
diff --git a/hassio/src/dialogs/registries/show-dialog-registries.ts b/hassio/src/dialogs/registries/show-dialog-registries.ts
new file mode 100644
index 0000000000..a9e871d17e
--- /dev/null
+++ b/hassio/src/dialogs/registries/show-dialog-registries.ts
@@ -0,0 +1,13 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-registries";
+
+export const showRegistriesDialog = (element: HTMLElement): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-hassio-registries",
+ dialogImport: () =>
+ import(
+ /* webpackChunkName: "dialog-hassio-registries" */ "./dialog-hassio-registries"
+ ),
+ dialogParams: {},
+ });
+};
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 150fc2b181..2d8d028cdf 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -39,7 +39,7 @@ class HassioRepositoriesDialog extends LitElement {
@property({ attribute: false })
private _dialogParams?: HassioRepositoryDialogParams;
- @query("#repository_input") private _optionInput?: PaperInputElement;
+ @query("#repository_input", true) private _optionInput?: PaperInputElement;
@internalProperty() private _opened = false;
@@ -91,7 +91,7 @@ class HassioRepositoriesDialog extends LitElement {
title="Remove"
@click=${this._removeRepository}
>
- {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _params?: HassioSnapshotUploadDialogParams;
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
index 790ebc467c..d3524bc4ed 100755
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -1,6 +1,7 @@
import "@material/mwc-button";
import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
import {
css,
@@ -196,7 +197,7 @@ class HassioSnapshotDialog extends LitElement {
@click=${this._downloadClicked}
slot="primaryAction"
>
-
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index 8f040c906b..96dd6caecf 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -117,7 +117,7 @@ class HassioSnapshots extends LitElement {
@action=${this._handleAction}
>
-
Reload
@@ -131,7 +131,7 @@ class HassioSnapshots extends LitElement {
- Create snapshot
+ Create Snapshot
Snapshots allow you to easily backup and restore all data of your
@@ -219,7 +219,7 @@ class HassioSnapshots extends LitElement {
- Available snapshots
+ Available Snapshots
${this._snapshots === undefined
? undefined
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 94400402ae..5a2c5776bc 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -87,7 +87,7 @@ class HassioHostInfo extends LitElement {
${this.hostInfo.features.includes("network")
? html`
- IP address
+ IP Address
${primaryIpAddress}
@@ -103,13 +103,13 @@ class HassioHostInfo extends LitElement {
- Operating system
+ Operating System
${this.hostInfo.operating_system}
- ${this.hostInfo.version !== this.hostInfo.version_latest &&
- this.hostInfo.features.includes("hassos")
+ ${this.hostInfo.features.includes("hassos") &&
+ this.hassOsInfo.update_available
? html`
{
const curHostname: string = this.hostInfo.hostname;
const hostname = await showPromptDialog(this, {
- title: "Change hostname",
+ title: "Change Hostname",
inputLabel: "Please enter a new hostname:",
inputType: "string",
defaultValue: curHostname,
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index fcec51d607..9a1fa07f5f 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -7,18 +7,21 @@ import {
property,
TemplateResult,
} from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-settings-row";
import "../../../src/components/ha-switch";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host";
+import { fetchHassioResolution } from "../../../src/data/hassio/resolution";
import {
+ fetchHassioSupervisorInfo,
HassioSupervisorInfo as HassioSupervisorInfoType,
reloadSupervisor,
setSupervisorOption,
SupervisorOptions,
updateSupervisor,
- fetchHassioSupervisorInfo,
} from "../../../src/data/hassio/supervisor";
import {
showAlertDialog,
@@ -26,14 +29,42 @@ import {
} from "../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
+import { documentationUrl } from "../../../src/util/documentation-url";
import { hassioStyle } from "../resources/hassio-style";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+
+const ISSUES = {
+ container: {
+ title: "Containers known to cause issues",
+ url: "/more-info/unsupported/container",
+ },
+ dbus: { title: "DBUS", url: "/more-info/unsupported/dbus" },
+ docker_configuration: {
+ title: "Docker Configuration",
+ url: "/more-info/unsupported/docker_configuration",
+ },
+ docker_version: {
+ title: "Docker Version",
+ url: "/more-info/unsupported/docker_version",
+ },
+ lxc: { title: "LXC", url: "/more-info/unsupported/lxc" },
+ network_manager: {
+ title: "Network Manager",
+ url: "/more-info/unsupported/network_manager",
+ },
+ os: { title: "Operating System", url: "/more-info/unsupported/os" },
+ privileged: {
+ title: "Supervisor is not privileged",
+ url: "/more-info/unsupported/privileged",
+ },
+ systemd: { title: "Systemd", url: "/more-info/unsupported/systemd" },
+};
@customElement("hassio-supervisor-info")
class HassioSupervisorInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public supervisorInfo!: HassioSupervisorInfoType;
+ @property({ attribute: false })
+ public supervisorInfo!: HassioSupervisorInfoType;
@property() public hostInfo!: HassioHostInfoType;
@@ -51,12 +82,12 @@ class HassioSupervisorInfo extends LitElement {
- Newest version
+ Newest Version
${this.supervisorInfo.version_latest}
- ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+ ${this.supervisorInfo.update_available
? html`
- Share diagnostics
+ Share Diagnostics
Share crash reports and diagnostic information.
@@ -118,24 +149,19 @@ class HassioSupervisorInfo extends LitElement {
`
: html`
You are running an unsupported installation.
-
- Learn More
-
+ Learn more
+
`}
Reload
@@ -181,7 +207,7 @@ class HassioSupervisorInfo extends LitElement {
};
await setSupervisorOption(this.hass, data);
await reloadSupervisor(this.hass);
- this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+ fireEvent(this, "hass-api-called", { success: true, response: null });
} catch (err) {
showAlertDialog(this, {
title: "Failed to set supervisor option",
@@ -212,7 +238,7 @@ class HassioSupervisorInfo extends LitElement {
button.progress = true;
const confirmed = await showConfirmationDialog(this, {
- title: "Update supervisor",
+ title: "Update Supervisor",
text: `Are you sure you want to update supervisor to version ${this.supervisorInfo.version_latest}?`,
confirmText: "update",
dismissText: "cancel",
@@ -249,6 +275,32 @@ class HassioSupervisorInfo extends LitElement {
});
}
+ private async _unsupportedDialog(): Promise {
+ const resolution = await fetchHassioResolution(this.hass);
+ await showAlertDialog(this, {
+ title: "You are running an unsupported installation",
+ text: html`Below is a list of issues found with your installation, click
+ on the links to learn how you can resolve the issues.
+
+ ${resolution.unsupported.map(
+ (issue) => html`
+ -
+ ${ISSUES[issue]
+ ? html`
+ ${ISSUES[issue].title}
+ `
+ : issue}
+
+ `
+ )}
+
`,
+ });
+ }
+
private async _toggleDiagnostics(): Promise {
try {
const data: SupervisorOptions = {
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 88528eb431..2e1e2162aa 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -76,7 +76,7 @@ class HassioSupervisorLog extends LitElement {
${this.hass.userData?.showAdvanced
? html`
+
${metrics.map((metric) =>
- this._renderMetric(metric.description, metric.value ?? 0)
+ this._renderMetric(
+ metric.description,
+ metric.value ?? 0,
+ metric.tooltip
+ )
)}
@@ -77,13 +88,17 @@ class HassioSystemMetrics extends LitElement {
this._loadData();
}
- private _renderMetric(description: string, value: number): TemplateResult {
+ private _renderMetric(
+ description: string,
+ value: number,
+ tooltip?: string
+ ): TemplateResult {
const roundedValue = roundWithOneDecimal(value);
return html`
${description}
-
+
${roundedValue}%
@@ -155,6 +170,7 @@ class HassioSystemMetrics extends LitElement {
}
.value {
width: 42px;
+ padding-right: 4px;
}
`,
];
diff --git a/package.json b/package.json
index e1e98eeb01..df64438afc 100644
--- a/package.json
+++ b/package.json
@@ -22,28 +22,29 @@
"author": "Paulus Schoutsen (http://paulusschoutsen.nl)",
"license": "Apache-2.0",
"dependencies": {
- "@formatjs/intl-pluralrules": "^1.5.8",
+ "@formatjs/intl-getcanonicallocales": "^1.4.6",
+ "@formatjs/intl-pluralrules": "^3.4.10",
"@fullcalendar/common": "5.1.0",
"@fullcalendar/core": "5.1.0",
"@fullcalendar/daygrid": "5.1.0",
"@fullcalendar/interaction": "5.1.0",
"@fullcalendar/list": "5.1.0",
- "@material/chips": "=8.0.0-canary.096a7a066.0",
- "@material/circular-progress": "=8.0.0-canary.a78ceb112.0",
- "@material/mwc-button": "^0.18.0",
- "@material/mwc-checkbox": "^0.18.0",
- "@material/mwc-dialog": "^0.18.0",
- "@material/mwc-fab": "^0.18.0",
- "@material/mwc-formfield": "^0.18.0",
- "@material/mwc-icon-button": "^0.18.0",
- "@material/mwc-list": "^0.18.0",
- "@material/mwc-menu": "^0.18.0",
- "@material/mwc-radio": "^0.18.0",
- "@material/mwc-ripple": "^0.18.0",
- "@material/mwc-switch": "^0.18.0",
- "@material/mwc-tab": "^0.18.0",
- "@material/mwc-tab-bar": "^0.18.0",
- "@material/top-app-bar": "=8.0.0-canary.096a7a066.0",
+ "@material/chips": "=8.0.0-canary.774dcfc8e.0",
+ "@material/mwc-button": "^0.19.0",
+ "@material/mwc-checkbox": "^0.19.0",
+ "@material/mwc-circular-progress": "^0.19.0",
+ "@material/mwc-dialog": "^0.19.0",
+ "@material/mwc-fab": "^0.19.0",
+ "@material/mwc-formfield": "^0.19.0",
+ "@material/mwc-icon-button": "^0.19.0",
+ "@material/mwc-list": "^0.19.0",
+ "@material/mwc-menu": "^0.19.0",
+ "@material/mwc-radio": "^0.19.0",
+ "@material/mwc-ripple": "^0.19.0",
+ "@material/mwc-switch": "^0.19.0",
+ "@material/mwc-tab": "^0.19.0",
+ "@material/mwc-tab-bar": "^0.19.0",
+ "@material/top-app-bar": "=8.0.0-canary.774dcfc8e.0",
"@mdi/js": "5.6.55",
"@mdi/svg": "5.6.55",
"@polymer/app-layout": "^3.0.2",
@@ -77,7 +78,7 @@
"@polymer/paper-toast": "^3.0.1",
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.1.0",
- "@thomasloven/round-slider": "0.5.0",
+ "@thomasloven/round-slider": "0.5.2",
"@types/chromecast-caf-sender": "^1.0.3",
"@types/sortablejs": "^1.10.6",
"@vaadin/vaadin-combo-box": "^5.0.10",
@@ -88,11 +89,11 @@
"chartjs-chart-timeline": "^0.3.0",
"codemirror": "^5.49.0",
"comlink": "^4.3.0",
+ "core-js": "^3.6.5",
"cpx": "^1.5.0",
"cropperjs": "^1.5.7",
"deep-clone-simple": "^1.1.1",
"deep-freeze": "^0.0.1",
- "es6-object-assign": "^1.1.0",
"fecha": "^4.2.0",
"fuse.js": "^6.0.0",
"google-timezones-json": "^1.0.2",
@@ -103,21 +104,23 @@
"js-yaml": "^3.13.1",
"leaflet": "^1.4.0",
"leaflet-draw": "^1.0.4",
- "lit-element": "^2.3.1",
+ "lit-element": "^2.4.0",
"lit-grid-layout": "^1.1.10",
- "lit-html": "^1.2.1",
+ "lit-html": "^1.3.0",
"lit-virtualizer": "^0.4.2",
"marked": "^1.1.1",
"mdn-polyfills": "^5.16.0",
"memoize-one": "^5.0.2",
- "node-vibrant": "^3.1.5",
+ "node-vibrant": "^3.1.6",
"proxy-polyfill": "^0.3.1",
"punycode": "^2.1.1",
+ "qrcode": "^1.4.4",
"regenerator-runtime": "^0.13.2",
"resize-observer-polyfill": "^1.5.1",
"roboto-fontface": "^0.10.0",
"sortablejs": "^1.10.2",
"superstruct": "^0.10.12",
+ "tinykeys": "^1.1.1",
"unfetch": "^4.1.0",
"uuid": "^8.3.0",
"vue": "^2.6.11",
@@ -130,16 +133,17 @@
"xss": "^1.0.6"
},
"devDependencies": {
- "@babel/core": "^7.9.0",
- "@babel/plugin-external-helpers": "^7.8.3",
- "@babel/plugin-proposal-class-properties": "^7.8.3",
- "@babel/plugin-proposal-decorators": "^7.8.3",
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
- "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
- "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+ "@babel/core": "^7.11.6",
+ "@babel/plugin-external-helpers": "^7.10.4",
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/plugin-proposal-decorators": "^7.10.5",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+ "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+ "@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
- "@babel/preset-env": "^7.9.5",
- "@babel/preset-typescript": "^7.9.0",
+ "@babel/plugin-syntax-import-meta": "^7.10.4",
+ "@babel/preset-env": "^7.11.5",
+ "@babel/preset-typescript": "^7.10.4",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-json": "^4.0.3",
"@rollup/plugin-node-resolve": "^7.1.3",
@@ -156,8 +160,8 @@
"@types/mocha": "^7.0.2",
"@types/resize-observer-browser": "^0.1.3",
"@types/webspeechapi": "^0.0.29",
- "@typescript-eslint/eslint-plugin": "^2.28.0",
- "@typescript-eslint/parser": "^2.28.0",
+ "@typescript-eslint/eslint-plugin": "^4.4.0",
+ "@typescript-eslint/parser": "^4.4.0",
"babel-loader": "^8.1.0",
"chai": "^4.2.0",
"del": "^4.0.0",
@@ -175,14 +179,13 @@
"gulp": "^4.0.0",
"gulp-foreach": "^0.1.0",
"gulp-json-transform": "^0.4.6",
- "gulp-jsonminify": "^1.1.0",
"gulp-merge-json": "^1.3.1",
"gulp-rename": "^2.0.0",
"gulp-zopfli-green": "^3.0.1",
"html-minifier": "^4.0.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.5",
- "lit-analyzer": "^1.2.0",
+ "lit-analyzer": "^1.2.1",
"lodash.template": "^4.5.0",
"magic-string": "^0.25.7",
"map-stream": "^0.0.7",
@@ -202,30 +205,25 @@
"sinon": "^7.3.1",
"source-map-url": "^0.4.0",
"systemjs": "^6.3.2",
- "terser-webpack-plugin": "^3.0.6",
- "ts-lit-plugin": "^1.2.0",
+ "terser-webpack-plugin": "^5.0.0",
+ "ts-lit-plugin": "^1.2.1",
"ts-mocha": "^7.0.0",
- "typescript": "^3.8.3",
+ "typescript": "^4.0.3",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
- "webpack": "^4.40.2",
- "webpack-cli": "^3.3.9",
- "webpack-dev-server": "^3.10.3",
- "webpack-manifest-plugin": "^2.0.4",
- "workbox-build": "^5.1.3",
- "worker-plugin": "^4.0.3"
+ "webpack": "5.1.3",
+ "webpack-cli": "4.1.0",
+ "webpack-dev-server": "^3.11.0",
+ "webpack-manifest-plugin": "3.0.0-rc.0",
+ "workbox-build": "^5.1.3"
},
"_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
"_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",
"resolutions": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"@polymer/polymer": "3.1.0",
- "lit-html": "1.2.1",
- "lit-element": "2.3.1",
- "@material/animation": "8.0.0-canary.096a7a066.0",
- "@material/base": "8.0.0-canary.096a7a066.0",
- "@material/feature-targeting": "8.0.0-canary.096a7a066.0",
- "@material/theme": "8.0.0-canary.096a7a066.0"
+ "lit-html": "1.3.0",
+ "lit-element": "2.4.0"
},
"main": "src/home-assistant.js",
"husky": {
diff --git a/setup.py b/setup.py
index df64322812..af4d870361 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
- version="20200930.0",
+ version="20201021.1",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors",
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 4ad4b3330b..a4234c56ca 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -200,7 +200,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
private _redirect(authCode: string) {
// OAuth 2: 3.1.2 we need to retain query component of a redirect URI
- let url = this.redirectUri!!;
+ let url = this.redirectUri!;
if (!url.includes("?")) {
url += "?";
} else if (!url.endsWith("&")) {
diff --git a/src/common/color/convert-color.ts b/src/common/color/convert-color.ts
index f48e6184a0..29f95b4283 100644
--- a/src/common/color/convert-color.ts
+++ b/src/common/color/convert-color.ts
@@ -1,10 +1,4 @@
-const expand_hex = (hex: string): string => {
- let result = "";
- for (const val of hex) {
- result += val + val;
- }
- return result;
-};
+import { expandHex } from "./hex";
const rgb_hex = (component: number): string => {
const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -14,10 +8,7 @@ const rgb_hex = (component: number): string => {
// Conversion between HEX and RGB
export const hex2rgb = (hex: string): [number, number, number] => {
- hex = hex.replace("#", "");
- if (hex.length === 3 || hex.length === 4) {
- hex = expand_hex(hex);
- }
+ hex = expandHex(hex);
return [
parseInt(hex.substring(0, 2), 16),
diff --git a/src/common/color/hex.ts b/src/common/color/hex.ts
new file mode 100644
index 0000000000..a25b6d6442
--- /dev/null
+++ b/src/common/color/hex.ts
@@ -0,0 +1,24 @@
+export const expandHex = (hex: string): string => {
+ hex = hex.replace("#", "");
+ if (hex.length === 6) return hex;
+ let result = "";
+ for (const val of hex) {
+ result += val + val;
+ }
+ return result;
+};
+
+// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+export const hexBlend = (c1: string, c2: string, blend = 50): string => {
+ let color = "";
+ c1 = expandHex(c1);
+ c2 = expandHex(c2);
+ for (let i = 0; i <= 5; i += 2) {
+ const h1 = parseInt(c1.substr(i, 2), 16);
+ const h2 = parseInt(c2.substr(i, 2), 16);
+ let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
+ while (hex.length < 2) hex = "0" + hex;
+ color += hex;
+ }
+ return `#${color}`;
+};
diff --git a/src/common/datetime/relative_time.ts b/src/common/datetime/relative_time.ts
index c2a761394b..ef3b8b50c7 100644
--- a/src/common/datetime/relative_time.ts
+++ b/src/common/datetime/relative_time.ts
@@ -38,13 +38,11 @@ export default function relativeTime(
roundedDelta = Math.round(delta);
}
- const timeDesc = localize(
- `ui.components.relative_time.duration.${unit}`,
+ return localize(
+ options.includeTense === false
+ ? `ui.components.relative_time.duration.${unit}`
+ : `ui.components.relative_time.${tense}_duration.${unit}`,
"count",
roundedDelta
);
-
- return options.includeTense === false
- ? timeDesc
- : localize(`ui.components.relative_time.${tense}`, "time", timeDesc);
}
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index 902a1a196a..4e1aeb9ec6 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -7,6 +7,7 @@ import {
rgb2hex,
rgb2lab,
} from "../color/convert-color";
+import { hexBlend } from "../color/hex";
import { labBrighten, labDarken } from "../color/lab";
import { rgbContrast } from "../color/rgb";
@@ -37,6 +38,13 @@ export const applyThemesOnElement = (
if (themeOptions.dark) {
cacheKey = `${cacheKey}__dark`;
themeRules = darkStyles;
+ if (themeOptions.primaryColor) {
+ themeRules["app-header-background-color"] = hexBlend(
+ themeOptions.primaryColor,
+ "#121212",
+ 8
+ );
+ }
}
if (themeOptions.primaryColor) {
cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
diff --git a/src/common/dom/dynamic-element-directive.ts b/src/common/dom/dynamic-element-directive.ts
index 8f05f437ef..fe863e48b8 100644
--- a/src/common/dom/dynamic-element-directive.ts
+++ b/src/common/dom/dynamic-element-directive.ts
@@ -10,10 +10,7 @@ export const dynamicElement = directive(
let element = part.value as HTMLElement | undefined;
- if (
- element !== undefined &&
- tag.toUpperCase() === (element as HTMLElement).tagName
- ) {
+ if (tag === element?.localName) {
if (properties) {
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts
index 03c3abaaab..1ae025a2df 100644
--- a/src/common/entity/binary_sensor_icon.ts
+++ b/src/common/entity/binary_sensor_icon.ts
@@ -18,12 +18,12 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
case "garage_door":
return is_off ? "hass:garage" : "hass:garage-open";
case "power":
- return is_off ? "hass:power-off" : "hass:power-on";
+ return is_off ? "hass:power-plug-off" : "hass:power-plug";
case "gas":
case "problem":
case "safety":
case "smoke":
- return is_off ? "hass:shield-check" : "hass:alert";
+ return is_off ? "hass:check-circle" : "hass:alert-circle";
case "heat":
return is_off ? "hass:thermometer" : "hass:fire";
case "light":
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 2a437901ea..d588cd1688 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -5,6 +5,7 @@ import { formatDateTime } from "../datetime/format_date_time";
import { formatTime } from "../datetime/format_time";
import { LocalizeFunc } from "../translations/localize";
import { computeStateDomain } from "./compute_state_domain";
+import { numberFormat } from "../string/number-format";
export const computeStateDisplay = (
localize: LocalizeFunc,
@@ -19,7 +20,9 @@ export const computeStateDisplay = (
}
if (stateObj.attributes.unit_of_measurement) {
- return `${compareState} ${stateObj.attributes.unit_of_measurement}`;
+ return `${numberFormat(compareState, language)} ${
+ stateObj.attributes.unit_of_measurement
+ }`;
}
const domain = computeStateDomain(stateObj);
diff --git a/src/common/entity/cover_icon.ts b/src/common/entity/cover_icon.ts
index 5723ee2d34..7c9bc5ed53 100644
--- a/src/common/entity/cover_icon.ts
+++ b/src/common/entity/cover_icon.ts
@@ -43,6 +43,7 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
}
case "blind":
case "curtain":
+ case "shade":
switch (state) {
case "opening":
return "hass:arrow-up-box";
diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 1d52dbcde6..97a52b1864 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -51,21 +51,17 @@ class SearchInput extends LitElement {
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
-
+
${this.filter &&
html`
-
`}
diff --git a/src/common/string/filter/char-code.ts b/src/common/string/filter/char-code.ts
new file mode 100644
index 0000000000..faa7210898
--- /dev/null
+++ b/src/common/string/filter/char-code.ts
@@ -0,0 +1,244 @@
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
+
+/**
+ * An inlined enum containing useful character codes (to be used with String.charCodeAt).
+ * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
+ */
+export enum CharCode {
+ Null = 0,
+ /**
+ * The `\b` character.
+ */
+ Backspace = 8,
+ /**
+ * The `\t` character.
+ */
+ Tab = 9,
+ /**
+ * The `\n` character.
+ */
+ LineFeed = 10,
+ /**
+ * The `\r` character.
+ */
+ CarriageReturn = 13,
+ Space = 32,
+ /**
+ * The `!` character.
+ */
+ ExclamationMark = 33,
+ /**
+ * The `"` character.
+ */
+ DoubleQuote = 34,
+ /**
+ * The `#` character.
+ */
+ Hash = 35,
+ /**
+ * The `$` character.
+ */
+ DollarSign = 36,
+ /**
+ * The `%` character.
+ */
+ PercentSign = 37,
+ /**
+ * The `&` character.
+ */
+ Ampersand = 38,
+ /**
+ * The `'` character.
+ */
+ SingleQuote = 39,
+ /**
+ * The `(` character.
+ */
+ OpenParen = 40,
+ /**
+ * The `)` character.
+ */
+ CloseParen = 41,
+ /**
+ * The `*` character.
+ */
+ Asterisk = 42,
+ /**
+ * The `+` character.
+ */
+ Plus = 43,
+ /**
+ * The `,` character.
+ */
+ Comma = 44,
+ /**
+ * The `-` character.
+ */
+ Dash = 45,
+ /**
+ * The `.` character.
+ */
+ Period = 46,
+ /**
+ * The `/` character.
+ */
+ Slash = 47,
+
+ Digit0 = 48,
+ Digit1 = 49,
+ Digit2 = 50,
+ Digit3 = 51,
+ Digit4 = 52,
+ Digit5 = 53,
+ Digit6 = 54,
+ Digit7 = 55,
+ Digit8 = 56,
+ Digit9 = 57,
+
+ /**
+ * The `:` character.
+ */
+ Colon = 58,
+ /**
+ * The `;` character.
+ */
+ Semicolon = 59,
+ /**
+ * The `<` character.
+ */
+ LessThan = 60,
+ /**
+ * The `=` character.
+ */
+ Equals = 61,
+ /**
+ * The `>` character.
+ */
+ GreaterThan = 62,
+ /**
+ * The `?` character.
+ */
+ QuestionMark = 63,
+ /**
+ * The `@` character.
+ */
+ AtSign = 64,
+
+ A = 65,
+ B = 66,
+ C = 67,
+ D = 68,
+ E = 69,
+ F = 70,
+ G = 71,
+ H = 72,
+ I = 73,
+ J = 74,
+ K = 75,
+ L = 76,
+ M = 77,
+ N = 78,
+ O = 79,
+ P = 80,
+ Q = 81,
+ R = 82,
+ S = 83,
+ T = 84,
+ U = 85,
+ V = 86,
+ W = 87,
+ X = 88,
+ Y = 89,
+ Z = 90,
+
+ /**
+ * The `[` character.
+ */
+ OpenSquareBracket = 91,
+ /**
+ * The `\` character.
+ */
+ Backslash = 92,
+ /**
+ * The `]` character.
+ */
+ CloseSquareBracket = 93,
+ /**
+ * The `^` character.
+ */
+ Caret = 94,
+ /**
+ * The `_` character.
+ */
+ Underline = 95,
+ /**
+ * The ``(`)`` character.
+ */
+ BackTick = 96,
+
+ a = 97,
+ b = 98,
+ c = 99,
+ d = 100,
+ e = 101,
+ f = 102,
+ g = 103,
+ h = 104,
+ i = 105,
+ j = 106,
+ k = 107,
+ l = 108,
+ m = 109,
+ n = 110,
+ o = 111,
+ p = 112,
+ q = 113,
+ r = 114,
+ s = 115,
+ t = 116,
+ u = 117,
+ v = 118,
+ w = 119,
+ x = 120,
+ y = 121,
+ z = 122,
+
+ /**
+ * The `{` character.
+ */
+ OpenCurlyBrace = 123,
+ /**
+ * The `|` character.
+ */
+ Pipe = 124,
+ /**
+ * The `}` character.
+ */
+ CloseCurlyBrace = 125,
+ /**
+ * The `~` character.
+ */
+ Tilde = 126,
+}
diff --git a/src/common/string/filter/filter.ts b/src/common/string/filter/filter.ts
new file mode 100644
index 0000000000..d3471433ab
--- /dev/null
+++ b/src/common/string/filter/filter.ts
@@ -0,0 +1,463 @@
+/* eslint-disable no-console */
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { CharCode } from "./char-code";
+
+const _debug = false;
+
+export interface Match {
+ start: number;
+ end: number;
+}
+
+const _maxLen = 128;
+
+function initTable() {
+ const table: number[][] = [];
+ const row: number[] = [0];
+ for (let i = 1; i <= _maxLen; i++) {
+ row.push(-i);
+ }
+ for (let i = 0; i <= _maxLen; i++) {
+ const thisRow = row.slice(0);
+ thisRow[0] = -i;
+ table.push(thisRow);
+ }
+ return table;
+}
+
+function isSeparatorAtPos(value: string, index: number): boolean {
+ if (index < 0 || index >= value.length) {
+ return false;
+ }
+ const code = value.charCodeAt(index);
+ switch (code) {
+ case CharCode.Underline:
+ case CharCode.Dash:
+ case CharCode.Period:
+ case CharCode.Space:
+ case CharCode.Slash:
+ case CharCode.Backslash:
+ case CharCode.SingleQuote:
+ case CharCode.DoubleQuote:
+ case CharCode.Colon:
+ case CharCode.DollarSign:
+ return true;
+ default:
+ return false;
+ }
+}
+
+function isWhitespaceAtPos(value: string, index: number): boolean {
+ if (index < 0 || index >= value.length) {
+ return false;
+ }
+ const code = value.charCodeAt(index);
+ switch (code) {
+ case CharCode.Space:
+ case CharCode.Tab:
+ return true;
+ default:
+ return false;
+ }
+}
+
+function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
+ return word[pos] !== wordLow[pos];
+}
+
+function isPatternInWord(
+ patternLow: string,
+ patternPos: number,
+ patternLen: number,
+ wordLow: string,
+ wordPos: number,
+ wordLen: number
+): boolean {
+ while (patternPos < patternLen && wordPos < wordLen) {
+ if (patternLow[patternPos] === wordLow[wordPos]) {
+ patternPos += 1;
+ }
+ wordPos += 1;
+ }
+ return patternPos === patternLen; // pattern must be exhausted
+}
+
+enum Arrow {
+ Top = 0b1,
+ Diag = 0b10,
+ Left = 0b100,
+}
+
+/**
+ * A tuple of three values.
+ * 0. the score
+ * 1. the matches encoded as bitmask (2^53)
+ * 2. the offset at which matching started
+ */
+export type FuzzyScore = [number, number, number];
+
+interface FilterGlobals {
+ _matchesCount: number;
+ _topMatch2: number;
+ _topScore: number;
+ _wordStart: number;
+ _firstMatchCanBeWeak: boolean;
+ _table: number[][];
+ _scores: number[][];
+ _arrows: Arrow[][];
+}
+
+function initGlobals(): FilterGlobals {
+ return {
+ _matchesCount: 0,
+ _topMatch2: 0,
+ _topScore: 0,
+ _wordStart: 0,
+ _firstMatchCanBeWeak: false,
+ _table: initTable(),
+ _scores: initTable(),
+ _arrows: initTable(),
+ };
+}
+
+export function fuzzyScore(
+ pattern: string,
+ patternLow: string,
+ patternStart: number,
+ word: string,
+ wordLow: string,
+ wordStart: number,
+ firstMatchCanBeWeak: boolean
+): FuzzyScore | undefined {
+ const globals = initGlobals();
+ const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
+ const wordLen = word.length > _maxLen ? _maxLen : word.length;
+
+ if (
+ patternStart >= patternLen ||
+ wordStart >= wordLen ||
+ patternLen - patternStart > wordLen - wordStart
+ ) {
+ return undefined;
+ }
+
+ // Run a simple check if the characters of pattern occur
+ // (in order) at all in word. If that isn't the case we
+ // stop because no match will be possible
+ if (
+ !isPatternInWord(
+ patternLow,
+ patternStart,
+ patternLen,
+ wordLow,
+ wordStart,
+ wordLen
+ )
+ ) {
+ return undefined;
+ }
+
+ let row = 1;
+ let column = 1;
+ let patternPos = patternStart;
+ let wordPos = wordStart;
+
+ let hasStrongFirstMatch = false;
+
+ // There will be a match, fill in tables
+ for (
+ row = 1, patternPos = patternStart;
+ patternPos < patternLen;
+ row++, patternPos++
+ ) {
+ for (
+ column = 1, wordPos = wordStart;
+ wordPos < wordLen;
+ column++, wordPos++
+ ) {
+ const score = _doScore(
+ pattern,
+ patternLow,
+ patternPos,
+ patternStart,
+ word,
+ wordLow,
+ wordPos
+ );
+
+ if (patternPos === patternStart && score > 1) {
+ hasStrongFirstMatch = true;
+ }
+
+ globals._scores[row][column] = score;
+
+ const diag =
+ globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
+ const top = globals._table[row - 1][column] + -1;
+ const left = globals._table[row][column - 1] + -1;
+
+ if (left >= top) {
+ // left or diag
+ if (left > diag) {
+ globals._table[row][column] = left;
+ globals._arrows[row][column] = Arrow.Left;
+ } else if (left === diag) {
+ globals._table[row][column] = left;
+ globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
+ } else {
+ globals._table[row][column] = diag;
+ globals._arrows[row][column] = Arrow.Diag;
+ }
+ } else if (top > diag) {
+ globals._table[row][column] = top;
+ globals._arrows[row][column] = Arrow.Top;
+ } else if (top === diag) {
+ globals._table[row][column] = top;
+ globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
+ } else {
+ globals._table[row][column] = diag;
+ globals._arrows[row][column] = Arrow.Diag;
+ }
+ }
+ }
+
+ if (_debug) {
+ printTables(pattern, patternStart, word, wordStart, globals);
+ }
+
+ if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
+ return undefined;
+ }
+
+ globals._matchesCount = 0;
+ globals._topScore = -100;
+ globals._wordStart = wordStart;
+ globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
+
+ _findAllMatches2(
+ row - 1,
+ column - 1,
+ patternLen === wordLen ? 1 : 0,
+ 0,
+ false,
+ globals
+ );
+ if (globals._matchesCount === 0) {
+ return undefined;
+ }
+
+ return [globals._topScore, globals._topMatch2, wordStart];
+}
+
+function _doScore(
+ pattern: string,
+ patternLow: string,
+ patternPos: number,
+ patternStart: number,
+ word: string,
+ wordLow: string,
+ wordPos: number
+) {
+ if (patternLow[patternPos] !== wordLow[wordPos]) {
+ return -1;
+ }
+ if (wordPos === patternPos - patternStart) {
+ // common prefix: `foobar <-> foobaz`
+ // ^^^^^
+ if (pattern[patternPos] === word[wordPos]) {
+ return 7;
+ }
+ return 5;
+ }
+
+ if (
+ isUpperCaseAtPos(wordPos, word, wordLow) &&
+ (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
+ ) {
+ // hitting upper-case: `foo <-> forOthers`
+ // ^^ ^
+ if (pattern[patternPos] === word[wordPos]) {
+ return 7;
+ }
+ return 5;
+ }
+
+ if (
+ isSeparatorAtPos(wordLow, wordPos) &&
+ (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
+ ) {
+ // hitting a separator: `. <-> foo.bar`
+ // ^
+ return 5;
+ }
+
+ if (
+ isSeparatorAtPos(wordLow, wordPos - 1) ||
+ isWhitespaceAtPos(wordLow, wordPos - 1)
+ ) {
+ // post separator: `foo <-> bar_foo`
+ // ^^^
+ return 5;
+ }
+ return 1;
+}
+
+function printTable(
+ table: number[][],
+ pattern: string,
+ patternLen: number,
+ word: string,
+ wordLen: number
+): string {
+ function pad(s: string, n: number, _pad = " ") {
+ while (s.length < n) {
+ s = _pad + s;
+ }
+ return s;
+ }
+ let ret = ` | |${word
+ .split("")
+ .map((c) => pad(c, 3))
+ .join("|")}\n`;
+
+ for (let i = 0; i <= patternLen; i++) {
+ if (i === 0) {
+ ret += " |";
+ } else {
+ ret += `${pattern[i - 1]}|`;
+ }
+ ret +=
+ table[i]
+ .slice(0, wordLen + 1)
+ .map((n) => pad(n.toString(), 3))
+ .join("|") + "\n";
+ }
+ return ret;
+}
+
+function printTables(
+ pattern: string,
+ patternStart: number,
+ word: string,
+ wordStart: number,
+ globals: FilterGlobals
+): void {
+ pattern = pattern.substr(patternStart);
+ word = word.substr(wordStart);
+ console.log(
+ printTable(globals._table, pattern, pattern.length, word, word.length)
+ );
+ console.log(
+ printTable(globals._arrows, pattern, pattern.length, word, word.length)
+ );
+ console.log(
+ printTable(globals._scores, pattern, pattern.length, word, word.length)
+ );
+}
+
+function _findAllMatches2(
+ row: number,
+ column: number,
+ total: number,
+ matches: number,
+ lastMatched: boolean,
+ globals: FilterGlobals
+): void {
+ if (globals._matchesCount >= 10 || total < -25) {
+ // stop when having already 10 results, or
+ // when a potential alignment as already 5 gaps
+ return;
+ }
+
+ let simpleMatchCount = 0;
+
+ while (row > 0 && column > 0) {
+ const score = globals._scores[row][column];
+ const arrow = globals._arrows[row][column];
+
+ if (arrow === Arrow.Left) {
+ // left -> no match, skip a word character
+ column -= 1;
+ if (lastMatched) {
+ total -= 5; // new gap penalty
+ } else if (matches !== 0) {
+ total -= 1; // gap penalty after first match
+ }
+ lastMatched = false;
+ simpleMatchCount = 0;
+ } else if (arrow && Arrow.Diag) {
+ if (arrow && Arrow.Left) {
+ // left
+ _findAllMatches2(
+ row,
+ column - 1,
+ matches !== 0 ? total - 1 : total, // gap penalty after first match
+ matches,
+ lastMatched,
+ globals
+ );
+ }
+
+ // diag
+ total += score;
+ row -= 1;
+ column -= 1;
+ lastMatched = true;
+
+ // match -> set a 1 at the word pos
+ matches += 2 ** (column + globals._wordStart);
+
+ // count simple matches and boost a row of
+ // simple matches when they yield in a
+ // strong match.
+ if (score === 1) {
+ simpleMatchCount += 1;
+
+ if (row === 0 && !globals._firstMatchCanBeWeak) {
+ // when the first match is a weak
+ // match we discard it
+ return;
+ }
+ } else {
+ // boost
+ total += 1 + simpleMatchCount * (score - 1);
+ simpleMatchCount = 0;
+ }
+ } else {
+ return;
+ }
+ }
+
+ total -= column >= 3 ? 9 : column * 3; // late start penalty
+
+ // dynamically keep track of the current top score
+ // and insert the current best score at head, the rest at tail
+ globals._matchesCount += 1;
+ if (total > globals._topScore) {
+ globals._topScore = total;
+ globals._topMatch2 = matches;
+ }
+}
+
+// #endregion
diff --git a/src/common/string/filter/sequence-matching.ts b/src/common/string/filter/sequence-matching.ts
new file mode 100644
index 0000000000..dac81672a8
--- /dev/null
+++ b/src/common/string/filter/sequence-matching.ts
@@ -0,0 +1,66 @@
+import { fuzzyScore } from "./filter";
+
+/**
+ * Determine whether a sequence of letters exists in another string,
+ * in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
+ *
+ * @param {string} filter - Sequence of letters to check for
+ * @param {string} word - Word to check for sequence
+ *
+ * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
+ */
+
+export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
+ let topScore = 0;
+
+ for (const word of words) {
+ const scores = fuzzyScore(
+ filter,
+ filter.toLowerCase(),
+ 0,
+ word,
+ word.toLowerCase(),
+ 0,
+ true
+ );
+
+ if (!scores) {
+ continue;
+ }
+
+ // The VS Code implementation of filter treats a score of "0" as just barely a match
+ // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
+ // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
+ const score = scores[0] + 1;
+
+ if (score > topScore) {
+ topScore = score;
+ }
+ }
+ return topScore;
+};
+
+export interface ScorableTextItem {
+ score?: number;
+ text: string;
+ altText?: string;
+}
+
+type FuzzyFilterSort = (
+ filter: string,
+ items: T[]
+) => T[];
+
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
+ return items
+ .map((item) => {
+ item.score = item.altText
+ ? fuzzySequentialMatch(filter, item.text, item.altText)
+ : fuzzySequentialMatch(filter, item.text);
+ return item;
+ })
+ .filter((item) => item.score !== undefined && item.score > 0)
+ .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
+ scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
+ );
+};
diff --git a/src/common/string/number-format.ts b/src/common/string/number-format.ts
new file mode 100644
index 0000000000..39d20e47a5
--- /dev/null
+++ b/src/common/string/number-format.ts
@@ -0,0 +1,22 @@
+/**
+ * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ *
+ * @param num The number to format
+ * @param language The language to use when formatting the number
+ */
+export const numberFormat = (
+ num: string | number,
+ language: string
+): string => {
+ // Polyfill for Number.isNaN, which is more reliable that the global isNaN()
+ Number.isNaN =
+ Number.isNaN ||
+ function isNaN(input) {
+ return typeof input === "number" && isNaN(input);
+ };
+
+ if (!Number.isNaN(Number(num)) && Intl) {
+ return new Intl.NumberFormat(language).format(Number(num));
+ }
+ return num.toString();
+};
diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index 696a765872..6ebba251b8 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -1,4 +1,5 @@
import IntlMessageFormat from "intl-messageformat";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
import { Resources } from "../../types";
export type LocalizeFunc = (key: string, ...args: any[]) => string;
@@ -12,9 +13,12 @@ export interface FormatsType {
time: FormatType;
}
-if (!Intl.PluralRules) {
- import("@formatjs/intl-pluralrules/polyfill-locales");
-}
+let polyfillLoaded = !shouldPolyfill();
+const polyfillProm = polyfillLoaded
+ ? undefined
+ : import("@formatjs/intl-pluralrules/polyfill-locales").then(() => {
+ polyfillLoaded = true;
+ });
/**
* Adapted from Polymer app-localize-behavior.
@@ -37,12 +41,16 @@ if (!Intl.PluralRules) {
* }
*/
-export const computeLocalize = (
+export const computeLocalize = async (
cache: any,
language: string,
resources: Resources,
formats?: FormatsType
-): LocalizeFunc => {
+): Promise => {
+ if (!polyfillLoaded) {
+ await polyfillProm;
+ }
+
// Everytime any of the parameters change, invalidate the strings cache.
cache._localizationCache = {};
diff --git a/src/common/util/debounce.ts b/src/common/util/debounce.ts
index fedd679e2e..557d596540 100644
--- a/src/common/util/debounce.ts
+++ b/src/common/util/debounce.ts
@@ -5,7 +5,7 @@
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
// eslint-disable-next-line: ban-types
-export const debounce = (
+export const debounce = unknown>(
func: T,
wait,
immediate = false
diff --git a/src/common/util/subscribe-one.ts b/src/common/util/subscribe-one.ts
index f86bfb7388..51bfa1081d 100644
--- a/src/common/util/subscribe-one.ts
+++ b/src/common/util/subscribe-one.ts
@@ -2,7 +2,10 @@ import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
export const subscribeOne = async (
conn: Connection,
- subscribe: (conn: Connection, onChange: (items: T) => void) => UnsubscribeFunc
+ subscribe: (
+ conn2: Connection,
+ onChange: (items: T) => void
+ ) => UnsubscribeFunc
) =>
new Promise((resolve) => {
const unsub = subscribe(conn, (items) => {
diff --git a/src/common/util/throttle.ts b/src/common/util/throttle.ts
index 1cd98ea188..4832a2709b 100644
--- a/src/common/util/throttle.ts
+++ b/src/common/util/throttle.ts
@@ -5,7 +5,7 @@
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `false for leading`. To disable execution on the trailing edge, ditto.
-export const throttle = (
+export const throttle = unknown>(
func: T,
wait: number,
leading = true,
diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
index a446d456fc..c6c325fdab 100644
--- a/src/components/buttons/ha-progress-button.ts
+++ b/src/components/buttons/ha-progress-button.ts
@@ -21,7 +21,7 @@ class HaProgressButton extends LitElement {
@property({ type: Boolean }) public raised = false;
- @query("mwc-button") private _button?: Button;
+ @query("mwc-button", true) private _button?: Button;
public render(): TemplateResult {
return html`
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index db83db5a6d..1b8530dcec 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -73,13 +73,17 @@ export interface DataTableColumnData extends DataTableSortColumnData {
hidden?: boolean;
}
+type ClonedDataTableColumnData = Omit & {
+ title?: string;
+};
+
export interface DataTableRowData {
[key: string]: any;
selectable?: boolean;
}
export interface SortableColumnContainer {
- [key: string]: DataTableSortColumnData;
+ [key: string]: ClonedDataTableColumnData;
}
@customElement("ha-data-table")
@@ -90,6 +94,8 @@ export class HaDataTable extends LitElement {
@property({ type: Boolean }) public selectable = false;
+ @property({ type: Boolean }) public clickable = false;
+
@property({ type: Boolean }) public hasFab = false;
@property({ type: Boolean, attribute: "auto-height" })
@@ -101,6 +107,9 @@ export class HaDataTable extends LitElement {
@property({ type: String }) public searchLabel?: string;
+ @property({ type: Boolean, attribute: "no-label-float" })
+ public noLabelFloat? = false;
+
@property({ type: String }) public filter = "";
@internalProperty() private _filterable = false;
@@ -113,9 +122,9 @@ export class HaDataTable extends LitElement {
@internalProperty() private _filteredData: DataTableRowData[] = [];
- @query("slot[name='header']") private _header!: HTMLSlotElement;
+ @internalProperty() private _headerHeight = 0;
- @query(".mdc-data-table__table") private _table!: HTMLDivElement;
+ @query("slot[name='header']") private _header!: HTMLSlotElement;
private _checkableRowsCount?: number;
@@ -166,11 +175,13 @@ export class HaDataTable extends LitElement {
}
const clonedColumns: DataTableColumnContainer = deepClone(this.columns);
- Object.values(clonedColumns).forEach((column: DataTableColumnData) => {
- delete column.title;
- delete column.type;
- delete column.template;
- });
+ Object.values(clonedColumns).forEach(
+ (column: ClonedDataTableColumnData) => {
+ delete column.title;
+ delete column.type;
+ delete column.template;
+ }
+ );
this._sortColumns = clonedColumns;
}
@@ -206,6 +217,7 @@ export class HaDataTable extends LitElement {
`
@@ -220,7 +232,7 @@ export class HaDataTable extends LitElement {
style=${styleMap({
height: this.autoHeight
? `${(this._filteredData.length || 1) * 53 + 57}px`
- : `calc(100% - ${this._header?.clientHeight}px)`,
+ : `calc(100% - ${this._headerHeight}px)`,
})}
>
@@ -317,12 +329,13 @@ export class HaDataTable extends LitElement {
> => {
if (!worker) {
- worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+ worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
}
return await worker.filterData(data, columns, filter);
@@ -29,7 +29,7 @@ export const sortData = async (
sortColumn: SortDataParamTypes[3]
): Promise> => {
if (!worker) {
- worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+ worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
}
return await worker.sortData(data, columns, direction, sortColumn);
diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index cc0e7d3f29..70211da366 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -1,7 +1,7 @@
+// @ts-nocheck
import Vue from "vue";
import wrap from "@vue/web-component-wrapper";
import DateRangePicker from "vue2-daterange-picker";
-// @ts-ignore
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
import { fireEvent } from "../common/dom/fire_event";
import { Constructor } from "../types";
@@ -35,7 +35,6 @@ const Component = Vue.extend({
},
},
render(createElement) {
- // @ts-ignore
return createElement(DateRangePicker, {
props: {
"time-picker": true,
@@ -52,7 +51,6 @@ const Component = Vue.extend({
endDate: this.endDate,
},
callback: (value) => {
- // @ts-ignore
fireEvent(this.$el as HTMLElement, "change", value);
},
expression: "dateRange",
diff --git a/src/components/device/ha-device-action-picker.ts b/src/components/device/ha-device-action-picker.ts
index eaca169438..e8e50f5b47 100644
--- a/src/components/device/ha-device-action-picker.ts
+++ b/src/components/device/ha-device-action-picker.ts
@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
@customElement("ha-device-action-picker")
class HaDeviceActionPicker extends HaDeviceAutomationPicker {
- protected NO_AUTOMATION_TEXT = "No actions";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.no_actions"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown action";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.unknown_action"
+ );
+ }
constructor() {
super(
diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index 540cfc5c9d..fe56884a09 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -33,16 +33,24 @@ export abstract class HaDeviceAutomationPicker<
@property() public value?: T;
- protected NO_AUTOMATION_TEXT = "No automations";
-
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown automation";
-
@internalProperty() private _automations: T[] = [];
// Trigger an empty render so we start with a clean DOM.
// paper-listbox does not like changing things around.
@internalProperty() private _renderEmpty = false;
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.no_actions"
+ );
+ }
+
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.unknown_action"
+ );
+ }
+
private _localizeDeviceAutomation: (
hass: HomeAssistant,
automation: T
diff --git a/src/components/device/ha-device-condition-picker.ts b/src/components/device/ha-device-condition-picker.ts
index dbe95c8f6a..89fefbafaf 100644
--- a/src/components/device/ha-device-condition-picker.ts
+++ b/src/components/device/ha-device-condition-picker.ts
@@ -11,9 +11,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
class HaDeviceConditionPicker extends HaDeviceAutomationPicker<
DeviceCondition
> {
- protected NO_AUTOMATION_TEXT = "No conditions";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.conditions.no_conditions"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown condition";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.conditions.unknown_condition"
+ );
+ }
constructor() {
super(
diff --git a/src/components/device/ha-device-trigger-picker.ts b/src/components/device/ha-device-trigger-picker.ts
index ec140426ae..d1ff66d37e 100644
--- a/src/components/device/ha-device-trigger-picker.ts
+++ b/src/components/device/ha-device-trigger-picker.ts
@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
@customElement("ha-device-trigger-picker")
class HaDeviceTriggerPicker extends HaDeviceAutomationPicker {
- protected NO_AUTOMATION_TEXT = "No triggers";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.triggers.no_triggers"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown trigger";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.triggers.unknown_trigger"
+ );
+ }
constructor() {
super(
diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 7df570747c..09ebaef2c4 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -71,14 +71,25 @@ class HaChartBase extends mixinBehaviors(
margin: 5px 0 0 0;
width: 100%;
}
+ .chartTooltip ul {
+ margin: 0 3px;
+ }
.chartTooltip li {
display: block;
white-space: pre-line;
}
+ .chartTooltip li::first-line {
+ line-height: 0;
+ }
.chartTooltip .title {
text-align: center;
font-weight: 500;
}
+ .chartTooltip .beforeBody {
+ text-align: center;
+ font-weight: 300;
+ word-break: break-all;
+ }
.chartLegend li {
display: inline-block;
padding: 0 6px;
@@ -133,6 +144,9 @@ class HaChartBase extends mixinBehaviors(
style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"
>
[[tooltip.title]]
+
+ [[tooltip.beforeBody]]
+
@@ -264,6 +278,10 @@ class HaChartBase extends mixinBehaviors(
const title = tooltip.title ? tooltip.title[0] || "" : "";
this.set(["tooltip", "title"], title);
+ if (tooltip.beforeBody) {
+ this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
+ }
+
const bodyLines = tooltip.body.map((n) => n.lines);
// Set Text
diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts
index ee2958323b..e9c3b52e0f 100644
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
@@ -16,8 +17,9 @@ import {
import { fireEvent } from "../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
import "./state-badge";
+import "@material/mwc-icon-button/mwc-icon-button";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -55,7 +57,7 @@ class HaEntityAttributePicker extends LitElement {
@property({ type: Boolean }) private _opened = false;
- @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
+ @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
protected shouldUpdate(changedProps: PropertyValues) {
return !(!changedProps.has("_opened") && this._opened);
@@ -80,6 +82,7 @@ class HaEntityAttributePicker extends LitElement {
.value=${this._value}
.allowCustomValue=${this.allowCustomValue}
.renderer=${rowRenderer}
+ attr-for-value="bind-value"
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
>
@@ -97,33 +100,35 @@ class HaEntityAttributePicker extends LitElement {
autocorrect="off"
spellcheck="false"
>
- ${this.value
- ? html`
-
- Clear
-
- `
- : ""}
+
+ ${this.value
+ ? html`
+
+
+ `
+ : ""}
-
- Toggle
-
+
+
+
`;
@@ -159,7 +164,10 @@ class HaEntityAttributePicker extends LitElement {
static get styles(): CSSResult {
return css`
- paper-input > ha-icon-button {
+ .suffix {
+ display: flex;
+ }
+ mwc-icon-button {
--mdc-icon-button-size: 24px;
padding: 0px 2px;
color: var(--secondary-text-color);
diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index 94ddcf4517..6b06f855c2 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,3 +1,5 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
@@ -20,7 +22,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
import "./state-badge";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -97,10 +99,12 @@ export class HaEntityPicker extends LitElement {
@property({ type: Boolean }) private _opened = false;
- @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
+ @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
private _initedStates = false;
+ private _states: HassEntity[] = [];
+
private _getStates = memoizeOne(
(
_opened: boolean,
@@ -166,7 +170,7 @@ export class HaEntityPicker extends LitElement {
protected updated(changedProps: PropertyValues) {
if (!this._initedStates || (changedProps.has("_opened") && this._opened)) {
- const states = this._getStates(
+ this._states = this._getStates(
this._opened,
this.hass,
this.includeDomains,
@@ -174,7 +178,7 @@ export class HaEntityPicker extends LitElement {
this.entityFilter,
this.includeDeviceClasses
);
- (this._comboBox as any).items = states;
+ (this._comboBox as any).filteredItems = this._states;
this._initedStates = true;
}
}
@@ -192,6 +196,7 @@ export class HaEntityPicker extends LitElement {
.renderer=${rowRenderer}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
+ @filter-changed=${this._filterChanged}
>
- ${this.value && !this.hideClearIcon
- ? html`
-
- Clear
-
- `
- : ""}
+
+ ${this.value && !this.hideClearIcon
+ ? html`
+
+
+ `
+ : ""}
-
- Toggle
-
+
+
+
`;
@@ -258,6 +265,15 @@ export class HaEntityPicker extends LitElement {
}
}
+ private _filterChanged(ev: CustomEvent): void {
+ const filterString = ev.detail.value.toLowerCase();
+ (this._comboBox as any).filteredItems = this._states.filter(
+ (state) =>
+ state.entity_id.toLowerCase().includes(filterString) ||
+ computeStateName(state).toLowerCase().includes(filterString)
+ );
+ }
+
private _setValue(value: string) {
this.value = value;
setTimeout(() => {
@@ -268,7 +284,10 @@ export class HaEntityPicker extends LitElement {
static get styles(): CSSResult {
return css`
- paper-input > ha-icon-button {
+ .suffix {
+ display: flex;
+ }
+ mwc-icon-button {
--mdc-icon-button-size: 24px;
padding: 0px 2px;
color: var(--secondary-text-color);
diff --git a/src/components/entity/ha-state-icon.js b/src/components/entity/ha-state-icon.js
deleted file mode 100644
index 80a7ad22d1..0000000000
--- a/src/components/entity/ha-state-icon.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { stateIcon } from "../../common/entity/state_icon";
-import "../ha-icon";
-
-class HaStateIcon extends PolymerElement {
- static get template() {
- return html`
- [[localize('ui.dialogs.more_info_control.last_updated')]]:
-
diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts
index a92d4912b6..7f3966bc26 100644
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -33,7 +33,9 @@ class HaAttributes extends LitElement {
).map(
(attribute) => html`
- ${attribute.replace(/_/g, " ")}
+
+ ${attribute.replace(/_/g, " ").replace(/\bid\b/g, "ID")}
+
${this.formatAttribute(attribute)}
@@ -61,10 +63,14 @@ class HaAttributes extends LitElement {
.data-entry .value {
max-width: 200px;
overflow-wrap: break-word;
+ text-align: right;
+ }
+ .key:first-letter {
+ text-transform: capitalize;
}
.attribution {
color: var(--secondary-text-color);
- text-align: right;
+ text-align: center;
}
pre {
font-family: inherit;
diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts
index b9d160bf13..6d449c3306 100644
--- a/src/components/ha-bar.ts
+++ b/src/components/ha-bar.ts
@@ -34,8 +34,8 @@ export class HaBar extends LitElement {
return svg`
`;
@@ -43,6 +43,9 @@ export class HaBar extends LitElement {
static get styles(): CSSResult {
return css`
+ rect {
+ height: 100%;
+ }
rect:first-child {
width: 100%;
fill: var(--ha-bar-background-color, var(--secondary-background-color));
diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts
index 7adc266a56..5aafc86d78 100644
--- a/src/components/ha-button-menu.ts
+++ b/src/components/ha-button-menu.ts
@@ -23,7 +23,7 @@ export class HaButtonMenu extends LitElement {
@property({ type: Boolean }) public disabled = false;
- @query("mwc-menu") private _menu?: Menu;
+ @query("mwc-menu", true) private _menu?: Menu;
public get items() {
return this._menu?.items;
@@ -62,6 +62,9 @@ export class HaButtonMenu extends LitElement {
display: inline-block;
position: relative;
}
+ ::slotted([disabled]) {
+ color: var(--disabled-text-color);
+ }
`;
}
}
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index cf215968c4..157d663bfe 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -50,9 +50,12 @@ export class HaCard extends LitElement {
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
- line-height: 32px;
- padding: 24px 16px 16px;
+ line-height: 48px;
+ padding: 12px 16px 16px;
display: block;
+ margin-block-start: 0px;
+ margin-block-end: 0px;
+ font-weight: normal;
}
:host ::slotted(.card-content:not(:first-child)),
@@ -75,7 +78,7 @@ export class HaCard extends LitElement {
protected render(): TemplateResult {
return html`
${this.header
- ? html` ${this.header} `
+ ? html`${this.header}
`
: html``}
html`
class="header_button"
dir=${computeRTLDirection(hass)}
>
-
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index 61f189713c..5b84c8d4e2 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -38,6 +38,7 @@ class HaHLSPlayer extends LitElement {
@property({ type: Boolean, attribute: "allow-exoplayer" })
public allowExoPlayer = false;
+ // don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement;
@internalProperty() private _attached = false;
@@ -154,6 +155,9 @@ class HaHLSPlayer extends LitElement {
}
private _resizeExoPlayer = () => {
+ if (!this._videoEl) {
+ return;
+ }
const rect = this._videoEl.getBoundingClientRect();
this.hass!.auth.external!.fireMessage({
type: "exoplayer/resize",
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index a620ec0204..147fd5b1b1 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -14,8 +14,8 @@ class HaLabeledSlider extends PolymerElement {
}
.title {
- margin-bottom: 16px;
- color: var(--secondary-text-color);
+ margin-bottom: 8px;
+ color: var(--primary-text-color);
}
.slider-container {
@@ -43,7 +43,6 @@ class HaLabeledSlider extends PolymerElement {
step="[[step]]"
pin="[[pin]]"
disabled="[[disabled]]"
- disabled="[[disabled]]"
value="{{value}}"
>
diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts
index 7531c989d9..b95d012938 100644
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -6,9 +6,9 @@ import {
CSSResult,
customElement,
html,
+ internalProperty,
LitElement,
property,
- internalProperty,
TemplateResult,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
@@ -62,7 +62,7 @@ class HaMenuButton extends LitElement {
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
@click=${this._toggleMenu}
>
-
- ${this.editMode
- ? html`
- ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
- this._renderEmptySortable
- ? ""
- : this._renderPanels(beforeSpacer)
- )}
- `
- : this._renderPanels(beforeSpacer)}
-
- ${this.editMode && this._hiddenPanels.length
- ? html`
- ${this._hiddenPanels.map((url) => {
- const panel = this.hass.panels[url];
- if (!panel) {
- return "";
- }
- return html`
-
-
- `;
- })}
-
- `
- : ""}
- ${this._renderPanels(afterSpacer)}
- ${this._externalConfig && this._externalConfig.hasSettingsScreen
- ? html`
-
-
-
-
- `
- : ""}
-
-
-
-
-
-
-
-
-
-
-
-
-
+ ${this._renderHeader()}
+ ${this._renderAllPanels()}
+ ${this._renderDivider()}
+ ${this._renderNotifications()}
+ ${this._renderUserItem()}
`;
@@ -475,6 +297,215 @@ class HaSidebar extends LitElement {
}
}
+ private _renderHeader() {
+ return html``;
+ }
+
+ private _renderAllPanels() {
+ const [beforeSpacer, afterSpacer] = computePanels(
+ this.hass.panels,
+ this.hass.defaultPanel,
+ this._panelOrder,
+ this._hiddenPanels
+ );
+
+ // prettier-ignore
+ return html`
+
+ ${this.editMode
+ ? this._renderPanelsEdit(beforeSpacer)
+ : this._renderPanels(beforeSpacer)}
+ ${this._renderSpacer()}
+ ${this._renderPanels(afterSpacer)}
+ ${this._renderExternalConfiguration()}
+
+ `;
+ }
+
+ private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
+ // prettier-ignore
+ return html`
+ ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
+ this._renderEmptySortable ? "" : this._renderPanels(beforeSpacer)
+ )}
+
+ ${this._renderSpacer()}
+ ${this._renderHiddenPanels()} `;
+ }
+
+ private _renderHiddenPanels() {
+ return html` ${this._hiddenPanels.length
+ ? html`${this._hiddenPanels.map((url) => {
+ const panel = this.hass.panels[url];
+ if (!panel) {
+ return "";
+ }
+ return html`
+
+
+ `;
+ })}
+ ${this._renderSpacer()}`
+ : ""}`;
+ }
+
+ private _renderDivider() {
+ return html``;
+ }
+
+ private _renderSpacer() {
+ return html``;
+ }
+
+ private _renderNotifications() {
+ let notificationCount = this._notifications
+ ? this._notifications.length
+ : 0;
+ for (const entityId in this.hass.states) {
+ if (computeDomain(entityId) === "configurator") {
+ notificationCount++;
+ }
+ }
+
+ return html`
+
+
+ `;
+ }
+
+ private _renderUserItem() {
+ return html`
+
+
+ `;
+ }
+
+ private _renderExternalConfiguration() {
+ return html`${this._externalConfig && this._externalConfig.hasSettingsScreen
+ ? html`
+
+
+
+
+ `
+ : ""}`;
+ }
+
private get _tooltip() {
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
}
@@ -728,6 +759,7 @@ class HaSidebar extends LitElement {
width: 64px;
}
:host([expanded]) {
+ width: 256px;
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl]) {
@@ -735,8 +767,7 @@ class HaSidebar extends LitElement {
border-left: 1px solid var(--divider-color);
}
.menu {
- box-sizing: border-box;
- height: 65px;
+ height: var(--header-height);
display: flex;
padding: 0 8.5px;
border-bottom: 1px solid transparent;
@@ -781,7 +812,7 @@ class HaSidebar extends LitElement {
display: initial;
}
.title mwc-button {
- width: 100%;
+ width: 90%;
}
#sortable,
.hidden-panel {
@@ -793,7 +824,10 @@ class HaSidebar extends LitElement {
display: flex;
flex-direction: column;
box-sizing: border-box;
- height: calc(100% - 196px - env(safe-area-inset-bottom));
+ height: calc(100% - var(--header-height) - 132px);
+ height: calc(
+ 100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
+ );
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js
index 9a2a9a09c9..f520fa20ef 100644
--- a/src/components/ha-slider.js
+++ b/src/components/ha-slider.js
@@ -21,6 +21,7 @@ class HaSlider extends PaperSliderClass {
.pin > .slider-knob > .slider-knob-inner {
font-size: var(--ha-slider-pin-font-size, 10px);
line-height: normal;
+ cursor: pointer;
}
.disabled.ring > .slider-knob > .slider-knob-inner {
@@ -69,9 +70,9 @@ class HaSlider extends PaperSliderClass {
transform: scale(1) translate(0, -10px);
}
- .slider-input {
- width: 54px;
- }
+ .slider-input {
+ width: 54px;
+ }
`)
);
}
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
new file mode 100644
index 0000000000..b6dc45dcf1
--- /dev/null
+++ b/src/components/ha-tabs.ts
@@ -0,0 +1,100 @@
+import "@polymer/paper-tabs/paper-tabs";
+import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+import type { PaperTabElement } from "@polymer/paper-tabs/paper-tab";
+import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
+import { customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const PaperTabs = customElements.get("paper-tabs") as Constructor<
+ PaperTabsElement
+>;
+
+let subTemplate: HTMLTemplateElement;
+
+@customElement("ha-tabs")
+export class HaTabs extends PaperTabs {
+ private _firstTabWidth = 0;
+
+ private _lastTabWidth = 0;
+
+ private _lastLeftHiddenState = false;
+
+ static get template(): HTMLTemplateElement {
+ if (!subTemplate) {
+ subTemplate = (PaperTabs as any).template.cloneNode(true);
+
+ const superStyle = subTemplate.content.querySelector("style");
+
+ // Add "noink" attribute for scroll buttons to disable animation.
+ subTemplate.content
+ .querySelectorAll("paper-icon-button")
+ .forEach((arrow: PaperIconButtonElement) => {
+ arrow.setAttribute("noink", "");
+ });
+
+ superStyle!.appendChild(
+ document.createTextNode(`
+ :host {
+ padding-top: .5px;
+ }
+ .not-visible {
+ display: none;
+ }
+ paper-icon-button {
+ width: 24px;
+ height: 48px;
+ padding: 0;
+ margin: 0;
+ }
+ `)
+ );
+ }
+ return subTemplate;
+ }
+
+ // Get first and last tab's width for _affectScroll
+ public _tabChanged(tab: PaperTabElement, old: PaperTabElement): void {
+ super._tabChanged(tab, old);
+ const tabs = this.querySelectorAll("paper-tab:not(.hide-tab)");
+ if (tabs.length > 0) {
+ this._firstTabWidth = tabs[0].clientWidth;
+ this._lastTabWidth = tabs[tabs.length - 1].clientWidth;
+ }
+
+ // Scroll active tab into view if needed.
+ const selected = this.querySelector(".iron-selected");
+ if (selected) {
+ selected.scrollIntoView();
+ }
+ }
+
+ /**
+ * Modify _affectScroll so that when the scroll arrows appear
+ * while scrolling and the tab container shrinks we can counteract
+ * the jump in tab position so that the scroll still appears smooth.
+ */
+ public _affectScroll(dx: number): void {
+ if (this._firstTabWidth === 0 || this._lastTabWidth === 0) {
+ return;
+ }
+
+ this.$.tabsContainer.scrollLeft += dx;
+
+ const scrollLeft = this.$.tabsContainer.scrollLeft;
+
+ this._leftHidden = scrollLeft - this._firstTabWidth < 0;
+ this._rightHidden =
+ scrollLeft + this._lastTabWidth > this._tabContainerScrollSize;
+
+ if (this._lastLeftHiddenState !== this._leftHidden) {
+ this._lastLeftHiddenState = this._leftHidden;
+ this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-tabs": HaTabs;
+ }
+}
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index 596e878b51..4d2f4c2c59 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -20,7 +20,7 @@ declare global {
}
}
-const isEmpty = (obj: object): boolean => {
+const isEmpty = (obj: Record): boolean => {
if (typeof obj !== "object") {
return false;
}
@@ -44,7 +44,7 @@ export class HaYamlEditor extends LitElement {
@internalProperty() private _yaml = "";
- @query("ha-code-editor") private _editor?: HaCodeEditor;
+ @query("ha-code-editor", true) private _editor?: HaCodeEditor;
public setValue(value): void {
try {
@@ -105,6 +105,10 @@ export class HaYamlEditor extends LitElement {
fireEvent(this, "value-changed", { value: parsed, isValid } as any);
}
+
+ get yaml() {
+ return this._editor?.value;
+ }
}
declare global {
diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts
index 3b42fd38cc..8ba1ec3c2b 100644
--- a/src/components/map/ha-location-editor.ts
+++ b/src/components/map/ha-location-editor.ts
@@ -61,8 +61,8 @@ class LocationEditor extends LitElement {
if (!this._leafletMap || !this.location) {
return;
}
- if ((this._locationMarker as Circle).getBounds) {
- this._leafletMap.fitBounds((this._locationMarker as Circle).getBounds());
+ if (this._locationMarker && "getBounds" in this._locationMarker) {
+ this._leafletMap.fitBounds(this._locationMarker.getBounds());
} else {
this._leafletMap.setView(this.location, this.fitZoom);
}
diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 06547974fe..a12021c11f 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -90,8 +90,8 @@ export class HaLocationsEditor extends LitElement {
if (!marker) {
return;
}
- if ((marker as Circle).getBounds) {
- this._leafletMap.fitBounds((marker as Circle).getBounds());
+ if ("getBounds" in marker) {
+ this._leafletMap.fitBounds(marker.getBounds());
(marker as Circle).bringToFront();
} else {
const circle = this._circles[id];
@@ -296,8 +296,8 @@ export class HaLocationsEditor extends LitElement {
// @ts-ignore
(ev: MouseEvent) => this._markerClicked(ev)
)
- .addTo(this._leafletMap);
- marker.id = location.id;
+ .addTo(this._leafletMap!);
+ (marker as any).id = location.id;
this._locationMarkers![location.id] = marker;
}
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 32146ec822..93a5ca25e4 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -378,6 +378,7 @@ export class HaMediaPlayerBrowse extends LitElement {
: html`
${this.hass.localize("ui.components.media-browser.no_items")}
+
${currentItem.media_content_id ===
"media-source://media_source/local/."
? html`
${this.hass.localize(
@@ -398,7 +399,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${this.hass.localize(
"ui.components.media-browser.local_media_files"
- )}.`
+ )}`
: ""}
`}
@@ -539,17 +540,20 @@ export class HaMediaPlayerBrowse extends LitElement {
mediaContentType?: string
): Promise {
this._loading = true;
- const itemData =
- this.entityId !== BROWSER_PLAYER
- ? await browseMediaPlayer(
- this.hass,
- this.entityId,
- mediaContentId,
- mediaContentType
- )
- : await browseLocalMediaPlayer(this.hass, mediaContentId);
-
- this._loading = false;
+ let itemData: any;
+ try {
+ itemData =
+ this.entityId !== BROWSER_PLAYER
+ ? await browseMediaPlayer(
+ this.hass,
+ this.entityId,
+ mediaContentId,
+ mediaContentType
+ )
+ : await browseLocalMediaPlayer(this.hass, mediaContentId);
+ } finally {
+ this._loading = false;
+ }
return itemData;
}
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 3bbd6054ce..50c234f35f 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -159,7 +159,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
if (prevState !== null) {
dataRow.push([prevLastChanged, endTime, locState, prevState]);
}
- datasets.push({ data: dataRow });
+ datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
labels.push(entityDisplay);
});
@@ -173,12 +173,22 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
return [state, start, end];
};
+ const formatTooltipBeforeBody = (item, data) => {
+ if (!this.hass.userData || !this.hass.userData.showAdvanced || !item[0]) {
+ return "";
+ }
+ // Extract the entity ID from the dataset.
+ const values = data.datasets[item[0].datasetIndex];
+ return values.entity_id || "";
+ };
+
const chartOptions = {
type: "timeline",
options: {
tooltips: {
callbacks: {
label: formatTooltipLabel,
+ beforeBody: formatTooltipBeforeBody,
},
},
scales: {
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index ecd99f188f..6b3e865c05 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -24,10 +24,14 @@ class HaUserPicker extends LitElement {
@property() public label?: string;
- @property() public value?: string;
+ @property() public noUserLabel?: string;
+
+ @property() public value = "";
@property() public users?: User[];
+ @property({ type: Boolean }) public disabled = false;
+
private _sortedUsers = memoizeOne((users?: User[]) => {
if (!users) {
return [];
@@ -40,15 +44,19 @@ class HaUserPicker extends LitElement {
protected render(): TemplateResult {
return html`
-
+
- No user
+ ${this.noUserLabel ||
+ this.hass?.localize("ui.components.user-picker.no_user")}
${this._sortedUsers(this.users).map(
(user) => html`
@@ -67,10 +75,6 @@ class HaUserPicker extends LitElement {
`;
}
- private get _value() {
- return this.value || "";
- }
-
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
if (this.users === undefined) {
@@ -83,7 +87,7 @@ class HaUserPicker extends LitElement {
private _userChanged(ev) {
const newValue = ev.detail.item.dataset.userId;
- if (newValue !== this._value) {
+ if (newValue !== this.value) {
this.value = ev.detail.value;
setTimeout(() => {
fireEvent(this, "value-changed", { value: newValue });
@@ -111,3 +115,9 @@ class HaUserPicker extends LitElement {
}
customElements.define("ha-user-picker", HaUserPicker);
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-user-picker": HaUserPicker;
+ }
+}
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
new file mode 100644
index 0000000000..d4fac81d48
--- /dev/null
+++ b/src/components/user/ha-users-picker.ts
@@ -0,0 +1,169 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { PolymerChangedEvent } from "../../polymer-types";
+import type { HomeAssistant } from "../../types";
+import { fetchUsers, User } from "../../data/user";
+import "./ha-user-picker";
+import { mdiClose } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { guard } from "lit-html/directives/guard";
+
+@customElement("ha-users-picker")
+class HaUsersPickerLight extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
+ @property() public value?: string[];
+
+ @property({ attribute: "picked-user-label" })
+ public pickedUserLabel?: string;
+
+ @property({ attribute: "pick-user-label" })
+ public pickUserLabel?: string;
+
+ @property({ attribute: false })
+ public users?: User[];
+
+ protected firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ if (this.users === undefined) {
+ fetchUsers(this.hass!).then((users) => {
+ this.users = users;
+ });
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this.users) {
+ return html``;
+ }
+
+ const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+ return html`
+ ${guard([notSelectedUsers], () =>
+ this.value?.map(
+ (user_id, idx) => html`
+
+
+
+
+ `
+ )
+ )}
+ ) {
+ event.stopPropagation();
+ const index = (event.currentTarget as any).index;
+ const newValue = event.detail.value;
+ const newUsers = [...this._currentUsers];
+ if (newValue === "") {
+ newUsers.splice(index, 1);
+ } else {
+ newUsers.splice(index, 1, newValue);
+ }
+ this._updateUsers(newUsers);
+ }
+
+ private async _addUser(event: PolymerChangedEvent) {
+ event.stopPropagation();
+ const toAdd = event.detail.value;
+ (event.currentTarget as any).value = "";
+ if (!toAdd) {
+ return;
+ }
+ const currentUsers = this._currentUsers;
+ if (currentUsers.includes(toAdd)) {
+ return;
+ }
+
+ this._updateUsers([...currentUsers, toAdd]);
+ }
+
+ private _removeUser(event) {
+ const userId = (event.currentTarget as any).userId;
+ this._updateUsers(this._currentUsers.filter((user) => user !== userId));
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: block;
+ }
+ div {
+ display: flex;
+ align-items: center;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-users-picker": HaUsersPickerLight;
+ }
+}
diff --git a/src/data/automation.ts b/src/data/automation.ts
index 4b06d4af63..bb35448575 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -109,10 +109,17 @@ export interface TemplateTrigger {
value_template: string;
}
+export interface ContextConstraint {
+ context_id?: string;
+ parent_id?: string;
+ user_id?: string | string[];
+}
+
export interface EventTrigger {
platform: "event";
event_type: string;
- event_data: any;
+ event_data?: any;
+ context?: ContextConstraint;
}
export type Trigger =
@@ -217,12 +224,12 @@ export const subscribeTrigger = (
hass: HomeAssistant,
onChange: (result: {
variables: {
- trigger: {};
+ trigger: Record;
};
context: Context;
}) => void,
trigger: Trigger | Trigger[],
- variables?: {}
+ variables?: Record
) =>
hass.connection.subscribeMessage(onChange, {
type: "subscribe_trigger",
@@ -233,7 +240,7 @@ export const subscribeTrigger = (
export const testCondition = (
hass: HomeAssistant,
condition: Condition | Condition[],
- variables?: {}
+ variables?: Record
) =>
hass.callWS<{ result: boolean }>({
type: "test_condition",
diff --git a/src/data/cached-history.ts b/src/data/cached-history.ts
index f1fee4ec98..6c97c20baa 100644
--- a/src/data/cached-history.ts
+++ b/src/data/cached-history.ts
@@ -10,7 +10,6 @@ import {
} from "./history";
export interface CacheConfig {
- refresh: number;
cacheKey: string;
hoursToShow: number;
}
diff --git a/src/data/collection.ts b/src/data/collection.ts
index a565d371f0..43931acd31 100644
--- a/src/data/collection.ts
+++ b/src/data/collection.ts
@@ -17,12 +17,12 @@ interface OptimisticCollection extends Collection {
*/
export const getOptimisticCollection = (
- saveCollection: (conn: Connection, data: StateType) => Promise,
+ saveCollection: (conn2: Connection, data: StateType) => Promise,
conn: Connection,
key: string,
- fetchCollection: (conn: Connection) => Promise,
+ fetchCollection: (conn2: Connection) => Promise,
subscribeUpdates?: (
- conn: Connection,
+ conn2: Connection,
store: Store
) => Promise
): OptimisticCollection => {
diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts
index 94cce83ba8..367924e015 100644
--- a/src/data/config_flow.ts
+++ b/src/data/config_flow.ts
@@ -11,6 +11,7 @@ export const DISCOVERY_SOURCES = [
"ssdp",
"zeroconf",
"discovery",
+ "mqtt",
];
export const ATTENTION_SOURCES = ["reauth"];
diff --git a/src/data/counter.ts b/src/data/counter.ts
new file mode 100644
index 0000000000..b01bf65869
--- /dev/null
+++ b/src/data/counter.ts
@@ -0,0 +1,51 @@
+import { HomeAssistant } from "../types";
+
+export interface Counter {
+ id: string;
+ name: string;
+ icon?: string;
+ initial?: number;
+ restore?: boolean;
+ minimum?: number;
+ maximum?: number;
+ step?: number;
+}
+
+export interface CounterMutableParams {
+ name: string;
+ icon: string;
+ initial: number;
+ restore: boolean;
+ minimum: number;
+ maximum: number;
+ step: number;
+}
+
+export const fetchCounter = (hass: HomeAssistant) =>
+ hass.callWS({ type: "counter/list" });
+
+export const createCounter = (
+ hass: HomeAssistant,
+ values: CounterMutableParams
+) =>
+ hass.callWS({
+ type: "counter/create",
+ ...values,
+ });
+
+export const updateCounter = (
+ hass: HomeAssistant,
+ id: string,
+ updates: Partial
+) =>
+ hass.callWS({
+ type: "counter/update",
+ counter_id: id,
+ ...updates,
+ });
+
+export const deleteCounter = (hass: HomeAssistant, id: string) =>
+ hass.callWS({
+ type: "counter/delete",
+ counter_id: id,
+ });
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index a5d897ca8b..4c5271e82d 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -15,7 +15,7 @@ export interface EntityRegistryEntry {
export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
unique_id: string;
- capabilities: object;
+ capabilities: Record;
original_name?: string;
original_icon?: string;
}
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index d500ad4311..902548f174 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -2,78 +2,71 @@ import { HomeAssistant } from "../../types";
import { hassioApiResultExtractor, HassioResponse } from "./common";
export interface HassioAddonInfo {
- name: string;
- slug: string;
- description: string;
- repository: "core" | "local" | string;
- version: string;
- state: "none" | "started" | "stopped";
- installed: string | undefined;
- detached: boolean;
+ advanced: boolean;
available: boolean;
build: boolean;
- advanced: boolean;
- url: string | null;
+ description: string;
+ detached: boolean;
icon: boolean;
+ installed: boolean;
logo: boolean;
+ name: string;
+ repository: "core" | "local" | string;
+ slug: string;
+ stage: "stable" | "experimental" | "deprecated";
+ state: "started" | "stopped" | null;
+ update_available: boolean;
+ url: string | null;
+ version_latest: string;
+ version: string;
}
export interface HassioAddonDetails extends HassioAddonInfo {
- name: string;
- slug: string;
- description: string;
- long_description: null | string;
- auto_update: boolean;
- url: null | string;
- detached: boolean;
- documentation: boolean;
- available: boolean;
- arch: "armhf" | "aarch64" | "i386" | "amd64";
- machine: any;
- homeassistant: string;
- version_latest: string;
- boot: "auto" | "manual";
- build: boolean;
- options: object;
- network: null | object;
- network_description: null | object;
- host_network: boolean;
- host_pid: boolean;
- host_ipc: boolean;
- host_dbus: boolean;
- privileged: any;
apparmor: "disable" | "default" | "profile";
- devices: string[];
- auto_uart: boolean;
- icon: boolean;
- logo: boolean;
- stage: "stable" | "experimental" | "deprecated";
- changelog: boolean;
- hassio_api: boolean;
- hassio_role: "default" | "homeassistant" | "manager" | "admin";
- startup: "initialize" | "system" | "services" | "application" | "once";
- homeassistant_api: boolean;
- auth_api: boolean;
- full_access: boolean;
- protected: boolean;
- rating: "1-6";
- stdin: boolean;
- webui: null | string;
- gpio: boolean;
- kernel_modules: boolean;
- devicetree: boolean;
- docker_api: boolean;
- audio: boolean;
+ arch: "armhf" | "aarch64" | "i386" | "amd64";
audio_input: null | string;
audio_output: null | string;
- services_role: string[];
+ audio: boolean;
+ auth_api: boolean;
+ auto_uart: boolean;
+ auto_update: boolean;
+ boot: "auto" | "manual";
+ changelog: boolean;
+ devices: string[];
+ devicetree: boolean;
discovery: string[];
- ip_address: string;
- ingress: boolean;
- ingress_panel: boolean;
+ docker_api: boolean;
+ documentation: boolean;
+ full_access: boolean;
+ gpio: boolean;
+ hassio_api: boolean;
+ hassio_role: "default" | "homeassistant" | "manager" | "admin";
+ homeassistant_api: boolean;
+ homeassistant: string;
+ host_dbus: boolean;
+ host_ipc: boolean;
+ host_network: boolean;
+ host_pid: boolean;
ingress_entry: null | string;
+ ingress_panel: boolean;
ingress_url: null | string;
+ ingress: boolean;
+ ip_address: string;
+ kernel_modules: boolean;
+ long_description: null | string;
+ machine: any;
+ network_description: null | Record;
+ network: null | Record;
+ options: Record;
+ privileged: any;
+ protected: boolean;
+ rating: "1-6";
+ services_role: string[];
+ slug: string;
+ startup: "initialize" | "system" | "services" | "application" | "once";
+ stdin: boolean;
watchdog: null | boolean;
+ webui: null | string;
}
export interface HassioAddonsInfo {
@@ -96,11 +89,11 @@ export interface HassioAddonRepository {
export interface HassioAddonSetOptionParams {
audio_input?: string | null;
audio_output?: string | null;
- options?: object | null;
+ options?: Record | null;
boot?: "auto" | "manual";
auto_update?: boolean;
ingress_panel?: boolean;
- network?: object | null;
+ network?: Record | null;
watchdog?: boolean;
}
diff --git a/src/data/hassio/common.ts b/src/data/hassio/common.ts
index 103f61c35a..57a0afa59a 100644
--- a/src/data/hassio/common.ts
+++ b/src/data/hassio/common.ts
@@ -22,8 +22,8 @@ export const hassioApiResultExtractor = (response: HassioResponse) =>
export const extractApiErrorMessage = (error: any): string => {
return typeof error === "object"
? typeof error.body === "object"
- ? error.body.message || "Unknown error, see logs"
- : error.body || "Unknown error, see logs"
+ ? error.body.message || "Unknown error, see supervisor logs"
+ : error.body || error.message || "Unknown error, see supervisor logs"
: error;
};
diff --git a/src/data/hassio/docker.ts b/src/data/hassio/docker.ts
new file mode 100644
index 0000000000..4bc9a194c5
--- /dev/null
+++ b/src/data/hassio/docker.ts
@@ -0,0 +1,36 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+interface HassioDockerRegistries {
+ [key: string]: { username: string; password?: string };
+}
+
+export const fetchHassioDockerRegistries = async (hass: HomeAssistant) => {
+ return hassioApiResultExtractor(
+ await hass.callApi>(
+ "GET",
+ "hassio/docker/registries"
+ )
+ );
+};
+
+export const addHassioDockerRegistry = async (
+ hass: HomeAssistant,
+ data: HassioDockerRegistries
+) => {
+ await hass.callApi>(
+ "POST",
+ "hassio/docker/registries",
+ data
+ );
+};
+
+export const removeHassioDockerRegistry = async (
+ hass: HomeAssistant,
+ registry: string
+) => {
+ await hass.callApi>(
+ "DELETE",
+ `hassio/docker/registries/${registry}`
+ );
+};
diff --git a/src/data/hassio/hardware.ts b/src/data/hassio/hardware.ts
index 345bf0d1ba..863a16d70d 100644
--- a/src/data/hassio/hardware.ts
+++ b/src/data/hassio/hardware.ts
@@ -18,7 +18,7 @@ export interface HassioHardwareInfo {
input: string[];
disk: string[];
gpio: string[];
- audio: object;
+ audio: Record;
}
export const fetchHassioHardwareAudio = async (hass: HomeAssistant) => {
diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts
index a8db6dbc71..ebdc606832 100644
--- a/src/data/hassio/host.ts
+++ b/src/data/hassio/host.ts
@@ -1,14 +1,25 @@
import { HomeAssistant } from "../../types";
import { hassioApiResultExtractor, HassioResponse } from "./common";
-export type HassioHostInfo = any;
+export type HassioHostInfo = {
+ chassis: string;
+ cpe: string;
+ deployment: string;
+ disk_free: number;
+ disk_total: number;
+ disk_used: number;
+ features: string[];
+ hostname: string;
+ kernel: string;
+ operating_system: string;
+};
export interface HassioHassOSInfo {
- version: string;
- version_cli: string;
+ board: string;
+ boot: string;
+ update_available: boolean;
version_latest: string;
- version_cli_latest: string;
- board: "ova" | "rpi";
+ version: string;
}
export const fetchHassioHostInfo = async (hass: HomeAssistant) => {
diff --git a/src/data/hassio/resolution.ts b/src/data/hassio/resolution.ts
new file mode 100644
index 0000000000..8f85943de3
--- /dev/null
+++ b/src/data/hassio/resolution.ts
@@ -0,0 +1,15 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+export interface HassioResolution {
+ unsupported: string[];
+}
+
+export const fetchHassioResolution = async (hass: HomeAssistant) => {
+ return hassioApiResultExtractor(
+ await hass.callApi>(
+ "GET",
+ "hassio/resolution/info"
+ )
+ );
+};
diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts
index 992425b8bc..9d2845f776 100644
--- a/src/data/hassio/supervisor.ts
+++ b/src/data/hassio/supervisor.ts
@@ -1,19 +1,56 @@
import { HomeAssistant, PanelInfo } from "../../types";
+import { HassioAddonInfo, HassioAddonRepository } from "./addon";
import { hassioApiResultExtractor, HassioResponse } from "./common";
-export type HassioHomeAssistantInfo = any;
-export type HassioSupervisorInfo = any;
+export type HassioHomeAssistantInfo = {
+ arch: string;
+ audio_input: string | null;
+ audio_output: string | null;
+ boot: boolean;
+ image: string;
+ ip_address: string;
+ machine: string;
+ port: number;
+ ssl: boolean;
+ update_available: boolean;
+ version_latest: string;
+ version: string;
+ wait_boot: number;
+ watchdog: boolean;
+};
+
+export type HassioSupervisorInfo = {
+ addons: HassioAddonInfo[];
+ addons_repositories: HassioAddonRepository[];
+ arch: string;
+ channel: string;
+ debug: boolean;
+ debug_block: boolean;
+ diagnostics: boolean | null;
+ healthy: boolean;
+ ip_address: string;
+ logging: string;
+ supported: boolean;
+ timezone: string;
+ update_available: boolean;
+ version: string;
+ version_latest: string;
+ wait_boot: number;
+};
export type HassioInfo = {
arch: string;
channel: string;
docker: string;
- hassos?: string;
+ features: string[];
+ hassos: null;
homeassistant: string;
hostname: string;
logging: string;
- maching: string;
+ machine: string;
+ operating_system: string;
supervisor: string;
+ supported: boolean;
supported_arch: string[];
timezone: string;
};
diff --git a/src/data/history.ts b/src/data/history.ts
index c5df270404..16bb07c782 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -85,11 +85,14 @@ export const fetchRecent = (
export const fetchDate = (
hass: HomeAssistant,
startTime: Date,
- endTime: Date
+ endTime: Date,
+ entityId
): Promise => {
return hass.callApi(
"GET",
- `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response`
+ `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response${
+ entityId ? `&filter_entity_id=${entityId}` : ``
+ }`
);
};
diff --git a/src/data/logbook.ts b/src/data/logbook.ts
index cb93ee4003..d5a916c400 100644
--- a/src/data/logbook.ts
+++ b/src/data/logbook.ts
@@ -6,12 +6,14 @@ import { HomeAssistant } from "../types";
import { UNAVAILABLE_STATES } from "./entity";
const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
+export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
export interface LogbookEntry {
when: string;
name: string;
message?: string;
entity_id?: string;
+ icon?: string;
domain: string;
context_user_id?: string;
context_event_type?: string;
@@ -43,11 +45,12 @@ export const getLogbookData = async (
);
for (const entry of logbookData) {
- if (entry.state) {
+ const stateObj = hass!.states[entry.entity_id!];
+ if (entry.state && stateObj) {
entry.message = getLogbookMessage(
hass,
entry.state,
- hass!.states[entry.entity_id!],
+ stateObj,
computeDomain(entry.entity_id!)
);
}
diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index d0a19bf20c..090bb0dfc0 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -33,7 +33,7 @@ export interface LovelaceResource {
}
export interface LovelaceResourcesMutableParams {
- res_type: "css" | "js" | "module" | "html";
+ res_type: LovelaceResource["type"];
url: string;
}
@@ -89,6 +89,7 @@ export interface LovelaceViewConfig {
export interface LovelaceViewElement extends HTMLElement {
hass?: HomeAssistant;
lovelace?: Lovelace;
+ narrow?: boolean;
index?: number;
cards?: Array;
badges?: LovelaceBadge[];
diff --git a/src/data/ozw.ts b/src/data/ozw.ts
index 80ad9882b7..0e5d73565a 100644
--- a/src/data/ozw.ts
+++ b/src/data/ozw.ts
@@ -63,6 +63,16 @@ export interface OZWNetworkStatistics {
retries: number;
}
+export interface OZWDeviceConfig {
+ label: string;
+ type: string;
+ value: string | number;
+ parameter: number;
+ min: number;
+ max: number;
+ help: string;
+}
+
export const nodeQueryStages = [
"ProtocolInfo",
"Probe",
@@ -180,6 +190,17 @@ export const fetchOZWNodeMetadata = (
node_id: node_id,
});
+export const fetchOZWNodeConfig = (
+ hass: HomeAssistant,
+ ozw_instance: number,
+ node_id: number
+): Promise =>
+ hass.callWS({
+ type: "ozw/get_config_parameters",
+ ozw_instance: ozw_instance,
+ node_id: node_id,
+ });
+
export const refreshNodeInfo = (
hass: HomeAssistant,
ozw_instance: number,
diff --git a/src/data/panel_custom.ts b/src/data/panel_custom.ts
index ce09a24408..0b6472c6d1 100644
--- a/src/data/panel_custom.ts
+++ b/src/data/panel_custom.ts
@@ -9,6 +9,6 @@ export interface CustomPanelConfig {
html_url?: string;
}
-export type CustomPanelInfo = PanelInfo<
+export type CustomPanelInfo> = PanelInfo<
T & { _panel_custom: CustomPanelConfig }
>;
diff --git a/src/data/script.ts b/src/data/script.ts
index 240472f743..3becd56e0a 100644
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -105,7 +105,7 @@ export type Action =
export const triggerScript = (
hass: HomeAssistant,
entityId: string,
- variables?: {}
+ variables?: Record
) => hass.callService("script", computeObjectId(entityId), variables);
export const canExcecute = (state: ScriptEntity) => {
diff --git a/src/data/tasmota.ts b/src/data/tasmota.ts
new file mode 100644
index 0000000000..df9aad3032
--- /dev/null
+++ b/src/data/tasmota.ts
@@ -0,0 +1,10 @@
+import { HomeAssistant } from "../types";
+
+export const removeTasmotaDeviceEntry = (
+ hass: HomeAssistant,
+ deviceId: string
+): Promise =>
+ hass.callWS({
+ type: "tasmota/device/remove",
+ device_id: deviceId,
+ });
diff --git a/src/data/timer.ts b/src/data/timer.ts
index 8b54020a7d..a963d64ea3 100644
--- a/src/data/timer.ts
+++ b/src/data/timer.ts
@@ -2,6 +2,7 @@ import {
HassEntityAttributeBase,
HassEntityBase,
} from "home-assistant-js-websocket";
+import { HomeAssistant } from "../types";
export type TimerEntity = HassEntityBase & {
attributes: HassEntityAttributeBase & {
@@ -9,3 +10,48 @@ export type TimerEntity = HassEntityBase & {
remaining: string;
};
};
+
+export interface DurationDict {
+ hours?: number | string;
+ minutes?: number | string;
+ seconds?: number | string;
+}
+
+export interface Timer {
+ id: string;
+ name: string;
+ icon?: string;
+ duration?: string | number | DurationDict;
+}
+
+export interface TimerMutableParams {
+ name: string;
+ icon: string;
+ duration: string | number | DurationDict;
+}
+
+export const fetchTimer = (hass: HomeAssistant) =>
+ hass.callWS({ type: "timer/list" });
+
+export const createTimer = (hass: HomeAssistant, values: TimerMutableParams) =>
+ hass.callWS({
+ type: "timer/create",
+ ...values,
+ });
+
+export const updateTimer = (
+ hass: HomeAssistant,
+ id: string,
+ updates: Partial
+) =>
+ hass.callWS({
+ type: "timer/update",
+ timer_id: id,
+ ...updates,
+ });
+
+export const deleteTimer = (hass: HomeAssistant, id: string) =>
+ hass.callWS({
+ type: "timer/delete",
+ timer_id: id,
+ });
diff --git a/src/data/translation.ts b/src/data/translation.ts
index a713ccd256..8a11515458 100644
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@@ -33,8 +33,8 @@ export const getHassTranslations = async (
category: TranslationCategory,
integration?: string,
config_flow?: boolean
-): Promise<{}> => {
- const result = await hass.callWS<{ resources: {} }>({
+): Promise> => {
+ const result = await hass.callWS<{ resources: Record }>({
type: "frontend/get_translations",
language,
category,
@@ -47,8 +47,8 @@ export const getHassTranslations = async (
export const getHassTranslationsPre109 = async (
hass: HomeAssistant,
language: string
-): Promise<{}> => {
- const result = await hass.callWS<{ resources: {} }>({
+): Promise> => {
+ const result = await hass.callWS<{ resources: Record }>({
type: "frontend/get_translations",
language,
});
diff --git a/src/data/weather.ts b/src/data/weather.ts
index 8c0f7cb5f7..16333d2d1e 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -1,6 +1,14 @@
-import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element";
+import {
+ mdiGauge,
+ mdiWaterPercent,
+ mdiWeatherFog,
+ mdiWeatherRainy,
+ mdiWeatherWindy,
+} from "@mdi/js";
+import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element";
import { styleMap } from "lit-html/directives/style-map";
-
+import "../components/ha-icon";
+import "../components/ha-svg-icon";
import type { HomeAssistant, WeatherEntity } from "../types";
import { roundWithOneDecimal } from "../util/calculate";
@@ -25,6 +33,15 @@ export const weatherIcons = {
exceptional: "hass:alert-circle-outline",
};
+export const weatherAttrIcons = {
+ humidity: mdiWaterPercent,
+ wind_bearing: mdiWeatherWindy,
+ wind_speed: mdiWeatherWindy,
+ pressure: mdiGauge,
+ visibility: mdiWeatherFog,
+ precipitation: mdiWeatherRainy,
+};
+
const cloudyStates = new Set([
"partlycloudy",
"cloudy",
@@ -48,7 +65,7 @@ const snowyStates = new Set(["snowy", "snowy-rainy"]);
const lightningStates = new Set(["lightning", "lightning-rainy"]);
-export const cardinalDirections = [
+const cardinalDirections = [
"N",
"NNE",
"NE",
@@ -77,13 +94,29 @@ const getWindBearingText = (degree: string): string => {
return degree;
};
-export const getWindBearing = (bearing: string): string => {
+const getWindBearing = (bearing: string): string => {
if (bearing != null) {
return getWindBearingText(bearing);
}
return "";
};
+export const getWind = (
+ hass: HomeAssistant,
+ speed: string,
+ bearing: string
+): string => {
+ if (bearing !== null) {
+ const cardinalDirection = getWindBearing(bearing);
+ return `${speed} ${getWeatherUnit(hass!, "wind_speed")} (${
+ hass.localize(
+ `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
+ ) || cardinalDirection
+ })`;
+ }
+ return `${speed} ${getWeatherUnit(hass!, "wind_speed")}`;
+};
+
export const getWeatherUnit = (
hass: HomeAssistant,
measure: string
@@ -94,6 +127,7 @@ export const getWeatherUnit = (
return lengthUnit === "km" ? "hPa" : "inHg";
case "wind_speed":
return `${lengthUnit}/h`;
+ case "visibility":
case "length":
return lengthUnit;
case "precipitation":
@@ -109,7 +143,7 @@ export const getWeatherUnit = (
export const getSecondaryWeatherAttribute = (
hass: HomeAssistant,
stateObj: WeatherEntity
-): string | undefined => {
+): TemplateResult | undefined => {
const extrema = getWeatherExtrema(hass, stateObj);
if (extrema) {
@@ -133,17 +167,22 @@ export const getSecondaryWeatherAttribute = (
return undefined;
}
- return `
- ${hass!.localize(
- `ui.card.weather.attributes.${attribute}`
- )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
+ const weatherAttrIcon = weatherAttrIcons[attribute];
+
+ return html`
+ ${weatherAttrIcon
+ ? html`
+ ;
timeout?: number;
}
): Promise => {
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index d7a2ad6fbc..54ab1c7f41 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -1,5 +1,4 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-input/paper-input";
+import "@material/mwc-button/mwc-button";
import {
css,
CSSResult,
@@ -10,16 +9,16 @@ import {
internalProperty,
TemplateResult,
} from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
import "../../components/ha-circular-progress";
import "../../components/ha-switch";
import "../../components/ha-formfield";
+import { fireEvent } from "../../common/dom/fire_event";
import type { HaSwitch } from "../../components/ha-switch";
import {
getConfigEntrySystemOptions,
updateConfigEntrySystemOptions,
} from "../../data/config_entries";
-import type { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
@@ -35,9 +34,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
@internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
- @internalProperty() private _loading?: boolean;
+ @internalProperty() private _loading = false;
- @internalProperty() private _submitting?: boolean;
+ @internalProperty() private _submitting = false;
public async showDialog(
params: ConfigEntrySystemOptionsDialogParams
@@ -51,7 +50,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
);
this._loading = false;
this._disableNewEntities = systemOptions.disable_new_entities;
- await this.updateComplete;
+ }
+
+ public closeDialog(): void {
+ this._error = "";
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
@@ -60,21 +64,17 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
return html`
-
-
- ${this.hass.localize(
- "ui.dialogs.config_entry_system_options.title",
- "integration",
- this.hass.localize(
- `component.${this._params.entry.domain}.title`
- ) || this._params.entry.domain
- )}
-
-
+
${this._loading
? html`
@@ -112,22 +112,22 @@ class DialogConfigEntrySystemOptions extends LitElement {
`}
-
- ${!this._loading
- ? html`
-
- `
- : ""}
-
+
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
+
+
`;
}
@@ -154,19 +154,10 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!(ev.detail as any).value) {
- this._params = undefined;
- }
- }
-
static get styles(): CSSResult[] {
return [
haStyleDialog,
css`
- ha-paper-dialog {
- max-width: 500px;
- }
.init-spinner {
padding: 50px 100px;
text-align: center;
diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
index 4fb23c79de..4540edfcc7 100644
--- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts
+++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
@@ -19,7 +19,8 @@ import { HassDialog } from "../make-dialog-manager";
import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
@customElement("dialog-domain-toggler")
-class DomainTogglerDialog extends LitElement implements HassDialog {
+class DomainTogglerDialog extends LitElement
+ implements HassDialog {
public hass!: HomeAssistant;
@internalProperty() private _params?: HaDomainTogglerDialogParams;
diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index 5df7cb4f1e..e905f0c3ff 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -70,6 +70,7 @@ class DialogBox extends LitElement {
${this._params.text}
@@ -180,6 +181,9 @@ class DialogBox extends LitElement {
/* Place above other dialogs */
--dialog-z-index: 104;
}
+ .warning {
+ color: var(--warning-color);
+ }
`,
];
}
diff --git a/src/dialogs/generic/show-dialog-box.ts b/src/dialogs/generic/show-dialog-box.ts
index 86c5cfee8b..5e965bab2f 100644
--- a/src/dialogs/generic/show-dialog-box.ts
+++ b/src/dialogs/generic/show-dialog-box.ts
@@ -5,6 +5,7 @@ interface BaseDialogParams {
confirmText?: string;
text?: string | TemplateResult;
title?: string;
+ warning?: boolean;
}
export interface AlertDialogParams extends BaseDialogParams {
diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
index ed9e3a05aa..c2ab0ca148 100644
--- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -29,7 +29,7 @@ export class HaImagecropperDialog extends LitElement {
@internalProperty() private _open = false;
- @query("img") private _image!: HTMLImageElement;
+ @query("img", true) private _image!: HTMLImageElement;
private _cropper?: Cropper;
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
index d2d0d8770e..4e26d57e86 100644
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -64,6 +64,10 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
+
${DOMAINS_WITH_MORE_INFO.includes(domain) &&
- this._computeShowHistoryComponent(entityId)
+ (this._computeShowHistoryComponent(entityId) ||
+ this._computeShowLogBookComponent(entityId))
? html`
-
@@ -250,12 +250,32 @@ export class MoreInfoDialog extends LitElement {
private _computeShowHistoryComponent(entityId) {
return (
- (isComponentLoaded(this.hass, "history") ||
- isComponentLoaded(this.hass, "logbook")) &&
+ isComponentLoaded(this.hass, "history") &&
!DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId))
);
}
+ private _computeShowLogBookComponent(entityId): boolean {
+ if (!isComponentLoaded(this.hass, "logbook")) {
+ return false;
+ }
+
+ const stateObj = this.hass.states[entityId];
+ if (!stateObj || stateObj.attributes.unit_of_measurement) {
+ return false;
+ }
+
+ const domain = computeDomain(entityId);
+ if (
+ CONTINUOUS_DOMAINS.includes(domain) ||
+ DOMAINS_MORE_INFO_NO_HISTORY.includes(domain)
+ ) {
+ return false;
+ }
+
+ return true;
+ }
+
private _removeEntity() {
const entityId = this._entityId!;
showConfirmationDialog(this, {
@@ -283,14 +303,12 @@ export class MoreInfoDialog extends LitElement {
private _gotoEdit() {
const stateObj = this.hass.states[this._entityId!];
const domain = computeDomain(this._entityId!);
- navigate(
- this,
- `/config/${domain}/edit/${
- EDITABLE_DOMAINS_WITH_ID.includes(domain)
- ? stateObj.attributes.id
- : stateObj.entity_id
- }`
- );
+ let idToPassThroughUrl = stateObj.entity_id;
+ if (EDITABLE_DOMAINS_WITH_ID.includes(domain) || domain === "person") {
+ idToPassThroughUrl = stateObj.attributes.id;
+ }
+
+ navigate(this, `/config/${domain}/edit/${idToPassThroughUrl}`);
this.closeDialog();
}
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index 93970b7b93..eb393e3395 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -78,7 +78,6 @@ export class MoreInfoHistory extends LitElement {
this.hass!,
this.entityId,
{
- refresh: 60,
cacheKey: `more_info.${this.entityId}`,
hoursToShow: 24,
},
diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts
index 76d05562c5..107636a7c0 100644
--- a/src/dialogs/more-info/ha-more-info-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-logbook.ts
@@ -155,9 +155,9 @@ export class MoreInfoLogbook extends LitElement {
overflow: auto;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
- ha-logbook {
- max-height: unset;
- }
+ ha-logbook {
+ max-height: unset;
+ }
}
ha-circular-progress {
display: flex;
diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts
new file mode 100644
index 0000000000..47570226fa
--- /dev/null
+++ b/src/dialogs/more-info/more-info-content.ts
@@ -0,0 +1,57 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+
+import { HomeAssistant } from "../../types";
+import dynamicContentUpdater from "../../common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "./state_more_info_control";
+import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
+
+class MoreInfoContent extends UpdatingElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
+ @property() public stateObj?: HassEntity;
+
+ private _detachedChild?: ChildNode;
+
+ // This is not a lit element, but an updating element, so we implement update
+ protected update(changedProps: PropertyValues): void {
+ super.update(changedProps);
+ const stateObj = this.stateObj;
+ const hass = this.hass;
+
+ if (!stateObj || !hass) {
+ if (this.lastChild) {
+ this._detachedChild = this.lastChild;
+ // Detach child to prevent it from doing work.
+ this.removeChild(this.lastChild);
+ }
+ return;
+ }
+
+ if (this._detachedChild) {
+ this.appendChild(this._detachedChild);
+ this._detachedChild = undefined;
+ }
+
+ let moreInfoType: string | undefined;
+
+ if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
+ moreInfoType = stateObj.attributes.custom_ui_more_info;
+ } else {
+ const type = stateMoreInfoType(stateObj);
+ importMoreInfoControl(type);
+ moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+ }
+
+ if (!moreInfoType) {
+ return;
+ }
+
+ dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+ hass,
+ stateObj,
+ });
+ }
+}
+
+customElements.define("more-info-content", MoreInfoContent);
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index c2b97d9c59..6f8cf904ab 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -32,6 +32,10 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
export const stateMoreInfoType = (stateObj: HassEntity): string => {
const domain = computeStateDomain(stateObj);
+ return domainMoreInfoType(domain);
+};
+
+export const domainMoreInfoType = (domain: string): string => {
if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
return domain;
}
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 927af2f3a9..0ad149e9f0 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -40,7 +40,7 @@ export class HuiNotificationDrawer extends EventsMixin(
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
- height: calc(100% - 65px);
+ height: calc(100% - 1px - var(--header-height));
box-sizing: border-box;
background-color: var(--primary-background-color);
color: var(--primary-text-color);
@@ -50,6 +50,11 @@ export class HuiNotificationDrawer extends EventsMixin(
padding: 0 16px 16px;
}
+ .notification-actions {
+ padding: 0 16px 16px;
+ text-align: center;
+ }
+
.empty {
padding: 16px;
text-align: center;
@@ -69,6 +74,13 @@ export class HuiNotificationDrawer extends EventsMixin(
+
+
+
+ [[localize('ui.notification_drawer.dismiss_all')]]
+
+
+
[[localize('ui.notification_drawer.empty')]]
@@ -88,6 +100,7 @@ export class HuiNotificationDrawer extends EventsMixin(
notifications: {
type: Array,
computed: "_computeNotifications(open, hass, _notificationsBackend)",
+ observer: "_notificationsChanged",
},
_notificationsBackend: {
type: Array,
@@ -111,10 +124,23 @@ export class HuiNotificationDrawer extends EventsMixin(
this.open = false;
}
+ _dismissAll() {
+ this.notifications.forEach((notification) => {
+ this.hass.callService("persistent_notification", "dismiss", {
+ notification_id: notification.notification_id,
+ });
+ });
+ this.open = false;
+ }
+
_empty(notifications) {
return notifications.length === 0;
}
+ _moreThanOne(notifications) {
+ return notifications.length > 1;
+ }
+
_openChanged(open) {
if (open) {
// Render closed then animate open
@@ -130,6 +156,17 @@ export class HuiNotificationDrawer extends EventsMixin(
}
}
+ _notificationsChanged(newNotifications, oldNotifications) {
+ // automatically close drawer when last notification has been dismissed
+ if (
+ this.open &&
+ oldNotifications.length > 0 &&
+ !newNotifications.length === 0
+ ) {
+ this.open = false;
+ }
+ }
+
_computeNotifications(open, hass, notificationsBackend) {
if (!open) {
return [];
@@ -139,7 +176,22 @@ export class HuiNotificationDrawer extends EventsMixin(
.filter((entityId) => computeDomain(entityId) === "configurator")
.map((entityId) => hass.states[entityId]);
- return notificationsBackend.concat(configuratorEntities);
+ const notifications = notificationsBackend.concat(configuratorEntities);
+
+ notifications.sort(function (n1, n2) {
+ const d1 = new Date(n1.created_at);
+ const d2 = new Date(n2.created_at);
+
+ if (d1 < d2) {
+ return 1;
+ }
+ if (d1 > d2) {
+ return -1;
+ }
+ return 0;
+ });
+
+ return notifications;
}
showDialog({ narrow }) {
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
new file mode 100644
index 0000000000..95c4ce18bb
--- /dev/null
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -0,0 +1,418 @@
+import "@material/mwc-list/mwc-list";
+import type { List } from "@material/mwc-list/mwc-list";
+import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import type { ListItem } from "@material/mwc-list/mwc-list-item";
+import { mdiConsoleLine } from "@mdi/js";
+import {
+ css,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+ query,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { styleMap } from "lit-html/directives/style-map";
+import { scroll } from "lit-virtualizer";
+import memoizeOne from "memoize-one";
+import { componentsWithService } from "../../common/config/components_with_service";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { domainIcon } from "../../common/entity/domain_icon";
+import "../../common/search/search-input";
+import { compare } from "../../common/string/compare";
+import {
+ fuzzyFilterSort,
+ ScorableTextItem,
+} from "../../common/string/filter/sequence-matching";
+import { debounce } from "../../common/util/debounce";
+import "../../components/ha-circular-progress";
+import "../../components/ha-dialog";
+import "../../components/ha-header-bar";
+import { domainToName } from "../../data/integration";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import {
+ ConfirmationDialogParams,
+ showConfirmationDialog,
+} from "../generic/show-dialog-box";
+import { QuickBarParams } from "./show-dialog-quick-bar";
+
+interface QuickBarItem extends ScorableTextItem {
+ icon: string;
+ action(data?: any): void;
+}
+
+@customElement("ha-quick-bar")
+export class QuickBar extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @internalProperty() private _commandItems: QuickBarItem[] = [];
+
+ @internalProperty() private _entityItems: QuickBarItem[] = [];
+
+ @internalProperty() private _items?: QuickBarItem[] = [];
+
+ @internalProperty() private _filter = "";
+
+ @internalProperty() private _search = "";
+
+ @internalProperty() private _opened = false;
+
+ @internalProperty() private _commandMode = false;
+
+ @internalProperty() private _done = false;
+
+ @query("search-input", false) private _filterInputField?: HTMLElement;
+
+ private _focusSet = false;
+
+ public async showDialog(params: QuickBarParams) {
+ this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
+ this._commandItems = this._generateCommandItems();
+ this._entityItems = this._generateEntityItems();
+ this._opened = true;
+ }
+
+ public closeDialog() {
+ this._opened = false;
+ this._done = false;
+ this._focusSet = false;
+ this._filter = "";
+ this._search = "";
+ this._items = [];
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
+ protected updated(changedProperties: PropertyValues) {
+ if (
+ this._opened &&
+ (changedProperties.has("_filter") ||
+ changedProperties.has("_commandMode"))
+ ) {
+ this._setFilteredItems();
+ }
+ }
+
+ protected render() {
+ if (!this._opened) {
+ return html``;
+ }
+
+ return html`
+
+ ${this._search}` : this._search}
+ @keydown=${this._handleInputKeyDown}
+ @focus=${this._setFocusFirstListItem}
+ >
+ ${this._commandMode
+ ? html`
+ ${!this._items
+ ? html`
+ ${scroll({
+ items: this._items,
+ renderItem: (item: QuickBarItem, index?: number) =>
+ this._renderItem(item, index),
+ })}
+ `}
+
+ `;
+ }
+
+ private _handleOpened() {
+ this._setFilteredItems();
+ this.updateComplete.then(() => {
+ this._done = true;
+ });
+ }
+
+ private async _handleRangeChanged(e) {
+ if (this._focusSet) {
+ return;
+ }
+ if (e.firstVisible > -1) {
+ this._focusSet = true;
+ await this.updateComplete;
+ this._setFocusFirstListItem();
+ }
+ }
+
+ private _renderItem(item: QuickBarItem, index?: number) {
+ return html`
+
+
+ `;
+ }
+
+ private async processItemAndCloseDialog(item: QuickBarItem, index: number) {
+ this._addSpinnerToCommandItem(index);
+
+ await item.action();
+ this.closeDialog();
+ }
+
+ private _handleSelected(ev: SingleSelectedEvent) {
+ const index = ev.detail.index;
+ const item = ((ev.target as List).items[index] as any).item;
+ this.processItemAndCloseDialog(item, index);
+ }
+
+ private _handleInputKeyDown(ev: KeyboardEvent) {
+ if (ev.code === "Enter") {
+ if (!this._items?.length) {
+ return;
+ }
+
+ this.processItemAndCloseDialog(this._items[0], 0);
+ } else if (ev.code === "ArrowDown") {
+ ev.preventDefault();
+ this._getItemAtIndex(0)?.focus();
+ this._getItemAtIndex(1)?.focus();
+ }
+ }
+
+ private _getItemAtIndex(index: number): ListItem | null {
+ return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
+ }
+
+ private _addSpinnerToCommandItem(index: number): void {
+ const spinner = document.createElement("ha-circular-progress");
+ spinner.size = "small";
+ spinner.slot = "meta";
+ spinner.active = true;
+ this._getItemAtIndex(index)?.appendChild(spinner);
+ }
+
+ private _handleSearchChange(ev: CustomEvent): void {
+ const newFilter = ev.detail.value;
+ const oldCommandMode = this._commandMode;
+
+ if (newFilter.startsWith(">")) {
+ this._commandMode = true;
+ this._search = newFilter.substring(1);
+ } else {
+ this._commandMode = false;
+ this._search = newFilter;
+ }
+
+ this._debouncedSetFilter(this._search);
+
+ if (oldCommandMode !== this._commandMode) {
+ this._items = undefined;
+ this._focusSet = false;
+ }
+ }
+
+ private _debouncedSetFilter = debounce((filter: string) => {
+ this._filter = filter;
+ }, 100);
+
+ private _setFocusFirstListItem() {
+ // @ts-ignore
+ this._getItemAtIndex(0)?.rippleHandlers.startFocus();
+ }
+
+ private _handleListItemKeyDown(ev: KeyboardEvent) {
+ const isSingleCharacter = ev.key.length === 1;
+ const isFirstListItem =
+ (ev.target as HTMLElement).getAttribute("index") === "0";
+ if (ev.key === "ArrowUp") {
+ if (isFirstListItem) {
+ this._filterInputField?.focus();
+ }
+ }
+ if (ev.key === "Backspace" || isSingleCharacter) {
+ (ev.currentTarget as List).scrollTop = 0;
+ this._filterInputField?.focus();
+ }
+ }
+
+ private _generateCommandItems(): QuickBarItem[] {
+ return [
+ ...this._generateReloadCommands(),
+ ...this._generateServerControlCommands(),
+ ].sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+ }
+
+ private _generateReloadCommands(): QuickBarItem[] {
+ const reloadableDomains = componentsWithService(this.hass, "reload").sort();
+
+ return reloadableDomains.map((domain) => ({
+ text:
+ this.hass.localize(`ui.dialogs.quick-bar.commands.reload.${domain}`) ||
+ this.hass.localize(
+ "ui.dialogs.quick-bar.commands.reload.reload",
+ "domain",
+ domainToName(this.hass.localize, domain)
+ ),
+ icon: domainIcon(domain),
+ action: () => this.hass.callService(domain, "reload"),
+ }));
+ }
+
+ private _generateServerControlCommands(): QuickBarItem[] {
+ const serverActions = ["restart", "stop"];
+
+ return serverActions.map((action) =>
+ this._generateConfirmationCommand(
+ {
+ text: this.hass.localize(
+ "ui.dialogs.quick-bar.commands.server_control.perform_action",
+ "action",
+ this.hass.localize(
+ `ui.dialogs.quick-bar.commands.server_control.${action}`
+ )
+ ),
+ icon: "hass:server",
+ action: () => this.hass.callService("homeassistant", action),
+ },
+ this.hass.localize("ui.dialogs.generic.ok")
+ )
+ );
+ }
+
+ private _generateConfirmationCommand(
+ item: QuickBarItem,
+ confirmText: ConfirmationDialogParams["confirmText"]
+ ): QuickBarItem {
+ return {
+ ...item,
+ action: () =>
+ showConfirmationDialog(this, {
+ confirmText,
+ confirm: item.action,
+ }),
+ };
+ }
+
+ private _generateEntityItems(): QuickBarItem[] {
+ return Object.keys(this.hass.states)
+ .map((entityId) => ({
+ text: computeStateName(this.hass.states[entityId]) || entityId,
+ altText: entityId,
+ icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
+ action: () => fireEvent(this, "hass-more-info", { entityId }),
+ }))
+ .sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+ }
+
+ private _toggleIfAlreadyOpened() {
+ return this._opened ? !this._commandMode : false;
+ }
+
+ private _setFilteredItems() {
+ const items = this._commandMode ? this._commandItems : this._entityItems;
+ this._items = this._filter
+ ? this._filterItems(items || [], this._filter)
+ : items;
+ }
+
+ private _filterItems = memoizeOne(
+ (items: QuickBarItem[], filter: string): QuickBarItem[] =>
+ fuzzyFilterSort(filter.trimLeft(), items)
+ );
+
+ static get styles() {
+ return [
+ haStyleDialog,
+ css`
+ .heading {
+ padding: 8px 20px 0px;
+ }
+
+ ha-dialog {
+ --dialog-z-index: 8;
+ --dialog-content-padding: 0;
+ }
+
+ @media (min-width: 800px) {
+ ha-dialog {
+ --mdc-dialog-max-width: 800px;
+ --mdc-dialog-min-width: 500px;
+ --dialog-surface-position: fixed;
+ --dialog-surface-top: 40px;
+ --mdc-dialog-max-height: calc(100% - 72px);
+ }
+ }
+
+ ha-svg-icon.prefix {
+ margin: 8px;
+ }
+
+ .uni-virtualizer-host {
+ display: block;
+ position: relative;
+ contain: strict;
+ overflow: auto;
+ height: 100%;
+ }
+
+ .uni-virtualizer-host > * {
+ box-sizing: border-box;
+ }
+
+ mwc-list-item {
+ width: 100%;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-quick-bar": QuickBar;
+ }
+}
diff --git a/src/dialogs/quick-bar/show-dialog-quick-bar.ts b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
new file mode 100644
index 0000000000..b003af2cfa
--- /dev/null
+++ b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
@@ -0,0 +1,20 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface QuickBarParams {
+ entityFilter?: string;
+ commandMode?: boolean;
+}
+
+export const loadQuickBar = () =>
+ import(/* webpackChunkName: "quick-bar-dialog" */ "./ha-quick-bar");
+
+export const showQuickBar = (
+ element: HTMLElement,
+ dialogParams: QuickBarParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "ha-quick-bar",
+ dialogImport: loadQuickBar,
+ dialogParams,
+ });
+};
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index aafdb13ee0..305d3206c8 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -57,7 +57,7 @@ export class HaVoiceCommandDialog extends LitElement {
@internalProperty() private _agentInfo?: AgentInfo;
- @query("#messages") private messages!: PaperDialogScrollableElement;
+ @query("#messages", true) private messages!: PaperDialogScrollableElement;
private recognition!: SpeechRecognition;
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index 4ff9160025..bbb9320c41 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -35,7 +35,10 @@ function setProperties(properties) {
setCustomPanelProperties(panelEl, properties);
}
-function initialize(panel: CustomPanelInfo, properties: {}) {
+function initialize(
+ panel: CustomPanelInfo,
+ properties: Record
+) {
const style = document.createElement("style");
style.innerHTML = "body{margin:0}";
document.head.appendChild(style);
diff --git a/src/external_app/external_auth.ts b/src/external_app/external_auth.ts
index c3c6f0fe42..f1624e77d6 100644
--- a/src/external_app/external_auth.ts
+++ b/src/external_app/external_auth.ts
@@ -64,7 +64,13 @@ export class ExternalAuth extends Auth {
});
}
+ private _tokenCallbackPromise?: Promise;
+
public async refreshAccessToken(force?: boolean) {
+ if (this._tokenCallbackPromise && !force) {
+ await this._tokenCallbackPromise;
+ return;
+ }
const payload: GetExternalAuthPayload = {
callback: CALLBACK_SET_TOKEN,
};
@@ -72,14 +78,15 @@ export class ExternalAuth extends Auth {
payload.force = true;
}
- const callbackPromise = new Promise(
+ this._tokenCallbackPromise = new Promise(
(resolve, reject) => {
window[CALLBACK_SET_TOKEN] = (success, data) =>
success ? resolve(data) : reject(data);
}
);
- await 0;
+ // we sleep 1 microtask to get the promise to actually set it on the window object.
+ await Promise.resolve();
if (window.externalApp) {
window.externalApp.getExternalAuth(JSON.stringify(payload));
@@ -87,10 +94,11 @@ export class ExternalAuth extends Auth {
window.webkit!.messageHandlers.getExternalAuth.postMessage(payload);
}
- const tokens = await callbackPromise;
+ const tokens = await this._tokenCallbackPromise;
this.data.access_token = tokens.access_token;
this.data.expires = tokens.expires_in * 1000 + Date.now();
+ this._tokenCallbackPromise = undefined;
}
public async revoke() {
@@ -101,7 +109,8 @@ export class ExternalAuth extends Auth {
success ? resolve(data) : reject(data);
});
- await 0;
+ // we sleep 1 microtask to get the promise to actually set it on the window object.
+ await Promise.resolve();
if (window.externalApp) {
window.externalApp.revokeExternalAuth(JSON.stringify(payload));
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index f070dc7f41..3407ecbb18 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -53,19 +53,21 @@ export const provideHass = (
} = {};
const entities = {};
- function updateTranslations(fragment: null | string, language?: string) {
+ async function updateTranslations(
+ fragment: null | string,
+ language?: string
+ ) {
const lang = language || getLocalLanguage();
- getTranslation(fragment, lang).then((translation) => {
- const resources = {
- [lang]: {
- ...(hass().resources && hass().resources[lang]),
- ...translation.data,
- },
- };
- hass().updateHass({
- resources,
- localize: computeLocalize(elements[0], lang, resources),
- });
+ const translation = await getTranslation(fragment, lang);
+ const resources = {
+ [lang]: {
+ ...(hass().resources && hass().resources[lang]),
+ ...translation.data,
+ },
+ };
+ hass().updateHass({
+ resources,
+ localize: await computeLocalize(elements[0], lang, resources),
});
}
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
index 2864581ce2..08cc3ce65a 100644
--- a/src/html/_js_base.html.template
+++ b/src/html/_js_base.html.template
@@ -20,5 +20,4 @@
"content" in document.createElement("template"))) {
document.write("
diff --git a/src/html/_preload_roboto.html.template b/src/html/_preload_roboto.html.template
index 53431bb914..382beadfc0 100644
--- a/src/html/_preload_roboto.html.template
+++ b/src/html/_preload_roboto.html.template
@@ -8,7 +8,7 @@
el.type = "font/woff2";
el.href = src;
el.crossOrigin = "anonymous";
- document.head.append(el);
+ document.head.appendChild(el);
}
_pf("/static/fonts/roboto/Roboto-Regular.woff2");
_pf("/static/fonts/roboto/Roboto-Medium.woff2");
diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template
index 21d047c1b8..0777efeb57 100644
--- a/src/html/_style_base.html.template
+++ b/src/html/_style_base.html.template
@@ -1,4 +1,4 @@
-
+
[[localize('ui.panel.config.core.section.core.header')]] {
- this.validating = false;
- this.isValid = result.result === "valid";
-
- if (!this.isValid) {
- this.validateLog = result.errors;
- }
- });
- }
}
customElements.define("ha-config-section-core", HaConfigSectionCore);
diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index 2f2b3eb37f..d008085d2b 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/src/panels/config/customize/ha-config-customize.js
@@ -11,6 +11,7 @@ import "../ha-config-section";
import "../ha-entity-config";
import { configSections } from "../ha-panel-config";
import "./ha-form-customize";
+import { documentationUrl } from "../../../util/documentation-url";
/*
* @appliesMixin LocalizeMixin
@@ -34,6 +35,14 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
[[localize('ui.panel.config.customize.picker.introduction')]]
+
+
+ [[localize("ui.panel.config.customize.picker.documentation")]]
+
hass.states[key])
.sort(sortStatesByName);
}
+
+ _computeDocumentationUrl(hass) {
+ return documentationUrl(
+ hass,
+ "/docs/configuration/customizing-devices/#customization-using-the-ui"
+ );
+ }
}
customElements.define("ha-config-customize", HaConfigCustomize);
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 2ad523125d..4df81153df 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -40,35 +40,35 @@ class HaFormCustomize extends LocalizeMixin(PolymerElement) {
-
+
[[localize('ui.panel.config.customize.attributes_customize')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_outside')]]
[[localize('ui.panel.config.customize.different_include')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_set')]]
[[localize('ui.panel.config.customize.attributes_override')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_not_set')]]
-
+
;
@property() public showAsYaml = false;
diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
index 7f0cac03f2..6773c324a9 100644
--- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
@@ -31,7 +31,6 @@ export class HaDeviceActionsOzw extends LitElement {
@property()
private ozw_instance = 1;
-
protected updated(changedProperties: PropertyValues) {
if (changedProperties.has("device")) {
const identifiers:
diff --git a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
new file mode 100644
index 0000000000..c83d785fdd
--- /dev/null
+++ b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
@@ -0,0 +1,53 @@
+import {
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ css,
+} from "lit-element";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import { removeTasmotaDeviceEntry } from "../../../../../../data/tasmota";
+import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../../types";
+
+@customElement("ha-device-actions-tasmota")
+export class HaDeviceActionsTasmota extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public device!: DeviceRegistryEntry;
+
+ protected render(): TemplateResult {
+ return html`
+
+ ${this.hass.localize("ui.panel.config.devices.delete")}
+
+ `;
+ }
+
+ private async _confirmDeleteEntry(): Promise {
+ const confirmed = await showConfirmationDialog(this, {
+ text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+ });
+
+ if (!confirmed) {
+ return;
+ }
+
+ await removeTasmotaDeviceEntry(this.hass!, this.device.id);
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ :host {
+ display: flex;
+ justify-content: space-between;
+ }
+ `,
+ ];
+ }
+}
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 22c2ea190a..15a471bd6c 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -259,7 +259,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "automation")
? html`
-
+
${this.hass.localize(
"ui.panel.config.devices.automation.automations"
)}
@@ -270,7 +270,7 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
>
-
+
${this._related?.automation?.length
? this._related.automation.map((automation) => {
const state = this.hass.states[automation];
@@ -328,7 +328,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "scene") && entities.length
? html`
-
+
${this.hass.localize(
"ui.panel.config.devices.scene.scenes"
)}
@@ -340,7 +340,7 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
>
-
+
${
this._related?.scene?.length
@@ -402,7 +402,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "script")
? html`
-
+
${this.hass.localize(
"ui.panel.config.devices.script.scripts"
)}
@@ -413,18 +413,14 @@ export class HaConfigDevicePage extends LitElement {
)}
icon="hass:plus-circle"
>
-
+
${this._related?.script?.length
? this._related.script.map((script) => {
const state = this.hass.states[script];
return state
? html`
@@ -532,6 +528,19 @@ export class HaConfigDevicePage extends LitElement {
`);
}
+ if (integrations.includes("tasmota")) {
+ import(
+ "./device-detail/integration-elements/tasmota/ha-device-actions-tasmota"
+ );
+ templates.push(html`
+
+
@@ -441,11 +469,32 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"ui.panel.config.filtering.filtering_by"
)}
${activeFilters.join(", ")}
+ ${this._numHiddenEntities
+ ? "(" +
+ this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ ) +
+ ")"
+ : ""}
`
: `${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
- )} ${activeFilters.join(", ")}`}
+ )} ${activeFilters.join(", ")}
+ ${
+ this._numHiddenEntities
+ ? "(" +
+ this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ ) +
+ ")"
+ : ""
+ }
+ `}
${this.hass.localize(
"ui.panel.config.filtering.clear"
@@ -453,6 +502,31 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
>
`
: ""}
+ ${this._numHiddenEntities && !activeFilters
+ ? html`
+ ${this.narrow
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ )}
+
+ `
+ : `${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ )}`}
+ ${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.show_all"
+ )}
+ `
+ : ""}
-
;
+
+ @internalProperty() private _name!: string;
+
+ @internalProperty() private _icon!: string;
+
+ @internalProperty() private _maximum?: number;
+
+ @internalProperty() private _minimum?: number;
+
+ @internalProperty() private _restore?: boolean;
+
+ @internalProperty() private _initial?: number;
+
+ @internalProperty() private _step?: number;
+
+ set item(item: Counter) {
+ this._item = item;
+ if (item) {
+ this._name = item.name || "";
+ this._icon = item.icon || "";
+ this._maximum = item.maximum;
+ this._minimum = item.minimum;
+ this._restore = item.restore ?? true;
+ this._step = item.step ?? 1;
+ this._initial = item.initial ?? 0;
+ } else {
+ this._name = "";
+ this._icon = "";
+ this._maximum = undefined;
+ this._minimum = undefined;
+ this._restore = true;
+ this._step = 1;
+ this._initial = 0;
+ }
+ }
+
+ public focus() {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+ const nameInvalid = !this._name || this._name.trim() === "";
+
+ return html`
+
+
+
+
+ ${this.hass.localize(
+ "ui.dialogs.helper_settings.counter.restore"
+ )}
+
+
+ `
+ : ""}
+
+ `;
+ }
+
+ private _valueChanged(ev: CustomEvent) {
+ if (!this.new && !this._item) {
+ return;
+ }
+ ev.stopPropagation();
+ const target = ev.target as any;
+ const configValue = target.configValue;
+ const value =
+ target.type === "number"
+ ? Number(ev.detail.value)
+ : target.localName === "ha-switch"
+ ? (ev.target as HaSwitch).checked
+ : ev.detail.value;
+ if (this[`_${configValue}`] === value) {
+ return;
+ }
+ const newValue = { ...this._item };
+ if (value === undefined || value === "") {
+ delete newValue[configValue];
+ } else {
+ newValue[configValue] = value;
+ }
+ fireEvent(this, "value-changed", {
+ value: newValue,
+ });
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ .form {
+ color: var(--primary-text-color);
+ }
+ .row {
+ margin-top: 12px;
+ margin-bottom: 12px;
+ color: var(--primary-text-color);
+ display: flex;
+ align-items: center;
+ }
+ .row div {
+ margin-left: 16px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-counter-form": HaCounterForm;
+ }
+}
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index eef74de859..657df02826 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -36,7 +36,7 @@ class HaInputSelectForm extends LitElement {
@internalProperty() private _options: string[] = [];
- @query("#option_input") private _optionInput?: PaperInputElement;
+ @query("#option_input", true) private _optionInput?: PaperInputElement;
set item(item: InputSelect) {
this._item = item;
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
new file mode 100644
index 0000000000..9757b76b94
--- /dev/null
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -0,0 +1,130 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ internalProperty,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-icon-input";
+import { Timer, DurationDict } from "../../../../data/timer";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("ha-timer-form")
+class HaTimerForm extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public new?: boolean;
+
+ private _item?: Timer;
+
+ @internalProperty() private _name!: string;
+
+ @internalProperty() private _icon!: string;
+
+ @internalProperty() private _duration!: string | number | DurationDict;
+
+ set item(item: Timer) {
+ this._item = item;
+ if (item) {
+ this._name = item.name || "";
+ this._icon = item.icon || "";
+ this._duration = item.duration || "";
+ } else {
+ this._name = "";
+ this._icon = "";
+ this._duration = "00:00:00";
+ }
+ }
+
+ public focus() {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+ const nameInvalid = !this._name || this._name.trim() === "";
+
+ return html`
+
+ ${domainToName(this.hass.localize, domain)}
`
+ html`${domainToName(this.hass.localize, domain)}
`
);
}
sections.push(html`
@@ -78,7 +84,24 @@ class SystemHealthCard extends LitElement {
}
return html`
-
+
+
+
+ ${domainToName(this.hass.localize, "system_health")}
+
+
+
+
+ ${this.hass.localize("ui.common.copied")}
+
+
${sections}
`;
@@ -104,6 +127,32 @@ class SystemHealthCard extends LitElement {
}
}
+ private _copyInfo(): void {
+ const copyElement = this.shadowRoot?.querySelector(
+ ".card-content"
+ ) as HTMLElement;
+
+ // Add temporary heading (fixed in EN since usually executed to provide support data)
+ const tempTitle = document.createElement("h3");
+ tempTitle.innerText = "System Health";
+ copyElement.insertBefore(tempTitle, copyElement.firstElementChild);
+
+ const selection = window.getSelection()!;
+ selection.removeAllRanges();
+ const range = document.createRange();
+ range.selectNodeContents(copyElement);
+ selection.addRange(range);
+
+ document.execCommand("copy");
+ window.getSelection()!.removeAllRanges();
+
+ // Remove temporary heading again
+ copyElement.removeChild(tempTitle);
+
+ this._toolTip!.show();
+ setTimeout(() => this._toolTip?.hide(), 3000);
+ }
+
static get styles(): CSSResult {
return css`
table {
@@ -119,6 +168,11 @@ class SystemHealthCard extends LitElement {
align-items: center;
justify-content: center;
}
+
+ .card-header {
+ justify-content: space-between;
+ display: flex;
+ }
`;
}
}
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 99d7f6b266..915cd4920e 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -23,7 +23,6 @@ import "../../../common/search/search-input";
import { caseInsensitiveCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import { nextRender } from "../../../common/util/render-status";
-import "../../../components/entity/ha-state-icon";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-svg-icon";
@@ -287,7 +286,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.label=${this.hass.localize("ui.common.overflow_menu")}
slot="trigger"
>
-
${this.hass.localize(
@@ -480,7 +479,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
title=${this.hass.localize("ui.panel.config.integrations.new")}
@click=${this._createFlow}
>
-
${this.hass.localize(
@@ -475,7 +475,7 @@ export class HaIntegrationCard extends LitElement {
align-items: center;
height: 40px;
padding: 16px 16px 8px 16px;
- vertical-align: middle;
+ justify-content: center;
}
.group-header h1 {
margin: 0;
@@ -495,7 +495,6 @@ export class HaIntegrationCard extends LitElement {
max-height: 100%;
max-width: 90%;
}
-
.none-found {
margin: auto;
text-align: center;
@@ -507,9 +506,16 @@ export class HaIntegrationCard extends LitElement {
margin-bottom: 0;
}
h2 {
- margin-top: 0;
min-height: 24px;
}
+ h3 {
+ word-wrap: break-word;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
ha-button-menu {
color: var(--secondary-text-color);
--mdc-menu-min-width: 200px;
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
index 013f2b794b..fccaa04a7f 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
@@ -129,6 +129,7 @@ class OZWNetworkDashboard extends LitElement {
${this._generateServiceButton("add_node")}
${this._generateServiceButton("remove_node")}
+ ${this._generateServiceButton("cancel_command")}
`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
index f492cf579f..bd796519a4 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
@@ -117,6 +117,7 @@ class OZWNetworkNodes extends LitElement {
.data=${this._nodes}
id="node_id"
@row-click=${this._handleRowClicked}
+ clickable
>
`;
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
new file mode 100644
index 0000000000..b1017aaaa8
--- /dev/null
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@@ -0,0 +1,274 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-fab";
+import {
+ css,
+ CSSResultArray,
+ customElement,
+ html,
+ LitElement,
+ internalProperty,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { navigate } from "../../../../../common/navigate";
+import "../../../../../components/buttons/ha-call-service-button";
+import "../../../../../components/ha-card";
+import "../../../../../components/ha-icon-next";
+import "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
+import {
+ fetchOZWNodeStatus,
+ fetchOZWNodeMetadata,
+ fetchOZWNodeConfig,
+ OZWDevice,
+ OZWDeviceMetaDataResponse,
+ OZWDeviceConfig,
+} from "../../../../../data/ozw";
+import { ERR_NOT_FOUND } from "../../../../../data/websocket_api";
+import { showOZWRefreshNodeDialog } from "./show-dialog-ozw-refresh-node";
+import { ozwNodeTabs } from "./ozw-node-router";
+
+@customElement("ozw-node-config")
+class OZWNodeConfig extends LitElement {
+ @property({ type: Object }) public hass!: HomeAssistant;
+
+ @property({ type: Object }) public route!: Route;
+
+ @property({ type: Boolean }) public narrow!: boolean;
+
+ @property({ type: Boolean }) public isWide!: boolean;
+
+ @property() public configEntryId?: string;
+
+ @property() public ozwInstance?;
+
+ @property() public nodeId?;
+
+ @internalProperty() private _node?: OZWDevice;
+
+ @internalProperty() private _metadata?: OZWDeviceMetaDataResponse;
+
+ @internalProperty() private _config?: OZWDeviceConfig[];
+
+ @internalProperty() private _error?: string;
+
+ protected firstUpdated() {
+ if (!this.ozwInstance) {
+ navigate(this, "/config/ozw/dashboard", true);
+ } else if (!this.nodeId) {
+ navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+ } else {
+ this._fetchData();
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (this._error) {
+ return html`
+
+
+
+ ${this.hass.localize("ui.panel.config.ozw.node_config.header")}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_config.introduction"
+ )}
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_config.help_source"
+ )}
+
+
+
+ Note: This panel is currently read-only. The ability to change
+ values will come in a later update.
+
+
+ ${this._node
+ ? html`
+
+
+
+ ${this._node.node_manufacturer_name}
+ ${this._node.node_product_name}
+ ${this.hass.localize("ui.panel.config.ozw.common.node_id")}:
+ ${this._node.node_id}
+ ${this.hass.localize(
+ "ui.panel.config.ozw.common.query_stage"
+ )}:
+ ${this._node.node_query_stage}
+ ${this._metadata?.metadata.ProductManualURL
+ ? html`
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_metadata.product_manual"
+ )}
+
+ `
+ : ``}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.refresh_node.button"
+ )}
+
+
+
+
+ ${this._metadata?.metadata.WakeupHelp
+ ? html`
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_config.wakeup_help"
+ )}
+
+
+ ${this._metadata.metadata.WakeupHelp}
+
+
+
+ `
+ : ``}
+ ${this._config
+ ? html`
+ ${this._config.map(
+ (item) => html`
+
+
+ ${item.label}
+ ${item.help}
+ ${item.value}
+
+
+ `
+ )}
+ `
+ : ``}
+ `
+ : ``}
+
+
+ `;
+ }
+
+ private async _fetchData() {
+ if (!this.ozwInstance || !this.nodeId) {
+ return;
+ }
+
+ try {
+ const nodeProm = fetchOZWNodeStatus(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ const metadataProm = fetchOZWNodeMetadata(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ const configProm = fetchOZWNodeConfig(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ [this._node, this._metadata, this._config] = await Promise.all([
+ nodeProm,
+ metadataProm,
+ configProm,
+ ]);
+ } catch (err) {
+ if (err.code === ERR_NOT_FOUND) {
+ this._error = ERR_NOT_FOUND;
+ return;
+ }
+ throw err;
+ }
+ }
+
+ private async _refreshNodeClicked() {
+ showOZWRefreshNodeDialog(this, {
+ node_id: this.nodeId,
+ ozw_instance: this.ozwInstance,
+ });
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ haStyle,
+ css`
+ .secondary {
+ color: var(--secondary-text-color);
+ font-size: 0.9em;
+ }
+
+ .content {
+ margin-top: 24px;
+ }
+
+ .sectionHeader {
+ position: relative;
+ padding-right: 40px;
+ }
+
+ ha-card {
+ margin: 0 auto;
+ max-width: 600px;
+ }
+
+ [hidden] {
+ display: none;
+ }
+
+ blockquote {
+ display: block;
+ background-color: #ddd;
+ padding: 8px;
+ margin: 8px 0;
+ font-size: 0.9em;
+ }
+
+ blockquote em {
+ font-size: 0.9em;
+ margin-top: 6px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ozw-node-config": OZWNodeConfig;
+ }
+}
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
index bd2fa6af3e..c860027551 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
@@ -26,7 +26,7 @@ import {
} from "../../../../../data/ozw";
import { ERR_NOT_FOUND } from "../../../../../data/websocket_api";
import { showOZWRefreshNodeDialog } from "./show-dialog-ozw-refresh-node";
-import { ozwNetworkTabs } from "./ozw-network-router";
+import { ozwNodeTabs } from "./ozw-node-router";
@customElement("ozw-node-dashboard")
class OZWNodeDashboard extends LitElement {
@@ -74,7 +74,7 @@ class OZWNodeDashboard extends LitElement {
.hass=${this.hass}
.narrow=${this.narrow}
.route=${this.route}
- .tabs=${ozwNetworkTabs(this.ozwInstance)}
+ .tabs=${ozwNodeTabs(this.ozwInstance, this.nodeId)}
>
@@ -87,19 +87,29 @@ class OZWNodeDashboard extends LitElement {
${this._node
? html`
-
- ${this._node.node_manufacturer_name}
- ${this._node.node_product_name}
- Node ID: ${this._node.node_id}
- Query Stage: ${this._node.node_query_stage}
- ${this._metadata?.metadata.ProductManualURL
- ? html`
- Product Manual
- `
+
+
+
+ ${this._node.node_manufacturer_name}
+ ${this._node.node_product_name}
+
+
+ Node ID: ${this._node.node_id}
+ Query Stage: ${this._node.node_query_stage}
+ ${this._metadata?.metadata.ProductManualURL
+ ? html`
+ Product Manual
+ `
+ : ``}
+
+ ${this._metadata?.metadata.ProductPicBase64
+ ? html`
`
: ``}
@@ -199,6 +209,11 @@ class OZWNodeDashboard extends LitElement {
max-width: 600px;
}
+ .flex {
+ display: flex;
+ justify-content: space-between;
+ }
+
.card-actions.warning ha-call-service-button {
color: var(--error-color);
}
@@ -219,6 +234,15 @@ class OZWNodeDashboard extends LitElement {
[hidden] {
display: none;
}
+
+ .product-image {
+ padding: 12px;
+ max-height: 140px;
+ max-width: 140px;
+ }
+ .card-actions {
+ clear: right;
+ }
`,
];
}
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
index baf68ddc96..ea30bf78ff 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
@@ -1,11 +1,31 @@
+import { mdiNetwork, mdiWrench } from "@mdi/js";
import { customElement, property } from "lit-element";
import { navigate } from "../../../../../common/navigate";
import {
HassRouterPage,
RouterOptions,
} from "../../../../../layouts/hass-router-page";
+import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
import { HomeAssistant } from "../../../../../types";
+export const ozwNodeTabs = (
+ instance: number,
+ node: number
+): PageNavigation[] => {
+ return [
+ {
+ translationKey: "ui.panel.config.ozw.navigation.node.dashboard",
+ path: `/config/ozw/network/${instance}/node/${node}/dashboard`,
+ iconPath: mdiNetwork,
+ },
+ {
+ translationKey: "ui.panel.config.ozw.navigation.node.config",
+ path: `/config/ozw/network/${instance}/node/${node}/config`,
+ iconPath: mdiWrench,
+ },
+ ];
+};
+
@customElement("ozw-node-router")
class OZWNodeRouter extends HassRouterPage {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -33,6 +53,11 @@ class OZWNodeRouter extends HassRouterPage {
/* webpackChunkName: "ozw-node-dashboard" */ "./ozw-node-dashboard"
),
},
+ config: {
+ tag: "ozw-node-config",
+ load: () =>
+ import(/* webpackChunkName: "ozw-node-config" */ "./ozw-node-config"),
+ },
},
};
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index a7929f0bda..fdbe21ea19 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -42,7 +42,7 @@ export class ZHAAddGroupPage extends LitElement {
@internalProperty() private _groupName = "";
- @query("zha-device-endpoint-data-table")
+ @query("zha-device-endpoint-data-table", true)
private _zhaDevicesDataTable!: ZHADeviceEndpointDataTable;
private _firstUpdatedCalled = false;
@@ -105,12 +105,15 @@ export class ZHAAddGroupPage extends LitElement {
@click="${this._createGroup}"
class="button"
>
-
-
diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts
index 24d73c7a94..34d0cfcd1a 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -36,7 +36,7 @@ class DialogSystemLogDetail extends LitElement {
@internalProperty() private _manifest?: IntegrationManifest;
- @query("paper-tooltip") private _toolTip?: PaperTooltipElement;
+ @query("paper-tooltip", true) private _toolTip?: PaperTooltipElement;
public async showDialog(params: SystemLogDetailDialogParams): Promise {
this._params = params;
@@ -206,7 +206,6 @@ class DialogSystemLogDetail extends LitElement {
font-family: var(--code-font-family, monospace);
}
.heading {
- display: flex;
display: flex;
align-items: center;
justify-content: space-between;
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 88dac9b2de..89229e41ef 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -15,25 +15,29 @@ import { HomeAssistant } from "../../../types";
class ErrorLogCard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @internalProperty() private _errorLog?: string;
+ @internalProperty() private _errorHTML!: TemplateResult[] | string;
protected render(): TemplateResult {
return html`
-
- ${this._errorLog
+
+ ${this._errorHTML
? html`
-
+
`
: html`
${this.hass.localize("ui.panel.config.logs.load_full_log")}
`}
-
- ${this._errorLog}
+
`;
}
@@ -59,17 +63,42 @@ class ErrorLogCard extends LitElement {
.error-log {
@apply --paper-font-code)
clear: both;
- white-space: pre-wrap;
- margin: 16px;
+ text-align: left;
+ padding-top: 12px;
+ }
+
+ .error {
+ color: var(--error-color);
+ }
+
+ .warning {
+ color: var(--warning-color);
}
`;
}
private async _refreshErrorLog(): Promise {
- this._errorLog = this.hass.localize("ui.panel.config.logs.loading_log");
+ this._errorHTML = this.hass.localize("ui.panel.config.logs.loading_log");
const log = await fetchErrorLog(this.hass!);
- this._errorLog =
- log || this.hass.localize("ui.panel.config.logs.no_errors");
+
+ this._errorHTML = log
+ ? log.split("\n").map((entry) => {
+ if (entry.includes("INFO"))
+ return html`${entry}`;
+
+ if (entry.includes("WARNING"))
+ return html`${entry}`;
+
+ if (
+ entry.includes("ERROR") ||
+ entry.includes("FATAL") ||
+ entry.includes("CRITICAL")
+ )
+ return html`${entry}`;
+
+ return html`${entry}`;
+ })
+ : this.hass.localize("ui.panel.config.logs.no_errors");
}
}
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index 84247d748c..178fa70863 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -28,7 +28,7 @@ export class HaConfigLogs extends LitElement {
@property() public route!: Route;
- @query("system-log-card") private systemLog?: SystemLogCard;
+ @query("system-log-card", true) private systemLog?: SystemLogCard;
public connectedCallback() {
super.connectedCallback();
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index bd80bbe5bf..dade77f9bb 100644
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -77,7 +77,9 @@ export class SystemLogCard extends LitElement {
integrations[idx]!
)
: item.source[0]}
- (${item.level})
+ ${html`(${item.level})`}
${item.count > 1
? html`
-
@@ -164,6 +166,14 @@ export class SystemLogCard extends LitElement {
align-items: center;
justify-content: center;
}
+
+ .error {
+ color: var(--error-color);
+ }
+
+ .warning {
+ color: var(--warning-color);
+ }
`;
}
}
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 90205aa8a7..2255222781 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -221,6 +221,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
@row-click=${this._editDashboard}
id="url_path"
hasFab
+ clickable
>
-
`;
diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
index 0603562940..317f05f261 100644
--- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
+++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -23,6 +23,20 @@ import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
+const detectResourceType = (url: string) => {
+ const ext = url.split(".").pop() || "";
+
+ if (ext === "css") {
+ return "css";
+ }
+
+ if (ext === "js") {
+ return "module";
+ }
+
+ return undefined;
+};
+
@customElement("dialog-lovelace-resource-detail")
export class DialogLovelaceResourceDetail extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -31,7 +45,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
@internalProperty() private _url!: LovelaceResource["url"];
- @internalProperty() private _type!: LovelaceResource["type"];
+ @internalProperty() private _type?: LovelaceResource["type"];
@internalProperty() private _error?: string;
@@ -44,10 +58,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
this._error = undefined;
if (this._params.resource) {
this._url = this._params.resource.url || "";
- this._type = this._params.resource.type || "module";
+ this._type = this._params.resource.type || undefined;
} else {
this._url = "";
- this._type = "module";
+ this._type = undefined;
}
await this.updateComplete;
}
@@ -106,6 +120,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
.selected=${this._type}
@iron-select=${this._typeChanged}
attr-for-selected="type"
+ .invalid=${!this._type}
>
${this.hass!.localize(
@@ -156,7 +171,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
${this._params.resource
? this.hass!.localize(
@@ -173,6 +188,9 @@ export class DialogLovelaceResourceDetail extends LitElement {
private _urlChanged(ev: PolymerChangedEvent) {
this._error = undefined;
this._url = ev.detail.value;
+ if (!this._type) {
+ this._type = detectResourceType(this._url);
+ }
}
private _typeChanged(ev: CustomEvent) {
@@ -180,6 +198,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
}
private async _updateResource() {
+ if (!this._type) {
+ return;
+ }
+
this._submitting = true;
try {
const values: LovelaceResourcesMutableParams = {
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 5d35134956..5ae5003d5a 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -101,6 +101,7 @@ export class HaConfigLovelaceRescources extends LitElement {
)}
@row-click=${this._editResource}
hasFab
+ clickable
>
-
`;
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 5844a0374f..67802ea928 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -14,7 +14,6 @@ import "../../../components/entity/ha-entities-picker";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
-import "../../../components/user/ha-user-picker";
import { PersonMutableParams } from "../../../data/person";
import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
import { PolymerChangedEvent } from "../../../polymer-types";
@@ -440,9 +439,6 @@ class DialogPersonDetail extends LitElement {
display: block;
padding: 16px 0;
}
- ha-user-picker {
- margin-top: 16px;
- }
a {
color: var(--primary-color);
}
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 829b12278a..d7403b341a 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -1,7 +1,7 @@
+import "@material/mwc-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
-import "@material/mwc-fab";
import {
css,
CSSResult,
@@ -23,10 +23,14 @@ import {
updatePerson,
} from "../../../data/person";
import { fetchUsers, User } from "../../../data/user";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage";
import { HomeAssistant, Route } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
import {
@@ -71,7 +75,9 @@ class HaConfigPerson extends LitElement {
>${hass.localize("ui.panel.config.person.caption")}
- ${hass.localize("ui.panel.config.person.introduction")}
+
+ ${hass.localize("ui.panel.config.person.introduction")}
+
${this._configItems.length > 0
? html`
@@ -81,7 +87,16 @@ class HaConfigPerson extends LitElement {
`
: ""}
+
+
+ ${this.hass.localize("ui.panel.config.person.learn_more")}
+
+
${this._storageItems.map((entry) => {
return html`
@@ -136,7 +151,7 @@ class HaConfigPerson extends LitElement {
title="${hass.localize("ui.panel.config.person.add_person")}"
@click=${this._createPerson}
>
-
+
-
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 73f0e29ce3..22bbba718d 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -57,7 +57,9 @@ import { HomeAssistant, Route } from "../../../types";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
import "../../../components/ha-svg-icon";
+import { showToast } from "../../../util/toast";
import { mdiContentSave } from "@mdi/js";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
interface DeviceEntities {
id: string;
@@ -70,7 +72,9 @@ interface DeviceEntitiesLookup {
}
@customElement("ha-scene-editor")
-export class HaSceneEditor extends SubscribeMixin(LitElement) {
+export class HaSceneEditor extends SubscribeMixin(
+ KeyboardShortcutMixin(LitElement)
+) {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public narrow!: boolean;
@@ -265,7 +269,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
(device) =>
html`
-
+
${device.name}
+
${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
@@ -405,7 +409,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
@click=${this._saveScene}
class=${classMap({ dirty: this._dirty })}
>
- this._backTapped()}
.tabs=${configSections.automation}
>
- ${!this.scriptEntityId
- ? ""
- : html`
-
+
+ ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+ ${this._mode === "gui"
+ ? html`
+
+ ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
+ ${this._mode === "yaml"
+ ? html`
+
+
+
+
+ ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
+
+
+
+
${this.narrow
? html` ${this._config?.alias} `
: ""}
@@ -93,174 +156,226 @@ export class HaScriptEditor extends LitElement {
${this._errors
? html` ${this._errors} `
: ""}
-
- ${this._config
- ? html`
-
- ${!this.narrow
- ? html` ${this._config.alias} `
- : ""}
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.introduction"
- )}
-
-
-
-
-
-
-
- ${!this.scriptEntityId
- ? html`
+ ${this._config
+ ? html`
+
+ ${!this.narrow
+ ? html`
+ ${this._config.alias}
+ `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.introduction"
+ )}
+
+
+
+
+
+
+
+ ${!this.scriptEntityId
+ ? html`
+ `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.modes.description",
+ "documentation_link",
+ html`${this.hass.localize(
+ "ui.panel.config.script.editor.modes.documentation"
+ )}`
+ )}
+
+
+
+ ${MODES.map(
+ (mode) => html`
+
+ ${this.hass.localize(
+ `ui.panel.config.script.editor.modes.${mode}`
+ ) || mode}
+
+ `
+ )}
+
+
+ ${this._config.mode &&
+ MODES_MAX.includes(this._config.mode)
+ ? html`
+ `
+ : html``}
+
+ ${this.scriptEntityId
+ ? html`
+
+
+
+ ${this.hass.localize(
+ "ui.card.script.execute"
+ )}
+
+
+ `
+ : ``}
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.sequence"
+ )}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.sequence_sentence"
)}
- .errorMessage=${this.hass.localize(
- "ui.panel.config.script.editor.id_already_exists"
- )}
- .invalid=${this._idError}
- .value=${this._entityId}
- @value-changed=${this._idChanged}
- >
-
`
- : ""}
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.modes.description",
- "documentation_link",
- html`
+ ${this.hass.localize(
- "ui.panel.config.script.editor.modes.documentation"
- )}`
- )}
-
-
-
- ${MODES.map(
- (mode) => html`
-
- ${this.hass.localize(
- `ui.panel.config.script.editor.modes.${mode}`
- ) || mode}
-
- `
- )}
-
-
- ${this._config.mode &&
- MODES_MAX.includes(this._config.mode)
- ? html`
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.link_available_actions"
)}
- type="number"
- name="max"
- .value=${this._config.max || "10"}
- @value-changed=${this._valueChanged}
- >
- `
- : html``}
-
- ${this.scriptEntityId
- ? html`
-
-
-
- ${this.hass.localize("ui.card.script.execute")}
-
-
- `
- : ``}
-
-
-
-
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.sequence"
- )}
-
-
-
+
+
+
+ `
+ : ""}
+
+ `
+ : this._mode === "yaml"
+ ? html`
+
+ ${!this.narrow
+ ? html`${this._config?.alias}`
+ : ``}
+
+
+
${this.hass.localize(
- "ui.panel.config.script.editor.sequence_sentence"
+ "ui.panel.config.automation.editor.copy_to_clipboard"
)}
-
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.link_available_actions"
- )}
-
-
-
+
+
+ ${this.scriptEntityId
+ ? html`
+
+
+
+ ${this.hass.localize("ui.card.script.execute")}
+
+
+ `
+ : ``}
+
+
+ `
+ : ``}
-
`;
@@ -400,6 +515,26 @@ export class HaScriptEditor extends LitElement {
this._dirty = true;
}
+ private _preprocessYaml() {
+ return this._config;
+ }
+
+ private async _copyYaml() {
+ if (this._editor?.yaml) {
+ navigator.clipboard.writeText(this._editor.yaml);
+ }
+ }
+
+ private _yamlChanged(ev: CustomEvent) {
+ ev.stopPropagation();
+ if (!ev.detail.isValid) {
+ return;
+ }
+ this._config = ev.detail.value;
+ this._errors = undefined;
+ this._dirty = true;
+ }
+
private _backTapped(): void {
if (this._dirty) {
showConfirmationDialog(this, {
@@ -429,11 +564,33 @@ export class HaScriptEditor extends LitElement {
history.back();
}
+ private async _handleMenuAction(ev: CustomEvent) {
+ switch (ev.detail.index) {
+ case 0:
+ this._mode = "gui";
+ break;
+ case 1:
+ this._mode = "yaml";
+ break;
+ case 2:
+ this._deleteConfirm();
+ break;
+ }
+ }
+
private _saveScript(): void {
if (this._idError) {
- this._errors = this.hass.localize(
- "ui.panel.config.script.editor.id_already_exists_save_error"
- );
+ showToast(this, {
+ message: this.hass.localize(
+ "ui.panel.config.script.editor.id_already_exists_save_error"
+ ),
+ dismissable: false,
+ duration: 0,
+ action: {
+ action: () => {},
+ text: this.hass.localize("ui.dialogs.generic.ok"),
+ },
+ });
return;
}
const id = this.scriptEntityId
@@ -449,11 +606,18 @@ export class HaScriptEditor extends LitElement {
},
(errors) => {
this._errors = errors.body.message;
+ showToast(this, {
+ message: errors.body.message,
+ });
throw errors;
}
);
}
+ protected handleKeyboardSave() {
+ this._saveScript();
+ }
+
static get styles(): CSSResult[] {
return [
haStyle,
@@ -483,6 +647,12 @@ export class HaScriptEditor extends LitElement {
mwc-fab.dirty {
bottom: 0;
}
+ .selected_menu_item {
+ color: var(--primary-color);
+ }
+ li[role="separator"] {
+ border-bottom-color: var(--divider-color);
+ }
`,
];
}
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index d7b713596c..3dc94b280c 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -1,3 +1,4 @@
+import "@material/mwc-icon-button";
import "../../../components/ha-icon-button";
import { HassEntity } from "home-assistant-js-websocket";
import {
@@ -23,7 +24,7 @@ import { HomeAssistant, Route } from "../../../types";
import { showToast } from "../../../util/toast";
import { configSections } from "../ha-panel-config";
import "../../../components/ha-svg-icon";
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus, mdiHelpCircle } from "@mdi/js";
import { stateIcon } from "../../../common/entity/state_icon";
import { documentationUrl } from "../../../util/documentation-url";
@@ -61,7 +62,7 @@ class HaScriptPicker extends LitElement {
.script=${script}
icon="hass:play"
title="${this.hass.localize(
- "ui.panel.config.script.picker.activate_script"
+ "ui.panel.config.script.picker.run_script"
)}"
@click=${(ev: Event) => this._runScript(ev)}
>
@@ -141,21 +142,19 @@ class HaScriptPicker extends LitElement {
)}
hasFab
>
-
+
-
diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts
index 62622baeab..f63cfab076 100644
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -270,7 +270,7 @@ export class HaConfigServerControl extends LitElement {
}
.validate-log {
- white-space: pre-wrap;
+ white-space: pre-line;
direction: ltr;
}
diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts
index d34ed4e206..6e7cd00218 100644
--- a/src/panels/config/tags/dialog-tag-detail.ts
+++ b/src/panels/config/tags/dialog-tag-detail.ts
@@ -10,6 +10,7 @@ import {
property,
TemplateResult,
} from "lit-element";
+
import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
@@ -21,8 +22,11 @@ import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { TagDetailDialogParams } from "./show-dialog-tag-detail";
+const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
+
@customElement("dialog-tag-detail")
-class DialogTagDetail extends LitElement implements HassDialog {
+class DialogTagDetail extends LitElement
+ implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _id?: string;
@@ -35,6 +39,8 @@ class DialogTagDetail extends LitElement implements HassDialog {
@internalProperty() private _submitting = false;
+ @internalProperty() private _qrCode?: TemplateResult;
+
public showDialog(params: TagDetailDialogParams): void {
this._params = params;
this._error = undefined;
@@ -48,6 +54,7 @@ class DialogTagDetail extends LitElement implements HassDialog {
public closeDialog(): void {
this._params = undefined;
+ this._qrCode = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@@ -106,6 +113,36 @@ class DialogTagDetail extends LitElement implements HassDialog {
>`
: ""}
+ ${this._params.entry
+ ? html`
+
+
+ ${this.hass!.localize(
+ "ui.panel.config.tags.detail.usage",
+ "companion_link",
+ html`${this.hass!.localize(
+ "ui.panel.config.tags.detail.companion_apps"
+ )}`
+ )}
+
+
+
+
+ ${this._qrCode
+ ? this._qrCode
+ : html`
+ Generate QR code
+
+ `}
+
+ `
+ : ``}
${this._params.entry
? html`
@@ -191,6 +228,33 @@ class DialogTagDetail extends LitElement implements HassDialog {
}
}
+ private async _generateQR() {
+ const qrcode = await import("qrcode");
+ const canvas = await qrcode.toCanvas(
+ `https://home-assistant.io/tag/${this._params?.entry?.id}`,
+ {
+ width: 180,
+ errorCorrectionLevel: "Q",
+ }
+ );
+ const context = canvas.getContext("2d");
+
+ const imageObj = new Image();
+ imageObj.src = QR_LOGO_URL;
+ await new Promise((resolve) => {
+ imageObj.onload = resolve;
+ });
+ context.drawImage(
+ imageObj,
+ canvas.width / 3,
+ canvas.height / 3,
+ canvas.width / 3,
+ canvas.height / 3
+ );
+
+ this._qrCode = html`})
`;
+ }
+
static get styles(): CSSResult[] {
return [
haStyleDialog,
@@ -198,6 +262,9 @@ class DialogTagDetail extends LitElement implements HassDialog {
a {
color: var(--primary-color);
}
+ #qr {
+ text-align: center;
+ }
`,
];
}
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index a0dd7e32b8..2fbe093f43 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -1,5 +1,12 @@
import "@material/mwc-fab";
-import { mdiCog, mdiContentDuplicate, mdiPlus, mdiRobot } from "@mdi/js";
+import "@material/mwc-icon-button";
+import {
+ mdiCog,
+ mdiContentDuplicate,
+ mdiHelpCircle,
+ mdiPlus,
+ mdiRobot,
+} from "@mdi/js";
import {
customElement,
html,
@@ -23,11 +30,15 @@ import {
updateTag,
UpdateTagParams,
} from "../../../data/tag";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import { getExternalConfig } from "../../../external_app/external_config";
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant, Route } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
import { configSections } from "../ha-panel-config";
import { showTagDetailDialog } from "./show-dialog-tag-detail";
import "./tag-image";
@@ -193,17 +204,51 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
.noDataText=${this.hass.localize("ui.panel.config.tags.no_tags")}
hasFab
>
+
+
-
`;
}
+ private _showHelp() {
+ showAlertDialog(this, {
+ title: this.hass.localize("ui.panel.config.tags.caption"),
+ text: html`
+
+ ${this.hass.localize(
+ "ui.panel.config.tags.detail.usage",
+ "companion_link",
+ html`${this.hass!.localize(
+ "ui.panel.config.tags.detail.companion_apps"
+ )}`
+ )}
+
+
+
+ ${this.hass.localize("ui.panel.config.tags.learn_more")}
+
+
+ `,
+ });
+ }
+
private async _fetchTags() {
this._tags = await fetchTags(this.hass);
}
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 30ed2e8093..09ca727a22 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -96,13 +96,14 @@ export class HaConfigUsers extends LitElement {
.data=${this._users}
@row-click=${this._editUser}
hasFab
+ clickable
>
-
`;
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index 227c1b0ab8..f31f5e0565 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -303,9 +303,6 @@ class DialogZoneDetail extends LitElement {
ha-location-editor {
margin-top: 16px;
}
- ha-user-picker {
- margin-top: 16px;
- }
a {
color: var(--primary-color);
}
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 83910d3c15..6f4f277ab6 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -260,7 +260,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
title=${hass.localize("ui.panel.config.zone.add_zone")}
@click=${this._createZone}
>
- ) => void | undefined;
// Since navigate fires events on `window`, we need to expose this as a function
// to allow custom panels to forward their location changes to the main window
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 1a71602c8b..e8c8317e17 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
import "../../layouts/ha-app-layout";
import "../../components/ha-icon-button";
import "@polymer/paper-tabs/paper-tab";
-import "@polymer/paper-tabs/paper-tabs";
+import "../../components/ha-tabs";
import {
css,
CSSResultArray,
@@ -44,7 +44,7 @@ class PanelDeveloperTools extends LitElement {
>
${this.hass.localize("panel.developer_tools")}
-
-
+
@@ -146,58 +145,59 @@ class HaPanelDevService extends LocalizeMixin(PolymerElement) {
-
-
- [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
-
-
+
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
+
-
-
-
- [[localize('ui.panel.developer-tools.tabs.services.no_description')]]
-
-
-
-
- [[_description]]
-
-
-
-
-
- [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]]
-
-
- [[localize('ui.panel.developer-tools.tabs.services.column_description')]]
-
-
- [[localize('ui.panel.developer-tools.tabs.services.column_example')]]
-
-
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.no_description')]]
+
+
+ [[_description]]
+
+
+
+
+
-
-
- [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]]
-
-
+ [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]]
-
-
- [[attribute.key]]
[[attribute.description]]
- [[attribute.example]]
-
-
-
-
-
- [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
-
+
+
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]]
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.column_description')]]
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.column_example')]]
+
+
+
+
+ [[attribute.key]]
[[attribute.description]]
+ [[attribute.example]]
+
+
+
+
+
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
+
+
-
+
+
- ${icon
- ? html`
-
-
- `
- : ""}
- ${name} ${lastVersion}
+
+
+ ${name} ${object.version_latest}
- You are currently running version ${curVersion}
+ You are currently running version ${object.version}
@@ -138,7 +128,7 @@ export class HassioUpdate extends LitElement {
Update
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 1ab958891b..8569b8bc60 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -39,7 +39,8 @@ import type { HomeAssistant } from "../../../../src/types";
import { HassioNetworkDialogParams } from "./show-dialog-network";
@customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement implements HassDialog {
+export class DialogHassioNetwork extends LitElement
+ implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _prosessing = false;
diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
new file mode 100644
index 0000000000..fef6e3e0a8
--- /dev/null
+++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
@@ -0,0 +1,245 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDelete } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+ addHassioDockerRegistry,
+ fetchHassioDockerRegistries,
+ removeHassioDockerRegistry,
+} from "../../../../src/data/hassio/docker";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("dialog-hassio-registries")
+class HassioRegistriesDialog extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) private _registries?: {
+ registry: string;
+ username: string;
+ }[];
+
+ @internalProperty() private _registry?: string;
+
+ @internalProperty() private _username?: string;
+
+ @internalProperty() private _password?: string;
+
+ @internalProperty() private _opened = false;
+
+ @internalProperty() private _addingRegistry = false;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ `;
+ }
+
+ private _inputChanged(ev: Event) {
+ const target = ev.currentTarget as PaperInputElement;
+ this[`_${target.name}`] = target.value;
+ }
+
+ public async showDialog(_dialogParams: any): Promise {
+ this._opened = true;
+ await this._loadRegistries();
+ await this.updateComplete;
+ }
+
+ public closeDialog(): void {
+ this._addingRegistry = false;
+ this._opened = false;
+ }
+
+ public focus(): void {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ private async _loadRegistries(): Promise {
+ const registries = await fetchHassioDockerRegistries(this.hass);
+ this._registries = Object.keys(registries!.registries).map((key) => ({
+ registry: key,
+ username: registries.registries[key].username,
+ }));
+ }
+
+ private _addRegistry(): void {
+ this._addingRegistry = true;
+ }
+
+ private async _addNewRegistry(): Promise {
+ const data = {};
+ data[this._registry!] = {
+ username: this._username,
+ password: this._password,
+ };
+
+ try {
+ await addHassioDockerRegistry(this.hass, data);
+ await this._loadRegistries();
+ this._addingRegistry = false;
+ } catch (err) {
+ showAlertDialog(this, {
+ title: "Failed to add registry",
+ text: extractApiErrorMessage(err),
+ });
+ }
+ }
+
+ private async _removeRegistry(ev: Event): Promise {
+ const entry = (ev.currentTarget as any).entry;
+
+ try {
+ await removeHassioDockerRegistry(this.hass, entry.registry);
+ await this._loadRegistries();
+ } catch (err) {
+ showAlertDialog(this, {
+ title: "Failed to remove registry",
+ text: extractApiErrorMessage(err),
+ });
+ }
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ haStyleDialog,
+ css`
+ ha-dialog.button-left {
+ --justify-action-buttons: flex-start;
+ }
+ paper-icon-item {
+ cursor: pointer;
+ }
+ .form {
+ color: var(--primary-text-color);
+ }
+ .option {
+ border: 1px solid var(--divider-color);
+ border-radius: 4px;
+ margin-top: 4px;
+ }
+ mwc-button {
+ margin-left: 8px;
+ }
+ mwc-icon-button {
+ color: var(--error-color);
+ margin: -10px;
+ }
+ mwc-list-item {
+ cursor: default;
+ }
+ mwc-list-item span[slot="secondary"] {
+ color: var(--secondary-text-color);
+ }
+ ha-paper-dropdown-menu {
+ display: block;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "dialog-hassio-registries": HassioRegistriesDialog;
+ }
+}
diff --git a/hassio/src/dialogs/registries/show-dialog-registries.ts b/hassio/src/dialogs/registries/show-dialog-registries.ts
new file mode 100644
index 0000000000..a9e871d17e
--- /dev/null
+++ b/hassio/src/dialogs/registries/show-dialog-registries.ts
@@ -0,0 +1,13 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-registries";
+
+export const showRegistriesDialog = (element: HTMLElement): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "dialog-hassio-registries",
+ dialogImport: () =>
+ import(
+ /* webpackChunkName: "dialog-hassio-registries" */ "./dialog-hassio-registries"
+ ),
+ dialogParams: {},
+ });
+};
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 150fc2b181..2d8d028cdf 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -39,7 +39,7 @@ class HassioRepositoriesDialog extends LitElement {
@property({ attribute: false })
private _dialogParams?: HassioRepositoryDialogParams;
- @query("#repository_input") private _optionInput?: PaperInputElement;
+ @query("#repository_input", true) private _optionInput?: PaperInputElement;
@internalProperty() private _opened = false;
@@ -91,7 +91,7 @@ class HassioRepositoriesDialog extends LitElement {
title="Remove"
@click=${this._removeRepository}
>
- {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _params?: HassioSnapshotUploadDialogParams;
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
index 790ebc467c..d3524bc4ed 100755
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -1,6 +1,7 @@
import "@material/mwc-button";
import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
import "@polymer/paper-input/paper-input";
import {
css,
@@ -196,7 +197,7 @@ class HassioSnapshotDialog extends LitElement {
@click=${this._downloadClicked}
slot="primaryAction"
>
-
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index 8f040c906b..96dd6caecf 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -117,7 +117,7 @@ class HassioSnapshots extends LitElement {
@action=${this._handleAction}
>
+ ${this._addingRegistry
+ ? html`
+
+ Add registry
+
+ `
+ : html`${this._registries?.length
+ ? this._registries.map((entry) => {
+ return html`
+
+ ${entry.registry}
+ Username: ${entry.username}
+
+
+
+ `;
+ })
+ : html`
+
+ No registries configured
+
+ `}
+
+ Add new registry
+ `}
+
+ ${this._addon.name}
- Create snapshot + Create Snapshot
Snapshots allow you to easily backup and restore all data of your @@ -219,7 +219,7 @@ class HassioSnapshots extends LitElement {
Available snapshots
+Available Snapshots
${this._snapshots === undefined
? undefined
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index 94400402ae..5a2c5776bc 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -87,7 +87,7 @@ class HassioHostInfo extends LitElement {
${this.hostInfo.features.includes("network")
? html`
- IP address
+ IP Address
${primaryIpAddress}
@@ -103,13 +103,13 @@ class HassioHostInfo extends LitElement {
- Operating system
+ Operating System
${this.hostInfo.operating_system}
- ${this.hostInfo.version !== this.hostInfo.version_latest &&
- this.hostInfo.features.includes("hassos")
+ ${this.hostInfo.features.includes("hassos") &&
+ this.hassOsInfo.update_available
? html`
{
const curHostname: string = this.hostInfo.hostname;
const hostname = await showPromptDialog(this, {
- title: "Change hostname",
+ title: "Change Hostname",
inputLabel: "Please enter a new hostname:",
inputType: "string",
defaultValue: curHostname,
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index fcec51d607..9a1fa07f5f 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -7,18 +7,21 @@ import {
property,
TemplateResult,
} from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
import "../../../src/components/buttons/ha-progress-button";
import "../../../src/components/ha-card";
import "../../../src/components/ha-settings-row";
import "../../../src/components/ha-switch";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host";
+import { fetchHassioResolution } from "../../../src/data/hassio/resolution";
import {
+ fetchHassioSupervisorInfo,
HassioSupervisorInfo as HassioSupervisorInfoType,
reloadSupervisor,
setSupervisorOption,
SupervisorOptions,
updateSupervisor,
- fetchHassioSupervisorInfo,
} from "../../../src/data/hassio/supervisor";
import {
showAlertDialog,
@@ -26,14 +29,42 @@ import {
} from "../../../src/dialogs/generic/show-dialog-box";
import { haStyle } from "../../../src/resources/styles";
import { HomeAssistant } from "../../../src/types";
+import { documentationUrl } from "../../../src/util/documentation-url";
import { hassioStyle } from "../resources/hassio-style";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+
+const ISSUES = {
+ container: {
+ title: "Containers known to cause issues",
+ url: "/more-info/unsupported/container",
+ },
+ dbus: { title: "DBUS", url: "/more-info/unsupported/dbus" },
+ docker_configuration: {
+ title: "Docker Configuration",
+ url: "/more-info/unsupported/docker_configuration",
+ },
+ docker_version: {
+ title: "Docker Version",
+ url: "/more-info/unsupported/docker_version",
+ },
+ lxc: { title: "LXC", url: "/more-info/unsupported/lxc" },
+ network_manager: {
+ title: "Network Manager",
+ url: "/more-info/unsupported/network_manager",
+ },
+ os: { title: "Operating System", url: "/more-info/unsupported/os" },
+ privileged: {
+ title: "Supervisor is not privileged",
+ url: "/more-info/unsupported/privileged",
+ },
+ systemd: { title: "Systemd", url: "/more-info/unsupported/systemd" },
+};
@customElement("hassio-supervisor-info")
class HassioSupervisorInfo extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property() public supervisorInfo!: HassioSupervisorInfoType;
+ @property({ attribute: false })
+ public supervisorInfo!: HassioSupervisorInfoType;
@property() public hostInfo!: HassioHostInfoType;
@@ -51,12 +82,12 @@ class HassioSupervisorInfo extends LitElement {
- Newest version
+ Newest Version
${this.supervisorInfo.version_latest}
- ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+ ${this.supervisorInfo.update_available
? html`
- Share diagnostics
+ Share Diagnostics
Reload
@@ -181,7 +207,7 @@ class HassioSupervisorInfo extends LitElement {
};
await setSupervisorOption(this.hass, data);
await reloadSupervisor(this.hass);
- this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+ fireEvent(this, "hass-api-called", { success: true, response: null });
} catch (err) {
showAlertDialog(this, {
title: "Failed to set supervisor option",
@@ -212,7 +238,7 @@ class HassioSupervisorInfo extends LitElement {
button.progress = true;
const confirmed = await showConfirmationDialog(this, {
- title: "Update supervisor",
+ title: "Update Supervisor",
text: `Are you sure you want to update supervisor to version ${this.supervisorInfo.version_latest}?`,
confirmText: "update",
dismissText: "cancel",
@@ -249,6 +275,32 @@ class HassioSupervisorInfo extends LitElement {
});
}
+ private async _unsupportedDialog(): Promise {
+ const resolution = await fetchHassioResolution(this.hass);
+ await showAlertDialog(this, {
+ title: "You are running an unsupported installation",
+ text: html`Below is a list of issues found with your installation, click
+ on the links to learn how you can resolve the issues.
+ {
try {
const data: SupervisorOptions = {
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 88528eb431..2e1e2162aa 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -76,7 +76,7 @@ class HassioSupervisorLog extends LitElement {
${this.hass.userData?.showAdvanced
? html`
+
@@ -77,13 +88,17 @@ class HassioSystemMetrics extends LitElement {
this._loadData();
}
- private _renderMetric(description: string, value: number): TemplateResult {
+ private _renderMetric(
+ description: string,
+ value: number,
+ tooltip?: string
+ ): TemplateResult {
const roundedValue = roundWithOneDecimal(value);
return html`
${description}
- ${this.hass.localize(
"ui.panel.config.filtering.clear"
@@ -453,6 +502,31 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
>
`
: ""}
+ ${this._numHiddenEntities && !activeFilters
+ ? html`
-
;
+
+ @internalProperty() private _name!: string;
+
+ @internalProperty() private _icon!: string;
+
+ @internalProperty() private _maximum?: number;
+
+ @internalProperty() private _minimum?: number;
+
+ @internalProperty() private _restore?: boolean;
+
+ @internalProperty() private _initial?: number;
+
+ @internalProperty() private _step?: number;
+
+ set item(item: Counter) {
+ this._item = item;
+ if (item) {
+ this._name = item.name || "";
+ this._icon = item.icon || "";
+ this._maximum = item.maximum;
+ this._minimum = item.minimum;
+ this._restore = item.restore ?? true;
+ this._step = item.step ?? 1;
+ this._initial = item.initial ?? 0;
+ } else {
+ this._name = "";
+ this._icon = "";
+ this._maximum = undefined;
+ this._minimum = undefined;
+ this._restore = true;
+ this._step = 1;
+ this._initial = 0;
+ }
+ }
+
+ public focus() {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+ const nameInvalid = !this._name || this._name.trim() === "";
+
+ return html`
+
+
+
+
`;
@@ -104,6 +127,32 @@ class SystemHealthCard extends LitElement {
}
}
+ private _copyInfo(): void {
+ const copyElement = this.shadowRoot?.querySelector(
+ ".card-content"
+ ) as HTMLElement;
+
+ // Add temporary heading (fixed in EN since usually executed to provide support data)
+ const tempTitle = document.createElement("h3");
+ tempTitle.innerText = "System Health";
+ copyElement.insertBefore(tempTitle, copyElement.firstElementChild);
+
+ const selection = window.getSelection()!;
+ selection.removeAllRanges();
+ const range = document.createRange();
+ range.selectNodeContents(copyElement);
+ selection.addRange(range);
+
+ document.execCommand("copy");
+ window.getSelection()!.removeAllRanges();
+
+ // Remove temporary heading again
+ copyElement.removeChild(tempTitle);
+
+ this._toolTip!.show();
+ setTimeout(() => this._toolTip?.hide(), 3000);
+ }
+
static get styles(): CSSResult {
return css`
table {
@@ -119,6 +168,11 @@ class SystemHealthCard extends LitElement {
align-items: center;
justify-content: center;
}
+
+ .card-header {
+ justify-content: space-between;
+ display: flex;
+ }
`;
}
}
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 99d7f6b266..915cd4920e 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -23,7 +23,6 @@ import "../../../common/search/search-input";
import { caseInsensitiveCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import { nextRender } from "../../../common/util/render-status";
-import "../../../components/entity/ha-state-icon";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-svg-icon";
@@ -287,7 +286,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
.label=${this.hass.localize("ui.common.overflow_menu")}
slot="trigger"
>
-
${this.hass.localize(
@@ -480,7 +479,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
title=${this.hass.localize("ui.panel.config.integrations.new")}
@click=${this._createFlow}
>
-
${this.hass.localize(
@@ -475,7 +475,7 @@ export class HaIntegrationCard extends LitElement {
align-items: center;
height: 40px;
padding: 16px 16px 8px 16px;
- vertical-align: middle;
+ justify-content: center;
}
.group-header h1 {
margin: 0;
@@ -495,7 +495,6 @@ export class HaIntegrationCard extends LitElement {
max-height: 100%;
max-width: 90%;
}
-
.none-found {
margin: auto;
text-align: center;
@@ -507,9 +506,16 @@ export class HaIntegrationCard extends LitElement {
margin-bottom: 0;
}
h2 {
- margin-top: 0;
min-height: 24px;
}
+ h3 {
+ word-wrap: break-word;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 3;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
ha-button-menu {
color: var(--secondary-text-color);
--mdc-menu-min-width: 200px;
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
index 013f2b794b..fccaa04a7f 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
@@ -129,6 +129,7 @@ class OZWNetworkDashboard extends LitElement {
`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
index f492cf579f..bd796519a4 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
@@ -117,6 +117,7 @@ class OZWNetworkNodes extends LitElement {
.data=${this._nodes}
id="node_id"
@row-click=${this._handleRowClicked}
+ clickable
>
`;
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
new file mode 100644
index 0000000000..b1017aaaa8
--- /dev/null
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@@ -0,0 +1,274 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-fab";
+import {
+ css,
+ CSSResultArray,
+ customElement,
+ html,
+ LitElement,
+ internalProperty,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { navigate } from "../../../../../common/navigate";
+import "../../../../../components/buttons/ha-call-service-button";
+import "../../../../../components/ha-card";
+import "../../../../../components/ha-icon-next";
+import "../../../../../layouts/hass-tabs-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
+import {
+ fetchOZWNodeStatus,
+ fetchOZWNodeMetadata,
+ fetchOZWNodeConfig,
+ OZWDevice,
+ OZWDeviceMetaDataResponse,
+ OZWDeviceConfig,
+} from "../../../../../data/ozw";
+import { ERR_NOT_FOUND } from "../../../../../data/websocket_api";
+import { showOZWRefreshNodeDialog } from "./show-dialog-ozw-refresh-node";
+import { ozwNodeTabs } from "./ozw-node-router";
+
+@customElement("ozw-node-config")
+class OZWNodeConfig extends LitElement {
+ @property({ type: Object }) public hass!: HomeAssistant;
+
+ @property({ type: Object }) public route!: Route;
+
+ @property({ type: Boolean }) public narrow!: boolean;
+
+ @property({ type: Boolean }) public isWide!: boolean;
+
+ @property() public configEntryId?: string;
+
+ @property() public ozwInstance?;
+
+ @property() public nodeId?;
+
+ @internalProperty() private _node?: OZWDevice;
+
+ @internalProperty() private _metadata?: OZWDeviceMetaDataResponse;
+
+ @internalProperty() private _config?: OZWDeviceConfig[];
+
+ @internalProperty() private _error?: string;
+
+ protected firstUpdated() {
+ if (!this.ozwInstance) {
+ navigate(this, "/config/ozw/dashboard", true);
+ } else if (!this.nodeId) {
+ navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+ } else {
+ this._fetchData();
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (this._error) {
+ return html`
+
+
+
+
+
+ ${this._metadata?.metadata.WakeupHelp
+ ? html`
+
+
+ `
+ : ``}
+ ${this._config
+ ? html`
+ ${this._config.map(
+ (item) => html`
+
+
+ `
+ )}
+ `
+ : ``}
+ `
+ : ``}
+
+
+ `;
+ }
+
+ private async _fetchData() {
+ if (!this.ozwInstance || !this.nodeId) {
+ return;
+ }
+
+ try {
+ const nodeProm = fetchOZWNodeStatus(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ const metadataProm = fetchOZWNodeMetadata(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ const configProm = fetchOZWNodeConfig(
+ this.hass!,
+ this.ozwInstance,
+ this.nodeId
+ );
+ [this._node, this._metadata, this._config] = await Promise.all([
+ nodeProm,
+ metadataProm,
+ configProm,
+ ]);
+ } catch (err) {
+ if (err.code === ERR_NOT_FOUND) {
+ this._error = ERR_NOT_FOUND;
+ return;
+ }
+ throw err;
+ }
+ }
+
+ private async _refreshNodeClicked() {
+ showOZWRefreshNodeDialog(this, {
+ node_id: this.nodeId,
+ ozw_instance: this.ozwInstance,
+ });
+ }
+
+ static get styles(): CSSResultArray {
+ return [
+ haStyle,
+ css`
+ .secondary {
+ color: var(--secondary-text-color);
+ font-size: 0.9em;
+ }
+
+ .content {
+ margin-top: 24px;
+ }
+
+ .sectionHeader {
+ position: relative;
+ padding-right: 40px;
+ }
+
+ ha-card {
+ margin: 0 auto;
+ max-width: 600px;
+ }
+
+ [hidden] {
+ display: none;
+ }
+
+ blockquote {
+ display: block;
+ background-color: #ddd;
+ padding: 8px;
+ margin: 8px 0;
+ font-size: 0.9em;
+ }
+
+ blockquote em {
+ font-size: 0.9em;
+ margin-top: 6px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ozw-node-config": OZWNodeConfig;
+ }
+}
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
index bd2fa6af3e..c860027551 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
@@ -26,7 +26,7 @@ import {
} from "../../../../../data/ozw";
import { ERR_NOT_FOUND } from "../../../../../data/websocket_api";
import { showOZWRefreshNodeDialog } from "./show-dialog-ozw-refresh-node";
-import { ozwNetworkTabs } from "./ozw-network-router";
+import { ozwNodeTabs } from "./ozw-node-router";
@customElement("ozw-node-dashboard")
class OZWNodeDashboard extends LitElement {
@@ -74,7 +74,7 @@ class OZWNodeDashboard extends LitElement {
.hass=${this.hass}
.narrow=${this.narrow}
.route=${this.route}
- .tabs=${ozwNetworkTabs(this.ozwInstance)}
+ .tabs=${ozwNodeTabs(this.ozwInstance, this.nodeId)}
>
${this._params.entry
? html`
@@ -191,6 +228,33 @@ class DialogTagDetail extends LitElement implements HassDialog {
}
}
+ private async _generateQR() {
+ const qrcode = await import("qrcode");
+ const canvas = await qrcode.toCanvas(
+ `https://home-assistant.io/tag/${this._params?.entry?.id}`,
+ {
+ width: 180,
+ errorCorrectionLevel: "Q",
+ }
+ );
+ const context = canvas.getContext("2d");
+
+ const imageObj = new Image();
+ imageObj.src = QR_LOGO_URL;
+ await new Promise((resolve) => {
+ imageObj.onload = resolve;
+ });
+ context.drawImage(
+ imageObj,
+ canvas.width / 3,
+ canvas.height / 3,
+ canvas.width / 3,
+ canvas.height / 3
+ );
+
+ this._qrCode = html`
Share crash reports and diagnostic information.
@@ -118,24 +149,19 @@ class HassioSupervisorInfo extends LitElement {
`
: html`
You are running an unsupported installation.
-
- Learn More
-
+ Learn more
+
`}
+
-
+ ${resolution.unsupported.map(
+ (issue) => html`
+
- + ${ISSUES[issue] + ? html` + ${ISSUES[issue].title} + ` + : issue} + + ` + )} +
${metrics.map((metric) =>
- this._renderMetric(metric.description, metric.value ?? 0)
+ this._renderMetric(
+ metric.description,
+ metric.value ?? 0,
+ metric.tooltip
+ )
)}
+
`
: `${this.hass.localize(
"ui.panel.config.filtering.filtering_by"
- )} ${activeFilters.join(", ")}`}
+ )} ${activeFilters.join(", ")}
+ ${
+ this._numHiddenEntities
+ ? "(" +
+ this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ ) +
+ ")"
+ : ""
+ }
+ `}
${roundedValue}%
@@ -155,6 +170,7 @@ class HassioSystemMetrics extends LitElement {
}
.value {
width: 42px;
+ padding-right: 4px;
}
`,
];
diff --git a/package.json b/package.json
index e1e98eeb01..df64438afc 100644
--- a/package.json
+++ b/package.json
@@ -22,28 +22,29 @@
"author": "Paulus Schoutsen (http://paulusschoutsen.nl)",
"license": "Apache-2.0",
"dependencies": {
- "@formatjs/intl-pluralrules": "^1.5.8",
+ "@formatjs/intl-getcanonicallocales": "^1.4.6",
+ "@formatjs/intl-pluralrules": "^3.4.10",
"@fullcalendar/common": "5.1.0",
"@fullcalendar/core": "5.1.0",
"@fullcalendar/daygrid": "5.1.0",
"@fullcalendar/interaction": "5.1.0",
"@fullcalendar/list": "5.1.0",
- "@material/chips": "=8.0.0-canary.096a7a066.0",
- "@material/circular-progress": "=8.0.0-canary.a78ceb112.0",
- "@material/mwc-button": "^0.18.0",
- "@material/mwc-checkbox": "^0.18.0",
- "@material/mwc-dialog": "^0.18.0",
- "@material/mwc-fab": "^0.18.0",
- "@material/mwc-formfield": "^0.18.0",
- "@material/mwc-icon-button": "^0.18.0",
- "@material/mwc-list": "^0.18.0",
- "@material/mwc-menu": "^0.18.0",
- "@material/mwc-radio": "^0.18.0",
- "@material/mwc-ripple": "^0.18.0",
- "@material/mwc-switch": "^0.18.0",
- "@material/mwc-tab": "^0.18.0",
- "@material/mwc-tab-bar": "^0.18.0",
- "@material/top-app-bar": "=8.0.0-canary.096a7a066.0",
+ "@material/chips": "=8.0.0-canary.774dcfc8e.0",
+ "@material/mwc-button": "^0.19.0",
+ "@material/mwc-checkbox": "^0.19.0",
+ "@material/mwc-circular-progress": "^0.19.0",
+ "@material/mwc-dialog": "^0.19.0",
+ "@material/mwc-fab": "^0.19.0",
+ "@material/mwc-formfield": "^0.19.0",
+ "@material/mwc-icon-button": "^0.19.0",
+ "@material/mwc-list": "^0.19.0",
+ "@material/mwc-menu": "^0.19.0",
+ "@material/mwc-radio": "^0.19.0",
+ "@material/mwc-ripple": "^0.19.0",
+ "@material/mwc-switch": "^0.19.0",
+ "@material/mwc-tab": "^0.19.0",
+ "@material/mwc-tab-bar": "^0.19.0",
+ "@material/top-app-bar": "=8.0.0-canary.774dcfc8e.0",
"@mdi/js": "5.6.55",
"@mdi/svg": "5.6.55",
"@polymer/app-layout": "^3.0.2",
@@ -77,7 +78,7 @@
"@polymer/paper-toast": "^3.0.1",
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.1.0",
- "@thomasloven/round-slider": "0.5.0",
+ "@thomasloven/round-slider": "0.5.2",
"@types/chromecast-caf-sender": "^1.0.3",
"@types/sortablejs": "^1.10.6",
"@vaadin/vaadin-combo-box": "^5.0.10",
@@ -88,11 +89,11 @@
"chartjs-chart-timeline": "^0.3.0",
"codemirror": "^5.49.0",
"comlink": "^4.3.0",
+ "core-js": "^3.6.5",
"cpx": "^1.5.0",
"cropperjs": "^1.5.7",
"deep-clone-simple": "^1.1.1",
"deep-freeze": "^0.0.1",
- "es6-object-assign": "^1.1.0",
"fecha": "^4.2.0",
"fuse.js": "^6.0.0",
"google-timezones-json": "^1.0.2",
@@ -103,21 +104,23 @@
"js-yaml": "^3.13.1",
"leaflet": "^1.4.0",
"leaflet-draw": "^1.0.4",
- "lit-element": "^2.3.1",
+ "lit-element": "^2.4.0",
"lit-grid-layout": "^1.1.10",
- "lit-html": "^1.2.1",
+ "lit-html": "^1.3.0",
"lit-virtualizer": "^0.4.2",
"marked": "^1.1.1",
"mdn-polyfills": "^5.16.0",
"memoize-one": "^5.0.2",
- "node-vibrant": "^3.1.5",
+ "node-vibrant": "^3.1.6",
"proxy-polyfill": "^0.3.1",
"punycode": "^2.1.1",
+ "qrcode": "^1.4.4",
"regenerator-runtime": "^0.13.2",
"resize-observer-polyfill": "^1.5.1",
"roboto-fontface": "^0.10.0",
"sortablejs": "^1.10.2",
"superstruct": "^0.10.12",
+ "tinykeys": "^1.1.1",
"unfetch": "^4.1.0",
"uuid": "^8.3.0",
"vue": "^2.6.11",
@@ -130,16 +133,17 @@
"xss": "^1.0.6"
},
"devDependencies": {
- "@babel/core": "^7.9.0",
- "@babel/plugin-external-helpers": "^7.8.3",
- "@babel/plugin-proposal-class-properties": "^7.8.3",
- "@babel/plugin-proposal-decorators": "^7.8.3",
- "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
- "@babel/plugin-proposal-object-rest-spread": "^7.9.5",
- "@babel/plugin-proposal-optional-chaining": "^7.9.0",
+ "@babel/core": "^7.11.6",
+ "@babel/plugin-external-helpers": "^7.10.4",
+ "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/plugin-proposal-decorators": "^7.10.5",
+ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+ "@babel/plugin-proposal-object-rest-spread": "^7.11.0",
+ "@babel/plugin-proposal-optional-chaining": "^7.11.0",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
- "@babel/preset-env": "^7.9.5",
- "@babel/preset-typescript": "^7.9.0",
+ "@babel/plugin-syntax-import-meta": "^7.10.4",
+ "@babel/preset-env": "^7.11.5",
+ "@babel/preset-typescript": "^7.10.4",
"@rollup/plugin-commonjs": "^11.1.0",
"@rollup/plugin-json": "^4.0.3",
"@rollup/plugin-node-resolve": "^7.1.3",
@@ -156,8 +160,8 @@
"@types/mocha": "^7.0.2",
"@types/resize-observer-browser": "^0.1.3",
"@types/webspeechapi": "^0.0.29",
- "@typescript-eslint/eslint-plugin": "^2.28.0",
- "@typescript-eslint/parser": "^2.28.0",
+ "@typescript-eslint/eslint-plugin": "^4.4.0",
+ "@typescript-eslint/parser": "^4.4.0",
"babel-loader": "^8.1.0",
"chai": "^4.2.0",
"del": "^4.0.0",
@@ -175,14 +179,13 @@
"gulp": "^4.0.0",
"gulp-foreach": "^0.1.0",
"gulp-json-transform": "^0.4.6",
- "gulp-jsonminify": "^1.1.0",
"gulp-merge-json": "^1.3.1",
"gulp-rename": "^2.0.0",
"gulp-zopfli-green": "^3.0.1",
"html-minifier": "^4.0.0",
"husky": "^1.3.1",
"lint-staged": "^8.1.5",
- "lit-analyzer": "^1.2.0",
+ "lit-analyzer": "^1.2.1",
"lodash.template": "^4.5.0",
"magic-string": "^0.25.7",
"map-stream": "^0.0.7",
@@ -202,30 +205,25 @@
"sinon": "^7.3.1",
"source-map-url": "^0.4.0",
"systemjs": "^6.3.2",
- "terser-webpack-plugin": "^3.0.6",
- "ts-lit-plugin": "^1.2.0",
+ "terser-webpack-plugin": "^5.0.0",
+ "ts-lit-plugin": "^1.2.1",
"ts-mocha": "^7.0.0",
- "typescript": "^3.8.3",
+ "typescript": "^4.0.3",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0",
- "webpack": "^4.40.2",
- "webpack-cli": "^3.3.9",
- "webpack-dev-server": "^3.10.3",
- "webpack-manifest-plugin": "^2.0.4",
- "workbox-build": "^5.1.3",
- "worker-plugin": "^4.0.3"
+ "webpack": "5.1.3",
+ "webpack-cli": "4.1.0",
+ "webpack-dev-server": "^3.11.0",
+ "webpack-manifest-plugin": "3.0.0-rc.0",
+ "workbox-build": "^5.1.3"
},
"_comment": "Polymer fixed to 3.1 because 3.2 throws on logbook page",
"_comment_2": "Fix in https://github.com/Polymer/polymer/pull/5569",
"resolutions": {
"@webcomponents/webcomponentsjs": "^2.2.10",
"@polymer/polymer": "3.1.0",
- "lit-html": "1.2.1",
- "lit-element": "2.3.1",
- "@material/animation": "8.0.0-canary.096a7a066.0",
- "@material/base": "8.0.0-canary.096a7a066.0",
- "@material/feature-targeting": "8.0.0-canary.096a7a066.0",
- "@material/theme": "8.0.0-canary.096a7a066.0"
+ "lit-html": "1.3.0",
+ "lit-element": "2.4.0"
},
"main": "src/home-assistant.js",
"husky": {
diff --git a/setup.py b/setup.py
index df64322812..af4d870361 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
- version="20200930.0",
+ version="20201021.1",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors",
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 4ad4b3330b..a4234c56ca 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -200,7 +200,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
private _redirect(authCode: string) {
// OAuth 2: 3.1.2 we need to retain query component of a redirect URI
- let url = this.redirectUri!!;
+ let url = this.redirectUri!;
if (!url.includes("?")) {
url += "?";
} else if (!url.endsWith("&")) {
diff --git a/src/common/color/convert-color.ts b/src/common/color/convert-color.ts
index f48e6184a0..29f95b4283 100644
--- a/src/common/color/convert-color.ts
+++ b/src/common/color/convert-color.ts
@@ -1,10 +1,4 @@
-const expand_hex = (hex: string): string => {
- let result = "";
- for (const val of hex) {
- result += val + val;
- }
- return result;
-};
+import { expandHex } from "./hex";
const rgb_hex = (component: number): string => {
const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
@@ -14,10 +8,7 @@ const rgb_hex = (component: number): string => {
// Conversion between HEX and RGB
export const hex2rgb = (hex: string): [number, number, number] => {
- hex = hex.replace("#", "");
- if (hex.length === 3 || hex.length === 4) {
- hex = expand_hex(hex);
- }
+ hex = expandHex(hex);
return [
parseInt(hex.substring(0, 2), 16),
diff --git a/src/common/color/hex.ts b/src/common/color/hex.ts
new file mode 100644
index 0000000000..a25b6d6442
--- /dev/null
+++ b/src/common/color/hex.ts
@@ -0,0 +1,24 @@
+export const expandHex = (hex: string): string => {
+ hex = hex.replace("#", "");
+ if (hex.length === 6) return hex;
+ let result = "";
+ for (const val of hex) {
+ result += val + val;
+ }
+ return result;
+};
+
+// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
+export const hexBlend = (c1: string, c2: string, blend = 50): string => {
+ let color = "";
+ c1 = expandHex(c1);
+ c2 = expandHex(c2);
+ for (let i = 0; i <= 5; i += 2) {
+ const h1 = parseInt(c1.substr(i, 2), 16);
+ const h2 = parseInt(c2.substr(i, 2), 16);
+ let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
+ while (hex.length < 2) hex = "0" + hex;
+ color += hex;
+ }
+ return `#${color}`;
+};
diff --git a/src/common/datetime/relative_time.ts b/src/common/datetime/relative_time.ts
index c2a761394b..ef3b8b50c7 100644
--- a/src/common/datetime/relative_time.ts
+++ b/src/common/datetime/relative_time.ts
@@ -38,13 +38,11 @@ export default function relativeTime(
roundedDelta = Math.round(delta);
}
- const timeDesc = localize(
- `ui.components.relative_time.duration.${unit}`,
+ return localize(
+ options.includeTense === false
+ ? `ui.components.relative_time.duration.${unit}`
+ : `ui.components.relative_time.${tense}_duration.${unit}`,
"count",
roundedDelta
);
-
- return options.includeTense === false
- ? timeDesc
- : localize(`ui.components.relative_time.${tense}`, "time", timeDesc);
}
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index 902a1a196a..4e1aeb9ec6 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -7,6 +7,7 @@ import {
rgb2hex,
rgb2lab,
} from "../color/convert-color";
+import { hexBlend } from "../color/hex";
import { labBrighten, labDarken } from "../color/lab";
import { rgbContrast } from "../color/rgb";
@@ -37,6 +38,13 @@ export const applyThemesOnElement = (
if (themeOptions.dark) {
cacheKey = `${cacheKey}__dark`;
themeRules = darkStyles;
+ if (themeOptions.primaryColor) {
+ themeRules["app-header-background-color"] = hexBlend(
+ themeOptions.primaryColor,
+ "#121212",
+ 8
+ );
+ }
}
if (themeOptions.primaryColor) {
cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
diff --git a/src/common/dom/dynamic-element-directive.ts b/src/common/dom/dynamic-element-directive.ts
index 8f05f437ef..fe863e48b8 100644
--- a/src/common/dom/dynamic-element-directive.ts
+++ b/src/common/dom/dynamic-element-directive.ts
@@ -10,10 +10,7 @@ export const dynamicElement = directive(
let element = part.value as HTMLElement | undefined;
- if (
- element !== undefined &&
- tag.toUpperCase() === (element as HTMLElement).tagName
- ) {
+ if (tag === element?.localName) {
if (properties) {
Object.entries(properties).forEach(([key, value]) => {
element![key] = value;
diff --git a/src/common/entity/binary_sensor_icon.ts b/src/common/entity/binary_sensor_icon.ts
index 03c3abaaab..1ae025a2df 100644
--- a/src/common/entity/binary_sensor_icon.ts
+++ b/src/common/entity/binary_sensor_icon.ts
@@ -18,12 +18,12 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
case "garage_door":
return is_off ? "hass:garage" : "hass:garage-open";
case "power":
- return is_off ? "hass:power-off" : "hass:power-on";
+ return is_off ? "hass:power-plug-off" : "hass:power-plug";
case "gas":
case "problem":
case "safety":
case "smoke":
- return is_off ? "hass:shield-check" : "hass:alert";
+ return is_off ? "hass:check-circle" : "hass:alert-circle";
case "heat":
return is_off ? "hass:thermometer" : "hass:fire";
case "light":
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 2a437901ea..d588cd1688 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -5,6 +5,7 @@ import { formatDateTime } from "../datetime/format_date_time";
import { formatTime } from "../datetime/format_time";
import { LocalizeFunc } from "../translations/localize";
import { computeStateDomain } from "./compute_state_domain";
+import { numberFormat } from "../string/number-format";
export const computeStateDisplay = (
localize: LocalizeFunc,
@@ -19,7 +20,9 @@ export const computeStateDisplay = (
}
if (stateObj.attributes.unit_of_measurement) {
- return `${compareState} ${stateObj.attributes.unit_of_measurement}`;
+ return `${numberFormat(compareState, language)} ${
+ stateObj.attributes.unit_of_measurement
+ }`;
}
const domain = computeStateDomain(stateObj);
diff --git a/src/common/entity/cover_icon.ts b/src/common/entity/cover_icon.ts
index 5723ee2d34..7c9bc5ed53 100644
--- a/src/common/entity/cover_icon.ts
+++ b/src/common/entity/cover_icon.ts
@@ -43,6 +43,7 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
}
case "blind":
case "curtain":
+ case "shade":
switch (state) {
case "opening":
return "hass:arrow-up-box";
diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index 1d52dbcde6..97a52b1864 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -51,21 +51,17 @@ class SearchInput extends LitElement {
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
-
+
${this.filter &&
html`
-
`}
diff --git a/src/common/string/filter/char-code.ts b/src/common/string/filter/char-code.ts
new file mode 100644
index 0000000000..faa7210898
--- /dev/null
+++ b/src/common/string/filter/char-code.ts
@@ -0,0 +1,244 @@
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
+
+/**
+ * An inlined enum containing useful character codes (to be used with String.charCodeAt).
+ * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
+ */
+export enum CharCode {
+ Null = 0,
+ /**
+ * The `\b` character.
+ */
+ Backspace = 8,
+ /**
+ * The `\t` character.
+ */
+ Tab = 9,
+ /**
+ * The `\n` character.
+ */
+ LineFeed = 10,
+ /**
+ * The `\r` character.
+ */
+ CarriageReturn = 13,
+ Space = 32,
+ /**
+ * The `!` character.
+ */
+ ExclamationMark = 33,
+ /**
+ * The `"` character.
+ */
+ DoubleQuote = 34,
+ /**
+ * The `#` character.
+ */
+ Hash = 35,
+ /**
+ * The `$` character.
+ */
+ DollarSign = 36,
+ /**
+ * The `%` character.
+ */
+ PercentSign = 37,
+ /**
+ * The `&` character.
+ */
+ Ampersand = 38,
+ /**
+ * The `'` character.
+ */
+ SingleQuote = 39,
+ /**
+ * The `(` character.
+ */
+ OpenParen = 40,
+ /**
+ * The `)` character.
+ */
+ CloseParen = 41,
+ /**
+ * The `*` character.
+ */
+ Asterisk = 42,
+ /**
+ * The `+` character.
+ */
+ Plus = 43,
+ /**
+ * The `,` character.
+ */
+ Comma = 44,
+ /**
+ * The `-` character.
+ */
+ Dash = 45,
+ /**
+ * The `.` character.
+ */
+ Period = 46,
+ /**
+ * The `/` character.
+ */
+ Slash = 47,
+
+ Digit0 = 48,
+ Digit1 = 49,
+ Digit2 = 50,
+ Digit3 = 51,
+ Digit4 = 52,
+ Digit5 = 53,
+ Digit6 = 54,
+ Digit7 = 55,
+ Digit8 = 56,
+ Digit9 = 57,
+
+ /**
+ * The `:` character.
+ */
+ Colon = 58,
+ /**
+ * The `;` character.
+ */
+ Semicolon = 59,
+ /**
+ * The `<` character.
+ */
+ LessThan = 60,
+ /**
+ * The `=` character.
+ */
+ Equals = 61,
+ /**
+ * The `>` character.
+ */
+ GreaterThan = 62,
+ /**
+ * The `?` character.
+ */
+ QuestionMark = 63,
+ /**
+ * The `@` character.
+ */
+ AtSign = 64,
+
+ A = 65,
+ B = 66,
+ C = 67,
+ D = 68,
+ E = 69,
+ F = 70,
+ G = 71,
+ H = 72,
+ I = 73,
+ J = 74,
+ K = 75,
+ L = 76,
+ M = 77,
+ N = 78,
+ O = 79,
+ P = 80,
+ Q = 81,
+ R = 82,
+ S = 83,
+ T = 84,
+ U = 85,
+ V = 86,
+ W = 87,
+ X = 88,
+ Y = 89,
+ Z = 90,
+
+ /**
+ * The `[` character.
+ */
+ OpenSquareBracket = 91,
+ /**
+ * The `\` character.
+ */
+ Backslash = 92,
+ /**
+ * The `]` character.
+ */
+ CloseSquareBracket = 93,
+ /**
+ * The `^` character.
+ */
+ Caret = 94,
+ /**
+ * The `_` character.
+ */
+ Underline = 95,
+ /**
+ * The ``(`)`` character.
+ */
+ BackTick = 96,
+
+ a = 97,
+ b = 98,
+ c = 99,
+ d = 100,
+ e = 101,
+ f = 102,
+ g = 103,
+ h = 104,
+ i = 105,
+ j = 106,
+ k = 107,
+ l = 108,
+ m = 109,
+ n = 110,
+ o = 111,
+ p = 112,
+ q = 113,
+ r = 114,
+ s = 115,
+ t = 116,
+ u = 117,
+ v = 118,
+ w = 119,
+ x = 120,
+ y = 121,
+ z = 122,
+
+ /**
+ * The `{` character.
+ */
+ OpenCurlyBrace = 123,
+ /**
+ * The `|` character.
+ */
+ Pipe = 124,
+ /**
+ * The `}` character.
+ */
+ CloseCurlyBrace = 125,
+ /**
+ * The `~` character.
+ */
+ Tilde = 126,
+}
diff --git a/src/common/string/filter/filter.ts b/src/common/string/filter/filter.ts
new file mode 100644
index 0000000000..d3471433ab
--- /dev/null
+++ b/src/common/string/filter/filter.ts
@@ -0,0 +1,463 @@
+/* eslint-disable no-console */
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { CharCode } from "./char-code";
+
+const _debug = false;
+
+export interface Match {
+ start: number;
+ end: number;
+}
+
+const _maxLen = 128;
+
+function initTable() {
+ const table: number[][] = [];
+ const row: number[] = [0];
+ for (let i = 1; i <= _maxLen; i++) {
+ row.push(-i);
+ }
+ for (let i = 0; i <= _maxLen; i++) {
+ const thisRow = row.slice(0);
+ thisRow[0] = -i;
+ table.push(thisRow);
+ }
+ return table;
+}
+
+function isSeparatorAtPos(value: string, index: number): boolean {
+ if (index < 0 || index >= value.length) {
+ return false;
+ }
+ const code = value.charCodeAt(index);
+ switch (code) {
+ case CharCode.Underline:
+ case CharCode.Dash:
+ case CharCode.Period:
+ case CharCode.Space:
+ case CharCode.Slash:
+ case CharCode.Backslash:
+ case CharCode.SingleQuote:
+ case CharCode.DoubleQuote:
+ case CharCode.Colon:
+ case CharCode.DollarSign:
+ return true;
+ default:
+ return false;
+ }
+}
+
+function isWhitespaceAtPos(value: string, index: number): boolean {
+ if (index < 0 || index >= value.length) {
+ return false;
+ }
+ const code = value.charCodeAt(index);
+ switch (code) {
+ case CharCode.Space:
+ case CharCode.Tab:
+ return true;
+ default:
+ return false;
+ }
+}
+
+function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
+ return word[pos] !== wordLow[pos];
+}
+
+function isPatternInWord(
+ patternLow: string,
+ patternPos: number,
+ patternLen: number,
+ wordLow: string,
+ wordPos: number,
+ wordLen: number
+): boolean {
+ while (patternPos < patternLen && wordPos < wordLen) {
+ if (patternLow[patternPos] === wordLow[wordPos]) {
+ patternPos += 1;
+ }
+ wordPos += 1;
+ }
+ return patternPos === patternLen; // pattern must be exhausted
+}
+
+enum Arrow {
+ Top = 0b1,
+ Diag = 0b10,
+ Left = 0b100,
+}
+
+/**
+ * A tuple of three values.
+ * 0. the score
+ * 1. the matches encoded as bitmask (2^53)
+ * 2. the offset at which matching started
+ */
+export type FuzzyScore = [number, number, number];
+
+interface FilterGlobals {
+ _matchesCount: number;
+ _topMatch2: number;
+ _topScore: number;
+ _wordStart: number;
+ _firstMatchCanBeWeak: boolean;
+ _table: number[][];
+ _scores: number[][];
+ _arrows: Arrow[][];
+}
+
+function initGlobals(): FilterGlobals {
+ return {
+ _matchesCount: 0,
+ _topMatch2: 0,
+ _topScore: 0,
+ _wordStart: 0,
+ _firstMatchCanBeWeak: false,
+ _table: initTable(),
+ _scores: initTable(),
+ _arrows: initTable(),
+ };
+}
+
+export function fuzzyScore(
+ pattern: string,
+ patternLow: string,
+ patternStart: number,
+ word: string,
+ wordLow: string,
+ wordStart: number,
+ firstMatchCanBeWeak: boolean
+): FuzzyScore | undefined {
+ const globals = initGlobals();
+ const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
+ const wordLen = word.length > _maxLen ? _maxLen : word.length;
+
+ if (
+ patternStart >= patternLen ||
+ wordStart >= wordLen ||
+ patternLen - patternStart > wordLen - wordStart
+ ) {
+ return undefined;
+ }
+
+ // Run a simple check if the characters of pattern occur
+ // (in order) at all in word. If that isn't the case we
+ // stop because no match will be possible
+ if (
+ !isPatternInWord(
+ patternLow,
+ patternStart,
+ patternLen,
+ wordLow,
+ wordStart,
+ wordLen
+ )
+ ) {
+ return undefined;
+ }
+
+ let row = 1;
+ let column = 1;
+ let patternPos = patternStart;
+ let wordPos = wordStart;
+
+ let hasStrongFirstMatch = false;
+
+ // There will be a match, fill in tables
+ for (
+ row = 1, patternPos = patternStart;
+ patternPos < patternLen;
+ row++, patternPos++
+ ) {
+ for (
+ column = 1, wordPos = wordStart;
+ wordPos < wordLen;
+ column++, wordPos++
+ ) {
+ const score = _doScore(
+ pattern,
+ patternLow,
+ patternPos,
+ patternStart,
+ word,
+ wordLow,
+ wordPos
+ );
+
+ if (patternPos === patternStart && score > 1) {
+ hasStrongFirstMatch = true;
+ }
+
+ globals._scores[row][column] = score;
+
+ const diag =
+ globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
+ const top = globals._table[row - 1][column] + -1;
+ const left = globals._table[row][column - 1] + -1;
+
+ if (left >= top) {
+ // left or diag
+ if (left > diag) {
+ globals._table[row][column] = left;
+ globals._arrows[row][column] = Arrow.Left;
+ } else if (left === diag) {
+ globals._table[row][column] = left;
+ globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
+ } else {
+ globals._table[row][column] = diag;
+ globals._arrows[row][column] = Arrow.Diag;
+ }
+ } else if (top > diag) {
+ globals._table[row][column] = top;
+ globals._arrows[row][column] = Arrow.Top;
+ } else if (top === diag) {
+ globals._table[row][column] = top;
+ globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
+ } else {
+ globals._table[row][column] = diag;
+ globals._arrows[row][column] = Arrow.Diag;
+ }
+ }
+ }
+
+ if (_debug) {
+ printTables(pattern, patternStart, word, wordStart, globals);
+ }
+
+ if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
+ return undefined;
+ }
+
+ globals._matchesCount = 0;
+ globals._topScore = -100;
+ globals._wordStart = wordStart;
+ globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
+
+ _findAllMatches2(
+ row - 1,
+ column - 1,
+ patternLen === wordLen ? 1 : 0,
+ 0,
+ false,
+ globals
+ );
+ if (globals._matchesCount === 0) {
+ return undefined;
+ }
+
+ return [globals._topScore, globals._topMatch2, wordStart];
+}
+
+function _doScore(
+ pattern: string,
+ patternLow: string,
+ patternPos: number,
+ patternStart: number,
+ word: string,
+ wordLow: string,
+ wordPos: number
+) {
+ if (patternLow[patternPos] !== wordLow[wordPos]) {
+ return -1;
+ }
+ if (wordPos === patternPos - patternStart) {
+ // common prefix: `foobar <-> foobaz`
+ // ^^^^^
+ if (pattern[patternPos] === word[wordPos]) {
+ return 7;
+ }
+ return 5;
+ }
+
+ if (
+ isUpperCaseAtPos(wordPos, word, wordLow) &&
+ (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
+ ) {
+ // hitting upper-case: `foo <-> forOthers`
+ // ^^ ^
+ if (pattern[patternPos] === word[wordPos]) {
+ return 7;
+ }
+ return 5;
+ }
+
+ if (
+ isSeparatorAtPos(wordLow, wordPos) &&
+ (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
+ ) {
+ // hitting a separator: `. <-> foo.bar`
+ // ^
+ return 5;
+ }
+
+ if (
+ isSeparatorAtPos(wordLow, wordPos - 1) ||
+ isWhitespaceAtPos(wordLow, wordPos - 1)
+ ) {
+ // post separator: `foo <-> bar_foo`
+ // ^^^
+ return 5;
+ }
+ return 1;
+}
+
+function printTable(
+ table: number[][],
+ pattern: string,
+ patternLen: number,
+ word: string,
+ wordLen: number
+): string {
+ function pad(s: string, n: number, _pad = " ") {
+ while (s.length < n) {
+ s = _pad + s;
+ }
+ return s;
+ }
+ let ret = ` | |${word
+ .split("")
+ .map((c) => pad(c, 3))
+ .join("|")}\n`;
+
+ for (let i = 0; i <= patternLen; i++) {
+ if (i === 0) {
+ ret += " |";
+ } else {
+ ret += `${pattern[i - 1]}|`;
+ }
+ ret +=
+ table[i]
+ .slice(0, wordLen + 1)
+ .map((n) => pad(n.toString(), 3))
+ .join("|") + "\n";
+ }
+ return ret;
+}
+
+function printTables(
+ pattern: string,
+ patternStart: number,
+ word: string,
+ wordStart: number,
+ globals: FilterGlobals
+): void {
+ pattern = pattern.substr(patternStart);
+ word = word.substr(wordStart);
+ console.log(
+ printTable(globals._table, pattern, pattern.length, word, word.length)
+ );
+ console.log(
+ printTable(globals._arrows, pattern, pattern.length, word, word.length)
+ );
+ console.log(
+ printTable(globals._scores, pattern, pattern.length, word, word.length)
+ );
+}
+
+function _findAllMatches2(
+ row: number,
+ column: number,
+ total: number,
+ matches: number,
+ lastMatched: boolean,
+ globals: FilterGlobals
+): void {
+ if (globals._matchesCount >= 10 || total < -25) {
+ // stop when having already 10 results, or
+ // when a potential alignment as already 5 gaps
+ return;
+ }
+
+ let simpleMatchCount = 0;
+
+ while (row > 0 && column > 0) {
+ const score = globals._scores[row][column];
+ const arrow = globals._arrows[row][column];
+
+ if (arrow === Arrow.Left) {
+ // left -> no match, skip a word character
+ column -= 1;
+ if (lastMatched) {
+ total -= 5; // new gap penalty
+ } else if (matches !== 0) {
+ total -= 1; // gap penalty after first match
+ }
+ lastMatched = false;
+ simpleMatchCount = 0;
+ } else if (arrow && Arrow.Diag) {
+ if (arrow && Arrow.Left) {
+ // left
+ _findAllMatches2(
+ row,
+ column - 1,
+ matches !== 0 ? total - 1 : total, // gap penalty after first match
+ matches,
+ lastMatched,
+ globals
+ );
+ }
+
+ // diag
+ total += score;
+ row -= 1;
+ column -= 1;
+ lastMatched = true;
+
+ // match -> set a 1 at the word pos
+ matches += 2 ** (column + globals._wordStart);
+
+ // count simple matches and boost a row of
+ // simple matches when they yield in a
+ // strong match.
+ if (score === 1) {
+ simpleMatchCount += 1;
+
+ if (row === 0 && !globals._firstMatchCanBeWeak) {
+ // when the first match is a weak
+ // match we discard it
+ return;
+ }
+ } else {
+ // boost
+ total += 1 + simpleMatchCount * (score - 1);
+ simpleMatchCount = 0;
+ }
+ } else {
+ return;
+ }
+ }
+
+ total -= column >= 3 ? 9 : column * 3; // late start penalty
+
+ // dynamically keep track of the current top score
+ // and insert the current best score at head, the rest at tail
+ globals._matchesCount += 1;
+ if (total > globals._topScore) {
+ globals._topScore = total;
+ globals._topMatch2 = matches;
+ }
+}
+
+// #endregion
diff --git a/src/common/string/filter/sequence-matching.ts b/src/common/string/filter/sequence-matching.ts
new file mode 100644
index 0000000000..dac81672a8
--- /dev/null
+++ b/src/common/string/filter/sequence-matching.ts
@@ -0,0 +1,66 @@
+import { fuzzyScore } from "./filter";
+
+/**
+ * Determine whether a sequence of letters exists in another string,
+ * in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
+ *
+ * @param {string} filter - Sequence of letters to check for
+ * @param {string} word - Word to check for sequence
+ *
+ * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
+ */
+
+export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
+ let topScore = 0;
+
+ for (const word of words) {
+ const scores = fuzzyScore(
+ filter,
+ filter.toLowerCase(),
+ 0,
+ word,
+ word.toLowerCase(),
+ 0,
+ true
+ );
+
+ if (!scores) {
+ continue;
+ }
+
+ // The VS Code implementation of filter treats a score of "0" as just barely a match
+ // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
+ // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
+ const score = scores[0] + 1;
+
+ if (score > topScore) {
+ topScore = score;
+ }
+ }
+ return topScore;
+};
+
+export interface ScorableTextItem {
+ score?: number;
+ text: string;
+ altText?: string;
+}
+
+type FuzzyFilterSort = (
+ filter: string,
+ items: T[]
+) => T[];
+
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
+ return items
+ .map((item) => {
+ item.score = item.altText
+ ? fuzzySequentialMatch(filter, item.text, item.altText)
+ : fuzzySequentialMatch(filter, item.text);
+ return item;
+ })
+ .filter((item) => item.score !== undefined && item.score > 0)
+ .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
+ scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
+ );
+};
diff --git a/src/common/string/number-format.ts b/src/common/string/number-format.ts
new file mode 100644
index 0000000000..39d20e47a5
--- /dev/null
+++ b/src/common/string/number-format.ts
@@ -0,0 +1,22 @@
+/**
+ * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ *
+ * @param num The number to format
+ * @param language The language to use when formatting the number
+ */
+export const numberFormat = (
+ num: string | number,
+ language: string
+): string => {
+ // Polyfill for Number.isNaN, which is more reliable that the global isNaN()
+ Number.isNaN =
+ Number.isNaN ||
+ function isNaN(input) {
+ return typeof input === "number" && isNaN(input);
+ };
+
+ if (!Number.isNaN(Number(num)) && Intl) {
+ return new Intl.NumberFormat(language).format(Number(num));
+ }
+ return num.toString();
+};
diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index 696a765872..6ebba251b8 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -1,4 +1,5 @@
import IntlMessageFormat from "intl-messageformat";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
import { Resources } from "../../types";
export type LocalizeFunc = (key: string, ...args: any[]) => string;
@@ -12,9 +13,12 @@ export interface FormatsType {
time: FormatType;
}
-if (!Intl.PluralRules) {
- import("@formatjs/intl-pluralrules/polyfill-locales");
-}
+let polyfillLoaded = !shouldPolyfill();
+const polyfillProm = polyfillLoaded
+ ? undefined
+ : import("@formatjs/intl-pluralrules/polyfill-locales").then(() => {
+ polyfillLoaded = true;
+ });
/**
* Adapted from Polymer app-localize-behavior.
@@ -37,12 +41,16 @@ if (!Intl.PluralRules) {
* }
*/
-export const computeLocalize = (
+export const computeLocalize = async (
cache: any,
language: string,
resources: Resources,
formats?: FormatsType
-): LocalizeFunc => {
+): Promise => {
+ if (!polyfillLoaded) {
+ await polyfillProm;
+ }
+
// Everytime any of the parameters change, invalidate the strings cache.
cache._localizationCache = {};
diff --git a/src/common/util/debounce.ts b/src/common/util/debounce.ts
index fedd679e2e..557d596540 100644
--- a/src/common/util/debounce.ts
+++ b/src/common/util/debounce.ts
@@ -5,7 +5,7 @@
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
// eslint-disable-next-line: ban-types
-export const debounce = (
+export const debounce = unknown>(
func: T,
wait,
immediate = false
diff --git a/src/common/util/subscribe-one.ts b/src/common/util/subscribe-one.ts
index f86bfb7388..51bfa1081d 100644
--- a/src/common/util/subscribe-one.ts
+++ b/src/common/util/subscribe-one.ts
@@ -2,7 +2,10 @@ import { Connection, UnsubscribeFunc } from "home-assistant-js-websocket";
export const subscribeOne = async (
conn: Connection,
- subscribe: (conn: Connection, onChange: (items: T) => void) => UnsubscribeFunc
+ subscribe: (
+ conn2: Connection,
+ onChange: (items: T) => void
+ ) => UnsubscribeFunc
) =>
new Promise((resolve) => {
const unsub = subscribe(conn, (items) => {
diff --git a/src/common/util/throttle.ts b/src/common/util/throttle.ts
index 1cd98ea188..4832a2709b 100644
--- a/src/common/util/throttle.ts
+++ b/src/common/util/throttle.ts
@@ -5,7 +5,7 @@
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `false for leading`. To disable execution on the trailing edge, ditto.
-export const throttle = (
+export const throttle = unknown>(
func: T,
wait: number,
leading = true,
diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
index a446d456fc..c6c325fdab 100644
--- a/src/components/buttons/ha-progress-button.ts
+++ b/src/components/buttons/ha-progress-button.ts
@@ -21,7 +21,7 @@ class HaProgressButton extends LitElement {
@property({ type: Boolean }) public raised = false;
- @query("mwc-button") private _button?: Button;
+ @query("mwc-button", true) private _button?: Button;
public render(): TemplateResult {
return html`
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index db83db5a6d..1b8530dcec 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -73,13 +73,17 @@ export interface DataTableColumnData extends DataTableSortColumnData {
hidden?: boolean;
}
+type ClonedDataTableColumnData = Omit & {
+ title?: string;
+};
+
export interface DataTableRowData {
[key: string]: any;
selectable?: boolean;
}
export interface SortableColumnContainer {
- [key: string]: DataTableSortColumnData;
+ [key: string]: ClonedDataTableColumnData;
}
@customElement("ha-data-table")
@@ -90,6 +94,8 @@ export class HaDataTable extends LitElement {
@property({ type: Boolean }) public selectable = false;
+ @property({ type: Boolean }) public clickable = false;
+
@property({ type: Boolean }) public hasFab = false;
@property({ type: Boolean, attribute: "auto-height" })
@@ -101,6 +107,9 @@ export class HaDataTable extends LitElement {
@property({ type: String }) public searchLabel?: string;
+ @property({ type: Boolean, attribute: "no-label-float" })
+ public noLabelFloat? = false;
+
@property({ type: String }) public filter = "";
@internalProperty() private _filterable = false;
@@ -113,9 +122,9 @@ export class HaDataTable extends LitElement {
@internalProperty() private _filteredData: DataTableRowData[] = [];
- @query("slot[name='header']") private _header!: HTMLSlotElement;
+ @internalProperty() private _headerHeight = 0;
- @query(".mdc-data-table__table") private _table!: HTMLDivElement;
+ @query("slot[name='header']") private _header!: HTMLSlotElement;
private _checkableRowsCount?: number;
@@ -166,11 +175,13 @@ export class HaDataTable extends LitElement {
}
const clonedColumns: DataTableColumnContainer = deepClone(this.columns);
- Object.values(clonedColumns).forEach((column: DataTableColumnData) => {
- delete column.title;
- delete column.type;
- delete column.template;
- });
+ Object.values(clonedColumns).forEach(
+ (column: ClonedDataTableColumnData) => {
+ delete column.title;
+ delete column.type;
+ delete column.template;
+ }
+ );
this._sortColumns = clonedColumns;
}
@@ -206,6 +217,7 @@ export class HaDataTable extends LitElement {
`
@@ -220,7 +232,7 @@ export class HaDataTable extends LitElement {
style=${styleMap({
height: this.autoHeight
? `${(this._filteredData.length || 1) * 53 + 57}px`
- : `calc(100% - ${this._header?.clientHeight}px)`,
+ : `calc(100% - ${this._headerHeight}px)`,
})}
>
@@ -317,12 +329,13 @@ export class HaDataTable extends LitElement {
`
: ""}
@@ -196,8 +197,8 @@ class MoreInfoMediaPlayer extends LitElement {
)}
@keydown=${this._ttsCheckForEnter}
>
- > => {
if (!worker) {
- worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+ worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
}
return await worker.filterData(data, columns, filter);
@@ -29,7 +29,7 @@ export const sortData = async (
sortColumn: SortDataParamTypes[3]
): Promise> => {
if (!worker) {
- worker = wrap(new Worker("./sort_filter_worker", { type: "module" }));
+ worker = wrap(new Worker(new URL("./sort_filter_worker", import.meta.url)));
}
return await worker.sortData(data, columns, direction, sortColumn);
diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index cc0e7d3f29..70211da366 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -1,7 +1,7 @@
+// @ts-nocheck
import Vue from "vue";
import wrap from "@vue/web-component-wrapper";
import DateRangePicker from "vue2-daterange-picker";
-// @ts-ignore
import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
import { fireEvent } from "../common/dom/fire_event";
import { Constructor } from "../types";
@@ -35,7 +35,6 @@ const Component = Vue.extend({
},
},
render(createElement) {
- // @ts-ignore
return createElement(DateRangePicker, {
props: {
"time-picker": true,
@@ -52,7 +51,6 @@ const Component = Vue.extend({
endDate: this.endDate,
},
callback: (value) => {
- // @ts-ignore
fireEvent(this.$el as HTMLElement, "change", value);
},
expression: "dateRange",
diff --git a/src/components/device/ha-device-action-picker.ts b/src/components/device/ha-device-action-picker.ts
index eaca169438..e8e50f5b47 100644
--- a/src/components/device/ha-device-action-picker.ts
+++ b/src/components/device/ha-device-action-picker.ts
@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
@customElement("ha-device-action-picker")
class HaDeviceActionPicker extends HaDeviceAutomationPicker {
- protected NO_AUTOMATION_TEXT = "No actions";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.no_actions"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown action";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.unknown_action"
+ );
+ }
constructor() {
super(
diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index 540cfc5c9d..fe56884a09 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -33,16 +33,24 @@ export abstract class HaDeviceAutomationPicker<
@property() public value?: T;
- protected NO_AUTOMATION_TEXT = "No automations";
-
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown automation";
-
@internalProperty() private _automations: T[] = [];
// Trigger an empty render so we start with a clean DOM.
// paper-listbox does not like changing things around.
@internalProperty() private _renderEmpty = false;
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.no_actions"
+ );
+ }
+
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.actions.unknown_action"
+ );
+ }
+
private _localizeDeviceAutomation: (
hass: HomeAssistant,
automation: T
diff --git a/src/components/device/ha-device-condition-picker.ts b/src/components/device/ha-device-condition-picker.ts
index dbe95c8f6a..89fefbafaf 100644
--- a/src/components/device/ha-device-condition-picker.ts
+++ b/src/components/device/ha-device-condition-picker.ts
@@ -11,9 +11,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
class HaDeviceConditionPicker extends HaDeviceAutomationPicker<
DeviceCondition
> {
- protected NO_AUTOMATION_TEXT = "No conditions";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.conditions.no_conditions"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown condition";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.conditions.unknown_condition"
+ );
+ }
constructor() {
super(
diff --git a/src/components/device/ha-device-trigger-picker.ts b/src/components/device/ha-device-trigger-picker.ts
index ec140426ae..d1ff66d37e 100644
--- a/src/components/device/ha-device-trigger-picker.ts
+++ b/src/components/device/ha-device-trigger-picker.ts
@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
@customElement("ha-device-trigger-picker")
class HaDeviceTriggerPicker extends HaDeviceAutomationPicker {
- protected NO_AUTOMATION_TEXT = "No triggers";
+ protected get NO_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.triggers.no_triggers"
+ );
+ }
- protected UNKNOWN_AUTOMATION_TEXT = "Unknown trigger";
+ protected get UNKNOWN_AUTOMATION_TEXT() {
+ return this.hass.localize(
+ "ui.panel.config.devices.automation.triggers.unknown_trigger"
+ );
+ }
constructor() {
super(
diff --git a/src/components/entity/ha-chart-base.js b/src/components/entity/ha-chart-base.js
index 7df570747c..09ebaef2c4 100644
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -71,14 +71,25 @@ class HaChartBase extends mixinBehaviors(
margin: 5px 0 0 0;
width: 100%;
}
+ .chartTooltip ul {
+ margin: 0 3px;
+ }
.chartTooltip li {
display: block;
white-space: pre-line;
}
+ .chartTooltip li::first-line {
+ line-height: 0;
+ }
.chartTooltip .title {
text-align: center;
font-weight: 500;
}
+ .chartTooltip .beforeBody {
+ text-align: center;
+ font-weight: 300;
+ word-break: break-all;
+ }
.chartLegend li {
display: inline-block;
padding: 0 6px;
@@ -133,6 +144,9 @@ class HaChartBase extends mixinBehaviors(
style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"
>
diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts
index a92d4912b6..7f3966bc26 100644
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -33,7 +33,9 @@ class HaAttributes extends LitElement {
).map(
(attribute) => html`
+ [[tooltip.title]]
+
+ [[tooltip.beforeBody]]
+
-
@@ -264,6 +278,10 @@ class HaChartBase extends mixinBehaviors(
const title = tooltip.title ? tooltip.title[0] || "" : "";
this.set(["tooltip", "title"], title);
+ if (tooltip.beforeBody) {
+ this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
+ }
+
const bodyLines = tooltip.body.map((n) => n.lines);
// Set Text
diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts
index ee2958323b..e9c3b52e0f 100644
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
@@ -16,8 +17,9 @@ import {
import { fireEvent } from "../../common/dom/fire_event";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
import "./state-badge";
+import "@material/mwc-icon-button/mwc-icon-button";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -55,7 +57,7 @@ class HaEntityAttributePicker extends LitElement {
@property({ type: Boolean }) private _opened = false;
- @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
+ @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
protected shouldUpdate(changedProps: PropertyValues) {
return !(!changedProps.has("_opened") && this._opened);
@@ -80,6 +82,7 @@ class HaEntityAttributePicker extends LitElement {
.value=${this._value}
.allowCustomValue=${this.allowCustomValue}
.renderer=${rowRenderer}
+ attr-for-value="bind-value"
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
>
@@ -97,33 +100,35 @@ class HaEntityAttributePicker extends LitElement {
autocorrect="off"
spellcheck="false"
>
- ${this.value
- ? html`
-
+ ${this.value
+ ? html`
+
+
+ `
+ : ""}
-
- Toggle
-
+
+
+
`;
@@ -159,7 +164,10 @@ class HaEntityAttributePicker extends LitElement {
static get styles(): CSSResult {
return css`
- paper-input > ha-icon-button {
+ .suffix {
+ display: flex;
+ }
+ mwc-icon-button {
--mdc-icon-button-size: 24px;
padding: 0px 2px;
color: var(--secondary-text-color);
diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index 94ddcf4517..6b06f855c2 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,3 +1,5 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
@@ -20,7 +22,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
import "./state-badge";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -97,10 +99,12 @@ export class HaEntityPicker extends LitElement {
@property({ type: Boolean }) private _opened = false;
- @query("vaadin-combo-box-light") private _comboBox!: HTMLElement;
+ @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
private _initedStates = false;
+ private _states: HassEntity[] = [];
+
private _getStates = memoizeOne(
(
_opened: boolean,
@@ -166,7 +170,7 @@ export class HaEntityPicker extends LitElement {
protected updated(changedProps: PropertyValues) {
if (!this._initedStates || (changedProps.has("_opened") && this._opened)) {
- const states = this._getStates(
+ this._states = this._getStates(
this._opened,
this.hass,
this.includeDomains,
@@ -174,7 +178,7 @@ export class HaEntityPicker extends LitElement {
this.entityFilter,
this.includeDeviceClasses
);
- (this._comboBox as any).items = states;
+ (this._comboBox as any).filteredItems = this._states;
this._initedStates = true;
}
}
@@ -192,6 +196,7 @@ export class HaEntityPicker extends LitElement {
.renderer=${rowRenderer}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
+ @filter-changed=${this._filterChanged}
>
+ ${this.value && !this.hideClearIcon
+ ? html`
+
+
+ `
+ : ""}
-
- Toggle
-
+
+
+
+
`;
+ }
+
+ if (!this._showIcon) {
return html``;
}
@@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
ha-icon {
transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
}
+ .missing {
+ color: #fce588;
+ }
${iconColorCSS}
`;
diff --git a/src/components/entity/state-info.js b/src/components/entity/state-info.js
index 36014db18e..d228de67de 100644
--- a/src/components/entity/state-info.js
+++ b/src/components/entity/state-info.js
@@ -59,6 +59,19 @@ class StateInfo extends LocalizeMixin(PolymerElement) {
@apply --paper-font-common-nowrap;
color: var(--secondary-text-color);
}
+
+ .row {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: no-wrap;
+ width: 100%;
+ justify-content: space-between;
+ margin: 0 2px 4px 0;
+ }
+
+ .row:last-child {
+ margin-bottom: 0px;
+ }
`;
}
@@ -81,11 +94,26 @@ class StateInfo extends LocalizeMixin(PolymerElement) {
datetime="[[stateObj.last_changed]]"
>
+
+
+ [[localize('ui.dialogs.more_info_control.last_changed')]]:
+
+
+
+
+ [[localize('ui.dialogs.more_info_control.last_updated')]]:
+
+
+
-
- ${this.editMode
- ? html`
-
-
- `;
- })}
-
- `
- : ""}
- ${this._renderPanels(afterSpacer)}
- ${this._externalConfig && this._externalConfig.hasSettingsScreen
- ? html`
-
-
-
-
- `
- : ""}
-
-
-
-
-
-
-
+ ${this._renderHeader()}
+ ${this._renderAllPanels()}
+ ${this._renderDivider()}
+ ${this._renderNotifications()}
+ ${this._renderUserItem()}
`;
@@ -475,6 +297,215 @@ class HaSidebar extends LitElement {
}
}
+ private _renderHeader() {
+ return html``;
+ }
+
+ private _renderAllPanels() {
+ const [beforeSpacer, afterSpacer] = computePanels(
+ this.hass.panels,
+ this.hass.defaultPanel,
+ this._panelOrder,
+ this._hiddenPanels
+ );
+
+ // prettier-ignore
+ return html`
+
+ ${this.editMode
+ ? this._renderPanelsEdit(beforeSpacer)
+ : this._renderPanels(beforeSpacer)}
+ ${this._renderSpacer()}
+ ${this._renderPanels(afterSpacer)}
+ ${this._renderExternalConfiguration()}
+
+ `;
+ }
+
+ private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
+ // prettier-ignore
+ return html`
+
+
+ `;
+ })}
+ ${this._renderSpacer()}`
+ : ""}`;
+ }
+
+ private _renderDivider() {
+ return html``;
+ }
+
+ private _renderSpacer() {
+ return html``;
+ }
+
+ private _renderNotifications() {
+ let notificationCount = this._notifications
+ ? this._notifications.length
+ : 0;
+ for (const entityId in this.hass.states) {
+ if (computeDomain(entityId) === "configurator") {
+ notificationCount++;
+ }
+ }
+
+ return html`
+
+ `;
+ }
+
+ private _renderExternalConfiguration() {
+ return html`${this._externalConfig && this._externalConfig.hasSettingsScreen
+ ? html`
+
+
+
+
+ `
+ : ""}`;
+ }
+
private get _tooltip() {
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
}
@@ -728,6 +759,7 @@ class HaSidebar extends LitElement {
width: 64px;
}
:host([expanded]) {
+ width: 256px;
width: calc(256px + env(safe-area-inset-left));
}
:host([rtl]) {
@@ -735,8 +767,7 @@ class HaSidebar extends LitElement {
border-left: 1px solid var(--divider-color);
}
.menu {
- box-sizing: border-box;
- height: 65px;
+ height: var(--header-height);
display: flex;
padding: 0 8.5px;
border-bottom: 1px solid transparent;
@@ -781,7 +812,7 @@ class HaSidebar extends LitElement {
display: initial;
}
.title mwc-button {
- width: 100%;
+ width: 90%;
}
#sortable,
.hidden-panel {
@@ -793,7 +824,10 @@ class HaSidebar extends LitElement {
display: flex;
flex-direction: column;
box-sizing: border-box;
- height: calc(100% - 196px - env(safe-area-inset-bottom));
+ height: calc(100% - var(--header-height) - 132px);
+ height: calc(
+ 100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
+ );
overflow-x: hidden;
background: none;
margin-left: env(safe-area-inset-left);
diff --git a/src/components/ha-slider.js b/src/components/ha-slider.js
index 9a2a9a09c9..f520fa20ef 100644
--- a/src/components/ha-slider.js
+++ b/src/components/ha-slider.js
@@ -21,6 +21,7 @@ class HaSlider extends PaperSliderClass {
.pin > .slider-knob > .slider-knob-inner {
font-size: var(--ha-slider-pin-font-size, 10px);
line-height: normal;
+ cursor: pointer;
}
.disabled.ring > .slider-knob > .slider-knob-inner {
@@ -69,9 +70,9 @@ class HaSlider extends PaperSliderClass {
transform: scale(1) translate(0, -10px);
}
- .slider-input {
- width: 54px;
- }
+ .slider-input {
+ width: 54px;
+ }
`)
);
}
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
new file mode 100644
index 0000000000..b6dc45dcf1
--- /dev/null
+++ b/src/components/ha-tabs.ts
@@ -0,0 +1,100 @@
+import "@polymer/paper-tabs/paper-tabs";
+import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+import type { PaperTabElement } from "@polymer/paper-tabs/paper-tab";
+import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
+import { customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const PaperTabs = customElements.get("paper-tabs") as Constructor<
+ PaperTabsElement
+>;
+
+let subTemplate: HTMLTemplateElement;
+
+@customElement("ha-tabs")
+export class HaTabs extends PaperTabs {
+ private _firstTabWidth = 0;
+
+ private _lastTabWidth = 0;
+
+ private _lastLeftHiddenState = false;
+
+ static get template(): HTMLTemplateElement {
+ if (!subTemplate) {
+ subTemplate = (PaperTabs as any).template.cloneNode(true);
+
+ const superStyle = subTemplate.content.querySelector("style");
+
+ // Add "noink" attribute for scroll buttons to disable animation.
+ subTemplate.content
+ .querySelectorAll("paper-icon-button")
+ .forEach((arrow: PaperIconButtonElement) => {
+ arrow.setAttribute("noink", "");
+ });
+
+ superStyle!.appendChild(
+ document.createTextNode(`
+ :host {
+ padding-top: .5px;
+ }
+ .not-visible {
+ display: none;
+ }
+ paper-icon-button {
+ width: 24px;
+ height: 48px;
+ padding: 0;
+ margin: 0;
+ }
+ `)
+ );
+ }
+ return subTemplate;
+ }
+
+ // Get first and last tab's width for _affectScroll
+ public _tabChanged(tab: PaperTabElement, old: PaperTabElement): void {
+ super._tabChanged(tab, old);
+ const tabs = this.querySelectorAll("paper-tab:not(.hide-tab)");
+ if (tabs.length > 0) {
+ this._firstTabWidth = tabs[0].clientWidth;
+ this._lastTabWidth = tabs[tabs.length - 1].clientWidth;
+ }
+
+ // Scroll active tab into view if needed.
+ const selected = this.querySelector(".iron-selected");
+ if (selected) {
+ selected.scrollIntoView();
+ }
+ }
+
+ /**
+ * Modify _affectScroll so that when the scroll arrows appear
+ * while scrolling and the tab container shrinks we can counteract
+ * the jump in tab position so that the scroll still appears smooth.
+ */
+ public _affectScroll(dx: number): void {
+ if (this._firstTabWidth === 0 || this._lastTabWidth === 0) {
+ return;
+ }
+
+ this.$.tabsContainer.scrollLeft += dx;
+
+ const scrollLeft = this.$.tabsContainer.scrollLeft;
+
+ this._leftHidden = scrollLeft - this._firstTabWidth < 0;
+ this._rightHidden =
+ scrollLeft + this._lastTabWidth > this._tabContainerScrollSize;
+
+ if (this._lastLeftHiddenState !== this._leftHidden) {
+ this._lastLeftHiddenState = this._leftHidden;
+ this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
+ }
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-tabs": HaTabs;
+ }
+}
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index 596e878b51..4d2f4c2c59 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -20,7 +20,7 @@ declare global {
}
}
-const isEmpty = (obj: object): boolean => {
+const isEmpty = (obj: Record): boolean => {
if (typeof obj !== "object") {
return false;
}
@@ -44,7 +44,7 @@ export class HaYamlEditor extends LitElement {
@internalProperty() private _yaml = "";
- @query("ha-code-editor") private _editor?: HaCodeEditor;
+ @query("ha-code-editor", true) private _editor?: HaCodeEditor;
public setValue(value): void {
try {
@@ -105,6 +105,10 @@ export class HaYamlEditor extends LitElement {
fireEvent(this, "value-changed", { value: parsed, isValid } as any);
}
+
+ get yaml() {
+ return this._editor?.value;
+ }
}
declare global {
diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts
index 3b42fd38cc..8ba1ec3c2b 100644
--- a/src/components/map/ha-location-editor.ts
+++ b/src/components/map/ha-location-editor.ts
@@ -61,8 +61,8 @@ class LocationEditor extends LitElement {
if (!this._leafletMap || !this.location) {
return;
}
- if ((this._locationMarker as Circle).getBounds) {
- this._leafletMap.fitBounds((this._locationMarker as Circle).getBounds());
+ if (this._locationMarker && "getBounds" in this._locationMarker) {
+ this._leafletMap.fitBounds(this._locationMarker.getBounds());
} else {
this._leafletMap.setView(this.location, this.fitZoom);
}
diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 06547974fe..a12021c11f 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -90,8 +90,8 @@ export class HaLocationsEditor extends LitElement {
if (!marker) {
return;
}
- if ((marker as Circle).getBounds) {
- this._leafletMap.fitBounds((marker as Circle).getBounds());
+ if ("getBounds" in marker) {
+ this._leafletMap.fitBounds(marker.getBounds());
(marker as Circle).bringToFront();
} else {
const circle = this._circles[id];
@@ -296,8 +296,8 @@ export class HaLocationsEditor extends LitElement {
// @ts-ignore
(ev: MouseEvent) => this._markerClicked(ev)
)
- .addTo(this._leafletMap);
- marker.id = location.id;
+ .addTo(this._leafletMap!);
+ (marker as any).id = location.id;
this._locationMarkers![location.id] = marker;
}
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 32146ec822..93a5ca25e4 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -378,6 +378,7 @@ export class HaMediaPlayerBrowse extends LitElement {
: html`
{
this._loading = true;
- const itemData =
- this.entityId !== BROWSER_PLAYER
- ? await browseMediaPlayer(
- this.hass,
- this.entityId,
- mediaContentId,
- mediaContentType
- )
- : await browseLocalMediaPlayer(this.hass, mediaContentId);
-
- this._loading = false;
+ let itemData: any;
+ try {
+ itemData =
+ this.entityId !== BROWSER_PLAYER
+ ? await browseMediaPlayer(
+ this.hass,
+ this.entityId,
+ mediaContentId,
+ mediaContentType
+ )
+ : await browseLocalMediaPlayer(this.hass, mediaContentId);
+ } finally {
+ this._loading = false;
+ }
return itemData;
}
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 3bbd6054ce..50c234f35f 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -159,7 +159,7 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
if (prevState !== null) {
dataRow.push([prevLastChanged, endTime, locState, prevState]);
}
- datasets.push({ data: dataRow });
+ datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
labels.push(entityDisplay);
});
@@ -173,12 +173,22 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
return [state, start, end];
};
+ const formatTooltipBeforeBody = (item, data) => {
+ if (!this.hass.userData || !this.hass.userData.showAdvanced || !item[0]) {
+ return "";
+ }
+ // Extract the entity ID from the dataset.
+ const values = data.datasets[item[0].datasetIndex];
+ return values.entity_id || "";
+ };
+
const chartOptions = {
type: "timeline",
options: {
tooltips: {
callbacks: {
label: formatTooltipLabel,
+ beforeBody: formatTooltipBeforeBody,
},
},
scales: {
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index ecd99f188f..6b3e865c05 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -24,10 +24,14 @@ class HaUserPicker extends LitElement {
@property() public label?: string;
- @property() public value?: string;
+ @property() public noUserLabel?: string;
+
+ @property() public value = "";
@property() public users?: User[];
+ @property({ type: Boolean }) public disabled = false;
+
private _sortedUsers = memoizeOne((users?: User[]) => {
if (!users) {
return [];
@@ -40,15 +44,19 @@ class HaUserPicker extends LitElement {
protected render(): TemplateResult {
return html`
-
+
- No user
+ ${this.noUserLabel ||
+ this.hass?.localize("ui.components.user-picker.no_user")}
${this._sortedUsers(this.users).map(
(user) => html`
@@ -67,10 +75,6 @@ class HaUserPicker extends LitElement {
`;
}
- private get _value() {
- return this.value || "";
- }
-
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
if (this.users === undefined) {
@@ -83,7 +87,7 @@ class HaUserPicker extends LitElement {
private _userChanged(ev) {
const newValue = ev.detail.item.dataset.userId;
- if (newValue !== this._value) {
+ if (newValue !== this.value) {
this.value = ev.detail.value;
setTimeout(() => {
fireEvent(this, "value-changed", { value: newValue });
@@ -111,3 +115,9 @@ class HaUserPicker extends LitElement {
}
customElements.define("ha-user-picker", HaUserPicker);
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-user-picker": HaUserPicker;
+ }
+}
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
new file mode 100644
index 0000000000..d4fac81d48
--- /dev/null
+++ b/src/components/user/ha-users-picker.ts
@@ -0,0 +1,169 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { PolymerChangedEvent } from "../../polymer-types";
+import type { HomeAssistant } from "../../types";
+import { fetchUsers, User } from "../../data/user";
+import "./ha-user-picker";
+import { mdiClose } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { guard } from "lit-html/directives/guard";
+
+@customElement("ha-users-picker")
+class HaUsersPickerLight extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
+ @property() public value?: string[];
+
+ @property({ attribute: "picked-user-label" })
+ public pickedUserLabel?: string;
+
+ @property({ attribute: "pick-user-label" })
+ public pickUserLabel?: string;
+
+ @property({ attribute: false })
+ public users?: User[];
+
+ protected firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ if (this.users === undefined) {
+ fetchUsers(this.hass!).then((users) => {
+ this.users = users;
+ });
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this.users) {
+ return html``;
+ }
+
+ const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+ return html`
+ ${guard([notSelectedUsers], () =>
+ this.value?.map(
+ (user_id, idx) => html`
+ ) {
+ event.stopPropagation();
+ const index = (event.currentTarget as any).index;
+ const newValue = event.detail.value;
+ const newUsers = [...this._currentUsers];
+ if (newValue === "") {
+ newUsers.splice(index, 1);
+ } else {
+ newUsers.splice(index, 1, newValue);
+ }
+ this._updateUsers(newUsers);
+ }
+
+ private async _addUser(event: PolymerChangedEvent) {
+ event.stopPropagation();
+ const toAdd = event.detail.value;
+ (event.currentTarget as any).value = "";
+ if (!toAdd) {
+ return;
+ }
+ const currentUsers = this._currentUsers;
+ if (currentUsers.includes(toAdd)) {
+ return;
+ }
+
+ this._updateUsers([...currentUsers, toAdd]);
+ }
+
+ private _removeUser(event) {
+ const userId = (event.currentTarget as any).userId;
+ this._updateUsers(this._currentUsers.filter((user) => user !== userId));
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: block;
+ }
+ div {
+ display: flex;
+ align-items: center;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-users-picker": HaUsersPickerLight;
+ }
+}
diff --git a/src/data/automation.ts b/src/data/automation.ts
index 4b06d4af63..bb35448575 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -109,10 +109,17 @@ export interface TemplateTrigger {
value_template: string;
}
+export interface ContextConstraint {
+ context_id?: string;
+ parent_id?: string;
+ user_id?: string | string[];
+}
+
export interface EventTrigger {
platform: "event";
event_type: string;
- event_data: any;
+ event_data?: any;
+ context?: ContextConstraint;
}
export type Trigger =
@@ -217,12 +224,12 @@ export const subscribeTrigger = (
hass: HomeAssistant,
onChange: (result: {
variables: {
- trigger: {};
+ trigger: Record;
};
context: Context;
}) => void,
trigger: Trigger | Trigger[],
- variables?: {}
+ variables?: Record
) =>
hass.connection.subscribeMessage(onChange, {
type: "subscribe_trigger",
@@ -233,7 +240,7 @@ export const subscribeTrigger = (
export const testCondition = (
hass: HomeAssistant,
condition: Condition | Condition[],
- variables?: {}
+ variables?: Record
) =>
hass.callWS<{ result: boolean }>({
type: "test_condition",
diff --git a/src/data/cached-history.ts b/src/data/cached-history.ts
index f1fee4ec98..6c97c20baa 100644
--- a/src/data/cached-history.ts
+++ b/src/data/cached-history.ts
@@ -10,7 +10,6 @@ import {
} from "./history";
export interface CacheConfig {
- refresh: number;
cacheKey: string;
hoursToShow: number;
}
diff --git a/src/data/collection.ts b/src/data/collection.ts
index a565d371f0..43931acd31 100644
--- a/src/data/collection.ts
+++ b/src/data/collection.ts
@@ -17,12 +17,12 @@ interface OptimisticCollection extends Collection {
*/
export const getOptimisticCollection = (
- saveCollection: (conn: Connection, data: StateType) => Promise,
+ saveCollection: (conn2: Connection, data: StateType) => Promise,
conn: Connection,
key: string,
- fetchCollection: (conn: Connection) => Promise,
+ fetchCollection: (conn2: Connection) => Promise,
subscribeUpdates?: (
- conn: Connection,
+ conn2: Connection,
store: Store
) => Promise
): OptimisticCollection => {
diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts
index 94cce83ba8..367924e015 100644
--- a/src/data/config_flow.ts
+++ b/src/data/config_flow.ts
@@ -11,6 +11,7 @@ export const DISCOVERY_SOURCES = [
"ssdp",
"zeroconf",
"discovery",
+ "mqtt",
];
export const ATTENTION_SOURCES = ["reauth"];
diff --git a/src/data/counter.ts b/src/data/counter.ts
new file mode 100644
index 0000000000..b01bf65869
--- /dev/null
+++ b/src/data/counter.ts
@@ -0,0 +1,51 @@
+import { HomeAssistant } from "../types";
+
+export interface Counter {
+ id: string;
+ name: string;
+ icon?: string;
+ initial?: number;
+ restore?: boolean;
+ minimum?: number;
+ maximum?: number;
+ step?: number;
+}
+
+export interface CounterMutableParams {
+ name: string;
+ icon: string;
+ initial: number;
+ restore: boolean;
+ minimum: number;
+ maximum: number;
+ step: number;
+}
+
+export const fetchCounter = (hass: HomeAssistant) =>
+ hass.callWS({ type: "counter/list" });
+
+export const createCounter = (
+ hass: HomeAssistant,
+ values: CounterMutableParams
+) =>
+ hass.callWS({
+ type: "counter/create",
+ ...values,
+ });
+
+export const updateCounter = (
+ hass: HomeAssistant,
+ id: string,
+ updates: Partial
+) =>
+ hass.callWS({
+ type: "counter/update",
+ counter_id: id,
+ ...updates,
+ });
+
+export const deleteCounter = (hass: HomeAssistant, id: string) =>
+ hass.callWS({
+ type: "counter/delete",
+ counter_id: id,
+ });
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index a5d897ca8b..4c5271e82d 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -15,7 +15,7 @@ export interface EntityRegistryEntry {
export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
unique_id: string;
- capabilities: object;
+ capabilities: Record;
original_name?: string;
original_icon?: string;
}
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index d500ad4311..902548f174 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -2,78 +2,71 @@ import { HomeAssistant } from "../../types";
import { hassioApiResultExtractor, HassioResponse } from "./common";
export interface HassioAddonInfo {
- name: string;
- slug: string;
- description: string;
- repository: "core" | "local" | string;
- version: string;
- state: "none" | "started" | "stopped";
- installed: string | undefined;
- detached: boolean;
+ advanced: boolean;
available: boolean;
build: boolean;
- advanced: boolean;
- url: string | null;
+ description: string;
+ detached: boolean;
icon: boolean;
+ installed: boolean;
logo: boolean;
+ name: string;
+ repository: "core" | "local" | string;
+ slug: string;
+ stage: "stable" | "experimental" | "deprecated";
+ state: "started" | "stopped" | null;
+ update_available: boolean;
+ url: string | null;
+ version_latest: string;
+ version: string;
}
export interface HassioAddonDetails extends HassioAddonInfo {
- name: string;
- slug: string;
- description: string;
- long_description: null | string;
- auto_update: boolean;
- url: null | string;
- detached: boolean;
- documentation: boolean;
- available: boolean;
- arch: "armhf" | "aarch64" | "i386" | "amd64";
- machine: any;
- homeassistant: string;
- version_latest: string;
- boot: "auto" | "manual";
- build: boolean;
- options: object;
- network: null | object;
- network_description: null | object;
- host_network: boolean;
- host_pid: boolean;
- host_ipc: boolean;
- host_dbus: boolean;
- privileged: any;
apparmor: "disable" | "default" | "profile";
- devices: string[];
- auto_uart: boolean;
- icon: boolean;
- logo: boolean;
- stage: "stable" | "experimental" | "deprecated";
- changelog: boolean;
- hassio_api: boolean;
- hassio_role: "default" | "homeassistant" | "manager" | "admin";
- startup: "initialize" | "system" | "services" | "application" | "once";
- homeassistant_api: boolean;
- auth_api: boolean;
- full_access: boolean;
- protected: boolean;
- rating: "1-6";
- stdin: boolean;
- webui: null | string;
- gpio: boolean;
- kernel_modules: boolean;
- devicetree: boolean;
- docker_api: boolean;
- audio: boolean;
+ arch: "armhf" | "aarch64" | "i386" | "amd64";
audio_input: null | string;
audio_output: null | string;
- services_role: string[];
+ audio: boolean;
+ auth_api: boolean;
+ auto_uart: boolean;
+ auto_update: boolean;
+ boot: "auto" | "manual";
+ changelog: boolean;
+ devices: string[];
+ devicetree: boolean;
discovery: string[];
- ip_address: string;
- ingress: boolean;
- ingress_panel: boolean;
+ docker_api: boolean;
+ documentation: boolean;
+ full_access: boolean;
+ gpio: boolean;
+ hassio_api: boolean;
+ hassio_role: "default" | "homeassistant" | "manager" | "admin";
+ homeassistant_api: boolean;
+ homeassistant: string;
+ host_dbus: boolean;
+ host_ipc: boolean;
+ host_network: boolean;
+ host_pid: boolean;
ingress_entry: null | string;
+ ingress_panel: boolean;
ingress_url: null | string;
+ ingress: boolean;
+ ip_address: string;
+ kernel_modules: boolean;
+ long_description: null | string;
+ machine: any;
+ network_description: null | Record;
+ network: null | Record;
+ options: Record;
+ privileged: any;
+ protected: boolean;
+ rating: "1-6";
+ services_role: string[];
+ slug: string;
+ startup: "initialize" | "system" | "services" | "application" | "once";
+ stdin: boolean;
watchdog: null | boolean;
+ webui: null | string;
}
export interface HassioAddonsInfo {
@@ -96,11 +89,11 @@ export interface HassioAddonRepository {
export interface HassioAddonSetOptionParams {
audio_input?: string | null;
audio_output?: string | null;
- options?: object | null;
+ options?: Record | null;
boot?: "auto" | "manual";
auto_update?: boolean;
ingress_panel?: boolean;
- network?: object | null;
+ network?: Record | null;
watchdog?: boolean;
}
diff --git a/src/data/hassio/common.ts b/src/data/hassio/common.ts
index 103f61c35a..57a0afa59a 100644
--- a/src/data/hassio/common.ts
+++ b/src/data/hassio/common.ts
@@ -22,8 +22,8 @@ export const hassioApiResultExtractor = (response: HassioResponse) =>
export const extractApiErrorMessage = (error: any): string => {
return typeof error === "object"
? typeof error.body === "object"
- ? error.body.message || "Unknown error, see logs"
- : error.body || "Unknown error, see logs"
+ ? error.body.message || "Unknown error, see supervisor logs"
+ : error.body || error.message || "Unknown error, see supervisor logs"
: error;
};
diff --git a/src/data/hassio/docker.ts b/src/data/hassio/docker.ts
new file mode 100644
index 0000000000..4bc9a194c5
--- /dev/null
+++ b/src/data/hassio/docker.ts
@@ -0,0 +1,36 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+interface HassioDockerRegistries {
+ [key: string]: { username: string; password?: string };
+}
+
+export const fetchHassioDockerRegistries = async (hass: HomeAssistant) => {
+ return hassioApiResultExtractor(
+ await hass.callApi>(
+ "GET",
+ "hassio/docker/registries"
+ )
+ );
+};
+
+export const addHassioDockerRegistry = async (
+ hass: HomeAssistant,
+ data: HassioDockerRegistries
+) => {
+ await hass.callApi>(
+ "POST",
+ "hassio/docker/registries",
+ data
+ );
+};
+
+export const removeHassioDockerRegistry = async (
+ hass: HomeAssistant,
+ registry: string
+) => {
+ await hass.callApi>(
+ "DELETE",
+ `hassio/docker/registries/${registry}`
+ );
+};
diff --git a/src/data/hassio/hardware.ts b/src/data/hassio/hardware.ts
index 345bf0d1ba..863a16d70d 100644
--- a/src/data/hassio/hardware.ts
+++ b/src/data/hassio/hardware.ts
@@ -18,7 +18,7 @@ export interface HassioHardwareInfo {
input: string[];
disk: string[];
gpio: string[];
- audio: object;
+ audio: Record;
}
export const fetchHassioHardwareAudio = async (hass: HomeAssistant) => {
diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts
index a8db6dbc71..ebdc606832 100644
--- a/src/data/hassio/host.ts
+++ b/src/data/hassio/host.ts
@@ -1,14 +1,25 @@
import { HomeAssistant } from "../../types";
import { hassioApiResultExtractor, HassioResponse } from "./common";
-export type HassioHostInfo = any;
+export type HassioHostInfo = {
+ chassis: string;
+ cpe: string;
+ deployment: string;
+ disk_free: number;
+ disk_total: number;
+ disk_used: number;
+ features: string[];
+ hostname: string;
+ kernel: string;
+ operating_system: string;
+};
export interface HassioHassOSInfo {
- version: string;
- version_cli: string;
+ board: string;
+ boot: string;
+ update_available: boolean;
version_latest: string;
- version_cli_latest: string;
- board: "ova" | "rpi";
+ version: string;
}
export const fetchHassioHostInfo = async (hass: HomeAssistant) => {
diff --git a/src/data/hassio/resolution.ts b/src/data/hassio/resolution.ts
new file mode 100644
index 0000000000..8f85943de3
--- /dev/null
+++ b/src/data/hassio/resolution.ts
@@ -0,0 +1,15 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+export interface HassioResolution {
+ unsupported: string[];
+}
+
+export const fetchHassioResolution = async (hass: HomeAssistant) => {
+ return hassioApiResultExtractor(
+ await hass.callApi>(
+ "GET",
+ "hassio/resolution/info"
+ )
+ );
+};
diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts
index 992425b8bc..9d2845f776 100644
--- a/src/data/hassio/supervisor.ts
+++ b/src/data/hassio/supervisor.ts
@@ -1,19 +1,56 @@
import { HomeAssistant, PanelInfo } from "../../types";
+import { HassioAddonInfo, HassioAddonRepository } from "./addon";
import { hassioApiResultExtractor, HassioResponse } from "./common";
-export type HassioHomeAssistantInfo = any;
-export type HassioSupervisorInfo = any;
+export type HassioHomeAssistantInfo = {
+ arch: string;
+ audio_input: string | null;
+ audio_output: string | null;
+ boot: boolean;
+ image: string;
+ ip_address: string;
+ machine: string;
+ port: number;
+ ssl: boolean;
+ update_available: boolean;
+ version_latest: string;
+ version: string;
+ wait_boot: number;
+ watchdog: boolean;
+};
+
+export type HassioSupervisorInfo = {
+ addons: HassioAddonInfo[];
+ addons_repositories: HassioAddonRepository[];
+ arch: string;
+ channel: string;
+ debug: boolean;
+ debug_block: boolean;
+ diagnostics: boolean | null;
+ healthy: boolean;
+ ip_address: string;
+ logging: string;
+ supported: boolean;
+ timezone: string;
+ update_available: boolean;
+ version: string;
+ version_latest: string;
+ wait_boot: number;
+};
export type HassioInfo = {
arch: string;
channel: string;
docker: string;
- hassos?: string;
+ features: string[];
+ hassos: null;
homeassistant: string;
hostname: string;
logging: string;
- maching: string;
+ machine: string;
+ operating_system: string;
supervisor: string;
+ supported: boolean;
supported_arch: string[];
timezone: string;
};
diff --git a/src/data/history.ts b/src/data/history.ts
index c5df270404..16bb07c782 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -85,11 +85,14 @@ export const fetchRecent = (
export const fetchDate = (
hass: HomeAssistant,
startTime: Date,
- endTime: Date
+ endTime: Date,
+ entityId
): Promise => {
return hass.callApi(
"GET",
- `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response`
+ `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response${
+ entityId ? `&filter_entity_id=${entityId}` : ``
+ }`
);
};
diff --git a/src/data/logbook.ts b/src/data/logbook.ts
index cb93ee4003..d5a916c400 100644
--- a/src/data/logbook.ts
+++ b/src/data/logbook.ts
@@ -6,12 +6,14 @@ import { HomeAssistant } from "../types";
import { UNAVAILABLE_STATES } from "./entity";
const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
+export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
export interface LogbookEntry {
when: string;
name: string;
message?: string;
entity_id?: string;
+ icon?: string;
domain: string;
context_user_id?: string;
context_event_type?: string;
@@ -43,11 +45,12 @@ export const getLogbookData = async (
);
for (const entry of logbookData) {
- if (entry.state) {
+ const stateObj = hass!.states[entry.entity_id!];
+ if (entry.state && stateObj) {
entry.message = getLogbookMessage(
hass,
entry.state,
- hass!.states[entry.entity_id!],
+ stateObj,
computeDomain(entry.entity_id!)
);
}
diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index d0a19bf20c..090bb0dfc0 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -33,7 +33,7 @@ export interface LovelaceResource {
}
export interface LovelaceResourcesMutableParams {
- res_type: "css" | "js" | "module" | "html";
+ res_type: LovelaceResource["type"];
url: string;
}
@@ -89,6 +89,7 @@ export interface LovelaceViewConfig {
export interface LovelaceViewElement extends HTMLElement {
hass?: HomeAssistant;
lovelace?: Lovelace;
+ narrow?: boolean;
index?: number;
cards?: Array;
badges?: LovelaceBadge[];
diff --git a/src/data/ozw.ts b/src/data/ozw.ts
index 80ad9882b7..0e5d73565a 100644
--- a/src/data/ozw.ts
+++ b/src/data/ozw.ts
@@ -63,6 +63,16 @@ export interface OZWNetworkStatistics {
retries: number;
}
+export interface OZWDeviceConfig {
+ label: string;
+ type: string;
+ value: string | number;
+ parameter: number;
+ min: number;
+ max: number;
+ help: string;
+}
+
export const nodeQueryStages = [
"ProtocolInfo",
"Probe",
@@ -180,6 +190,17 @@ export const fetchOZWNodeMetadata = (
node_id: node_id,
});
+export const fetchOZWNodeConfig = (
+ hass: HomeAssistant,
+ ozw_instance: number,
+ node_id: number
+): Promise =>
+ hass.callWS({
+ type: "ozw/get_config_parameters",
+ ozw_instance: ozw_instance,
+ node_id: node_id,
+ });
+
export const refreshNodeInfo = (
hass: HomeAssistant,
ozw_instance: number,
diff --git a/src/data/panel_custom.ts b/src/data/panel_custom.ts
index ce09a24408..0b6472c6d1 100644
--- a/src/data/panel_custom.ts
+++ b/src/data/panel_custom.ts
@@ -9,6 +9,6 @@ export interface CustomPanelConfig {
html_url?: string;
}
-export type CustomPanelInfo = PanelInfo<
+export type CustomPanelInfo> = PanelInfo<
T & { _panel_custom: CustomPanelConfig }
>;
diff --git a/src/data/script.ts b/src/data/script.ts
index 240472f743..3becd56e0a 100644
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -105,7 +105,7 @@ export type Action =
export const triggerScript = (
hass: HomeAssistant,
entityId: string,
- variables?: {}
+ variables?: Record
) => hass.callService("script", computeObjectId(entityId), variables);
export const canExcecute = (state: ScriptEntity) => {
diff --git a/src/data/tasmota.ts b/src/data/tasmota.ts
new file mode 100644
index 0000000000..df9aad3032
--- /dev/null
+++ b/src/data/tasmota.ts
@@ -0,0 +1,10 @@
+import { HomeAssistant } from "../types";
+
+export const removeTasmotaDeviceEntry = (
+ hass: HomeAssistant,
+ deviceId: string
+): Promise =>
+ hass.callWS({
+ type: "tasmota/device/remove",
+ device_id: deviceId,
+ });
diff --git a/src/data/timer.ts b/src/data/timer.ts
index 8b54020a7d..a963d64ea3 100644
--- a/src/data/timer.ts
+++ b/src/data/timer.ts
@@ -2,6 +2,7 @@ import {
HassEntityAttributeBase,
HassEntityBase,
} from "home-assistant-js-websocket";
+import { HomeAssistant } from "../types";
export type TimerEntity = HassEntityBase & {
attributes: HassEntityAttributeBase & {
@@ -9,3 +10,48 @@ export type TimerEntity = HassEntityBase & {
remaining: string;
};
};
+
+export interface DurationDict {
+ hours?: number | string;
+ minutes?: number | string;
+ seconds?: number | string;
+}
+
+export interface Timer {
+ id: string;
+ name: string;
+ icon?: string;
+ duration?: string | number | DurationDict;
+}
+
+export interface TimerMutableParams {
+ name: string;
+ icon: string;
+ duration: string | number | DurationDict;
+}
+
+export const fetchTimer = (hass: HomeAssistant) =>
+ hass.callWS({ type: "timer/list" });
+
+export const createTimer = (hass: HomeAssistant, values: TimerMutableParams) =>
+ hass.callWS({
+ type: "timer/create",
+ ...values,
+ });
+
+export const updateTimer = (
+ hass: HomeAssistant,
+ id: string,
+ updates: Partial
+) =>
+ hass.callWS({
+ type: "timer/update",
+ timer_id: id,
+ ...updates,
+ });
+
+export const deleteTimer = (hass: HomeAssistant, id: string) =>
+ hass.callWS({
+ type: "timer/delete",
+ timer_id: id,
+ });
diff --git a/src/data/translation.ts b/src/data/translation.ts
index a713ccd256..8a11515458 100644
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@@ -33,8 +33,8 @@ export const getHassTranslations = async (
category: TranslationCategory,
integration?: string,
config_flow?: boolean
-): Promise<{}> => {
- const result = await hass.callWS<{ resources: {} }>({
+): Promise> => {
+ const result = await hass.callWS<{ resources: Record }>({
type: "frontend/get_translations",
language,
category,
@@ -47,8 +47,8 @@ export const getHassTranslations = async (
export const getHassTranslationsPre109 = async (
hass: HomeAssistant,
language: string
-): Promise<{}> => {
- const result = await hass.callWS<{ resources: {} }>({
+): Promise> => {
+ const result = await hass.callWS<{ resources: Record }>({
type: "frontend/get_translations",
language,
});
diff --git a/src/data/weather.ts b/src/data/weather.ts
index 8c0f7cb5f7..16333d2d1e 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -1,6 +1,14 @@
-import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element";
+import {
+ mdiGauge,
+ mdiWaterPercent,
+ mdiWeatherFog,
+ mdiWeatherRainy,
+ mdiWeatherWindy,
+} from "@mdi/js";
+import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element";
import { styleMap } from "lit-html/directives/style-map";
-
+import "../components/ha-icon";
+import "../components/ha-svg-icon";
import type { HomeAssistant, WeatherEntity } from "../types";
import { roundWithOneDecimal } from "../util/calculate";
@@ -25,6 +33,15 @@ export const weatherIcons = {
exceptional: "hass:alert-circle-outline",
};
+export const weatherAttrIcons = {
+ humidity: mdiWaterPercent,
+ wind_bearing: mdiWeatherWindy,
+ wind_speed: mdiWeatherWindy,
+ pressure: mdiGauge,
+ visibility: mdiWeatherFog,
+ precipitation: mdiWeatherRainy,
+};
+
const cloudyStates = new Set([
"partlycloudy",
"cloudy",
@@ -48,7 +65,7 @@ const snowyStates = new Set(["snowy", "snowy-rainy"]);
const lightningStates = new Set(["lightning", "lightning-rainy"]);
-export const cardinalDirections = [
+const cardinalDirections = [
"N",
"NNE",
"NE",
@@ -77,13 +94,29 @@ const getWindBearingText = (degree: string): string => {
return degree;
};
-export const getWindBearing = (bearing: string): string => {
+const getWindBearing = (bearing: string): string => {
if (bearing != null) {
return getWindBearingText(bearing);
}
return "";
};
+export const getWind = (
+ hass: HomeAssistant,
+ speed: string,
+ bearing: string
+): string => {
+ if (bearing !== null) {
+ const cardinalDirection = getWindBearing(bearing);
+ return `${speed} ${getWeatherUnit(hass!, "wind_speed")} (${
+ hass.localize(
+ `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
+ ) || cardinalDirection
+ })`;
+ }
+ return `${speed} ${getWeatherUnit(hass!, "wind_speed")}`;
+};
+
export const getWeatherUnit = (
hass: HomeAssistant,
measure: string
@@ -94,6 +127,7 @@ export const getWeatherUnit = (
return lengthUnit === "km" ? "hPa" : "inHg";
case "wind_speed":
return `${lengthUnit}/h`;
+ case "visibility":
case "length":
return lengthUnit;
case "precipitation":
@@ -109,7 +143,7 @@ export const getWeatherUnit = (
export const getSecondaryWeatherAttribute = (
hass: HomeAssistant,
stateObj: WeatherEntity
-): string | undefined => {
+): TemplateResult | undefined => {
const extrema = getWeatherExtrema(hass, stateObj);
if (extrema) {
@@ -133,17 +167,22 @@ export const getSecondaryWeatherAttribute = (
return undefined;
}
- return `
- ${hass!.localize(
- `ui.card.weather.attributes.${attribute}`
- )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
+ const weatherAttrIcon = weatherAttrIcons[attribute];
+
+ return html`
+ ${weatherAttrIcon
+ ? html`
+ ;
timeout?: number;
}
): Promise => {
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index d7a2ad6fbc..54ab1c7f41 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -1,5 +1,4 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-input/paper-input";
+import "@material/mwc-button/mwc-button";
import {
css,
CSSResult,
@@ -10,16 +9,16 @@ import {
internalProperty,
TemplateResult,
} from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
import "../../components/ha-circular-progress";
import "../../components/ha-switch";
import "../../components/ha-formfield";
+import { fireEvent } from "../../common/dom/fire_event";
import type { HaSwitch } from "../../components/ha-switch";
import {
getConfigEntrySystemOptions,
updateConfigEntrySystemOptions,
} from "../../data/config_entries";
-import type { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
@@ -35,9 +34,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
@internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
- @internalProperty() private _loading?: boolean;
+ @internalProperty() private _loading = false;
- @internalProperty() private _submitting?: boolean;
+ @internalProperty() private _submitting = false;
public async showDialog(
params: ConfigEntrySystemOptionsDialogParams
@@ -51,7 +50,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
);
this._loading = false;
this._disableNewEntities = systemOptions.disable_new_entities;
- await this.updateComplete;
+ }
+
+ public closeDialog(): void {
+ this._error = "";
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
@@ -60,21 +64,17 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
return html`
-
-
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
+
+
`;
}
@@ -154,19 +154,10 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!(ev.detail as any).value) {
- this._params = undefined;
- }
- }
-
static get styles(): CSSResult[] {
return [
haStyleDialog,
css`
- ha-paper-dialog {
- max-width: 500px;
- }
.init-spinner {
padding: 50px 100px;
text-align: center;
diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
index 4fb23c79de..4540edfcc7 100644
--- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts
+++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
@@ -19,7 +19,8 @@ import { HassDialog } from "../make-dialog-manager";
import { HaDomainTogglerDialogParams } from "./show-dialog-domain-toggler";
@customElement("dialog-domain-toggler")
-class DomainTogglerDialog extends LitElement implements HassDialog {
+class DomainTogglerDialog extends LitElement
+ implements HassDialog {
public hass!: HomeAssistant;
@internalProperty() private _params?: HaDomainTogglerDialogParams;
diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index 5df7cb4f1e..e905f0c3ff 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -70,6 +70,7 @@ class DialogBox extends LitElement {
${attribute.replace(/_/g, " ")}
+
+ ${attribute.replace(/_/g, " ").replace(/\bid\b/g, "ID")}
+
${this.formatAttribute(attribute)}
@@ -61,10 +63,14 @@ class HaAttributes extends LitElement {
.data-entry .value {
max-width: 200px;
overflow-wrap: break-word;
+ text-align: right;
+ }
+ .key:first-letter {
+ text-transform: capitalize;
}
.attribution {
color: var(--secondary-text-color);
- text-align: right;
+ text-align: center;
}
pre {
font-family: inherit;
diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts
index b9d160bf13..6d449c3306 100644
--- a/src/components/ha-bar.ts
+++ b/src/components/ha-bar.ts
@@ -34,8 +34,8 @@ export class HaBar extends LitElement {
return svg`
`;
@@ -43,6 +43,9 @@ export class HaBar extends LitElement {
static get styles(): CSSResult {
return css`
+ rect {
+ height: 100%;
+ }
rect:first-child {
width: 100%;
fill: var(--ha-bar-background-color, var(--secondary-background-color));
diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts
index 7adc266a56..5aafc86d78 100644
--- a/src/components/ha-button-menu.ts
+++ b/src/components/ha-button-menu.ts
@@ -23,7 +23,7 @@ export class HaButtonMenu extends LitElement {
@property({ type: Boolean }) public disabled = false;
- @query("mwc-menu") private _menu?: Menu;
+ @query("mwc-menu", true) private _menu?: Menu;
public get items() {
return this._menu?.items;
@@ -62,6 +62,9 @@ export class HaButtonMenu extends LitElement {
display: inline-block;
position: relative;
}
+ ::slotted([disabled]) {
+ color: var(--disabled-text-color);
+ }
`;
}
}
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index cf215968c4..157d663bfe 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -50,9 +50,12 @@ export class HaCard extends LitElement {
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em;
- line-height: 32px;
- padding: 24px 16px 16px;
+ line-height: 48px;
+ padding: 12px 16px 16px;
display: block;
+ margin-block-start: 0px;
+ margin-block-end: 0px;
+ font-weight: normal;
}
:host ::slotted(.card-content:not(:first-child)),
@@ -75,7 +78,7 @@ export class HaCard extends LitElement {
protected render(): TemplateResult {
return html`
${this.header
- ? html` ${this.header}
`
+ ? html`${this.header}
` : html``}
-
- `;
+ // @ts-ignore
+ public set density(_) {
+ // just a dummy
}
- static get styles() {
- return [
- unsafeCSS(progressStyles),
- css`
- :host {
- text-align: initial;
- }
- `,
- ];
+ public get density() {
+ switch (this.size) {
+ case "small":
+ return -5;
+ case "medium":
+ return 0;
+ case "large":
+ return 5;
+ default:
+ return 0;
+ }
+ }
+
+ // @ts-ignore
+ public set indeterminate(_) {
+ // just a dummy
+ }
+
+ public get indeterminate() {
+ return this.active;
}
}
diff --git a/src/components/ha-climate-state.js b/src/components/ha-climate-state.js
deleted file mode 100644
index eb961cce4c..0000000000
--- a/src/components/ha-climate-state.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { CLIMATE_PRESET_NONE } from "../data/climate";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaClimateState extends LocalizeMixin(PolymerElement) {
- static get template() {
- return html`
-
-
-
-
-
-
-
- ${indeterminatePart}
-
- ${indeterminatePart}
-
- ${indeterminatePart}
-
-
-
-
- [[_localizeState(localize, stateObj)]]
-
- - [[_localizePreset(localize, stateObj.attributes.preset_mode)]]
-
-
-
-
-
-
- [[computeTarget(hass, stateObj)]]
-
- [[localize('ui.card.climate.currently')]]:
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- stateObj: Object,
- currentStatus: {
- type: String,
- computed: "computeCurrentStatus(hass, stateObj)",
- },
- };
- }
-
- computeCurrentStatus(hass, stateObj) {
- if (!hass || !stateObj) return null;
- if (stateObj.attributes.current_temperature != null) {
- return `${stateObj.attributes.current_temperature} ${hass.config.unit_system.temperature}`;
- }
- if (stateObj.attributes.current_humidity != null) {
- return `${stateObj.attributes.current_humidity} %`;
- }
- return null;
- }
-
- computeTarget(hass, stateObj) {
- if (!hass || !stateObj) return null;
- // We're using "!= null" on purpose so that we match both null and undefined.
- if (
- stateObj.attributes.target_temp_low != null &&
- stateObj.attributes.target_temp_high != null
- ) {
- return `${stateObj.attributes.target_temp_low}-${stateObj.attributes.target_temp_high} ${hass.config.unit_system.temperature}`;
- }
- if (stateObj.attributes.temperature != null) {
- return `${stateObj.attributes.temperature} ${hass.config.unit_system.temperature}`;
- }
- if (
- stateObj.attributes.target_humidity_low != null &&
- stateObj.attributes.target_humidity_high != null
- ) {
- return `${stateObj.attributes.target_humidity_low}-${stateObj.attributes.target_humidity_high}%`;
- }
- if (stateObj.attributes.humidity != null) {
- return `${stateObj.attributes.humidity} %`;
- }
-
- return "";
- }
-
- _hasKnownState(state) {
- return state !== "unknown";
- }
-
- _localizeState(localize, stateObj) {
- const stateString = localize(`component.climate.state._.${stateObj.state}`);
- return stateObj.attributes.hvac_action
- ? `${localize(
- `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`
- )} (${stateString})`
- : stateString;
- }
-
- _localizePreset(localize, preset) {
- return localize(`state_attributes.climate.preset_mode.${preset}`) || preset;
- }
-
- _renderPreset(attributes) {
- return (
- attributes.preset_mode && attributes.preset_mode !== CLIMATE_PRESET_NONE
- );
- }
-}
-customElements.define("ha-climate-state", HaClimateState);
diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
new file mode 100644
index 0000000000..39ece5ee43
--- /dev/null
+++ b/src/components/ha-climate-state.ts
@@ -0,0 +1,139 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import { CLIMATE_PRESET_NONE } from "../data/climate";
+import type { HomeAssistant } from "../types";
+
+@customElement("ha-climate-state")
+class HaClimateState extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj!: HassEntity;
+
+ protected render(): TemplateResult {
+ const currentStatus = this._computeCurrentStatus();
+
+ return html`[[currentStatus]]
-
+ ${this.stateObj.state !== "unknown"
+ ? html`
+ ${this._localizeState()}
+ ${this.stateObj.attributes.preset_mode &&
+ this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+ ? html`-
+ ${this.hass.localize(
+ `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+ ) || this.stateObj.attributes.preset_mode}`
+ : ""}
+ `
+ : ""}
+
+
+ ${currentStatus
+ ? html`${this._computeTarget()}
+
+ ${this.hass.localize("ui.card.climate.currently")}:
+
`
+ : ""}`;
+ }
+
+ private _computeCurrentStatus(): string | undefined {
+ if (!this.hass || !this.stateObj) {
+ return undefined;
+ }
+
+ if (this.stateObj.attributes.current_temperature != null) {
+ return `${this.stateObj.attributes.current_temperature} ${this.hass.config.unit_system.temperature}`;
+ }
+
+ if (this.stateObj.attributes.current_humidity != null) {
+ return `${this.stateObj.attributes.current_humidity} %`;
+ }
+
+ return undefined;
+ }
+
+ private _computeTarget(): string {
+ if (!this.hass || !this.stateObj) {
+ return "";
+ }
+
+ if (
+ this.stateObj.attributes.target_temp_low != null &&
+ this.stateObj.attributes.target_temp_high != null
+ ) {
+ return `${this.stateObj.attributes.target_temp_low}-${this.stateObj.attributes.target_temp_high} ${this.hass.config.unit_system.temperature}`;
+ }
+
+ if (this.stateObj.attributes.temperature != null) {
+ return `${this.stateObj.attributes.temperature} ${this.hass.config.unit_system.temperature}`;
+ }
+ if (
+ this.stateObj.attributes.target_humidity_low != null &&
+ this.stateObj.attributes.target_humidity_high != null
+ ) {
+ return `${this.stateObj.attributes.target_humidity_low}-${this.stateObj.attributes.target_humidity_high}%`;
+ }
+
+ if (this.stateObj.attributes.humidity != null) {
+ return `${this.stateObj.attributes.humidity} %`;
+ }
+
+ return "";
+ }
+
+ private _localizeState(): string {
+ const stateString = this.hass.localize(
+ `component.climate.state._.${this.stateObj.state}`
+ );
+
+ return this.stateObj.attributes.hvac_action
+ ? `${this.hass.localize(
+ `state_attributes.climate.hvac_action.${this.stateObj.attributes.hvac_action}`
+ )} (${stateString})`
+ : stateString;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ white-space: nowrap;
+ }
+
+ .target {
+ color: var(--primary-text-color);
+ }
+
+ .current {
+ color: var(--secondary-text-color);
+ }
+
+ .state-label {
+ font-weight: bold;
+ text-transform: capitalize;
+ }
+
+ .unit {
+ display: inline-block;
+ direction: ltr;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-climate-state": HaClimateState;
+ }
+}
diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index b49d57c897..5dc3b7f826 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -81,6 +81,7 @@ export class HaCodeEditor extends UpdatingElement {
protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
+ this._blockKeyboardShortcuts();
this._load();
}
@@ -232,6 +233,10 @@ export class HaCodeEditor extends UpdatingElement {
this.codemirror!.on("changes", () => this._onChange());
}
+ private _blockKeyboardShortcuts() {
+ this.addEventListener("keydown", (ev) => ev.stopPropagation());
+ }
+
private _onChange(): void {
const newValue = this.value;
if (newValue === this._value) {
diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 884c893d56..895a33f984 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -60,7 +60,7 @@ export class HaDateRangePicker extends LitElement {
?ranges=${this.ranges !== undefined}
>
${currentStatus}
+
- html`
class="header_button"
dir=${computeRTLDirection(hass)}
>
-
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index 61f189713c..5b84c8d4e2 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -38,6 +38,7 @@ class HaHLSPlayer extends LitElement {
@property({ type: Boolean, attribute: "allow-exoplayer" })
public allowExoPlayer = false;
+ // don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement;
@internalProperty() private _attached = false;
@@ -154,6 +155,9 @@ class HaHLSPlayer extends LitElement {
}
private _resizeExoPlayer = () => {
+ if (!this._videoEl) {
+ return;
+ }
const rect = this._videoEl.getBoundingClientRect();
this.hass!.auth.external!.fireMessage({
type: "exoplayer/resize",
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index a620ec0204..147fd5b1b1 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -14,8 +14,8 @@ class HaLabeledSlider extends PolymerElement {
}
.title {
- margin-bottom: 16px;
- color: var(--secondary-text-color);
+ margin-bottom: 8px;
+ color: var(--primary-text-color);
}
.slider-container {
@@ -43,7 +43,6 @@ class HaLabeledSlider extends PolymerElement {
step="[[step]]"
pin="[[pin]]"
disabled="[[disabled]]"
- disabled="[[disabled]]"
value="{{value}}"
>
diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts
index 7531c989d9..b95d012938 100644
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -6,9 +6,9 @@ import {
CSSResult,
customElement,
html,
+ internalProperty,
LitElement,
property,
- internalProperty,
TemplateResult,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
@@ -62,7 +62,7 @@ class HaMenuButton extends LitElement {
aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
@click=${this._toggleMenu}
>
-
+
+
+ `;
+ }
+
+ private _handleTransitionEnd() {
+ this._container.style.removeProperty("height");
+ }
+
+ private _toggleContainer(): void {
+ const scrollHeight = this._container.scrollHeight;
+ this._container.style.height = `${scrollHeight}px`;
+
+ if (this.expanded) {
+ setTimeout(() => {
+ this._container.style.height = "0px";
+ }, 0);
+ }
+
+ this.expanded = !this.expanded;
+ fireEvent(this, "expanded-changed", { expanded: this.expanded });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: block;
+ }
+
+ :host([outlined]) {
+ box-shadow: none;
+ border-width: 1px;
+ border-style: solid;
+ border-color: var(
+ --ha-card-border-color,
+ var(--divider-color, #e0e0e0)
+ );
+ border-radius: var(--ha-card-border-radius, 4px);
+ }
+
+ .summary {
+ display: flex;
+ padding: 0px 16px;
+ min-height: 48px;
+ align-items: center;
+ cursor: pointer;
+ overflow: hidden;
+ }
+
+ .summary-icon {
+ transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ margin-left: auto;
+ }
+
+ .summary-icon.expanded {
+ transform: rotate(180deg);
+ }
+
+ .container {
+ overflow: hidden;
+ transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+ height: 0px;
+ }
+
+ .container.expanded {
+ height: auto;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-expansion-panel": HaExpansionPanel;
+ }
+
+ // for fire event
+ interface HASSDomEvents {
+ "expanded-changed": {
+ expanded: boolean;
+ };
+ }
+}
diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts
index c8c956ceca..454a01e718 100644
--- a/src/components/ha-form/ha-form-boolean.ts
+++ b/src/components/ha-form/ha-form-boolean.ts
@@ -27,7 +27,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
@property() public suffix!: string;
- @query("paper-checkbox") private _input?: HTMLElement;
+ @query("paper-checkbox", true) private _input?: HTMLElement;
public focus() {
if (this._input) {
diff --git a/src/components/ha-form/ha-form-float.ts b/src/components/ha-form/ha-form-float.ts
index d915434a3d..9720f0ffd2 100644
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -21,7 +21,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
@property() public suffix!: string;
- @query("paper-input") private _input?: HTMLElement;
+ @query("paper-input", true) private _input?: HTMLElement;
public focus() {
if (this._input) {
diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts
index b46218ae6f..29f174a160 100644
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -35,7 +35,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
@internalProperty() private _init = false;
- @query("paper-menu-button") private _input?: HTMLElement;
+ @query("paper-menu-button", true) private _input?: HTMLElement;
public focus(): void {
if (this._input) {
diff --git a/src/components/ha-form/ha-form-positive_time_period_dict.ts b/src/components/ha-form/ha-form-positive_time_period_dict.ts
index b43bbd4ffa..d5a0db5975 100644
--- a/src/components/ha-form/ha-form-positive_time_period_dict.ts
+++ b/src/components/ha-form/ha-form-positive_time_period_dict.ts
@@ -20,7 +20,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
@property() public suffix!: string;
- @query("paper-time-input") private _input?: HTMLElement;
+ @query("paper-time-input", true) private _input?: HTMLElement;
public focus() {
if (this._input) {
diff --git a/src/components/ha-form/ha-form-select.ts b/src/components/ha-form/ha-form-select.ts
index 359a06c5a8..bac4f8d963 100644
--- a/src/components/ha-form/ha-form-select.ts
+++ b/src/components/ha-form/ha-form-select.ts
@@ -24,7 +24,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
@property() public suffix!: string;
- @query("ha-paper-dropdown-menu") private _input?: HTMLElement;
+ @query("ha-paper-dropdown-menu", true) private _input?: HTMLElement;
public focus() {
if (this._input) {
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index 46bdbee332..3f62f9de31 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -55,6 +55,7 @@ export class HaFormString extends LitElement implements HaFormElement {
id="iconButton"
title="Click to toggle between masked and clear password"
@click=${this._toggleUnmaskedPassword}
+ tabindex="-1"
>
- ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
- this._renderEmptySortable
- ? ""
- : this._renderPanels(beforeSpacer)
- )}
-
`
- : this._renderPanels(beforeSpacer)}
-
- ${this.editMode && this._hiddenPanels.length
- ? html`
- ${this._hiddenPanels.map((url) => {
- const panel = this.hass.panels[url];
- if (!panel) {
- return "";
- }
- return html`
-
-
-
-
-
-
+ ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
+ this._renderEmptySortable ? "" : this._renderPanels(beforeSpacer)
+ )}
+
+ ${this._renderSpacer()}
+ ${this._renderHiddenPanels()} `;
+ }
+
+ private _renderHiddenPanels() {
+ return html` ${this._hiddenPanels.length
+ ? html`${this._hiddenPanels.map((url) => {
+ const panel = this.hass.panels[url];
+ if (!panel) {
+ return "";
+ }
+ return html`
+
+
+
`;
+ }
+
+ private _renderUserItem() {
+ return html`
+
${this.hass.localize("ui.components.media-browser.no_items")}
+
${currentItem.media_content_id === "media-source://media_source/local/." ? html`
${this.hass.localize( @@ -398,7 +399,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${this.hass.localize( "ui.components.media-browser.local_media_files" - )}.` + )}` : ""}
`}
@@ -539,17 +540,20 @@ export class HaMediaPlayerBrowse extends LitElement {
mediaContentType?: string
): Promise${currentItem.media_content_id === "media-source://media_source/local/." ? html`
${this.hass.localize( @@ -398,7 +399,7 @@ export class HaMediaPlayerBrowse extends LitElement {
${this.hass.localize( "ui.components.media-browser.local_media_files" - )}.` + )}` : ""}
+
+
+
+ `
+ )
+ )}
+ - ${this.hass.localize( - "ui.dialogs.config_entry_system_options.title", - "integration", - this.hass.localize( - `component.${this._params.entry.domain}.title` - ) || this._params.entry.domain - )} -
-
${this._loading
? html`
+
@@ -112,22 +112,22 @@ class DialogConfigEntrySystemOptions extends LitElement {
`}
-
- ${!this._loading
- ? html`
-
- `
- : ""}
-
+ ${this._params.text} @@ -180,6 +181,9 @@ class DialogBox extends LitElement { /* Place above other dialogs */ --dialog-z-index: 104; } + .warning { + color: var(--warning-color); + } `, ]; } diff --git a/src/dialogs/generic/show-dialog-box.ts b/src/dialogs/generic/show-dialog-box.ts index 86c5cfee8b..5e965bab2f 100644 --- a/src/dialogs/generic/show-dialog-box.ts +++ b/src/dialogs/generic/show-dialog-box.ts @@ -5,6 +5,7 @@ interface BaseDialogParams { confirmText?: string; text?: string | TemplateResult; title?: string; + warning?: boolean; } export interface AlertDialogParams extends BaseDialogParams { diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts index ed9e3a05aa..c2ab0ca148 100644 --- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts +++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts @@ -29,7 +29,7 @@ export class HaImagecropperDialog extends LitElement { @internalProperty() private _open = false; - @query("img") private _image!: HTMLImageElement; + @query("img", true) private _image!: HTMLImageElement; private _cropper?: Cropper; diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js index d2d0d8770e..4e26d57e86 100644 --- a/src/dialogs/more-info/controls/more-info-cover.js +++ b/src/dialogs/more-info/controls/more-info-cover.js @@ -64,6 +64,10 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: {
- type: Object,
- },
-
- stateObj: {
- type: Object,
- },
-
- states: {
- type: Array,
- computed: "computeStates(stateObj, hass)",
- },
- };
- }
-
- static get observers() {
- return ["statesChanged(stateObj, states)"];
- }
-
- computeStates(stateObj, hass) {
- const states = [];
- const entIds = stateObj.attributes.entity_id || [];
-
- for (let i = 0; i < entIds.length; i++) {
- const state = hass.states[entIds[i]];
-
- if (state) {
- states.push(state);
- }
- }
-
- return states;
- }
-
- statesChanged(stateObj, states) {
- let groupDomainStateObj = false;
- let groupDomain = false;
-
- if (states && states.length > 0) {
- const baseStateObj = states.find((s) => s.state === "on") || states[0];
- groupDomain = computeStateDomain(baseStateObj);
-
- // Groups need to be filtered out or we'll show content of
- // first child above the children of the current group
- if (groupDomain !== "group") {
- groupDomainStateObj = {
- ...baseStateObj,
- entity_id: stateObj.entity_id,
- attributes: { ...baseStateObj.attributes },
- };
-
- for (let i = 0; i < states.length; i++) {
- if (groupDomain !== computeStateDomain(states[i])) {
- groupDomainStateObj = false;
- break;
- }
- }
- }
- }
-
- if (!groupDomainStateObj) {
- const el = dom(this.$.groupedControlDetails);
- if (el.lastChild) {
- el.removeChild(el.lastChild);
- }
- } else {
- dynamicContentUpdater(
- this.$.groupedControlDetails,
- "MORE-INFO-" + groupDomain.toUpperCase(),
- { stateObj: groupDomainStateObj, hass: this.hass }
- );
- }
- }
-}
-
-customElements.define("more-info-group", MoreInfoGroup);
diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts
new file mode 100644
index 0000000000..788d1a2f6b
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-group.ts
@@ -0,0 +1,111 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+ LitElement,
+ property,
+ CSSResult,
+ css,
+ internalProperty,
+ PropertyValues,
+} from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import "../../../state-summary/state-card-content";
+import { GroupEntity, HomeAssistant } from "../../../types";
+import {
+ importMoreInfoControl,
+ domainMoreInfoType,
+} from "../state_more_info_control";
+
+class MoreInfoGroup extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public stateObj?: GroupEntity;
+
+ @internalProperty() private _groupDomainStateObj?: HassEntity;
+
+ @internalProperty() private _moreInfoType?: string;
+
+ protected updated(changedProperties: PropertyValues) {
+ if (
+ !this.hass ||
+ !this.stateObj ||
+ (!changedProperties.has("hass") && !changedProperties.has("stateObj"))
+ ) {
+ return;
+ }
+
+ const states = this.stateObj.attributes.entity_id
+ .map((entity_id) => this.hass.states[entity_id])
+ .filter((state) => state);
+
+ if (!states.length) {
+ this._groupDomainStateObj = undefined;
+ this._moreInfoType = undefined;
+ return;
+ }
+
+ const baseStateObj = states.find((s) => s.state === "on") || states[0];
+ const groupDomain = computeStateDomain(baseStateObj);
+
+ // Groups need to be filtered out or we'll show content of
+ // first child above the children of the current group
+ if (
+ groupDomain !== "group" &&
+ states.every((state) => groupDomain === computeStateDomain(state))
+ ) {
+ this._groupDomainStateObj = {
+ ...baseStateObj,
+ entity_id: this.stateObj.entity_id,
+ attributes: { ...baseStateObj.attributes },
+ };
+ const type = domainMoreInfoType(groupDomain);
+ importMoreInfoControl(type);
+ this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+ } else {
+ this._groupDomainStateObj = undefined;
+ this._moreInfoType = undefined;
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this.stateObj) {
+ return html``;
+ }
+ return html`${this._moreInfoType
+ ? dynamicElement(this._moreInfoType, {
+ hass: this.hass,
+ stateObj: this._groupDomainStateObj,
+ })
+ : ""}
+ ${this.stateObj.attributes.entity_id.map((entity_id) => {
+ const state = this.hass!.states[entity_id];
+ if (!state) {
+ return "";
+ }
+ return html`
+
-
${this._showValue(this.stateObj.attributes.pressure)
? html`
${this.hass.localize("ui.card.weather.attributes.temperature")}
- ${this.stateObj.attributes.temperature} ${this.getUnit("temperature")}
+ ${this.stateObj.attributes.temperature}
+ ${getWeatherUnit(this.hass, "temperature")}
-
`
@@ -104,7 +109,7 @@ class MoreInfoWeather extends LitElement {
${this._showValue(this.stateObj.attributes.humidity)
? html`
${this.hass.localize("ui.card.weather.attributes.air_pressure")}
${this.stateObj.attributes.pressure}
- ${this.getUnit("air_pressure")}
+ ${getWeatherUnit(this.hass, "air_pressure")}
-
`;
diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
index fbaa723ec8..8f7ecfff2f 100644
--- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
+++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
@@ -42,6 +42,16 @@ import {
fetchInputText,
updateInputText,
} from "../../../../../data/input_text";
+import {
+ deleteCounter,
+ fetchCounter,
+ updateCounter,
+} from "../../../../../data/counter";
+import {
+ deleteTimer,
+ fetchTimer,
+ updateTimer,
+} from "../../../../../data/timer";
import { showConfirmationDialog } from "../../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../../types";
import type { Helper } from "../../../helpers/const";
@@ -50,6 +60,8 @@ import "../../../helpers/forms/ha-input_datetime-form";
import "../../../helpers/forms/ha-input_number-form";
import "../../../helpers/forms/ha-input_select-form";
import "../../../helpers/forms/ha-input_text-form";
+import "../../../helpers/forms/ha-counter-form";
+import "../../../helpers/forms/ha-timer-form";
import "../../entity-registry-basic-editor";
import type { HaEntityRegistryBasicEditor } from "../../entity-registry-basic-editor";
import { haStyle } from "../../../../../resources/styles";
@@ -80,6 +92,16 @@ const HELPERS = {
update: updateInputSelect,
delete: deleteInputSelect,
},
+ counter: {
+ fetch: fetchCounter,
+ update: updateCounter,
+ delete: deleteCounter,
+ },
+ timer: {
+ fetch: fetchTimer,
+ update: updateTimer,
+ delete: deleteTimer,
+ },
};
@customElement("entity-settings-helper-tab")
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index 5ac897dc78..e6b7ea577d 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -27,6 +27,7 @@ import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box
import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
+import { domainIcon } from "../../../common/entity/domain_icon";
@customElement("entity-registry-settings")
export class EntityRegistrySettings extends LitElement {
@@ -93,7 +94,11 @@ export class EntityRegistrySettings extends LitElement {
.value=${this._icon}
@value-changed=${this._iconChanged}
.label=${this.hass.localize("ui.dialogs.entity_registry.editor.icon")}
- .placeholder=${this.entry.original_icon}
+ .placeholder=${this.entry.original_icon ||
+ domainIcon(
+ computeDomain(this.entry.entity_id),
+ this.hass.states[this.entry.entity_id]
+ )}
.disabled=${this._submitting}
.errorMessage=${this.hass.localize(
"ui.dialogs.entity_registry.editor.icon_error"
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 366c852fa9..85ffc4a26a 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -97,13 +97,15 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
@internalProperty() private _filter = "";
+ @internalProperty() private _numHiddenEntities = 0;
+
@internalProperty() private _searchParms = new URLSearchParams(
window.location.search
);
@internalProperty() private _selectedEntities: string[] = [];
- @query("hass-tabs-subpage-data-table")
+ @query("hass-tabs-subpage-data-table", true)
private _dataTable!: HaTabsSubpageDataTable;
private getDialog?: () => DialogEntityEditor | undefined;
@@ -118,6 +120,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
filters.forEach((value, key) => {
switch (key) {
case "config_entry": {
+ // If we are requested to show the entities for a given config entry,
+ // also show the disabled ones by default.
+ this._showDisabled = true;
+
if (!entries) {
this._loadConfigEntries();
break;
@@ -132,11 +138,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
filterTexts.push(
`${this.hass.localize(
"ui.panel.config.integrations.integration"
- )} ${integrationName}${
+ )} "${integrationName}${
integrationName !== configEntry.title
? `: ${configEntry.title}`
: ""
- }`
+ }"`
);
break;
}
@@ -262,11 +268,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
showUnavailable: boolean,
showReadOnly: boolean
): EntityRow[] => {
- if (!showDisabled) {
- entities = entities.filter((entity) => !entity.disabled_by);
- }
-
const result: EntityRow[] = [];
+ // If nothing gets filtered, this is our correct count of entities
+ let startLength = entities.length + stateEntities.length;
entities = showReadOnly ? entities.concat(stateEntities) : entities;
@@ -276,10 +280,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
entities = entities.filter(
(entity) => entity.config_entry_id === value
);
+ // If we have an active filter and `showReadOnly` is true, the length of `entities` is correct.
+ // If however, the read-only entities were not added before, we need to check how many would
+ // have matched the active filter and add that number to the count.
+ startLength = entities.length;
+ if (!showReadOnly) {
+ startLength += stateEntities.filter(
+ (entity) => entity.config_entry_id === value
+ ).length;
+ }
break;
}
});
+ if (!showDisabled) {
+ entities = entities.filter((entity) => !entity.disabled_by);
+ }
+
for (const entry of entities) {
const entity = this.hass.states[entry.entity_id];
const unavailable = entity?.state === UNAVAILABLE;
@@ -315,6 +332,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
});
}
+ this._numHiddenEntities = startLength - result.length;
return result;
}
);
@@ -358,6 +376,16 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
this.hass.localize,
this._entries
);
+
+ const entityData = this._filteredEntities(
+ this._entities,
+ this._stateEntities,
+ this._searchParms,
+ this._showDisabled,
+ this._showUnavailable,
+ this._showReadOnly
+ );
+
const headerToolbar = this._selectedEntities.length
? html`
${this.hass.localize("ui.card.weather.attributes.humidity")}
@@ -115,12 +120,13 @@ class MoreInfoWeather extends LitElement {
${this._showValue(this.stateObj.attributes.wind_speed)
? html`
-
${DOMAINS_WITH_MORE_INFO.includes(domain) &&
- this._computeShowHistoryComponent(entityId)
+ (this._computeShowHistoryComponent(entityId) ||
+ this._computeShowLogBookComponent(entityId))
? html`
-
+
+
${this.hass.localize("ui.card.weather.attributes.wind_speed")}
- ${this.getWind(
+ ${getWind(
+ this.hass,
this.stateObj.attributes.wind_speed,
this.stateObj.attributes.wind_bearing
)}
@@ -131,12 +137,13 @@ class MoreInfoWeather extends LitElement {
${this._showValue(this.stateObj.attributes.visibility)
? html`
`;
@@ -193,7 +202,7 @@ class MoreInfoWeather extends LitElement {
static get styles(): CSSResult {
return css`
- ha-icon {
+ ha-svg-icon {
color: var(--paper-item-icon-color);
}
.section {
@@ -247,41 +256,6 @@ class MoreInfoWeather extends LitElement {
});
}
- private getUnit(measure: string): string {
- const lengthUnit = this.hass.config.unit_system.length || "";
- switch (measure) {
- case "air_pressure":
- return lengthUnit === "km" ? "hPa" : "inHg";
- case "length":
- return lengthUnit;
- case "precipitation":
- return lengthUnit === "km" ? "mm" : "in";
- default:
- return this.hass.config.unit_system[measure] || "";
- }
- }
-
- private windBearingToText(degree: string): string {
- const degreenum = parseInt(degree, 10);
- if (isFinite(degreenum)) {
- // eslint-disable-next-line no-bitwise
- return cardinalDirections[(((degreenum + 11.25) / 22.5) | 0) % 16];
- }
- return degree;
- }
-
- private getWind(speed: string, bearing: string) {
- if (bearing != null) {
- const cardinalDirection = this.windBearingToText(bearing);
- return `${speed} ${this.getUnit("length")}/h (${
- this.hass.localize(
- `ui.card.weather.cardinal_direction.${cardinalDirection.toLowerCase()}`
- ) || cardinalDirection
- })`;
- }
- return `${speed} ${this.getUnit("length")}/h`;
- }
-
private _showValue(item: string): boolean {
return typeof item !== "undefined" && item !== null;
}
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 9851cf2b5b..836273f07f 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -17,14 +17,10 @@ import {
DOMAINS_MORE_INFO_NO_HISTORY,
DOMAINS_WITH_MORE_INFO,
} from "../../common/const";
-import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
-import {
- stateMoreInfoType,
- importMoreInfoControl,
-} from "./state_more_info_control";
+
import { navigate } from "../../common/navigate";
import "../../components/ha-dialog";
import "../../components/ha-header-bar";
@@ -38,9 +34,18 @@ import { showConfirmationDialog } from "../generic/show-dialog-box";
import "./ha-more-info-history";
import "./ha-more-info-logbook";
import "./controls/more-info-default";
+import { CONTINUOUS_DOMAINS } from "../../data/logbook";
+import "./more-info-content";
const DOMAINS_NO_INFO = ["camera", "configurator"];
+/**
+ * Entity domains that should be editable *if* they have an id present;
+ * {@see shouldShowEditIcon}.
+ * */
const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
+/**
+ * Entity Domains that should always be editable; {@see shouldShowEditIcon}.
+ * */
const EDITABLE_DOMAINS = ["script"];
export interface MoreInfoDialogParams {
@@ -55,14 +60,13 @@ export class MoreInfoDialog extends LitElement {
@internalProperty() private _entityId?: string | null;
- @internalProperty() private _moreInfoType?: string;
-
@internalProperty() private _currTabIndex = 0;
public showDialog(params: MoreInfoDialogParams) {
this._entityId = params.entityId;
if (!this._entityId) {
this.closeDialog();
+ return;
}
this.large = false;
}
@@ -73,21 +77,18 @@ export class MoreInfoDialog extends LitElement {
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
- protected updated(changedProperties) {
- if (!this.hass || !this._entityId || !changedProperties.has("_entityId")) {
- return;
+ protected shouldShowEditIcon(domain, stateObj): boolean {
+ if (EDITABLE_DOMAINS_WITH_ID.includes(domain) && stateObj.attributes.id) {
+ return true;
}
- const stateObj = this.hass.states[this._entityId];
- if (!stateObj) {
- return;
+ if (EDITABLE_DOMAINS.includes(domain)) {
+ return true;
}
- if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
- this._moreInfoType = stateObj.attributes.custom_ui_more_info;
- } else {
- const type = stateMoreInfoType(stateObj);
- importMoreInfoControl(type);
- this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+ if (domain === "person" && stateObj.attributes.editable !== "false") {
+ return true;
}
+
+ return false;
}
protected render() {
@@ -137,10 +138,7 @@ export class MoreInfoDialog extends LitElement {
`
: ""}
- ${this.hass.user!.is_admin &&
- ((EDITABLE_DOMAINS_WITH_ID.includes(domain) &&
- stateObj.attributes.id) ||
- EDITABLE_DOMAINS.includes(domain))
+ ${this.shouldShowEditIcon(domain, stateObj)
? html`
-
`
@@ -151,9 +158,9 @@ class MoreInfoWeather extends LitElement {
${this.hass.localize("ui.card.weather.attributes.visibility")}
- ${this.stateObj.attributes.visibility} ${this.getUnit("length")}
+ ${this.stateObj.attributes.visibility}
+ ${getWeatherUnit(this.hass, "length")}
${item.condition
? html`
-
- ${item.templow} ${this.getUnit("temperature")}
+ ${item.templow}
+ ${getWeatherUnit(this.hass, "temperature")}
`
: ""}
- ${item.temperature} ${this.getUnit("temperature")}
+ ${item.temperature}
+ ${getWeatherUnit(this.hass, "temperature")}
@@ -250,12 +250,32 @@ export class MoreInfoDialog extends LitElement { private _computeShowHistoryComponent(entityId) { return ( - (isComponentLoaded(this.hass, "history") || - isComponentLoaded(this.hass, "logbook")) && + isComponentLoaded(this.hass, "history") && !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId)) ); } + private _computeShowLogBookComponent(entityId): boolean { + if (!isComponentLoaded(this.hass, "logbook")) { + return false; + } + + const stateObj = this.hass.states[entityId]; + if (!stateObj || stateObj.attributes.unit_of_measurement) { + return false; + } + + const domain = computeDomain(entityId); + if ( + CONTINUOUS_DOMAINS.includes(domain) || + DOMAINS_MORE_INFO_NO_HISTORY.includes(domain) + ) { + return false; + } + + return true; + } + private _removeEntity() { const entityId = this._entityId!; showConfirmationDialog(this, { @@ -283,14 +303,12 @@ export class MoreInfoDialog extends LitElement { private _gotoEdit() { const stateObj = this.hass.states[this._entityId!]; const domain = computeDomain(this._entityId!); - navigate( - this, - `/config/${domain}/edit/${ - EDITABLE_DOMAINS_WITH_ID.includes(domain) - ? stateObj.attributes.id - : stateObj.entity_id - }` - ); + let idToPassThroughUrl = stateObj.entity_id; + if (EDITABLE_DOMAINS_WITH_ID.includes(domain) || domain === "person") { + idToPassThroughUrl = stateObj.attributes.id; + } + + navigate(this, `/config/${domain}/edit/${idToPassThroughUrl}`); this.closeDialog(); } diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts index 93970b7b93..eb393e3395 100644 --- a/src/dialogs/more-info/ha-more-info-history.ts +++ b/src/dialogs/more-info/ha-more-info-history.ts @@ -78,7 +78,6 @@ export class MoreInfoHistory extends LitElement { this.hass!, this.entityId, { - refresh: 60, cacheKey: `more_info.${this.entityId}`, hoursToShow: 24, }, diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts index 76d05562c5..107636a7c0 100644 --- a/src/dialogs/more-info/ha-more-info-logbook.ts +++ b/src/dialogs/more-info/ha-more-info-logbook.ts @@ -155,9 +155,9 @@ export class MoreInfoLogbook extends LitElement { overflow: auto; } @media all and (max-width: 450px), all and (max-height: 500px) { - ha-logbook { - max-height: unset; - } + ha-logbook { + max-height: unset; + } } ha-circular-progress { display: flex; diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts new file mode 100644 index 0000000000..47570226fa --- /dev/null +++ b/src/dialogs/more-info/more-info-content.ts @@ -0,0 +1,57 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { property, PropertyValues, UpdatingElement } from "lit-element"; + +import { HomeAssistant } from "../../types"; +import dynamicContentUpdater from "../../common/dom/dynamic_content_updater"; +import { stateMoreInfoType } from "./state_more_info_control"; +import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers"; + +class MoreInfoContent extends UpdatingElement { + @property({ attribute: false }) public hass?: HomeAssistant; + + @property() public stateObj?: HassEntity; + + private _detachedChild?: ChildNode; + + // This is not a lit element, but an updating element, so we implement update + protected update(changedProps: PropertyValues): void { + super.update(changedProps); + const stateObj = this.stateObj; + const hass = this.hass; + + if (!stateObj || !hass) { + if (this.lastChild) { + this._detachedChild = this.lastChild; + // Detach child to prevent it from doing work. + this.removeChild(this.lastChild); + } + return; + } + + if (this._detachedChild) { + this.appendChild(this._detachedChild); + this._detachedChild = undefined; + } + + let moreInfoType: string | undefined; + + if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) { + moreInfoType = stateObj.attributes.custom_ui_more_info; + } else { + const type = stateMoreInfoType(stateObj); + importMoreInfoControl(type); + moreInfoType = type === "hidden" ? undefined : `more-info-${type}`; + } + + if (!moreInfoType) { + return; + } + + dynamicContentUpdater(this, moreInfoType.toUpperCase(), { + hass, + stateObj, + }); + } +} + +customElements.define("more-info-content", MoreInfoContent); diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts index c2b97d9c59..6f8cf904ab 100644 --- a/src/dialogs/more-info/state_more_info_control.ts +++ b/src/dialogs/more-info/state_more_info_control.ts @@ -32,6 +32,10 @@ const LAZY_LOADED_MORE_INFO_CONTROL = { export const stateMoreInfoType = (stateObj: HassEntity): string => { const domain = computeStateDomain(stateObj); + return domainMoreInfoType(domain); +}; + +export const domainMoreInfoType = (domain: string): string => { if (DOMAINS_WITH_MORE_INFO.includes(domain)) { return domain; } diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js index 927af2f3a9..0ad149e9f0 100644 --- a/src/dialogs/notifications/notification-drawer.js +++ b/src/dialogs/notifications/notification-drawer.js @@ -40,7 +40,7 @@ export class HuiNotificationDrawer extends EventsMixin( padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); - height: calc(100% - 65px); + height: calc(100% - 1px - var(--header-height)); box-sizing: border-box; background-color: var(--primary-background-color); color: var(--primary-text-color); @@ -50,6 +50,11 @@ export class HuiNotificationDrawer extends EventsMixin( padding: 0 16px 16px; } + .notification-actions { + padding: 0 16px 16px; + text-align: center; + } + .empty { padding: 16px; text-align: center; @@ -69,6 +74,13 @@ export class HuiNotificationDrawer extends EventsMixin(
+
+ [[localize('ui.notification_drawer.dismiss_all')]]
+
+
+
[[localize('ui.notification_drawer.empty')]];
@property() public showAsYaml = false;
diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
index 7f0cac03f2..6773c324a9 100644
--- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
@@ -31,7 +31,6 @@ export class HaDeviceActionsOzw extends LitElement {
@property()
private ozw_instance = 1;
-
protected updated(changedProperties: PropertyValues) {
if (changedProperties.has("device")) {
const identifiers:
diff --git a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
new file mode 100644
index 0000000000..c83d785fdd
--- /dev/null
+++ b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
@@ -0,0 +1,53 @@
+import {
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ css,
+} from "lit-element";
+import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
+import { removeTasmotaDeviceEntry } from "../../../../../../data/tasmota";
+import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../../types";
+
+@customElement("ha-device-actions-tasmota")
+export class HaDeviceActionsTasmota extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public device!: DeviceRegistryEntry;
+
+ protected render(): TemplateResult {
+ return html`
+
+ ${this.hass.localize("ui.panel.config.devices.delete")}
+
+ `;
+ }
+
+ private async _confirmDeleteEntry(): Promise {
+ const confirmed = await showConfirmationDialog(this, {
+ text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+ });
+
+ if (!confirmed) {
+ return;
+ }
+
+ await removeTasmotaDeviceEntry(this.hass!, this.device.id);
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ :host {
+ display: flex;
+ justify-content: space-between;
+ }
+ `,
+ ];
+ }
+}
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index 22c2ea190a..15a471bd6c 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -259,7 +259,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "automation")
? html`
-
-
-
@@ -532,6 +528,19 @@ export class HaConfigDevicePage extends LitElement {
`);
}
+ if (integrations.includes("tasmota")) {
+ import(
+ "./device-detail/integration-elements/tasmota/ha-device-actions-tasmota"
+ );
+ templates.push(html`
+
@@ -88,6 +100,7 @@ export class HuiNotificationDrawer extends EventsMixin(
notifications: {
type: Array,
computed: "_computeNotifications(open, hass, _notificationsBackend)",
+ observer: "_notificationsChanged",
},
_notificationsBackend: {
type: Array,
@@ -111,10 +124,23 @@ export class HuiNotificationDrawer extends EventsMixin(
this.open = false;
}
+ _dismissAll() {
+ this.notifications.forEach((notification) => {
+ this.hass.callService("persistent_notification", "dismiss", {
+ notification_id: notification.notification_id,
+ });
+ });
+ this.open = false;
+ }
+
_empty(notifications) {
return notifications.length === 0;
}
+ _moreThanOne(notifications) {
+ return notifications.length > 1;
+ }
+
_openChanged(open) {
if (open) {
// Render closed then animate open
@@ -130,6 +156,17 @@ export class HuiNotificationDrawer extends EventsMixin(
}
}
+ _notificationsChanged(newNotifications, oldNotifications) {
+ // automatically close drawer when last notification has been dismissed
+ if (
+ this.open &&
+ oldNotifications.length > 0 &&
+ !newNotifications.length === 0
+ ) {
+ this.open = false;
+ }
+ }
+
_computeNotifications(open, hass, notificationsBackend) {
if (!open) {
return [];
@@ -139,7 +176,22 @@ export class HuiNotificationDrawer extends EventsMixin(
.filter((entityId) => computeDomain(entityId) === "configurator")
.map((entityId) => hass.states[entityId]);
- return notificationsBackend.concat(configuratorEntities);
+ const notifications = notificationsBackend.concat(configuratorEntities);
+
+ notifications.sort(function (n1, n2) {
+ const d1 = new Date(n1.created_at);
+ const d2 = new Date(n2.created_at);
+
+ if (d1 < d2) {
+ return 1;
+ }
+ if (d1 > d2) {
+ return -1;
+ }
+ return 0;
+ });
+
+ return notifications;
}
showDialog({ narrow }) {
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
new file mode 100644
index 0000000000..95c4ce18bb
--- /dev/null
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -0,0 +1,418 @@
+import "@material/mwc-list/mwc-list";
+import type { List } from "@material/mwc-list/mwc-list";
+import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import type { ListItem } from "@material/mwc-list/mwc-list-item";
+import { mdiConsoleLine } from "@mdi/js";
+import {
+ css,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ PropertyValues,
+ query,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { styleMap } from "lit-html/directives/style-map";
+import { scroll } from "lit-virtualizer";
+import memoizeOne from "memoize-one";
+import { componentsWithService } from "../../common/config/components_with_service";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { domainIcon } from "../../common/entity/domain_icon";
+import "../../common/search/search-input";
+import { compare } from "../../common/string/compare";
+import {
+ fuzzyFilterSort,
+ ScorableTextItem,
+} from "../../common/string/filter/sequence-matching";
+import { debounce } from "../../common/util/debounce";
+import "../../components/ha-circular-progress";
+import "../../components/ha-dialog";
+import "../../components/ha-header-bar";
+import { domainToName } from "../../data/integration";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import {
+ ConfirmationDialogParams,
+ showConfirmationDialog,
+} from "../generic/show-dialog-box";
+import { QuickBarParams } from "./show-dialog-quick-bar";
+
+interface QuickBarItem extends ScorableTextItem {
+ icon: string;
+ action(data?: any): void;
+}
+
+@customElement("ha-quick-bar")
+export class QuickBar extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @internalProperty() private _commandItems: QuickBarItem[] = [];
+
+ @internalProperty() private _entityItems: QuickBarItem[] = [];
+
+ @internalProperty() private _items?: QuickBarItem[] = [];
+
+ @internalProperty() private _filter = "";
+
+ @internalProperty() private _search = "";
+
+ @internalProperty() private _opened = false;
+
+ @internalProperty() private _commandMode = false;
+
+ @internalProperty() private _done = false;
+
+ @query("search-input", false) private _filterInputField?: HTMLElement;
+
+ private _focusSet = false;
+
+ public async showDialog(params: QuickBarParams) {
+ this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
+ this._commandItems = this._generateCommandItems();
+ this._entityItems = this._generateEntityItems();
+ this._opened = true;
+ }
+
+ public closeDialog() {
+ this._opened = false;
+ this._done = false;
+ this._focusSet = false;
+ this._filter = "";
+ this._search = "";
+ this._items = [];
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
+ protected updated(changedProperties: PropertyValues) {
+ if (
+ this._opened &&
+ (changedProperties.has("_filter") ||
+ changedProperties.has("_commandMode"))
+ ) {
+ this._setFilteredItems();
+ }
+ }
+
+ protected render() {
+ if (!this._opened) {
+ return html``;
+ }
+
+ return html`
+
+ ${this._search}` : this._search}
+ @keydown=${this._handleInputKeyDown}
+ @focus=${this._setFocusFirstListItem}
+ >
+ ${this._commandMode
+ ? html`
+ ${!this._items
+ ? html`
+ ${scroll({
+ items: this._items,
+ renderItem: (item: QuickBarItem, index?: number) =>
+ this._renderItem(item, index),
+ })}
+ `}
+
+ `;
+ }
+
+ private _handleOpened() {
+ this._setFilteredItems();
+ this.updateComplete.then(() => {
+ this._done = true;
+ });
+ }
+
+ private async _handleRangeChanged(e) {
+ if (this._focusSet) {
+ return;
+ }
+ if (e.firstVisible > -1) {
+ this._focusSet = true;
+ await this.updateComplete;
+ this._setFocusFirstListItem();
+ }
+ }
+
+ private _renderItem(item: QuickBarItem, index?: number) {
+ return html`
+
+
+ `;
+ }
+
+ private async processItemAndCloseDialog(item: QuickBarItem, index: number) {
+ this._addSpinnerToCommandItem(index);
+
+ await item.action();
+ this.closeDialog();
+ }
+
+ private _handleSelected(ev: SingleSelectedEvent) {
+ const index = ev.detail.index;
+ const item = ((ev.target as List).items[index] as any).item;
+ this.processItemAndCloseDialog(item, index);
+ }
+
+ private _handleInputKeyDown(ev: KeyboardEvent) {
+ if (ev.code === "Enter") {
+ if (!this._items?.length) {
+ return;
+ }
+
+ this.processItemAndCloseDialog(this._items[0], 0);
+ } else if (ev.code === "ArrowDown") {
+ ev.preventDefault();
+ this._getItemAtIndex(0)?.focus();
+ this._getItemAtIndex(1)?.focus();
+ }
+ }
+
+ private _getItemAtIndex(index: number): ListItem | null {
+ return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
+ }
+
+ private _addSpinnerToCommandItem(index: number): void {
+ const spinner = document.createElement("ha-circular-progress");
+ spinner.size = "small";
+ spinner.slot = "meta";
+ spinner.active = true;
+ this._getItemAtIndex(index)?.appendChild(spinner);
+ }
+
+ private _handleSearchChange(ev: CustomEvent): void {
+ const newFilter = ev.detail.value;
+ const oldCommandMode = this._commandMode;
+
+ if (newFilter.startsWith(">")) {
+ this._commandMode = true;
+ this._search = newFilter.substring(1);
+ } else {
+ this._commandMode = false;
+ this._search = newFilter;
+ }
+
+ this._debouncedSetFilter(this._search);
+
+ if (oldCommandMode !== this._commandMode) {
+ this._items = undefined;
+ this._focusSet = false;
+ }
+ }
+
+ private _debouncedSetFilter = debounce((filter: string) => {
+ this._filter = filter;
+ }, 100);
+
+ private _setFocusFirstListItem() {
+ // @ts-ignore
+ this._getItemAtIndex(0)?.rippleHandlers.startFocus();
+ }
+
+ private _handleListItemKeyDown(ev: KeyboardEvent) {
+ const isSingleCharacter = ev.key.length === 1;
+ const isFirstListItem =
+ (ev.target as HTMLElement).getAttribute("index") === "0";
+ if (ev.key === "ArrowUp") {
+ if (isFirstListItem) {
+ this._filterInputField?.focus();
+ }
+ }
+ if (ev.key === "Backspace" || isSingleCharacter) {
+ (ev.currentTarget as List).scrollTop = 0;
+ this._filterInputField?.focus();
+ }
+ }
+
+ private _generateCommandItems(): QuickBarItem[] {
+ return [
+ ...this._generateReloadCommands(),
+ ...this._generateServerControlCommands(),
+ ].sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+ }
+
+ private _generateReloadCommands(): QuickBarItem[] {
+ const reloadableDomains = componentsWithService(this.hass, "reload").sort();
+
+ return reloadableDomains.map((domain) => ({
+ text:
+ this.hass.localize(`ui.dialogs.quick-bar.commands.reload.${domain}`) ||
+ this.hass.localize(
+ "ui.dialogs.quick-bar.commands.reload.reload",
+ "domain",
+ domainToName(this.hass.localize, domain)
+ ),
+ icon: domainIcon(domain),
+ action: () => this.hass.callService(domain, "reload"),
+ }));
+ }
+
+ private _generateServerControlCommands(): QuickBarItem[] {
+ const serverActions = ["restart", "stop"];
+
+ return serverActions.map((action) =>
+ this._generateConfirmationCommand(
+ {
+ text: this.hass.localize(
+ "ui.dialogs.quick-bar.commands.server_control.perform_action",
+ "action",
+ this.hass.localize(
+ `ui.dialogs.quick-bar.commands.server_control.${action}`
+ )
+ ),
+ icon: "hass:server",
+ action: () => this.hass.callService("homeassistant", action),
+ },
+ this.hass.localize("ui.dialogs.generic.ok")
+ )
+ );
+ }
+
+ private _generateConfirmationCommand(
+ item: QuickBarItem,
+ confirmText: ConfirmationDialogParams["confirmText"]
+ ): QuickBarItem {
+ return {
+ ...item,
+ action: () =>
+ showConfirmationDialog(this, {
+ confirmText,
+ confirm: item.action,
+ }),
+ };
+ }
+
+ private _generateEntityItems(): QuickBarItem[] {
+ return Object.keys(this.hass.states)
+ .map((entityId) => ({
+ text: computeStateName(this.hass.states[entityId]) || entityId,
+ altText: entityId,
+ icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
+ action: () => fireEvent(this, "hass-more-info", { entityId }),
+ }))
+ .sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+ }
+
+ private _toggleIfAlreadyOpened() {
+ return this._opened ? !this._commandMode : false;
+ }
+
+ private _setFilteredItems() {
+ const items = this._commandMode ? this._commandItems : this._entityItems;
+ this._items = this._filter
+ ? this._filterItems(items || [], this._filter)
+ : items;
+ }
+
+ private _filterItems = memoizeOne(
+ (items: QuickBarItem[], filter: string): QuickBarItem[] =>
+ fuzzyFilterSort(filter.trimLeft(), items)
+ );
+
+ static get styles() {
+ return [
+ haStyleDialog,
+ css`
+ .heading {
+ padding: 8px 20px 0px;
+ }
+
+ ha-dialog {
+ --dialog-z-index: 8;
+ --dialog-content-padding: 0;
+ }
+
+ @media (min-width: 800px) {
+ ha-dialog {
+ --mdc-dialog-max-width: 800px;
+ --mdc-dialog-min-width: 500px;
+ --dialog-surface-position: fixed;
+ --dialog-surface-top: 40px;
+ --mdc-dialog-max-height: calc(100% - 72px);
+ }
+ }
+
+ ha-svg-icon.prefix {
+ margin: 8px;
+ }
+
+ .uni-virtualizer-host {
+ display: block;
+ position: relative;
+ contain: strict;
+ overflow: auto;
+ height: 100%;
+ }
+
+ .uni-virtualizer-host > * {
+ box-sizing: border-box;
+ }
+
+ mwc-list-item {
+ width: 100%;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-quick-bar": QuickBar;
+ }
+}
diff --git a/src/dialogs/quick-bar/show-dialog-quick-bar.ts b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
new file mode 100644
index 0000000000..b003af2cfa
--- /dev/null
+++ b/src/dialogs/quick-bar/show-dialog-quick-bar.ts
@@ -0,0 +1,20 @@
+import { fireEvent } from "../../common/dom/fire_event";
+
+export interface QuickBarParams {
+ entityFilter?: string;
+ commandMode?: boolean;
+}
+
+export const loadQuickBar = () =>
+ import(/* webpackChunkName: "quick-bar-dialog" */ "./ha-quick-bar");
+
+export const showQuickBar = (
+ element: HTMLElement,
+ dialogParams: QuickBarParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "ha-quick-bar",
+ dialogImport: loadQuickBar,
+ dialogParams,
+ });
+};
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index aafdb13ee0..305d3206c8 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -57,7 +57,7 @@ export class HaVoiceCommandDialog extends LitElement {
@internalProperty() private _agentInfo?: AgentInfo;
- @query("#messages") private messages!: PaperDialogScrollableElement;
+ @query("#messages", true) private messages!: PaperDialogScrollableElement;
private recognition!: SpeechRecognition;
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index 4ff9160025..bbb9320c41 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -35,7 +35,10 @@ function setProperties(properties) {
setCustomPanelProperties(panelEl, properties);
}
-function initialize(panel: CustomPanelInfo, properties: {}) {
+function initialize(
+ panel: CustomPanelInfo,
+ properties: Record
+) {
const style = document.createElement("style");
style.innerHTML = "body{margin:0}";
document.head.appendChild(style);
diff --git a/src/external_app/external_auth.ts b/src/external_app/external_auth.ts
index c3c6f0fe42..f1624e77d6 100644
--- a/src/external_app/external_auth.ts
+++ b/src/external_app/external_auth.ts
@@ -64,7 +64,13 @@ export class ExternalAuth extends Auth {
});
}
+ private _tokenCallbackPromise?: Promise;
+
public async refreshAccessToken(force?: boolean) {
+ if (this._tokenCallbackPromise && !force) {
+ await this._tokenCallbackPromise;
+ return;
+ }
const payload: GetExternalAuthPayload = {
callback: CALLBACK_SET_TOKEN,
};
@@ -72,14 +78,15 @@ export class ExternalAuth extends Auth {
payload.force = true;
}
- const callbackPromise = new Promise(
+ this._tokenCallbackPromise = new Promise(
(resolve, reject) => {
window[CALLBACK_SET_TOKEN] = (success, data) =>
success ? resolve(data) : reject(data);
}
);
- await 0;
+ // we sleep 1 microtask to get the promise to actually set it on the window object.
+ await Promise.resolve();
if (window.externalApp) {
window.externalApp.getExternalAuth(JSON.stringify(payload));
@@ -87,10 +94,11 @@ export class ExternalAuth extends Auth {
window.webkit!.messageHandlers.getExternalAuth.postMessage(payload);
}
- const tokens = await callbackPromise;
+ const tokens = await this._tokenCallbackPromise;
this.data.access_token = tokens.access_token;
this.data.expires = tokens.expires_in * 1000 + Date.now();
+ this._tokenCallbackPromise = undefined;
}
public async revoke() {
@@ -101,7 +109,8 @@ export class ExternalAuth extends Auth {
success ? resolve(data) : reject(data);
});
- await 0;
+ // we sleep 1 microtask to get the promise to actually set it on the window object.
+ await Promise.resolve();
if (window.externalApp) {
window.externalApp.revokeExternalAuth(JSON.stringify(payload));
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index f070dc7f41..3407ecbb18 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -53,19 +53,21 @@ export const provideHass = (
} = {};
const entities = {};
- function updateTranslations(fragment: null | string, language?: string) {
+ async function updateTranslations(
+ fragment: null | string,
+ language?: string
+ ) {
const lang = language || getLocalLanguage();
- getTranslation(fragment, lang).then((translation) => {
- const resources = {
- [lang]: {
- ...(hass().resources && hass().resources[lang]),
- ...translation.data,
- },
- };
- hass().updateHass({
- resources,
- localize: computeLocalize(elements[0], lang, resources),
- });
+ const translation = await getTranslation(fragment, lang);
+ const resources = {
+ [lang]: {
+ ...(hass().resources && hass().resources[lang]),
+ ...translation.data,
+ },
+ };
+ hass().updateHass({
+ resources,
+ localize: await computeLocalize(elements[0], lang, resources),
});
}
diff --git a/src/html/_js_base.html.template b/src/html/_js_base.html.template
index 2864581ce2..08cc3ce65a 100644
--- a/src/html/_js_base.html.template
+++ b/src/html/_js_base.html.template
@@ -20,5 +20,4 @@
"content" in document.createElement("template"))) {
document.write("
diff --git a/src/html/_preload_roboto.html.template b/src/html/_preload_roboto.html.template
index 53431bb914..382beadfc0 100644
--- a/src/html/_preload_roboto.html.template
+++ b/src/html/_preload_roboto.html.template
@@ -8,7 +8,7 @@
el.type = "font/woff2";
el.href = src;
el.crossOrigin = "anonymous";
- document.head.append(el);
+ document.head.appendChild(el);
}
_pf("/static/fonts/roboto/Roboto-Regular.woff2");
_pf("/static/fonts/roboto/Roboto-Medium.woff2");
diff --git a/src/html/_style_base.html.template b/src/html/_style_base.html.template
index 21d047c1b8..0777efeb57 100644
--- a/src/html/_style_base.html.template
+++ b/src/html/_style_base.html.template
@@ -1,4 +1,4 @@
-
+
[[localize('ui.panel.config.core.section.core.header')]] {
- this.validating = false;
- this.isValid = result.result === "valid";
-
- if (!this.isValid) {
- this.validateLog = result.errors;
- }
- });
- }
}
customElements.define("ha-config-section-core", HaConfigSectionCore);
diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js
index 2f2b3eb37f..d008085d2b 100644
--- a/src/panels/config/customize/ha-config-customize.js
+++ b/src/panels/config/customize/ha-config-customize.js
@@ -11,6 +11,7 @@ import "../ha-config-section";
import "../ha-entity-config";
import { configSections } from "../ha-panel-config";
import "./ha-form-customize";
+import { documentationUrl } from "../../../util/documentation-url";
/*
* @appliesMixin LocalizeMixin
@@ -34,6 +35,14 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
[[localize('ui.panel.config.customize.picker.introduction')]]
+
+ + [[localize("ui.panel.config.customize.picker.documentation")]] + hass.states[key])
.sort(sortStatesByName);
}
+
+ _computeDocumentationUrl(hass) {
+ return documentationUrl(
+ hass,
+ "/docs/configuration/customizing-devices/#customization-using-the-ui"
+ );
+ }
}
customElements.define("ha-config-customize", HaConfigCustomize);
diff --git a/src/panels/config/customize/ha-form-customize.js b/src/panels/config/customize/ha-form-customize.js
index 2ad523125d..4df81153df 100644
--- a/src/panels/config/customize/ha-form-customize.js
+++ b/src/panels/config/customize/ha-form-customize.js
@@ -40,35 +40,35 @@ class HaFormCustomize extends LocalizeMixin(PolymerElement) {
- + + [[localize("ui.panel.config.customize.picker.documentation")]] +
+
[[localize('ui.panel.config.customize.attributes_customize')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_outside')]]
[[localize('ui.panel.config.customize.different_include')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_set')]]
[[localize('ui.panel.config.customize.attributes_override')]]
-
+
+
[[localize('ui.panel.config.customize.attributes_not_set')]] - +
+
+
${this._related?.automation?.length
? this._related.automation.map((automation) => {
const state = this.hass.states[automation];
@@ -328,7 +328,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "scene") && entities.length
? html`
${this.hass.localize( "ui.panel.config.devices.automation.automations" )} @@ -270,7 +270,7 @@ export class HaConfigDevicePage extends LitElement { )} icon="hass:plus-circle" > -
+
+
${
this._related?.scene?.length
@@ -402,7 +402,7 @@ export class HaConfigDevicePage extends LitElement {
isComponentLoaded(this.hass, "script")
? html`
${this.hass.localize( "ui.panel.config.devices.scene.scenes" )} @@ -340,7 +340,7 @@ export class HaConfigDevicePage extends LitElement { )} icon="hass:plus-circle" > -
+
+
${this._related?.script?.length
? this._related.script.map((script) => {
const state = this.hass.states[script];
return state
? html`
${this.hass.localize( "ui.panel.config.devices.script.scripts" )} @@ -413,18 +413,14 @@ export class HaConfigDevicePage extends LitElement { )} icon="hass:plus-circle" > -
+
+ `);
+ }
if (integrations.includes("zha")) {
import("./device-detail/integration-elements/zha/ha-device-actions-zha");
import("./device-detail/integration-elements/zha/ha-device-info-zha");
@@ -578,6 +587,9 @@ export class HaConfigDevicePage extends LitElement {
text: this.hass.localize(
"ui.panel.config.devices.confirm_rename_entity_ids_warning"
),
+ confirmText: this.hass.localize("ui.common.yes"),
+ dismissText: this.hass.localize("ui.common.no"),
+ warning: true,
}));
const updateProms = entities.map((entity) => {
@@ -716,6 +728,7 @@ export class HaConfigDevicePage extends LitElement {
paper-item {
cursor: pointer;
+ font-size: var(--paper-font-body1_-_font-size);
}
paper-item.no-link {
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 274eecf5e0..7e954b5dbc 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -82,11 +82,11 @@ export class HaConfigDeviceDashboard extends LitElement {
filterTexts.push(
`${this.hass.localize(
"ui.panel.config.integrations.integration"
- )} ${integrationName}${
+ )} "${integrationName}${
integrationName !== configEntry.title
? `: ${configEntry.title}`
: ""
- }`
+ }"`
);
break;
}
@@ -310,6 +310,7 @@ export class HaConfigDeviceDashboard extends LitElement {
this.hass.localize
)}
@row-click=${this._handleRowClicked}
+ clickable
>
`;
diff --git a/src/panels/config/entities/const.ts b/src/panels/config/entities/const.ts
index bf9b0c5ad6..1c5e4b4f59 100644
--- a/src/panels/config/entities/const.ts
+++ b/src/panels/config/entities/const.ts
@@ -5,4 +5,6 @@ export const PLATFORMS_WITH_SETTINGS_TAB = {
input_text: "entity-settings-helper-tab",
input_boolean: "entity-settings-helper-tab",
input_datetime: "entity-settings-helper-tab",
+ counter: "entity-settings-helper-tab",
+ timer: "entity-settings-helper-tab",
};
diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts
index 87e3cb87da..c12c79d28e 100644
--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@@ -175,16 +175,11 @@ export class DialogEntityEditor extends LitElement {
"ui.dialogs.entity_registry.no_unique_id",
"faq_link",
html`${this.hass.localize(
- "ui.dialogs.entity_registry.faq"
- )}`
+ >${this.hass.localize("ui.dialogs.entity_registry.faq")}`
)}
@@ -441,11 +469,32 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { "ui.panel.config.filtering.filtering_by" )} ${activeFilters.join(", ")} + ${this._numHiddenEntities + ? "(" + + this.hass.localize( + "ui.panel.config.entities.picker.filter.hidden_entities", + "number", + this._numHiddenEntities + ) + + ")" + : ""}
+ ${this.narrow
+ ? html` ${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.show_all"
+ )}
+
`
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ )}
+
+
`
+ : `${this.hass.localize(
+ "ui.panel.config.entities.picker.filter.hidden_entities",
+ "number",
+ this._numHiddenEntities
+ )}`}
+
+
+ `;
+ }
+
+ private _valueChanged(ev: CustomEvent) {
+ if (!this.new && !this._item) {
+ return;
+ }
+ ev.stopPropagation();
+ const target = ev.target as any;
+ const configValue = target.configValue;
+ const value =
+ target.type === "number"
+ ? Number(ev.detail.value)
+ : target.localName === "ha-switch"
+ ? (ev.target as HaSwitch).checked
+ : ev.detail.value;
+ if (this[`_${configValue}`] === value) {
+ return;
+ }
+ const newValue = { ...this._item };
+ if (value === undefined || value === "") {
+ delete newValue[configValue];
+ } else {
+ newValue[configValue] = value;
+ }
+ fireEvent(this, "value-changed", {
+ value: newValue,
+ });
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ .form {
+ color: var(--primary-text-color);
+ }
+ .row {
+ margin-top: 12px;
+ margin-bottom: 12px;
+ color: var(--primary-text-color);
+ display: flex;
+ align-items: center;
+ }
+ .row div {
+ margin-left: 16px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-counter-form": HaCounterForm;
+ }
+}
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index eef74de859..657df02826 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -36,7 +36,7 @@ class HaInputSelectForm extends LitElement {
@internalProperty() private _options: string[] = [];
- @query("#option_input") private _optionInput?: PaperInputElement;
+ @query("#option_input", true) private _optionInput?: PaperInputElement;
set item(item: InputSelect) {
this._item = item;
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
new file mode 100644
index 0000000000..9757b76b94
--- /dev/null
+++ b/src/panels/config/helpers/forms/ha-timer-form.ts
@@ -0,0 +1,130 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ internalProperty,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-icon-input";
+import { Timer, DurationDict } from "../../../../data/timer";
+import { haStyle } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+
+@customElement("ha-timer-form")
+class HaTimerForm extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public new?: boolean;
+
+ private _item?: Timer;
+
+ @internalProperty() private _name!: string;
+
+ @internalProperty() private _icon!: string;
+
+ @internalProperty() private _duration!: string | number | DurationDict;
+
+ set item(item: Timer) {
+ this._item = item;
+ if (item) {
+ this._name = item.name || "";
+ this._icon = item.icon || "";
+ this._duration = item.duration || "";
+ } else {
+ this._name = "";
+ this._icon = "";
+ this._duration = "00:00:00";
+ }
+ }
+
+ public focus() {
+ this.updateComplete.then(() =>
+ (this.shadowRoot?.querySelector(
+ "[dialogInitialFocus]"
+ ) as HTMLElement)?.focus()
+ );
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass) {
+ return html``;
+ }
+ const nameInvalid = !this._name || this._name.trim() === "";
+
+ return html`
+
+
+
+
+ `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.dialogs.helper_settings.counter.restore"
+ )}
+
+
+
+ `;
+ }
+
+ private _valueChanged(ev: CustomEvent) {
+ if (!this.new && !this._item) {
+ return;
+ }
+ ev.stopPropagation();
+ const configValue = (ev.target as any).configValue;
+ const value = ev.detail.value;
+ if (this[`_${configValue}`] === value) {
+ return;
+ }
+ const newValue = { ...this._item };
+ if (!value) {
+ delete newValue[configValue];
+ } else {
+ newValue[configValue] = ev.detail.value;
+ }
+ fireEvent(this, "value-changed", {
+ value: newValue,
+ });
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ haStyle,
+ css`
+ .form {
+ color: var(--primary-text-color);
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-timer-form": HaTimerForm;
+ }
+}
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index fe96b3389e..8179474639 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -153,6 +153,7 @@ export class HaConfigHelpers extends LitElement {
.data=${this._getItems(this._stateItems)}
@row-click=${this._openEditDialog}
hasFab
+ clickable
.noDataText=${this.hass.localize(
"ui.panel.config.helpers.picker.no_helpers"
)}
@@ -164,7 +165,7 @@ export class HaConfigHelpers extends LitElement {
)}"
@click=${this._createHelpler}
>
- ${domainToName(this.hass.localize, domain)}
` + html`${domainToName(this.hass.localize, domain)}
` ); } sections.push(html` @@ -78,7 +84,24 @@ class SystemHealthCard extends LitElement { } return html` -
+
+ ${domainToName(this.hass.localize, "system_health")}
+
+
+
+
+ ${this.hass.localize("ui.common.copied")}
+
+
${sections}
${this._generateServiceButton("add_node")}
${this._generateServiceButton("remove_node")}
+ ${this._generateServiceButton("cancel_command")}
+ ${this.hass.localize("ui.panel.config.ozw.node_config.header")}
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_config.introduction"
+ )}
+
+ ${this._node
+ ? html`
+ + + ${this.hass.localize( + "ui.panel.config.ozw.node_config.help_source" + )} + +
++ Note: This panel is currently read-only. The ability to change + values will come in a later update. +
+
+
+ ${this._node.node_manufacturer_name}
+ ${this._node.node_product_name}
+ ${this.hass.localize("ui.panel.config.ozw.common.node_id")}: + ${this._node.node_id}
+ ${this.hass.localize( + "ui.panel.config.ozw.common.query_stage" + )}: + ${this._node.node_query_stage} + ${this._metadata?.metadata.ProductManualURL + ? html` +
+ + ${this.hass.localize("ui.panel.config.ozw.common.node_id")}: + ${this._node.node_id}
+ ${this.hass.localize( + "ui.panel.config.ozw.common.query_stage" + )}: + ${this._node.node_query_stage} + ${this._metadata?.metadata.ProductManualURL + ? html` +
+ ${this.hass.localize( + "ui.panel.config.ozw.node_metadata.product_manual" + )} +
+ ` + : ``} +
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.refresh_node.button"
+ )}
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.ozw.node_config.wakeup_help"
+ )}
+
+
+ + ${this._metadata.metadata.WakeupHelp} +
+
+ ${item.label}
+ ${item.help} +
+ + ${item.help} +
${item.value}
+
@@ -87,19 +87,29 @@ class OZWNodeDashboard extends LitElement {
${this._node
? html`
-
-
`;
@@ -400,6 +515,26 @@ export class HaScriptEditor extends LitElement {
this._dirty = true;
}
+ private _preprocessYaml() {
+ return this._config;
+ }
+
+ private async _copyYaml() {
+ if (this._editor?.yaml) {
+ navigator.clipboard.writeText(this._editor.yaml);
+ }
+ }
+
+ private _yamlChanged(ev: CustomEvent) {
+ ev.stopPropagation();
+ if (!ev.detail.isValid) {
+ return;
+ }
+ this._config = ev.detail.value;
+ this._errors = undefined;
+ this._dirty = true;
+ }
+
private _backTapped(): void {
if (this._dirty) {
showConfirmationDialog(this, {
@@ -429,11 +564,33 @@ export class HaScriptEditor extends LitElement {
history.back();
}
+ private async _handleMenuAction(ev: CustomEvent) {
+ switch (ev.detail.index) {
+ case 0:
+ this._mode = "gui";
+ break;
+ case 1:
+ this._mode = "yaml";
+ break;
+ case 2:
+ this._deleteConfirm();
+ break;
+ }
+ }
+
private _saveScript(): void {
if (this._idError) {
- this._errors = this.hass.localize(
- "ui.panel.config.script.editor.id_already_exists_save_error"
- );
+ showToast(this, {
+ message: this.hass.localize(
+ "ui.panel.config.script.editor.id_already_exists_save_error"
+ ),
+ dismissable: false,
+ duration: 0,
+ action: {
+ action: () => {},
+ text: this.hass.localize("ui.dialogs.generic.ok"),
+ },
+ });
return;
}
const id = this.scriptEntityId
@@ -449,11 +606,18 @@ export class HaScriptEditor extends LitElement {
},
(errors) => {
this._errors = errors.body.message;
+ showToast(this, {
+ message: errors.body.message,
+ });
throw errors;
}
);
}
+ protected handleKeyboardSave() {
+ this._saveScript();
+ }
+
static get styles(): CSSResult[] {
return [
haStyle,
@@ -483,6 +647,12 @@ export class HaScriptEditor extends LitElement {
mwc-fab.dirty {
bottom: 0;
}
+ .selected_menu_item {
+ color: var(--primary-color);
+ }
+ li[role="separator"] {
+ border-bottom-color: var(--divider-color);
+ }
`,
];
}
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index d7b713596c..3dc94b280c 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -1,3 +1,4 @@
+import "@material/mwc-icon-button";
import "../../../components/ha-icon-button";
import { HassEntity } from "home-assistant-js-websocket";
import {
@@ -23,7 +24,7 @@ import { HomeAssistant, Route } from "../../../types";
import { showToast } from "../../../util/toast";
import { configSections } from "../ha-panel-config";
import "../../../components/ha-svg-icon";
-import { mdiPlus } from "@mdi/js";
+import { mdiPlus, mdiHelpCircle } from "@mdi/js";
import { stateIcon } from "../../../common/entity/state_icon";
import { documentationUrl } from "../../../util/documentation-url";
@@ -61,7 +62,7 @@ class HaScriptPicker extends LitElement {
.script=${script}
icon="hass:play"
title="${this.hass.localize(
- "ui.panel.config.script.picker.activate_script"
+ "ui.panel.config.script.picker.run_script"
)}"
@click=${(ev: Event) => this._runScript(ev)}
>
@@ -141,21 +142,19 @@ class HaScriptPicker extends LitElement {
)}
hasFab
>
-
+
-
diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts
index 62622baeab..f63cfab076 100644
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -270,7 +270,7 @@ export class HaConfigServerControl extends LitElement {
}
.validate-log {
- white-space: pre-wrap;
+ white-space: pre-line;
direction: ltr;
}
diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts
index d34ed4e206..6e7cd00218 100644
--- a/src/panels/config/tags/dialog-tag-detail.ts
+++ b/src/panels/config/tags/dialog-tag-detail.ts
@@ -10,6 +10,7 @@ import {
property,
TemplateResult,
} from "lit-element";
+
import { fireEvent } from "../../../common/dom/fire_event";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield";
@@ -21,8 +22,11 @@ import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { TagDetailDialogParams } from "./show-dialog-tag-detail";
+const QR_LOGO_URL = "/static/icons/favicon-192x192.png";
+
@customElement("dialog-tag-detail")
-class DialogTagDetail extends LitElement implements HassDialog {
+class DialogTagDetail extends LitElement
+ implements HassDialog {
@property({ attribute: false }) public hass!: HomeAssistant;
@internalProperty() private _id?: string;
@@ -35,6 +39,8 @@ class DialogTagDetail extends LitElement implements HassDialog {
@internalProperty() private _submitting = false;
+ @internalProperty() private _qrCode?: TemplateResult;
+
public showDialog(params: TagDetailDialogParams): void {
this._params = params;
this._error = undefined;
@@ -48,6 +54,7 @@ class DialogTagDetail extends LitElement implements HassDialog {
public closeDialog(): void {
this._params = undefined;
+ this._qrCode = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@@ -106,6 +113,36 @@ class DialogTagDetail extends LitElement implements HassDialog {
>`
: ""}
+ ${this._params.entry
+ ? html`
+
- ${this._node.node_manufacturer_name}
- ${this._node.node_product_name}
- Node ID: ${this._node.node_id}
- Query Stage: ${this._node.node_query_stage} - ${this._metadata?.metadata.ProductManualURL - ? html` -
- Node ID: ${this._node.node_id}
- Query Stage: ${this._node.node_query_stage} - ${this._metadata?.metadata.ProductManualURL - ? html` -
Product Manual
- ` +
+ `
: ``}
+
+ ${this._node.node_manufacturer_name}
+ ${this._node.node_product_name}
+
+
+ Node ID: ${this._node.node_id}
+ Query Stage: ${this._node.node_query_stage} + ${this._metadata?.metadata.ProductManualURL + ? html` +
+ ${this._metadata?.metadata.ProductPicBase64
+ ? html`+ Node ID: ${this._node.node_id}
+ Query Stage: ${this._node.node_query_stage} + ${this._metadata?.metadata.ProductManualURL + ? html` +
Product Manual
+ ` + : ``} +`
: ``}
@@ -199,6 +209,11 @@ class OZWNodeDashboard extends LitElement {
max-width: 600px;
}
+ .flex {
+ display: flex;
+ justify-content: space-between;
+ }
+
.card-actions.warning ha-call-service-button {
color: var(--error-color);
}
@@ -219,6 +234,15 @@ class OZWNodeDashboard extends LitElement {
[hidden] {
display: none;
}
+
+ .product-image {
+ padding: 12px;
+ max-height: 140px;
+ max-width: 140px;
+ }
+ .card-actions {
+ clear: right;
+ }
`,
];
}
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
index baf68ddc96..ea30bf78ff 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
@@ -1,11 +1,31 @@
+import { mdiNetwork, mdiWrench } from "@mdi/js";
import { customElement, property } from "lit-element";
import { navigate } from "../../../../../common/navigate";
import {
HassRouterPage,
RouterOptions,
} from "../../../../../layouts/hass-router-page";
+import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
import { HomeAssistant } from "../../../../../types";
+export const ozwNodeTabs = (
+ instance: number,
+ node: number
+): PageNavigation[] => {
+ return [
+ {
+ translationKey: "ui.panel.config.ozw.navigation.node.dashboard",
+ path: `/config/ozw/network/${instance}/node/${node}/dashboard`,
+ iconPath: mdiNetwork,
+ },
+ {
+ translationKey: "ui.panel.config.ozw.navigation.node.config",
+ path: `/config/ozw/network/${instance}/node/${node}/config`,
+ iconPath: mdiWrench,
+ },
+ ];
+};
+
@customElement("ozw-node-router")
class OZWNodeRouter extends HassRouterPage {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -33,6 +53,11 @@ class OZWNodeRouter extends HassRouterPage {
/* webpackChunkName: "ozw-node-dashboard" */ "./ozw-node-dashboard"
),
},
+ config: {
+ tag: "ozw-node-config",
+ load: () =>
+ import(/* webpackChunkName: "ozw-node-config" */ "./ozw-node-config"),
+ },
},
};
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index a7929f0bda..fdbe21ea19 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -42,7 +42,7 @@ export class ZHAAddGroupPage extends LitElement {
@internalProperty() private _groupName = "";
- @query("zha-device-endpoint-data-table")
+ @query("zha-device-endpoint-data-table", true)
private _zhaDevicesDataTable!: ZHADeviceEndpointDataTable;
private _firstUpdatedCalled = false;
@@ -105,12 +105,15 @@ export class ZHAAddGroupPage extends LitElement {
@click="${this._createGroup}"
class="button"
>
-
-
diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts
index 24d73c7a94..34d0cfcd1a 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -36,7 +36,7 @@ class DialogSystemLogDetail extends LitElement {
@internalProperty() private _manifest?: IntegrationManifest;
- @query("paper-tooltip") private _toolTip?: PaperTooltipElement;
+ @query("paper-tooltip", true) private _toolTip?: PaperTooltipElement;
public async showDialog(params: SystemLogDetailDialogParams): Promise {
this._params = params;
@@ -206,7 +206,6 @@ class DialogSystemLogDetail extends LitElement {
font-family: var(--code-font-family, monospace);
}
.heading {
- display: flex;
display: flex;
align-items: center;
justify-content: space-between;
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 88dac9b2de..89229e41ef 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -15,25 +15,29 @@ import { HomeAssistant } from "../../../types";
class ErrorLogCard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @internalProperty() private _errorLog?: string;
+ @internalProperty() private _errorHTML!: TemplateResult[] | string;
protected render(): TemplateResult {
return html`
- {
- this._errorLog = this.hass.localize("ui.panel.config.logs.loading_log");
+ this._errorHTML = this.hass.localize("ui.panel.config.logs.loading_log");
const log = await fetchErrorLog(this.hass!);
- this._errorLog =
- log || this.hass.localize("ui.panel.config.logs.no_errors");
+
+ this._errorHTML = log
+ ? log.split("\n").map((entry) => {
+ if (entry.includes("INFO"))
+ return html`
-
`;
diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
index 0603562940..317f05f261 100644
--- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
+++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -23,6 +23,20 @@ import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
+const detectResourceType = (url: string) => {
+ const ext = url.split(".").pop() || "";
+
+ if (ext === "css") {
+ return "css";
+ }
+
+ if (ext === "js") {
+ return "module";
+ }
+
+ return undefined;
+};
+
@customElement("dialog-lovelace-resource-detail")
export class DialogLovelaceResourceDetail extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -31,7 +45,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
@internalProperty() private _url!: LovelaceResource["url"];
- @internalProperty() private _type!: LovelaceResource["type"];
+ @internalProperty() private _type?: LovelaceResource["type"];
@internalProperty() private _error?: string;
@@ -44,10 +58,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
this._error = undefined;
if (this._params.resource) {
this._url = this._params.resource.url || "";
- this._type = this._params.resource.type || "module";
+ this._type = this._params.resource.type || undefined;
} else {
this._url = "";
- this._type = "module";
+ this._type = undefined;
}
await this.updateComplete;
}
@@ -106,6 +120,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
.selected=${this._type}
@iron-select=${this._typeChanged}
attr-for-selected="type"
+ .invalid=${!this._type}
>
${this.hass!.localize(
@@ -156,7 +171,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
${this._params.resource
? this.hass!.localize(
@@ -173,6 +188,9 @@ export class DialogLovelaceResourceDetail extends LitElement {
private _urlChanged(ev: PolymerChangedEvent) {
this._error = undefined;
this._url = ev.detail.value;
+ if (!this._type) {
+ this._type = detectResourceType(this._url);
+ }
}
private _typeChanged(ev: CustomEvent) {
@@ -180,6 +198,10 @@ export class DialogLovelaceResourceDetail extends LitElement {
}
private async _updateResource() {
+ if (!this._type) {
+ return;
+ }
+
this._submitting = true;
try {
const values: LovelaceResourcesMutableParams = {
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 5d35134956..5ae5003d5a 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -101,6 +101,7 @@ export class HaConfigLovelaceRescources extends LitElement {
)}
@row-click=${this._editResource}
hasFab
+ clickable
>
-
`;
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 5844a0374f..67802ea928 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -14,7 +14,6 @@ import "../../../components/entity/ha-entities-picker";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-picture-upload";
import type { HaPictureUpload } from "../../../components/ha-picture-upload";
-import "../../../components/user/ha-user-picker";
import { PersonMutableParams } from "../../../data/person";
import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
import { PolymerChangedEvent } from "../../../polymer-types";
@@ -440,9 +439,6 @@ class DialogPersonDetail extends LitElement {
display: block;
padding: 16px 0;
}
- ha-user-picker {
- margin-top: 16px;
- }
a {
color: var(--primary-color);
}
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 829b12278a..d7403b341a 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -1,7 +1,7 @@
+import "@material/mwc-fab";
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
-import "@material/mwc-fab";
import {
css,
CSSResult,
@@ -23,10 +23,14 @@ import {
updatePerson,
} from "../../../data/person";
import { fetchUsers, User } from "../../../data/user";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage";
import { HomeAssistant, Route } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
import {
@@ -71,7 +75,9 @@ class HaConfigPerson extends LitElement {
>${hass.localize("ui.panel.config.person.caption")}
- ${hass.localize("ui.panel.config.person.introduction")}
+
${this._storageItems.map((entry) => {
return html`
@@ -136,7 +151,7 @@ class HaConfigPerson extends LitElement {
title="${hass.localize("ui.panel.config.person.add_person")}"
@click=${this._createPerson}
>
-
+
-
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 73f0e29ce3..22bbba718d 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -57,7 +57,9 @@ import { HomeAssistant, Route } from "../../../types";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
import "../../../components/ha-svg-icon";
+import { showToast } from "../../../util/toast";
import { mdiContentSave } from "@mdi/js";
+import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
interface DeviceEntities {
id: string;
@@ -70,7 +72,9 @@ interface DeviceEntitiesLookup {
}
@customElement("ha-scene-editor")
-export class HaSceneEditor extends SubscribeMixin(LitElement) {
+export class HaSceneEditor extends SubscribeMixin(
+ KeyboardShortcutMixin(LitElement)
+) {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public narrow!: boolean;
@@ -265,7 +269,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
(device) =>
html`
- this._backTapped()}
.tabs=${configSections.automation}
>
- ${!this.scriptEntityId
- ? ""
- : html`
-
+
+ ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+ ${this._mode === "gui"
+ ? html`
+
+ ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
+ ${this._mode === "yaml"
+ ? html`
+
+
+
+
+ ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
+
+
+
+
${this.narrow
? html` ${this._config?.alias} `
: ""}
@@ -93,174 +156,226 @@ export class HaScriptEditor extends LitElement {
${this._errors
? html`
+ ${!this.narrow
+ ? html`${this._config?.alias}`
+ : ``}
+
+
+
+ ${this.scriptEntityId
+ ? html`
+ - ${this._errorLog +
+ ${this._errorHTML
? html`
-
+
`
: html`
${this.hass.localize("ui.panel.config.logs.load_full_log")}
`}
-
-
`;
}
@@ -59,17 +63,42 @@ class ErrorLogCard extends LitElement {
.error-log {
@apply --paper-font-code)
clear: both;
- white-space: pre-wrap;
- margin: 16px;
+ text-align: left;
+ padding-top: 12px;
+ }
+
+ .error {
+ color: var(--error-color);
+ }
+
+ .warning {
+ color: var(--warning-color);
}
`;
}
private async _refreshErrorLog(): Promise
+ ${this._errorHTML}
+
+ ${this._errorLog}
+ ${entry}
`;
+
+ if (entry.includes("WARNING"))
+ return html`${entry}
`;
+
+ if (
+ entry.includes("ERROR") ||
+ entry.includes("FATAL") ||
+ entry.includes("CRITICAL")
+ )
+ return html`${entry}
`;
+
+ return html`${entry}
`;
+ })
+ : this.hass.localize("ui.panel.config.logs.no_errors");
}
}
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index 84247d748c..178fa70863 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -28,7 +28,7 @@ export class HaConfigLogs extends LitElement {
@property() public route!: Route;
- @query("system-log-card") private systemLog?: SystemLogCard;
+ @query("system-log-card", true) private systemLog?: SystemLogCard;
public connectedCallback() {
super.connectedCallback();
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index bd80bbe5bf..dade77f9bb 100644
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -77,7 +77,9 @@ export class SystemLogCard extends LitElement {
integrations[idx]!
)
: item.source[0]}
- (${item.level})
+ ${html`(${item.level})`}
${item.count > 1
? html`
-
@@ -164,6 +166,14 @@ export class SystemLogCard extends LitElement {
align-items: center;
justify-content: center;
}
+
+ .error {
+ color: var(--error-color);
+ }
+
+ .warning {
+ color: var(--warning-color);
+ }
`;
}
}
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 90205aa8a7..2255222781 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -221,6 +221,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
@row-click=${this._editDashboard}
id="url_path"
hasFab
+ clickable
>
+ ${hass.localize("ui.panel.config.person.introduction")} +
${this._configItems.length > 0 ? html`@@ -81,7 +87,16 @@ class HaConfigPerson extends LitElement {
` : ""} + + + ${this.hass.localize("ui.panel.config.person.learn_more")} + +
+
${device.name}
+
${device.entities.map((entityId) => {
const entityStateObj = this.hass.states[entityId];
if (!entityStateObj) {
@@ -405,7 +409,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) {
@click=${this._saveScene}
class=${classMap({ dirty: this._dirty })}
>
-
${device.name}
${this._errors}
`
: ""}
-
- ${this._config
- ? html`
-
- ${!this.narrow
- ? html` ${this._config.alias} `
- : ""}
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.introduction"
- )}
-
-
-
-
-
-
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.sequence"
- )}
-
-
-
+ `
+ : ""}
+
+ `
+ : this._mode === "yaml"
+ ? html`
+
-
-
-
-
- ${!this.scriptEntityId
- ? html`
+ ${this._config
+ ? html`
+
+ ${!this.narrow
+ ? html`
+ ${this._config.alias}
+ `
+ : ""}
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.introduction"
+ )}
+
+
+
+
+
+
+
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.sequence"
+ )}
+
+
+ `
- : ""}
-
-
- ${MODES.map(
- (mode) => html`
-
- ${this.hass.localize(
- `ui.panel.config.script.editor.modes.${mode}`
- ) || mode}
-
- `
- )}
-
-
- ${this._config.mode &&
- MODES_MAX.includes(this._config.mode)
- ? html`
+ ${this.hass.localize(
+ "ui.panel.config.script.editor.link_available_actions"
)}
- type="number"
- name="max"
- .value=${this._config.max || "10"}
- @value-changed=${this._valueChanged}
- >
- `
- : html``}
-
- ${this.scriptEntityId
- ? html`
-
+
+
+
+
+ ${!this.scriptEntityId
+ ? html`
+ `
+ : ""}
+
+
+ ${MODES.map(
+ (mode) => html`
+
+ ${this.hass.localize(
+ `ui.panel.config.script.editor.modes.${mode}`
+ ) || mode}
+
+ `
+ )}
+
+
+ ${this._config.mode &&
+ MODES_MAX.includes(this._config.mode)
+ ? html`
+ `
+ : html``}
+
+ ${this.scriptEntityId
+ ? html`
+ + ${this.hass.localize( + "ui.panel.config.script.editor.modes.description", + "documentation_link", + html`${this.hass.localize( + "ui.panel.config.script.editor.modes.documentation" + )}` + )} +
+
+
+
+ ${this.hass.localize(
+ "ui.card.script.execute"
+ )}
+
+
+ `
+ : ``}
+ + ${this.hass.localize( + "ui.panel.config.script.editor.sequence_sentence" )} - .errorMessage=${this.hass.localize( - "ui.panel.config.script.editor.id_already_exists" - )} - .invalid=${this._idError} - .value=${this._entityId} - @value-changed=${this._idChanged} - > -
- ${this.hass.localize( - "ui.panel.config.script.editor.modes.description", - "documentation_link", - html` + ${this.hass.localize( - "ui.panel.config.script.editor.modes.documentation" - )}` - )} -
-
-
-
- ${this.hass.localize("ui.card.script.execute")}
-
-
- `
- : ``}
- + +
+
+
${this.hass.localize(
- "ui.panel.config.script.editor.sequence_sentence"
+ "ui.panel.config.automation.editor.copy_to_clipboard"
)}
-
-
- ${this.hass.localize(
- "ui.panel.config.script.editor.link_available_actions"
- )}
-
-
-
+
+
+
+ ${this.hass.localize("ui.card.script.execute")}
+
+
+ `
+ : ``}
+
+
+ `
+ : ``}
+
+
+ + ${this.hass!.localize( + "ui.panel.config.tags.detail.usage", + "companion_link", + html`${this.hass!.localize( + "ui.panel.config.tags.detail.companion_apps" + )}` + )} +
+
+ ${this._qrCode
+ ? this._qrCode
+ : html`
+ Generate QR code
+
+ `}
+
+ `
+ : ``}
+ ${this.hass.localize( + "ui.panel.config.tags.detail.usage", + "companion_link", + html`${this.hass!.localize( + "ui.panel.config.tags.detail.companion_apps" + )}` + )} +
++ + ${this.hass.localize("ui.panel.config.tags.learn_more")} + +
+ `, + }); + } + private async _fetchTags() { this._tags = await fetchTags(this.hass); } diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts index 30ed2e8093..09ca727a22 100644 --- a/src/panels/config/users/ha-config-users.ts +++ b/src/panels/config/users/ha-config-users.ts @@ -96,13 +96,14 @@ export class HaConfigUsers extends LitElement { .data=${this._users} @row-click=${this._editUser} hasFab + clickable >${this.hass.localize("panel.developer_tools")}
-
+
+ [[localize('ui.panel.developer-tools.tabs.services.select_service')]]
+
-
-
-
-
-
-
- [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
-
+
+
+
+
+
+
+
+ [[localize('ui.panel.developer-tools.tabs.services.fill_example_data')]]
+
+
-
+
+ - [[localize('ui.panel.developer-tools.tabs.services.no_description')]] -
- - -
-
-
- [[_description]]
-| - [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]] - | -- [[localize('ui.panel.developer-tools.tabs.services.column_description')]] - | -- [[localize('ui.panel.developer-tools.tabs.services.column_example')]] - | -
|---|---|---|
| - [[localize('ui.panel.developer-tools.tabs.services.no_parameters')]] - | -||
[[attribute.key]] |
- [[attribute.description]] | -[[attribute.example]] | -
| + [[localize('ui.panel.developer-tools.tabs.services.column_parameter')]] + | ++ [[localize('ui.panel.developer-tools.tabs.services.column_description')]] + | ++ [[localize('ui.panel.developer-tools.tabs.services.column_example')]] + | +
|---|---|---|
[[attribute.key]] |
+ [[attribute.description]] | +[[attribute.example]] | +