+ ${this._showMore ||
+ // If there is only 1 item hidden behind "show more", just show it
+ // instead of showing the more info link. We're not animals.
+ this.moreItems.length === 1
+ ? this.moreItems
+ : html`
+
+ `}
+
+ `}
+
-
-
+ - Test pages for our utility functions. -
-
- (
- ${this.supervisor.localize("addon.dashboard.changelog")} ${
+ this.supervisor.localize("addon.dashboard.changelog")})
`
- : html`
- ${this.supervisor.localize("addon.dashboard.changelog")}
- `}
+ : html`${
+ this.supervisor.localize("addon.dashboard.changelog")
+ }`}
@@ -476,7 +477,7 @@ class HassioAddonInfo extends LitElement {
${this.supervisor.localize(
- "addon.dashboard.option.boot.description"
+ "addon.dashboard.option.watchdog.description"
)}
${this.supervisor.localize(
- "addon.dashboard.option.boot.description"
+ "addon.dashboard.option.auto_update.description"
)}
{
- showDialogSupervisorAddonUpdate(this, { addon: this.addon });
+ showDialogSupervisorUpdate(this, {
+ supervisor: this.supervisor,
+ name: this.addon.name,
+ version: this.addon.version_latest,
+ snapshotParams: {
+ name: `addon_${this.addon.slug}_${this.addon.version}`,
+ addons: [this.addon.slug],
+ homeassistant: false,
+ },
+ updateHandler: async () => await this._updateAddon(),
+ });
+ }
+
+ private async _updateAddon(): Promise {
+ await updateHassioAddon(this.hass, this.addon.slug);
+ fireEvent(this, "supervisor-collection-refresh", {
+ collection: "addon",
+ });
+ const eventdata = {
+ success: true,
+ response: undefined,
+ path: "update",
+ };
+ fireEvent(this, "hass-api-called", eventdata);
}
private async _startClicked(ev: CustomEvent): Promise {
diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts
index 116b137e0f..25eabcdf60 100644
--- a/hassio/src/components/supervisor-metric.ts
+++ b/hassio/src/components/supervisor-metric.ts
@@ -28,7 +28,7 @@ class SupervisorMetric extends LitElement {
-
- ${roundedValue}%
+ ${roundedValue} %
{
@@ -164,7 +165,17 @@ export class HassioUpdate extends LitElement {
private async _confirmUpdate(ev): Promise {
const item = ev.currentTarget;
if (item.key === "core") {
- showDialogSupervisorCoreUpdate(this, { core: this.supervisor.core });
+ showDialogSupervisorUpdate(this, {
+ supervisor: this.supervisor,
+ name: "Home Assistant Core",
+ version: this.supervisor.core.version_latest,
+ snapshotParams: {
+ name: `core_${this.supervisor.core.version}`,
+ folders: ["homeassistant"],
+ homeassistant: true,
+ },
+ updateHandler: async () => this._updateCore(),
+ });
return;
}
item.progress = true;
@@ -199,17 +210,13 @@ export class HassioUpdate extends LitElement {
} else {
await this.hass.callApi>("POST", item.apiPath);
}
- fireEvent(this, "supervisor-colllection-refresh", {
- colllection: item.key,
+ fireEvent(this, "supervisor-collection-refresh", {
+ collection: item.key,
});
} catch (err) {
// Only show an error if the status code was not expected (user behind proxy)
// or no status at all(connection terminated)
- if (
- this.hass.connection.connected &&
- err.status_code &&
- !ignoredStatusCodes.has(err.status_code)
- ) {
+ if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
showAlertDialog(this, {
title: this.supervisor.localize("common.error.update_failed"),
text: extractApiErrorMessage(err),
@@ -219,6 +226,13 @@ export class HassioUpdate extends LitElement {
item.progress = false;
}
+ private async _updateCore(): Promise {
+ await updateCore(this.hass);
+ fireEvent(this, "supervisor-collection-refresh", {
+ collection: "core",
+ });
+ }
+
static get styles(): CSSResult[] {
return [
haStyle,
diff --git a/hassio/src/dialogs/addon/show-dialog-addon-update.ts b/hassio/src/dialogs/addon/show-dialog-addon-update.ts
deleted file mode 100644
index bb6bebe683..0000000000
--- a/hassio/src/dialogs/addon/show-dialog-addon-update.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-
-export interface SupervisorDialogSupervisorAddonUpdateParams {
- addon: HassioAddonDetails;
-}
-
-export const showDialogSupervisorAddonUpdate = (
- element: HTMLElement,
- dialogParams: SupervisorDialogSupervisorAddonUpdateParams
-): void => {
- fireEvent(element, "show-dialog", {
- dialogTag: "dialog-supervisor-addon-update",
- dialogImport: () => import("./dialog-supervisor-addon-update"),
- dialogParams,
- });
-};
diff --git a/hassio/src/dialogs/core/dialog-supervisor-core-update.ts b/hassio/src/dialogs/core/dialog-supervisor-core-update.ts
deleted file mode 100644
index 99c0bddcdd..0000000000
--- a/hassio/src/dialogs/core/dialog-supervisor-core-update.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import {
- css,
- CSSResult,
- customElement,
- html,
- internalProperty,
- LitElement,
- TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/ha-switch";
-import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
-import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
-import { HassioHomeAssistantInfo } from "../../../../src/data/hassio/supervisor";
-import { updateCore } from "../../../../src/data/supervisor/core";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorCoreUpdateParams } from "./show-dialog-core-update";
-
-@customElement("dialog-supervisor-core-update")
-class DialogSupervisorCoreUpdate extends LitElement {
- public hass!: HomeAssistant;
-
- public core!: HassioHomeAssistantInfo;
-
- @internalProperty() private _opened = false;
-
- @internalProperty() private _createSnapshot = true;
-
- @internalProperty() private _action: "snapshot" | "update" | null = null;
-
- @internalProperty() private _error?: string;
-
- public async showDialog(
- params: SupervisorDialogSupervisorCoreUpdateParams
- ): Promise {
- this._opened = true;
- this.core = params.core;
- await this.updateComplete;
- }
-
- public closeDialog(): void {
- this._action = null;
- this._createSnapshot = true;
- this._opened = false;
- fireEvent(this, "dialog-closed", { dialog: this.localName });
- }
-
- public focus(): void {
- this.updateComplete.then(() =>
- (this.shadowRoot?.querySelector(
- "[dialogInitialFocus]"
- ) as HTMLElement)?.focus()
- );
- }
-
- protected render(): TemplateResult {
- return html`
-
- ${this._action === null
- ? html`
-
-
-
- Snapshot
-
-
- Create a snapshot of Home Assistant Core before updating
-
-
-
-
-
- Cancel
-
-
- Update
- `
- : html`
-
-
- `;
- }
-
- private _toggleSnapshot() {
- this._createSnapshot = !this._createSnapshot;
- }
-
- private async _update() {
- if (this._createSnapshot) {
- this._action = "snapshot";
- try {
- await createHassioPartialSnapshot(this.hass, {
- name: `core_${this.core.version}`,
- folders: ["homeassistant"],
- homeassistant: true,
- });
- } catch (err) {
- this._error = extractApiErrorMessage(err);
- this._action = null;
- return;
- }
- }
-
- this._action = "update";
- try {
- await updateCore(this.hass);
- } catch (err) {
- if (this.hass.connection.connected) {
- this._error = extractApiErrorMessage(err);
- this._action = null;
- return;
- }
- }
- fireEvent(this, "supervisor-colllection-refresh", { colllection: "core" });
- this.closeDialog();
- }
-
- static get styles(): CSSResult[] {
- return [
- haStyle,
- haStyleDialog,
- css`
- .form {
- color: var(--primary-text-color);
- }
-
- ha-settings-row {
- margin-top: 32px;
- padding: 0;
- }
-
- ha-circular-progress {
- display: block;
- margin: 32px;
- text-align: center;
- }
-
- .progress-text {
- text-align: center;
- }
- `,
- ];
- }
-}
-
-declare global {
- interface HTMLElementTagNameMap {
- "dialog-supervisor-core-update": DialogSupervisorCoreUpdate;
- }
-}
diff --git a/hassio/src/dialogs/core/show-dialog-core-update.ts b/hassio/src/dialogs/core/show-dialog-core-update.ts
deleted file mode 100644
index 0c2e173d7c..0000000000
--- a/hassio/src/dialogs/core/show-dialog-core-update.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioHomeAssistantInfo } from "../../../../src/data/hassio/supervisor";
-
-export interface SupervisorDialogSupervisorCoreUpdateParams {
- core: HassioHomeAssistantInfo;
-}
-
-export const showDialogSupervisorCoreUpdate = (
- element: HTMLElement,
- dialogParams: SupervisorDialogSupervisorCoreUpdateParams
-): void => {
- fireEvent(element, "show-dialog", {
- dialogTag: "dialog-supervisor-core-update",
- dialogImport: () => import("./dialog-supervisor-core-update"),
- dialogParams,
- });
-};
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 64aadb1597..8e6f9610e4 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -18,7 +18,6 @@ import {
} from "lit-element";
import { cache } from "lit-html/directives/cache";
import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-chips";
import "../../../../src/components/ha-circular-progress";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel";
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 35ea16957a..2c02b817f6 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -17,6 +17,7 @@ import {
TemplateResult,
} from "lit-element";
import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/components/ha-circular-progress";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-svg-icon";
@@ -26,7 +27,6 @@ import {
} from "../../../../src/data/hassio/addon";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
import { setSupervisorOption } from "../../../../src/data/hassio/supervisor";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
@@ -35,15 +35,12 @@ import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
class HassioRepositoriesDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @property({ attribute: false }) public supervisor!: Supervisor;
-
- @property({ attribute: false }) private _repos: HassioAddonRepository[] = [];
-
- @property({ attribute: false })
- private _dialogParams?: HassioRepositoryDialogParams;
-
@query("#repository_input", true) private _optionInput?: PaperInputElement;
+ @internalProperty() private _repositories?: HassioAddonRepository[];
+
+ @internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
+
@internalProperty() private _opened = false;
@internalProperty() private _prosessing = false;
@@ -54,12 +51,13 @@ class HassioRepositoriesDialog extends LitElement {
dialogParams: HassioRepositoryDialogParams
): Promise {
this._dialogParams = dialogParams;
- this.supervisor = dialogParams.supervisor;
this._opened = true;
+ await this._loadData();
await this.updateComplete;
}
public closeDialog(): void {
+ this._dialogParams = undefined;
this._opened = false;
this._error = "";
}
@@ -71,9 +69,10 @@ class HassioRepositoriesDialog extends LitElement {
);
protected render(): TemplateResult {
- const repositories = this._filteredRepositories(
- this.supervisor.addon.repositories
- );
+ if (!this._dialogParams?.supervisor || this._repositories === undefined) {
+ return html``;
+ }
+ const repositories = this._filteredRepositories(this._repositories);
return html`
${this._error ? html`
${this._prosessing
? html`
- Update Home Assistant Core -
-
- Are you sure you want to update Home Assistant Core to version
- ${this.core.version_latest}?
-
-
- - ${this._action === "update" - ? `Updating Home Assistant Core to version ${this.core.version_latest}` - : "Creating snapshot of Home Assistant Core"} -
`} - ${this._error ? html`${this._error}
` : ""} -${this._error}
` : ""}
@@ -98,7 +97,7 @@ class HassioRepositoriesDialog extends LitElement {
- Update ${this.addon.name} + ${this._dialogParams.supervisor.localize( + "confirm.update.title", + "name", + this._dialogParams.name + )}
- Are you sure you want to update the ${this.addon.name} add-on to
- version ${this.addon.version_latest}?
+ ${this._dialogParams.supervisor.localize(
+ "confirm.update.text",
+ "name",
+ this._dialogParams.name,
+ "version",
+ this._dialogParams.version
+ )}
${this._action === "update" - ? `Updating ${this.addon.name} to version ${this.addon.version_latest}` - : "Creating snapshot of Home Assistant Core"} + ? this._dialogParams.supervisor.localize( + "dialog.update.updating", + "name", + this._dialogParams.name, + "version", + this._dialogParams.version + ) + : this._dialogParams.supervisor.localize( + "dialog.update.snapshotting", + "name", + this._dialogParams.name + )}
`} ${this._error ? html`${this._error}
` : ""}
- ${this.supervisor.localize(
- "system.supervisor.share_diagnostics_description"
- )}
-
-
-
+ ${this.supervisor.localize(
+ "system.supervisor.share_diagnostics_description"
+ )}
+
+
+
${this.supervisor.localize(
"system.supervisor.unsupported_title"
@@ -317,8 +322,8 @@ class HassioSupervisorInfo extends LitElement {
private async _reloadSupervisor(): Promise {
await reloadSupervisor(this.hass);
- fireEvent(this, "supervisor-colllection-refresh", {
- colllection: "supervisor",
+ fireEvent(this, "supervisor-collection-refresh", {
+ collection: "supervisor",
});
}
@@ -367,9 +372,13 @@ class HassioSupervisorInfo extends LitElement {
button.progress = true;
const confirmed = await showConfirmationDialog(this, {
- title: this.supervisor.localize("confirm.update", "name", "Supervisor"),
+ title: this.supervisor.localize(
+ "confirm.update.title",
+ "name",
+ "Supervisor"
+ ),
text: this.supervisor.localize(
- "confirm.text",
+ "confirm.update.text",
"name",
"Supervisor",
"version",
@@ -386,8 +395,8 @@ class HassioSupervisorInfo extends LitElement {
try {
await updateSupervisor(this.hass);
- fireEvent(this, "supervisor-colllection-refresh", {
- colllection: "supervisor",
+ fireEvent(this, "supervisor-collection-refresh", {
+ collection: "supervisor",
});
} catch (err) {
showAlertDialog(this, {
diff --git a/package.json b/package.json
index 6a12d039ac..d0482825d6 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,6 @@
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.1.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",
"@vaadin/vaadin-date-picker": "^4.0.7",
"@vibrant/color": "^3.2.1-alpha.1",
@@ -134,6 +132,7 @@
"sortablejs": "^1.10.2",
"superstruct": "^0.10.13",
"tinykeys": "^1.1.1",
+ "tsparticles": "^1.19.2",
"unfetch": "^4.1.0",
"vis-data": "^7.1.1",
"vis-network": "^8.5.4",
@@ -167,6 +166,7 @@
"@rollup/plugin-replace": "^2.3.2",
"@types/chai": "^4.1.7",
"@types/chromecast-caf-receiver": "^5.0.11",
+ "@types/chromecast-caf-sender": "^1.0.3",
"@types/codemirror": "^0.0.97",
"@types/hls.js": "^0.12.3",
"@types/js-yaml": "^3.12.1",
@@ -176,6 +176,7 @@
"@types/memoize-one": "4.1.0",
"@types/mocha": "^7.0.2",
"@types/resize-observer-browser": "^0.1.3",
+ "@types/sortablejs": "^1.10.6",
"@types/webspeechapi": "^0.0.29",
"@typescript-eslint/eslint-plugin": "^4.4.0",
"@typescript-eslint/parser": "^4.4.0",
diff --git a/public/static/images/screenshots/screenshot-1.png b/public/static/images/screenshots/screenshot-1.png
new file mode 100644
index 0000000000..776e92a118
Binary files /dev/null and b/public/static/images/screenshots/screenshot-1.png differ
diff --git a/setup.py b/setup.py
index 3a49cf2d35..e888b8ccdd 100644
--- a/setup.py
+++ b/setup.py
@@ -2,12 +2,12 @@ from setuptools import setup, find_packages
setup(
name="home-assistant-frontend",
- version="20210302.6",
+ version="20210331.0",
description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors",
author_email="hello@home-assistant.io",
- license="Apache License 2.0",
+ license="Apache-2.0",
packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
include_package_data=True,
zip_safe=False,
diff --git a/src/common/const.ts b/src/common/const.ts
index bbf051f668..6ec749d662 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -56,6 +56,8 @@ export const FIXED_DOMAIN_ICONS = {
export const FIXED_DEVICE_CLASS_ICONS = {
current: "hass:current-ac",
+ carbon_dioxide: "mdi:molecule-co2",
+ carbon_monoxide: "mdi:molecule-co",
energy: "hass:flash",
humidity: "hass:water-percent",
illuminance: "hass:brightness-5",
@@ -103,6 +105,7 @@ export const DOMAINS_WITH_MORE_INFO = [
"lock",
"media_player",
"person",
+ "remote",
"script",
"sun",
"timer",
diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts
index 050006fe7d..c7c02d38fe 100644
--- a/src/common/datetime/format_date.ts
+++ b/src/common/datetime/format_date.ts
@@ -1,9 +1,10 @@
import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
import { toLocaleDateStringSupportsOptions } from "./check_options_support";
export const formatDate = toLocaleDateStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleDateString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleDateString(locales.language, {
year: "numeric",
month: "long",
day: "numeric",
@@ -11,8 +12,8 @@ export const formatDate = toLocaleDateStringSupportsOptions
: (dateObj: Date) => format(dateObj, "longDate");
export const formatDateWeekday = toLocaleDateStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleDateString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleDateString(locales.language, {
weekday: "long",
month: "short",
day: "numeric",
diff --git a/src/common/datetime/format_date_time.ts b/src/common/datetime/format_date_time.ts
index 3a20491ed5..d4b76a1da6 100644
--- a/src/common/datetime/format_date_time.ts
+++ b/src/common/datetime/format_date_time.ts
@@ -1,9 +1,10 @@
import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
import { toLocaleStringSupportsOptions } from "./check_options_support";
export const formatDateTime = toLocaleStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleString(locales.language, {
year: "numeric",
month: "long",
day: "numeric",
@@ -13,8 +14,8 @@ export const formatDateTime = toLocaleStringSupportsOptions
: (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleString(locales.language, {
year: "numeric",
month: "long",
day: "numeric",
diff --git a/src/common/datetime/format_time.ts b/src/common/datetime/format_time.ts
index 6b79f0c173..d2068f7638 100644
--- a/src/common/datetime/format_time.ts
+++ b/src/common/datetime/format_time.ts
@@ -1,17 +1,18 @@
import { format } from "fecha";
+import { FrontendTranslationData } from "../../data/translation";
import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
export const formatTime = toLocaleTimeStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleTimeString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleTimeString(locales.language, {
hour: "numeric",
minute: "2-digit",
})
: (dateObj: Date) => format(dateObj, "shortTime");
export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleTimeString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleTimeString(locales.language, {
hour: "numeric",
minute: "2-digit",
second: "2-digit",
@@ -19,8 +20,8 @@ export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
: (dateObj: Date) => format(dateObj, "mediumTime");
export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
- ? (dateObj: Date, locales: string) =>
- dateObj.toLocaleTimeString(locales, {
+ ? (dateObj: Date, locales: FrontendTranslationData) =>
+ dateObj.toLocaleTimeString(locales.language, {
weekday: "long",
hour: "numeric",
minute: "2-digit",
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 91b7a606dc..0ba0c36cb2 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -1,5 +1,6 @@
import { HassEntity } from "home-assistant-js-websocket";
import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
+import { FrontendTranslationData } from "../../data/translation";
import { formatDate } from "../datetime/format_date";
import { formatDateTime } from "../datetime/format_date_time";
import { formatTime } from "../datetime/format_time";
@@ -10,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
export const computeStateDisplay = (
localize: LocalizeFunc,
stateObj: HassEntity,
- language: string,
+ locale: FrontendTranslationData,
state?: string
): string => {
const compareState = state !== undefined ? state : stateObj.state;
@@ -20,7 +21,7 @@ export const computeStateDisplay = (
}
if (stateObj.attributes.unit_of_measurement) {
- return `${formatNumber(compareState, language)} ${
+ return `${formatNumber(compareState, locale)} ${
stateObj.attributes.unit_of_measurement
}`;
}
@@ -35,7 +36,7 @@ export const computeStateDisplay = (
stateObj.attributes.month - 1,
stateObj.attributes.day
);
- return formatDate(date, language);
+ return formatDate(date, locale);
}
if (!stateObj.attributes.has_date) {
const now = new Date();
@@ -48,7 +49,7 @@ export const computeStateDisplay = (
stateObj.attributes.hour,
stateObj.attributes.minute
);
- return formatTime(date, language);
+ return formatTime(date, locale);
}
date = new Date(
@@ -58,7 +59,7 @@ export const computeStateDisplay = (
stateObj.attributes.hour,
stateObj.attributes.minute
);
- return formatDateTime(date, language);
+ return formatDateTime(date, locale);
}
if (domain === "humidifier") {
@@ -67,8 +68,9 @@ export const computeStateDisplay = (
}
}
- if (domain === "counter") {
- return formatNumber(compareState, language);
+ // `counter` and `number` domains do not have a unit of measurement but should still use `formatNumber`
+ if (domain === "counter" || domain === "number") {
+ return formatNumber(compareState, locale);
}
return (
diff --git a/src/common/string/filter/sequence-matching.ts b/src/common/string/filter/sequence-matching.ts
index dac81672a8..6e4a5bf2e5 100644
--- a/src/common/string/filter/sequence-matching.ts
+++ b/src/common/string/filter/sequence-matching.ts
@@ -42,7 +42,7 @@ export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
export interface ScorableTextItem {
score?: number;
- text: string;
+ filterText: string;
altText?: string;
}
@@ -55,8 +55,8 @@ export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
return items
.map((item) => {
item.score = item.altText
- ? fuzzySequentialMatch(filter, item.text, item.altText)
- : fuzzySequentialMatch(filter, item.text);
+ ? fuzzySequentialMatch(filter, item.filterText, item.altText)
+ : fuzzySequentialMatch(filter, item.filterText);
return item;
})
.filter((item) => item.score !== undefined && item.score > 0)
diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts
index 3dc345fbbc..0f171bd0ea 100644
--- a/src/common/string/format_number.ts
+++ b/src/common/string/format_number.ts
@@ -1,14 +1,36 @@
+import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+
/**
- * Formats a number based on the specified language with thousands separator(s) and decimal character for better legibility.
+ * Formats a number based on the user's preference 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
+ * @param locale The user-selected language and number format, from `hass.locale`
+ * @param options Intl.NumberFormatOptions to use
*/
export const formatNumber = (
num: string | number,
- language: string,
+ locale?: FrontendTranslationData,
options?: Intl.NumberFormatOptions
): string => {
+ let format: string | string[] | undefined;
+
+ switch (locale?.number_format) {
+ case NumberFormat.comma_decimal:
+ format = ["en-US", "en"]; // Use United States with fallback to English formatting 1,234,567.89
+ break;
+ case NumberFormat.decimal_comma:
+ format = ["de", "es", "it"]; // Use German with fallback to Spanish then Italian formatting 1.234.567,89
+ break;
+ case NumberFormat.space_comma:
+ format = ["fr", "sv", "cs"]; // Use French with fallback to Swedish and Czech formatting 1 234 567,89
+ break;
+ case NumberFormat.system:
+ format = undefined;
+ break;
+ default:
+ format = locale?.language;
+ }
+
// Polyfill for Number.isNaN, which is more reliable than the global isNaN()
Number.isNaN =
Number.isNaN ||
@@ -16,13 +38,27 @@ export const formatNumber = (
return typeof input === "number" && isNaN(input);
};
- if (!Number.isNaN(Number(num)) && Intl) {
- return new Intl.NumberFormat(
- language,
- getDefaultFormatOptions(num, options)
- ).format(Number(num));
+ if (
+ !Number.isNaN(Number(num)) &&
+ Intl &&
+ locale?.number_format !== NumberFormat.none
+ ) {
+ try {
+ return new Intl.NumberFormat(
+ format,
+ getDefaultFormatOptions(num, options)
+ ).format(Number(num));
+ } catch (error) {
+ // Don't fail when using "TEST" language
+ // eslint-disable-next-line no-console
+ console.error(error);
+ return new Intl.NumberFormat(
+ undefined,
+ getDefaultFormatOptions(num, options)
+ ).format(Number(num));
+ }
}
- return num.toString();
+ return num ? num.toString() : "";
};
/**
diff --git a/src/common/string/starts-with.ts b/src/common/string/starts-with.ts
new file mode 100644
index 0000000000..52a607436f
--- /dev/null
+++ b/src/common/string/starts-with.ts
@@ -0,0 +1,2 @@
+export const strStartsWith = (value: string, search: string) =>
+ value.substring(0, search.length) === search;
diff --git a/src/common/url/construct-url.ts b/src/common/url/construct-url.ts
new file mode 100644
index 0000000000..db9be2abca
--- /dev/null
+++ b/src/common/url/construct-url.ts
@@ -0,0 +1,5 @@
+export const constructUrlCurrentPath = (searchParams: string): string => {
+ const base = window.location.pathname;
+ // Prevent trailing "?" if no parameters exist
+ return searchParams ? base + "?" + searchParams : base;
+};
diff --git a/src/common/url/search-params.ts b/src/common/url/search-params.ts
index 90b3677a66..f4ebb347e8 100644
--- a/src/common/url/search-params.ts
+++ b/src/common/url/search-params.ts
@@ -19,3 +19,17 @@ export const createSearchParam = (params: Record): string => {
});
return urlParams.toString();
};
+
+export const addSearchParam = (params: Record): string => {
+ const urlParams = new URLSearchParams(window.location.search);
+ Object.entries(params).forEach(([key, value]) => {
+ urlParams.set(key, value);
+ });
+ return urlParams.toString();
+};
+
+export const removeSearchParam = (param: string): string => {
+ const urlParams = new URLSearchParams(window.location.search);
+ urlParams.delete(param);
+ return urlParams.toString();
+};
diff --git a/src/components/buttons/ha-call-api-button.js b/src/components/buttons/ha-call-api-button.js
deleted file mode 100644
index ba090cc9fd..0000000000
--- a/src/components/buttons/ha-call-api-button.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { html, LitElement } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import "./ha-progress-button";
-
-class HaCallApiButton extends LitElement {
- render() {
- return html`
-
diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts
index 107636a7c0..397dc10fc4 100644
--- a/src/dialogs/more-info/ha-more-info-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-logbook.ts
@@ -9,10 +9,12 @@ import {
TemplateResult,
} from "lit-element";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { closeDialog } from "../make-dialog-manager";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { throttle } from "../../common/util/throttle";
import "../../components/ha-circular-progress";
import "../../components/state-history-charts";
+import { TraceContexts, loadTraceContexts } from "../../data/trace";
import { getLogbookData, LogbookEntry } from "../../data/logbook";
import "../../panels/logbook/ha-logbook";
import { haStyle, haStyleScrollbar } from "../../resources/styles";
@@ -26,6 +28,8 @@ export class MoreInfoLogbook extends LitElement {
@internalProperty() private _logbookEntries?: LogbookEntry[];
+ @internalProperty() private _traceContexts?: TraceContexts;
+
@internalProperty() private _persons = {};
private _lastLogbookDate?: Date;
@@ -63,6 +67,7 @@ export class MoreInfoLogbook extends LitElement {
relative-time
.hass=${this.hass}
.entries=${this._logbookEntries}
+ .traceContexts=${this._traceContexts}
.userIdToName=${this._persons}
>
`
@@ -75,6 +80,11 @@ export class MoreInfoLogbook extends LitElement {
protected firstUpdated(): void {
this._fetchPersonNames();
+ this.addEventListener("click", (ev) => {
+ if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
+ setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
+ }
+ });
}
protected updated(changedProps: PropertyValues): void {
@@ -115,17 +125,21 @@ export class MoreInfoLogbook extends LitElement {
this._lastLogbookDate ||
new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
const now = new Date();
- const newEntries = await getLogbookData(
- this.hass,
- lastDate.toISOString(),
- now.toISOString(),
- this.entityId,
- true
- );
+ const [newEntries, traceContexts] = await Promise.all([
+ getLogbookData(
+ this.hass,
+ lastDate.toISOString(),
+ now.toISOString(),
+ this.entityId,
+ true
+ ),
+ loadTraceContexts(this.hass),
+ ]);
this._logbookEntries = this._logbookEntries
? [...newEntries, ...this._logbookEntries]
: newEntries;
this._lastLogbookDate = now;
+ this._traceContexts = traceContexts;
}
private _fetchPersonNames() {
diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts
index 6f8cf904ab..4efdca33ae 100644
--- a/src/dialogs/more-info/state_more_info_control.ts
+++ b/src/dialogs/more-info/state_more_info_control.ts
@@ -21,6 +21,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
lock: () => import("./controls/more-info-lock"),
media_player: () => import("./controls/more-info-media_player"),
person: () => import("./controls/more-info-person"),
+ remote: () => import("./controls/more-info-remote"),
script: () => import("./controls/more-info-script"),
sun: () => import("./controls/more-info-sun"),
timer: () => import("./controls/more-info-timer"),
diff --git a/src/dialogs/notifications/configurator-notification-item.ts b/src/dialogs/notifications/configurator-notification-item.ts
index a29f1db335..eb998f76be 100644
--- a/src/dialogs/notifications/configurator-notification-item.ts
+++ b/src/dialogs/notifications/configurator-notification-item.ts
@@ -42,7 +42,7 @@ export class HuiConfiguratorNotificationItem extends LitElement {
>${computeStateDisplay(
this.hass.localize,
this.notification,
- this.hass.language
+ this.hass.locale
)}
+
`;
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index 1e862c474a..945f0d75e4 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@@ -123,7 +123,7 @@ class MoreInfoVacuum extends LitElement {
${this.selectable
? html`
@@ -338,7 +343,7 @@ export class HaDataTable extends LitElement {
}
return html`
) {
+ private _filterChanged(ev: PolymerChangedEvent) {
// @ts-ignore
- fireEvent(this, ev.type, ev.detail);
+ fireEvent(this, ev.type, ev.detail, { composed: false });
}
private _valueChanged(ev: PolymerChangedEvent) {
diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 91db9cab23..c3780244cd 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -43,7 +43,7 @@ export class HaDateRangePicker extends LitElement {
protected updated(changedProps: PropertyValues) {
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
- if (!oldHass || oldHass.language !== this.hass.language) {
+ if (!oldHass || oldHass.locale !== this.hass.locale) {
this._hour24format = this._compute24hourFormat();
this._rtlDirection = computeRTLDirection(this.hass);
}
@@ -62,7 +62,7 @@ export class HaDateRangePicker extends LitElement {
{
@@ -29,7 +30,7 @@ export class Gauge extends LitElement {
@property({ type: Number }) public value = 0;
- @property({ type: String }) public language = "";
+ @property() public locale!: FrontendTranslationData;
@property() public label = "";
@@ -90,7 +91,7 @@ export class Gauge extends LitElement {
`;
}
diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts
index 3997bfcf52..0d72abc7ee 100644
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -36,6 +36,7 @@ interface ExtHassService extends Omit {
example?: any;
selector?: Selector;
}[];
+ hasSelector: string[];
}
@customElement("ha-service-control")
@@ -52,8 +53,6 @@ export class HaServiceControl extends LitElement {
@property({ type: Boolean }) public showAdvanced?: boolean;
- @internalProperty() private _serviceData?: ExtHassService;
-
@internalProperty() private _checkedKeys = new Set();
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
@@ -70,13 +69,11 @@ export class HaServiceControl extends LitElement {
this._checkedKeys = new Set();
}
- this._serviceData = this.value?.service
- ? this._getServiceInfo(this.value.service)
- : undefined;
+ const serviceData = this._getServiceInfo(this.value?.service);
if (
- this._serviceData &&
- "target" in this._serviceData &&
+ serviceData &&
+ "target" in serviceData &&
(this.value?.data?.entity_id ||
this.value?.data?.area_id ||
this.value?.data?.device_id)
@@ -119,7 +116,7 @@ export class HaServiceControl extends LitElement {
return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
});
- private _getServiceInfo = memoizeOne((service: string):
+ private _getServiceInfo = memoizeOne((service?: string):
| ExtHassService
| undefined => {
if (!service) {
@@ -147,23 +144,29 @@ export class HaServiceControl extends LitElement {
return {
...serviceDomains[domain][serviceName],
fields,
+ hasSelector: fields.length
+ ? fields.filter((field) => field.selector).map((field) => field.key)
+ : [],
};
});
protected render() {
- const legacy =
- this._serviceData?.fields.length &&
- !this._serviceData.fields.some((field) => field.selector);
+ const serviceData = this._getServiceInfo(this.value?.service);
+
+ const shouldRenderServiceDataYaml =
+ (serviceData?.fields.length && !serviceData.hasSelector.length) ||
+ (serviceData &&
+ Object.keys(this.value?.data || {}).some(
+ (key) => !serviceData!.hasSelector.includes(key)
+ ));
const entityId =
- legacy &&
- this._serviceData?.fields.find((field) => field.key === "entity_id");
+ shouldRenderServiceDataYaml &&
+ serviceData?.fields.find((field) => field.key === "entity_id");
const hasOptional = Boolean(
- !legacy &&
- this._serviceData?.fields.some(
- (field) => field.selector && !field.required
- )
+ !shouldRenderServiceDataYaml &&
+ serviceData?.fields.some((field) => field.selector && !field.required)
);
return html`
${hasOptional
? html``
@@ -188,8 +191,8 @@ export class HaServiceControl extends LitElement {
)}`
: ""}
- ${legacy
+ ${shouldRenderServiceDataYaml
? html`
${dataField.required
? hasOptional
@@ -328,7 +335,10 @@ export class HaServiceControl extends LitElement {
ev.stopPropagation();
const key = (ev.currentTarget as any).key;
const value = ev.detail.value;
- if (this.value?.data && this.value.data[key] === value) {
+ if (
+ this.value?.data?.[key] === value ||
+ (!this.value?.data?.[key] && (value === "" || value === undefined))
+ ) {
return;
}
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index ffc5d57090..83502db730 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -245,7 +245,7 @@ class HaSidebar extends LitElement {
hass.panelUrl !== oldHass.panelUrl ||
hass.user !== oldHass.user ||
hass.localize !== oldHass.localize ||
- hass.language !== oldHass.language ||
+ hass.locale !== oldHass.locale ||
hass.states !== oldHass.states ||
hass.defaultPanel !== oldHass.defaultPanel
);
@@ -281,7 +281,7 @@ class HaSidebar extends LitElement {
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
- if (!oldHass || oldHass.language !== this.hass.language) {
+ if (!oldHass || oldHass.locale !== this.hass.locale) {
this.rtl = computeRTL(this.hass);
}
diff --git a/src/components/ha-water_heater-state.js b/src/components/ha-water_heater-state.js
index 9a6a8c7610..f2047c8a6f 100644
--- a/src/components/ha-water_heater-state.js
+++ b/src/components/ha-water_heater-state.js
@@ -2,6 +2,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { computeStateDisplay } from "../common/entity/compute_state_display";
+import { formatNumber } from "../common/string/format_number";
import LocalizeMixin from "../mixins/localize-mixin";
/*
@@ -55,21 +56,31 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
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}`;
+ return `${formatNumber(
+ stateObj.attributes.target_temp_low,
+ this.hass.locale
+ )} - ${formatNumber(
+ stateObj.attributes.target_temp_high,
+ this.hass.locale
+ )} ${hass.config.unit_system.temperature}`;
}
if (stateObj.attributes.temperature != null) {
- return `${stateObj.attributes.temperature} ${hass.config.unit_system.temperature}`;
+ return `${formatNumber(
+ stateObj.attributes.temperature,
+ this.hass.locale
+ )} ${hass.config.unit_system.temperature}`;
}
return "";
}
_localizeState(stateObj) {
- return computeStateDisplay(this.hass.localize, stateObj);
+ return computeStateDisplay(this.hass.localize, stateObj, this.hass.locale);
}
}
customElements.define("ha-water_heater-state", HaWaterHeaterState);
diff --git a/src/components/paper-time-input.js b/src/components/paper-time-input.js
index 944360227d..c057b3dc36 100644
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -107,6 +107,10 @@ export class PaperTimeInput extends PolymerElement {
#millisec {
width: 38px;
}
+
+ .no-suffix {
+ margin-left: -2px;
+ }
@@ -134,6 +138,7 @@ export class PaperTimeInput extends PolymerElement {
{
const values = data.datasets[item.datasetIndex].data[item.index];
- const start = formatDateTimeWithSeconds(values[0], this.hass.language);
- const end = formatDateTimeWithSeconds(values[1], this.hass.language);
+ const start = formatDateTimeWithSeconds(values[0], this.hass.locale);
+ const end = formatDateTimeWithSeconds(values[1], this.hass.locale);
const state = values[2];
return [state, start, end];
diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts
new file mode 100644
index 0000000000..d9572c4a67
--- /dev/null
+++ b/src/components/trace/ha-timeline.ts
@@ -0,0 +1,125 @@
+import { mdiCircleOutline } from "@mdi/js";
+import {
+ LitElement,
+ customElement,
+ html,
+ css,
+ property,
+ TemplateResult,
+ internalProperty,
+} from "lit-element";
+import { buttonLinkStyle } from "../../resources/styles";
+import "../ha-svg-icon";
+
+@customElement("ha-timeline")
+export class HaTimeline extends LitElement {
+ @property({ type: Boolean, reflect: true }) public label = false;
+
+ @property({ type: Boolean, reflect: true }) public raised = false;
+
+ @property({ type: Boolean }) public lastItem = false;
+
+ @property({ type: String }) public icon?: string;
+
+ @property({ attribute: false }) public moreItems?: TemplateResult[];
+
+ @internalProperty() private _showMore = false;
+
+ protected render() {
+ return html`
+
+ ${this.branching
+ ? svg`
+
+ `
+ : ""}
+ = {};
+
+ private selectNode(config, path) {
+ return () => {
+ fireEvent(this, "graph-node-selected", { config, path });
+ };
+ }
+
+ private render_trigger(config: Trigger, i: number) {
+ const path = `trigger/${i}`;
+ const tracked = this.trace && path in this.trace.trace;
+ if (tracked) {
+ this.trackedNodes[path] = { config, path };
+ }
+ return html`
+
+
+ `;
+ }
+
+ private render_choose_node(config: ChooseAction, path: string) {
+ const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
+ const trace_path = trace
+ ? trace[0].result.choice === "default"
+ ? [config.choose.length]
+ : [trace[0].result.choice]
+ : [];
+ return html`
+
+
+
+ `;
+ })}
+
+
+
+ `;
+ }
+
+ private render_condition_node(node: Condition, path: string) {
+ const trace: any = this.trace.trace[path];
+ const track_path = trace === undefined ? 0 : trace[0].result.result ? 1 : 2;
+ return html`
+
+
+ `;
+ }
+
+ private render_delay_node(node: DelayAction, path: string) {
+ return html`
+
+
+ ${node.repeat.sequence.map((action, i) =>
+ this.render_node(action, `${path}/repeat/sequence/${i}`)
+ )}
+
+
+ `;
+ }
+
+ private render_scene_node(node: SceneAction, path: string) {
+ return html`
+
+
+
+ ${trigger_nodes}
+
+
+ ${(!this.trace.config.condition ||
+ Array.isArray(this.trace.config.condition)
+ ? this.trace.config.condition
+ : [this.trace.config.condition]
+ )?.map((condition, i) => this.render_condition(condition, i))}
+
+ ${(Array.isArray(this.trace.config.action)
+ ? this.trace.config.action
+ : [this.trace.config.action]
+ ).map((action, i) => this.render_node(action, `action/${i}`))}
+
+ ) {
+ if (changedProps.has("trace")) {
+ this.trackedNodes = {};
+ }
+ super.update(changedProps);
+ }
+
+ protected updated(changedProps: PropertyValues) {
+ super.updated(changedProps);
+
+ // Select first node if new trace loaded but no selection given.
+ if (changedProps.has("trace")) {
+ const tracked = this.getTrackedNodes();
+ const paths = Object.keys(tracked);
+
+ // If trace changed and we have no or an invalid selection, select first option.
+ if (this.selected === "" || !(this.selected in paths)) {
+ // Find first tracked node with node info
+ for (const path of paths) {
+ if (tracked[path]) {
+ fireEvent(this, "graph-node-selected", tracked[path]);
+ break;
+ }
+ }
+ }
+
+ if (this.trace) {
+ const sortKeys = Object.keys(this.trace.trace);
+ const keys = Object.keys(this.trackedNodes).sort(
+ (a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
+ );
+ const sortedTrackedNodes = keys.reduce((obj, key) => {
+ obj[key] = this.trackedNodes[key];
+ return obj;
+ }, {});
+ this.trackedNodes = sortedTrackedNodes;
+ }
+ }
+ }
+
+ public getTrackedNodes() {
+ return this.trackedNodes;
+ }
+
+ public previousTrackedNode() {
+ const tracked = this.getTrackedNodes();
+ const nodes = Object.keys(tracked);
+
+ for (let i = nodes.indexOf(this.selected) - 1; i >= 0; i--) {
+ if (tracked[nodes[i]]) {
+ fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
+ break;
+ }
+ }
+ }
+
+ public nextTrackedNode() {
+ const tracked = this.getTrackedNodes();
+ const nodes = Object.keys(tracked);
+ for (let i = nodes.indexOf(this.selected) + 1; i < nodes.length; i++) {
+ if (tracked[nodes[i]]) {
+ fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
+ break;
+ }
+ }
+ }
+
+ static get styles() {
+ return css`
+ :host {
+ display: flex;
+ }
+ .actions {
+ display: flex;
+ flex-direction: column;
+ }
+ .parent {
+ margin-left: 8px;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hat-script-graph": HatScriptGraph;
+ }
+}
diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts
new file mode 100644
index 0000000000..4ba3e531af
--- /dev/null
+++ b/src/components/trace/hat-trace-timeline.ts
@@ -0,0 +1,511 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ PropertyValues,
+ TemplateResult,
+} from "lit-element";
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import {
+ AutomationTraceExtended,
+ ChooseActionTraceStep,
+ getDataFromPath,
+ TriggerTraceStep,
+ isTriggerPath,
+} from "../../data/trace";
+import { HomeAssistant } from "../../types";
+import "./ha-timeline";
+import type { HaTimeline } from "./ha-timeline";
+import {
+ mdiCircle,
+ mdiCircleOutline,
+ mdiPauseCircleOutline,
+ mdiRecordCircleOutline,
+} from "@mdi/js";
+import { LogbookEntry } from "../../data/logbook";
+import {
+ ChooseAction,
+ ChooseActionChoice,
+ getActionType,
+} from "../../data/script";
+import relativeTime from "../../common/datetime/relative_time";
+import { fireEvent } from "../../common/dom/fire_event";
+
+const LOGBOOK_ENTRIES_BEFORE_FOLD = 2;
+
+/* eslint max-classes-per-file: "off" */
+
+// Report time entry when more than this time has passed
+const SIGNIFICANT_TIME_CHANGE = 1000; // 1 seconds
+
+const isSignificantTimeChange = (a: Date, b: Date) =>
+ Math.abs(b.getTime() - a.getTime()) > SIGNIFICANT_TIME_CHANGE;
+
+class RenderedTimeTracker {
+ private lastReportedTime: Date;
+
+ constructor(
+ private hass: HomeAssistant,
+ private entries: TemplateResult[],
+ trace: AutomationTraceExtended
+ ) {
+ this.lastReportedTime = new Date(trace.timestamp.start);
+ }
+
+ setLastReportedTime(date: Date) {
+ this.lastReportedTime = date;
+ }
+
+ renderTime(from: Date, to: Date): void {
+ this.entries.push(html`
+
+ ${relativeTime(from, this.hass.localize, {
+ compareTime: to,
+ includeTense: false,
+ })}
+ later
+
+ `);
+ this.lastReportedTime = to;
+ }
+
+ maybeRenderTime(timestamp: Date): boolean {
+ if (!isSignificantTimeChange(timestamp, this.lastReportedTime)) {
+ this.lastReportedTime = timestamp;
+ return false;
+ }
+
+ this.renderTime(this.lastReportedTime, timestamp);
+ return true;
+ }
+}
+
+class LogbookRenderer {
+ private curIndex: number;
+
+ private pendingItems: Array<[Date, LogbookEntry]> = [];
+
+ constructor(
+ private entries: TemplateResult[],
+ private timeTracker: RenderedTimeTracker,
+ private logbookEntries: LogbookEntry[]
+ ) {
+ // Skip the "automation got triggered item"
+ this.curIndex =
+ logbookEntries.length > 0 && logbookEntries[0].domain === "automation"
+ ? 1
+ : 0;
+ }
+
+ get curItem() {
+ return this.logbookEntries[this.curIndex];
+ }
+
+ get hasNext() {
+ return this.curIndex !== this.logbookEntries.length;
+ }
+
+ maybeRenderItem() {
+ const logbookEntry = this.curItem;
+ this.curIndex++;
+ const entryDate = new Date(logbookEntry.when);
+
+ if (this.pendingItems.length === 0) {
+ this.pendingItems.push([entryDate, logbookEntry]);
+ return;
+ }
+
+ const previousEntryDate = this.pendingItems[
+ this.pendingItems.length - 1
+ ][0];
+
+ // If logbook entry is too long after the last one,
+ // add a time passed label
+ if (isSignificantTimeChange(previousEntryDate, entryDate)) {
+ this._renderLogbookEntries();
+ this.timeTracker.renderTime(previousEntryDate, entryDate);
+ }
+
+ this.pendingItems.push([entryDate, logbookEntry]);
+ }
+
+ flush() {
+ if (this.pendingItems.length > 0) {
+ this._renderLogbookEntries();
+ }
+ }
+
+ private _renderLogbookEntries() {
+ this.timeTracker.maybeRenderTime(this.pendingItems[0][0]);
+
+ const parts: TemplateResult[] = [];
+
+ let i;
+
+ for (
+ i = 0;
+ i < Math.min(this.pendingItems.length, LOGBOOK_ENTRIES_BEFORE_FOLD);
+ i++
+ ) {
+ parts.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
+ }
+
+ let moreItems: TemplateResult[] | undefined;
+
+ // If we didn't render all items, push rest into `moreItems`
+ if (i < this.pendingItems.length) {
+ moreItems = [];
+ for (; i < this.pendingItems.length; i++) {
+ moreItems.push(this._renderLogbookEntryHelper(this.pendingItems[i][1]));
+ }
+ }
+
+ this.entries.push(html`
+
+ ${parts}
+
+ `);
+
+ // Clear rendered items.
+ this.timeTracker.setLastReportedTime(
+ this.pendingItems[this.pendingItems.length - 1][0]
+ );
+ this.pendingItems = [];
+ }
+
+ private _renderLogbookEntryHelper(entry: LogbookEntry) {
+ return html`${entry.name} (${entry.entity_id})
+ ${entry.message || `turned ${entry.state}`}
`; + } +} + +class ActionRenderer { + private curIndex = 0; + + private keys: string[]; + + constructor( + private hass: HomeAssistant, + private entries: TemplateResult[], + private trace: AutomationTraceExtended, + private logbookRenderer: LogbookRenderer, + private timeTracker: RenderedTimeTracker + ) { + this.keys = Object.keys(trace.trace); + } + + get curItem() { + return this._getItem(this.curIndex); + } + + get hasNext() { + return this.curIndex !== this.keys.length; + } + + renderItem() { + this.curIndex = this._renderItem(this.curIndex); + } + + private _getItem(index: number) { + return this.trace.trace[this.keys[index]]; + } + + private _renderItem( + index: number, + actionType?: ReturnType
+ ): number {
+ const value = this._getItem(index);
+
+ if (isTriggerPath(value[0].path)) {
+ return this._handleTrigger(index, value[0] as TriggerTraceStep);
+ }
+
+ const timestamp = new Date(value[0].timestamp);
+
+ // Render all logbook items that are in front of this item.
+ while (
+ this.logbookRenderer.hasNext &&
+ new Date(this.logbookRenderer.curItem.when) < timestamp
+ ) {
+ this.logbookRenderer.maybeRenderItem();
+ }
+
+ this.logbookRenderer.flush();
+ this.timeTracker.maybeRenderTime(timestamp);
+
+ const path = value[0].path;
+ let data;
+ try {
+ data = getDataFromPath(this.trace.config, path);
+ } catch (err) {
+ this.entries.push(
+ html`Unable to extract path ${path}. Download trace and report as bug`
+ );
+ return index + 1;
+ }
+
+ const isTopLevel = path.split("/").length === 2;
+
+ if (!isTopLevel && !actionType) {
+ this._renderEntry(path, path.replace(/\//g, " "));
+ return index + 1;
+ }
+
+ if (!actionType) {
+ actionType = getActionType(data);
+ }
+
+ if (actionType === "choose") {
+ return this._handleChoose(index);
+ }
+
+ this._renderEntry(path, data.alias || actionType);
+ return index + 1;
+ }
+
+ private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
+ this._renderEntry(
+ triggerStep.path,
+ `Triggered ${
+ triggerStep.path === "trigger"
+ ? "manually"
+ : `by the ${triggerStep.changed_variables.trigger.description}`
+ } at
+ ${formatDateTimeWithSeconds(
+ new Date(triggerStep.timestamp),
+ this.hass.locale
+ )}`,
+ mdiCircle
+ );
+ return index + 1;
+ }
+
+ private _handleChoose(index: number): number {
+ // startLevel: choose root config
+
+ // +1: 'default
+ // +2: executed sequence
+
+ // +1: 'choose'
+ // +2: current choice
+
+ // +3: 'conditions'
+ // +4: evaluated condition
+
+ // +3: 'sequence'
+ // +4: executed sequence
+
+ const choosePath = this.keys[index];
+ const startLevel = choosePath.split("/").length - 1;
+
+ const chooseTrace = this._getItem(index)[0] as ChooseActionTraceStep;
+ const defaultExecuted = chooseTrace.result.choice === "default";
+ const chooseConfig = this._getDataFromPath(
+ this.keys[index]
+ ) as ChooseAction;
+ const name = chooseConfig.alias || "Choose";
+
+ if (defaultExecuted) {
+ this._renderEntry(choosePath, `${name}: Default action executed`);
+ } else {
+ const choiceConfig = this._getDataFromPath(
+ `${this.keys[index]}/choose/${chooseTrace.result.choice}`
+ ) as ChooseActionChoice;
+ const choiceName =
+ choiceConfig.alias || `Choice ${chooseTrace.result.choice}`;
+ this._renderEntry(choosePath, `${name}: ${choiceName} executed`);
+ }
+
+ let i;
+
+ // Skip over conditions
+ for (i = index + 1; i < this.keys.length; i++) {
+ const parts = this.keys[i].split("/");
+
+ // We're done if no more sequence in current level
+ if (parts.length <= startLevel) {
+ return i;
+ }
+
+ // We're going to skip all conditions
+ if (parts[startLevel + 3] === "sequence") {
+ break;
+ }
+ }
+
+ // Render choice
+ while (i < this.keys.length) {
+ const path = this.keys[i];
+ const parts = path.split("/");
+
+ // We're done if no more sequence in current level
+ if (parts.length <= startLevel) {
+ return i;
+ }
+
+ // We know it's an action sequence, so force the type like that
+ // for rendering.
+ i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
+ }
+
+ return i;
+ }
+
+ private _renderEntry(
+ path: string,
+ description: string,
+ icon = mdiRecordCircleOutline
+ ) {
+ this.entries.push(html`
+
+ ${description}
+
+ `);
+ }
+
+ private _getDataFromPath(path: string) {
+ return getDataFromPath(this.trace.config, path);
+ }
+}
+
+@customElement("hat-trace-timeline")
+export class HaAutomationTracer extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public trace?: AutomationTraceExtended;
+
+ @property({ attribute: false }) public logbookEntries?: LogbookEntry[];
+
+ @property({ attribute: false }) public selectedPath?: string;
+
+ @property({ type: Boolean }) public allowPick = false;
+
+ protected render(): TemplateResult {
+ if (!this.trace) {
+ return html``;
+ }
+
+ const entries: TemplateResult[] = [];
+
+ const timeTracker = new RenderedTimeTracker(this.hass, entries, this.trace);
+ const logbookRenderer = new LogbookRenderer(
+ entries,
+ timeTracker,
+ this.logbookEntries || []
+ );
+ const actionRenderer = new ActionRenderer(
+ this.hass,
+ entries,
+ this.trace,
+ logbookRenderer,
+ timeTracker
+ );
+
+ while (actionRenderer.hasNext) {
+ actionRenderer.renderItem();
+ }
+
+ while (logbookRenderer.hasNext) {
+ logbookRenderer.maybeRenderItem();
+ }
+
+ logbookRenderer.flush();
+
+ // null means it was stopped by a condition
+ if (this.trace.last_action !== null) {
+ entries.push(html`
+
+ ${this.trace.timestamp.finish
+ ? html`Finished at
+ ${formatDateTimeWithSeconds(
+ new Date(this.trace.timestamp.finish),
+ this.hass.locale
+ )}
+ (runtime:
+ ${(
+ (new Date(this.trace.timestamp.finish!).getTime() -
+ new Date(this.trace.timestamp.start).getTime()) /
+ 1000
+ ).toFixed(2)}
+ seconds)`
+ : "Still running"}
+
+ `);
+ }
+
+ return html`${entries}`;
+ }
+
+ protected updated(props: PropertyValues) {
+ super.updated(props);
+
+ // Pick first path when we load a new trace.
+ if (
+ this.allowPick &&
+ props.has("trace") &&
+ this.trace &&
+ this.selectedPath &&
+ !(this.selectedPath in this.trace.trace)
+ ) {
+ const element = this.shadowRoot!.querySelector(
+ "ha-timeline[data-path]"
+ );
+ if (element) {
+ fireEvent(this, "value-changed", { value: element.dataset.path });
+ this.selectedPath = element.dataset.path;
+ }
+ }
+
+ if (props.has("trace") || props.has("selectedPath")) {
+ this.shadowRoot!.querySelectorAll(
+ "ha-timeline[data-path]"
+ ).forEach((el) => {
+ el.style.setProperty(
+ "--timeline-ball-color",
+ this.selectedPath === el.dataset.path ? "var(--primary-color)" : null
+ );
+ if (!this.allowPick || el.dataset.upgraded) {
+ return;
+ }
+ el.dataset.upgraded = "1";
+ el.addEventListener("click", () => {
+ this.selectedPath = el.dataset.path;
+ fireEvent(this, "value-changed", { value: el.dataset.path });
+ });
+ el.addEventListener("mouseover", () => {
+ el.raised = true;
+ });
+ el.addEventListener("mouseout", () => {
+ el.raised = false;
+ });
+ });
+ }
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ css`
+ ha-timeline[lastItem].condition {
+ --timeline-ball-color: var(--error-color);
+ }
+ ha-timeline[data-path] {
+ cursor: pointer;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hat-trace-timeline": HaAutomationTracer;
+ }
+}
diff --git a/src/data/analytics.ts b/src/data/analytics.ts
new file mode 100644
index 0000000000..d8e04f69a1
--- /dev/null
+++ b/src/data/analytics.ts
@@ -0,0 +1,27 @@
+import { HomeAssistant } from "../types";
+
+export interface AnalyticsPreferences {
+ base?: boolean;
+ diagnostics?: boolean;
+ usage?: boolean;
+ statistics?: boolean;
+}
+
+export interface Analytics {
+ preferences: AnalyticsPreferences;
+ huuid: string;
+}
+
+export const getAnalyticsDetails = (hass: HomeAssistant) =>
+ hass.callWS({
+ type: "analytics",
+ });
+
+export const setAnalyticsPreferences = (
+ hass: HomeAssistant,
+ preferences: AnalyticsPreferences
+) =>
+ hass.callWS({
+ type: "analytics/preferences",
+ preferences,
+ });
diff --git a/src/data/automation.ts b/src/data/automation.ts
index f8ebcc2a05..acf8e04fa2 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -28,6 +28,17 @@ export interface ManualAutomationConfig {
action: Action[];
mode?: typeof MODES[number];
max?: number;
+ max_exceeded?:
+ | "silent"
+ | "critical"
+ | "fatal"
+ | "error"
+ | "warning"
+ | "warn"
+ | "info"
+ | "debug"
+ | "notset";
+ variables?: Record;
}
export interface BlueprintAutomationConfig extends ManualAutomationConfig {
@@ -45,7 +56,7 @@ export interface StateTrigger {
entity_id: string;
attribute?: string;
from?: string | number;
- to?: string | number;
+ to?: string | string[] | number;
for?: string | number | ForDict;
}
@@ -149,11 +160,13 @@ export type Trigger =
export interface LogicalCondition {
condition: "and" | "not" | "or";
+ alias?: string;
conditions: Condition[];
}
export interface StateCondition {
condition: "state";
+ alias?: string;
entity_id: string;
attribute?: string;
state: string | number;
@@ -162,6 +175,7 @@ export interface StateCondition {
export interface NumericStateCondition {
condition: "numeric_state";
+ alias?: string;
entity_id: string;
attribute?: string;
above?: number;
@@ -171,6 +185,7 @@ export interface NumericStateCondition {
export interface SunCondition {
condition: "sun";
+ alias?: string;
after_offset: number;
before_offset: number;
after: "sunrise" | "sunset";
@@ -179,12 +194,14 @@ export interface SunCondition {
export interface ZoneCondition {
condition: "zone";
+ alias?: string;
entity_id: string;
zone: string;
}
export interface TimeCondition {
condition: "time";
+ alias?: string;
after?: string;
before?: string;
weekday?: string | string[];
@@ -192,6 +209,7 @@ export interface TimeCondition {
export interface TemplateCondition {
condition: "template";
+ alias?: string;
value_template: string;
}
diff --git a/src/data/cached-history.ts b/src/data/cached-history.ts
index 6c97c20baa..8ef204408e 100644
--- a/src/data/cached-history.ts
+++ b/src/data/cached-history.ts
@@ -54,7 +54,7 @@ export const getRecent = (
}
const prom = fetchRecent(hass, entityId, startTime, endTime).then(
- (stateHistory) => computeHistory(hass, stateHistory, localize, language),
+ (stateHistory) => computeHistory(hass, stateHistory, localize),
(err) => {
delete RECENT_CACHE[entityId];
throw err;
@@ -140,12 +140,7 @@ export const getRecentWithCache = (
delete stateHistoryCache[cacheKey];
throw err;
}
- const stateHistory = computeHistory(
- hass,
- fetchedHistory,
- localize,
- language
- );
+ const stateHistory = computeHistory(hass, fetchedHistory, localize);
if (appendingToCache) {
mergeLine(stateHistory.line, cache.data.line);
mergeTimeline(stateHistory.timeline, cache.data.timeline);
diff --git a/src/data/cloud.ts b/src/data/cloud.ts
index 3aa285be0d..f153ea2041 100644
--- a/src/data/cloud.ts
+++ b/src/data/cloud.ts
@@ -46,6 +46,7 @@ export interface CloudPreferences {
export type CloudStatusLoggedIn = CloudStatusBase & {
email: string;
+ google_registered: boolean;
google_entities: EntityFilter;
google_domains: string[];
alexa_entities: EntityFilter;
diff --git a/src/data/data_entry_flow.ts b/src/data/data_entry_flow.ts
index 63210ebee5..f0ec11fc5f 100644
--- a/src/data/data_entry_flow.ts
+++ b/src/data/data_entry_flow.ts
@@ -1,4 +1,5 @@
import { HaFormSchema } from "../components/ha-form/ha-form";
+import { ConfigEntry } from "./config_entries";
export interface DataEntryFlowProgressedEvent {
type: "data_entry_flow_progressed";
@@ -44,8 +45,7 @@ export interface DataEntryFlowStepCreateEntry {
flow_id: string;
handler: string;
title: string;
- // Config entry ID
- result: string;
+ result: ConfigEntry;
description: string;
description_placeholders: Record;
}
diff --git a/src/data/device_automation.ts b/src/data/device_automation.ts
index 8319f8772b..339bf61a16 100644
--- a/src/data/device_automation.ts
+++ b/src/data/device_automation.ts
@@ -3,15 +3,18 @@ import { HaFormSchema } from "../components/ha-form/ha-form";
import { HomeAssistant } from "../types";
export interface DeviceAutomation {
+ alias?: string;
device_id: string;
domain: string;
- entity_id: string;
+ entity_id?: string;
type?: string;
subtype?: string;
event?: string;
}
-export type DeviceAction = DeviceAutomation;
+export interface DeviceAction extends DeviceAutomation {
+ entity_id: string;
+}
export interface DeviceCondition extends DeviceAutomation {
condition: string;
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index 99f035527c..7bff7d7e38 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -309,13 +309,12 @@ export const updateHassioAddon = async (
method: "post",
timeout: null,
});
- return;
+ } else {
+ await hass.callApi>(
+ "POST",
+ `hassio/addons/${slug}/update`
+ );
}
-
- await hass.callApi>(
- "POST",
- `hassio/addons/${slug}/update`
- );
};
export const restartHassioAddon = async (
diff --git a/src/data/hassio/common.ts b/src/data/hassio/common.ts
index de6a28c68b..dd774816a1 100644
--- a/src/data/hassio/common.ts
+++ b/src/data/hassio/common.ts
@@ -28,7 +28,22 @@ export const extractApiErrorMessage = (error: any): string => {
: error;
};
-export const ignoredStatusCodes = new Set([502, 503, 504]);
+const ignoredStatusCodes = new Set([502, 503, 504]);
+
+export const ignoreSupervisorError = (error): boolean => {
+ if (error && error.status_code && ignoredStatusCodes.has(error.status_code)) {
+ return true;
+ }
+ if (
+ error &&
+ error.message &&
+ (error.message.includes("ERR_CONNECTION_CLOSED") ||
+ error.message.includes("ERR_CONNECTION_RESET"))
+ ) {
+ return true;
+ }
+ return false;
+};
export const fetchHassioStats = async (
hass: HomeAssistant,
diff --git a/src/data/hassio/host.ts b/src/data/hassio/host.ts
index 2718adbcb4..6a9b7a25f8 100644
--- a/src/data/hassio/host.ts
+++ b/src/data/hassio/host.ts
@@ -104,7 +104,7 @@ export const configSyncOS = async (hass: HomeAssistant) => {
if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
return await hass.callWS({
type: "supervisor/api",
- endpoint: "os/config/sync",
+ endpoint: "/os/config/sync",
method: "post",
timeout: null,
});
diff --git a/src/data/hassio/snapshot.ts b/src/data/hassio/snapshot.ts
index 307571a75f..f8dcfcb3d7 100644
--- a/src/data/hassio/snapshot.ts
+++ b/src/data/hassio/snapshot.ts
@@ -105,6 +105,7 @@ export const createHassioFullSnapshot = async (
endpoint: "/snapshots/new/full",
method: "post",
timeout: null,
+ data,
});
return;
}
diff --git a/src/data/history.ts b/src/data/history.ts
index 7bab985c1c..c2fb363ebf 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -4,6 +4,7 @@ import { computeStateDomain } from "../common/entity/compute_state_domain";
import { computeStateName } from "../common/entity/compute_state_name";
import { LocalizeFunc } from "../common/translations/localize";
import { HomeAssistant } from "../types";
+import { FrontendTranslationData } from "./translation";
const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
const LINE_ATTRIBUTES_TO_KEEP = [
@@ -109,7 +110,7 @@ const equalState = (obj1: LineChartState, obj2: LineChartState) =>
const processTimelineEntity = (
localize: LocalizeFunc,
- language: string,
+ language: FrontendTranslationData,
states: HassEntity[]
): TimelineEntity => {
const data: TimelineState[] = [];
@@ -203,8 +204,7 @@ const processLineChartEntities = (
export const computeHistory = (
hass: HomeAssistant,
stateHistory: HassEntity[][],
- localize: LocalizeFunc,
- language: string
+ localize: LocalizeFunc
): HistoryResult => {
const lineChartDevices: { [unit: string]: HassEntity[][] } = {};
const timelineDevices: TimelineEntity[] = [];
@@ -235,7 +235,7 @@ export const computeHistory = (
if (!unit) {
timelineDevices.push(
- processTimelineEntity(localize, language, stateInfo)
+ processTimelineEntity(localize, hass.locale, stateInfo)
);
} else if (unit in lineChartDevices) {
lineChartDevices[unit].push(stateInfo);
diff --git a/src/data/integration.ts b/src/data/integration.ts
index 8a59d2d4d7..d8caf1b591 100644
--- a/src/data/integration.ts
+++ b/src/data/integration.ts
@@ -25,8 +25,11 @@ export const integrationIssuesUrl = (
manifest.issue_tracker ||
`https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`;
-export const domainToName = (localize: LocalizeFunc, domain: string) =>
- localize(`component.${domain}.title`) || domain;
+export const domainToName = (
+ localize: LocalizeFunc,
+ domain: string,
+ manifest?: IntegrationManifest
+) => localize(`component.${domain}.title`) || manifest?.name || domain;
export const fetchIntegrationManifests = (hass: HomeAssistant) =>
hass.callWS({ type: "manifest/list" });
diff --git a/src/data/logbook.ts b/src/data/logbook.ts
index d6b55d91c1..bfc4f002bf 100644
--- a/src/data/logbook.ts
+++ b/src/data/logbook.ts
@@ -14,7 +14,9 @@ export interface LogbookEntry {
message?: string;
entity_id?: string;
icon?: string;
- domain: string;
+ source?: string;
+ domain?: string;
+ context_id?: string;
context_user_id?: string;
context_event_type?: string;
context_domain?: string;
@@ -29,21 +31,45 @@ const DATA_CACHE: {
[cacheKey: string]: { [entityId: string]: Promise };
} = {};
+export const getLogbookDataForContext = async (
+ hass: HomeAssistant,
+ startDate: string,
+ contextId?: string
+): Promise =>
+ addLogbookMessage(
+ hass,
+ await getLogbookDataFromServer(
+ hass,
+ startDate,
+ undefined,
+ undefined,
+ undefined,
+ contextId
+ )
+ );
+
export const getLogbookData = async (
hass: HomeAssistant,
startDate: string,
endDate: string,
entityId?: string,
entity_matches_only?: boolean
-) => {
- const logbookData = await getLogbookDataCache(
+): Promise =>
+ addLogbookMessage(
hass,
- startDate,
- endDate,
- entityId,
- entity_matches_only
+ await getLogbookDataCache(
+ hass,
+ startDate,
+ endDate,
+ entityId,
+ entity_matches_only
+ )
);
+export const addLogbookMessage = (
+ hass: HomeAssistant,
+ logbookData: LogbookEntry[]
+): LogbookEntry[] => {
for (const entry of logbookData) {
const stateObj = hass!.states[entry.entity_id!];
if (entry.state && stateObj) {
@@ -55,7 +81,6 @@ export const getLogbookData = async (
);
}
}
-
return logbookData;
};
@@ -100,15 +125,30 @@ export const getLogbookDataCache = async (
const getLogbookDataFromServer = async (
hass: HomeAssistant,
startDate: string,
- endDate: string,
+ endDate?: string,
entityId?: string,
- entity_matches_only?: boolean
+ entitymatchesOnly?: boolean,
+ contextId?: string
) => {
- const url = `logbook/${startDate}?end_time=${endDate}${
- entityId ? `&entity=${entityId}` : ""
- }${entity_matches_only ? `&entity_matches_only` : ""}`;
+ const params = new URLSearchParams();
- return hass.callApi("GET", url);
+ if (endDate) {
+ params.append("end_time", endDate);
+ }
+ if (entityId) {
+ params.append("entity", entityId);
+ }
+ if (entitymatchesOnly) {
+ params.append("entity_matches_only", "");
+ }
+ if (contextId) {
+ params.append("context_id", contextId);
+ }
+
+ return hass.callApi(
+ "GET",
+ `logbook/${startDate}?${params.toString()}`
+ );
};
export const clearLogbookCache = (startDate: string, endDate: string) => {
@@ -283,7 +323,7 @@ export const getLogbookMessage = (
`${LOGBOOK_LOCALIZE_PATH}.changed_to_state`,
"state",
stateObj
- ? computeStateDisplay(hass.localize, stateObj, hass.language, state)
+ ? computeStateDisplay(hass.localize, stateObj, hass.locale, state)
: state
);
};
diff --git a/src/data/lovelace.ts b/src/data/lovelace.ts
index 447b803dec..89611b44ef 100644
--- a/src/data/lovelace.ts
+++ b/src/data/lovelace.ts
@@ -109,7 +109,7 @@ export interface LovelaceBadgeConfig {
export interface LovelaceCardConfig {
index?: number;
view_index?: number;
- layout?: any;
+ view_layout?: any;
type: string;
[key: string]: any;
}
diff --git a/src/data/onboarding.ts b/src/data/onboarding.ts
index 48f7e42f40..3d9e24ee9b 100644
--- a/src/data/onboarding.ts
+++ b/src/data/onboarding.ts
@@ -12,10 +12,14 @@ export interface OnboardingIntegrationStepResponse {
auth_code: string;
}
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface OnboardingAnalyticsStepResponse {}
+
export interface OnboardingResponses {
user: OnboardingUserStepResponse;
core_config: OnboardingCoreConfigStepResponse;
integration: OnboardingIntegrationStepResponse;
+ analytics: OnboardingAnalyticsStepResponse;
}
export type ValidOnboardingStep = keyof OnboardingResponses;
@@ -49,6 +53,9 @@ export const onboardCoreConfigStep = (hass: HomeAssistant) =>
"onboarding/core_config"
);
+export const onboardAnalyticsStep = (hass: HomeAssistant) =>
+ hass.callApi("POST", "onboarding/analytics");
+
export const onboardIntegrationStep = (
hass: HomeAssistant,
params: { client_id: string; redirect_uri: string }
diff --git a/src/data/remote.ts b/src/data/remote.ts
new file mode 100644
index 0000000000..1f87a2038e
--- /dev/null
+++ b/src/data/remote.ts
@@ -0,0 +1,16 @@
+import {
+ HassEntityAttributeBase,
+ HassEntityBase,
+} from "home-assistant-js-websocket";
+
+export const REMOTE_SUPPORT_LEARN_COMMAND = 1;
+export const REMOTE_SUPPORT_DELETE_COMMAND = 2;
+export const REMOTE_SUPPORT_ACTIVITY = 4;
+
+export type RemoteEntity = HassEntityBase & {
+ attributes: HassEntityAttributeBase & {
+ current_activity: string | null;
+ activity_list: string[] | null;
+ [key: string]: any;
+ };
+};
diff --git a/src/data/script.ts b/src/data/script.ts
index bb04af28e5..5bc023b161 100644
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -29,12 +29,14 @@ export interface ScriptConfig {
}
export interface EventAction {
+ alias?: string;
event: string;
event_data?: Record;
event_data_template?: Record;
}
export interface ServiceAction {
+ alias?: string;
service: string;
entity_id?: string;
target?: HassServiceTarget;
@@ -42,6 +44,7 @@ export interface ServiceAction {
}
export interface DeviceAction {
+ alias?: string;
device_id: string;
domain: string;
entity_id: string;
@@ -55,30 +58,36 @@ export interface DelayActionParts {
days?: number;
}
export interface DelayAction {
+ alias?: string;
delay: number | Partial | string;
}
export interface SceneAction {
+ alias?: string;
scene: string;
}
export interface WaitAction {
+ alias?: string;
wait_template: string;
timeout?: number;
continue_on_timeout?: boolean;
}
export interface WaitForTriggerAction {
+ alias?: string;
wait_for_trigger: Trigger[];
timeout?: number;
continue_on_timeout?: boolean;
}
export interface RepeatAction {
+ alias?: string;
repeat: CountRepeat | WhileRepeat | UntilRepeat;
}
interface BaseRepeat {
+ alias?: string;
sequence: Action[];
}
@@ -94,8 +103,15 @@ export interface UntilRepeat extends BaseRepeat {
until: Condition[];
}
+export interface ChooseActionChoice {
+ alias?: string;
+ conditions: string | Condition[];
+ sequence: Action[];
+}
+
export interface ChooseAction {
- choose: [{ conditions: Condition[]; sequence: Action[] }];
+ alias?: string;
+ choose: ChooseActionChoice[];
default?: Action[];
}
@@ -149,3 +165,41 @@ export const getScriptEditorInitData = () => {
inititialScriptEditorData = undefined;
return data;
};
+
+export const getActionType = (action: Action) => {
+ // Check based on config_validation.py#determine_script_action
+ if ("delay" in action) {
+ return "delay";
+ }
+ if ("wait_template" in action) {
+ return "wait_template";
+ }
+ if ("condition" in action) {
+ return "check_condition";
+ }
+ if ("event" in action) {
+ return "fire_event";
+ }
+ if ("device_id" in action) {
+ return "device_action";
+ }
+ if ("scene" in action) {
+ return "activate_scene";
+ }
+ if ("repeat" in action) {
+ return "repeat";
+ }
+ if ("choose" in action) {
+ return "choose";
+ }
+ if ("wait_for_trigger" in action) {
+ return "wait_for_trigger";
+ }
+ if ("variables" in action) {
+ return "variables";
+ }
+ if ("service" in action) {
+ return "service";
+ }
+ return "unknown";
+};
diff --git a/src/data/service.ts b/src/data/service.ts
new file mode 100644
index 0000000000..120d3096c9
--- /dev/null
+++ b/src/data/service.ts
@@ -0,0 +1,8 @@
+import { HomeAssistant } from "../types";
+import { Action } from "./script";
+
+export const callExecuteScript = (hass: HomeAssistant, sequence: Action[]) =>
+ hass.callWS({
+ type: "execute_script",
+ sequence,
+ });
diff --git a/src/data/supervisor/core.ts b/src/data/supervisor/core.ts
index 0191dbe278..2d0cec2df7 100644
--- a/src/data/supervisor/core.ts
+++ b/src/data/supervisor/core.ts
@@ -14,8 +14,7 @@ export const updateCore = async (hass: HomeAssistant) => {
method: "post",
timeout: null,
});
- return;
+ } else {
+ await hass.callApi>("POST", `hassio/core/update`);
}
-
- await hass.callApi>("POST", `hassio/core/update`);
};
diff --git a/src/data/trace.ts b/src/data/trace.ts
new file mode 100644
index 0000000000..3ad16845c0
--- /dev/null
+++ b/src/data/trace.ts
@@ -0,0 +1,157 @@
+import { strStartsWith } from "../common/string/starts-with";
+import { HomeAssistant, Context } from "../types";
+import { AutomationConfig } from "./automation";
+
+interface BaseTraceStep {
+ path: string;
+ timestamp: string;
+ changed_variables?: Record;
+}
+
+export interface TriggerTraceStep extends BaseTraceStep {
+ changed_variables: {
+ trigger: {
+ description: string;
+ [key: string]: unknown;
+ };
+ [key: string]: unknown;
+ };
+}
+
+export interface ConditionTraceStep extends BaseTraceStep {
+ result: { result: boolean };
+}
+
+export interface CallServiceActionTraceStep extends BaseTraceStep {
+ result: {
+ limit: number;
+ running_script: boolean;
+ params: Record;
+ };
+ child_id?: {
+ domain: string;
+ item_id: string;
+ run_id: string;
+ };
+}
+
+export interface ChooseActionTraceStep extends BaseTraceStep {
+ result: { choice: number | "default" };
+}
+
+export interface ChooseChoiceActionTraceStep extends BaseTraceStep {
+ result: { result: boolean };
+}
+
+export type ActionTraceStep =
+ | BaseTraceStep
+ | ConditionTraceStep
+ | CallServiceActionTraceStep
+ | ChooseActionTraceStep
+ | ChooseChoiceActionTraceStep;
+
+export interface AutomationTrace {
+ domain: string;
+ item_id: string;
+ last_action: string | null;
+ last_condition: string | null;
+ run_id: string;
+ state: "running" | "stopped" | "debugged";
+ timestamp: {
+ start: string;
+ finish: string | null;
+ };
+ trigger: unknown;
+}
+
+export interface AutomationTraceExtended extends AutomationTrace {
+ trace: Record;
+ context: Context;
+ variables: Record;
+ config: AutomationConfig;
+}
+
+interface TraceTypes {
+ automation: {
+ short: AutomationTrace;
+ extended: AutomationTraceExtended;
+ };
+}
+
+export const loadTrace = (
+ hass: HomeAssistant,
+ domain: T,
+ item_id: string,
+ run_id: string
+): Promise =>
+ hass.callWS({
+ type: "trace/get",
+ domain,
+ item_id,
+ run_id,
+ });
+
+export const loadTraces = (
+ hass: HomeAssistant,
+ domain: T,
+ item_id: string
+): Promise> =>
+ hass.callWS({
+ type: "trace/list",
+ domain,
+ item_id,
+ });
+
+export type TraceContexts = Record<
+ string,
+ { run_id: string; domain: string; item_id: string }
+>;
+
+export const loadTraceContexts = (
+ hass: HomeAssistant,
+ domain?: string,
+ item_id?: string
+): Promise =>
+ hass.callWS({
+ type: "trace/contexts",
+ domain,
+ item_id,
+ });
+
+export const getDataFromPath = (
+ config: AutomationConfig,
+ path: string
+): any => {
+ const parts = path.split("/").reverse();
+
+ let result: any = config;
+
+ while (parts.length) {
+ const raw = parts.pop()!;
+ const asNumber = Number(raw);
+
+ if (isNaN(asNumber)) {
+ result = result[raw];
+ continue;
+ }
+
+ if (Array.isArray(result)) {
+ result = result[asNumber];
+ continue;
+ }
+
+ if (asNumber !== 0) {
+ throw new Error("If config is not an array, can only return index 0");
+ }
+ }
+
+ return result;
+};
+
+// It is 'trigger' if manually triggered by the user via UI
+export const isTriggerPath = (path: string): boolean =>
+ path === "trigger" || strStartsWith(path, "trigger/");
+
+export const getTriggerPathFromTrace = (
+ steps: Record
+): string | undefined => Object.keys(steps).find((path) => isTriggerPath(path));
diff --git a/src/data/translation.ts b/src/data/translation.ts
index 4316242262..bc6603c5c2 100644
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@@ -1,8 +1,18 @@
import { HomeAssistant } from "../types";
import { fetchFrontendUserData, saveFrontendUserData } from "./frontend";
+export enum NumberFormat {
+ language = "language",
+ system = "system",
+ comma_decimal = "comma_decimal",
+ decimal_comma = "decimal_comma",
+ space_comma = "space_comma",
+ none = "none",
+}
+
export interface FrontendTranslationData {
language: string;
+ number_format: NumberFormat;
}
declare global {
diff --git a/src/data/weather.ts b/src/data/weather.ts
index a2eef98845..0014deb261 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -133,7 +133,7 @@ export const getWind = (
speed: string,
bearing: string
): string => {
- const speedText = `${formatNumber(speed, hass!.language)} ${getWeatherUnit(
+ const speedText = `${formatNumber(speed, hass.locale)} ${getWeatherUnit(
hass!,
"wind_speed"
)}`;
@@ -206,7 +206,7 @@ export const getSecondaryWeatherAttribute = (
=>
- hass.callWS({
- type: "zha/devices/reconfigure",
- ieee: ieeeAddress,
- });
+ ieeeAddress: string,
+ callbackFunction: any
+) => {
+ return hass.connection.subscribeMessage(
+ (message) => callbackFunction(message),
+ {
+ type: "zha/devices/reconfigure",
+ ieee: ieeeAddress,
+ }
+ );
+};
export const refreshTopology = (hass: HomeAssistant): Promise =>
hass.callWS({
diff --git a/src/data/zwave_js.ts b/src/data/zwave_js.ts
index 8dd77a3335..d6db70bd21 100644
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@@ -28,6 +28,34 @@ export interface ZWaveJSNode {
status: number;
}
+export interface ZWaveJSNodeConfigParams {
+ property: number;
+ value: any;
+ configuration_value_type: string;
+ metadata: ZWaveJSNodeConfigParamMetadata;
+}
+
+export interface ZWaveJSNodeConfigParamMetadata {
+ description: string;
+ label: string;
+ max: number;
+ min: number;
+ readable: boolean;
+ writeable: boolean;
+ type: string;
+ unit: string;
+ states: { [key: number]: string };
+}
+
+export interface ZWaveJSSetConfigParamData {
+ type: string;
+ entry_id: string;
+ node_id: number;
+ property: number;
+ property_key?: number;
+ value: string | number;
+}
+
export enum NodeStatus {
Unknown,
Asleep,
@@ -58,6 +86,36 @@ export const fetchNodeStatus = (
node_id,
});
+export const fetchNodeConfigParameters = (
+ hass: HomeAssistant,
+ entry_id: string,
+ node_id: number
+): Promise =>
+ hass.callWS({
+ type: "zwave_js/get_config_parameters",
+ entry_id,
+ node_id,
+ });
+
+export const setNodeConfigParameter = (
+ hass: HomeAssistant,
+ entry_id: string,
+ node_id: number,
+ property: number,
+ value: number,
+ property_key?: number
+): Promise => {
+ const data: ZWaveJSSetConfigParamData = {
+ type: "zwave_js/set_config_parameter",
+ entry_id,
+ node_id,
+ property,
+ value,
+ property_key,
+ };
+ return hass.callWS(data);
+};
+
export const getIdentifiersFromDevice = function (
device: DeviceRegistryEntry
): ZWaveJSNodeIdentifiers | undefined {
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 76ac0d966b..1fdbe9b715 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -315,7 +315,7 @@ class DataEntryFlowDialog extends LitElement {
this._step.type === "create_entry"
) {
if (this._params!.flowConfig.loadDevicesAndAreas) {
- this._fetchDevices(this._step.result);
+ this._fetchDevices(this._step.result.entry_id);
this._fetchAreas();
} else {
this._devices = [];
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index ee12067b20..f6f2d96b2a 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -43,6 +43,13 @@ class StepFlowCreateEntry extends LitElement {
5
8
0
@@ -106,27 +109,27 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="3"
- raised
+ outlined
>3
6
9
[[localize('ui.card.alarm_control_panel.clear_code')]]
@@ -201,6 +204,10 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
type: Boolean,
value: false,
},
+ _inputMode: {
+ type: String,
+ computed: "_getInputMode(_codeFormat)",
+ },
};
}
@@ -237,8 +244,12 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
}
}
+ _getInputMode(format) {
+ return this._isNumber(format) ? "numeric" : "text";
+ }
+
_isNumber(format) {
- return format === "Number";
+ return format === FORMAT_NUMBER;
}
_validateCode(code, format, armVisible, codeArmRequired) {
diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts
new file mode 100644
index 0000000000..cb00995758
--- /dev/null
+++ b/src/dialogs/more-info/controls/more-info-remote.ts
@@ -0,0 +1,93 @@
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-attributes";
+import "../../../components/ha-paper-dropdown-menu";
+import { RemoteEntity, REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
+import { HomeAssistant } from "../../../types";
+
+const filterExtraAttributes = "activity_list,current_activity";
+
+@customElement("more-info-remote")
+class MoreInfoRemote extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property() public stateObj?: RemoteEntity;
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this.stateObj) {
+ return html``;
+ }
+
+ const stateObj = this.stateObj;
+
+ return html`
+ ${supportsFeature(stateObj, REMOTE_SUPPORT_ACTIVITY)
+ ? html`
+
+
+ ${stateObj.attributes.activity_list!.map(
+ (activity) => html`
+
+ ${activity}
+
+ `
+ )}
+
+
+ `
+ : ""}
+
+
@@ -61,10 +61,7 @@ class MoreInfoSun extends LitElement {
${this.hass.localize("ui.dialogs.more_info_control.sun.elevation")}
stateObj !== undefined &&
@@ -29,6 +30,8 @@ export class HaEntityToggle extends LitElement {
@property() public stateObj?: HassEntity;
+ @property() public label?: string;
+
@internalProperty() private _isOn = false;
protected render(): TemplateResult {
@@ -55,15 +58,21 @@ export class HaEntityToggle extends LitElement {
`;
}
+ const switchTemplate = html`${switchTemplate}
`;
}
diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 86e4d899b1..340677ff41 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -116,12 +116,8 @@ export class HaStateLabelBadge extends LitElement {
: state.state === UNKNOWN
? "-"
: state.attributes.unit_of_measurement
- ? formatNumber(state.state, this.hass!.language)
- : computeStateDisplay(
- this.hass!.localize,
- state,
- this.hass!.language
- );
+ ? formatNumber(state.state, this.hass!.locale)
+ : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
}
}
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index d493fb625d..0bb035cc7f 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -84,7 +84,7 @@ class StateInfo extends LitElement {
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
- if (!oldHass || oldHass.language !== this.hass.language) {
+ if (!oldHass || oldHass.locale !== this.hass.locale) {
this.rtl = computeRTL(this.hass);
}
}
diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts
new file mode 100644
index 0000000000..bbc4682e27
--- /dev/null
+++ b/src/components/ha-analytics.ts
@@ -0,0 +1,188 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { fireEvent } from "../common/dom/fire_event";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import { documentationUrl } from "../util/documentation-url";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
+import "./ha-settings-row";
+
+const ADDITIONAL_PREFERENCES = ["usage", "statistics"];
+
+declare global {
+ interface HASSDomEvents {
+ "analytics-preferences-changed": { preferences: AnalyticsPreferences };
+ }
+}
+
+@customElement("ha-analytics")
+export class HaAnalytics extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public analytics!: Analytics;
+
+ protected render(): TemplateResult {
+ if (!this.analytics.huuid) {
+ return html``;
+ }
+
+ const enabled = this.analytics.preferences.base;
+
+ return html`
+
+
+
+
+
+
+ ${this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.base.title`
+ )}
+
+
+ ${this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.base.description`
+ )}
+
+
+ ${ADDITIONAL_PREFERENCES.map(
+ (preference) =>
+ html`
+
+
+
+ ${!enabled
+ ? html`${this.hass.localize(
+ "ui.panel.config.core.section.core.analytics.needs_base"
+ )}
+ `
+ : ""}
+
+
+ ${preference === "usage"
+ ? isComponentLoaded(this.hass, "hassio")
+ ? this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.title`
+ )
+ : this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.usage.title`
+ )
+ : this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.${preference}.title`
+ )}
+
+
+ ${preference === "usage"
+ ? isComponentLoaded(this.hass, "hassio")
+ ? this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.usage_supervisor.description`
+ )
+ : this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.usage.description`
+ )
+ : this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.${preference}.description`
+ )}
+
+ `
+ )}
+
+
+
+
+
+
+ ${this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.diagnostics.title`
+ )}
+
+
+ ${this.hass.localize(
+ `ui.panel.config.core.section.core.analytics.preference.diagnostics.description`
+ )}
+
+
+
+
+
+
+ `;
+ }
+
+ private _handleClick(): void {
+ if (this.disabled) {
+ return;
+ }
+ this._open = true;
+ }
+
+ private _onClosed(): void {
+ this._open = false;
+ }
+
+ private async _devicePicked(ev: CustomEvent) {
+ const deviceId = ev.detail.value;
+ if (!deviceId) {
+ fireEvent(this, "related-changed", { value: undefined });
+ return;
+ }
+ const filter = this.hass.localize(
+ "ui.components.related-filter-menu.filtered_by_device",
+ "device_name",
+ (ev.currentTarget as any).comboBox.selectedItem.name
+ );
+ const items = await findRelated(this.hass, "device", deviceId);
+
+ fireEvent(this, "related-changed", {
+ value: { device: deviceId },
+ filter,
+ items,
+ });
+ }
+
+ private async _areaPicked(ev: CustomEvent) {
+ const areaId = ev.detail.value;
+ if (!areaId) {
+ fireEvent(this, "related-changed", { value: undefined });
+ return;
+ }
+ const filter = this.hass.localize(
+ "ui.components.related-filter-menu.filtered_by_area",
+ "area_name",
+ (ev.currentTarget as any).comboBox.selectedItem.name
+ );
+ const items = await findRelated(this.hass, "area", areaId);
+ fireEvent(this, "related-changed", {
+ value: { area: areaId },
+ filter,
+ items,
+ });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: inline-block;
+ position: relative;
+ }
+ :host([narrow]) {
+ position: static;
+ }
+ ha-area-picker,
+ ha-device-picker {
+ display: block;
+ width: 300px;
+ padding: 4px 16px;
+ box-sizing: border-box;
+ }
+ :host([narrow]) ha-area-picker,
+ :host([narrow]) ha-device-picker {
+ width: 100%;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-button-related-filter-menu": HaRelatedFilterButtonMenu;
+ }
+}
diff --git a/src/components/ha-chips.ts b/src/components/ha-chip-set.ts
similarity index 55%
rename from src/components/ha-chips.ts
rename to src/components/ha-chip-set.ts
index 8a1363cf8f..9f1e237188 100644
--- a/src/components/ha-chips.ts
+++ b/src/components/ha-chip-set.ts
@@ -1,6 +1,5 @@
// @ts-ignore
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
import {
css,
CSSResult,
@@ -12,6 +11,7 @@ import {
unsafeCSS,
} from "lit-element";
import { fireEvent } from "../common/dom/fire_event";
+import "./ha-chip";
declare global {
// for fire event
@@ -20,8 +20,8 @@ declare global {
}
}
-@customElement("ha-chips")
-export class HaChips extends LitElement {
+@customElement("ha-chip-set")
+export class HaChipSet extends LitElement {
@property() public items = [];
protected render(): TemplateResult {
@@ -33,18 +33,9 @@ export class HaChips extends LitElement {
${this.items.map(
(item, idx) =>
html`
-
+ ${item}
+
`
)}
@@ -60,9 +51,9 @@ export class HaChips extends LitElement {
static get styles(): CSSResult {
return css`
${unsafeCSS(chipStyles)}
- .mdc-chip {
- background-color: rgba(var(--rgb-primary-text-color), 0.15);
- color: var(--primary-text-color);
+
+ ha-chip {
+ margin: 4px;
}
`;
}
@@ -70,6 +61,6 @@ export class HaChips extends LitElement {
declare global {
interface HTMLElementTagNameMap {
- "ha-chips": HaChips;
+ "ha-chip-set": HaChipSet;
}
}
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
new file mode 100644
index 0000000000..2f57b6c943
--- /dev/null
+++ b/src/components/ha-chip.ts
@@ -0,0 +1,74 @@
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
+import "./ha-icon";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+ unsafeCSS,
+} from "lit-element";
+
+declare global {
+ // for fire event
+ interface HASSDomEvents {
+ "chip-clicked": { index: string };
+ }
+}
+
+@customElement("ha-chip")
+export class HaChip extends LitElement {
+ @property() public index = 0;
+
+ @property({ type: Boolean }) public hasIcon = false;
+
+ protected render(): TemplateResult {
+ return html`
+ + ${this.hass.localize( + "ui.panel.config.core.section.core.analytics.instance_id", + "huuid", + this.analytics.huuid + )} +
++ + ${this.hass.localize( + "ui.panel.config.core.section.core.analytics.learn_more" + )} + +
+ `; + } + + private _handleRowCheckboxClick(ev: Event) { + const checkbox = ev.currentTarget as HaCheckbox; + const preference = (checkbox as any).preference; + const preferences = { ...this.analytics.preferences }; + + if (checkbox.checked) { + if (preferences[preference]) { + return; + } + preferences[preference] = true; + } else { + preferences[preference] = false; + } + + fireEvent(this, "analytics-preferences-changed", { preferences }); + } + + static get styles(): CSSResult[] { + return [ + haStyle, + css` + .error { + color: var(--error-color); + } + + ha-settings-row { + padding: 0; + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-analytics": HaAnalytics; + } +} diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts index 0bf8fb199f..45096550a4 100644 --- a/src/components/ha-area-picker.ts +++ b/src/components/ha-area-picker.ts @@ -127,7 +127,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { @internalProperty() private _opened?: boolean; - @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement; + @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement; private _init = false; @@ -140,7 +140,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { this._devices = devices; }), subscribeEntityRegistry(this.hass.connection!, (entities) => { - this._entities = entities.filter((entity) => entity.area_id); + this._entities = entities; }), ]; } @@ -193,13 +193,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { deviceEntityLookup[entity.device_id].push(entity); } inputDevices = devices; - inputEntities = entities; + inputEntities = entities.filter((entity) => entity.area_id); } else { if (deviceFilter) { inputDevices = devices; } if (entityFilter) { - inputEntities = entities; + inputEntities = entities.filter((entity) => entity.area_id); } } @@ -319,7 +319,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) { (changedProps.has("_opened") && this._opened) ) { this._init = true; - (this._comboBox as any).items = this._getAreas( + (this.comboBox as any).items = this._getAreas( this._areas!, this._devices!, this._entities!, diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts index 5aafc86d78..de50f7bd42 100644 --- a/src/components/ha-button-menu.ts +++ b/src/components/ha-button-menu.ts @@ -1,4 +1,3 @@ -import "@material/mwc-button"; import "@material/mwc-menu"; import type { Corner, Menu } from "@material/mwc-menu"; import { @@ -11,8 +10,6 @@ import { query, TemplateResult, } from "lit-element"; -import "./ha-icon-button"; - @customElement("ha-button-menu") export class HaButtonMenu extends LitElement { @property() public corner: Corner = "TOP_START"; diff --git a/src/components/ha-button-related-filter-menu.ts b/src/components/ha-button-related-filter-menu.ts new file mode 100644 index 0000000000..fa2c580735 --- /dev/null +++ b/src/components/ha-button-related-filter-menu.ts @@ -0,0 +1,163 @@ +import "@material/mwc-icon-button"; +import type { Corner } from "@material/mwc-menu"; +import { mdiFilterVariant } from "@mdi/js"; +import { + css, + CSSResult, + customElement, + html, + internalProperty, + LitElement, + property, + TemplateResult, +} from "lit-element"; +import "@material/mwc-menu/mwc-menu-surface"; +import { fireEvent } from "../common/dom/fire_event"; +import { findRelated, RelatedResult } from "../data/search"; +import type { HomeAssistant } from "../types"; +import "./ha-svg-icon"; +import "./ha-area-picker"; +import "./device/ha-device-picker"; + +declare global { + // for fire event + interface HASSDomEvents { + "related-changed": { + value?: FilterValue; + items?: RelatedResult; + filter?: string; + }; + } +} + +interface FilterValue { + area?: string; + device?: string; +} + +@customElement("ha-button-related-filter-menu") +export class HaRelatedFilterButtonMenu extends LitElement { + @property() public hass!: HomeAssistant; + + @property() public corner: Corner = "TOP_START"; + + @property({ type: Boolean, reflect: true }) public narrow = false; + + @property({ type: Boolean }) public disabled = false; + + @property({ attribute: false }) public value?: FilterValue; + + @internalProperty() private _open = false; + + protected render(): TemplateResult { + return html` +
-
-
-
- ${item}
-
-
-
+
+ ${this.hasIcon
+ ? html`
+ `;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ ${unsafeCSS(chipStyles)}
+ .mdc-chip {
+ background-color: var(
+ --ha-chip-background-color,
+ rgba(var(--rgb-primary-text-color), 0.15)
+ );
+ color: var(--ha-chip-text-color, var(--primary-text-color));
+ }
+
+ .mdc-chip:hover {
+ color: var(--ha-chip-text-color, var(--primary-text-color));
+ }
+
+ .mdc-chip__icon--leading {
+ --mdc-icon-size: 20px;
+ color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-chip": HaChip;
+ }
+}
diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
index 9b46f6cdb8..aac651d6af 100644
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@@ -53,14 +53,14 @@ class HaClimateState extends LitElement {
if (this.stateObj.attributes.current_temperature != null) {
return `${formatNumber(
this.stateObj.attributes.current_temperature,
- this.hass!.language
+ this.hass.locale
)} ${this.hass.config.unit_system.temperature}`;
}
if (this.stateObj.attributes.current_humidity != null) {
return `${formatNumber(
this.stateObj.attributes.current_humidity,
- this.hass!.language
+ this.hass.locale
)} %`;
}
@@ -78,17 +78,17 @@ class HaClimateState extends LitElement {
) {
return `${formatNumber(
this.stateObj.attributes.target_temp_low,
- this.hass!.language
+ this.hass.locale
)}-${formatNumber(
this.stateObj.attributes.target_temp_high,
- this.hass!.language
+ this.hass.locale
)} ${this.hass.config.unit_system.temperature}`;
}
if (this.stateObj.attributes.temperature != null) {
return `${formatNumber(
this.stateObj.attributes.temperature,
- this.hass!.language
+ this.hass.locale
)} ${this.hass.config.unit_system.temperature}`;
}
if (
@@ -97,17 +97,17 @@ class HaClimateState extends LitElement {
) {
return `${formatNumber(
this.stateObj.attributes.target_humidity_low,
- this.hass!.language
+ this.hass.locale
)}-${formatNumber(
this.stateObj.attributes.target_humidity_high,
- this.hass!.language
- )}%`;
+ this.hass.locale
+ )} %`;
}
if (this.stateObj.attributes.humidity != null) {
return `${formatNumber(
this.stateObj.attributes.humidity,
- this.hass!.language
+ this.hass.locale
)} %`;
}
diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index 1ec42a3dd8..064383ccbf 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -47,6 +47,17 @@ export class HaCodeEditor extends UpdatingElement {
return this.codemirror ? this.codemirror.state.doc.toString() : this._value;
}
+ public get hasComments(): boolean {
+ if (!this.codemirror || !this._loadedCodeMirror) {
+ return false;
+ }
+ const className = this._loadedCodeMirror.HighlightStyle.get(
+ this.codemirror.state,
+ this._loadedCodeMirror.tags.comment
+ );
+ return !!this.shadowRoot!.querySelector(`span.${className}`);
+ }
+
public connectedCallback() {
super.connectedCallback();
if (!this.codemirror) {
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 6f6acd3346..19f89bd410 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -86,6 +86,10 @@ export class HaComboBox extends LitElement {
});
}
+ public get selectedItem() {
+ return (this._comboBox as any).selectedItem;
+ }
+
protected render(): TemplateResult {
return html`
+
`
+ : null}
+
+
+
+ ${this._serviceData?.description}
- ${this._serviceData && "target" in this._serviceData +${serviceData?.description}
+ ${serviceData && "target" in serviceData ? html`
+ ${this.label
+ ? ""
+ : html`
+
+
+
+ `;
+ }
+
+ private _handleShowMore() {
+ this._showMore = true;
+ }
+
+ static get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ flex-direction: row;
+ }
+ :host(:not([lastItem])) {
+ min-height: 50px;
+ }
+ :host([label]) {
+ margin-top: -8px;
+ font-style: italic;
+ color: var(--timeline-label-color, var(--secondary-text-color));
+ }
+ .timeline-start {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-right: 8px;
+ width: 24px;
+ }
+ ha-svg-icon {
+ color: var(
+ --timeline-ball-color,
+ var(--timeline-color, var(--secondary-text-color))
+ );
+ border-radius: 50%;
+ }
+ :host([raised]) ha-svg-icon {
+ transform: scale(1.3);
+ }
+ .line {
+ flex: 1;
+ width: 2px;
+ background-color: var(
+ --timeline-line-color,
+ var(--timeline-color, var(--secondary-text-color))
+ );
+ margin: 4px 0;
+ }
+ .content {
+ margin-top: 2px;
+ }
+ :host(:not([lastItem])) .content {
+ padding-bottom: 16px;
+ }
+ :host([label]) .content {
+ margin-top: 0;
+ padding-top: 6px;
+ }
+ `,
+ buttonLinkStyle,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-timeline": HaTimeline;
+ }
+}
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
new file mode 100644
index 0000000000..80bba78d74
--- /dev/null
+++ b/src/components/trace/hat-graph-node.ts
@@ -0,0 +1,187 @@
+import { css, customElement, LitElement, property, svg } from "lit-element";
+
+import { NODE_SIZE, SPACING } from "./hat-graph";
+
+@customElement("hat-graph-node")
+export class HatGraphNode extends LitElement {
+ @property() iconPath?: string;
+
+ @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+ @property({ reflect: true, type: Boolean }) graphstart?: boolean;
+
+ @property({ reflect: true, type: Boolean }) nofocus?: boolean;
+
+ @property({ reflect: true, type: Number }) badge?: number;
+
+ connectedCallback() {
+ super.connectedCallback();
+ if (!this.hasAttribute("tabindex") && !this.nofocus)
+ this.setAttribute("tabindex", "0");
+ }
+
+ updated() {
+ const svgEl = this.shadowRoot?.querySelector("svg");
+ if (!svgEl) {
+ return;
+ }
+ const bbox = svgEl.getBBox();
+ const extra_height = this.graphstart ? 2 : 1;
+ const extra_width = SPACING;
+ svgEl.setAttribute("width", `${bbox.width + extra_width}px`);
+ svgEl.setAttribute("height", `${bbox.height + extra_height}px`);
+ svgEl.setAttribute(
+ "viewBox",
+ `${Math.ceil(bbox.x - extra_width / 2)}
+ ${Math.ceil(bbox.y - extra_height / 2)}
+ ${bbox.width + extra_width}
+ ${bbox.height + extra_height}`
+ );
+ }
+
+ render() {
+ return svg`
+
+ `;
+ }
+
+ static get styles() {
+ return css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ --stroke-clr: var(--stroke-color, var(--secondary-text-color));
+ --active-clr: var(--active-color, var(--primary-color));
+ --track-clr: var(--track-color, var(--accent-color));
+ --hover-clr: var(--hover-color, var(--primary-color));
+ --disabled-clr: var(--disabled-color, var(--disabled-text-color));
+ --default-trigger-color: 3, 169, 244;
+ --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
+ --background-clr: var(--background-color, white);
+ --default-icon-clr: var(--icon-color, black);
+ --icon-clr: var(--stroke-clr);
+ }
+ :host(.track) {
+ --stroke-clr: var(--track-clr);
+ --icon-clr: var(--default-icon-clr);
+ }
+ :host(.active) circle {
+ --stroke-clr: var(--active-clr);
+ --icon-clr: var(--default-icon-clr);
+ }
+ :host(:focus) {
+ outline: none;
+ }
+ :host(:hover) circle {
+ --stroke-clr: var(--hover-clr);
+ --icon-clr: var(--default-icon-clr);
+ }
+ :host([disabled]) circle {
+ stroke: var(--disabled-clr);
+ }
+ :host-context([disabled]) {
+ --stroke-clr: var(--disabled-clr);
+ }
+
+ :host([nofocus]):host-context(.active),
+ :host([nofocus]):host-context(:focus) {
+ --stroke-clr: var(--active-clr);
+ --icon-clr: var(--default-icon-clr);
+ }
+
+ circle,
+ path.connector {
+ stroke: var(--stroke-clr);
+ stroke-width: 2;
+ fill: none;
+ }
+ circle {
+ fill: var(--background-clr);
+ stroke: var(--circle-clr, var(--stroke-clr));
+ }
+ .number circle {
+ fill: var(--track-clr);
+ stroke: none;
+ stroke-width: 0;
+ }
+ .number text {
+ font-size: smaller;
+ }
+ path.icon {
+ fill: var(--icon-clr);
+ }
+
+ :host(.triggered) svg {
+ overflow: visible;
+ }
+ :host(.triggered) circle {
+ animation: glow 10s;
+ }
+ @keyframes glow {
+ 0% {
+ filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+ }
+ 10% {
+ filter: drop-shadow(0px 0px 10px rgba(var(--rgb-trigger-color), 1));
+ }
+ 100% {
+ filter: drop-shadow(0px 0px 5px rgba(var(--rgb-trigger-color), 0));
+ }
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hat-graph-node": HatGraphNode;
+ }
+}
diff --git a/src/components/trace/hat-graph.ts b/src/components/trace/hat-graph.ts
new file mode 100644
index 0000000000..fc8c3f28b2
--- /dev/null
+++ b/src/components/trace/hat-graph.ts
@@ -0,0 +1,225 @@
+import {
+ css,
+ customElement,
+ html,
+ LitElement,
+ property,
+ svg,
+} from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+
+export const BRANCH_HEIGHT = 20;
+export const SPACING = 10;
+export const NODE_SIZE = 30;
+
+const track_converter = {
+ fromAttribute: (value) => value.split(",").map((v) => parseInt(v)),
+ toAttribute: (value) =>
+ value instanceof Array ? value.join(",") : `${value}`,
+};
+
+export interface NodeInfo {
+ path: string;
+ config: any;
+}
+
+interface BranchConfig {
+ x: number;
+ height: number;
+ start: boolean;
+ end: boolean;
+}
+
+@customElement("hat-graph")
+export class HatGraph extends LitElement {
+ @property({ type: Number }) _num_items = 0;
+
+ @property({ reflect: true, type: Boolean }) branching?: boolean;
+
+ @property({ reflect: true, converter: track_converter })
+ track_start?: number[];
+
+ @property({ reflect: true, converter: track_converter }) track_end?: number[];
+
+ @property({ reflect: true, type: Boolean }) disabled?: boolean;
+
+ @property({ reflect: true, type: Boolean }) selected?: boolean;
+
+ @property({ reflect: true, type: Boolean }) short = false;
+
+ async updateChildren() {
+ this._num_items = this.children.length;
+ }
+
+ render() {
+ const branches: BranchConfig[] = [];
+ let total_width = 0;
+ let max_height = 0;
+ let min_height = Number.POSITIVE_INFINITY;
+ if (this.branching) {
+ for (const c of Array.from(this.children)) {
+ if (c.slot === "head") continue;
+ const rect = c.getBoundingClientRect();
+ branches.push({
+ x: rect.width / 2 + total_width,
+ height: rect.height,
+ start: c.getAttribute("graphStart") != null,
+ end: c.getAttribute("graphEnd") != null,
+ });
+ total_width += rect.width;
+ max_height = Math.max(max_height, rect.height);
+ min_height = Math.min(min_height, rect.height);
+ }
+ }
+
+ return html`
+
+ ${this.branching
+ ? svg`
+
+ `
+ : ""}
+
+
+ ${this.branching && !this.short
+ ? svg`
+
+ `
+ : ""}
+ `;
+ }
+
+ static get styles() {
+ return css`
+ :host {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ --stroke-clr: var(--stroke-color, var(--secondary-text-color));
+ --active-clr: var(--active-color, var(--primary-color));
+ --track-clr: var(--track-color, var(--accent-color));
+ --disabled-clr: var(--disabled-color, gray);
+ }
+ :host(:focus) {
+ outline: none;
+ }
+ #branches {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+ :host([branching]) #branches {
+ flex-direction: row;
+ align-items: start;
+ }
+ :host([branching]) ::slotted(*) {
+ z-index: 1;
+ }
+ :host([branching]) ::slotted([slot="head"]) {
+ margin-bottom: ${-BRANCH_HEIGHT / 2}px;
+ }
+
+ #lines {
+ position: absolute;
+ }
+
+ path.line {
+ stroke: var(--stroke-clr);
+ stroke-width: 2;
+ fill: none;
+ }
+ path.line.track {
+ stroke: var(--track-clr);
+ }
+ :host([disabled]) path.line {
+ stroke: var(--disabled-clr);
+ }
+ :host(.active) #top path.line {
+ stroke: var(--active-clr);
+ }
+ :host(:focus) #top path.line {
+ stroke: var(--active-clr);
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hat-graph": HatGraph;
+ }
+}
diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts
new file mode 100644
index 0000000000..156be802a7
--- /dev/null
+++ b/src/components/trace/hat-script-graph.ts
@@ -0,0 +1,553 @@
+import {
+ html,
+ LitElement,
+ property,
+ customElement,
+ PropertyValues,
+ css,
+} from "lit-element";
+import "@material/mwc-icon-button/mwc-icon-button";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-svg-icon";
+import {
+ AutomationTraceExtended,
+ ChooseActionTraceStep,
+ ConditionTraceStep,
+} from "../../data/trace";
+import {
+ mdiAbTesting,
+ mdiArrowUp,
+ mdiAsterisk,
+ mdiCallSplit,
+ mdiCheckboxBlankOutline,
+ mdiCheckBoxOutline,
+ mdiChevronDown,
+ mdiChevronRight,
+ mdiChevronUp,
+ mdiClose,
+ mdiCodeBrackets,
+ mdiDevices,
+ mdiExclamation,
+ mdiRefresh,
+ mdiTimerOutline,
+ mdiTrafficLight,
+} from "@mdi/js";
+import "./hat-graph-node";
+import { classMap } from "lit-html/directives/class-map";
+import { NODE_SIZE, SPACING, NodeInfo } from "./hat-graph";
+import { Condition, Trigger } from "../../data/automation";
+import {
+ Action,
+ ChooseAction,
+ DelayAction,
+ DeviceAction,
+ EventAction,
+ RepeatAction,
+ SceneAction,
+ ServiceAction,
+ WaitAction,
+ WaitForTriggerAction,
+} from "../../data/script";
+
+declare global {
+ interface HASSDomEvents {
+ "graph-node-selected": NodeInfo;
+ }
+}
+
+@customElement("hat-script-graph")
+class HatScriptGraph extends LitElement {
+ @property({ attribute: false }) public trace!: AutomationTraceExtended;
+
+ @property({ attribute: false }) public selected;
+
+ @property() trackedNodes: Record
+
+
+
+
+
+ `;
+ }
+
+ protected update(changedProps: PropertyValues`; + } +} + +class ActionRenderer { + private curIndex = 0; + + private keys: string[]; + + constructor( + private hass: HomeAssistant, + private entries: TemplateResult[], + private trace: AutomationTraceExtended, + private logbookRenderer: LogbookRenderer, + private timeTracker: RenderedTimeTracker + ) { + this.keys = Object.keys(trace.trace); + } + + get curItem() { + return this._getItem(this.curIndex); + } + + get hasNext() { + return this.curIndex !== this.keys.length; + } + + renderItem() { + this.curIndex = this._renderItem(this.curIndex); + } + + private _getItem(index: number) { + return this.trace.trace[this.keys[index]]; + } + + private _renderItem( + index: number, + actionType?: ReturnType
Success!
${this.flowConfig.renderCreateEntryDescription(this.hass, this.step)}
+ ${this.step.result.state === "not_loaded"
+ ? html`${localize(
+ "ui.panel.config.integrations.config_flow.not_loaded"
+ )}`
+ : ""}
${this.devices.length === 0
? ""
: html`
@@ -136,6 +143,9 @@ class StepFlowCreateEntry extends LitElement {
width: 100%;
}
}
+ .error {
+ color: var(--error-color);
+ }
`,
];
}
diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index f76c7ae959..3dcbbd37f8 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -36,11 +36,11 @@ class DialogBox extends LitElement {
public closeDialog(): boolean {
if (this._params?.confirmation || this._params?.prompt) {
- this._dismiss();
- return true;
+ return false;
}
if (this._params) {
- return false;
+ this._dismiss();
+ return true;
}
return true;
}
@@ -140,7 +140,7 @@ class DialogBox extends LitElement {
}
private _dialogClosed(ev) {
- if (this._params?.prompt && ev.detail.action === "ignore") {
+ if (ev.detail.action === "ignore") {
return;
}
this._dismiss();
diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
index 2f7f4fd357..99be49908f 100644
--- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
+++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.js
@@ -5,6 +5,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { fireEvent } from "../../../common/dom/fire_event";
+import { FORMAT_NUMBER } from "../../../data/alarm_control_panel";
import LocalizeMixin from "../../../mixins/localize-mixin";
class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
@@ -26,6 +27,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
flex-direction: column;
}
.pad mwc-button {
+ padding: 8px;
width: 80px;
}
.actions mwc-button {
@@ -43,6 +45,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
label="[[localize('ui.card.alarm_control_panel.code')]]"
value="{{_enteredCode}}"
type="password"
+ inputmode="[[_inputMode]]"
disabled="[[!_inputEnabled]]"
>
@@ -53,21 +56,21 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="1"
- raised
+ outlined
>1
4
7
@@ -76,28 +79,28 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
on-click="_digitClicked"
disabled="[[!_inputEnabled]]"
data-digit="2"
- raised
+ outlined
>2
${formatTime(
item === "ris" ? risingDate : settingDate,
- this.hass.language
+ this.hass.locale
)}
- ${formatNumber(
- this.stateObj.attributes.elevation,
- this.hass!.language
- )}
+ ${formatNumber(this.stateObj.attributes.elevation, this.hass.locale)}
${formatNumber(
this.stateObj.attributes.temperature,
- this.hass!.language
+ this.hass.locale
)}
${getWeatherUnit(this.hass, "temperature")}
@@ -106,7 +106,7 @@ class MoreInfoWeather extends LitElement {
${formatNumber(
this.stateObj.attributes.pressure,
- this.hass!.language
+ this.hass.locale
)}
${getWeatherUnit(this.hass, "air_pressure")}
@@ -123,7 +123,7 @@ class MoreInfoWeather extends LitElement {
${formatNumber(
this.stateObj.attributes.humidity,
- this.hass!.language
+ this.hass.locale
)}
%
@@ -157,7 +157,7 @@ class MoreInfoWeather extends LitElement {
${formatNumber(
this.stateObj.attributes.visibility,
- this.hass!.language
+ this.hass.locale
)}
${getWeatherUnit(this.hass, "length")}
@@ -184,7 +184,7 @@ class MoreInfoWeather extends LitElement {
${formatTimeWeekday(
new Date(item.datetime),
- this.hass.language
+ this.hass.locale
)}
`
@@ -194,17 +194,17 @@ class MoreInfoWeather extends LitElement {
${formatDateWeekday(
new Date(item.datetime),
- this.hass.language
+ this.hass.locale
)}
- ${formatNumber(item.templow, this.hass!.language)}
+ ${formatNumber(item.templow, this.hass.locale)}
${getWeatherUnit(this.hass, "temperature")}
`
: ""}
- ${formatNumber(item.temperature, this.hass!.language)}
+ ${formatNumber(item.temperature, this.hass.locale)}
${getWeatherUnit(this.hass, "temperature")}
- 
+
Home Assistant
@@ -76,4 +92,4 @@
})();
-
\ No newline at end of file
+
+
Home Assistant