+
+
+ [[localize('ui.dialogs.more_info_control.last_changed')]]:
+
+
+
+
+ [[localize('ui.dialogs.more_info_control.last_updated')]]:
+
+
+
- ${attribute.replace(/_/g, " ").replace(/\bid\b/g, "ID")}
+ ${formatAttributeName(attribute)}
${this.formatAttribute(attribute)}
@@ -61,15 +63,16 @@ class HaAttributes extends LitElement {
justify-content: space-between;
}
.data-entry .value {
- max-width: 200px;
+ max-width: 50%;
overflow-wrap: break-word;
+ text-align: right;
}
- .key:first-letter {
- text-transform: capitalize;
+ .key {
+ flex-grow: 1;
}
.attribution {
color: var(--secondary-text-color);
- text-align: right;
+ text-align: center;
}
pre {
font-family: inherit;
diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts
index 1e70908291..c3e188d267 100644
--- a/src/components/ha-circular-progress.ts
+++ b/src/components/ha-circular-progress.ts
@@ -11,7 +11,7 @@ export class HaCircularProgress extends CircularProgress {
public alt = "Loading";
@property()
- public size: "small" | "medium" | "large" = "medium";
+ public size: "tiny" | "small" | "medium" | "large" = "medium";
// @ts-ignore
public set density(_) {
@@ -20,6 +20,8 @@ export class HaCircularProgress extends CircularProgress {
public get density() {
switch (this.size) {
+ case "tiny":
+ return -8;
case "small":
return -5;
case "medium":
diff --git a/src/components/ha-climate-state.js b/src/components/ha-climate-state.js
deleted file mode 100644
index eb961cce4c..0000000000
--- a/src/components/ha-climate-state.js
+++ /dev/null
@@ -1,131 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { CLIMATE_PRESET_NONE } from "../data/climate";
-import LocalizeMixin from "../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class HaClimateState extends LocalizeMixin(PolymerElement) {
- static get template() {
- return html`
-
-
- {
const videoEl = this._videoEl;
- const playlist_url = this.url.replace("master_playlist", "playlist");
const useExoPlayerPromise = this._getUseExoPlayer();
const masterPlaylistPromise = fetch(this.url);
@@ -126,13 +125,30 @@ class HaHLSPlayer extends LitElement {
}
this._useExoPlayer = await useExoPlayerPromise;
- let hevcRegexp: RegExp;
- let masterPlaylist: string;
- if (this._useExoPlayer) {
- hevcRegexp = /CODECS=".*?((hev1)|(hvc1))\..*?"/;
- masterPlaylist = await (await masterPlaylistPromise).text();
+ const masterPlaylist = await (await masterPlaylistPromise).text();
+
+ // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
+ // See https://tools.ietf.org/html/rfc8216 for HLS spec details
+ const playlistRegexp = /#EXT-X-STREAM-INF:.*?(?:CODECS=".*?(?hev1|hvc1)?\..*?".*?)?(?:\n|\r\n)(?.+)/g;
+ const match = playlistRegexp.exec(masterPlaylist);
+ const matchTwice = playlistRegexp.exec(masterPlaylist);
+
+ // Get the regular playlist url from the input (master) playlist, falling back to the input playlist if necessary
+ // This avoids the player having to load and parse the master playlist again before loading the regular playlist
+ let playlist_url: string;
+ if (match !== null && matchTwice === null) {
+ // Only send the regular playlist url if we match exactly once
+ playlist_url = new URL(match.groups!.streamUrl, this.url).href;
+ } else {
+ playlist_url = this.url;
}
- if (this._useExoPlayer && hevcRegexp!.test(masterPlaylist!)) {
+
+ // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
+ if (
+ this._useExoPlayer &&
+ match !== null &&
+ match.groups!.isHevc !== undefined
+ ) {
this._renderHLSExoPlayer(playlist_url);
} else if (hls.isSupported()) {
this._renderHLSPolyfill(videoEl, hls, playlist_url);
diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts
index 4d84add488..fa2917db6a 100644
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@@ -9,11 +9,16 @@ import {
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
import "@material/mwc-icon-button/mwc-icon-button";
import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
@customElement("ha-icon-button-arrow-next")
export class HaIconButtonArrowNext extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
@property({ type: Boolean }) public disabled = false;
+ @property() public label?: string;
+
@internalProperty() private _icon = mdiArrowRight;
public connectedCallback() {
@@ -29,7 +34,10 @@ export class HaIconButtonArrowNext extends LitElement {
}
protected render(): TemplateResult {
- return html`
+ return html`
`;
}
diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts
index 07c8265bb2..c7fbada10d 100644
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@@ -9,11 +9,16 @@ import {
import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
import "@material/mwc-icon-button/mwc-icon-button";
import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
@customElement("ha-icon-button-arrow-prev")
export class HaIconButtonArrowPrev extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
@property({ type: Boolean }) public disabled = false;
+ @property() public label?: string;
+
@internalProperty() private _icon = mdiArrowLeft;
public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonArrowPrev extends LitElement {
}
protected render(): TemplateResult {
- return html`
- `;
+ return html`
+
+
+ `;
}
}
diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts
index e328c4ff1e..48eca31a4a 100644
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@@ -9,11 +9,16 @@ import {
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
import "@material/mwc-icon-button";
import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
@customElement("ha-icon-button-next")
export class HaIconButtonNext extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
@property({ type: Boolean }) public disabled = false;
+ @property() public label?: string;
+
@internalProperty() private _icon = mdiChevronRight;
public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonNext extends LitElement {
}
protected render(): TemplateResult {
- return html`
- `;
+ return html`
+
+
+ `;
}
}
diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts
index 077b5a03bf..8b88afedda 100644
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@@ -9,11 +9,16 @@ import {
import { mdiChevronRight, mdiChevronLeft } from "@mdi/js";
import "@material/mwc-icon-button/mwc-icon-button";
import "./ha-svg-icon";
+import { HomeAssistant } from "../types";
@customElement("ha-icon-button-prev")
export class HaIconButtonPrev extends LitElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
@property({ type: Boolean }) public disabled = false;
+ @property() public label?: string;
+
@internalProperty() private _icon = mdiChevronLeft;
public connectedCallback() {
@@ -29,9 +34,14 @@ export class HaIconButtonPrev extends LitElement {
}
protected render(): TemplateResult {
- return html`
- `;
+ return html`
+
+
+ `;
}
}
diff --git a/src/components/ha-labeled-slider.js b/src/components/ha-labeled-slider.js
index 147fd5b1b1..4d15c37b5e 100644
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -14,7 +14,7 @@ class HaLabeledSlider extends PolymerElement {
}
.title {
- margin-bottom: 8px;
+ margin: 4px 0 8px;
color: var(--primary-text-color);
}
diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index b6e78c99b9..cd07cf0a01 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -47,7 +47,6 @@ class HaMarkdownElement extends UpdatingElement {
node.host !== document.location.host
) {
node.target = "_blank";
- node.rel = "noreferrer";
// protect referrer on external links and deny window.opener access for security reasons
// (see https://mathiasbynens.github.io/rel-noopener/)
diff --git a/src/components/ha-push-notifications-toggle.js b/src/components/ha-push-notifications-toggle.js
index 61aec06691..b8bead07fc 100644
--- a/src/components/ha-push-notifications-toggle.js
+++ b/src/components/ha-push-notifications-toggle.js
@@ -3,6 +3,7 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { getAppKey } from "../data/notify_html5";
import { EventsMixin } from "../mixins/events-mixin";
+import { showPromptDialog } from "../dialogs/generic/show-dialog-box";
import "./ha-switch";
export const pushSupported =
@@ -88,7 +89,14 @@ class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
browserName = "chrome";
}
- const name = prompt("What should this device be called ?");
+ const name = await showPromptDialog(this, {
+ title: this.hass.localize(
+ "ui.panel.profile.push_notifications.add_device_prompt.title"
+ ),
+ inputLabel: this.hass.localize(
+ "ui.panel.profile.push_notifications.add_device_prompt.input_label"
+ ),
+ });
if (name == null) {
this.pushChecked = false;
return;
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 2f1f473ca4..7a4791b967 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -202,195 +202,17 @@ class HaSidebar extends LitElement {
private _sortable?;
protected render() {
- const hass = this.hass;
-
- if (!hass) {
+ if (!this.hass) {
return html``;
}
- const [beforeSpacer, afterSpacer] = computePanels(
- hass.panels,
- hass.defaultPanel,
- this._panelOrder,
- this._hiddenPanels
- );
-
- let notificationCount = this._notifications
- ? this._notifications.length
- : 0;
- for (const entityId in hass.states) {
- if (computeDomain(entityId) === "configurator") {
- notificationCount++;
- }
- }
-
+ // prettier-ignore
return html`
-
-
- ${this.editMode
- ? html`
-
-
- `;
- })}
-
- `
- : ""}
- ${this._renderPanels(afterSpacer)}
- ${this._externalConfig && this._externalConfig.hasSettingsScreen
- ? html`
-
-
-
-
- `
- : ""}
-
-
-
-
-
-
-
+ ${this._renderHeader()}
+ ${this._renderAllPanels()}
+ ${this._renderDivider()}
+ ${this._renderNotifications()}
+ ${this._renderUserItem()}
`;
@@ -475,6 +297,213 @@ class HaSidebar extends LitElement {
}
}
+ private _renderHeader() {
+ return html``;
+ }
+
+ private _renderAllPanels() {
+ const [beforeSpacer, afterSpacer] = computePanels(
+ this.hass.panels,
+ this.hass.defaultPanel,
+ this._panelOrder,
+ this._hiddenPanels
+ );
+
+ // prettier-ignore
+ return html`
+
+ ${this.editMode
+ ? this._renderPanelsEdit(beforeSpacer)
+ : this._renderPanels(beforeSpacer)}
+ ${this._renderSpacer()}
+ ${this._renderPanels(afterSpacer)}
+ ${this._renderExternalConfiguration()}
+
+ `;
+ }
+
+ private _renderPanelsEdit(beforeSpacer: PanelInfo[]) {
+ // prettier-ignore
+ return html`
+
+
+ `;
+ })}
+ ${this._renderSpacer()}`
+ : ""}`;
+ }
+
+ private _renderDivider() {
+ return html``;
+ }
+
+ private _renderSpacer() {
+ return html``;
+ }
+
+ private _renderNotifications() {
+ let notificationCount = this._notifications
+ ? this._notifications.length
+ : 0;
+ for (const entityId in this.hass.states) {
+ if (computeDomain(entityId) === "configurator") {
+ notificationCount++;
+ }
+ }
+
+ return html`
+
+ `;
+ }
+
+ private _renderExternalConfiguration() {
+ return html`${this._externalConfig && this._externalConfig.hasSettingsScreen
+ ? html`
+
+
+
+
+ `
+ : ""}`;
+ }
+
private get _tooltip() {
return this.shadowRoot!.querySelector(".tooltip")! as HTMLDivElement;
}
@@ -725,7 +754,7 @@ class HaSidebar extends LitElement {
-moz-user-select: none;
border-right: 1px solid var(--divider-color);
background-color: var(--sidebar-background-color);
- width: 64px;
+ width: 56px;
}
:host([expanded]) {
width: 256px;
@@ -737,8 +766,9 @@ class HaSidebar extends LitElement {
}
.menu {
height: var(--header-height);
+ box-sizing: border-box;
display: flex;
- padding: 0 8.5px;
+ padding: 0 4px;
border-bottom: 1px solid transparent;
white-space: nowrap;
font-weight: 400;
@@ -747,11 +777,11 @@ class HaSidebar extends LitElement {
background-color: var(--primary-background-color);
font-size: 20px;
align-items: center;
- padding-left: calc(8.5px + env(safe-area-inset-left));
+ padding-left: calc(4px + env(safe-area-inset-left));
}
:host([rtl]) .menu {
- padding-left: 8.5px;
- padding-right: calc(8.5px + env(safe-area-inset-right));
+ padding-left: 4px;
+ padding-right: calc(4px + env(safe-area-inset-right));
}
:host([expanded]) .menu {
width: calc(256px + env(safe-area-inset-left));
@@ -762,26 +792,27 @@ class HaSidebar extends LitElement {
.menu mwc-icon-button {
color: var(--sidebar-icon-color);
}
- :host([expanded]) .menu mwc-icon-button {
- margin-right: 23px;
- }
- :host([expanded][rtl]) .menu mwc-icon-button {
- margin-right: 0px;
- margin-left: 23px;
- }
-
.title {
+ margin-left: 19px;
width: 100%;
display: none;
}
+ :host([rtl]) .title {
+ margin-left: 0;
+ margin-right: 19px;
+ }
:host([narrow]) .title {
+ margin: 0;
padding: 0 16px;
}
:host([expanded]) .title {
display: initial;
}
- .title mwc-button {
- width: 90%;
+ :host([expanded]) .menu mwc-button {
+ margin: 0 8px;
+ }
+ .menu mwc-button {
+ width: 100%;
}
#sortable,
.hidden-panel {
@@ -819,14 +850,14 @@ class HaSidebar extends LitElement {
paper-icon-item {
box-sizing: border-box;
- margin: 4px 8px;
+ margin: 4px;
padding-left: 12px;
border-radius: 4px;
--paper-item-min-height: 40px;
width: 48px;
}
:host([expanded]) paper-icon-item {
- width: 240px;
+ width: 248px;
}
:host([rtl]) paper-icon-item {
padding-left: auto;
@@ -843,9 +874,9 @@ class HaSidebar extends LitElement {
border-radius: 4px;
position: absolute;
top: 0;
- right: 0;
+ right: 2px;
bottom: 0;
- left: 0;
+ left: 2px;
pointer-events: none;
content: "";
transition: opacity 15ms linear;
diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index cc052052d9..4e0f33758f 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -99,13 +99,13 @@ export class HaTab extends LitElement {
display: flex;
flex-direction: column;
text-align: center;
+ box-sizing: border-box;
align-items: center;
justify-content: center;
- height: 64px;
+ height: var(--header-height);
cursor: pointer;
position: relative;
outline: none;
- box-sizing: border-box;
}
.name {
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
index b6dc45dcf1..f28f8d7766 100644
--- a/src/components/ha-tabs.ts
+++ b/src/components/ha-tabs.ts
@@ -34,8 +34,8 @@ export class HaTabs extends PaperTabs {
superStyle!.appendChild(
document.createTextNode(`
- :host {
- padding-top: .5px;
+ #selectionBar {
+ box-sizing: border-box;
}
.not-visible {
display: none;
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 8c17267fc4..93a5ca25e4 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -540,17 +540,20 @@ export class HaMediaPlayerBrowse extends LitElement {
mediaContentType?: string
): Promise {
this._loading = true;
- const itemData =
- this.entityId !== BROWSER_PLAYER
- ? await browseMediaPlayer(
- this.hass,
- this.entityId,
- mediaContentId,
- mediaContentType
- )
- : await browseLocalMediaPlayer(this.hass, mediaContentId);
-
- this._loading = false;
+ let itemData: any;
+ try {
+ itemData =
+ this.entityId !== BROWSER_PLAYER
+ ? await browseMediaPlayer(
+ this.hass,
+ this.entityId,
+ mediaContentId,
+ mediaContentType
+ )
+ : await browseLocalMediaPlayer(this.hass, mediaContentId);
+ } finally {
+ this._loading = false;
+ }
return itemData;
}
diff --git a/src/data/data_entry_flow.ts b/src/data/data_entry_flow.ts
index 189d13336e..a9a7afbf69 100644
--- a/src/data/data_entry_flow.ts
+++ b/src/data/data_entry_flow.ts
@@ -58,8 +58,18 @@ export interface DataEntryFlowStepAbort {
description_placeholders: { [key: string]: string };
}
+export interface DataEntryFlowStepProgress {
+ type: "progress";
+ flow_id: string;
+ handler: string;
+ step_id: string;
+ progress_action: string;
+ description_placeholders: { [key: string]: string };
+}
+
export type DataEntryFlowStep =
| DataEntryFlowStepForm
| DataEntryFlowStepExternal
| DataEntryFlowStepCreateEntry
- | DataEntryFlowStepAbort;
+ | DataEntryFlowStepAbort
+ | DataEntryFlowStepProgress;
diff --git a/src/data/entity_registry.ts b/src/data/entity_registry.ts
index 4c5271e82d..98ff504f22 100644
--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -20,6 +20,12 @@ export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
original_icon?: string;
}
+export interface UpdateEntityRegistryEntryResult {
+ entity_entry: ExtEntityRegistryEntry;
+ reload_delay?: number;
+ require_restart?: boolean;
+}
+
export interface EntityRegistryEntryUpdateParams {
name?: string | null;
icon?: string | null;
@@ -72,7 +78,7 @@ export const updateEntityRegistryEntry = (
hass: HomeAssistant,
entityId: string,
updates: Partial
-): Promise =>
+): Promise =>
hass.callWS({
type: "config/entity_registry/update",
entity_id: entityId,
diff --git a/src/data/hassio/ingress.ts b/src/data/hassio/ingress.ts
new file mode 100644
index 0000000000..ced84a2698
--- /dev/null
+++ b/src/data/hassio/ingress.ts
@@ -0,0 +1,26 @@
+import { HomeAssistant } from "../../types";
+import { HassioResponse } from "./common";
+import { CreateSessionResponse } from "./supervisor";
+
+export const createHassioSession = async (hass: HomeAssistant) => {
+ const response = await hass.callApi>(
+ "POST",
+ "hassio/ingress/session"
+ );
+ document.cookie = `ingress_session=${
+ response.data.session
+ };path=/api/hassio_ingress/;SameSite=Strict${
+ location.protocol === "https:" ? ";Secure" : ""
+ }`;
+ return response.data.session;
+};
+
+export const validateHassioSession = async (
+ hass: HomeAssistant,
+ session: string
+) =>
+ await hass.callApi>(
+ "POST",
+ "hassio/ingress/validate_session",
+ { session }
+ );
diff --git a/src/data/hassio/supervisor.ts b/src/data/hassio/supervisor.ts
index 9d2845f776..b21039bb1b 100644
--- a/src/data/hassio/supervisor.ts
+++ b/src/data/hassio/supervisor.ts
@@ -111,18 +111,6 @@ export const fetchHassioLogs = async (
return hass.callApi("GET", `hassio/${provider}/logs`);
};
-export const createHassioSession = async (hass: HomeAssistant) => {
- const response = await hass.callApi>(
- "POST",
- "hassio/ingress/session"
- );
- document.cookie = `ingress_session=${
- response.data.session
- };path=/api/hassio_ingress/;SameSite=Strict${
- location.protocol === "https:" ? ";Secure" : ""
- }`;
-};
-
export const setSupervisorOption = async (
hass: HomeAssistant,
data: SupervisorOptions
diff --git a/src/data/media-player.ts b/src/data/media-player.ts
index 393c06cb71..45bf6010ee 100644
--- a/src/data/media-player.ts
+++ b/src/data/media-player.ts
@@ -18,6 +18,8 @@ import {
} from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import type { HomeAssistant } from "../types";
+import { UNAVAILABLE_STATES } from "./entity";
+import { supportsFeature } from "../common/entity/supports-feature";
export const SUPPORT_PAUSE = 1;
export const SUPPORT_SEEK = 2;
@@ -31,7 +33,7 @@ export const SUPPORT_PLAY_MEDIA = 512;
export const SUPPORT_VOLUME_BUTTONS = 1024;
export const SUPPORT_SELECT_SOURCE = 2048;
export const SUPPORT_STOP = 4096;
-export const SUPPORTS_PLAY = 16384;
+export const SUPPORT_PLAY = 16384;
export const SUPPORT_SELECT_SOUND_MODE = 65536;
export const SUPPORT_BROWSE_MEDIA = 131072;
export const CONTRAST_RATIO = 4.5;
@@ -166,6 +168,7 @@ export const computeMediaDescription = (stateObj: HassEntity): string => {
switch (stateObj.attributes.media_content_type) {
case "music":
+ case "image":
secondaryTitle = stateObj.attributes.media_artist;
break;
case "playlist":
@@ -187,3 +190,85 @@ export const computeMediaDescription = (stateObj: HassEntity): string => {
return secondaryTitle;
};
+
+export const computeMediaControls = (
+ stateObj: HassEntity
+): ControlButton[] | undefined => {
+ if (!stateObj) {
+ return undefined;
+ }
+
+ const state = stateObj.state;
+
+ if (UNAVAILABLE_STATES.includes(state)) {
+ return undefined;
+ }
+
+ if (state === "off") {
+ return supportsFeature(stateObj, SUPPORT_TURN_ON)
+ ? [
+ {
+ icon: "hass:power",
+ action: "turn_on",
+ },
+ ]
+ : undefined;
+ }
+
+ const buttons: ControlButton[] = [];
+
+ if (supportsFeature(stateObj, SUPPORT_TURN_OFF)) {
+ buttons.push({
+ icon: "hass:power",
+ action: "turn_off",
+ });
+ }
+
+ if (
+ (state === "playing" || state === "paused") &&
+ supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
+ ) {
+ buttons.push({
+ icon: "hass:skip-previous",
+ action: "media_previous_track",
+ });
+ }
+
+ if (
+ (state === "playing" &&
+ (supportsFeature(stateObj, SUPPORT_PAUSE) ||
+ supportsFeature(stateObj, SUPPORT_STOP))) ||
+ ((state === "paused" || state === "idle") &&
+ supportsFeature(stateObj, SUPPORT_PLAY)) ||
+ (state === "on" &&
+ (supportsFeature(stateObj, SUPPORT_PLAY) ||
+ supportsFeature(stateObj, SUPPORT_PAUSE)))
+ ) {
+ buttons.push({
+ icon:
+ state === "on"
+ ? "hass:play-pause"
+ : state !== "playing"
+ ? "hass:play"
+ : supportsFeature(stateObj, SUPPORT_PAUSE)
+ ? "hass:pause"
+ : "hass:stop",
+ action:
+ state === "playing" && !supportsFeature(stateObj, SUPPORT_PAUSE)
+ ? "media_stop"
+ : "media_play_pause",
+ });
+ }
+
+ if (
+ (state === "playing" || state === "paused") &&
+ supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
+ ) {
+ buttons.push({
+ icon: "hass:skip-next",
+ action: "media_next_track",
+ });
+ }
+
+ return buttons.length > 0 ? buttons : undefined;
+};
diff --git a/src/data/panel.ts b/src/data/panel.ts
index eb205c65b0..b71721c71c 100644
--- a/src/data/panel.ts
+++ b/src/data/panel.ts
@@ -21,6 +21,18 @@ export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
? hass.panels[hass.defaultPanel]
: hass.panels[DEFAULT_PANEL];
+export const getPanelNameTranslationKey = (panel: PanelInfo): string => {
+ if (panel.url_path === "lovelace") {
+ return "panel.states";
+ }
+
+ if (panel.url_path === "profile") {
+ return "panel.profile";
+ }
+
+ return `panel.${panel.title}`;
+};
+
export const getPanelTitle = (hass: HomeAssistant): string | undefined => {
if (!hass.panels) {
return undefined;
@@ -34,13 +46,20 @@ export const getPanelTitle = (hass: HomeAssistant): string | undefined => {
return undefined;
}
- if (panel.url_path === "lovelace") {
- return hass.localize("panel.states");
- }
+ const translationKey = getPanelNameTranslationKey(panel);
- if (panel.url_path === "profile") {
- return hass.localize("panel.profile");
- }
-
- return hass.localize(`panel.${panel.title}`) || panel.title || undefined;
+ return hass.localize(translationKey) || panel.title || undefined;
+};
+
+export const getPanelIcon = (panel: PanelInfo): string | null => {
+ if (!panel.icon) {
+ switch (panel.component_name) {
+ case "profile":
+ return "hass:account";
+ case "lovelace":
+ return "hass:view-dashboard";
+ }
+ }
+
+ return panel.icon;
};
diff --git a/src/data/system_health.ts b/src/data/system_health.ts
index fdf5007d10..72d5e20068 100644
--- a/src/data/system_health.ts
+++ b/src/data/system_health.ts
@@ -1,24 +1,111 @@
import { HomeAssistant } from "../types";
-export interface HomeAssistantSystemHealthInfo {
- version: string;
- dev: boolean;
- hassio: boolean;
- virtualenv: string;
- python_version: string;
- docker: boolean;
- arch: string;
- timezone: string;
- os_name: string;
+interface SystemCheckValueDateObject {
+ type: "date";
+ value: string;
}
+interface SystemCheckValueErrorObject {
+ type: "failed";
+ error: string;
+ more_info?: string;
+}
+
+interface SystemCheckValuePendingObject {
+ type: "pending";
+}
+
+export type SystemCheckValueObject =
+ | SystemCheckValueDateObject
+ | SystemCheckValueErrorObject
+ | SystemCheckValuePendingObject;
+
+export type SystemCheckValue =
+ | string
+ | number
+ | boolean
+ | SystemCheckValueObject;
+
export interface SystemHealthInfo {
- [domain: string]: { [key: string]: string | number | boolean };
+ [domain: string]: {
+ manage_url?: string;
+ info: {
+ [key: string]: SystemCheckValue;
+ };
+ };
}
-export const fetchSystemHealthInfo = (
- hass: HomeAssistant
-): Promise =>
- hass.callWS({
- type: "system_health/info",
- });
+interface SystemHealthEventInitial {
+ type: "initial";
+ data: SystemHealthInfo;
+}
+interface SystemHealthEventUpdateSuccess {
+ type: "update";
+ success: true;
+ domain: string;
+ key: string;
+ data: SystemCheckValue;
+}
+
+interface SystemHealthEventUpdateError {
+ type: "update";
+ success: false;
+ domain: string;
+ key: string;
+ error: {
+ msg: string;
+ };
+}
+
+interface SystemHealthEventFinish {
+ type: "finish";
+}
+
+type SystemHealthEvent =
+ | SystemHealthEventInitial
+ | SystemHealthEventUpdateSuccess
+ | SystemHealthEventUpdateError
+ | SystemHealthEventFinish;
+
+export const subscribeSystemHealthInfo = (
+ hass: HomeAssistant,
+ callback: (info: SystemHealthInfo) => void
+) => {
+ let data = {};
+
+ const unsubProm = hass.connection.subscribeMessage(
+ (updateEvent) => {
+ if (updateEvent.type === "initial") {
+ data = updateEvent.data;
+ callback(data);
+ return;
+ }
+ if (updateEvent.type === "finish") {
+ unsubProm.then((unsub) => unsub());
+ return;
+ }
+
+ data = {
+ ...data,
+ [updateEvent.domain]: {
+ ...data[updateEvent.domain],
+ info: {
+ ...data[updateEvent.domain].info,
+ [updateEvent.key]: updateEvent.success
+ ? updateEvent.data
+ : {
+ error: true,
+ value: updateEvent.error.msg,
+ },
+ },
+ },
+ };
+ callback(data);
+ },
+ {
+ type: "system_health/info",
+ }
+ );
+
+ return unsubProm;
+};
diff --git a/src/data/tasmota.ts b/src/data/tasmota.ts
new file mode 100644
index 0000000000..df9aad3032
--- /dev/null
+++ b/src/data/tasmota.ts
@@ -0,0 +1,10 @@
+import { HomeAssistant } from "../types";
+
+export const removeTasmotaDeviceEntry = (
+ hass: HomeAssistant,
+ deviceId: string
+): Promise =>
+ hass.callWS({
+ type: "tasmota/device/remove",
+ device_id: deviceId,
+ });
diff --git a/src/data/translation.ts b/src/data/translation.ts
index 8a11515458..4316242262 100644
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@@ -17,7 +17,8 @@ export type TranslationCategory =
| "config"
| "options"
| "device_automation"
- | "mfa_setup";
+ | "mfa_setup"
+ | "system_health";
export const fetchTranslationPreferences = (hass: HomeAssistant) =>
fetchFrontendUserData(hass.connection, "language");
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index d7a2ad6fbc..54ab1c7f41 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -1,5 +1,4 @@
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "@polymer/paper-input/paper-input";
+import "@material/mwc-button/mwc-button";
import {
css,
CSSResult,
@@ -10,16 +9,16 @@ import {
internalProperty,
TemplateResult,
} from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-dialog";
import "../../components/ha-circular-progress";
import "../../components/ha-switch";
import "../../components/ha-formfield";
+import { fireEvent } from "../../common/dom/fire_event";
import type { HaSwitch } from "../../components/ha-switch";
import {
getConfigEntrySystemOptions,
updateConfigEntrySystemOptions,
} from "../../data/config_entries";
-import type { PolymerChangedEvent } from "../../polymer-types";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
@@ -35,9 +34,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
@internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
- @internalProperty() private _loading?: boolean;
+ @internalProperty() private _loading = false;
- @internalProperty() private _submitting?: boolean;
+ @internalProperty() private _submitting = false;
public async showDialog(
params: ConfigEntrySystemOptionsDialogParams
@@ -51,7 +50,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
);
this._loading = false;
this._disableNewEntities = systemOptions.disable_new_entities;
- await this.updateComplete;
+ }
+
+ public closeDialog(): void {
+ this._error = "";
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
@@ -60,21 +64,17 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
return html`
-
-
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
+
+
`;
}
@@ -154,19 +154,10 @@ class DialogConfigEntrySystemOptions extends LitElement {
}
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!(ev.detail as any).value) {
- this._params = undefined;
- }
- }
-
static get styles(): CSSResult[] {
return [
haStyleDialog,
css`
- ha-paper-dialog {
- max-width: 500px;
- }
.init-spinner {
padding: 50px 100px;
text-align: center;
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index 79a95c2bc2..2b5660bf89 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -36,6 +36,7 @@ import "./step-flow-external";
import "./step-flow-form";
import "./step-flow-loading";
import "./step-flow-pick-handler";
+import "./step-flow-progress";
let instance = 0;
@@ -195,6 +196,14 @@ class DataEntryFlowDialog extends LitElement {
.hass=${this.hass}
>
`
+ : this._step.type === "progress"
+ ? html`
+ 
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
new file mode 100644
index 0000000000..57ba59560c
--- /dev/null
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -0,0 +1,82 @@
+import "@material/mwc-button";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-circular-progress";
+import {
+ DataEntryFlowProgressedEvent,
+ DataEntryFlowStepProgress,
+} from "../../data/data_entry_flow";
+import { HomeAssistant } from "../../types";
+import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { configFlowContentStyles } from "./styles";
+
+@customElement("step-flow-progress")
+class StepFlowProgress extends LitElement {
+ public flowConfig!: FlowConfig;
+
+ @property({ attribute: false })
+ public hass!: HomeAssistant;
+
+ @property({ attribute: false })
+ private step!: DataEntryFlowStepProgress;
+
+ protected render(): TemplateResult {
+ return html`
+ (
+ async (ev) => {
+ if (ev.data.flow_id !== this.step.flow_id) {
+ return;
+ }
+
+ fireEvent(this, "flow-update", {
+ stepPromise: this.flowConfig.fetchFlow(this.hass, this.step.flow_id),
+ });
+ },
+ "data_entry_flow_progressed"
+ );
+ }
+
+ static get styles(): CSSResult[] {
+ return [
+ configFlowContentStyles,
+ css`
+ .content {
+ padding: 50px 100px;
+ text-align: center;
+ }
+ ha-circular-progress {
+ margin-bottom: 16px;
+ }
+ `,
+ ];
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "step-flow-progress": StepFlowProgress;
+ }
+}
diff --git a/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts
index f949d810db..4bc68af3a2 100644
--- a/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/dialogs/device-registry-detail/dialog-device-registry-detail.ts
@@ -1,26 +1,28 @@
import "@material/mwc-button/mwc-button";
-import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
+import "../../components/ha-dialog";
+import "../../components/ha-area-picker";
+
import {
- css,
CSSResult,
+ LitElement,
+ TemplateResult,
+ css,
customElement,
html,
- LitElement,
- property,
internalProperty,
- TemplateResult,
+ property,
} from "lit-element";
-import "../../components/dialog/ha-paper-dialog";
-import "../../components/ha-area-picker";
-import { computeDeviceName } from "../../data/device_registry";
-import { PolymerChangedEvent } from "../../polymer-types";
-import { haStyleDialog } from "../../resources/styles";
-import { HomeAssistant } from "../../types";
+
import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
+import { HomeAssistant } from "../../types";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { computeDeviceName } from "../../data/device_registry";
+import { fireEvent } from "../../common/dom/fire_event";
+import { haStyleDialog } from "../../resources/styles";
@customElement("dialog-device-registry-detail")
class DialogDeviceRegistryDetail extends LitElement {
@@ -34,7 +36,7 @@ class DialogDeviceRegistryDetail extends LitElement {
@internalProperty() private _areaId?: string;
- private _submitting?: boolean;
+ @internalProperty() private _submitting?: boolean;
public async showDialog(
params: DeviceRegistryDetailDialogParams
@@ -46,22 +48,24 @@ class DialogDeviceRegistryDetail extends LitElement {
await this.updateComplete;
}
+ public closeDialog(): void {
+ this._error = "";
+ this._params = undefined;
+ fireEvent(this, "dialog-closed", { dialog: this.localName });
+ }
+
protected render(): TemplateResult {
if (!this._params) {
return html``;
}
const device = this._params.device;
-
return html`
-
-
+
+
-
-
- [[_localizeState(localize, stateObj)]]
-
- - [[_localizePreset(localize, stateObj.attributes.preset_mode)]]
-
-
-
-
-
-
- [[computeTarget(hass, stateObj)]]
-
- [[localize('ui.card.climate.currently')]]:
-
-
- `;
- }
-
- static get properties() {
- return {
- hass: Object,
- stateObj: Object,
- currentStatus: {
- type: String,
- computed: "computeCurrentStatus(hass, stateObj)",
- },
- };
- }
-
- computeCurrentStatus(hass, stateObj) {
- if (!hass || !stateObj) return null;
- if (stateObj.attributes.current_temperature != null) {
- return `${stateObj.attributes.current_temperature} ${hass.config.unit_system.temperature}`;
- }
- if (stateObj.attributes.current_humidity != null) {
- return `${stateObj.attributes.current_humidity} %`;
- }
- return null;
- }
-
- computeTarget(hass, stateObj) {
- if (!hass || !stateObj) return null;
- // We're using "!= null" on purpose so that we match both null and undefined.
- if (
- stateObj.attributes.target_temp_low != null &&
- stateObj.attributes.target_temp_high != null
- ) {
- return `${stateObj.attributes.target_temp_low}-${stateObj.attributes.target_temp_high} ${hass.config.unit_system.temperature}`;
- }
- if (stateObj.attributes.temperature != null) {
- return `${stateObj.attributes.temperature} ${hass.config.unit_system.temperature}`;
- }
- if (
- stateObj.attributes.target_humidity_low != null &&
- stateObj.attributes.target_humidity_high != null
- ) {
- return `${stateObj.attributes.target_humidity_low}-${stateObj.attributes.target_humidity_high}%`;
- }
- if (stateObj.attributes.humidity != null) {
- return `${stateObj.attributes.humidity} %`;
- }
-
- return "";
- }
-
- _hasKnownState(state) {
- return state !== "unknown";
- }
-
- _localizeState(localize, stateObj) {
- const stateString = localize(`component.climate.state._.${stateObj.state}`);
- return stateObj.attributes.hvac_action
- ? `${localize(
- `state_attributes.climate.hvac_action.${stateObj.attributes.hvac_action}`
- )} (${stateString})`
- : stateString;
- }
-
- _localizePreset(localize, preset) {
- return localize(`state_attributes.climate.preset_mode.${preset}`) || preset;
- }
-
- _renderPreset(attributes) {
- return (
- attributes.preset_mode && attributes.preset_mode !== CLIMATE_PRESET_NONE
- );
- }
-}
-customElements.define("ha-climate-state", HaClimateState);
diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
new file mode 100644
index 0000000000..1aa49ae6b2
--- /dev/null
+++ b/src/components/ha-climate-state.ts
@@ -0,0 +1,139 @@
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { HassEntity } from "home-assistant-js-websocket";
+
+import { CLIMATE_PRESET_NONE } from "../data/climate";
+import type { HomeAssistant } from "../types";
+
+@customElement("ha-climate-state")
+class HaClimateState extends LitElement {
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public stateObj!: HassEntity;
+
+ protected render(): TemplateResult {
+ const currentStatus = this._computeCurrentStatus();
+
+ return html`[[currentStatus]]
-
+ ${this.stateObj.state !== "unknown"
+ ? html`
+ ${this._localizeState()}
+ ${this.stateObj.attributes.preset_mode &&
+ this.stateObj.attributes.preset_mode !== CLIMATE_PRESET_NONE
+ ? html`-
+ ${this.hass.localize(
+ `state_attributes.climate.preset_mode.${this.stateObj.attributes.preset_mode}`
+ ) || this.stateObj.attributes.preset_mode}`
+ : ""}
+ `
+ : ""}
+
+
+ ${currentStatus
+ ? html`${this._computeTarget()}
+
+ ${this.hass.localize("ui.card.climate.currently")}:
+
`
+ : ""}`;
+ }
+
+ private _computeCurrentStatus(): string | undefined {
+ if (!this.hass || !this.stateObj) {
+ return undefined;
+ }
+
+ if (this.stateObj.attributes.current_temperature != null) {
+ return `${this.stateObj.attributes.current_temperature} ${this.hass.config.unit_system.temperature}`;
+ }
+
+ if (this.stateObj.attributes.current_humidity != null) {
+ return `${this.stateObj.attributes.current_humidity} %`;
+ }
+
+ return undefined;
+ }
+
+ private _computeTarget(): string {
+ if (!this.hass || !this.stateObj) {
+ return "";
+ }
+
+ if (
+ this.stateObj.attributes.target_temp_low != null &&
+ this.stateObj.attributes.target_temp_high != null
+ ) {
+ return `${this.stateObj.attributes.target_temp_low}-${this.stateObj.attributes.target_temp_high} ${this.hass.config.unit_system.temperature}`;
+ }
+
+ if (this.stateObj.attributes.temperature != null) {
+ return `${this.stateObj.attributes.temperature} ${this.hass.config.unit_system.temperature}`;
+ }
+ if (
+ this.stateObj.attributes.target_humidity_low != null &&
+ this.stateObj.attributes.target_humidity_high != null
+ ) {
+ return `${this.stateObj.attributes.target_humidity_low}-${this.stateObj.attributes.target_humidity_high}%`;
+ }
+
+ if (this.stateObj.attributes.humidity != null) {
+ return `${this.stateObj.attributes.humidity} %`;
+ }
+
+ return "";
+ }
+
+ private _localizeState(): string {
+ const stateString = this.hass.localize(
+ `component.climate.state._.${this.stateObj.state}`
+ );
+
+ return this.stateObj.attributes.hvac_action
+ ? `${this.hass.localize(
+ `state_attributes.climate.hvac_action.${this.stateObj.attributes.hvac_action}`
+ )} (${stateString})`
+ : stateString;
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ white-space: nowrap;
+ }
+
+ .target {
+ color: var(--primary-text-color);
+ }
+
+ .current {
+ color: var(--secondary-text-color);
+ }
+
+ .state-label {
+ font-weight: bold;
+ text-transform: capitalize;
+ }
+
+ .unit {
+ display: inline-block;
+ direction: ltr;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-climate-state": HaClimateState;
+ }
+}
diff --git a/src/components/ha-cover-tilt-controls.js b/src/components/ha-cover-tilt-controls.js
deleted file mode 100644
index 08f992380a..0000000000
--- a/src/components/ha-cover-tilt-controls.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "./ha-icon-button";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { UNAVAILABLE } from "../data/entity";
-import CoverEntity from "../util/cover-model";
-
-class HaCoverTiltControls extends PolymerElement {
- static get template() {
- return html`
-
-
- ${currentStatus}
+
-
- -
-
-
- -
-
-
-
-
- `;
+ private _formatISODate(d) {
+ return [
+ ("0000" + String(d.year)).slice(-4),
+ ("0" + String(d.month + 1)).slice(-2),
+ ("0" + String(d.day)).slice(-2),
+ ].join("-");
}
- private _formatYear() {
- const yearElement = this.shadowRoot!.getElementById(
- "year"
- ) as PaperInputElement;
- this.year = yearElement.value!;
- }
+ private _parseISODate(text) {
+ const parts = text.split("-");
+ const today = new Date();
+ let date;
+ let month = today.getMonth();
+ let year = today.getFullYear();
+ if (parts.length === 3) {
+ year = parseInt(parts[0]);
+ if (parts[0].length < 3 && year >= 0) {
+ year += year < 50 ? 2000 : 1900;
+ }
+ month = parseInt(parts[1]) - 1;
+ date = parseInt(parts[2]);
+ } else if (parts.length === 2) {
+ month = parseInt(parts[0]) - 1;
+ date = parseInt(parts[1]);
+ } else if (parts.length === 1) {
+ date = parseInt(parts[0]);
+ }
- private _formatMonth() {
- const monthElement = this.shadowRoot!.getElementById(
- "month"
- ) as PaperInputElement;
- this.month = ("0" + monthElement.value!).slice(-2);
- }
-
- private _formatDay() {
- const dayElement = this.shadowRoot!.getElementById(
- "day"
- ) as PaperInputElement;
- this.day = ("0" + dayElement.value!).slice(-2);
- }
-
- get value() {
- return `${this.year}-${this.month}-${this.day}`;
+ if (date !== undefined) {
+ return { day: date, month, year };
+ }
+ return undefined;
}
}
+customElements.define("ha-date-input", HaDateInput as any);
+
declare global {
interface HTMLElementTagNameMap {
"ha-date-input": HaDateInput;
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index c94fbb2115..75676269f7 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -40,6 +40,7 @@ export class HaDialog extends MwcDialog {
.mdc-dialog {
--mdc-dialog-scroll-divider-color: var(--divider-color);
z-index: var(--dialog-z-index, 7);
+ backdrop-filter: var(--dialog-backdrop-filter, none);
}
.mdc-dialog__actions {
justify-content: var(--justify-action-buttons, flex-end);
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index 5b84c8d4e2..05e7e6cdc9 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -104,7 +104,6 @@ class HaHLSPlayer extends LitElement {
private async _startHls(): Promise
- ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
- this._renderEmptySortable
- ? ""
- : this._renderPanels(beforeSpacer)
- )}
-
`
- : this._renderPanels(beforeSpacer)}
-
- ${this.editMode && this._hiddenPanels.length
- ? html`
- ${this._hiddenPanels.map((url) => {
- const panel = this.hass.panels[url];
- if (!panel) {
- return "";
- }
- return html`
-
-
-
-
-
-
+ ${guard([this._hiddenPanels, this._renderEmptySortable], () =>
+ this._renderEmptySortable ? "" : this._renderPanels(beforeSpacer)
+ )}
+
+ ${this._renderSpacer()}
+ ${this._renderHiddenPanels()} `;
+ }
+
+ private _renderHiddenPanels() {
+ return html` ${this._hiddenPanels.length
+ ? html`${this._hiddenPanels.map((url) => {
+ const panel = this.hass.panels[url];
+ if (!panel) {
+ return "";
+ }
+ return html`
+
+
+
`;
+ }
+
+ private _renderUserItem() {
+ return html`
+ - ${this.hass.localize( - "ui.dialogs.config_entry_system_options.title", - "integration", - this.hass.localize( - `component.${this._params.entry.domain}.title` - ) || this._params.entry.domain - )} -
-
${this._loading
? html`
+
@@ -112,22 +112,22 @@ class DialogConfigEntrySystemOptions extends LitElement {
`}
-
- ${!this._loading
- ? html`
-
- `
- : ""}
-
+ ${hass.localize(`ui.dialogs.options_flow.success.description`)}
`; }, + + renderShowFormProgressHeader(_hass, _step) { + return ""; + }, + + renderShowFormProgressDescription(_hass, _step) { + return ""; + }, } ); diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index cbfcf3b8d5..a95f31637b 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -23,6 +23,7 @@ import { HomeAssistant } from "../../types"; import { documentationUrl } from "../../util/documentation-url"; import { FlowConfig } from "./show-dialog-data-entry-flow"; import { configFlowContentStyles } from "./styles"; +import { brandsUrl } from "../../util/brands-url"; interface HandlerObj { name: string; @@ -102,7 +103,7 @@ class StepFlowPickHandler extends LitElement {
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
new file mode 100644
index 0000000000..57ba59560c
--- /dev/null
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -0,0 +1,82 @@
+import "@material/mwc-button";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ LitElement,
+ property,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-circular-progress";
+import {
+ DataEntryFlowProgressedEvent,
+ DataEntryFlowStepProgress,
+} from "../../data/data_entry_flow";
+import { HomeAssistant } from "../../types";
+import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { configFlowContentStyles } from "./styles";
+
+@customElement("step-flow-progress")
+class StepFlowProgress extends LitElement {
+ public flowConfig!: FlowConfig;
+
+ @property({ attribute: false })
+ public hass!: HomeAssistant;
+
+ @property({ attribute: false })
+ private step!: DataEntryFlowStepProgress;
+
+ protected render(): TemplateResult {
+ return html`
+ + ${this.flowConfig.renderShowFormProgressHeader(this.hass, this.step)} +
+
+
+ `;
+ }
+
+ protected firstUpdated(changedProps) {
+ super.firstUpdated(changedProps);
+ this.hass.connection.subscribeEvents- ${computeDeviceName(device, this.hass)} -
-
${this._error ? html`
-
-
-
+
+ ${this.hass.localize("ui.common.cancel")}
+
+
+ ${this.hass.localize("ui.panel.config.devices.update")}
+
+
`;
}
@@ -113,19 +126,10 @@ class DialogDeviceRegistryDetail extends LitElement {
}
}
- private _openedChanged(ev: PolymerChangedEvent): void {
- if (!(ev.detail as any).value) {
- this._params = undefined;
- }
- }
-
static get styles(): CSSResult[] {
return [
haStyleDialog,
css`
- ha-paper-dialog {
- min-width: 400px;
- }
.form {
padding-bottom: 24px;
}
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
index d2d0d8770e..4e26d57e86 100644
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -64,6 +64,10 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
${this._error}
` : ""}
-
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 1e47d7f943..b1656d2ef9 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -25,19 +25,12 @@ import "../../../components/ha-svg-icon";
import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
import {
- ControlButton,
+ computeMediaControls,
MediaPickedEvent,
- SUPPORTS_PLAY,
SUPPORT_BROWSE_MEDIA,
- SUPPORT_NEXT_TRACK,
- SUPPORT_PAUSE,
SUPPORT_PLAY_MEDIA,
- SUPPORT_PREVIOUS_TRACK,
SUPPORT_SELECT_SOUND_MODE,
SUPPORT_SELECT_SOURCE,
- SUPPORT_STOP,
- SUPPORT_TURN_OFF,
- SUPPORT_TURN_ON,
SUPPORT_VOLUME_BUTTONS,
SUPPORT_VOLUME_MUTE,
SUPPORT_VOLUME_SET,
@@ -57,8 +50,8 @@ class MoreInfoMediaPlayer extends LitElement {
return html``;
}
- const controls = this._getControls();
const stateObj = this.stateObj;
+ const controls = computeMediaControls(stateObj);
return html`
${!controls
@@ -254,84 +247,6 @@ class MoreInfoMediaPlayer extends LitElement {
`;
}
- private _getControls(): ControlButton[] | undefined {
- const stateObj = this.stateObj;
-
- if (!stateObj) {
- return undefined;
- }
-
- const state = stateObj.state;
-
- if (UNAVAILABLE_STATES.includes(state)) {
- return undefined;
- }
-
- if (state === "off") {
- return supportsFeature(stateObj, SUPPORT_TURN_ON)
- ? [
- {
- icon: "hass:power",
- action: "turn_on",
- },
- ]
- : undefined;
- }
-
- if (state === "idle") {
- return supportsFeature(stateObj, SUPPORTS_PLAY)
- ? [
- {
- icon: "hass:play",
- action: "media_play",
- },
- ]
- : undefined;
- }
-
- const buttons: ControlButton[] = [];
-
- if (supportsFeature(stateObj, SUPPORT_TURN_OFF)) {
- buttons.push({
- icon: "hass:power",
- action: "turn_off",
- });
- }
-
- if (supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)) {
- buttons.push({
- icon: "hass:skip-previous",
- action: "media_previous_track",
- });
- }
-
- if (
- (state === "playing" &&
- (supportsFeature(stateObj, SUPPORT_PAUSE) ||
- supportsFeature(stateObj, SUPPORT_STOP))) ||
- (state === "paused" && supportsFeature(stateObj, SUPPORTS_PLAY))
- ) {
- buttons.push({
- icon:
- state !== "playing"
- ? "hass:play"
- : supportsFeature(stateObj, SUPPORT_PAUSE)
- ? "hass:pause"
- : "hass:stop",
- action: "media_play_pause",
- });
- }
-
- if (supportsFeature(stateObj, SUPPORT_NEXT_TRACK)) {
- buttons.push({
- icon: "hass:skip-next",
- action: "media_next_track",
- });
- }
-
- return buttons.length > 0 ? buttons : undefined;
- }
-
private _handleClick(e: MouseEvent): void {
this.hass!.callService(
"media_player",
diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts
index a611e521cf..b92de7e261 100644
--- a/src/dialogs/more-info/controls/more-info-sun.ts
+++ b/src/dialogs/more-info/controls/more-info-sun.ts
@@ -72,6 +72,12 @@ class MoreInfoSun extends LitElement {
flex-direction: row;
justify-content: space-between;
}
+ ha-relative-time {
+ display: inline-block;
+ }
+ ha-relative-time::first-letter {
+ text-transform: lowercase;
+ }
`;
}
}
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 10a4b1f15b..3feedb9a50 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -17,14 +17,10 @@ import {
DOMAINS_MORE_INFO_NO_HISTORY,
DOMAINS_WITH_MORE_INFO,
} from "../../common/const";
-import { dynamicElement } from "../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../common/dom/fire_event";
import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
-import {
- stateMoreInfoType,
- importMoreInfoControl,
-} from "./state_more_info_control";
+
import { navigate } from "../../common/navigate";
import "../../components/ha-dialog";
import "../../components/ha-header-bar";
@@ -39,6 +35,7 @@ import "./ha-more-info-history";
import "./ha-more-info-logbook";
import "./controls/more-info-default";
import { CONTINUOUS_DOMAINS } from "../../data/logbook";
+import "./more-info-content";
const DOMAINS_NO_INFO = ["camera", "configurator"];
/**
@@ -63,8 +60,6 @@ export class MoreInfoDialog extends LitElement {
@internalProperty() private _entityId?: string | null;
- @internalProperty() private _moreInfoType?: string;
-
@internalProperty() private _currTabIndex = 0;
public showDialog(params: MoreInfoDialogParams) {
@@ -74,18 +69,6 @@ export class MoreInfoDialog extends LitElement {
return;
}
this.large = false;
-
- const stateObj = this.hass.states[this._entityId];
- if (!stateObj) {
- return;
- }
- if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
- this._moreInfoType = stateObj.attributes.custom_ui_more_info;
- } else {
- const type = stateMoreInfoType(stateObj);
- importMoreInfoControl(type);
- this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
- }
}
public closeDialog() {
@@ -218,12 +201,10 @@ export class MoreInfoDialog extends LitElement {
.hass=${this.hass}
.entityId=${this._entityId}
>`}
- ${this._moreInfoType
- ? dynamicElement(this._moreInfoType, {
- hass: this.hass,
- stateObj,
- })
- : ""}
+
@@ -304,8 +285,8 @@ export class MoreInfoDialog extends LitElement {
text: this.hass.localize(
"ui.dialogs.more_info_control.restored.confirm_remove_text"
),
- confirmText: this.hass.localize("ui.common.yes"),
- dismissText: this.hass.localize("ui.common.no"),
+ confirmText: this.hass.localize("ui.common.remove"),
+ dismissText: this.hass.localize("ui.common.cancel"),
confirm: () => {
removeEntityRegistryEntry(this.hass, entityId);
},
diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts
new file mode 100644
index 0000000000..47570226fa
--- /dev/null
+++ b/src/dialogs/more-info/more-info-content.ts
@@ -0,0 +1,57 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { property, PropertyValues, UpdatingElement } from "lit-element";
+
+import { HomeAssistant } from "../../types";
+import dynamicContentUpdater from "../../common/dom/dynamic_content_updater";
+import { stateMoreInfoType } from "./state_more_info_control";
+import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
+
+class MoreInfoContent extends UpdatingElement {
+ @property({ attribute: false }) public hass?: HomeAssistant;
+
+ @property() public stateObj?: HassEntity;
+
+ private _detachedChild?: ChildNode;
+
+ // This is not a lit element, but an updating element, so we implement update
+ protected update(changedProps: PropertyValues): void {
+ super.update(changedProps);
+ const stateObj = this.stateObj;
+ const hass = this.hass;
+
+ if (!stateObj || !hass) {
+ if (this.lastChild) {
+ this._detachedChild = this.lastChild;
+ // Detach child to prevent it from doing work.
+ this.removeChild(this.lastChild);
+ }
+ return;
+ }
+
+ if (this._detachedChild) {
+ this.appendChild(this._detachedChild);
+ this._detachedChild = undefined;
+ }
+
+ let moreInfoType: string | undefined;
+
+ if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
+ moreInfoType = stateObj.attributes.custom_ui_more_info;
+ } else {
+ const type = stateMoreInfoType(stateObj);
+ importMoreInfoControl(type);
+ moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+ }
+
+ if (!moreInfoType) {
+ return;
+ }
+
+ dynamicContentUpdater(this, moreInfoType.toUpperCase(), {
+ hass,
+ stateObj,
+ });
+ }
+}
+
+customElements.define("more-info-content", MoreInfoContent);
diff --git a/src/dialogs/notifications/notification-drawer.js b/src/dialogs/notifications/notification-drawer.js
index 0ad149e9f0..cc3dc592e3 100644
--- a/src/dialogs/notifications/notification-drawer.js
+++ b/src/dialogs/notifications/notification-drawer.js
@@ -25,8 +25,8 @@ export class HuiNotificationDrawer extends EventsMixin(
color: var(--primary-text-color);
border-bottom: 1px solid var(--divider-color);
background-color: var(--primary-background-color);
- min-height: 64px;
- width: calc(100% - 32px);
+ height: var(--header-height);
+ box-sizing: border-box;
}
div[main-title] {
@@ -63,7 +63,10 @@ export class HuiNotificationDrawer extends EventsMixin(
[[localize('ui.panel.config.cloud.account.thank_you_note')]]
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index 904333c728..d9bdbd1e14 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -214,9 +214,9 @@ class CloudAlexa extends LitElement {
}
return html`
-
[[localize('ui.panel.config.cloud.login.introduction')]]
diff --git a/src/panels/config/cloud/register/cloud-register.js b/src/panels/config/cloud/register/cloud-register.js
index 382effb34f..8071ec8058 100644
--- a/src/panels/config/cloud/register/cloud-register.js
+++ b/src/panels/config/cloud/register/cloud-register.js
@@ -47,7 +47,7 @@ class CloudRegister extends LocalizeMixin(EventsMixin(PolymerElement)) {
display: none;
}
-
- [[localize('ui.panel.developer-tools.tabs.states.description1')]]
- [[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]
-
+ [[localize('ui.panel.developer-tools.tabs.states.description1')]]
+ [[localize('ui.panel.developer-tools.tabs.states.state_attributes')]]
+
+ [[localize('ui.panel.developer-tools.tabs.states.last_changed')]]:
+ [[localize('ui.panel.developer-tools.tabs.states.last_updated')]]:[[localize('ui.notification_drawer.title')]]
-
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index 95c4ce18bb..49920892c2 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -41,19 +41,36 @@ import {
showConfirmationDialog,
} from "../generic/show-dialog-box";
import { QuickBarParams } from "./show-dialog-quick-bar";
+import { navigate } from "../../common/navigate";
+import { configSections } from "../../panels/config/ha-panel-config";
+import { PageNavigation } from "../../layouts/hass-tabs-subpage";
+import { canShowPage } from "../../common/config/can_show_page";
+import { getPanelIcon, getPanelNameTranslationKey } from "../../data/panel";
+
+const DEFAULT_NAVIGATION_ICON = "hass:arrow-right-circle";
+const DEFAULT_SERVER_ICON = "hass:server";
interface QuickBarItem extends ScorableTextItem {
- icon: string;
+ icon?: string;
+ iconPath?: string;
action(data?: any): void;
}
+interface QuickBarNavigationItem extends QuickBarItem {
+ path: string;
+}
+
+interface NavigationInfo extends PageNavigation {
+ text: string;
+}
+
@customElement("ha-quick-bar")
export class QuickBar extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
- @internalProperty() private _commandItems: QuickBarItem[] = [];
+ @internalProperty() private _commandItems?: QuickBarItem[];
- @internalProperty() private _entityItems: QuickBarItem[] = [];
+ @internalProperty() private _entityItems?: QuickBarItem[];
@internalProperty() private _items?: QuickBarItem[] = [];
@@ -73,8 +90,7 @@ export class QuickBar extends LitElement {
public async showDialog(params: QuickBarParams) {
this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
- this._commandItems = this._generateCommandItems();
- this._entityItems = this._generateEntityItems();
+ this._initializeItemsIfNeeded();
this._opened = true;
}
@@ -158,6 +174,14 @@ export class QuickBar extends LitElement {
`;
}
+ private _initializeItemsIfNeeded() {
+ if (this._commandMode) {
+ this._commandItems = this._commandItems || this._generateCommandItems();
+ } else {
+ this._entityItems = this._entityItems || this._generateEntityItems();
+ }
+ }
+
private _handleOpened() {
this._setFilteredItems();
this.updateComplete.then(() => {
@@ -182,14 +206,20 @@ export class QuickBar extends LitElement {
.twoline=${Boolean(item.altText)}
.item=${item}
index=${ifDefined(index)}
- hasMeta
- graphic=${item.altText ? "avatar" : "icon"}
+ graphic="icon"
>
-
${this._calendars.map(
(selCal) =>
- html`
${this.badgeIcon
diff --git a/src/onboarding/onboarding-restore-snapshot.ts b/src/onboarding/onboarding-restore-snapshot.ts
index 8f280f965d..6fb86da28e 100644
--- a/src/onboarding/onboarding-restore-snapshot.ts
+++ b/src/onboarding/onboarding-restore-snapshot.ts
@@ -4,7 +4,6 @@ import {
CSSResult,
customElement,
html,
- internalProperty,
LitElement,
property,
TemplateResult,
@@ -15,10 +14,6 @@ import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show
import { navigate } from "../common/navigate";
import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-card";
-import {
- extractApiErrorMessage,
- ignoredStatusCodes,
-} from "../data/hassio/common";
import { makeDialogManager } from "../dialogs/make-dialog-manager";
import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
import { haStyle } from "../resources/styles";
@@ -38,10 +33,6 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
@property({ type: Boolean }) public restoring = false;
- @internalProperty() private _log = "";
-
- @internalProperty() private _showFullLog = false;
-
protected render(): TemplateResult {
return this.restoring
? html`
-
+
- `
+ html`
+
+
+ `
)}
- ${entry
- ? entry.name
- : this.hass.localize("ui.panel.config.areas.editor.default_name")}
-
-
${this._error ? html` ${this._error} ` : ""}
${entry
@@ -71,6 +75,7 @@ class DialogAreaDetail extends LitElement {
-
-
-
+ ${entry
+ ? html`
+ Create a new automation
+
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.task_selection.header`
+ )}
+
${this._error} ` : ""}
- Type below what this automation should do, and we will try to convert
- it into a Home Assistant automation. (only English is supported for
- now)
- For example:
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.task_selection.introduction`
+ )}
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.task_selection.language_note`
+ )}
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.task_selection.for_example`
+ )}
Great! Now we need to link some devices.
+
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.link_devices.header`
+ )}
+
${this._error} ` : ""}
${Object.entries(this.placeholders).map(
@@ -168,8 +172,9 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
${extraInfo && extraInfo.manualEntity
? html`
- One or more devices have more than one matching
- entity, please pick the one you want to use.
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.link_devices.ambiguous_entities`
+ )}
${Object.keys(extraInfo.manualEntity).map(
(idx) => html`
@@ -226,7 +231,9 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
}
return html`
- Unknown placeholder
+ ${this.hass.localize(
+ `ui.panel.config.automation.thingtalk.link_devices.unknown_placeholder`
+ )}
${placeholder.domains}
${placeholder.fields.map(
(field) => html` ${field}
`
@@ -239,10 +246,10 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index 687889c634..944c57044d 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -196,8 +196,8 @@ export default class HaAutomationTriggerRow extends LitElement {
text: this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm"
),
- dismissText: this.hass.localize("ui.common.no"),
- confirmText: this.hass.localize("ui.common.yes"),
+ dismissText: this.hass.localize("ui.common.cancel"),
+ confirmText: this.hass.localize("ui.common.delete"),
confirm: () => {
fireEvent(this, "value-changed", { value: null });
},
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index fda5256c36..2359d24067 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/src/panels/config/cloud/account/cloud-account.js
@@ -61,12 +61,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
color: var(--primary-color);
}
-
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 40067a0eaf..e0ad918fe5 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -237,9 +237,9 @@ class CloudGoogleAssistant extends LitElement {
}
return html`
-
+ 
+ ${
+ integrations.length
+ ? html`
+
+ `
+ : ""
+ }
+
@@ -528,6 +535,19 @@ export class HaConfigDevicePage extends LitElement {
`);
}
+ if (integrations.includes("tasmota")) {
+ import(
+ "./device-detail/integration-elements/tasmota/ha-device-actions-tasmota"
+ );
+ templates.push(html`
+
+
+ `);
+ }
if (integrations.includes("zha")) {
import("./device-detail/integration-elements/zha/ha-device-actions-zha");
import("./device-detail/integration-elements/zha/ha-device-info-zha");
@@ -574,7 +594,7 @@ export class HaConfigDevicePage extends LitElement {
text: this.hass.localize(
"ui.panel.config.devices.confirm_rename_entity_ids_warning"
),
- confirmText: this.hass.localize("ui.common.yes"),
+ confirmText: this.hass.localize("ui.common.rename"),
dismissText: this.hass.localize("ui.common.no"),
warning: true,
}));
diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts
index 4b4ac7723d..79d4bcb07b 100644
--- a/src/panels/config/entities/entity-registry-basic-editor.ts
+++ b/src/panels/config/entities/entity-registry-basic-editor.ts
@@ -17,6 +17,7 @@ import {
ExtEntityRegistryEntry,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import type { PolymerChangedEvent } from "../../../polymer-types";
import type { HomeAssistant } from "../../../types";
@@ -43,7 +44,27 @@ export class HaEntityRegistryBasicEditor extends LitElement {
params.disabled_by = this._disabledBy;
}
try {
- await updateEntityRegistryEntry(this.hass!, this._origEntityId, params);
+ const result = await updateEntityRegistryEntry(
+ this.hass!,
+ this._origEntityId,
+ params
+ );
+ if (result.require_restart) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
+ ),
+ });
+ }
+ if (result.reload_delay) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
+ "delay",
+ result.reload_delay
+ ),
+ });
+ }
} finally {
this._submitting = false;
}
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index e6b7ea577d..0912c6331f 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -23,7 +23,10 @@ import {
removeEntityRegistryEntry,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import type { PolymerChangedEvent } from "../../../polymer-types";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant } from "../../../types";
@@ -191,7 +194,27 @@ export class EntityRegistrySettings extends LitElement {
params.disabled_by = this._disabledBy;
}
try {
- await updateEntityRegistryEntry(this.hass!, this._origEntityId, params);
+ const result = await updateEntityRegistryEntry(
+ this.hass!,
+ this._origEntityId,
+ params
+ );
+ if (result.require_restart) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
+ ),
+ });
+ }
+ if (result.reload_delay) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
+ "delay",
+ result.reload_delay
+ ),
+ });
+ }
fireEvent(this as HTMLElement, "close-dialog");
} catch (err) {
this._error = err.message || "Unknown error";
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 85ffc4a26a..8520489164 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -46,7 +46,10 @@ import {
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import { domainToName } from "../../../data/integration";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+ showAlertDialog,
+ showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage-data-table";
import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
@@ -685,7 +688,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
this._selectedEntities = ev.detail.value;
}
- private _enableSelected() {
+ private async _enableSelected() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.confirm_title",
@@ -695,15 +698,42 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
text: this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.confirm_text"
),
- confirmText: this.hass.localize("ui.common.yes"),
- dismissText: this.hass.localize("ui.common.no"),
- confirm: () => {
- this._selectedEntities.forEach((entity) =>
- updateEntityRegistryEntry(this.hass, entity, {
- disabled_by: null,
+ confirmText: this.hass.localize("ui.common.enable"),
+ dismissText: this.hass.localize("ui.common.cancel"),
+ confirm: async () => {
+ let require_restart = false;
+ let reload_delay = 0;
+ await Promise.all(
+ this._selectedEntities.map(async (entity) => {
+ const result = await updateEntityRegistryEntry(this.hass, entity, {
+ disabled_by: null,
+ });
+ if (result.require_restart) {
+ require_restart = true;
+ }
+ if (result.reload_delay) {
+ reload_delay = Math.max(reload_delay, result.reload_delay);
+ }
})
);
this._clearSelection();
+ // If restart is required by any entity, show a dialog.
+ // Otherwise, show a dialog explaining that some patience is needed
+ if (require_restart) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_restart_confirm"
+ ),
+ });
+ } else if (reload_delay) {
+ showAlertDialog(this, {
+ text: this.hass.localize(
+ "ui.dialogs.entity_registry.editor.enabled_delay_confirm",
+ "delay",
+ reload_delay
+ ),
+ });
+ }
},
});
}
@@ -718,8 +748,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
text: this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.confirm_text"
),
- confirmText: this.hass.localize("ui.common.yes"),
- dismissText: this.hass.localize("ui.common.no"),
+ confirmText: this.hass.localize("ui.common.disable"),
+ dismissText: this.hass.localize("ui.common.cancel"),
confirm: () => {
this._selectedEntities.forEach((entity) =>
updateEntityRegistryEntry(this.hass, entity, {
@@ -758,8 +788,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"selected",
this._selectedEntities.length
),
- confirmText: this.hass.localize("ui.common.yes"),
- dismissText: this.hass.localize("ui.common.no"),
+ confirmText: this.hass.localize("ui.common.remove"),
+ dismissText: this.hass.localize("ui.common.cancel"),
confirm: () => {
removeableEntities.forEach((entity) =>
removeEntityRegistryEntry(this.hass, entity)
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 8179474639..68da162f1c 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -160,9 +160,10 @@ export class HaConfigHelpers extends LitElement {
>
diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts
index 69df18b5b5..765725b133 100644
--- a/src/panels/config/info/system-health-card.ts
+++ b/src/panels/config/info/system-health-card.ts
@@ -1,3 +1,5 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button";
import "../../../components/ha-circular-progress";
import { mdiContentCopy } from "@mdi/js";
import {
@@ -15,10 +17,13 @@ import "@polymer/paper-tooltip/paper-tooltip";
import type { PaperTooltipElement } from "@polymer/paper-tooltip/paper-tooltip";
import { domainToName } from "../../../data/integration";
import {
- fetchSystemHealthInfo,
+ subscribeSystemHealthInfo,
SystemHealthInfo,
+ SystemCheckValueObject,
} from "../../../data/system_health";
import { HomeAssistant } from "../../../types";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
+import { copyToClipboard } from "../../../common/util/copy-clipboard";
const sortKeys = (a: string, b: string) => {
if (a === "homeassistant") {
@@ -60,19 +65,77 @@ class SystemHealthCard extends LitElement {
} else {
const domains = Object.keys(this._info).sort(sortKeys);
for (const domain of domains) {
+ const domainInfo = this._info[domain];
const keys: TemplateResult[] = [];
- for (const key of Object.keys(this._info[domain]).sort()) {
+ for (const key of Object.keys(domainInfo.info)) {
+ let value: unknown;
+
+ if (
+ domainInfo.info[key] &&
+ typeof domainInfo.info[key] === "object"
+ ) {
+ const info = domainInfo.info[key] as SystemCheckValueObject;
+
+ if (info.type === "pending") {
+ value = html`
+ 
-
`);
}
if (domain !== "homeassistant") {
sections.push(
- html`${key}
- ${this._info[domain][key]}
+
+ ${this.hass.localize(
+ `component.${domain}.system_health.info.${key}`
+ ) || key}
+
+ ${value}
${domainToName(this.hass.localize, domain)}
`
+ html`
+
+
+ `
);
}
sections.push(html`
@@ -109,45 +172,65 @@ class SystemHealthCard extends LitElement {
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
- this._fetchInfo();
- }
- private async _fetchInfo() {
- try {
- if (!this.hass!.config.components.includes("system_health")) {
- throw new Error();
- }
- this._info = await fetchSystemHealthInfo(this.hass!);
- } catch (err) {
+ this.hass!.loadBackendTranslation("system_health");
+
+ if (!this.hass!.config.components.includes("system_health")) {
this._info = {
system_health: {
- error: this.hass.localize("ui.panel.config.info.system_health_error"),
+ info: {
+ error: this.hass.localize(
+ "ui.panel.config.info.system_health_error"
+ ),
+ },
},
};
+ return;
}
+
+ subscribeSystemHealthInfo(this.hass!, (info) => {
+ this._info = info;
+ });
}
private _copyInfo(): void {
- const copyElement = this.shadowRoot?.querySelector(
- ".card-content"
- ) as HTMLElement;
+ let haContent: string | undefined;
+ const domainParts: string[] = [];
- // Add temporary heading (fixed in EN since usually executed to provide support data)
- const tempTitle = document.createElement("h3");
- tempTitle.innerText = "System Health";
- copyElement.insertBefore(tempTitle, copyElement.firstElementChild);
+ for (const domain of Object.keys(this._info!).sort(sortKeys)) {
+ const domainInfo = this._info![domain];
+ const parts = [`${domainToName(this.hass.localize, domain)}\n`];
- const selection = window.getSelection()!;
- selection.removeAllRanges();
- const range = document.createRange();
- range.selectNodeContents(copyElement);
- selection.addRange(range);
+ for (const key of Object.keys(domainInfo.info)) {
+ let value: unknown;
- document.execCommand("copy");
- window.getSelection()!.removeAllRanges();
+ if (typeof domainInfo.info[key] === "object") {
+ const info = domainInfo.info[key] as SystemCheckValueObject;
- // Remove temporary heading again
- copyElement.removeChild(tempTitle);
+ if (info.type === "pending") {
+ value = "pending";
+ } else if (info.type === "failed") {
+ value = `failed to load: ${info.error}`;
+ } else if (info.type === "date") {
+ value = formatDateTime(new Date(info.value), this.hass.language);
+ }
+ } else {
+ value = domainInfo.info[key];
+ }
+
+ parts.push(`${key}: ${value}`);
+ }
+
+ if (domain === "homeassistant") {
+ haContent = parts.join("\n");
+ } else {
+ domainParts.push(parts.join("\n"));
+ }
+ }
+
+ copyToClipboard(
+ `System Health\n\n${haContent}\n\n${domainParts.join("\n\n")}`
+ );
this._toolTip!.show();
setTimeout(() => this._toolTip?.hide(), 3000);
@@ -160,7 +243,7 @@ class SystemHealthCard extends LitElement {
}
td:first-child {
- width: 33%;
+ width: 45%;
}
.loading-container {
@@ -172,6 +255,19 @@ class SystemHealthCard extends LitElement {
.card-header {
justify-content: space-between;
display: flex;
+ align-items: center;
+ }
+
+ .error {
+ color: var(--error-color);
+ }
+
+ a {
+ color: var(--primary-color);
+ }
+
+ a.manage {
+ text-decoration: none;
}
`;
}
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 744b3d0e8e..1759a0a21a 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -23,7 +23,6 @@ import "../../../common/search/search-input";
import { caseInsensitiveCompare } from "../../../common/string/compare";
import { LocalizeFunc } from "../../../common/translations/localize";
import { nextRender } from "../../../common/util/render-status";
-import "../../../components/entity/ha-state-icon";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-svg-icon";
@@ -68,6 +67,7 @@ import type {
ConfigEntryUpdatedEvent,
HaIntegrationCard,
} from "./ha-integration-card";
+import { brandsUrl } from "../../../util/brands-url";
interface DataEntryFlowProgressExtended extends DataEntryFlowProgress {
localized_title?: string;
@@ -331,7 +331,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
+ ${domainToName(this.hass.localize, domain)}
+
+ ${!domainInfo.manage_url
+ ? ""
+ : html`
+
+
+
-
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
index ee05890a37..bbf4ba6188 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
@@ -58,9 +58,10 @@ class OZWConfigDashboard extends LitElement {
if (this._instances.length === 0) {
return html`
- ${isUnavailable
- ? ""
- : html`
+ ${!isUnavailable &&
+ (mediaDescription || stateObj.attributes.media_title || showControls)
+ ? html`
${this._generateServiceButton("add_node")}
${this._generateServiceButton("remove_node")}
+ ${this._generateServiceButton("cancel_command")}
`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
index b1017aaaa8..5eb89a30bb 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@@ -68,9 +68,10 @@ class OZWNodeConfig extends LitElement {
if (this._error) {
return html`
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index 2255222781..a0dd5f05dc 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -225,9 +225,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
>
-
`;
}
@@ -217,6 +259,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
value: "",
},
+ _entity: {
+ type: Object,
+ },
+
_state: {
type: String,
value: "",
@@ -238,6 +284,11 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
"computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter)",
},
+ narrow: {
+ type: Boolean,
+ reflectToAttribute: true,
+ },
+
rtl: {
reflectToAttribute: true,
computed: "_computeRTL(hass)",
@@ -248,6 +299,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
entitySelected(ev) {
const state = ev.model.entity;
this._entityId = state.entity_id;
+ this._entity = state;
this._state = state.state;
this._stateAttributes = safeDump(state.attributes);
ev.preventDefault();
@@ -255,6 +307,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
entityIdChanged() {
if (this._entityId === "") {
+ this._entity = undefined;
this._state = "";
this._stateAttributes = "";
return;
@@ -263,6 +316,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
if (!state) {
return;
}
+ this._entity = state;
this._state = state.state;
this._stateAttributes = safeDump(state.attributes);
}
@@ -381,6 +435,20 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
return output;
}
+ lastChangedString(entity) {
+ return formatDateTimeWithSeconds(
+ new Date(entity.last_changed),
+ this.hass.language
+ );
+ }
+
+ lastUpdatedString(entity) {
+ return formatDateTimeWithSeconds(
+ new Date(entity.last_updated),
+ this.hass.language
+ );
+ }
+
formatAttributeValue(value) {
if (
(Array.isArray(value) && value.some((val) => val instanceof Object)) ||
diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts
index 0204f25d48..781e0fca98 100644
--- a/src/panels/logbook/ha-logbook.ts
+++ b/src/panels/logbook/ha-logbook.ts
@@ -22,7 +22,7 @@ import "../../components/ha-circular-progress";
import "../../components/ha-icon";
import "../../components/ha-relative-time";
import { LogbookEntry } from "../../data/logbook";
-import { haStyle } from "../../resources/styles";
+import { haStyle, haStyleScrollbar } from "../../resources/styles";
import { HomeAssistant } from "../../types";
@customElement("ha-logbook")
@@ -81,7 +81,7 @@ class HaLogbook extends LitElement {
return html`
- [[localize('ui.panel.developer-tools.tabs.states.description2')]]
-
+ [[localize('ui.panel.developer-tools.tabs.states.description2')]]
+
+
+
+
+
+
[[lastChangedString(_entity)]]
+
[[lastUpdatedString(_entity)]]
+
[[localize('ui.panel.developer-tools.tabs.states.current_entities')]]
-
-
+
-
- [[localize('ui.panel.developer-tools.tabs.states.entity')]]
- [[localize('ui.panel.developer-tools.tabs.states.state')]]
-
- [[localize('ui.panel.developer-tools.tabs.states.attributes')]]
-
-
-
-
-
-
-
-
-
-
-
-
+
- [[localize('ui.panel.developer-tools.tabs.states.no_entities')]]
-
-
+
+
-
-
-
-
- [[entity.state]]
-
- [[attributeString(entity)]]
-
+ [[localize('ui.panel.developer-tools.tabs.states.entity')]]
+ [[localize('ui.panel.developer-tools.tabs.states.state')]]
+
+ [[localize('ui.panel.developer-tools.tabs.states.attributes')]]
+
+
+
+
+
+
+
+
+
+
+
+
+ [[localize('ui.panel.developer-tools.tabs.states.no_entities')]]
+
+
+
+
+
+
+
+ [[entity.state]]
+
+
+ [[attributeString(entity)]]
+
+
@@ -186,6 +190,8 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
}
this._narrow = card.offsetWidth < 870;
this._veryNarrow = card.offsetWidth < 350;
+
+ this._calendar?.updateSize();
}
private async _attachObserver(): Promise
+ ${!this._logbookEntries
+ ? html`
+
+
+ ${this.hass.localize(
+ "ui.components.logbook.entries_not_found"
+ )}
+
+ `}
+
`}
- `}
+ `
+ : ""}
${heading}
+ ${heading}
${this._documentationURL !== undefined
? html`
+
-
-
+
+ `;
+ }
+
+ private _change(ev: Event) {
+ if (!this._config || !this.hass) {
+ return;
+ }
+
+ const value = (ev.target! as EditorTarget).checked ? 2 : 1;
+
+ if (this._detail === value) {
+ return;
+ }
+
+ this._config = {
+ ...this._config,
+ detail: value,
+ };
+
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+
+ private _valueChanged(ev: HASSDomEvent
+
+
+
+ `;
+ }
+
+ private _valueChanged(ev: CustomEvent): void {
+ if (!this._config || !this.hass) {
+ return;
+ }
+ const target = ev.target! as EditorTarget;
+
+ if (this[`_${target.configValue}`] === target.value) {
+ return;
+ }
+ if (ev.detail && ev.detail.value && Array.isArray(ev.detail.value)) {
+ this._config = { ...this._config, entities: ev.detail.value };
+ } else if (target.configValue) {
+ if (target.value === "") {
+ this._config = { ...this._config };
+ delete this._config[target.configValue!];
+ } else {
+ let value: any = target.value;
+
+ if (target.type === "number") {
+ value = Number(value);
+ }
+
+ this._config = {
+ ...this._config,
+ [target.configValue!]: value,
+ };
+ }
+ }
+ fireEvent(this, "config-changed", { config: this._config });
+ }
+
+ static get styles(): CSSResult {
+ return configElementStyle;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-logbook-card-editor": HuiLogbookCardEditor;
+ }
+}
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index d2640e7cae..bdb6609b9b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -18,12 +18,10 @@ import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { StackCardConfig } from "../../cards/types";
import { LovelaceCardEditor } from "../../types";
+import "../card-editor/hui-card-element-editor";
+import type { HuiCardElementEditor } from "../card-editor/hui-card-element-editor";
import "../card-editor/hui-card-picker";
-import "../hui-element-editor";
-import type {
- ConfigChangedEvent,
- HuiElementEditor,
-} from "../hui-element-editor";
+import type { ConfigChangedEvent } from "../hui-element-editor";
import { GUIModeChangedEvent } from "../types";
const cardConfigStruct = object({
@@ -47,7 +45,8 @@ export class HuiStackCardEditor extends LitElement
@internalProperty() private _guiModeAvailable? = true;
- @query("hui-element-editor") private _cardEditorEl?: HuiElementEditor;
+ @query("hui-card-element-editor")
+ private _cardEditorEl?: HuiCardElementEditor;
public setConfig(config: Readonly
+
+
+ ${`${this.hass!.localize(
+ "ui.panel.lovelace.editor.card.generic.entities"
+ )} (${this.hass!.localize(
+ "ui.panel.lovelace.editor.card.config.required"
+ )})`}
+
+
+ ${headerFooterElements.map(
+ (headerFooter) =>
+ html`
+
+
+ ${this.hass!.localize(
+ `ui.panel.lovelace.editor.header-footer.types.${headerFooter.type}.name`
+ )}
+
+
+
+
+
+ ${this.hass.localize(
+ `ui.panel.lovelace.editor.header-footer.${this.configValue}`
+ )}:
+ ${!this.config?.type
+ ? this.hass!.localize("ui.panel.lovelace.editor.common.none")
+ : this.hass!.localize(
+ `ui.panel.lovelace.editor.header-footer.types.${this.config?.type}.name`
+ )}
+
+
+
+ ${!this.config?.type
+ ? html`
+
+ `;
+ }
+
+ private _edit(): void {
+ fireEvent(this, "edit-detail-element", {
+ subElementConfig: {
+ elementConfig: this.config,
+ type: this.configValue,
+ },
+ });
+ }
+
+ private _add(): void {
+ showCreateHeaderFooterDialog(this, {
+ pickHeaderFooter: (config) => this._elementPicked(config),
+ type: this.configValue,
+ });
+ }
+
+ private _elementPicked(config: LovelaceHeaderFooterConfig): void {
+ fireEvent(this, "value-changed", { value: config });
+ fireEvent(this, "edit-detail-element", {
+ subElementConfig: {
+ elementConfig: config,
+ type: this.configValue,
+ },
+ });
+ }
+
+ private _delete(): void {
+ fireEvent(this, "value-changed", { value: "" });
+ }
+
+ static get styles(): CSSResult {
+ return css`
+ :host {
+ font-size: 16px;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 12px;
+ }
+
+ :host > div {
+ display: flex;
+ align-items: center;
+ }
+
+ mwc-icon-button,
+ .header-footer-icon {
+ --mdc-icon-button-size: 36px;
+ color: var(--secondary-text-color);
+ }
+
+ .header-footer-icon {
+ padding-right: 8px;
+ }
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-header-footer-editor": HuiHeaderFooterEditor;
+ }
+}
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
new file mode 100644
index 0000000000..3ddd0fa1a5
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -0,0 +1,29 @@
+import { customElement } from "lit-element";
+import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+import type { LovelaceHeaderFooterEditor } from "../../types";
+import { HuiElementEditor } from "../hui-element-editor";
+
+@customElement("hui-headerfooter-element-editor")
+export class HuiHeaderFooterElementEditor extends HuiElementEditor<
+ LovelaceHeaderFooterConfig
+> {
+ protected async getConfigElement(): Promise<
+ LovelaceHeaderFooterEditor | undefined
+ > {
+ const elClass = await getHeaderFooterElementClass(this.configElementType!);
+
+ // Check if a GUI editor exists
+ if (elClass && elClass.getConfigElement) {
+ return elClass.getConfigElement();
+ }
+
+ return undefined;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "hui-headerfooter-element-editor": HuiHeaderFooterElementEditor;
+ }
+}
diff --git a/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
new file mode 100644
index 0000000000..8d5ce55686
--- /dev/null
+++ b/src/panels/lovelace/editor/header-footer-editor/show-create-headerfooter-dialog.ts
@@ -0,0 +1,24 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
+
+export interface CreateHeaderFooterDialogParams {
+ pickHeaderFooter: (config: LovelaceHeaderFooterConfig) => void;
+ type: "header" | "footer";
+ entities?: string[]; // We can pass entity id's that will be added to the config when a header footer is picked
+}
+
+const importCreateHeaderFooterDialog = () =>
+ import(
+ /* webpackChunkName: "hui-dialog-create-headerfooter" */ "./hui-dialog-create-headerfooter"
+ );
+
+export const showCreateHeaderFooterDialog = (
+ element: HTMLElement,
+ createHeaderFooterDialogParams: CreateHeaderFooterDialogParams
+): void => {
+ fireEvent(element, "show-dialog", {
+ dialogTag: "hui-dialog-create-headerfooter",
+ dialogImport: importCreateHeaderFooterDialog,
+ dialogParams: createHeaderFooterDialogParams,
+ });
+};
diff --git a/src/panels/lovelace/editor/hui-detail-editor-base.ts b/src/panels/lovelace/editor/hui-detail-editor-base.ts
deleted file mode 100644
index 2dedee71f6..0000000000
--- a/src/panels/lovelace/editor/hui-detail-editor-base.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import "@material/mwc-button";
-import "@material/mwc-icon-button";
-import { mdiArrowLeft } from "@mdi/js";
-import {
- css,
- CSSResult,
- customElement,
- html,
- LitElement,
- property,
- TemplateResult,
-} from "lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-svg-icon";
-import { HomeAssistant } from "../../../types";
-
-declare global {
- interface HASSDomEvents {
- "go-back": undefined;
- "toggle-gui-mode": undefined;
- }
-}
-
-@customElement("hui-detail-editor-base")
-export class HuiDetailEditorBase extends LitElement {
- public hass!: HomeAssistant;
-
- @property({ type: Boolean }) public guiModeAvailable? = true;
-
- @property({ type: Boolean }) public guiMode? = true;
-
- protected render(): TemplateResult {
- return html`
-
-
-
-
-
@@ -228,8 +224,9 @@ export class HuiElementEditor extends LitElement {
`;
}
- protected updated(changedProperties) {
+ protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
+
if (this._configElement && changedProperties.has("hass")) {
this._configElement.hass = this.hass;
}
@@ -245,10 +242,10 @@ export class HuiElementEditor extends LitElement {
private _handleUIConfigChanged(ev: UIConfigChangedEvent) {
ev.stopPropagation();
const config = ev.detail.config;
- this.value = config;
+ this.value = (config as unknown) as T;
}
- private _handleYAMLChanged(ev) {
+ private _handleYAMLChanged(ev: CustomEvent) {
ev.stopPropagation();
const newYaml = ev.detail.value;
if (newYaml !== this.yaml) {
@@ -261,69 +258,43 @@ export class HuiElementEditor extends LitElement {
return;
}
- let type: string;
+ let configElement: LovelaceGenericElementEditor | undefined;
- if (
- this.elementType === "row" &&
- !this.value.type &&
- "entity" in this.value
- ) {
- type = GENERIC_ROW_TYPE;
- } else {
- type = this.value.type!;
- }
-
- let configElement = this._configElement;
try {
this._error = undefined;
this._warnings = undefined;
- if (this._configElType !== type) {
+ if (this._configElementType !== this.configElementType) {
// If the type has changed, we need to load a new GUI editor
- if (!type) {
- throw new Error(`No ${this.elementType} type defined`);
+
+ if (!this.configElementType) {
+ throw new Error(`No type defined`);
}
- let elClass:
- | LovelaceCardConstructor
- | LovelaceRowConstructor
- | undefined;
-
- if (this.elementType === "card") {
- elClass = await getCardElementClass(type);
- } else if (this.elementType === "row" && type !== GENERIC_ROW_TYPE) {
- elClass = await getRowElementClass(type);
- }
+ this._configElementType = this.configElementType;
this._loading = true;
- // Check if a GUI editor exists
- if (elClass && elClass.getConfigElement) {
- configElement = await elClass.getConfigElement();
- } else if (this.elementType === "row" && type === GENERIC_ROW_TYPE) {
- configElement = document.createElement(
- "hui-generic-entity-row-editor"
+ configElement = await this.getConfigElement();
+
+ if (!configElement) {
+ throw new Error(
+ `No visual editor available for: ${this.configElementType}`
);
- } else {
- configElement = undefined;
- throw new GUISupportError(`No visual editor available for: ${type}`);
}
- this._configElement = configElement;
- this._configElType = type;
-
- // Perform final setup
- this._configElement.hass = this.hass;
- if ("lovelace" in this._configElement) {
- this._configElement.lovelace = this.lovelace;
+ configElement.hass = this.hass;
+ if ("lovelace" in configElement) {
+ configElement.lovelace = this.lovelace;
}
- this._configElement.addEventListener("config-changed", (ev) =>
+ configElement.addEventListener("config-changed", (ev) =>
this._handleUIConfigChanged(ev as UIConfigChangedEvent)
);
+
+ this._configElement = configElement;
}
// Setup GUI editor and check that it can handle the current config
try {
- // @ts-ignore
this._configElement!.setConfig(this.value);
} catch (err) {
throw new GUISupportError(
@@ -379,9 +350,3 @@ export class HuiElementEditor extends LitElement {
`;
}
}
-
-declare global {
- interface HTMLElementTagNameMap {
- "hui-element-editor": HuiElementEditor;
- }
-}
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index 0e6a42bdb8..f24359cb42 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -25,6 +25,14 @@ import { sortableStyles } from "../../../resources/ha-sortable-style";
import { HomeAssistant } from "../../../types";
import { EntityConfig, LovelaceRowConfig } from "../entity-rows/types";
+declare global {
+ interface HASSDomEvents {
+ "entities-changed": {
+ entities: LovelaceRowConfig[];
+ };
+ }
+}
+
@customElement("hui-entities-card-row-editor")
export class HuiEntitiesCardRowEditor extends LitElement {
@property({ attribute: false }) protected hass?: HomeAssistant;
@@ -232,8 +240,13 @@ export class HuiEntitiesCardRowEditor extends LitElement {
}
private _editRow(ev: CustomEvent): void {
- fireEvent(this, "edit-row", {
- index: (ev.currentTarget as any).index,
+ const index = (ev.currentTarget as any).index;
+ fireEvent(this, "edit-detail-element", {
+ subElementConfig: {
+ index,
+ type: "row",
+ elementConfig: this.entities![index],
+ },
});
}
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
new file mode 100644
index 0000000000..c382ed0570
--- /dev/null
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -0,0 +1,132 @@
+import "@material/mwc-button";
+import "@material/mwc-icon-button";
+import { mdiArrowLeft } from "@mdi/js";
+import {
+ css,
+ CSSResult,
+ customElement,
+ html,
+ internalProperty,
+ LitElement,
+ property,
+ query,
+ TemplateResult,
+} from "lit-element";
+import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-svg-icon";
+import type { HomeAssistant } from "../../../types";
+import type { LovelaceRowConfig } from "../entity-rows/types";
+import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
+import "./entity-row-editor/hui-row-element-editor";
+import "./header-footer-editor/hui-header-footer-element-editor";
+import type { HuiElementEditor } from "./hui-element-editor";
+import type { GUIModeChangedEvent, SubElementEditorConfig } from "./types";
+
+declare global {
+ interface HASSDomEvents {
+ "go-back": undefined;
+ }
+}
+
+@customElement("hui-sub-element-editor")
+export class HuiSubElementEditor extends LitElement {
+ public hass!: HomeAssistant;
+
+ @property({ attribute: false }) public config!: SubElementEditorConfig;
+
+ @internalProperty() private _guiModeAvailable = true;
+
+ @internalProperty() private _guiMode = true;
+
+ @query(".editor") private _editorElement?: HuiElementEditor<
+ LovelaceRowConfig | LovelaceHeaderFooterConfig
+ >;
+
+ protected render(): TemplateResult {
+ return html`
+
+
+ ${this.config.type === "row"
+ ? html`
+
+
+
${supportsFeature(stateObj, SUPPORT_TURN_ON) &&
- stateObj.state === "off"
+ state === "off" &&
+ !UNAVAILABLE_STATES.includes(state)
? html`
@@ -220,12 +233,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
}
private _computeControlIcon(stateObj: HassEntity): string {
- if (stateObj.state !== "playing") {
- return "hass:play";
- }
-
- // eslint-disable-next-line:no-bitwise
- return supportsFeature(stateObj, SUPPORT_PAUSE)
+ return stateObj.state === "on"
+ ? "hass:play-pause"
+ : stateObj.state !== "playing"
+ ? "hass:play"
+ : supportsFeature(stateObj, SUPPORT_PAUSE)
? "hass:pause"
: "hass:stop";
}
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index e7baf8a427..b3db6ba6ad 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -109,6 +109,7 @@ class LovelacePanel extends LitElement {
if (state === "error") {
return html`
`
: ""}
@@ -609,6 +613,8 @@ class HUIRoot extends LitElement {
text: this.hass!.localize(
"ui.panel.lovelace.reload_resources.refresh_body"
),
+ confirmText: this.hass.localize("ui.common.refresh"),
+ dismissText: this.hass.localize("ui.common.not_now"),
confirm: () => location.reload(),
});
}
@@ -798,14 +804,20 @@ class HUIRoot extends LitElement {
width: 100%;
height: 100%;
margin-left: 4px;
+ }
+ paper-tabs {
+ margin-left: 12px;
+ margin-left: max(env(safe-area-inset-left), 12px);
+ margin-right: env(safe-area-inset-right);
+ }
+ ha-tabs,
+ paper-tabs {
--paper-tabs-selection-bar-color: var(--text-primary-color, #fff);
text-transform: uppercase;
}
- .edit-mode ha-tabs {
- margin-left: max(env(safe-area-inset-left), 24px);
- margin-right: max(env(safe-area-inset-right), 24px);
- }
- .edit-mode {
+
+ .edit-mode app-header,
+ .edit-mode app-toolbar {
background-color: var(--dark-color, #455a64);
color: var(--text-dark-color);
}
@@ -850,6 +862,12 @@ class HUIRoot extends LitElement {
position: relative;
display: flex;
}
+ /**
+ * In edit mode we have the tab bar on a new line *
+ */
+ .edit-mode #view {
+ min-height: calc(100vh - var(--header-height) - 48px);
+ }
#view > * {
/**
* The view could get larger than the window in Firefox
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index b6e52a3d1c..437fd58fa2 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -49,6 +49,16 @@ export interface LovelaceCardConstructor extends Constructor[[localize('panel.shopping_list')]]
-
-
-
-
- [[localize('ui.panel.shopping-list.microphone_tip')]]
-
- ${this.hass.localize("panel.shopping_list")}
+ ${this._conversation(this.hass.config.components)
+ ? html`
+
+
+
+ ${this._card}
+
+