Merge pull request #9483 from home-assistant/dev

This commit is contained in:
Bram Kragten 2021-06-30 12:17:54 +02:00 committed by GitHub
commit 7bab245073
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
138 changed files with 8421 additions and 4157 deletions

View File

@ -6,7 +6,6 @@ on:
- published - published
env: env:
WHEELS_TAG: 3.8-alpine3.12
PYTHON_VERSION: 3.8 PYTHON_VERSION: 3.8
NODE_VERSION: 12.1 NODE_VERSION: 12.1
@ -64,6 +63,9 @@ jobs:
strategy: strategy:
matrix: matrix:
arch: ["aarch64", "armhf", "armv7", "amd64", "i386"] arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
tag:
- "3.8-alpine3.12"
- "3.9-alpine3.13"
steps: steps:
- name: Download requirements.txt - name: Download requirements.txt
uses: actions/download-artifact@v2 uses: actions/download-artifact@v2
@ -73,7 +75,7 @@ jobs:
- name: Build wheels - name: Build wheels
uses: home-assistant/wheels@master uses: home-assistant/wheels@master
with: with:
tag: ${{ env.WHEELS_TAG }} tag: ${{ matrix.tag }}
arch: ${{ matrix.arch }} arch: ${{ matrix.arch }}
wheels-host: ${{ secrets.WHEELS_HOST }} wheels-host: ${{ secrets.WHEELS_HOST }}
wheels-key: ${{ secrets.WHEELS_KEY }} wheels-key: ${{ secrets.WHEELS_KEY }}

View File

@ -5,8 +5,6 @@ const paths = require("./paths.js");
// Files from NPM Packages that should not be imported // Files from NPM Packages that should not be imported
module.exports.ignorePackages = ({ latestBuild }) => [ module.exports.ignorePackages = ({ latestBuild }) => [
// Bloats bundle and it's not used.
path.resolve(require.resolve("moment"), "../locale"),
// Part of yaml.js and only used for !!js functions that we don't use // Part of yaml.js and only used for !!js functions that we don't use
require.resolve("esprima"), require.resolve("esprima"),
]; ];

View File

@ -1,4 +1,5 @@
// Tasks to run webpack. // Tasks to run webpack.
const fs = require("fs");
const gulp = require("gulp"); const gulp = require("gulp");
const webpack = require("webpack"); const webpack = require("webpack");
const WebpackDevServer = require("webpack-dev-server"); const WebpackDevServer = require("webpack-dev-server");
@ -18,6 +19,13 @@ const bothBuilds = (createConfigFunc, params) => [
createConfigFunc({ ...params, latestBuild: false }), createConfigFunc({ ...params, latestBuild: false }),
]; ];
const isWsl =
fs.existsSync("/proc/version") &&
fs
.readFileSync("/proc/version", "utf-8")
.toLocaleLowerCase()
.includes("microsoft");
/** /**
* @param {{ * @param {{
* compiler: import("webpack").Compiler, * compiler: import("webpack").Compiler,
@ -78,10 +86,11 @@ const prodBuild = (conf) =>
gulp.task("webpack-watch-app", () => { gulp.task("webpack-watch-app", () => {
// This command will run forever because we don't close compiler // This command will run forever because we don't close compiler
webpack(createAppConfig({ isProdBuild: false, latestBuild: true })).watch( webpack(
{ ignored: /build-translations/ }, process.env.ES5
doneHandler() ? bothBuilds(createAppConfig, { isProdBuild: false })
); : createAppConfig({ isProdBuild: false, latestBuild: true })
).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
gulp.watch( gulp.watch(
path.join(paths.translations_src, "en.json"), path.join(paths.translations_src, "en.json"),
gulp.series("build-translations", "copy-translations-app") gulp.series("build-translations", "copy-translations-app")
@ -137,7 +146,7 @@ gulp.task("webpack-watch-hassio", () => {
isProdBuild: false, isProdBuild: false,
latestBuild: true, latestBuild: true,
}) })
).watch({ ignored: /build-translations/ }, doneHandler()); ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
gulp.watch( gulp.watch(
path.join(paths.translations_src, "en.json"), path.join(paths.translations_src, "en.json"),

View File

@ -134,7 +134,7 @@ class HassioAddonConfig extends LitElement {
></ha-form>` ></ha-form>`
: html` <ha-yaml-editor : html` <ha-yaml-editor
@value-changed=${this._configChanged} @value-changed=${this._configChanged}
.schema=${ADDON_YAML_SCHEMA} .yamlSchema=${ADDON_YAML_SCHEMA}
></ha-yaml-editor>`} ></ha-yaml-editor>`}
${this._error ? html` <div class="errors">${this._error}</div> ` : ""} ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
${!this._yamlMode || ${!this._yamlMode ||
@ -269,6 +269,9 @@ class HassioAddonConfig extends LitElement {
private async _saveTapped(ev: CustomEvent): Promise<void> { private async _saveTapped(ev: CustomEvent): Promise<void> {
const button = ev.currentTarget as any; const button = ev.currentTarget as any;
const options: Record<string, unknown> = this._yamlMode
? this._editor?.value
: this._options;
const eventdata = { const eventdata = {
success: true, success: true,
response: undefined, response: undefined,
@ -282,13 +285,13 @@ class HassioAddonConfig extends LitElement {
const validation = await validateHassioAddonOption( const validation = await validateHassioAddonOption(
this.hass, this.hass,
this.addon.slug, this.addon.slug,
this._editor?.value options
); );
if (!validation.valid) { if (!validation.valid) {
throw Error(validation.message); throw Error(validation.message);
} }
await setHassioAddonOption(this.hass, this.addon.slug, { await setHassioAddonOption(this.hass, this.addon.slug, {
options: this._yamlMode ? this._editor?.value : this._options, options,
}); });
this._configHasChanged = false; this._configHasChanged = false;

View File

@ -892,10 +892,19 @@ class HassioAddonInfo extends LitElement {
private async _openChangelog(): Promise<void> { private async _openChangelog(): Promise<void> {
try { try {
const content = await fetchHassioAddonChangelog( let content = await fetchHassioAddonChangelog(this.hass, this.addon.slug);
this.hass, if (
this.addon.slug content.includes(`# ${this.addon.version}`) &&
); content.includes(`# ${this.addon.version_latest}`)
) {
const newcontent = content.split(`# ${this.addon.version}`)[0];
if (newcontent.includes(`# ${this.addon.version_latest}`)) {
// Only change the content if the new version still exist
// if the changelog does not have the newests version on top
// this will not be true, and we don't modify the content
content = newcontent;
}
}
showHassioMarkdownDialog(this, { showHassioMarkdownDialog(this, {
title: this.supervisor.localize("addon.dashboard.changelog"), title: this.supervisor.localize("addon.dashboard.changelog"),
content, content,

View File

@ -29,7 +29,6 @@ class SupervisorFormfieldLabel extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
} }

View File

@ -5,6 +5,7 @@ import { customElement, property } from "lit/decorators";
import { atLeastVersion } from "../../../src/common/config/version"; import { atLeastVersion } from "../../../src/common/config/version";
import { formatDate } from "../../../src/common/datetime/format_date"; import { formatDate } from "../../../src/common/datetime/format_date";
import { formatDateTime } from "../../../src/common/datetime/format_date_time"; import { formatDateTime } from "../../../src/common/datetime/format_date_time";
import { LocalizeFunc } from "../../../src/common/translations/localize";
import "../../../src/components/ha-checkbox"; import "../../../src/components/ha-checkbox";
import "../../../src/components/ha-formfield"; import "../../../src/components/ha-formfield";
import "../../../src/components/ha-radio"; import "../../../src/components/ha-radio";
@ -67,6 +68,8 @@ const _computeAddons = (addons): AddonCheckboxItem[] =>
export class SupervisorSnapshotContent extends LitElement { export class SupervisorSnapshotContent extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public localize?: LocalizeFunc;
@property({ attribute: false }) public supervisor?: Supervisor; @property({ attribute: false }) public supervisor?: Supervisor;
@property({ attribute: false }) public snapshot?: HassioSnapshotDetail; @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
@ -81,10 +84,14 @@ export class SupervisorSnapshotContent extends LitElement {
@property({ type: Boolean }) public snapshotHasPassword = false; @property({ type: Boolean }) public snapshotHasPassword = false;
@property({ type: Boolean }) public onboarding = false;
@property() public snapshotName = ""; @property() public snapshotName = "";
@property() public snapshotPassword = ""; @property() public snapshotPassword = "";
@property() public confirmSnapshotPassword = "";
public willUpdate(changedProps) { public willUpdate(changedProps) {
super.willUpdate(changedProps); super.willUpdate(changedProps);
if (!this.hasUpdated) { if (!this.hasUpdated) {
@ -104,8 +111,12 @@ export class SupervisorSnapshotContent extends LitElement {
} }
} }
private _localize = (string: string) =>
this.supervisor?.localize(`snapshot.${string}`) ||
this.localize!(`ui.panel.page-onboarding.restore.${string}`);
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.supervisor) { if (!this.onboarding && !this.supervisor) {
return html``; return html``;
} }
const foldersSection = const foldersSection =
@ -117,14 +128,16 @@ export class SupervisorSnapshotContent extends LitElement {
${this.snapshot ${this.snapshot
? html`<div class="details"> ? html`<div class="details">
${this.snapshot.type === "full" ${this.snapshot.type === "full"
? this.supervisor.localize("snapshot.full_snapshot") ? this._localize("full_snapshot")
: this.supervisor.localize("snapshot.partial_snapshot")} : this._localize("partial_snapshot")}
(${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br /> (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
${formatDateTime(new Date(this.snapshot.date), this.hass.locale)} ${this.hass
? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
: this.snapshot.date}
</div>` </div>`
: html`<paper-input : html`<paper-input
name="snapshotName" name="snapshotName"
.label=${this.supervisor.localize("snapshot.name")} .label=${this.supervisor?.localize("snapshot.name") || "Name"}
.value=${this.snapshotName} .value=${this.snapshotName}
@value-changed=${this._handleTextValueChanged} @value-changed=${this._handleTextValueChanged}
> >
@ -132,13 +145,11 @@ export class SupervisorSnapshotContent extends LitElement {
${!this.snapshot || this.snapshot.type === "full" ${!this.snapshot || this.snapshot.type === "full"
? html`<div class="sub-header"> ? html`<div class="sub-header">
${!this.snapshot ${!this.snapshot
? this.supervisor.localize("snapshot.type") ? this._localize("type")
: this.supervisor.localize("snapshot.select_type")} : this._localize("select_type")}
</div> </div>
<div class="snapshot-types"> <div class="snapshot-types">
<ha-formfield <ha-formfield .label=${this._localize("full_snapshot")}>
.label=${this.supervisor.localize("snapshot.full_snapshot")}
>
<ha-radio <ha-radio
@change=${this._handleRadioValueChanged} @change=${this._handleRadioValueChanged}
value="full" value="full"
@ -147,9 +158,7 @@ export class SupervisorSnapshotContent extends LitElement {
> >
</ha-radio> </ha-radio>
</ha-formfield> </ha-formfield>
<ha-formfield <ha-formfield .label=${this._localize("partial_snapshot")}>
.label=${this.supervisor!.localize("snapshot.partial_snapshot")}
>
<ha-radio <ha-radio
@change=${this._handleRadioValueChanged} @change=${this._handleRadioValueChanged}
value="partial" value="partial"
@ -160,9 +169,9 @@ export class SupervisorSnapshotContent extends LitElement {
</ha-formfield> </ha-formfield>
</div>` </div>`
: ""} : ""}
${this.snapshot && this.snapshotType === "partial" ${this.snapshotType === "partial"
? html` ? html`<div class="partial-picker">
${this.snapshot.homeassistant ${this.snapshot && this.snapshot.homeassistant
? html` ? html`
<ha-formfield <ha-formfield
.label=${html`<supervisor-formfield-label .label=${html`<supervisor-formfield-label
@ -182,15 +191,11 @@ export class SupervisorSnapshotContent extends LitElement {
</ha-formfield> </ha-formfield>
` `
: ""} : ""}
`
: ""}
${this.snapshotType === "partial"
? html`
${foldersSection?.templates.length ${foldersSection?.templates.length
? html` ? html`
<ha-formfield <ha-formfield
.label=${html`<supervisor-formfield-label .label=${html`<supervisor-formfield-label
.label=${this.supervisor.localize("snapshot.folders")} .label=${this._localize("folders")}
.iconPath=${mdiFolder} .iconPath=${mdiFolder}
> >
</supervisor-formfield-label>`} </supervisor-formfield-label>`}
@ -210,7 +215,7 @@ export class SupervisorSnapshotContent extends LitElement {
? html` ? html`
<ha-formfield <ha-formfield
.label=${html`<supervisor-formfield-label .label=${html`<supervisor-formfield-label
.label=${this.supervisor.localize("snapshot.addons")} .label=${this._localize("addons")}
.iconPath=${mdiPuzzle} .iconPath=${mdiPuzzle}
> >
</supervisor-formfield-label>`} </supervisor-formfield-label>`}
@ -226,29 +231,44 @@ export class SupervisorSnapshotContent extends LitElement {
<div class="section-content">${addonsSection.templates}</div> <div class="section-content">${addonsSection.templates}</div>
` `
: ""} : ""}
` </div> `
: ""}
${this.snapshotType === "partial" &&
(!this.snapshot || this.snapshotHasPassword)
? html`<hr />`
: ""} : ""}
${!this.snapshot ${!this.snapshot
? html`<ha-formfield ? html`<ha-formfield
.label=${this.supervisor.localize("snapshot.password_protection")} class="password"
.label=${this._localize("password_protection")}
> >
<ha-checkbox <ha-checkbox
.checked=${this.snapshotHasPassword} .checked=${this.snapshotHasPassword}
@change=${this._toggleHasPassword} @change=${this._toggleHasPassword}
> >
</ha-checkbox </ha-checkbox>
></ha-formfield>` </ha-formfield>`
: ""} : ""}
${this.snapshotHasPassword ${this.snapshotHasPassword
? html` ? html`
<paper-input <paper-input
.label=${this.supervisor.localize("snapshot.password")} .label=${this._localize("password")}
type="password" type="password"
name="snapshotPassword" name="snapshotPassword"
.value=${this.snapshotPassword} .value=${this.snapshotPassword}
@value-changed=${this._handleTextValueChanged} @value-changed=${this._handleTextValueChanged}
> >
</paper-input> </paper-input>
${!this.snapshot
? html` <paper-input
.label=${this.supervisor?.localize("confirm_password")}
type="password"
name="confirmSnapshotPassword"
.value=${this.confirmSnapshotPassword}
@value-changed=${this._handleTextValueChanged}
>
</paper-input>`
: ""}
` `
: ""} : ""}
`; `;
@ -256,21 +276,24 @@ export class SupervisorSnapshotContent extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-checkbox { .partial-picker ha-formfield {
--mdc-checkbox-touch-target-size: 16px;
display: block; display: block;
margin: 4px 12px 8px 0;
} }
ha-formfield { .partial-picker ha-checkbox {
display: contents; --mdc-checkbox-touch-target-size: 32px;
}
.partial-picker {
display: block;
margin: 0px -6px;
} }
supervisor-formfield-label { supervisor-formfield-label {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
paper-input[type="password"] { hr {
display: block; border-color: var(--divider-color);
margin: 4px 0 4px 16px; border-bottom: none;
margin: 16px 0;
} }
.details { .details {
color: var(--secondary-text-color); color: var(--secondary-text-color);
@ -278,13 +301,15 @@ export class SupervisorSnapshotContent extends LitElement {
.section-content { .section-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-left: 16px; margin-left: 30px;
} }
.security { ha-formfield.password {
margin-top: 16px; display: block;
margin: 0 -14px -16px;
} }
.snapshot-types { .snapshot-types {
display: flex; display: flex;
margin-left: -13px;
} }
.sub-header { .sub-header {
margin-top: 8px; margin-top: 8px;
@ -303,6 +328,9 @@ export class SupervisorSnapshotContent extends LitElement {
if (this.snapshotHasPassword) { if (this.snapshotHasPassword) {
data.password = this.snapshotPassword; data.password = this.snapshotPassword;
if (!this.snapshot) {
data.confirm_password = this.confirmSnapshotPassword;
}
} }
if (this.snapshotType === "full") { if (this.snapshotType === "full") {
@ -334,7 +362,7 @@ export class SupervisorSnapshotContent extends LitElement {
const addons = const addons =
section === "addons" section === "addons"
? new Map( ? new Map(
this.supervisor!.addon.addons.map((item) => [item.slug, item]) this.supervisor?.addon.addons.map((item) => [item.slug, item])
) )
: undefined; : undefined;
let checkedItems = 0; let checkedItems = 0;
@ -344,6 +372,7 @@ export class SupervisorSnapshotContent extends LitElement {
.label=${item.name} .label=${item.name}
.iconPath=${section === "addons" ? mdiPuzzle : mdiFolder} .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
.imageUrl=${section === "addons" && .imageUrl=${section === "addons" &&
!this.onboarding &&
atLeastVersion(this.hass.config.version, 0, 105) && atLeastVersion(this.hass.config.version, 0, 105) &&
addons?.get(item.slug)?.icon addons?.get(item.slug)?.icon
? `/api/hassio/addons/${item.slug}/icon` ? `/api/hassio/addons/${item.slug}/icon`

View File

@ -86,7 +86,7 @@ export class HassioUpdate extends LitElement {
"hassio/supervisor/update", "hassio/supervisor/update",
`https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}` `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
)} )}
${this.supervisor.host.features.includes("hassos") ${this.supervisor.host.features.includes("haos")
? this._renderUpdateCard( ? this._renderUpdateCard(
"Operating System", "Operating System",
"os", "os",

View File

@ -0,0 +1,194 @@
import { mdiClose } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../src/common/dom/fire_event";
import "../../../../src/common/search/search-input";
import { compare } from "../../../../src/common/string/compare";
import "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-expansion-panel";
import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
import { dump } from "../../../../src/resources/js-yaml-dump";
import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types";
import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
const _filterDevices = memoizeOne(
(showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
hardware.devices
.filter(
(device) =>
(showAdvanced ||
["tty", "gpio", "input"].includes(device.subsystem)) &&
(device.by_id?.toLowerCase().includes(filter) ||
device.name.toLowerCase().includes(filter) ||
device.dev_path.toLocaleLowerCase().includes(filter) ||
JSON.stringify(device.attributes)
.toLocaleLowerCase()
.includes(filter))
)
.sort((a, b) => compare(a.name, b.name))
);
@customElement("dialog-hassio-hardware")
class HassioHardwareDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _dialogParams?: HassioHardwareDialogParams;
@state() private _filter?: string;
public showDialog(params: HassioHardwareDialogParams) {
this._dialogParams = params;
}
public closeDialog() {
this._dialogParams = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._dialogParams) {
return html``;
}
const devices = _filterDevices(
this.hass.userData?.showAdvanced || false,
this._dialogParams.hardware,
(this._filter || "").toLowerCase()
);
return html`
<ha-dialog
open
scrimClickAction
hideActions
@closed=${this.closeDialog}
.heading=${true}
>
<div class="header" slot="heading">
<h2>
${this._dialogParams.supervisor.localize("dialog.hardware.title")}
</h2>
<mwc-icon-button dialogAction="close">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
<search-input
autofocus
no-label-float
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
.label=${this._dialogParams.supervisor.localize(
"dialog.hardware.search"
)}
>
</search-input>
</div>
${devices.map(
(device) =>
html`<ha-expansion-panel
.header=${device.name}
.secondary=${device.by_id || undefined}
outlined
>
<div class="device-property">
<span>
${this._dialogParams!.supervisor.localize(
"dialog.hardware.subsystem"
)}:
</span>
<span>${device.subsystem}</span>
</div>
<div class="device-property">
<span>
${this._dialogParams!.supervisor.localize(
"dialog.hardware.device_path"
)}:
</span>
<code>${device.dev_path}</code>
</div>
${device.by_id
? html` <div class="device-property">
<span>
${this._dialogParams!.supervisor.localize(
"dialog.hardware.id"
)}:
</span>
<code>${device.by_id}</code>
</div>`
: ""}
<div class="attributes">
<span>
${this._dialogParams!.supervisor.localize(
"dialog.hardware.attributes"
)}:
</span>
<pre>${dump(device.attributes, { indent: 2 })}</pre>
</div>
</ha-expansion-panel>`
)}
</ha-dialog>
`;
}
private _handleSearchChange(ev: CustomEvent) {
this._filter = ev.detail.value;
}
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,
css`
mwc-icon-button {
position: absolute;
right: 16px;
top: 10px;
text-decoration: none;
color: var(--primary-text-color);
}
h2 {
margin: 18px 42px 0 18px;
color: var(--primary-text-color);
}
ha-expansion-panel {
margin: 4px 0;
}
pre,
code {
background-color: var(--markdown-code-background-color, none);
border-radius: 3px;
}
pre {
padding: 16px;
overflow: auto;
line-height: 1.45;
font-family: var(--code-font-family, monospace);
}
code {
font-size: 85%;
padding: 0.2em 0.4em;
}
search-input {
margin: 0 16px;
display: block;
}
.device-property {
display: flex;
justify-content: space-between;
}
.attributes {
margin-top: 12px;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-hassio-hardware": HassioHardwareDialog;
}
}

View File

@ -0,0 +1,19 @@
import { fireEvent } from "../../../../src/common/dom/fire_event";
import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
import { Supervisor } from "../../../../src/data/supervisor/supervisor";
export interface HassioHardwareDialogParams {
supervisor: Supervisor;
hardware: HassioHardwareInfo;
}
export const showHassioHardwareDialog = (
element: HTMLElement,
dialogParams: HassioHardwareDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-hassio-hardware",
dialogImport: () => import("./dialog-hassio-hardware"),
dialogParams,
});
};

View File

@ -95,16 +95,25 @@ class HassioCreateSnapshotDialog extends LitElement {
this._creatingSnapshot = true; this._creatingSnapshot = true;
this._error = ""; this._error = "";
if ( if (snapshotDetails.password && !snapshotDetails.password.length) {
this._snapshotContent.snapshotHasPassword &&
!this._snapshotContent.snapshotPassword.length
) {
this._error = this._dialogParams!.supervisor.localize( this._error = this._dialogParams!.supervisor.localize(
"snapshot.enter_password" "snapshot.enter_password"
); );
this._creatingSnapshot = false; this._creatingSnapshot = false;
return; return;
} }
if (
snapshotDetails.password &&
snapshotDetails.password !== snapshotDetails.confirm_password
) {
this._error = this._dialogParams!.supervisor.localize(
"snapshot.passwords_not_matching"
);
this._creatingSnapshot = false;
return;
}
delete snapshotDetails.confirm_password;
try { try {
if (this._snapshotContent.snapshotType === "full") { if (this._snapshotContent.snapshotType === "full") {

View File

@ -1,13 +1,13 @@
import { ActionDetail } from "@material/mwc-list"; import { ActionDetail } from "@material/mwc-list";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js"; import { mdiClose, mdiDotsVertical } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import { slugify } from "../../../../src/common/string/slugify"; import { slugify } from "../../../../src/common/string/slugify";
import "../../../../src/components/buttons/ha-progress-button"; import "../../../../src/components/buttons/ha-progress-button";
import "../../../../src/components/ha-button-menu"; import "../../../../src/components/ha-button-menu";
import { createCloseHeading } from "../../../../src/components/ha-dialog"; import "../../../../src/components/ha-header-bar";
import "../../../../src/components/ha-svg-icon"; import "../../../../src/components/ha-svg-icon";
import { getSignedPath } from "../../../../src/data/auth"; import { getSignedPath } from "../../../../src/data/auth";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common"; import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -22,6 +22,7 @@ import {
import { HassDialog } from "../../../../src/dialogs/make-dialog-manager"; import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
import { haStyle, haStyleDialog } from "../../../../src/resources/styles"; import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import { HomeAssistant } from "../../../../src/types"; import { HomeAssistant } from "../../../../src/types";
import { fileDownload } from "../../../../src/util/file_download";
import "../../components/supervisor-snapshot-content"; import "../../components/supervisor-snapshot-content";
import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content"; import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot"; import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
@ -66,14 +67,24 @@ class HassioSnapshotDialog
open open
scrimClickAction scrimClickAction
@closed=${this.closeDialog} @closed=${this.closeDialog}
.heading=${createCloseHeading(this.hass, this._computeName)} .heading=${true}
> >
<div slot="heading">
<ha-header-bar>
<span slot="title">${this._snapshot.name}</span>
<mwc-icon-button slot="actionItems" dialogAction="cancel">
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>
</ha-header-bar>
</div>
${this._restoringSnapshot ${this._restoringSnapshot
? html` <ha-circular-progress active></ha-circular-progress>` ? html` <ha-circular-progress active></ha-circular-progress>`
: html`<supervisor-snapshot-content : html`<supervisor-snapshot-content
.hass=${this.hass} .hass=${this.hass}
.supervisor=${this._dialogParams.supervisor} .supervisor=${this._dialogParams.supervisor}
.snapshot=${this._snapshot} .snapshot=${this._snapshot}
.onboarding=${this._dialogParams.onboarding || false}
.localize=${this._dialogParams.localize}
> >
</supervisor-snapshot-content>`} </supervisor-snapshot-content>`}
${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""} ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
@ -86,18 +97,20 @@ class HassioSnapshotDialog
Restore Restore
</mwc-button> </mwc-button>
<ha-button-menu ${!this._dialogParams.onboarding
fixed ? html`<ha-button-menu
slot="primaryAction" fixed
@action=${this._handleMenuAction} slot="primaryAction"
@closed=${(ev: Event) => ev.stopPropagation()} @action=${this._handleMenuAction}
> @closed=${(ev: Event) => ev.stopPropagation()}
<mwc-icon-button slot="trigger" alt="menu"> >
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon> <mwc-icon-button slot="trigger" alt="menu">
</mwc-icon-button> <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
<mwc-list-item>Download Snapshot</mwc-list-item> </mwc-icon-button>
<mwc-list-item class="error">Delete Snapshot</mwc-list-item> <mwc-list-item>Download Snapshot</mwc-list-item>
</ha-button-menu> <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
</ha-button-menu>`
: ""}
</ha-dialog> </ha-dialog>
`; `;
} }
@ -114,6 +127,12 @@ class HassioSnapshotDialog
display: block; display: block;
text-align: center; text-align: center;
} }
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
display: block;
}
`, `,
]; ];
} }
@ -288,12 +307,11 @@ class HassioSnapshotDialog
} }
} }
const a = document.createElement("a"); fileDownload(
a.href = signedPath.path; this,
a.download = `home_assistant_snapshot_${slugify(this._computeName)}.tar`; signedPath.path,
this.shadowRoot!.appendChild(a); `home_assistant_snapshot_${slugify(this._computeName)}.tar`
a.click(); );
this.shadowRoot!.removeChild(a);
} }
private get _computeName() { private get _computeName() {

View File

@ -1,4 +1,5 @@
import { fireEvent } from "../../../../src/common/dom/fire_event"; import { fireEvent } from "../../../../src/common/dom/fire_event";
import { LocalizeFunc } from "../../../../src/common/translations/localize";
import { Supervisor } from "../../../../src/data/supervisor/supervisor"; import { Supervisor } from "../../../../src/data/supervisor/supervisor";
export interface HassioSnapshotDialogParams { export interface HassioSnapshotDialogParams {
@ -6,6 +7,7 @@ export interface HassioSnapshotDialogParams {
onDelete?: () => void; onDelete?: () => void;
onboarding?: boolean; onboarding?: boolean;
supervisor?: Supervisor; supervisor?: Supervisor;
localize?: LocalizeFunc;
} }
export const showHassioSnapshotDialog = ( export const showHassioSnapshotDialog = (

View File

@ -158,8 +158,8 @@ class DialogSupervisorUpdate extends LitElement {
} catch (err) { } catch (err) {
if (this.hass.connection.connected && !ignoreSupervisorError(err)) { if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
this._error = extractApiErrorMessage(err); this._error = extractApiErrorMessage(err);
this._action = null;
} }
this._action = null;
return; return;
} }

View File

@ -2,7 +2,6 @@ import "@material/mwc-button";
import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { mdiDotsVertical } from "@mdi/js"; import { mdiDotsVertical } from "@mdi/js";
import { dump } from "js-yaml";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
@ -41,8 +40,8 @@ import {
roundWithOneDecimal, roundWithOneDecimal,
} from "../../../src/util/calculate"; } from "../../../src/util/calculate";
import "../components/supervisor-metric"; import "../components/supervisor-metric";
import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
import { showNetworkDialog } from "../dialogs/network/show-dialog-network"; import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
import { hassioStyle } from "../resources/hassio-style"; import { hassioStyle } from "../resources/hassio-style";
@customElement("hassio-host-info") @customElement("hassio-host-info")
@ -114,7 +113,7 @@ class HassioHostInfo extends LitElement {
` `
: ""} : ""}
</ha-settings-row> </ha-settings-row>
${!this.supervisor.host.features.includes("hassos") ${!this.supervisor.host.features.includes("haos")
? html`<ha-settings-row> ? html`<ha-settings-row>
<span slot="heading"> <span slot="heading">
${this.supervisor.localize("system.host.docker_version")} ${this.supervisor.localize("system.host.docker_version")}
@ -191,7 +190,7 @@ class HassioHostInfo extends LitElement {
<mwc-list-item> <mwc-list-item>
${this.supervisor.localize("system.host.hardware")} ${this.supervisor.localize("system.host.hardware")}
</mwc-list-item> </mwc-list-item>
${this.supervisor.host.features.includes("hassos") ${this.supervisor.host.features.includes("haos")
? html`<mwc-list-item> ? html`<mwc-list-item>
${this.supervisor.localize("system.host.import_from_usb")} ${this.supervisor.localize("system.host.import_from_usb")}
</mwc-list-item>` </mwc-list-item>`
@ -229,20 +228,19 @@ class HassioHostInfo extends LitElement {
} }
private async _showHardware(): Promise<void> { private async _showHardware(): Promise<void> {
let hardware;
try { try {
const content = await fetchHassioHardwareInfo(this.hass); hardware = await fetchHassioHardwareInfo(this.hass);
showHassioMarkdownDialog(this, {
title: this.supervisor.localize("system.host.hardware"),
content: `<pre>${dump(content, { indent: 2 })}</pre>`,
});
} catch (err) { } catch (err) {
showAlertDialog(this, { await showAlertDialog(this, {
title: this.supervisor.localize( title: this.supervisor.localize(
"system.host.failed_to_get_hardware_list" "system.host.failed_to_get_hardware_list"
), ),
text: extractApiErrorMessage(err), text: extractApiErrorMessage(err),
}); });
return;
} }
showHassioHardwareDialog(this, { supervisor: this.supervisor, hardware });
} }
private async _hostReboot(ev: CustomEvent): Promise<void> { private async _hostReboot(ev: CustomEvent): Promise<void> {

View File

@ -44,20 +44,21 @@
"@fullcalendar/list": "5.1.0", "@fullcalendar/list": "5.1.0",
"@lit-labs/virtualizer": "^0.6.0", "@lit-labs/virtualizer": "^0.6.0",
"@material/chips": "=12.0.0-canary.1a8d06483.0", "@material/chips": "=12.0.0-canary.1a8d06483.0",
"@material/mwc-button": "canary", "@material/mwc-button": "0.22.0-canary.cc04657a.0",
"@material/mwc-checkbox": "canary", "@material/mwc-checkbox": "0.22.0-canary.cc04657a.0",
"@material/mwc-circular-progress": "canary", "@material/mwc-circular-progress": "0.22.0-canary.cc04657a.0",
"@material/mwc-dialog": "canary", "@material/mwc-dialog": "0.22.0-canary.cc04657a.0",
"@material/mwc-fab": "canary", "@material/mwc-fab": "0.22.0-canary.cc04657a.0",
"@material/mwc-formfield": "canary", "@material/mwc-formfield": "0.22.0-canary.cc04657a.0",
"@material/mwc-icon-button": "canary", "@material/mwc-icon-button": "0.22.0-canary.cc04657a.0",
"@material/mwc-list": "canary", "@material/mwc-linear-progress": "0.22.0-canary.cc04657a.0",
"@material/mwc-menu": "canary", "@material/mwc-list": "0.22.0-canary.cc04657a.0",
"@material/mwc-radio": "canary", "@material/mwc-menu": "0.22.0-canary.cc04657a.0",
"@material/mwc-ripple": "canary", "@material/mwc-radio": "0.22.0-canary.cc04657a.0",
"@material/mwc-switch": "canary", "@material/mwc-ripple": "0.22.0-canary.cc04657a.0",
"@material/mwc-tab": "canary", "@material/mwc-switch": "0.22.0-canary.cc04657a.0",
"@material/mwc-tab-bar": "canary", "@material/mwc-tab": "0.22.0-canary.cc04657a.0",
"@material/mwc-tab-bar": "0.22.0-canary.cc04657a.0",
"@material/top-app-bar": "=12.0.0-canary.1a8d06483.0", "@material/top-app-bar": "=12.0.0-canary.1a8d06483.0",
"@mdi/js": "5.9.55", "@mdi/js": "5.9.55",
"@mdi/svg": "5.9.55", "@mdi/svg": "5.9.55",
@ -66,9 +67,7 @@
"@polymer/iron-autogrow-textarea": "^3.0.1", "@polymer/iron-autogrow-textarea": "^3.0.1",
"@polymer/iron-flex-layout": "^3.0.1", "@polymer/iron-flex-layout": "^3.0.1",
"@polymer/iron-icon": "^3.0.1", "@polymer/iron-icon": "^3.0.1",
"@polymer/iron-image": "^3.0.1",
"@polymer/iron-input": "^3.0.1", "@polymer/iron-input": "^3.0.1",
"@polymer/iron-label": "^3.0.1",
"@polymer/iron-overlay-behavior": "^3.0.2", "@polymer/iron-overlay-behavior": "^3.0.2",
"@polymer/iron-resizable-behavior": "^3.0.1", "@polymer/iron-resizable-behavior": "^3.0.1",
"@polymer/paper-checkbox": "^3.1.0", "@polymer/paper-checkbox": "^3.1.0",
@ -98,11 +97,11 @@
"@vibrant/quantizer-mmcq": "^3.2.1-alpha.1", "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
"@vue/web-component-wrapper": "^1.2.0", "@vue/web-component-wrapper": "^1.2.0",
"@webcomponents/webcomponentsjs": "^2.2.7", "@webcomponents/webcomponentsjs": "^2.2.7",
"chart.js": "^2.9.4", "chart.js": "^3.3.2",
"chartjs-chart-timeline": "^0.4.0",
"comlink": "^4.3.1", "comlink": "^4.3.1",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"cropperjs": "^1.5.11", "cropperjs": "^1.5.11",
"date-fns": "^2.22.1",
"deep-clone-simple": "^1.1.1", "deep-clone-simple": "^1.1.1",
"deep-freeze": "^0.0.1", "deep-freeze": "^0.0.1",
"fecha": "^4.2.0", "fecha": "^4.2.0",

View File

@ -2,7 +2,7 @@ from setuptools import setup, find_packages
setup( setup(
name="home-assistant-frontend", name="home-assistant-frontend",
version="20210603.0", version="20210630.0",
description="The Home Assistant frontend", description="The Home Assistant frontend",
url="https://github.com/home-assistant/home-assistant-polymer", url="https://github.com/home-assistant/home-assistant-polymer",
author="The Home Assistant Authors", author="The Home Assistant Authors",

View File

@ -7,6 +7,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import "./ha-password-manager-polyfill";
import { property, state } from "lit/decorators"; import { property, state } from "lit/decorators";
import "../components/ha-form/ha-form"; import "../components/ha-form/ha-form";
import "../components/ha-markdown"; import "../components/ha-markdown";
@ -20,7 +21,7 @@ import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
type State = "loading" | "error" | "step"; type State = "loading" | "error" | "step";
class HaAuthFlow extends litLocalizeLiteMixin(LitElement) { class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
@property() public authProvider?: AuthProvider; @property({ attribute: false }) public authProvider?: AuthProvider;
@property() public clientId?: string; @property() public clientId?: string;
@ -37,7 +38,15 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
@state() private _errorMessage?: string; @state() private _errorMessage?: string;
protected render() { protected render() {
return html` <form>${this._renderForm()}</form> `; return html`
<form>${this._renderForm()}</form>
<ha-password-manager-polyfill
.step=${this._step}
.stepData=${this._stepData}
@form-submitted=${this._handleSubmit}
@value-changed=${this._stepDataChanged}
></ha-password-manager-polyfill>
`;
} }
protected firstUpdated(changedProps: PropertyValues) { protected firstUpdated(changedProps: PropertyValues) {
@ -231,11 +240,17 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
await this.updateComplete; await this.updateComplete;
// 100ms to give all the form elements time to initialize. // 100ms to give all the form elements time to initialize.
setTimeout(() => { setTimeout(() => {
const form = this.shadowRoot!.querySelector("ha-form"); const form = this.renderRoot.querySelector("ha-form");
if (form) { if (form) {
(form as any).focus(); (form as any).focus();
} }
}, 100); }, 100);
setTimeout(() => {
this.renderRoot.querySelector(
"ha-password-manager-polyfill"
)!.boundingRect = this.getBoundingClientRect();
}, 500);
} }
private _stepDataChanged(ev: CustomEvent) { private _stepDataChanged(ev: CustomEvent) {
@ -329,3 +344,9 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
} }
} }
customElements.define("ha-auth-flow", HaAuthFlow); customElements.define("ha-auth-flow", HaAuthFlow);
declare global {
interface HTMLElementTagNameMap {
"ha-auth-flow": HaAuthFlow;
}
}

View File

@ -0,0 +1,110 @@
import { html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { HaFormSchema } from "../components/ha-form/ha-form";
import { DataEntryFlowStep } from "../data/data_entry_flow";
declare global {
interface HTMLElementTagNameMap {
"ha-password-manager-polyfill": HaPasswordManagerPolyfill;
}
interface HASSDomEvents {
"form-submitted": undefined;
}
}
const ENABLED_HANDLERS = [
"homeassistant",
"legacy_api_password",
"command_line",
];
@customElement("ha-password-manager-polyfill")
export class HaPasswordManagerPolyfill extends LitElement {
@property({ attribute: false }) public step?: DataEntryFlowStep;
@property({ attribute: false }) public stepData: any;
@property({ attribute: false }) public boundingRect?: DOMRect;
protected createRenderRoot() {
// Add under document body so the element isn't placed inside any shadow roots
return document.body;
}
private get styles() {
return `
.password-manager-polyfill {
position: absolute;
top: ${this.boundingRect?.y || 148}px;
left: calc(50% - ${(this.boundingRect?.width || 360) / 2}px);
width: ${this.boundingRect?.width || 360}px;
opacity: 0;
z-index: -1;
}
.password-manager-polyfill input {
width: 100%;
height: 62px;
padding: 0;
border: 0;
}
.password-manager-polyfill input[type="submit"] {
width: 0;
height: 0;
}
`;
}
protected render(): TemplateResult {
if (
this.step &&
this.step.type === "form" &&
this.step.step_id === "init" &&
ENABLED_HANDLERS.includes(this.step.handler[0])
) {
return html`
<form
class="password-manager-polyfill"
aria-hidden="true"
@submit=${this._handleSubmit}
>
${this.step.data_schema.map((input) => this.render_input(input))}
<input type="submit" />
<style>
${this.styles}
</style>
</form>
`;
}
return html``;
}
private render_input(schema: HaFormSchema): TemplateResult | string {
const inputType = schema.name.includes("password") ? "password" : "text";
if (schema.type !== "string") {
return "";
}
return html`
<input
tabindex="-1"
.id=${schema.name}
.type=${inputType}
.value=${this.stepData[schema.name] || ""}
@input=${this._valueChanged}
/>
`;
}
private _handleSubmit(ev: Event) {
ev.preventDefault();
fireEvent(this, "form-submitted");
}
private _valueChanged(ev: Event) {
const target = ev.target! as HTMLInputElement;
this.stepData = { ...this.stepData, [target.id]: target.value };
fireEvent(this, "value-changed", {
value: this.stepData,
});
}
}

View File

@ -0,0 +1,63 @@
export const COLORS = [
"#377eb8",
"#984ea3",
"#00d2d5",
"#ff7f00",
"#af8d00",
"#7f80cd",
"#b3e900",
"#c42e60",
"#a65628",
"#f781bf",
"#8dd3c7",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#fccde5",
"#bc80bd",
"#ffed6f",
"#c4eaff",
"#cf8c00",
"#1b9e77",
"#d95f02",
"#e7298a",
"#e6ab02",
"#a6761d",
"#0097ff",
"#00d067",
"#f43600",
"#4ba93b",
"#5779bb",
"#927acc",
"#97ee3f",
"#bf3947",
"#9f5b00",
"#f48758",
"#8caed6",
"#f2b94f",
"#eff26e",
"#e43872",
"#d9b100",
"#9d7a00",
"#698cff",
"#d9d9d9",
"#00d27e",
"#d06800",
"#009f82",
"#c49200",
"#cbe8ff",
"#fecddf",
"#c27eb6",
"#8cd2ce",
"#c4b8d9",
"#f883b0",
"#a49100",
"#f48800",
"#27d0df",
"#a04a9b",
];
export function getColorByIndex(index: number) {
return COLORS[index % COLORS.length];
}

View File

@ -1,4 +1,4 @@
const luminosity = (rgb: [number, number, number]): number => { export const luminosity = (rgb: [number, number, number]): number => {
// http://www.w3.org/TR/WCAG20/#relativeluminancedef // http://www.w3.org/TR/WCAG20/#relativeluminancedef
const lum: [number, number, number] = [0, 0, 0]; const lum: [number, number, number] = [0, 0, 0];
for (let i = 0; i < rgb.length; i++) { for (let i = 0; i < rgb.length; i++) {

View File

@ -42,6 +42,7 @@ export const FIXED_DOMAIN_ICONS = {
remote: "hass:remote", remote: "hass:remote",
scene: "hass:palette", scene: "hass:palette",
script: "hass:script-text", script: "hass:script-text",
select: "hass:format-list-bulleted",
sensor: "hass:eye", sensor: "hass:eye",
simple_alarm: "hass:bell", simple_alarm: "hass:bell",
sun: "hass:white-balance-sunny", sun: "hass:white-balance-sunny",
@ -83,6 +84,7 @@ export const DOMAINS_WITH_CARD = [
"number", "number",
"scene", "scene",
"script", "script",
"select",
"timer", "timer",
"vacuum", "vacuum",
"water_heater", "water_heater",
@ -121,6 +123,7 @@ export const DOMAINS_HIDE_MORE_INFO = [
"input_text", "input_text",
"number", "number",
"scene", "scene",
"select",
]; ];
/** Domains that should have the history hidden in the more info dialog. */ /** Domains that should have the history hidden in the more info dialog. */

View File

@ -17,6 +17,19 @@ export const formatDate = toLocaleDateStringSupportsOptions
formatDateMem(locale).format(dateObj) formatDateMem(locale).format(dateObj)
: (dateObj: Date) => format(dateObj, "longDate"); : (dateObj: Date) => format(dateObj, "longDate");
const formatDateShortMem = memoizeOne(
(locale: FrontendLocaleData) =>
new Intl.DateTimeFormat(locale.language, {
day: "numeric",
month: "short",
})
);
export const formatDateShort = toLocaleDateStringSupportsOptions
? (dateObj: Date, locale: FrontendLocaleData) =>
formatDateShortMem(locale).format(dateObj)
: (dateObj: Date) => format(dateObj, "shortDate");
const formatDateWeekdayMem = memoizeOne( const formatDateWeekdayMem = memoizeOne(
(locale: FrontendLocaleData) => (locale: FrontendLocaleData) =>
new Intl.DateTimeFormat(locale.language, { new Intl.DateTimeFormat(locale.language, {

View File

@ -6,8 +6,7 @@ export type LeafletDrawModuleType = typeof import("leaflet-draw");
export const setupLeafletMap = async ( export const setupLeafletMap = async (
mapElement: HTMLElement, mapElement: HTMLElement,
darkMode?: boolean, darkMode?: boolean
draw = false
): Promise<[Map, LeafletModuleType, TileLayer]> => { ): Promise<[Map, LeafletModuleType, TileLayer]> => {
if (!mapElement.parentNode) { if (!mapElement.parentNode) {
throw new Error("Cannot setup Leaflet map on disconnected element"); throw new Error("Cannot setup Leaflet map on disconnected element");
@ -17,10 +16,6 @@ export const setupLeafletMap = async (
.default as LeafletModuleType; .default as LeafletModuleType;
Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/"; Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
if (draw) {
await import("leaflet-draw");
}
const map = Leaflet.map(mapElement); const map = Leaflet.map(mapElement);
const style = document.createElement("link"); const style = document.createElement("link");
style.setAttribute("href", "/static/images/leaflet/leaflet.css"); style.setAttribute("href", "/static/images/leaflet/leaflet.css");

View File

@ -29,37 +29,61 @@ export const computeStateDisplay = (
const domain = computeStateDomain(stateObj); const domain = computeStateDomain(stateObj);
if (domain === "input_datetime") { if (domain === "input_datetime") {
let date: Date; if (state) {
if (!stateObj.attributes.has_time) { // If trying to display an explicit state, need to parse the explict state to `Date` then format.
// Attributes aren't available, we have to use `state`.
try {
const components = state.split(" ");
if (components.length === 2) {
// Date and time.
return formatDateTime(new Date(components.join("T")), locale);
}
if (components.length === 1) {
if (state.includes("-")) {
// Date only.
return formatDate(new Date(`${state}T00:00`), locale);
}
if (state.includes(":")) {
// Time only.
const now = new Date();
return formatTime(
new Date(`${now.toISOString().split("T")[0]}T${state}`),
locale
);
}
}
return state;
} catch {
// Formatting methods may throw error if date parsing doesn't go well,
// just return the state string in that case.
return state;
}
} else {
// If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
let date: Date;
if (!stateObj.attributes.has_time) {
date = new Date(
stateObj.attributes.year,
stateObj.attributes.month - 1,
stateObj.attributes.day
);
return formatDate(date, locale);
}
if (!stateObj.attributes.has_date) {
date = new Date();
date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
return formatTime(date, locale);
}
date = new Date( date = new Date(
stateObj.attributes.year, stateObj.attributes.year,
stateObj.attributes.month - 1, stateObj.attributes.month - 1,
stateObj.attributes.day stateObj.attributes.day,
);
return formatDate(date, locale);
}
if (!stateObj.attributes.has_date) {
const now = new Date();
date = new Date(
// Due to bugs.chromium.org/p/chromium/issues/detail?id=797548
// don't use artificial 1970 year.
now.getFullYear(),
now.getMonth(),
now.getDay(),
stateObj.attributes.hour, stateObj.attributes.hour,
stateObj.attributes.minute stateObj.attributes.minute
); );
return formatTime(date, locale); return formatDateTime(date, locale);
} }
date = new Date(
stateObj.attributes.year,
stateObj.attributes.month - 1,
stateObj.attributes.day,
stateObj.attributes.hour,
stateObj.attributes.minute
);
return formatDateTime(date, locale);
} }
if (domain === "humidifier") { if (domain === "humidifier") {

View File

@ -0,0 +1,2 @@
export const clamp = (value: number, min: number, max: number) =>
Math.min(Math.max(value, min), max);

View File

@ -29,31 +29,28 @@ export const iconColorCSS = css`
} }
ha-icon[data-domain="climate"][data-state="cooling"] { ha-icon[data-domain="climate"][data-state="cooling"] {
color: var(--cool-color, #2b9af9); color: var(--cool-color, var(--state-climate-cool-color));
} }
ha-icon[data-domain="climate"][data-state="heating"] { ha-icon[data-domain="climate"][data-state="heating"] {
color: var(--heat-color, #ff8100); color: var(--heat-color, var(--state-climate-heat-color));
} }
ha-icon[data-domain="climate"][data-state="drying"] { ha-icon[data-domain="climate"][data-state="drying"] {
color: var(--dry-color, #efbd07); color: var(--dry-color, var(--state-climate-dry-color));
} }
ha-icon[data-domain="alarm_control_panel"] { ha-icon[data-domain="alarm_control_panel"] {
color: var(--alarm-color-armed, var(--label-badge-red)); color: var(--alarm-color-armed, var(--label-badge-red));
} }
ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] { ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
color: var(--alarm-color-disarmed, var(--label-badge-green)); color: var(--alarm-color-disarmed, var(--label-badge-green));
} }
ha-icon[data-domain="alarm_control_panel"][data-state="pending"], ha-icon[data-domain="alarm_control_panel"][data-state="pending"],
ha-icon[data-domain="alarm_control_panel"][data-state="arming"] { ha-icon[data-domain="alarm_control_panel"][data-state="arming"] {
color: var(--alarm-color-pending, var(--label-badge-yellow)); color: var(--alarm-color-pending, var(--label-badge-yellow));
animation: pulse 1s infinite; animation: pulse 1s infinite;
} }
ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] { ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
color: var(--alarm-color-triggered, var(--label-badge-red)); color: var(--alarm-color-triggered, var(--label-badge-red));
animation: pulse 1s infinite; animation: pulse 1s infinite;
@ -73,11 +70,11 @@ export const iconColorCSS = css`
ha-icon[data-domain="plant"][data-state="problem"], ha-icon[data-domain="plant"][data-state="problem"],
ha-icon[data-domain="zwave"][data-state="dead"] { ha-icon[data-domain="zwave"][data-state="dead"] {
color: var(--error-state-color, #db4437); color: var(--state-icon-error-color);
} }
/* Color the icon if unavailable */ /* Color the icon if unavailable */
ha-icon[data-state="unavailable"] { ha-icon[data-state="unavailable"] {
color: var(--state-icon-unavailable-color); color: var(--state-unavailable-color);
} }
`; `;

View File

@ -5,32 +5,20 @@
// as much as it can, without ever going more than once per `wait` duration; // as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass // but if you'd like to disable the execution on the leading edge, pass
// `false for leading`. To disable execution on the trailing edge, ditto. // `false for leading`. To disable execution on the trailing edge, ditto.
export const throttle = <T extends (...args) => unknown>( export const throttle = <T extends any[]>(
func: T, func: (...args: T) => void,
wait: number, wait: number,
leading = true, leading = true,
trailing = true trailing = true
): T => { ) => {
let timeout: number | undefined; let timeout: number | undefined;
let previous = 0; let previous = 0;
let context: any; return (...args: T): void => {
let args: any; const later = () => {
const later = () => { previous = leading === false ? 0 : Date.now();
previous = leading === false ? 0 : Date.now(); timeout = undefined;
timeout = undefined; func(...args);
func.apply(context, args); };
if (!timeout) {
context = null;
args = null;
}
};
// @ts-ignore
return function (...argmnts) {
// @ts-ignore
// @typescript-eslint/no-this-alias
context = this;
args = argmnts;
const now = Date.now(); const now = Date.now();
if (!previous && leading === false) { if (!previous && leading === false) {
previous = now; previous = now;
@ -42,7 +30,7 @@ export const throttle = <T extends (...args) => unknown>(
timeout = undefined; timeout = undefined;
} }
previous = now; previous = now;
func.apply(context, args); func(...args);
} else if (!timeout && trailing !== false) { } else if (!timeout && trailing !== false) {
timeout = window.setTimeout(later, remaining); timeout = window.setTimeout(later, remaining);
} }

View File

@ -0,0 +1,197 @@
import { _adapters } from "chart.js";
import {
startOfSecond,
startOfMinute,
startOfHour,
startOfDay,
startOfWeek,
startOfMonth,
startOfQuarter,
startOfYear,
addMilliseconds,
addSeconds,
addMinutes,
addHours,
addDays,
addWeeks,
addMonths,
addQuarters,
addYears,
differenceInMilliseconds,
differenceInSeconds,
differenceInMinutes,
differenceInHours,
differenceInDays,
differenceInWeeks,
differenceInMonths,
differenceInQuarters,
differenceInYears,
endOfSecond,
endOfMinute,
endOfHour,
endOfDay,
endOfWeek,
endOfMonth,
endOfQuarter,
endOfYear,
} from "date-fns";
import { formatDate, formatDateShort } from "../../common/datetime/format_date";
import {
formatDateTime,
formatDateTimeWithSeconds,
} from "../../common/datetime/format_date_time";
import {
formatTime,
formatTimeWithSeconds,
} from "../../common/datetime/format_time";
const FORMATS = {
datetime: "datetime",
datetimeseconds: "datetimeseconds",
millisecond: "millisecond",
second: "second",
minute: "minute",
hour: "hour",
day: "day",
week: "week",
month: "month",
quarter: "quarter",
year: "year",
};
_adapters._date.override({
formats: () => FORMATS,
parse: (value: Date | number) => {
if (!(value instanceof Date)) {
return value;
}
return value.getTime();
},
format: function (time, fmt: keyof typeof FORMATS) {
switch (fmt) {
case "datetime":
return formatDateTime(new Date(time), this.options.locale);
case "datetimeseconds":
return formatDateTimeWithSeconds(new Date(time), this.options.locale);
case "millisecond":
return formatTimeWithSeconds(new Date(time), this.options.locale);
case "second":
return formatTimeWithSeconds(new Date(time), this.options.locale);
case "minute":
return formatTime(new Date(time), this.options.locale);
case "hour":
return formatTime(new Date(time), this.options.locale);
case "day":
return formatDateShort(new Date(time), this.options.locale);
case "week":
return formatDate(new Date(time), this.options.locale);
case "month":
return formatDate(new Date(time), this.options.locale);
case "quarter":
return formatDate(new Date(time), this.options.locale);
case "year":
return formatDate(new Date(time), this.options.locale);
default:
return "";
}
},
// @ts-ignore
add: (time, amount, unit) => {
switch (unit) {
case "millisecond":
return addMilliseconds(time, amount);
case "second":
return addSeconds(time, amount);
case "minute":
return addMinutes(time, amount);
case "hour":
return addHours(time, amount);
case "day":
return addDays(time, amount);
case "week":
return addWeeks(time, amount);
case "month":
return addMonths(time, amount);
case "quarter":
return addQuarters(time, amount);
case "year":
return addYears(time, amount);
default:
return time;
}
},
diff: (max, min, unit) => {
switch (unit) {
case "millisecond":
return differenceInMilliseconds(max, min);
case "second":
return differenceInSeconds(max, min);
case "minute":
return differenceInMinutes(max, min);
case "hour":
return differenceInHours(max, min);
case "day":
return differenceInDays(max, min);
case "week":
return differenceInWeeks(max, min);
case "month":
return differenceInMonths(max, min);
case "quarter":
return differenceInQuarters(max, min);
case "year":
return differenceInYears(max, min);
default:
return 0;
}
},
// @ts-ignore
startOf: (time, unit, weekday) => {
switch (unit) {
case "second":
return startOfSecond(time);
case "minute":
return startOfMinute(time);
case "hour":
return startOfHour(time);
case "day":
return startOfDay(time);
case "week":
return startOfWeek(time);
case "isoWeek":
return startOfWeek(time, {
weekStartsOn: +weekday! as 0 | 1 | 2 | 3 | 4 | 5 | 6,
});
case "month":
return startOfMonth(time);
case "quarter":
return startOfQuarter(time);
case "year":
return startOfYear(time);
default:
return time;
}
},
// @ts-ignore
endOf: (time, unit) => {
switch (unit) {
case "second":
return endOfSecond(time);
case "minute":
return endOfMinute(time);
case "hour":
return endOfHour(time);
case "day":
return endOfDay(time);
case "week":
return endOfWeek(time);
case "month":
return endOfMonth(time);
case "quarter":
return endOfQuarter(time);
case "year":
return endOfYear(time);
default:
return time;
}
},
});

View File

@ -0,0 +1,315 @@
import type {
Chart,
ChartType,
ChartData,
ChartOptions,
TooltipModel,
} from "chart.js";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map";
import { clamp } from "../../common/number/clamp";
interface Tooltip extends TooltipModel<any> {
top: string;
left: string;
}
@customElement("ha-chart-base")
export default class HaChartBase extends LitElement {
public chart?: Chart;
@property()
public chartType: ChartType = "line";
@property({ attribute: false })
public data: ChartData = { datasets: [] };
@property({ attribute: false })
public options?: ChartOptions;
@state() private _tooltip?: Tooltip;
@state() private _height?: string;
@state() private _hiddenDatasets: Set<number> = new Set();
protected firstUpdated() {
this._setupChart();
this.data.datasets.forEach((dataset, index) => {
if (dataset.hidden) {
this._hiddenDatasets.add(index);
}
});
}
public willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (!this.hasUpdated || !this.chart) {
return;
}
if (changedProps.has("type")) {
this.chart.config.type = this.chartType;
}
if (changedProps.has("data")) {
this.chart.data = this.data;
}
if (changedProps.has("options")) {
this.chart.options = this._createOptions();
}
this.chart.update("none");
}
protected render() {
return html`
${this.options?.plugins?.legend?.display === true
? html` <div class="chartLegend">
<ul>
${this.data.datasets.map(
(dataset, index) => html`<li
.datasetIndex=${index}
@click=${this._legendClick}
class=${classMap({
hidden: this._hiddenDatasets.has(index),
})}
>
<div
class="bullet"
style=${styleMap({
backgroundColor: dataset.backgroundColor as string,
borderColor: dataset.borderColor as string,
})}
></div>
${dataset.label}
</li>`
)}
</ul>
</div>`
: ""}
<div
class="chartContainer"
style=${styleMap({
height:
this.chartType === "timeline"
? `${this.data.datasets.length * 30 + 30}px`
: this._height,
overflow: this._height ? "initial" : "hidden",
})}
>
<canvas></canvas>
${this._tooltip
? html`<div
class="chartTooltip ${classMap({ [this._tooltip.yAlign]: true })}"
style=${styleMap({
top: this._tooltip.top,
left: this._tooltip.left,
})}
>
<div class="title">${this._tooltip.title}</div>
${this._tooltip.beforeBody
? html`<div class="beforeBody">
${this._tooltip.beforeBody}
</div>`
: ""}
<div>
<ul>
${this._tooltip.body.map(
(item, i) => html`<li>
<div
class="bullet"
style=${styleMap({
backgroundColor: this._tooltip!.labelColors[i]
.backgroundColor as string,
borderColor: this._tooltip!.labelColors[i]
.borderColor as string,
})}
></div>
${item.lines.join("\n")}
</li>`
)}
</ul>
</div>
</div>`
: ""}
</div>
`;
}
private async _setupChart() {
const ctx: CanvasRenderingContext2D = this.renderRoot
.querySelector("canvas")!
.getContext("2d")!;
this.chart = new (await import("../../resources/chartjs")).Chart(ctx, {
type: this.chartType,
data: this.data,
options: this._createOptions(),
plugins: [
{
id: "afterRenderHook",
afterRender: (chart) => {
this._height = `${chart.height}px`;
},
},
],
});
}
private _createOptions() {
return {
...this.options,
plugins: {
...this.options?.plugins,
tooltip: {
...this.options?.plugins?.tooltip,
enabled: false,
external: (context) => this._handleTooltip(context),
},
legend: {
...this.options?.plugins?.legend,
display: false,
},
},
};
}
private _legendClick(ev) {
if (!this.chart) {
return;
}
const index = ev.currentTarget.datasetIndex;
if (this.chart.isDatasetVisible(index)) {
this.chart.setDatasetVisibility(index, false);
this._hiddenDatasets.add(index);
} else {
this.chart.setDatasetVisibility(index, true);
this._hiddenDatasets.delete(index);
}
this.chart.update("none");
this.requestUpdate("_hiddenDatasets");
}
private _handleTooltip(context: {
chart: Chart;
tooltip: TooltipModel<any>;
}) {
if (context.tooltip.opacity === 0) {
this._tooltip = undefined;
return;
}
this._tooltip = {
...context.tooltip,
top: this.chart!.canvas.offsetTop + context.tooltip.caretY + 12 + "px",
left:
this.chart!.canvas.offsetLeft +
clamp(context.tooltip.caretX, 100, this.clientWidth - 100) -
100 +
"px",
};
}
public updateChart = (): void => {
if (this.chart) {
this.chart.update();
}
};
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
}
.chartContainer {
overflow: hidden;
height: 0;
transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.chartLegend {
text-align: center;
}
.chartLegend li {
cursor: pointer;
display: inline-flex;
padding: 0 8px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
align-items: center;
color: var(--secondary-text-color);
}
.chartLegend .hidden {
text-decoration: line-through;
}
.chartLegend .bullet,
.chartTooltip .bullet {
border-width: 1px;
border-style: solid;
border-radius: 50%;
display: inline-block;
height: 16px;
margin-right: 4px;
width: 16px;
flex-shrink: 0;
box-sizing: border-box;
}
.chartTooltip .bullet {
align-self: baseline;
}
:host([rtl]) .chartTooltip .bullet {
margin-right: inherit;
margin-left: 4px;
}
.chartTooltip {
padding: 8px;
font-size: 90%;
position: absolute;
background: rgba(80, 80, 80, 0.9);
color: white;
border-radius: 4px;
pointer-events: none;
z-index: 1000;
width: 200px;
box-sizing: border-box;
}
:host([rtl]) .chartTooltip {
direction: rtl;
}
.chartLegend ul,
.chartTooltip ul {
display: inline-block;
padding: 0 0px;
margin: 8px 0 0 0;
width: 100%;
}
.chartTooltip ul {
margin: 0 4px;
}
.chartTooltip li {
display: flex;
white-space: pre-line;
align-items: center;
line-height: 16px;
}
.chartTooltip .title {
text-align: center;
font-weight: 500;
}
.chartTooltip .beforeBody {
text-align: center;
font-weight: 300;
word-break: break-all;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-chart-base": HaChartBase;
}
}

View File

@ -0,0 +1,392 @@
import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
import { html, LitElement, PropertyValues } from "lit";
import { property, state } from "lit/decorators";
import { getColorByIndex } from "../../common/color/colors";
import { LineChartEntity, LineChartState } from "../../data/history";
import { HomeAssistant } from "../../types";
import "./ha-chart-base";
class StateHistoryChartLine extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public data: LineChartEntity[] = [];
@property({ type: Boolean }) public names = false;
@property() public unit?: string;
@property() public identifier?: string;
@property({ type: Boolean }) public isSingleDevice = false;
@property({ attribute: false }) public endTime?: Date;
@state() private _chartData?: ChartData<"line">;
@state() private _chartOptions?: ChartOptions<"line">;
protected render() {
return html`
<ha-chart-base
.data=${this._chartData}
.options=${this._chartOptions}
chartType="line"
></ha-chart-base>
`;
}
public willUpdate(changedProps: PropertyValues) {
if (!this.hasUpdated) {
this._chartOptions = {
parsing: false,
animation: false,
scales: {
x: {
type: "time",
adapters: {
date: {
locale: this.hass.locale,
},
},
ticks: {
maxRotation: 0,
sampleSize: 5,
autoSkipPadding: 20,
major: {
enabled: true,
},
font: (context) =>
context.tick && context.tick.major
? ({ weight: "bold" } as any)
: {},
},
time: {
tooltipFormat: "datetimeseconds",
},
},
y: {
ticks: {
maxTicksLimit: 7,
},
title: {
display: true,
text: this.unit,
},
},
},
plugins: {
tooltip: {
mode: "nearest",
callbacks: {
label: (context) =>
`${context.dataset.label}: ${context.parsed.y} ${this.unit}`,
},
},
filler: {
propagate: true,
},
legend: {
display: !this.isSingleDevice,
labels: {
usePointStyle: true,
},
},
},
hover: {
mode: "nearest",
},
elements: {
line: {
tension: 0.1,
borderWidth: 1.5,
},
point: {
hitRadius: 5,
},
},
};
}
if (changedProps.has("data")) {
this._generateData();
}
}
private _generateData() {
let colorIndex = 0;
const computedStyles = getComputedStyle(this);
const deviceStates = this.data;
const datasets: ChartDataset<"line">[] = [];
let endTime: Date;
if (deviceStates.length === 0) {
return;
}
function safeParseFloat(value) {
const parsed = parseFloat(value);
return isFinite(parsed) ? parsed : null;
}
endTime =
this.endTime ||
// Get the highest date from the last date of each device
new Date(
Math.max.apply(
null,
deviceStates.map((devSts) =>
new Date(
devSts.states[devSts.states.length - 1].last_changed
).getMilliseconds()
)
)
);
if (endTime > new Date()) {
endTime = new Date();
}
const names = this.names || {};
deviceStates.forEach((states) => {
const domain = states.domain;
const name = names[states.entity_id] || states.name;
// array containing [value1, value2, etc]
let prevValues: any[] | null = null;
const data: ChartDataset<"line">[] = [];
const pushData = (timestamp: Date, datavalues: any[] | null) => {
if (!datavalues) return;
if (timestamp > endTime) {
// Drop datapoints that are after the requested endTime. This could happen if
// endTime is "now" and client time is not in sync with server time.
return;
}
data.forEach((d, i) => {
if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
// null data values show up as gaps in the chart.
// If the current value for the dataset is null and the previous
// value of the data set is not null, then add an 'end' point
// to the chart for the previous value. Otherwise the gap will
// be too big. It will go from the start of the previous data
// value until the start of the next data value.
d.data.push({ x: timestamp.getTime(), y: prevValues[i] });
}
d.data.push({ x: timestamp.getTime(), y: datavalues[i] });
});
prevValues = datavalues;
};
const addDataSet = (
nameY: string,
step = false,
fill = false,
color?: string
) => {
if (!color) {
color = getColorByIndex(colorIndex);
colorIndex++;
}
data.push({
label: nameY,
fill: fill ? "origin" : false,
borderColor: color,
backgroundColor: color + "7F",
stepped: step ? "before" : false,
pointRadius: 0,
data: [],
});
};
if (
domain === "thermostat" ||
domain === "climate" ||
domain === "water_heater"
) {
const hasHvacAction = states.states.some(
(entityState) => entityState.attributes?.hvac_action
);
const isHeating =
domain === "climate" && hasHvacAction
? (entityState: LineChartState) =>
entityState.attributes?.hvac_action === "heating"
: (entityState: LineChartState) => entityState.state === "heat";
const isCooling =
domain === "climate" && hasHvacAction
? (entityState: LineChartState) =>
entityState.attributes?.hvac_action === "cooling"
: (entityState: LineChartState) => entityState.state === "cool";
const hasHeat = states.states.some(isHeating);
const hasCool = states.states.some(isCooling);
// We differentiate between thermostats that have a target temperature
// range versus ones that have just a target temperature
// Using step chart by step-before so manually interpolation not needed.
const hasTargetRange = states.states.some(
(entityState) =>
entityState.attributes &&
entityState.attributes.target_temp_high !==
entityState.attributes.target_temp_low
);
addDataSet(
`${this.hass.localize("ui.card.climate.current_temperature", {
name: name,
})}`,
true
);
if (hasHeat) {
addDataSet(
`${this.hass.localize("ui.card.climate.heating", { name: name })}`,
true,
true,
computedStyles.getPropertyValue("--state-climate-heat-color")
);
// The "heating" series uses steppedArea to shade the area below the current
// temperature when the thermostat is calling for heat.
}
if (hasCool) {
addDataSet(
`${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
true,
true,
computedStyles.getPropertyValue("--state-climate-cool-color")
);
// The "cooling" series uses steppedArea to shade the area below the current
// temperature when the thermostat is calling for heat.
}
if (hasTargetRange) {
addDataSet(
`${this.hass.localize("ui.card.climate.target_temperature_mode", {
name: name,
mode: this.hass.localize("ui.card.climate.high"),
})}`,
true
);
addDataSet(
`${this.hass.localize("ui.card.climate.target_temperature_mode", {
name: name,
mode: this.hass.localize("ui.card.climate.low"),
})}`,
true
);
} else {
addDataSet(
`${this.hass.localize("ui.card.climate.target_temperature_entity", {
name: name,
})}`,
true
);
}
states.states.forEach((entityState) => {
if (!entityState.attributes) return;
const curTemp = safeParseFloat(
entityState.attributes.current_temperature
);
const series = [curTemp];
if (hasHeat) {
series.push(isHeating(entityState) ? curTemp : null);
}
if (hasCool) {
series.push(isCooling(entityState) ? curTemp : null);
}
if (hasTargetRange) {
const targetHigh = safeParseFloat(
entityState.attributes.target_temp_high
);
const targetLow = safeParseFloat(
entityState.attributes.target_temp_low
);
series.push(targetHigh, targetLow);
pushData(new Date(entityState.last_changed), series);
} else {
const target = safeParseFloat(entityState.attributes.temperature);
series.push(target);
pushData(new Date(entityState.last_changed), series);
}
});
} else if (domain === "humidifier") {
addDataSet(
`${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
name: name,
})}`,
true
);
addDataSet(
`${this.hass.localize("ui.card.humidifier.on_entity", {
name: name,
})}`,
true,
true
);
states.states.forEach((entityState) => {
if (!entityState.attributes) return;
const target = safeParseFloat(entityState.attributes.humidity);
const series = [target];
series.push(entityState.state === "on" ? target : null);
pushData(new Date(entityState.last_changed), series);
});
} else {
// Only disable interpolation for sensors
const isStep = domain === "sensor";
addDataSet(name, isStep);
let lastValue: number;
let lastDate: Date;
let lastNullDate: Date | null = null;
// Process chart data.
// When state is `unknown`, calculate the value and break the line.
states.states.forEach((entityState) => {
const value = safeParseFloat(entityState.state);
const date = new Date(entityState.last_changed);
if (value !== null && lastNullDate) {
const dateTime = date.getTime();
const lastNullDateTime = lastNullDate.getTime();
const lastDateTime = lastDate?.getTime();
const tmpValue =
(value - lastValue) *
((lastNullDateTime - lastDateTime) /
(dateTime - lastDateTime)) +
lastValue;
pushData(lastNullDate, [tmpValue]);
pushData(new Date(lastNullDateTime + 1), [null]);
pushData(date, [value]);
lastDate = date;
lastValue = value;
lastNullDate = null;
} else if (value !== null && lastNullDate === null) {
pushData(date, [value]);
lastDate = date;
lastValue = value;
} else if (
value === null &&
lastNullDate === null &&
lastValue !== undefined
) {
lastNullDate = date;
}
});
}
// Add an entry for final values
pushData(endTime, prevValues);
// Concat two arrays
Array.prototype.push.apply(datasets, data);
});
this._chartData = {
datasets,
};
}
}
customElements.define("state-history-chart-line", StateHistoryChartLine);
declare global {
interface HTMLElementTagNameMap {
"state-history-chart-line": StateHistoryChartLine;
}
}

View File

@ -0,0 +1,310 @@
import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { getColorByIndex } from "../../common/color/colors";
import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
import { computeDomain } from "../../common/entity/compute_domain";
import { computeRTL } from "../../common/util/compute_rtl";
import { TimelineEntity } from "../../data/history";
import { HomeAssistant } from "../../types";
import "./ha-chart-base";
import type { TimeLineData } from "./timeline-chart/const";
/** Binary sensor device classes for which the static colors for on/off need to be inverted.
* List the ones were "off" = good or normal state = should be rendered "green".
*/
const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
"battery",
"door",
"garage_door",
"gas",
"lock",
"opening",
"problem",
"safety",
"smoke",
"window",
]);
const STATIC_STATE_COLORS = new Set([
"on",
"off",
"home",
"not_home",
"unavailable",
"unknown",
"idle",
]);
const stateColorMap: Map<string, string> = new Map();
let colorIndex = 0;
const invertOnOff = (entityState?: HassEntity) =>
entityState &&
computeDomain(entityState.entity_id) === "binary_sensor" &&
"device_class" in entityState.attributes &&
BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED.has(
entityState.attributes.device_class!
);
const getColor = (
stateString: string,
entityState: HassEntity,
computedStyles: CSSStyleDeclaration
) => {
if (invertOnOff(entityState)) {
stateString = stateString === "on" ? "off" : "on";
}
if (stateColorMap.has(stateString)) {
return stateColorMap.get(stateString);
}
if (STATIC_STATE_COLORS.has(stateString)) {
const color = computedStyles.getPropertyValue(
`--state-${stateString}-color`
);
stateColorMap.set(stateString, color);
return color;
}
const color = getColorByIndex(colorIndex);
colorIndex++;
stateColorMap.set(stateString, color);
return color;
};
@customElement("state-history-chart-timeline")
export class StateHistoryChartTimeline extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public data: TimelineEntity[] = [];
@property({ type: Boolean }) public names = false;
@property() public unit?: string;
@property() public identifier?: string;
@property({ type: Boolean }) public isSingleDevice = false;
@property({ attribute: false }) public endTime?: Date;
@state() private _chartData?: ChartData<"timeline">;
@state() private _chartOptions?: ChartOptions<"timeline">;
protected render() {
return html`
<ha-chart-base
.data=${this._chartData}
.options=${this._chartOptions}
chartType="timeline"
></ha-chart-base>
`;
}
public willUpdate(changedProps: PropertyValues) {
if (!this.hasUpdated) {
this._chartOptions = {
maintainAspectRatio: false,
parsing: false,
animation: false,
scales: {
x: {
type: "timeline",
position: "bottom",
adapters: {
date: {
locale: this.hass.locale,
},
},
ticks: {
autoSkip: true,
maxRotation: 0,
sampleSize: 5,
autoSkipPadding: 20,
major: {
enabled: true,
},
font: (context) =>
context.tick && context.tick.major
? ({ weight: "bold" } as any)
: {},
},
grid: {
offset: false,
},
time: {
tooltipFormat: "datetimeseconds",
},
},
y: {
type: "category",
barThickness: 20,
offset: true,
grid: {
display: false,
drawBorder: false,
drawTicks: false,
},
ticks: {
display: this.data.length !== 1,
},
afterSetDimensions: (y) => {
y.maxWidth = y.chart.width * 0.18;
},
position: computeRTL(this.hass) ? "right" : "left",
},
},
plugins: {
tooltip: {
mode: "nearest",
callbacks: {
title: (context) =>
context![0].chart!.data!.labels![
context[0].datasetIndex
] as string,
beforeBody: (context) => context[0].dataset.label || "",
label: (item) => {
const d = item.dataset.data[item.dataIndex] as TimeLineData;
return [
d.label || "",
formatDateTimeWithSeconds(d.start, this.hass.locale),
formatDateTimeWithSeconds(d.end, this.hass.locale),
];
},
labelColor: (item) => ({
borderColor: (item.dataset.data[item.dataIndex] as TimeLineData)
.color!,
backgroundColor: (item.dataset.data[
item.dataIndex
] as TimeLineData).color!,
}),
},
},
filler: {
propagate: true,
},
},
};
}
if (changedProps.has("data")) {
this._generateData();
}
}
private _generateData() {
const computedStyles = getComputedStyle(this);
let stateHistory = this.data;
if (!stateHistory) {
stateHistory = [];
}
const startTime = new Date(
stateHistory.reduce(
(minTime, stateInfo) =>
Math.min(minTime, new Date(stateInfo.data[0].last_changed).getTime()),
new Date().getTime()
)
);
// end time is Math.max(startTime, last_event)
let endTime =
this.endTime ||
new Date(
stateHistory.reduce(
(maxTime, stateInfo) =>
Math.max(
maxTime,
new Date(
stateInfo.data[stateInfo.data.length - 1].last_changed
).getTime()
),
startTime.getTime()
)
);
if (endTime > new Date()) {
endTime = new Date();
}
const labels: string[] = [];
const datasets: ChartDataset<"timeline">[] = [];
const names = this.names || {};
// stateHistory is a list of lists of sorted state objects
stateHistory.forEach((stateInfo) => {
let newLastChanged: Date;
let prevState: string | null = null;
let locState: string | null = null;
let prevLastChanged = startTime;
const entityDisplay: string =
names[stateInfo.entity_id] || stateInfo.name;
const dataRow: TimeLineData[] = [];
stateInfo.data.forEach((entityState) => {
let newState: string | null = entityState.state;
const timeStamp = new Date(entityState.last_changed);
if (!newState) {
newState = null;
}
if (timeStamp > endTime) {
// Drop datapoints that are after the requested endTime. This could happen if
// endTime is 'now' and client time is not in sync with server time.
return;
}
if (prevState === null) {
prevState = newState;
locState = entityState.state_localize;
prevLastChanged = new Date(entityState.last_changed);
} else if (newState !== prevState) {
newLastChanged = new Date(entityState.last_changed);
dataRow.push({
start: prevLastChanged,
end: newLastChanged,
label: locState,
color: getColor(
prevState,
this.hass.states[stateInfo.entity_id],
computedStyles
),
});
prevState = newState;
locState = entityState.state_localize;
prevLastChanged = newLastChanged;
}
});
if (prevState !== null) {
dataRow.push({
start: prevLastChanged,
end: endTime,
label: locState,
color: getColor(
prevState,
this.hass.states[stateInfo.entity_id],
computedStyles
),
});
}
datasets.push({
data: dataRow,
label: stateInfo.entity_id,
});
labels.push(entityDisplay);
});
this._chartData = {
labels: labels,
datasets: datasets,
};
}
}
declare global {
interface HTMLElementTagNameMap {
"state-history-chart-timeline": StateHistoryChartTimeline;
}
}

View File

@ -7,10 +7,10 @@ import {
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { isComponentLoaded } from "../common/config/is_component_loaded"; import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { HistoryResult } from "../data/history"; import { HistoryResult } from "../../data/history";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../../types";
import "./ha-circular-progress"; import "../ha-circular-progress";
import "./state-history-chart-line"; import "./state-history-chart-line";
import "./state-history-chart-timeline"; import "./state-history-chart-timeline";
@ -24,7 +24,7 @@ class StateHistoryCharts extends LitElement {
@property({ attribute: false }) public endTime?: Date; @property({ attribute: false }) public endTime?: Date;
@property({ type: Boolean }) public upToNow = false; @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
@property({ type: Boolean, attribute: "no-single" }) public noSingle = false; @property({ type: Boolean, attribute: "no-single" }) public noSingle = false;
@ -101,12 +101,12 @@ class StateHistoryCharts extends LitElement {
return css` return css`
:host { :host {
display: block; display: block;
/* height of single timeline chart = 58px */ /* height of single timeline chart = 60px */
min-height: 58px; min-height: 60px;
} }
.info { .info {
text-align: center; text-align: center;
line-height: 58px; line-height: 60px;
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
`; `;

View File

@ -0,0 +1,18 @@
export interface TimeLineData {
start: Date;
end: Date;
label?: string | null;
color?: string;
}
declare module "chart.js" {
interface ChartTypeRegistry {
timeline: {
chartOptions: BarControllerChartOptions;
datasetOptions: BarControllerDatasetOptions;
defaultDataPoint: TimeLineData;
parsedDataType: any;
scales: "timeline";
};
}
}

View File

@ -0,0 +1,60 @@
import { BarElement, BarOptions, BarProps } from "chart.js";
import { hex2rgb } from "../../../common/color/convert-color";
import { luminosity } from "../../../common/color/rgb";
export interface TextBarProps extends BarProps {
text?: string | null;
options?: Partial<TextBaroptions>;
}
export interface TextBaroptions extends BarOptions {
textPad?: number;
textColor?: string;
backgroundColor: string;
}
export class TextBarElement extends BarElement {
static id = "textbar";
draw(ctx) {
super.draw(ctx);
const options = this.options as TextBaroptions;
const { x, y, base, width, text } = (this as BarElement<
TextBarProps,
TextBaroptions
>).getProps(["x", "y", "base", "width", "text"]);
if (!text) {
return;
}
ctx.beginPath();
const textRect = ctx.measureText(text);
if (
textRect.width === 0 ||
textRect.width + (options.textPad || 4) + 2 > width
) {
return;
}
const textColor =
options.textColor ||
(options.backgroundColor &&
(luminosity(hex2rgb(options.backgroundColor)) > 0.5 ? "#000" : "#fff"));
// ctx.font = "12px arial";
ctx.fillStyle = textColor;
ctx.lineWidth = 0;
ctx.strokeStyle = textColor;
ctx.textBaseline = "middle";
ctx.fillText(
text,
x - width / 2 + (options.textPad || 4),
y + (base - y) / 2
);
}
tooltipPosition(useFinalPosition: boolean) {
const { x, y, base } = this.getProps(["x", "y", "base"], useFinalPosition);
return { x, y: y + (base - y) / 2 };
}
}

View File

@ -0,0 +1,160 @@
import { BarController, BarElement } from "chart.js";
import { TimeLineData } from "./const";
import { TextBarProps } from "./textbar-element";
function parseValue(entry, item, vScale, i) {
const startValue = vScale.parse(entry.start, i);
const endValue = vScale.parse(entry.end, i);
const min = Math.min(startValue, endValue);
const max = Math.max(startValue, endValue);
let barStart = min;
let barEnd = max;
if (Math.abs(min) > Math.abs(max)) {
barStart = max;
barEnd = min;
}
// Store `barEnd` (furthest away from origin) as parsed value,
// to make stacking straight forward
item[vScale.axis] = barEnd;
item._custom = {
barStart,
barEnd,
start: startValue,
end: endValue,
min,
max,
};
return item;
}
export class TimelineController extends BarController {
static id = "timeline";
static defaults = {
dataElementType: "textbar",
dataElementOptions: ["text", "textColor", "textPadding"],
elements: {
showText: true,
textPadding: 4,
minBarWidth: 1,
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
},
};
static overrides = {
maintainAspectRatio: false,
plugins: {
legend: {
display: false,
},
},
};
parseObjectData(meta, data, start, count) {
const iScale = meta.iScale;
const vScale = meta.vScale;
const labels = iScale.getLabels();
const singleScale = iScale === vScale;
const parsed: any[] = [];
let i;
let ilen;
let item;
let entry;
for (i = start, ilen = start + count; i < ilen; ++i) {
entry = data[i];
item = {};
item[iScale.axis] = singleScale || iScale.parse(labels[i], i);
parsed.push(parseValue(entry, item, vScale, i));
}
return parsed;
}
getLabelAndValue(index) {
const meta = this._cachedMeta;
const { vScale } = meta;
const data = this.getDataset().data[index] as TimeLineData;
return {
label: vScale!.getLabelForValue(this.index) || "",
value: data.label || "",
};
}
updateElements(
bars: BarElement[],
start: number,
count: number,
mode: "reset" | "resize" | "none" | "hide" | "show" | "normal" | "active"
) {
const vScale = this._cachedMeta.vScale!;
const iScale = this._cachedMeta.iScale!;
const dataset = this.getDataset();
const firstOpts = this.resolveDataElementOptions(start, mode);
const sharedOptions = this.getSharedOptions(firstOpts);
const includeOptions = this.includeOptions(mode, sharedOptions!);
const horizontal = vScale.isHorizontal();
this.updateSharedOptions(sharedOptions!, mode, firstOpts);
for (let index = start; index < start + count; index++) {
const data = dataset.data[index] as TimeLineData;
// @ts-ignore
const y = vScale.getPixelForValue(this.index);
// @ts-ignore
const xStart = iScale.getPixelForValue(data.start.getTime());
// @ts-ignore
const xEnd = iScale.getPixelForValue(data.end.getTime());
const width = xEnd - xStart;
const height = 10;
const properties: TextBarProps = {
horizontal,
x: xStart + width / 2, // Center of the bar
y: y - height, // Top of bar
width,
height: 0,
base: y + height, // Bottom of bar,
// Text
text: data.label,
};
if (includeOptions) {
properties.options =
sharedOptions || this.resolveDataElementOptions(index, mode);
properties.options = {
...properties.options,
backgroundColor: data.color,
};
}
this.updateElement(bars[index], index, properties as any, mode);
}
}
removeHoverStyle(_element, _datasetIndex, _index) {
// this._setStyle(element, index, 'active', false);
}
setHoverStyle(_element, _datasetIndex, _index) {
// this._setStyle(element, index, 'active', true);
}
}

View File

@ -0,0 +1,55 @@
import { TimeScale } from "chart.js";
import { TimeLineData } from "./const";
export class TimeLineScale extends TimeScale {
static id = "timeline";
static defaults = {
position: "bottom",
tooltips: {
mode: "nearest",
},
ticks: {
autoSkip: true,
},
};
determineDataLimits() {
const options = this.options;
// @ts-ignore
const adapter = this._adapter;
const unit = options.time.unit || "day";
let { min, max } = this.getUserBounds();
const chart = this.chart;
// Convert data to timestamps
chart.data.datasets.forEach((dataset, index) => {
if (!chart.isDatasetVisible(index)) {
return;
}
for (const data of dataset.data as TimeLineData[]) {
let timestamp0 = adapter.parse(data.start, this);
let timestamp1 = adapter.parse(data.end, this);
if (timestamp0 > timestamp1) {
[timestamp0, timestamp1] = [timestamp1, timestamp0];
}
if (min > timestamp0 && timestamp0) {
min = timestamp0;
}
if (max < timestamp1 && timestamp1) {
max = timestamp1;
}
}
});
// In case there is no valid min/max, var's use today limits
min =
isFinite(min) && !isNaN(min) ? min : +adapter.startOf(Date.now(), unit);
max = isFinite(max) && !isNaN(max) ? max : +adapter.endOf(Date.now(), unit);
// Make sure that max is strictly higher than min (required by the lookup table)
this.min = Math.min(min, max - 1);
this.max = Math.max(min + 1, max);
}
}

View File

@ -1,661 +0,0 @@
/* eslint-plugin-disable lit */
import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
import { timeOut } from "@polymer/polymer/lib/utils/async";
import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { formatTime } from "../../common/datetime/format_time";
import "../ha-icon-button";
// eslint-disable-next-line no-unused-vars
/* global Chart moment Color */
let scriptsLoaded = null;
class HaChartBase extends mixinBehaviors(
[IronResizableBehavior],
PolymerElement
) {
static get template() {
return html`
<style>
:host {
display: block;
}
.chartHeader {
padding: 6px 0 0 0;
width: 100%;
display: flex;
flex-direction: row;
}
.chartHeader > div {
vertical-align: top;
padding: 0 8px;
}
.chartHeader > div.chartTitle {
padding-top: 8px;
flex: 0 0 0;
max-width: 30%;
}
.chartHeader > div.chartLegend {
flex: 1 1;
min-width: 70%;
}
:root {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.chartTooltip {
font-size: 90%;
opacity: 1;
position: absolute;
background: rgba(80, 80, 80, 0.9);
color: white;
border-radius: 3px;
pointer-events: none;
transform: translate(-50%, 12px);
z-index: 1000;
width: 200px;
transition: opacity 0.15s ease-in-out;
}
:host([rtl]) .chartTooltip {
direction: rtl;
}
.chartLegend ul,
.chartTooltip ul {
display: inline-block;
padding: 0 0px;
margin: 5px 0 0 0;
width: 100%;
}
.chartTooltip ul {
margin: 0 3px;
}
.chartTooltip li {
display: block;
white-space: pre-line;
}
.chartTooltip li::first-line {
line-height: 0;
}
.chartTooltip .title {
text-align: center;
font-weight: 500;
}
.chartTooltip .beforeBody {
text-align: center;
font-weight: 300;
word-break: break-all;
}
.chartLegend li {
display: inline-block;
padding: 0 6px;
max-width: 49%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.chartLegend li:nth-child(odd):last-of-type {
/* Make last item take full width if it is odd-numbered. */
max-width: 100%;
}
.chartLegend li[data-hidden] {
text-decoration: line-through;
}
.chartLegend em,
.chartTooltip em {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 4px;
width: 10px;
}
:host([rtl]) .chartTooltip em {
margin-right: inherit;
margin-left: 4px;
}
ha-icon-button {
color: var(--secondary-text-color);
}
</style>
<template is="dom-if" if="[[unit]]">
<div class="chartHeader">
<div class="chartTitle">[[unit]]</div>
<div class="chartLegend">
<ul>
<template is="dom-repeat" items="[[metas]]">
<li on-click="_legendClick" data-hidden$="[[item.hidden]]">
<em style$="background-color:[[item.bgColor]]"></em>
[[item.label]]
</li>
</template>
</ul>
</div>
</div>
</template>
<div id="chartTarget" style="height:40px; width:100%">
<canvas id="chartCanvas"></canvas>
<div
class$="chartTooltip [[tooltip.yAlign]]"
style$="opacity:[[tooltip.opacity]]; top:[[tooltip.top]]; left:[[tooltip.left]]; padding:[[tooltip.yPadding]]px [[tooltip.xPadding]]px"
>
<div class="title">[[tooltip.title]]</div>
<template is="dom-if" if="[[tooltip.beforeBody]]">
<div class="beforeBody">[[tooltip.beforeBody]]</div>
</template>
<div>
<ul>
<template is="dom-repeat" items="[[tooltip.lines]]">
<li>
<em style$="background-color:[[item.bgColor]]"></em
>[[item.text]]
</li>
</template>
</ul>
</div>
</div>
</div>
`;
}
get chart() {
return this._chart;
}
static get properties() {
return {
data: Object,
identifier: String,
rendered: {
type: Boolean,
notify: true,
value: false,
readOnly: true,
},
metas: {
type: Array,
value: () => [],
},
tooltip: {
type: Object,
value: () => ({
opacity: "0",
left: "0",
top: "0",
xPadding: "5",
yPadding: "3",
}),
},
unit: Object,
rtl: {
type: Boolean,
reflectToAttribute: true,
},
};
}
static get observers() {
return ["onPropsChange(data)"];
}
connectedCallback() {
super.connectedCallback();
this._isAttached = true;
this.onPropsChange();
this._resizeListener = () => {
this._debouncer = Debouncer.debounce(
this._debouncer,
timeOut.after(10),
() => {
if (this._isAttached) {
this.resizeChart();
}
}
);
};
if (typeof ResizeObserver === "function") {
this.resizeObserver = new ResizeObserver((entries) => {
entries.forEach(() => {
this._resizeListener();
});
});
this.resizeObserver.observe(this.$.chartTarget);
} else {
this.addEventListener("iron-resize", this._resizeListener);
}
if (scriptsLoaded === null) {
scriptsLoaded = import("../../resources/ha-chart-scripts.js");
}
scriptsLoaded.then((ChartModule) => {
this.ChartClass = ChartModule.default;
this.onPropsChange();
});
}
disconnectedCallback() {
super.disconnectedCallback();
this._isAttached = false;
if (this.resizeObserver) {
this.resizeObserver.unobserve(this.$.chartTarget);
}
this.removeEventListener("iron-resize", this._resizeListener);
if (this._resizeTimer !== undefined) {
clearInterval(this._resizeTimer);
this._resizeTimer = undefined;
}
}
onPropsChange() {
if (!this._isAttached || !this.ChartClass || !this.data) {
return;
}
this.drawChart();
}
_customTooltips(tooltip) {
// Hide if no tooltip
if (tooltip.opacity === 0) {
this.set(["tooltip", "opacity"], 0);
return;
}
// Set caret Position
if (tooltip.yAlign) {
this.set(["tooltip", "yAlign"], tooltip.yAlign);
} else {
this.set(["tooltip", "yAlign"], "no-transform");
}
const title = tooltip.title ? tooltip.title[0] || "" : "";
this.set(["tooltip", "title"], title);
if (tooltip.beforeBody) {
this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
}
const bodyLines = tooltip.body.map((n) => n.lines);
// Set Text
if (tooltip.body) {
this.set(
["tooltip", "lines"],
bodyLines.map((body, i) => {
const colors = tooltip.labelColors[i];
return {
color: colors.borderColor,
bgColor: colors.backgroundColor,
text: body.join("\n"),
};
})
);
}
const parentWidth = this.$.chartTarget.clientWidth;
let positionX = tooltip.caretX;
const positionY = this._chart.canvas.offsetTop + tooltip.caretY;
if (tooltip.caretX + 100 > parentWidth) {
positionX = parentWidth - 100;
} else if (tooltip.caretX < 100) {
positionX = 100;
}
positionX += this._chart.canvas.offsetLeft;
// Display, position, and set styles for font
this.tooltip = {
...this.tooltip,
opacity: 1,
left: `${positionX}px`,
top: `${positionY}px`,
};
}
_legendClick(event) {
event = event || window.event;
event.stopPropagation();
let target = event.target || event.srcElement;
while (target.nodeName !== "LI") {
// user clicked child, find parent LI
target = target.parentElement;
}
const index = event.model.itemsIndex;
const meta = this._chart.getDatasetMeta(index);
meta.hidden =
meta.hidden === null ? !this._chart.data.datasets[index].hidden : null;
this.set(
["metas", index, "hidden"],
this._chart.isDatasetVisible(index) ? null : "hidden"
);
this._chart.update();
}
_drawLegend() {
const chart = this._chart;
// New data for old graph. Keep metadata.
const preserveVisibility =
this._oldIdentifier && this.identifier === this._oldIdentifier;
this._oldIdentifier = this.identifier;
this.set(
"metas",
this._chart.data.datasets.map((x, i) => ({
label: x.label,
color: x.color,
bgColor: x.backgroundColor,
hidden:
preserveVisibility && i < this.metas.length
? this.metas[i].hidden
: !chart.isDatasetVisible(i),
}))
);
let updateNeeded = false;
if (preserveVisibility) {
for (let i = 0; i < this.metas.length; i++) {
const meta = chart.getDatasetMeta(i);
if (!!meta.hidden !== !!this.metas[i].hidden) updateNeeded = true;
meta.hidden = this.metas[i].hidden ? true : null;
}
}
if (updateNeeded) {
chart.update();
}
this.unit = this.data.unit;
}
_formatTickValue(value, index, values) {
if (values.length === 0) {
return value;
}
const date = new Date(values[index].value);
return formatTime(date, this.hass.locale);
}
drawChart() {
const data = this.data.data;
const ctx = this.$.chartCanvas;
if ((!data.datasets || !data.datasets.length) && !this._chart) {
return;
}
if (this.data.type !== "timeline" && data.datasets.length > 0) {
const cnt = data.datasets.length;
const colors = this.constructor.getColorList(cnt);
for (let loopI = 0; loopI < cnt; loopI++) {
data.datasets[loopI].borderColor = colors[loopI].rgbString();
data.datasets[loopI].backgroundColor = colors[loopI]
.alpha(0.6)
.rgbaString();
}
}
if (this._chart) {
this._customTooltips({ opacity: 0 });
this._chart.data = data;
this._chart.update({ duration: 0 });
if (this.isTimeline) {
this._chart.options.scales.yAxes[0].gridLines.display = data.length > 1;
} else if (this.data.legend === true) {
this._drawLegend();
}
this.resizeChart();
} else {
if (!data.datasets) {
return;
}
this._customTooltips({ opacity: 0 });
const plugins = [{ afterRender: () => this._setRendered(true) }];
let options = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: 0,
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0,
tooltips: {
enabled: false,
custom: this._customTooltips.bind(this),
},
legend: {
display: false,
},
line: {
spanGaps: true,
},
elements: {
font: "12px 'Roboto', 'sans-serif'",
},
ticks: {
fontFamily: "'Roboto', 'sans-serif'",
},
};
options = Chart.helpers.merge(options, this.data.options);
options.scales.xAxes[0].ticks.callback = this._formatTickValue.bind(this);
if (this.data.type === "timeline") {
this.set("isTimeline", true);
if (this.data.colors !== undefined) {
this._colorFunc = this.constructor.getColorGenerator(
this.data.colors.staticColors,
this.data.colors.staticColorIndex
);
}
if (this._colorFunc !== undefined) {
options.elements.colorFunction = this._colorFunc;
}
if (data.datasets.length === 1) {
if (options.scales.yAxes[0].ticks) {
options.scales.yAxes[0].ticks.display = false;
} else {
options.scales.yAxes[0].ticks = { display: false };
}
if (options.scales.yAxes[0].gridLines) {
options.scales.yAxes[0].gridLines.display = false;
} else {
options.scales.yAxes[0].gridLines = { display: false };
}
}
this.$.chartTarget.style.height = "50px";
} else {
this.$.chartTarget.style.height = "160px";
}
const chartData = {
type: this.data.type,
data: this.data.data,
options: options,
plugins: plugins,
};
// Async resize after dom update
this._chart = new this.ChartClass(ctx, chartData);
if (this.isTimeline !== true && this.data.legend === true) {
this._drawLegend();
}
this.resizeChart();
}
}
resizeChart() {
if (!this._chart) return;
// Chart not ready
if (this._resizeTimer === undefined) {
this._resizeTimer = setInterval(this.resizeChart.bind(this), 10);
return;
}
clearInterval(this._resizeTimer);
this._resizeTimer = undefined;
this._resizeChart();
}
_resizeChart() {
const chartTarget = this.$.chartTarget;
const options = this.data;
const data = options.data;
if (data.datasets.length === 0) {
return;
}
if (!this.isTimeline) {
this._chart.resize();
return;
}
// Recalculate chart height for Timeline chart
const areaTop = this._chart.chartArea.top;
const areaBot = this._chart.chartArea.bottom;
const height1 = this._chart.canvas.clientHeight;
if (areaBot > 0) {
this._axisHeight = height1 - areaBot + areaTop;
}
if (!this._axisHeight) {
chartTarget.style.height = "50px";
this._chart.resize();
this.resizeChart();
return;
}
if (this._axisHeight) {
const cnt = data.datasets.length;
const targetHeight = 30 * cnt + this._axisHeight + "px";
if (chartTarget.style.height !== targetHeight) {
chartTarget.style.height = targetHeight;
}
this._chart.resize();
}
}
// Get HSL distributed color list
static getColorList(count) {
let processL = false;
if (count > 10) {
processL = true;
count = Math.ceil(count / 2);
}
const h1 = 360 / count;
const result = [];
for (let loopI = 0; loopI < count; loopI++) {
result[loopI] = Color().hsl(h1 * loopI, 80, 38);
if (processL) {
result[loopI + count] = Color().hsl(h1 * loopI, 80, 62);
}
}
return result;
}
static getColorGenerator(staticColors, startIndex) {
// Known colors for static data,
// should add for very common state string manually.
// Palette modified from http://google.github.io/palette.js/ mpn65, Apache 2.0
const palette = [
"ff0029",
"66a61e",
"377eb8",
"984ea3",
"00d2d5",
"ff7f00",
"af8d00",
"7f80cd",
"b3e900",
"c42e60",
"a65628",
"f781bf",
"8dd3c7",
"bebada",
"fb8072",
"80b1d3",
"fdb462",
"fccde5",
"bc80bd",
"ffed6f",
"c4eaff",
"cf8c00",
"1b9e77",
"d95f02",
"e7298a",
"e6ab02",
"a6761d",
"0097ff",
"00d067",
"f43600",
"4ba93b",
"5779bb",
"927acc",
"97ee3f",
"bf3947",
"9f5b00",
"f48758",
"8caed6",
"f2b94f",
"eff26e",
"e43872",
"d9b100",
"9d7a00",
"698cff",
"d9d9d9",
"00d27e",
"d06800",
"009f82",
"c49200",
"cbe8ff",
"fecddf",
"c27eb6",
"8cd2ce",
"c4b8d9",
"f883b0",
"a49100",
"f48800",
"27d0df",
"a04a9b",
];
function getColorIndex(idx) {
// Reuse the color if index too large.
return Color("#" + palette[idx % palette.length]);
}
const colorDict = {};
let colorIndex = 0;
if (startIndex > 0) colorIndex = startIndex;
if (staticColors) {
Object.keys(staticColors).forEach((c) => {
const c1 = staticColors[c];
if (isFinite(c1)) {
colorDict[c.toLowerCase()] = getColorIndex(c1);
} else {
colorDict[c.toLowerCase()] = Color(staticColors[c]);
}
});
}
// Custom color assign
function getColor(__, data) {
let ret;
const name = data[3];
if (name === null) return Color().hsl(0, 40, 38);
if (name === undefined) return Color().hsl(120, 40, 38);
let name1 = name.toLowerCase();
if (ret === undefined) {
if (data[4]) {
// Invert on/off if data[4] is true. Required for some binary_sensor device classes
// (BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED) where "off" is the good (= green color) value.
name1 = name1 === "on" ? "off" : name1 === "off" ? "on" : name1;
}
ret = colorDict[name1];
}
if (ret === undefined) {
ret = getColorIndex(colorIndex);
colorIndex++;
colorDict[name1] = ret;
}
return ret;
}
return getColor;
}
}
customElements.define("ha-chart-base", HaChartBase);

View File

@ -14,12 +14,17 @@ class HaExpansionPanel extends LitElement {
@property() header?: string; @property() header?: string;
@property() secondary?: string;
@query(".container") private _container!: HTMLDivElement; @query(".container") private _container!: HTMLDivElement;
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="summary" @click=${this._toggleContainer}> <div class="summary" @click=${this._toggleContainer}>
<slot name="header">${this.header}</slot> <slot class="header" name="header">
${this.header}
<slot class="secondary" name="secondary">${this.secondary}</slot>
</slot>
<ha-svg-icon <ha-svg-icon
.path=${mdiChevronDown} .path=${mdiChevronDown}
class="summary-icon ${classMap({ expanded: this.expanded })}" class="summary-icon ${classMap({ expanded: this.expanded })}"
@ -106,6 +111,16 @@ class HaExpansionPanel extends LitElement {
.container.expanded { .container.expanded {
height: auto; height: auto;
} }
.header {
display: block;
}
.secondary {
display: block;
color: var(--secondary-text-color);
font-size: 12px;
}
`; `;
} }
} }

View File

@ -1,14 +1,19 @@
import "@material/mwc-icon-button/mwc-icon-button";
import { mdiClose, mdiMenuDown } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-menu-button/paper-menu-button";
import "@polymer/paper-ripple/paper-ripple";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import "../ha-paper-dropdown-menu"; import "../ha-svg-icon";
import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form"; import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
@customElement("ha-form-select") @customElement("ha-form-select")
export class HaFormSelect extends LitElement implements HaFormElement { export class HaFormSelect extends LitElement implements HaFormElement {
@property() public schema!: HaFormSelectSchema; @property({ attribute: false }) public schema!: HaFormSelectSchema;
@property() public data!: HaFormSelectData; @property() public data!: HaFormSelectData;
@ -26,7 +31,33 @@ export class HaFormSelect extends LitElement implements HaFormElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-paper-dropdown-menu .label=${this.label}> <paper-menu-button horizontal-align="right" vertical-offset="8">
<div class="dropdown-trigger" slot="dropdown-trigger">
<paper-ripple></paper-ripple>
<paper-input
id="input"
type="text"
readonly
value=${this.data}
label=${this.label}
input-role="button"
input-aria-haspopup="listbox"
autocomplete="off"
>
${this.data && this.schema.optional
? html`<mwc-icon-button
slot="suffix"
class="clear-button"
@click=${this._clearValue}
>
<ha-svg-icon .path=${mdiClose}></ha-svg-icon>
</mwc-icon-button>`
: ""}
<mwc-icon-button slot="suffix">
<ha-svg-icon .path=${mdiMenuDown}></ha-svg-icon>
</mwc-icon-button>
</paper-input>
</div>
<paper-listbox <paper-listbox
slot="dropdown-content" slot="dropdown-content"
attr-for-selected="item-value" attr-for-selected="item-value"
@ -45,7 +76,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
) )
} }
</paper-listbox> </paper-listbox>
</ha-paper-dropdown-menu> </paper-menu-button>
`; `;
} }
@ -57,6 +88,11 @@ export class HaFormSelect extends LitElement implements HaFormElement {
return Array.isArray(item) ? item[1] || item[0] : item; return Array.isArray(item) ? item[1] || item[0] : item;
} }
private _clearValue(ev: CustomEvent) {
ev.stopPropagation();
fireEvent(this, "value-changed", { value: undefined });
}
private _valueChanged(ev: CustomEvent) { private _valueChanged(ev: CustomEvent) {
if (!ev.detail.value) { if (!ev.detail.value) {
return; return;
@ -68,8 +104,16 @@ export class HaFormSelect extends LitElement implements HaFormElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
ha-paper-dropdown-menu { paper-menu-button {
display: block; display: block;
padding: 0;
}
paper-input > mwc-icon-button {
--mdc-icon-button-size: 24px;
padding: 2px;
}
.clear-button {
color: var(--secondary-text-color);
} }
`; `;
} }

View File

@ -7,14 +7,14 @@ import { afterNextRender } from "../common/util/render-status";
import { FrontendLocaleData } from "../data/translation"; import { FrontendLocaleData } from "../data/translation";
import { getValueInPercentage, normalize } from "../util/calculate"; import { getValueInPercentage, normalize } from "../util/calculate";
// Workaround for https://github.com/home-assistant/frontend/issues/6467
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
const getAngle = (value: number, min: number, max: number) => { const getAngle = (value: number, min: number, max: number) => {
const percentage = getValueInPercentage(normalize(value, min, max), min, max); const percentage = getValueInPercentage(normalize(value, min, max), min, max);
return (percentage * 180) / 100; return (percentage * 180) / 100;
}; };
// Workaround for https://github.com/home-assistant/frontend/issues/6467
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@customElement("ha-gauge") @customElement("ha-gauge")
export class Gauge extends LitElement { export class Gauge extends LitElement {
@property({ type: Number }) public min = 0; @property({ type: Number }) public min = 0;

View File

@ -7,7 +7,7 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, query, state } from "lit/decorators"; import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import { nextRender } from "../common/util/render-status"; import { nextRender } from "../common/util/render-status";
import { getExternalConfig } from "../external_app/external_config"; import { getExternalConfig } from "../external_app/external_config";
@ -42,27 +42,23 @@ class HaHLSPlayer extends LitElement {
// don't cache this, as we remove it on disconnects // don't cache this, as we remove it on disconnects
@query("video") private _videoEl!: HTMLVideoElement; @query("video") private _videoEl!: HTMLVideoElement;
@state() private _attached = false;
private _hlsPolyfillInstance?: HlsLite; private _hlsPolyfillInstance?: HlsLite;
private _useExoPlayer = false; private _exoPlayer = false;
public connectedCallback() { public connectedCallback() {
super.connectedCallback(); super.connectedCallback();
this._attached = true; if (this.hasUpdated) {
this._startHls();
}
} }
public disconnectedCallback() { public disconnectedCallback() {
super.disconnectedCallback(); super.disconnectedCallback();
this._attached = false; this._cleanUp();
} }
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this._attached) {
return html``;
}
return html` return html`
<video <video
?autoplay=${this.autoPlay} ?autoplay=${this.autoPlay}
@ -77,21 +73,13 @@ class HaHLSPlayer extends LitElement {
protected updated(changedProps: PropertyValues) { protected updated(changedProps: PropertyValues) {
super.updated(changedProps); super.updated(changedProps);
const attachedChanged = changedProps.has("_attached");
const urlChanged = changedProps.has("url"); const urlChanged = changedProps.has("url");
if (!urlChanged && !attachedChanged) { if (!urlChanged) {
return; return;
} }
// If we are no longer attached, destroy polyfill this._cleanUp();
if (attachedChanged && !this._attached) {
// Tear down existing polyfill, if available
this._destroyPolyfill();
return;
}
this._destroyPolyfill();
this._startHls(); this._startHls();
} }
@ -118,13 +106,13 @@ class HaHLSPlayer extends LitElement {
} }
if (!hlsSupported) { if (!hlsSupported) {
this._videoEl.innerHTML = this.hass.localize( videoEl.innerHTML = this.hass.localize(
"ui.components.media-browser.video_not_supported" "ui.components.media-browser.video_not_supported"
); );
return; return;
} }
this._useExoPlayer = await useExoPlayerPromise; const useExoPlayer = await useExoPlayerPromise;
const 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 // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
@ -144,7 +132,7 @@ class HaHLSPlayer extends LitElement {
} }
// If codec is HEVC and ExoPlayer is supported, use ExoPlayer. // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
if (this._useExoPlayer && match !== null && match[1] !== undefined) { if (useExoPlayer && match !== null && match[1] !== undefined) {
this._renderHLSExoPlayer(playlist_url); this._renderHLSExoPlayer(playlist_url);
} else if (Hls.isSupported()) { } else if (Hls.isSupported()) {
this._renderHLSPolyfill(videoEl, Hls, playlist_url); this._renderHLSPolyfill(videoEl, Hls, playlist_url);
@ -154,6 +142,7 @@ class HaHLSPlayer extends LitElement {
} }
private async _renderHLSExoPlayer(url: string) { private async _renderHLSExoPlayer(url: string) {
this._exoPlayer = true;
window.addEventListener("resize", this._resizeExoPlayer); window.addEventListener("resize", this._resizeExoPlayer);
this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer); this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
this._videoEl.style.visibility = "hidden"; this._videoEl.style.visibility = "hidden";
@ -202,25 +191,28 @@ class HaHLSPlayer extends LitElement {
private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) { private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
videoEl.src = url; videoEl.src = url;
await new Promise((resolve) => videoEl.addEventListener("loadedmetadata", () => {
videoEl.addEventListener("loadedmetadata", resolve) videoEl.play();
); });
videoEl.play();
} }
private _elementResized() { private _elementResized() {
fireEvent(this, "iron-resize"); fireEvent(this, "iron-resize");
} }
private _destroyPolyfill() { private _cleanUp() {
if (this._hlsPolyfillInstance) { if (this._hlsPolyfillInstance) {
this._hlsPolyfillInstance.destroy(); this._hlsPolyfillInstance.destroy();
this._hlsPolyfillInstance = undefined; this._hlsPolyfillInstance = undefined;
} }
if (this._useExoPlayer) { if (this._exoPlayer) {
window.removeEventListener("resize", this._resizeExoPlayer); window.removeEventListener("resize", this._resizeExoPlayer);
this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" }); this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
this._exoPlayer = false;
} }
const videoEl = this._videoEl;
videoEl.removeAttribute("src");
videoEl.load();
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

View File

@ -0,0 +1,69 @@
import { LitElement, html, css } from "lit";
import { property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { fireEvent } from "../../common/dom/fire_event";
import { HomeAssistant } from "../../types";
class HaEntityMarker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: "entity-id" }) public entityId?: string;
@property({ attribute: "entity-name" }) public entityName?: string;
@property({ attribute: "entity-picture" }) public entityPicture?: string;
@property({ attribute: "entity-color" }) public entityColor?: string;
protected render() {
return html`
<div
class="marker"
style=${styleMap({ "border-color": this.entityColor })}
@click=${this._badgeTap}
>
${this.entityPicture
? html`<div
class="entity-picture"
style=${styleMap({
"background-image": `url(${this.entityPicture})`,
})}
></div>`
: this.entityName}
</div>
`;
}
private _badgeTap(ev: Event) {
ev.stopPropagation();
if (this.entityId) {
fireEvent(this, "hass-more-info", { entityId: this.entityId });
}
}
static get styles() {
return css`
.marker {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
overflow: hidden;
width: 48px;
height: 48px;
font-size: var(--ha-marker-font-size, 1.5em);
border-radius: 50%;
border: 1px solid var(--ha-marker-color, var(--primary-color));
color: var(--primary-text-color);
background-color: var(--card-background-color);
}
.entity-picture {
background-size: cover;
height: 100%;
width: 100%;
}
`;
}
}
customElements.define("ha-entity-marker", HaEntityMarker);

View File

@ -1,299 +0,0 @@
import {
Circle,
DivIcon,
DragEndEvent,
LatLng,
LeafletMouseEvent,
Map,
Marker,
TileLayer,
} from "leaflet";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import {
LeafletModuleType,
replaceTileLayer,
setupLeafletMap,
} from "../../common/dom/setup-leaflet-map";
import { nextRender } from "../../common/util/render-status";
import { defaultRadiusColor } from "../../data/zone";
import { HomeAssistant } from "../../types";
@customElement("ha-location-editor")
class LocationEditor extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Array }) public location?: [number, number];
@property({ type: Number }) public radius?: number;
@property() public radiusColor?: string;
@property() public icon?: string;
@property({ type: Boolean }) public darkMode?: boolean;
public fitZoom = 16;
private _iconEl?: DivIcon;
private _ignoreFitToMap?: [number, number];
// eslint-disable-next-line
private Leaflet?: LeafletModuleType;
private _leafletMap?: Map;
private _tileLayer?: TileLayer;
private _locationMarker?: Marker | Circle;
public fitMap(): void {
if (!this._leafletMap || !this.location) {
return;
}
if (this._locationMarker && "getBounds" in this._locationMarker) {
this._leafletMap.fitBounds(this._locationMarker.getBounds());
} else {
this._leafletMap.setView(this.location, this.fitZoom);
}
this._ignoreFitToMap = this.location;
}
protected render(): TemplateResult {
return html` <div id="map"></div> `;
}
protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps);
this._initMap();
}
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
// Still loading.
if (!this.Leaflet) {
return;
}
if (changedProps.has("location")) {
this._updateMarker();
if (
this.location &&
(!this._ignoreFitToMap ||
this._ignoreFitToMap[0] !== this.location[0] ||
this._ignoreFitToMap[1] !== this.location[1])
) {
this.fitMap();
}
}
if (changedProps.has("radius")) {
this._updateRadius();
}
if (changedProps.has("radiusColor")) {
this._updateRadiusColor();
}
if (changedProps.has("icon")) {
this._updateIcon();
}
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
return;
}
if (!this._leafletMap || !this._tileLayer) {
return;
}
this._tileLayer = replaceTileLayer(
this.Leaflet,
this._leafletMap,
this._tileLayer,
this.hass.themes.darkMode
);
}
}
private get _mapEl(): HTMLDivElement {
return this.shadowRoot!.querySelector("div")!;
}
private async _initMap(): Promise<void> {
[this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
this._mapEl,
this.darkMode ?? this.hass.themes.darkMode,
Boolean(this.radius)
);
this._leafletMap.addEventListener(
"click",
// @ts-ignore
(ev: LeafletMouseEvent) => this._locationUpdated(ev.latlng)
);
this._updateIcon();
this._updateMarker();
this.fitMap();
this._leafletMap.invalidateSize();
}
private _locationUpdated(latlng: LatLng) {
let longitude = latlng.lng;
if (Math.abs(longitude) > 180.0) {
// Normalize longitude if map provides values beyond -180 to +180 degrees.
longitude = (((longitude % 360.0) + 540.0) % 360.0) - 180.0;
}
this.location = this._ignoreFitToMap = [latlng.lat, longitude];
fireEvent(this, "change", undefined, { bubbles: false });
}
private _radiusUpdated() {
this._ignoreFitToMap = this.location;
this.radius = (this._locationMarker as Circle).getRadius();
fireEvent(this, "change", undefined, { bubbles: false });
}
private _updateIcon() {
if (!this.icon) {
this._iconEl = undefined;
return;
}
// create icon
let iconHTML = "";
const el = document.createElement("ha-icon");
el.setAttribute("icon", this.icon);
iconHTML = el.outerHTML;
this._iconEl = this.Leaflet!.divIcon({
html: iconHTML,
iconSize: [24, 24],
className: "light leaflet-edit-move",
});
this._setIcon();
}
private _setIcon() {
if (!this._locationMarker || !this._iconEl) {
return;
}
if (!this.radius) {
(this._locationMarker as Marker).setIcon(this._iconEl);
return;
}
// @ts-ignore
const moveMarker = this._locationMarker.editing._moveMarker;
moveMarker.setIcon(this._iconEl);
}
private _setupEdit() {
// @ts-ignore
this._locationMarker.editing.enable();
// @ts-ignore
const moveMarker = this._locationMarker.editing._moveMarker;
// @ts-ignore
const resizeMarker = this._locationMarker.editing._resizeMarkers[0];
this._setIcon();
moveMarker.addEventListener(
"dragend",
// @ts-ignore
(ev: DragEndEvent) => this._locationUpdated(ev.target.getLatLng())
);
resizeMarker.addEventListener(
"dragend",
// @ts-ignore
(ev: DragEndEvent) => this._radiusUpdated(ev)
);
}
private async _updateMarker(): Promise<void> {
if (!this.location) {
if (this._locationMarker) {
this._locationMarker.remove();
this._locationMarker = undefined;
}
return;
}
if (this._locationMarker) {
this._locationMarker.setLatLng(this.location);
if (this.radius) {
// @ts-ignore
this._locationMarker.editing.disable();
await nextRender();
this._setupEdit();
}
return;
}
if (!this.radius) {
this._locationMarker = this.Leaflet!.marker(this.location, {
draggable: true,
});
this._setIcon();
this._locationMarker.addEventListener(
"dragend",
// @ts-ignore
(ev: DragEndEvent) => this._locationUpdated(ev.target.getLatLng())
);
this._leafletMap!.addLayer(this._locationMarker);
} else {
this._locationMarker = this.Leaflet!.circle(this.location, {
color: this.radiusColor || defaultRadiusColor,
radius: this.radius,
});
this._leafletMap!.addLayer(this._locationMarker);
this._setupEdit();
}
}
private _updateRadius(): void {
if (!this._locationMarker || !this.radius) {
return;
}
(this._locationMarker as Circle).setRadius(this.radius);
}
private _updateRadiusColor(): void {
if (!this._locationMarker || !this.radius) {
return;
}
(this._locationMarker as Circle).setStyle({ color: this.radiusColor });
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
height: 300px;
}
#map {
height: 100%;
background: inherit;
}
.leaflet-edit-move {
border-radius: 50%;
cursor: move !important;
}
.leaflet-edit-resize {
border-radius: 50%;
cursor: nesw-resize !important;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-location-editor": LocationEditor;
}
}

View File

@ -3,10 +3,8 @@ import {
DivIcon, DivIcon,
DragEndEvent, DragEndEvent,
LatLng, LatLng,
Map,
Marker, Marker,
MarkerOptions, MarkerOptions,
TileLayer,
} from "leaflet"; } from "leaflet";
import { import {
css, css,
@ -16,15 +14,13 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
LeafletModuleType, import type { HomeAssistant } from "../../types";
replaceTileLayer, import "./ha-map";
setupLeafletMap, import type { HaMap } from "./ha-map";
} from "../../common/dom/setup-leaflet-map";
import { defaultRadiusColor } from "../../data/zone";
import { HomeAssistant } from "../../types";
declare global { declare global {
// for fire event // for fire event
@ -51,38 +47,40 @@ export interface MarkerLocation {
export class HaLocationsEditor extends LitElement { export class HaLocationsEditor extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public locations?: MarkerLocation[]; @property({ attribute: false }) public locations?: MarkerLocation[];
public fitZoom = 16; @property({ type: Boolean }) public autoFit = false;
@property({ type: Number }) public zoom = 16;
@property({ type: Boolean }) public darkMode?: boolean;
@state() private _locationMarkers?: Record<string, Marker | Circle>;
@state() private _circles: Record<string, Circle> = {};
@query("ha-map", true) private map!: HaMap;
// eslint-disable-next-line
private Leaflet?: LeafletModuleType; private Leaflet?: LeafletModuleType;
// eslint-disable-next-line constructor() {
private _leafletMap?: Map; super();
private _tileLayer?: TileLayer; import("leaflet").then((module) => {
import("leaflet-draw").then(() => {
private _locationMarkers?: { [key: string]: Marker | Circle }; this.Leaflet = module.default as LeafletModuleType;
this._updateMarkers();
private _circles: Record<string, Circle> = {}; this.updateComplete.then(() => this.fitMap());
});
});
}
public fitMap(): void { public fitMap(): void {
if ( this.map.fitMap();
!this._leafletMap ||
!this._locationMarkers ||
!Object.keys(this._locationMarkers).length
) {
return;
}
const bounds = this.Leaflet!.latLngBounds(
Object.values(this._locationMarkers).map((item) => item.getLatLng())
);
this._leafletMap.fitBounds(bounds.pad(0.5));
} }
public fitMarker(id: string): void { public fitMarker(id: string): void {
if (!this._leafletMap || !this._locationMarkers) { if (!this.map.leafletMap || !this._locationMarkers) {
return; return;
} }
const marker = this._locationMarkers[id]; const marker = this._locationMarkers[id];
@ -90,29 +88,44 @@ export class HaLocationsEditor extends LitElement {
return; return;
} }
if ("getBounds" in marker) { if ("getBounds" in marker) {
this._leafletMap.fitBounds(marker.getBounds()); this.map.leafletMap.fitBounds(marker.getBounds());
(marker as Circle).bringToFront(); (marker as Circle).bringToFront();
} else { } else {
const circle = this._circles[id]; const circle = this._circles[id];
if (circle) { if (circle) {
this._leafletMap.fitBounds(circle.getBounds()); this.map.leafletMap.fitBounds(circle.getBounds());
} else { } else {
this._leafletMap.setView(marker.getLatLng(), this.fitZoom); this.map.leafletMap.setView(marker.getLatLng(), this.zoom);
} }
} }
} }
protected render(): TemplateResult { protected render(): TemplateResult {
return html` <div id="map"></div> `; return html`<ha-map
.hass=${this.hass}
.layers=${this._getLayers(this._circles, this._locationMarkers)}
.zoom=${this.zoom}
.autoFit=${this.autoFit}
.darkMode=${this.darkMode}
></ha-map>`;
} }
protected firstUpdated(changedProps: PropertyValues): void { private _getLayers = memoizeOne(
super.firstUpdated(changedProps); (
this._initMap(); circles: Record<string, Circle>,
} markers?: Record<string, Marker | Circle>
): Array<Marker | Circle> => {
const layers: Array<Marker | Circle> = [];
Array.prototype.push.apply(layers, Object.values(circles));
if (markers) {
Array.prototype.push.apply(layers, Object.values(markers));
}
return layers;
}
);
protected updated(changedProps: PropertyValues): void { public willUpdate(changedProps: PropertyValues): void {
super.updated(changedProps); super.willUpdate(changedProps);
// Still loading. // Still loading.
if (!this.Leaflet) { if (!this.Leaflet) {
@ -122,37 +135,6 @@ export class HaLocationsEditor extends LitElement {
if (changedProps.has("locations")) { if (changedProps.has("locations")) {
this._updateMarkers(); this._updateMarkers();
} }
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
return;
}
if (!this._leafletMap || !this._tileLayer) {
return;
}
this._tileLayer = replaceTileLayer(
this.Leaflet,
this._leafletMap,
this._tileLayer,
this.hass.themes.darkMode
);
}
}
private get _mapEl(): HTMLDivElement {
return this.shadowRoot!.querySelector("div")!;
}
private async _initMap(): Promise<void> {
[this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
this._mapEl,
this.hass.themes.darkMode,
true
);
this._updateMarkers();
this.fitMap();
this._leafletMap.invalidateSize();
} }
private _updateLocation(ev: DragEndEvent) { private _updateLocation(ev: DragEndEvent) {
@ -189,21 +171,18 @@ export class HaLocationsEditor extends LitElement {
} }
private _updateMarkers(): void { private _updateMarkers(): void {
if (this._locationMarkers) {
Object.values(this._locationMarkers).forEach((marker) => {
marker.remove();
});
this._locationMarkers = undefined;
Object.values(this._circles).forEach((circle) => circle.remove());
this._circles = {};
}
if (!this.locations || !this.locations.length) { if (!this.locations || !this.locations.length) {
this._circles = {};
this._locationMarkers = undefined;
return; return;
} }
this._locationMarkers = {}; const locationMarkers = {};
const circles = {};
const defaultZoneRadiusColor = getComputedStyle(this).getPropertyValue(
"--accent-color"
);
this.locations.forEach((location: MarkerLocation) => { this.locations.forEach((location: MarkerLocation) => {
let icon: DivIcon | undefined; let icon: DivIcon | undefined;
@ -228,45 +207,46 @@ export class HaLocationsEditor extends LitElement {
const circle = this.Leaflet!.circle( const circle = this.Leaflet!.circle(
[location.latitude, location.longitude], [location.latitude, location.longitude],
{ {
color: location.radius_color || defaultRadiusColor, color: location.radius_color || defaultZoneRadiusColor,
radius: location.radius, radius: location.radius,
} }
); );
circle.addTo(this._leafletMap!);
if (location.radius_editable || location.location_editable) { if (location.radius_editable || location.location_editable) {
// @ts-ignore // @ts-ignore
circle.editing.enable(); circle.editing.enable();
// @ts-ignore circle.addEventListener("add", () => {
const moveMarker = circle.editing._moveMarker; // @ts-ignore
// @ts-ignore const moveMarker = circle.editing._moveMarker;
const resizeMarker = circle.editing._resizeMarkers[0]; // @ts-ignore
if (icon) { const resizeMarker = circle.editing._resizeMarkers[0];
moveMarker.setIcon(icon); if (icon) {
} moveMarker.setIcon(icon);
resizeMarker.id = moveMarker.id = location.id; }
moveMarker resizeMarker.id = moveMarker.id = location.id;
.addEventListener( moveMarker
"dragend", .addEventListener(
// @ts-ignore "dragend",
(ev: DragEndEvent) => this._updateLocation(ev) // @ts-ignore
) (ev: DragEndEvent) => this._updateLocation(ev)
.addEventListener( )
"click", .addEventListener(
// @ts-ignore "click",
(ev: MouseEvent) => this._markerClicked(ev) // @ts-ignore
); (ev: MouseEvent) => this._markerClicked(ev)
if (location.radius_editable) { );
resizeMarker.addEventListener( if (location.radius_editable) {
"dragend", resizeMarker.addEventListener(
// @ts-ignore "dragend",
(ev: DragEndEvent) => this._updateRadius(ev) // @ts-ignore
); (ev: DragEndEvent) => this._updateRadius(ev)
} else { );
resizeMarker.remove(); } else {
} resizeMarker.remove();
this._locationMarkers![location.id] = circle; }
});
locationMarkers[location.id] = circle;
} else { } else {
this._circles[location.id] = circle; circles[location.id] = circle;
} }
} }
if ( if (
@ -275,6 +255,7 @@ export class HaLocationsEditor extends LitElement {
) { ) {
const options: MarkerOptions = { const options: MarkerOptions = {
title: location.name, title: location.name,
draggable: location.location_editable,
}; };
if (icon) { if (icon) {
@ -293,13 +274,14 @@ export class HaLocationsEditor extends LitElement {
"click", "click",
// @ts-ignore // @ts-ignore
(ev: MouseEvent) => this._markerClicked(ev) (ev: MouseEvent) => this._markerClicked(ev)
) );
.addTo(this._leafletMap!);
(marker as any).id = location.id; (marker as any).id = location.id;
this._locationMarkers![location.id] = marker; locationMarkers[location.id] = marker;
} }
}); });
this._circles = circles;
this._locationMarkers = locationMarkers;
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
@ -308,23 +290,9 @@ export class HaLocationsEditor extends LitElement {
display: block; display: block;
height: 300px; height: 300px;
} }
#map { ha-map {
height: 100%; height: 100%;
} }
.leaflet-marker-draggable {
cursor: move !important;
}
.leaflet-edit-resize {
border-radius: 50%;
cursor: nesw-resize !important;
}
.named-icon {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
`; `;
} }
} }

View File

@ -1,13 +1,15 @@
import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
import { import {
css, Circle,
CSSResultGroup, CircleMarker,
html, LatLngTuple,
LitElement, Layer,
PropertyValues, Map,
TemplateResult, Marker,
} from "lit"; Polyline,
import { customElement, property } from "lit/decorators"; TileLayer,
} from "leaflet";
import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import { import {
LeafletModuleType, LeafletModuleType,
replaceTileLayer, replaceTileLayer,
@ -15,194 +17,324 @@ import {
} from "../../common/dom/setup-leaflet-map"; } from "../../common/dom/setup-leaflet-map";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeStateName } from "../../common/entity/compute_state_name"; import { computeStateName } from "../../common/entity/compute_state_name";
import { debounce } from "../../common/util/debounce"; import "./ha-entity-marker";
import "../../panels/map/ha-entity-marker";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import "../ha-icon-button"; import "../ha-icon-button";
import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
const getEntityId = (entity: string | HaMapEntity): string =>
typeof entity === "string" ? entity : entity.entity_id;
export interface HaMapPaths {
points: LatLngTuple[];
color?: string;
gradualOpacity?: number;
}
export interface HaMapEntity {
entity_id: string;
color: string;
}
@customElement("ha-map") @customElement("ha-map")
class HaMap extends LitElement { export class HaMap extends ReactiveElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public entities?: string[]; @property({ attribute: false }) public entities?: string[] | HaMapEntity[];
@property() public darkMode?: boolean; @property({ attribute: false }) public paths?: HaMapPaths[];
@property() public zoom?: number; @property({ attribute: false }) public layers?: Layer[];
@property({ type: Boolean }) public autoFit = false;
@property({ type: Boolean }) public fitZones?: boolean;
@property({ type: Boolean }) public darkMode?: boolean;
@property({ type: Number }) public zoom = 14;
@state() private _loaded = false;
public leafletMap?: Map;
// eslint-disable-next-line
private Leaflet?: LeafletModuleType; private Leaflet?: LeafletModuleType;
private _leafletMap?: Map;
private _tileLayer?: TileLayer; private _tileLayer?: TileLayer;
// @ts-ignore
private _resizeObserver?: ResizeObserver; private _resizeObserver?: ResizeObserver;
private _debouncedResizeListener = debounce(
() => {
if (!this._leafletMap) {
return;
}
this._leafletMap.invalidateSize();
},
100,
false
);
private _mapItems: Array<Marker | Circle> = []; private _mapItems: Array<Marker | Circle> = [];
private _mapZones: Array<Marker | Circle> = []; private _mapZones: Array<Marker | Circle> = [];
private _connected = false; private _mapPaths: Array<Polyline | CircleMarker> = [];
public connectedCallback(): void { public connectedCallback(): void {
super.connectedCallback(); super.connectedCallback();
this._connected = true; this._loadMap();
if (this.hasUpdated) { this._attachObserver();
this.loadMap();
this._attachObserver();
}
} }
public disconnectedCallback(): void { public disconnectedCallback(): void {
super.disconnectedCallback(); super.disconnectedCallback();
this._connected = false; if (this.leafletMap) {
this.leafletMap.remove();
if (this._leafletMap) { this.leafletMap = undefined;
this._leafletMap.remove();
this._leafletMap = undefined;
this.Leaflet = undefined; this.Leaflet = undefined;
} }
this._loaded = false;
if (this._resizeObserver) { if (this._resizeObserver) {
this._resizeObserver.unobserve(this._mapEl); this._resizeObserver.unobserve(this);
} else {
window.removeEventListener("resize", this._debouncedResizeListener);
} }
} }
protected render(): TemplateResult { protected update(changedProps: PropertyValues) {
if (!this.entities) { super.update(changedProps);
return html``;
}
return html` <div id="map"></div> `;
}
protected firstUpdated(changedProps: PropertyValues): void { if (!this._loaded) {
super.firstUpdated(changedProps);
this.loadMap();
if (this._connected) {
this._attachObserver();
}
}
protected shouldUpdate(changedProps) {
if (!changedProps.has("hass") || changedProps.size > 1) {
return true;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || !this.entities) {
return true;
}
// Check if any state has changed
for (const entity of this.entities) {
if (oldHass.states[entity] !== this.hass!.states[entity]) {
return true;
}
}
return false;
}
protected updated(changedProps: PropertyValues): void {
if (changedProps.has("hass")) {
this._drawEntities();
this._fitMap();
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
return;
}
if (!this.Leaflet || !this._leafletMap || !this._tileLayer) {
return;
}
this._tileLayer = replaceTileLayer(
this.Leaflet,
this._leafletMap,
this._tileLayer,
this.hass.themes.darkMode
);
}
}
private get _mapEl(): HTMLDivElement {
return this.shadowRoot!.getElementById("map") as HTMLDivElement;
}
private async loadMap(): Promise<void> {
[this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
this._mapEl,
this.darkMode ?? this.hass.themes.darkMode
);
this._drawEntities();
this._leafletMap.invalidateSize();
this._fitMap();
}
private _fitMap(): void {
if (!this._leafletMap || !this.Leaflet || !this.hass) {
return; return;
} }
if (this._mapItems.length === 0) { const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
this._leafletMap.setView(
if (changedProps.has("_loaded") || changedProps.has("entities")) {
this._drawEntities();
} else if (this._loaded && oldHass && this.entities) {
// Check if any state has changed
for (const entity of this.entities) {
if (
oldHass.states[getEntityId(entity)] !==
this.hass!.states[getEntityId(entity)]
) {
this._drawEntities();
break;
}
}
}
if (changedProps.has("_loaded") || changedProps.has("paths")) {
this._drawPaths();
}
if (changedProps.has("_loaded") || changedProps.has("layers")) {
this._drawLayers(changedProps.get("layers") as Layer[] | undefined);
}
if (
changedProps.has("_loaded") ||
((changedProps.has("entities") || changedProps.has("layers")) &&
this.autoFit)
) {
this.fitMap();
}
if (changedProps.has("zoom")) {
this.leafletMap!.setZoom(this.zoom);
}
if (
!changedProps.has("darkMode") &&
(!changedProps.has("hass") ||
(oldHass && oldHass.themes.darkMode === this.hass.themes.darkMode))
) {
return;
}
const darkMode = this.darkMode ?? this.hass.themes.darkMode;
this._tileLayer = replaceTileLayer(
this.Leaflet!,
this.leafletMap!,
this._tileLayer!,
darkMode
);
this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
}
private async _loadMap(): Promise<void> {
let map = this.shadowRoot!.getElementById("map");
if (!map) {
map = document.createElement("div");
map.id = "map";
this.shadowRoot!.append(map);
}
const darkMode = this.darkMode ?? this.hass.themes.darkMode;
[this.leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
map,
darkMode
);
this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
this._loaded = true;
}
public fitMap(): void {
if (!this.leafletMap || !this.Leaflet || !this.hass) {
return;
}
if (!this._mapItems.length && !this.layers?.length) {
this.leafletMap.setView(
new this.Leaflet.LatLng( new this.Leaflet.LatLng(
this.hass.config.latitude, this.hass.config.latitude,
this.hass.config.longitude this.hass.config.longitude
), ),
this.zoom || 14 this.zoom
); );
return; return;
} }
const bounds = this.Leaflet.latLngBounds( let bounds = this.Leaflet.latLngBounds(
this._mapItems ? this._mapItems.map((item) => item.getLatLng()) : [] this._mapItems ? this._mapItems.map((item) => item.getLatLng()) : []
); );
this._leafletMap.fitBounds(bounds.pad(0.5));
if (this.zoom && this._leafletMap.getZoom() > this.zoom) { if (this.fitZones) {
this._leafletMap.setZoom(this.zoom); this._mapZones?.forEach((zone) => {
bounds.extend(
"getBounds" in zone ? zone.getBounds() : zone.getLatLng()
);
});
} }
this.layers?.forEach((layer: any) => {
bounds.extend(
"getBounds" in layer ? layer.getBounds() : layer.getLatLng()
);
});
if (!this.layers) {
bounds = bounds.pad(0.5);
}
this.leafletMap.fitBounds(bounds, { maxZoom: this.zoom });
}
private _drawLayers(prevLayers: Layer[] | undefined): void {
if (prevLayers) {
prevLayers.forEach((layer) => layer.remove());
}
if (!this.layers) {
return;
}
const map = this.leafletMap!;
this.layers.forEach((layer) => {
map.addLayer(layer);
});
}
private _drawPaths(): void {
const hass = this.hass;
const map = this.leafletMap;
const Leaflet = this.Leaflet;
if (!hass || !map || !Leaflet) {
return;
}
if (this._mapPaths.length) {
this._mapPaths.forEach((marker) => marker.remove());
this._mapPaths = [];
}
if (!this.paths) {
return;
}
const darkPrimaryColor = getComputedStyle(this).getPropertyValue(
"--dark-primary-color"
);
this.paths.forEach((path) => {
let opacityStep: number;
let baseOpacity: number;
if (path.gradualOpacity) {
opacityStep = path.gradualOpacity / (path.points.length - 2);
baseOpacity = 1 - path.gradualOpacity;
}
for (
let pointIndex = 0;
pointIndex < path.points.length - 1;
pointIndex++
) {
const opacity = path.gradualOpacity
? baseOpacity! + pointIndex * opacityStep!
: undefined;
// DRAW point
this._mapPaths.push(
Leaflet!.circleMarker(path.points[pointIndex], {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: false,
})
);
// DRAW line between this and next point
this._mapPaths.push(
Leaflet!.polyline(
[path.points[pointIndex], path.points[pointIndex + 1]],
{
color: path.color || darkPrimaryColor,
opacity,
interactive: false,
}
)
);
}
const pointIndex = path.points.length - 1;
if (pointIndex >= 0) {
const opacity = path.gradualOpacity
? baseOpacity! + pointIndex * opacityStep!
: undefined;
// DRAW end path point
this._mapPaths.push(
Leaflet!.circleMarker(path.points[pointIndex], {
radius: 3,
color: path.color || darkPrimaryColor,
opacity,
fillOpacity: opacity,
interactive: false,
})
);
}
this._mapPaths.forEach((marker) => map.addLayer(marker));
});
} }
private _drawEntities(): void { private _drawEntities(): void {
const hass = this.hass; const hass = this.hass;
const map = this._leafletMap; const map = this.leafletMap;
const Leaflet = this.Leaflet; const Leaflet = this.Leaflet;
if (!hass || !map || !Leaflet) { if (!hass || !map || !Leaflet) {
return; return;
} }
if (this._mapItems) { if (this._mapItems.length) {
this._mapItems.forEach((marker) => marker.remove()); this._mapItems.forEach((marker) => marker.remove());
this._mapItems = [];
} }
const mapItems: Layer[] = (this._mapItems = []);
if (this._mapZones) { if (this._mapZones.length) {
this._mapZones.forEach((marker) => marker.remove()); this._mapZones.forEach((marker) => marker.remove());
this._mapZones = [];
} }
const mapZones: Layer[] = (this._mapZones = []);
const allEntities = this.entities!.concat(); if (!this.entities) {
return;
}
for (const entity of allEntities) { const computedStyles = getComputedStyle(this);
const entityId = entity; const zoneColor = computedStyles.getPropertyValue("--accent-color");
const stateObj = hass.states[entityId]; const darkPrimaryColor = computedStyles.getPropertyValue(
"--dark-primary-color"
);
const className =
this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light";
for (const entity of this.entities) {
const stateObj = hass.states[getEntityId(entity)];
if (!stateObj) { if (!stateObj) {
continue; continue;
} }
@ -240,13 +372,12 @@ class HaMap extends LitElement {
} }
// create marker with the icon // create marker with the icon
mapZones.push( this._mapZones.push(
Leaflet.marker([latitude, longitude], { Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({ icon: Leaflet.divIcon({
html: iconHTML, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: className,
this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light",
}), }),
interactive: false, interactive: false,
title, title,
@ -254,10 +385,10 @@ class HaMap extends LitElement {
); );
// create circle around it // create circle around it
mapZones.push( this._mapZones.push(
Leaflet.circle([latitude, longitude], { Leaflet.circle([latitude, longitude], {
interactive: false, interactive: false,
color: "#FF9800", color: zoneColor,
radius, radius,
}) })
); );
@ -273,17 +404,20 @@ class HaMap extends LitElement {
.join("") .join("")
.substr(0, 3); .substr(0, 3);
// create market with the icon // create marker with the icon
mapItems.push( this._mapItems.push(
Leaflet.marker([latitude, longitude], { Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({ icon: Leaflet.divIcon({
// Leaflet clones this element before adding it to the map. This messes up
// our Polymer object and we can't pass data through. Thus we hack like this.
html: ` html: `
<ha-entity-marker <ha-entity-marker
entity-id="${entityId}" entity-id="${getEntityId(entity)}"
entity-name="${entityName}" entity-name="${entityName}"
entity-picture="${entityPicture || ""}" entity-picture="${entityPicture || ""}"
${
typeof entity !== "string"
? `entity-color="${entity.color}"`
: ""
}
></ha-entity-marker> ></ha-entity-marker>
`, `,
iconSize: [48, 48], iconSize: [48, 48],
@ -295,10 +429,10 @@ class HaMap extends LitElement {
// create circle around if entity has accuracy // create circle around if entity has accuracy
if (gpsAccuracy) { if (gpsAccuracy) {
mapItems.push( this._mapItems.push(
Leaflet.circle([latitude, longitude], { Leaflet.circle([latitude, longitude], {
interactive: false, interactive: false,
color: "#0288D1", color: darkPrimaryColor,
radius: gpsAccuracy, radius: gpsAccuracy,
}) })
); );
@ -309,20 +443,14 @@ class HaMap extends LitElement {
this._mapZones.forEach((marker) => map.addLayer(marker)); this._mapZones.forEach((marker) => map.addLayer(marker));
} }
private _attachObserver(): void { private async _attachObserver(): Promise<void> {
// Observe changes to map size and invalidate to prevent broken rendering if (!this._resizeObserver) {
// Uses ResizeObserver in Chrome, otherwise window resize event await installResizeObserver();
this._resizeObserver = new ResizeObserver(() => {
// @ts-ignore this.leafletMap?.invalidateSize({ debounceMoveend: true });
if (typeof ResizeObserver === "function") { });
// @ts-ignore
this._resizeObserver = new ResizeObserver(() =>
this._debouncedResizeListener()
);
this._resizeObserver.observe(this._mapEl);
} else {
window.addEventListener("resize", this._debouncedResizeListener);
} }
this._resizeObserver.observe(this);
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
@ -337,13 +465,25 @@ class HaMap extends LitElement {
#map.dark { #map.dark {
background: #090909; background: #090909;
} }
.light {
color: #000000;
}
.dark { .dark {
color: #ffffff; color: #ffffff;
} }
.leaflet-marker-draggable {
.light { cursor: move !important;
color: #000000; }
.leaflet-edit-resize {
border-radius: 50%;
cursor: nesw-resize !important;
}
.named-icon {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
} }
`; `;
} }

View File

@ -1,433 +0,0 @@
import "@polymer/polymer/lib/utils/debounce";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
import LocalizeMixin from "../mixins/localize-mixin";
import "./entity/ha-chart-base";
class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style>
:host {
display: block;
overflow: hidden;
height: 0;
transition: height 0.3s ease-in-out;
}
</style>
<ha-chart-base
id="chart"
hass="[[hass]]"
data="[[chartData]]"
identifier="[[identifier]]"
rendered="{{rendered}}"
></ha-chart-base>
`;
}
static get properties() {
return {
hass: {
type: Object,
},
chartData: Object,
data: Object,
names: Object,
unit: String,
identifier: String,
isSingleDevice: {
type: Boolean,
value: false,
},
endTime: Object,
rendered: {
type: Boolean,
value: false,
observer: "_onRenderedChanged",
},
};
}
static get observers() {
return ["dataChanged(data, endTime, isSingleDevice)"];
}
connectedCallback() {
super.connectedCallback();
this._isAttached = true;
this.drawChart();
}
ready() {
super.ready();
// safari doesn't always render the canvas when we animate it, so we remove overflow hidden when the animation is complete
this.addEventListener("transitionend", () => {
this.style.overflow = "auto";
});
}
dataChanged() {
this.drawChart();
}
_onRenderedChanged(rendered) {
if (rendered) {
this.animateHeight();
}
}
animateHeight() {
requestAnimationFrame(() =>
requestAnimationFrame(() => {
this.style.height = this.$.chart.scrollHeight + "px";
})
);
}
drawChart() {
if (!this._isAttached) {
return;
}
const unit = this.unit;
const deviceStates = this.data;
const datasets = [];
let endTime;
if (deviceStates.length === 0) {
return;
}
function safeParseFloat(value) {
const parsed = parseFloat(value);
return isFinite(parsed) ? parsed : null;
}
endTime =
this.endTime ||
// Get the highest date from the last date of each device
new Date(
Math.max.apply(
null,
deviceStates.map(
(devSts) =>
new Date(devSts.states[devSts.states.length - 1].last_changed)
)
)
);
if (endTime > new Date()) {
endTime = new Date();
}
const names = this.names || {};
deviceStates.forEach((states) => {
const domain = states.domain;
const name = names[states.entity_id] || states.name;
// array containing [value1, value2, etc]
let prevValues;
const data = [];
function pushData(timestamp, datavalues) {
if (!datavalues) return;
if (timestamp > endTime) {
// Drop datapoints that are after the requested endTime. This could happen if
// endTime is "now" and client time is not in sync with server time.
return;
}
data.forEach((d, i) => {
if (datavalues[i] === null && prevValues && prevValues[i] !== null) {
// null data values show up as gaps in the chart.
// If the current value for the dataset is null and the previous
// value of the data set is not null, then add an 'end' point
// to the chart for the previous value. Otherwise the gap will
// be too big. It will go from the start of the previous data
// value until the start of the next data value.
d.data.push({ x: timestamp, y: prevValues[i] });
}
d.data.push({ x: timestamp, y: datavalues[i] });
});
prevValues = datavalues;
}
function addColumn(nameY, step, fill) {
let dataFill = false;
let dataStep = false;
if (fill) {
dataFill = "origin";
}
if (step) {
dataStep = "before";
}
data.push({
label: nameY,
fill: dataFill,
steppedLine: dataStep,
pointRadius: 0,
data: [],
unitText: unit,
});
}
if (
domain === "thermostat" ||
domain === "climate" ||
domain === "water_heater"
) {
const hasHvacAction = states.states.some(
(state) => state.attributes && state.attributes.hvac_action
);
const isHeating =
domain === "climate" && hasHvacAction
? (state) => state.attributes.hvac_action === "heating"
: (state) => state.state === "heat";
const isCooling =
domain === "climate" && hasHvacAction
? (state) => state.attributes.hvac_action === "cooling"
: (state) => state.state === "cool";
const hasHeat = states.states.some(isHeating);
const hasCool = states.states.some(isCooling);
// We differentiate between thermostats that have a target temperature
// range versus ones that have just a target temperature
// Using step chart by step-before so manually interpolation not needed.
const hasTargetRange = states.states.some(
(state) =>
state.attributes &&
state.attributes.target_temp_high !==
state.attributes.target_temp_low
);
addColumn(
`${this.hass.localize(
"ui.card.climate.current_temperature",
"name",
name
)}`,
true
);
if (hasHeat) {
addColumn(
`${this.hass.localize("ui.card.climate.heating", "name", name)}`,
true,
true
);
// The "heating" series uses steppedArea to shade the area below the current
// temperature when the thermostat is calling for heat.
}
if (hasCool) {
addColumn(
`${this.hass.localize("ui.card.climate.cooling", "name", name)}`,
true,
true
);
// The "cooling" series uses steppedArea to shade the area below the current
// temperature when the thermostat is calling for heat.
}
if (hasTargetRange) {
addColumn(
`${this.hass.localize(
"ui.card.climate.target_temperature_mode",
"name",
name,
"mode",
this.hass.localize("ui.card.climate.high")
)}`,
true
);
addColumn(
`${this.hass.localize(
"ui.card.climate.target_temperature_mode",
"name",
name,
"mode",
this.hass.localize("ui.card.climate.low")
)}`,
true
);
} else {
addColumn(
`${this.hass.localize(
"ui.card.climate.target_temperature_entity",
"name",
name
)}`,
true
);
}
states.states.forEach((state) => {
if (!state.attributes) return;
const curTemp = safeParseFloat(state.attributes.current_temperature);
const series = [curTemp];
if (hasHeat) {
series.push(isHeating(state) ? curTemp : null);
}
if (hasCool) {
series.push(isCooling(state) ? curTemp : null);
}
if (hasTargetRange) {
const targetHigh = safeParseFloat(
state.attributes.target_temp_high
);
const targetLow = safeParseFloat(state.attributes.target_temp_low);
series.push(targetHigh, targetLow);
pushData(new Date(state.last_changed), series);
} else {
const target = safeParseFloat(state.attributes.temperature);
series.push(target);
pushData(new Date(state.last_changed), series);
}
});
} else if (domain === "humidifier") {
addColumn(
`${this.hass.localize(
"ui.card.humidifier.target_humidity_entity",
"name",
name
)}`,
true
);
addColumn(
`${this.hass.localize("ui.card.humidifier.on_entity", "name", name)}`,
true,
true
);
states.states.forEach((state) => {
if (!state.attributes) return;
const target = safeParseFloat(state.attributes.humidity);
const series = [target];
series.push(state.state === "on" ? target : null);
pushData(new Date(state.last_changed), series);
});
} else {
// Only disable interpolation for sensors
const isStep = domain === "sensor";
addColumn(name, isStep);
let lastValue = null;
let lastDate = null;
let lastNullDate = null;
// Process chart data.
// When state is `unknown`, calculate the value and break the line.
states.states.forEach((state) => {
const value = safeParseFloat(state.state);
const date = new Date(state.last_changed);
if (value !== null && lastNullDate !== null) {
const dateTime = date.getTime();
const lastNullDateTime = lastNullDate.getTime();
const lastDateTime = lastDate.getTime();
const tmpValue =
(value - lastValue) *
((lastNullDateTime - lastDateTime) /
(dateTime - lastDateTime)) +
lastValue;
pushData(lastNullDate, [tmpValue]);
pushData(new Date(lastNullDateTime + 1), [null]);
pushData(date, [value]);
lastDate = date;
lastValue = value;
lastNullDate = null;
} else if (value !== null && lastNullDate === null) {
pushData(date, [value]);
lastDate = date;
lastValue = value;
} else if (
value === null &&
lastNullDate === null &&
lastValue !== null
) {
lastNullDate = date;
}
});
}
// Add an entry for final values
pushData(endTime, prevValues, false);
// Concat two arrays
Array.prototype.push.apply(datasets, data);
});
const formatTooltipTitle = (items, data) => {
const item = items[0];
const date = data.datasets[item.datasetIndex].data[item.index].x;
return formatDateTimeWithSeconds(date, this.hass.locale);
};
const chartOptions = {
type: "line",
unit: unit,
legend: !this.isSingleDevice,
options: {
scales: {
xAxes: [
{
type: "time",
ticks: {
major: {
fontStyle: "bold",
},
source: "auto",
sampleSize: 5,
autoSkipPadding: 20,
maxRotation: 0,
},
},
],
yAxes: [
{
ticks: {
maxTicksLimit: 7,
},
},
],
},
tooltips: {
mode: "neareach",
callbacks: {
title: formatTooltipTitle,
},
},
hover: {
mode: "neareach",
},
layout: {
padding: {
top: 5,
},
},
elements: {
line: {
tension: 0.1,
pointRadius: 0,
borderWidth: 1.5,
},
point: {
hitRadius: 5,
},
},
plugins: {
filler: {
propagate: true,
},
},
},
data: {
labels: [],
datasets: datasets,
},
};
this.chartData = chartOptions;
}
}
customElements.define("state-history-chart-line", StateHistoryChartLine);

View File

@ -1,286 +0,0 @@
import "@polymer/polymer/lib/utils/debounce";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
import { computeDomain } from "../common/entity/compute_domain";
import { computeRTL } from "../common/util/compute_rtl";
import LocalizeMixin from "../mixins/localize-mixin";
import "./entity/ha-chart-base";
/** Binary sensor device classes for which the static colors for on/off need to be inverted.
* List the ones were "off" = good or normal state = should be rendered "green".
*/
const BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED = new Set([
"battery",
"door",
"garage_door",
"gas",
"lock",
"opening",
"problem",
"safety",
"smoke",
"window",
]);
class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style>
:host {
display: block;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
:host([rendered]) {
opacity: 1;
}
ha-chart-base {
direction: ltr;
}
</style>
<ha-chart-base
hass="[[hass]]"
data="[[chartData]]"
rendered="{{rendered}}"
rtl="{{rtl}}"
></ha-chart-base>
`;
}
static get properties() {
return {
hass: {
type: Object,
},
chartData: Object,
data: {
type: Object,
observer: "dataChanged",
},
names: Object,
noSingle: Boolean,
endTime: Date,
rendered: {
type: Boolean,
value: false,
reflectToAttribute: true,
},
rtl: {
reflectToAttribute: true,
computed: "_computeRTL(hass)",
},
};
}
static get observers() {
return ["dataChanged(data, endTime, localize, language)"];
}
connectedCallback() {
super.connectedCallback();
this._isAttached = true;
this.drawChart();
}
dataChanged() {
this.drawChart();
}
drawChart() {
const staticColors = {
on: 1,
off: 0,
home: 1,
not_home: 0,
unavailable: "#a0a0a0",
unknown: "#606060",
idle: 2,
};
let stateHistory = this.data;
if (!this._isAttached) {
return;
}
if (!stateHistory) {
stateHistory = [];
}
const startTime = new Date(
stateHistory.reduce(
(minTime, stateInfo) =>
Math.min(minTime, new Date(stateInfo.data[0].last_changed)),
new Date()
)
);
// end time is Math.max(startTime, last_event)
let endTime =
this.endTime ||
new Date(
stateHistory.reduce(
(maxTime, stateInfo) =>
Math.max(
maxTime,
new Date(stateInfo.data[stateInfo.data.length - 1].last_changed)
),
startTime
)
);
if (endTime > new Date()) {
endTime = new Date();
}
const labels = [];
const datasets = [];
// stateHistory is a list of lists of sorted state objects
const names = this.names || {};
stateHistory.forEach((stateInfo) => {
let newLastChanged;
let prevState = null;
let locState = null;
let prevLastChanged = startTime;
const entityDisplay = names[stateInfo.entity_id] || stateInfo.name;
const invertOnOff =
computeDomain(stateInfo.entity_id) === "binary_sensor" &&
BINARY_SENSOR_DEVICE_CLASS_COLOR_INVERTED.has(
this.hass.states[stateInfo.entity_id].attributes.device_class
);
const dataRow = [];
stateInfo.data.forEach((state) => {
let newState = state.state;
const timeStamp = new Date(state.last_changed);
if (newState === undefined || newState === "") {
newState = null;
}
if (timeStamp > endTime) {
// Drop datapoints that are after the requested endTime. This could happen if
// endTime is 'now' and client time is not in sync with server time.
return;
}
if (prevState !== null && newState !== prevState) {
newLastChanged = new Date(state.last_changed);
dataRow.push([
prevLastChanged,
newLastChanged,
locState,
prevState,
invertOnOff,
]);
prevState = newState;
locState = state.state_localize;
prevLastChanged = newLastChanged;
} else if (prevState === null) {
prevState = newState;
locState = state.state_localize;
prevLastChanged = new Date(state.last_changed);
}
});
if (prevState !== null) {
dataRow.push([
prevLastChanged,
endTime,
locState,
prevState,
invertOnOff,
]);
}
datasets.push({
data: dataRow,
entity_id: stateInfo.entity_id,
});
labels.push(entityDisplay);
});
const formatTooltipLabel = (item, data) => {
const values = data.datasets[item.datasetIndex].data[item.index];
const start = formatDateTimeWithSeconds(values[0], this.hass.locale);
const end = formatDateTimeWithSeconds(values[1], this.hass.locale);
const state = values[2];
return [state, start, end];
};
const formatTooltipBeforeBody = (item, data) => {
if (!this.hass.userData || !this.hass.userData.showAdvanced || !item[0]) {
return "";
}
// Extract the entity ID from the dataset.
const values = data.datasets[item[0].datasetIndex];
return values.entity_id || "";
};
const chartOptions = {
type: "timeline",
options: {
tooltips: {
callbacks: {
label: formatTooltipLabel,
beforeBody: formatTooltipBeforeBody,
},
},
scales: {
xAxes: [
{
ticks: {
major: {
fontStyle: "bold",
},
sampleSize: 5,
autoSkipPadding: 50,
maxRotation: 0,
},
categoryPercentage: undefined,
barPercentage: undefined,
time: {
format: undefined,
},
},
],
yAxes: [
{
afterSetDimensions: (yaxe) => {
yaxe.maxWidth = yaxe.chart.width * 0.18;
},
position: this._computeRTL ? "right" : "left",
categoryPercentage: undefined,
barPercentage: undefined,
time: { format: undefined },
},
],
},
},
datasets: {
categoryPercentage: 0.8,
barPercentage: 0.9,
},
data: {
labels: labels,
datasets: datasets,
},
colors: {
staticColors: staticColors,
staticColorIndex: 3,
},
};
this.chartData = chartOptions;
}
_computeRTL(hass) {
return computeRTL(hass);
}
}
customElements.define(
"state-history-chart-timeline",
StateHistoryChartTimeline
);

View File

@ -27,6 +27,12 @@ export type ConfigEntryMutableParams = Partial<
> >
>; >;
export const ERROR_STATES: ConfigEntry["state"][] = [
"migration_error",
"setup_error",
"setup_retry",
];
export const getConfigEntries = (hass: HomeAssistant) => export const getConfigEntries = (hass: HomeAssistant) =>
hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry"); hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");

View File

@ -14,12 +14,17 @@ interface HassioHardwareAudioList {
}; };
} }
interface HardwareDevice {
attributes: Record<string, string>;
by_id: null | string;
dev_path: string;
name: string;
subsystem: string;
sysfs: string;
}
export interface HassioHardwareInfo { export interface HassioHardwareInfo {
serial: string[]; devices: HardwareDevice[];
input: string[];
disk: string[];
gpio: string[];
audio: Record<string, unknown>;
} }
export const fetchHassioHardwareAudio = async ( export const fetchHassioHardwareAudio = async (

View File

@ -41,6 +41,7 @@ export interface HassioSnapshotDetail extends HassioSnapshot {
export interface HassioFullSnapshotCreateParams { export interface HassioFullSnapshotCreateParams {
name: string; name: string;
password?: string; password?: string;
confirm_password?: string;
} }
export interface HassioPartialSnapshotCreateParams export interface HassioPartialSnapshotCreateParams
extends HassioFullSnapshotCreateParams { extends HassioFullSnapshotCreateParams {

View File

@ -8,6 +8,7 @@ export enum LightColorModes {
ONOFF = "onoff", ONOFF = "onoff",
BRIGHTNESS = "brightness", BRIGHTNESS = "brightness",
COLOR_TEMP = "color_temp", COLOR_TEMP = "color_temp",
WHITE = "white",
HS = "hs", HS = "hs",
XY = "xy", XY = "xy",
RGB = "rgb", RGB = "rgb",

25
src/data/select.ts Normal file
View File

@ -0,0 +1,25 @@
import {
HassEntityAttributeBase,
HassEntityBase,
} from "home-assistant-js-websocket";
import { HomeAssistant } from "../types";
interface SelectEntityAttributes extends HassEntityAttributeBase {
options: string[];
}
export interface SelectEntity extends HassEntityBase {
attributes: SelectEntityAttributes;
}
export const setSelectOption = (
hass: HomeAssistant,
entity: string,
option: string
) =>
hass.callService(
"select",
"select_option",
{ option },
{ entity_id: entity }
);

View File

@ -1,14 +1,6 @@
import { navigate } from "../common/navigate"; import { navigate } from "../common/navigate";
import {
DEFAULT_ACCENT_COLOR,
DEFAULT_PRIMARY_COLOR,
} from "../resources/ha-style";
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
export const defaultRadiusColor = DEFAULT_ACCENT_COLOR;
export const homeRadiusColor = DEFAULT_PRIMARY_COLOR;
export const passiveRadiusColor = "#9b9b9b";
export interface Zone { export interface Zone {
id: string; id: string;
name: string; name: string;

View File

@ -21,6 +21,7 @@ export interface ZWaveJSClient {
export interface ZWaveJSController { export interface ZWaveJSController {
home_id: string; home_id: string;
nodes: number[]; nodes: number[];
is_heal_network_active: boolean;
} }
export interface ZWaveJSNode { export interface ZWaveJSNode {
@ -77,6 +78,11 @@ export interface ZWaveJSRefreshNodeStatusMessage {
stage?: string; stage?: string;
} }
export interface ZWaveJSHealNetworkStatusMessage {
event: string;
heal_node_status: { [key: number]: string };
}
export enum NodeStatus { export enum NodeStatus {
Unknown, Unknown,
Asleep, Asleep,
@ -172,6 +178,37 @@ export const reinterviewNode = (
} }
); );
export const healNetwork = (
hass: HomeAssistant,
entry_id: string
): Promise<UnsubscribeFunc> =>
hass.callWS({
type: "zwave_js/begin_healing_network",
entry_id: entry_id,
});
export const stopHealNetwork = (
hass: HomeAssistant,
entry_id: string
): Promise<UnsubscribeFunc> =>
hass.callWS({
type: "zwave_js/stop_healing_network",
entry_id: entry_id,
});
export const subscribeHealNetworkProgress = (
hass: HomeAssistant,
entry_id: string,
callbackFunction: (message: ZWaveJSHealNetworkStatusMessage) => void
): Promise<UnsubscribeFunc> =>
hass.connection.subscribeMessage(
(message: any) => callbackFunction(message),
{
type: "zwave_js/subscribe_heal_network_progress",
entry_id: entry_id,
}
);
export const getIdentifiersFromDevice = ( export const getIdentifiersFromDevice = (
device: DeviceRegistryEntry device: DeviceRegistryEntry
): ZWaveJSNodeIdentifiers | undefined => { ): ZWaveJSNodeIdentifiers | undefined => {
@ -193,6 +230,18 @@ export const getIdentifiersFromDevice = (
}; };
}; };
export type ZWaveJSLogUpdate = ZWaveJSLogMessageUpdate | ZWaveJSLogConfigUpdate;
interface ZWaveJSLogMessageUpdate {
type: "log_message";
log_message: ZWaveJSLogMessage;
}
interface ZWaveJSLogConfigUpdate {
type: "log_config";
log_config: ZWaveJSLogConfig;
}
export interface ZWaveJSLogMessage { export interface ZWaveJSLogMessage {
timestamp: string; timestamp: string;
level: string; level: string;
@ -203,10 +252,10 @@ export interface ZWaveJSLogMessage {
export const subscribeZWaveJSLogs = ( export const subscribeZWaveJSLogs = (
hass: HomeAssistant, hass: HomeAssistant,
entry_id: string, entry_id: string,
callback: (message: ZWaveJSLogMessage) => void callback: (update: ZWaveJSLogUpdate) => void
) => ) =>
hass.connection.subscribeMessage<ZWaveJSLogMessage>(callback, { hass.connection.subscribeMessage<ZWaveJSLogUpdate>(callback, {
type: "zwave_js/subscribe_logs", type: "zwave_js/subscribe_log_updates",
entry_id, entry_id,
}); });

View File

@ -232,7 +232,6 @@ class DataEntryFlowDialog extends LitElement {
<step-flow-pick-handler <step-flow-pick-handler
.hass=${this.hass} .hass=${this.hass}
.handlers=${this._handlers} .handlers=${this._handlers}
.showAdvanced=${this._params.showAdvanced}
@handler-picked=${this._handlerPicked} @handler-picked=${this._handlerPicked}
></step-flow-pick-handler> ></step-flow-pick-handler>
` `

View File

@ -90,7 +90,10 @@ export const showConfigFlowDialog = (
}, },
renderShowFormStepFieldError(hass, step, error) { renderShowFormStepFieldError(hass, step, error) {
return hass.localize(`component.${step.handler}.config.error.${error}`); return hass.localize(
`component.${step.handler}.config.error.${error}`,
step.description_placeholders
);
}, },
renderExternalStepHeader(hass, step) { renderExternalStepHeader(hass, step) {

View File

@ -88,9 +88,10 @@ export const showOptionsFlowDialog = (
); );
}, },
renderShowFormStepFieldError(hass, _step, error) { renderShowFormStepFieldError(hass, step, error) {
return hass.localize( return hass.localize(
`component.${configEntry.domain}.options.error.${error}` `component.${configEntry.domain}.options.error.${error}`,
step.description_placeholders
); );
}, },
@ -108,12 +109,28 @@ export const showOptionsFlowDialog = (
`; `;
}, },
renderShowFormProgressHeader(_hass, _step) { renderShowFormProgressHeader(hass, step) {
return ""; return (
hass.localize(
`component.${configEntry.domain}.options.step.${step.step_id}.title`
) || hass.localize(`component.${configEntry.domain}.title`)
);
}, },
renderShowFormProgressDescription(_hass, _step) { renderShowFormProgressDescription(hass, step) {
return ""; const description = hass.localize(
`component.${configEntry.domain}.options.progress.${step.progress_action}`,
step.description_placeholders
);
return description
? html`
<ha-markdown
allowsvg
breaks
.content=${description}
></ha-markdown>
`
: "";
}, },
} }
); );

View File

@ -3,7 +3,6 @@ import "@polymer/paper-item/paper-item-body";
import Fuse from "fuse.js"; import Fuse from "fuse.js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
@ -34,9 +33,7 @@ declare global {
class StepFlowPickHandler extends LitElement { class StepFlowPickHandler extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public handlers!: string[]; @property({ attribute: false }) public handlers!: string[];
@property() public showAdvanced?: boolean;
@state() private _filter?: string; @state() private _filter?: string;
@ -87,47 +84,50 @@ class StepFlowPickHandler extends LitElement {
width: `${this._width}px`, width: `${this._width}px`,
height: `${this._height}px`, height: `${this._height}px`,
})} })}
class=${classMap({ advanced: Boolean(this.showAdvanced) })}
> >
${handlers.map( ${handlers.length
(handler: HandlerObj) => ? handlers.map(
html` (handler: HandlerObj) =>
<paper-icon-item html`
@click=${this._handlerPicked} <paper-icon-item
.handler=${handler} @click=${this._handlerPicked}
> .handler=${handler}
<img >
slot="item-icon" <img
loading="lazy" slot="item-icon"
src=${brandsUrl(handler.slug, "icon", true)} loading="lazy"
referrerpolicy="no-referrer" src=${brandsUrl(handler.slug, "icon", true)}
/> referrerpolicy="no-referrer"
/>
<paper-item-body> ${handler.name} </paper-item-body> <paper-item-body> ${handler.name} </paper-item-body>
<ha-icon-next></ha-icon-next> <ha-icon-next></ha-icon-next>
</paper-icon-item> </paper-icon-item>
` `
)} )
: html`
<p>
${this.hass.localize(
"ui.panel.config.integrations.note_about_integrations"
)}<br />
${this.hass.localize(
"ui.panel.config.integrations.note_about_website_reference"
)}<a
href="${documentationUrl(
this.hass,
`/integrations/${
this._filter ? `#search/${this._filter}` : ""
}`
)}"
target="_blank"
rel="noreferrer"
>${this.hass.localize(
"ui.panel.config.integrations.home_assistant_website"
)}</a
>.
</p>
`}
</div> </div>
${this.showAdvanced
? html`
<p>
${this.hass.localize(
"ui.panel.config.integrations.note_about_integrations"
)}<br />
${this.hass.localize(
"ui.panel.config.integrations.note_about_website_reference"
)}<a
href="${documentationUrl(this.hass, "/integrations/")}"
target="_blank"
rel="noreferrer"
>${this.hass.localize(
"ui.panel.config.integrations.home_assistant_website"
)}</a
>.
</p>
`
: ""}
`; `;
} }
@ -193,9 +193,6 @@ class StepFlowPickHandler extends LitElement {
div { div {
max-height: calc(100vh - 134px); max-height: calc(100vh - 134px);
} }
div.advanced {
max-height: calc(100vh - 250px);
}
} }
paper-icon-item { paper-icon-item {
cursor: pointer; cursor: pointer;

View File

@ -9,6 +9,7 @@ import {
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { supportsFeature } from "../../../common/entity/supports-feature"; import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes"; import "../../../components/ha-attributes";
import "../../../components/ha-button-toggle-group"; import "../../../components/ha-button-toggle-group";
@ -28,11 +29,6 @@ import {
} from "../../../data/light"; } from "../../../data/light";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
const toggleButtons = [
{ label: "Color", value: "color" },
{ label: "Temperature", value: LightColorModes.COLOR_TEMP },
];
@customElement("more-info-light") @customElement("more-info-light")
class MoreInfoLight extends LitElement { class MoreInfoLight extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -59,7 +55,7 @@ class MoreInfoLight extends LitElement {
@state() private _colorPickerColor?: [number, number, number]; @state() private _colorPickerColor?: [number, number, number];
@state() private _mode?: "color" | LightColorModes.COLOR_TEMP; @state() private _mode?: "color" | LightColorModes;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass || !this.stateObj) { if (!this.hass || !this.stateObj) {
@ -71,6 +67,11 @@ class MoreInfoLight extends LitElement {
LightColorModes.COLOR_TEMP LightColorModes.COLOR_TEMP
); );
const supportsWhite = lightSupportsColorMode(
this.stateObj,
LightColorModes.WHITE
);
const supportsRgbww = lightSupportsColorMode( const supportsRgbww = lightSupportsColorMode(
this.stateObj, this.stateObj,
LightColorModes.RGBWW LightColorModes.RGBWW
@ -101,16 +102,17 @@ class MoreInfoLight extends LitElement {
${this.stateObj.state === "on" ${this.stateObj.state === "on"
? html` ? html`
${supportsTemp || supportsColor ? html`<hr />` : ""} ${supportsTemp || supportsColor ? html`<hr />` : ""}
${supportsTemp && supportsColor ${supportsColor && (supportsTemp || supportsWhite)
? html`<ha-button-toggle-group ? html`<ha-button-toggle-group
fullWidth fullWidth
.buttons=${toggleButtons} .buttons=${this._toggleButtons(supportsTemp, supportsWhite)}
.active=${this._mode} .active=${this._mode}
@value-changed=${this._modeChanged} @value-changed=${this._modeChanged}
></ha-button-toggle-group>` ></ha-button-toggle-group>`
: ""} : ""}
${supportsTemp && ${supportsTemp &&
(!supportsColor || this._mode === LightColorModes.COLOR_TEMP) ((!supportsColor && !supportsWhite) ||
this._mode === LightColorModes.COLOR_TEMP)
? html` ? html`
<ha-labeled-slider <ha-labeled-slider
class="color_temp" class="color_temp"
@ -126,7 +128,8 @@ class MoreInfoLight extends LitElement {
></ha-labeled-slider> ></ha-labeled-slider>
` `
: ""} : ""}
${supportsColor && (!supportsTemp || this._mode === "color") ${supportsColor &&
((!supportsTemp && !supportsWhite) || this._mode === "color")
? html` ? html`
<div class="segmentationContainer"> <div class="segmentationContainer">
<ha-color-picker <ha-color-picker
@ -251,7 +254,7 @@ class MoreInfoLight extends LitElement {
) { ) {
this._mode = lightIsInColorMode(this.stateObj!) this._mode = lightIsInColorMode(this.stateObj!)
? "color" ? "color"
: LightColorModes.COLOR_TEMP; : this.stateObj!.attributes.color_mode;
} }
let brightnessAdjust = 100; let brightnessAdjust = 100;
@ -300,6 +303,19 @@ class MoreInfoLight extends LitElement {
} }
} }
private _toggleButtons = memoizeOne(
(supportsTemp: boolean, supportsWhite: boolean) => {
const modes = [{ label: "Color", value: "color" }];
if (supportsTemp) {
modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
}
if (supportsWhite) {
modes.push({ label: "White", value: LightColorModes.WHITE });
}
return modes;
}
);
private _modeChanged(ev: CustomEvent) { private _modeChanged(ev: CustomEvent) {
this._mode = ev.detail.value; this._mode = ev.detail.value;
} }
@ -326,6 +342,14 @@ class MoreInfoLight extends LitElement {
this._brightnessSliderValue = bri; this._brightnessSliderValue = bri;
if (this._mode === LightColorModes.WHITE) {
this.hass.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id,
white: Math.min(255, Math.round((bri * 255) / 100)),
});
return;
}
if (this._brightnessAdjusted) { if (this._brightnessAdjusted) {
const rgb = const rgb =
this.stateObj!.attributes.rgb_color || this.stateObj!.attributes.rgb_color ||

View File

@ -23,16 +23,12 @@ class MoreInfoPerson extends LitElement {
} }
return html` return html`
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="id,user_id,editable"
></ha-attributes>
${this.stateObj.attributes.latitude && this.stateObj.attributes.longitude ${this.stateObj.attributes.latitude && this.stateObj.attributes.longitude
? html` ? html`
<ha-map <ha-map
.hass=${this.hass} .hass=${this.hass}
.entities=${this._entityArray(this.stateObj.entity_id)} .entities=${this._entityArray(this.stateObj.entity_id)}
autoFit
></ha-map> ></ha-map>
` `
: ""} : ""}
@ -51,6 +47,11 @@ class MoreInfoPerson extends LitElement {
</div> </div>
` `
: ""} : ""}
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="id,user_id,editable"
></ha-attributes>
`; `;
} }

View File

@ -17,11 +17,6 @@ class MoreInfoTimer extends LitElement {
} }
return html` return html`
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="remaining"
></ha-attributes>
<div class="actions"> <div class="actions">
${this.stateObj.state === "idle" || this.stateObj.state === "paused" ${this.stateObj.state === "idle" || this.stateObj.state === "paused"
? html` ? html`
@ -57,6 +52,11 @@ class MoreInfoTimer extends LitElement {
` `
: ""} : ""}
</div> </div>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
extra-filters="remaining"
></ha-attributes>
`; `;
} }

View File

@ -2,7 +2,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { throttle } from "../../common/util/throttle"; import { throttle } from "../../common/util/throttle";
import "../../components/state-history-charts"; import "../../components/chart/state-history-charts";
import { getRecentWithCache } from "../../data/cached-history"; import { getRecentWithCache } from "../../data/cached-history";
import { HistoryResult } from "../../data/history"; import { HistoryResult } from "../../data/history";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";

View File

@ -4,7 +4,7 @@ import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { computeStateDomain } from "../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { throttle } from "../../common/util/throttle"; import { throttle } from "../../common/util/throttle";
import "../../components/ha-circular-progress"; import "../../components/ha-circular-progress";
import "../../components/state-history-charts"; import { fetchUsers } from "../../data/user";
import { getLogbookData, LogbookEntry } from "../../data/logbook"; import { getLogbookData, LogbookEntry } from "../../data/logbook";
import { loadTraceContexts, TraceContexts } from "../../data/trace"; import { loadTraceContexts, TraceContexts } from "../../data/trace";
import "../../panels/logbook/ha-logbook"; import "../../panels/logbook/ha-logbook";
@ -22,10 +22,14 @@ export class MoreInfoLogbook extends LitElement {
@state() private _traceContexts?: TraceContexts; @state() private _traceContexts?: TraceContexts;
@state() private _persons = {}; @state() private _userIdToName = {};
private _lastLogbookDate?: Date; private _lastLogbookDate?: Date;
private _fetchUserPromise?: Promise<void>;
private _error?: string;
private _throttleGetLogbookEntries = throttle(() => { private _throttleGetLogbookEntries = throttle(() => {
this._getLogBookData(); this._getLogBookData();
}, 10000); }, 10000);
@ -42,7 +46,13 @@ export class MoreInfoLogbook extends LitElement {
return html` return html`
${isComponentLoaded(this.hass, "logbook") ${isComponentLoaded(this.hass, "logbook")
? !this._logbookEntries ? this._error
? html`<div class="no-entries">
${`${this.hass.localize(
"ui.components.logbook.retrieval_error"
)}: ${this._error}`}
</div>`
: !this._logbookEntries
? html` ? html`
<ha-circular-progress <ha-circular-progress
active active
@ -59,7 +69,7 @@ export class MoreInfoLogbook extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.entries=${this._logbookEntries} .entries=${this._logbookEntries}
.traceContexts=${this._traceContexts} .traceContexts=${this._traceContexts}
.userIdToName=${this._persons} .userIdToName=${this._userIdToName}
></ha-logbook> ></ha-logbook>
` `
: html`<div class="no-entries"> : html`<div class="no-entries">
@ -70,7 +80,7 @@ export class MoreInfoLogbook extends LitElement {
} }
protected firstUpdated(): void { protected firstUpdated(): void {
this._fetchPersonNames(); this._fetchUserPromise = this._fetchUserNames();
this.addEventListener("click", (ev) => { this.addEventListener("click", (ev) => {
if ((ev.composedPath()[0] as HTMLElement).tagName === "A") { if ((ev.composedPath()[0] as HTMLElement).tagName === "A") {
setTimeout(() => closeDialog("ha-more-info-dialog"), 500); setTimeout(() => closeDialog("ha-more-info-dialog"), 500);
@ -116,16 +126,25 @@ export class MoreInfoLogbook extends LitElement {
this._lastLogbookDate || this._lastLogbookDate ||
new Date(new Date().getTime() - 24 * 60 * 60 * 1000); new Date(new Date().getTime() - 24 * 60 * 60 * 1000);
const now = new Date(); const now = new Date();
const [newEntries, traceContexts] = await Promise.all([ let newEntries;
getLogbookData( let traceContexts;
this.hass,
lastDate.toISOString(), try {
now.toISOString(), [newEntries, traceContexts] = await Promise.all([
this.entityId, getLogbookData(
true this.hass,
), lastDate.toISOString(),
loadTraceContexts(this.hass), now.toISOString(),
]); this.entityId,
true
),
this.hass.user?.is_admin ? loadTraceContexts(this.hass) : {},
this._fetchUserPromise,
]);
} catch (err) {
this._error = err.message;
}
this._logbookEntries = this._logbookEntries this._logbookEntries = this._logbookEntries
? [...newEntries, ...this._logbookEntries] ? [...newEntries, ...this._logbookEntries]
: newEntries; : newEntries;
@ -133,16 +152,34 @@ export class MoreInfoLogbook extends LitElement {
this._traceContexts = traceContexts; this._traceContexts = traceContexts;
} }
private _fetchPersonNames() { private async _fetchUserNames() {
const userIdToName = {};
// Start loading users
const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
// Process persons
Object.values(this.hass.states).forEach((entity) => { Object.values(this.hass.states).forEach((entity) => {
if ( if (
entity.attributes.user_id && entity.attributes.user_id &&
computeStateDomain(entity) === "person" computeStateDomain(entity) === "person"
) { ) {
this._persons[entity.attributes.user_id] = this._userIdToName[entity.attributes.user_id] =
entity.attributes.friendly_name; entity.attributes.friendly_name;
} }
}); });
// Process users
if (userProm) {
const users = await userProm;
for (const user of users) {
if (!(user.id in userIdToName)) {
userIdToName[user.id] = user.name;
}
}
}
this._userIdToName = userIdToName;
} }
static get styles() { static get styles() {

View File

@ -20,4 +20,5 @@
"content" in document.createElement("template"))) { "content" in document.createElement("template"))) {
document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>"); document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
} }
var isS11_12 = /.*Version\/(?:11|12)(?:\.\d+)*.*Safari\//.test(navigator.userAgent);
</script> </script>

View File

@ -43,13 +43,16 @@
<%= renderTemplate('_preload_roboto') %> <%= renderTemplate('_preload_roboto') %>
<script crossorigin="use-credentials"> <script crossorigin="use-credentials">
import("<%= latestPageJS %>"); // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
window.latestJS = true; if (!isS11_12) {
window.providersPromise = fetch("/auth/providers", { import("<%= latestPageJS %>");
credentials: "same-origin", window.latestJS = true;
}); window.providersPromise = fetch("/auth/providers", {
if (!window.globalThis) { credentials: "same-origin",
window.globalThis = window; });
if (!window.globalThis) {
window.globalThis = window;
}
} }
</script> </script>

View File

@ -67,12 +67,15 @@
<%= renderTemplate('_preload_roboto') %> <%= renderTemplate('_preload_roboto') %>
<script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>> <script <% if (!useWDS) { %>crossorigin="use-credentials"<% } %>>
import("<%= latestCoreJS %>"); // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
import("<%= latestAppJS %>"); if (!isS11_12) {
window.customPanelJS = "<%= latestCustomPanelJS %>"; import("<%= latestCoreJS %>");
window.latestJS = true; import("<%= latestAppJS %>");
if (!window.globalThis) { window.customPanelJS = "<%= latestCustomPanelJS %>";
window.globalThis = window; window.latestJS = true;
if (!window.globalThis) {
window.globalThis = window;
}
} }
</script> </script>
<script> <script>

View File

@ -75,13 +75,16 @@
<%= renderTemplate('_preload_roboto') %> <%= renderTemplate('_preload_roboto') %>
<script crossorigin="use-credentials"> <script crossorigin="use-credentials">
import("<%= latestPageJS %>"); // Safari 12 and below does not have a compliant ES2015 implementation of template literals, so we ship ES5
window.latestJS = true; if (!isS11_12) {
window.stepsPromise = fetch("/api/onboarding", { import("<%= latestPageJS %>");
credentials: "same-origin", window.latestJS = true;
}); window.stepsPromise = fetch("/api/onboarding", {
if (!window.globalThis) { credentials: "same-origin",
window.globalThis = window; });
if (!window.globalThis) {
window.globalThis = window;
}
} }
</script> </script>

View File

@ -43,7 +43,7 @@ const COMPONENTS = {
class PartialPanelResolver extends HassRouterPage { class PartialPanelResolver extends HassRouterPage {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public narrow?: boolean; @property({ type: Boolean }) public narrow?: boolean;
private _waitForStart = false; private _waitForStart = false;
@ -206,7 +206,7 @@ class PartialPanelResolver extends HassRouterPage {
this._currentPage && this._currentPage &&
!this.hass.panels[this._currentPage] !this.hass.panels[this._currentPage]
) { ) {
if (this.hass.config.state !== STATE_NOT_RUNNING) { if (this.hass.config.state === STATE_NOT_RUNNING) {
this._waitForStart = true; this._waitForStart = true;
if (this.lastChild) { if (this.lastChild) {
this.removeChild(this.lastChild); this.removeChild(this.lastChild);

View File

@ -12,7 +12,10 @@ import { HASSDomEvent } from "../common/dom/fire_event";
import { extractSearchParamsObject } from "../common/url/search-params"; import { extractSearchParamsObject } from "../common/url/search-params";
import { subscribeOne } from "../common/util/subscribe-one"; import { subscribeOne } from "../common/util/subscribe-one";
import { AuthUrlSearchParams, hassUrl } from "../data/auth"; import { AuthUrlSearchParams, hassUrl } from "../data/auth";
import { fetchDiscoveryInformation } from "../data/discovery"; import {
DiscoveryInformation,
fetchDiscoveryInformation,
} from "../data/discovery";
import { import {
fetchOnboardingOverview, fetchOnboardingOverview,
OnboardingResponses, OnboardingResponses,
@ -68,6 +71,8 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
@state() private _steps?: OnboardingStep[]; @state() private _steps?: OnboardingStep[];
@state() private _discoveryInformation?: DiscoveryInformation;
protected render(): TemplateResult { protected render(): TemplateResult {
const step = this._curStep()!; const step = this._curStep()!;
@ -87,6 +92,7 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
? html`<onboarding-restore-snapshot ? html`<onboarding-restore-snapshot
.localize=${this.localize} .localize=${this.localize}
.restoring=${this._restoring} .restoring=${this._restoring}
.discoveryInformation=${this._discoveryInformation}
@restoring=${this._restoringSnapshot} @restoring=${this._restoringSnapshot}
> >
</onboarding-restore-snapshot>` </onboarding-restore-snapshot>`

View File

@ -5,9 +5,11 @@ import "@polymer/paper-radio-button/paper-radio-button";
import "@polymer/paper-radio-group/paper-radio-group"; import "@polymer/paper-radio-group/paper-radio-group";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event"; import { fireEvent } from "../common/dom/fire_event";
import type { LocalizeFunc } from "../common/translations/localize"; import type { LocalizeFunc } from "../common/translations/localize";
import "../components/map/ha-location-editor"; import "../components/map/ha-locations-editor";
import type { MarkerLocation } from "../components/map/ha-locations-editor";
import { createTimezoneListEl } from "../components/timezone-datalist"; import { createTimezoneListEl } from "../components/timezone-datalist";
import { import {
ConfigUpdateValues, ConfigUpdateValues,
@ -81,14 +83,14 @@ class OnboardingCoreConfig extends LitElement {
</div> </div>
<div class="row"> <div class="row">
<ha-location-editor <ha-locations-editor
class="flex" class="flex"
.hass=${this.hass} .hass=${this.hass}
.location=${this._locationValue} .locations=${this._markerLocation(this._locationValue)}
.fitZoom=${14} zoom="14"
.darkMode=${mql.matches} .darkMode=${mql.matches}
@change=${this._locationChanged} @location-updated=${this._locationChanged}
></ha-location-editor> ></ha-locations-editor>
</div> </div>
<div class="row"> <div class="row">
@ -208,13 +210,24 @@ class OnboardingCoreConfig extends LitElement {
return this._unitSystem !== undefined ? this._unitSystem : "metric"; return this._unitSystem !== undefined ? this._unitSystem : "metric";
} }
private _markerLocation = memoizeOne(
(location: [number, number]): MarkerLocation[] => [
{
id: "location",
latitude: location[0],
longitude: location[1],
location_editable: true,
},
]
);
private _handleChange(ev: PolymerChangedEvent<string>) { private _handleChange(ev: PolymerChangedEvent<string>) {
const target = ev.currentTarget as PaperInputElement; const target = ev.currentTarget as PaperInputElement;
this[`_${target.name}`] = target.value; this[`_${target.name}`] = target.value;
} }
private _locationChanged(ev) { private _locationChanged(ev) {
this._location = ev.currentTarget.location; this._location = ev.detail.location;
} }
private _unitSystemChanged( private _unitSystemChanged(

View File

@ -4,9 +4,12 @@ import { customElement, property } from "lit/decorators";
import "../../hassio/src/components/hassio-ansi-to-html"; import "../../hassio/src/components/hassio-ansi-to-html";
import { showHassioSnapshotDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot"; import { showHassioSnapshotDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot";
import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-snapshot-upload"; import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-snapshot-upload";
import { navigate } from "../common/navigate";
import type { LocalizeFunc } from "../common/translations/localize"; import type { LocalizeFunc } from "../common/translations/localize";
import "../components/ha-card"; import "../components/ha-card";
import {
DiscoveryInformation,
fetchDiscoveryInformation,
} from "../data/discovery";
import { makeDialogManager } from "../dialogs/make-dialog-manager"; import { makeDialogManager } from "../dialogs/make-dialog-manager";
import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin"; import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
import { haStyle } from "../resources/styles"; import { haStyle } from "../resources/styles";
@ -26,6 +29,9 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
@property({ type: Boolean }) public restoring = false; @property({ type: Boolean }) public restoring = false;
@property({ attribute: false })
public discoveryInformation?: DiscoveryInformation;
protected render(): TemplateResult { protected render(): TemplateResult {
return this.restoring return this.restoring
? html`<ha-card ? html`<ha-card
@ -58,13 +64,14 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
private async _checkRestoreStatus(): Promise<void> { private async _checkRestoreStatus(): Promise<void> {
if (this.restoring) { if (this.restoring) {
try { try {
const response = await fetch("/api/hassio/supervisor/info", { const response = await fetchDiscoveryInformation();
method: "GET",
}); if (
if (response.status === 401) { !this.discoveryInformation ||
// If we get a unauthorized response, the restore is done this.discoveryInformation.uuid !== response.uuid
navigate("/", { replace: true }); ) {
location.reload(); // When the UUID changes, the restore is complete
window.location.replace("/");
} }
} catch (err) { } catch (err) {
// We fully expected issues with fetching info untill restore is complete. // We fully expected issues with fetching info untill restore is complete.
@ -76,6 +83,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
showHassioSnapshotDialog(this, { showHassioSnapshotDialog(this, {
slug, slug,
onboarding: true, onboarding: true,
localize: this.localize,
}); });
} }

View File

@ -8,7 +8,8 @@ import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { UNIT_C } from "../../../common/const"; import { UNIT_C } from "../../../common/const";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/map/ha-location-editor"; import "../../../components/map/ha-locations-editor";
import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
import { createTimezoneListEl } from "../../../components/timezone-datalist"; import { createTimezoneListEl } from "../../../components/timezone-datalist";
import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core"; import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
import type { PolymerChangedEvent } from "../../../polymer-types"; import type { PolymerChangedEvent } from "../../../polymer-types";
@ -20,13 +21,13 @@ class ConfigCoreForm extends LitElement {
@state() private _working = false; @state() private _working = false;
@state() private _location!: [number, number]; @state() private _location?: [number, number];
@state() private _elevation!: string; @state() private _elevation?: string;
@state() private _unitSystem!: ConfigUpdateValues["unit_system"]; @state() private _unitSystem?: ConfigUpdateValues["unit_system"];
@state() private _timeZone!: string; @state() private _timeZone?: string;
protected render(): TemplateResult { protected render(): TemplateResult {
const canEdit = ["storage", "default"].includes( const canEdit = ["storage", "default"].includes(
@ -52,16 +53,16 @@ class ConfigCoreForm extends LitElement {
: ""} : ""}
<div class="row"> <div class="row">
<ha-location-editor <ha-locations-editor
class="flex" class="flex"
.hass=${this.hass} .hass=${this.hass}
.location=${this._locationValue( .locations=${this._markerLocation(
this._location,
this.hass.config.latitude, this.hass.config.latitude,
this.hass.config.longitude this.hass.config.longitude,
this._location
)} )}
@change=${this._locationChanged} @location-updated=${this._locationChanged}
></ha-location-editor> ></ha-locations-editor>
</div> </div>
<div class="row"> <div class="row">
@ -162,8 +163,19 @@ class ConfigCoreForm extends LitElement {
input.inputElement.appendChild(createTimezoneListEl()); input.inputElement.appendChild(createTimezoneListEl());
} }
private _locationValue = memoizeOne( private _markerLocation = memoizeOne(
(location, lat, lng) => location || [Number(lat), Number(lng)] (
lat: number,
lng: number,
location?: [number, number]
): MarkerLocation[] => [
{
id: "location",
latitude: location ? location[0] : lat,
longitude: location ? location[1] : lng,
location_editable: true,
},
]
); );
private get _elevationValue() { private get _elevationValue() {
@ -192,7 +204,7 @@ class ConfigCoreForm extends LitElement {
} }
private _locationChanged(ev) { private _locationChanged(ev) {
this._location = ev.currentTarget.location; this._location = ev.detail.location;
} }
private _unitSystemChanged( private _unitSystemChanged(
@ -204,11 +216,10 @@ class ConfigCoreForm extends LitElement {
private async _save() { private async _save() {
this._working = true; this._working = true;
try { try {
const location = this._locationValue( const location = this._location || [
this._location,
this.hass.config.latitude, this.hass.config.latitude,
this.hass.config.longitude this.hass.config.longitude,
); ];
await saveCoreConfig(this.hass, { await saveCoreConfig(this.hass, {
latitude: location[0], latitude: location[0],
longitude: location[1], longitude: location[1],

View File

@ -22,6 +22,7 @@ import {
enableConfigEntry, enableConfigEntry,
reloadConfigEntry, reloadConfigEntry,
updateConfigEntry, updateConfigEntry,
ERROR_STATES,
} from "../../../data/config_entries"; } from "../../../data/config_entries";
import type { DeviceRegistryEntry } from "../../../data/device_registry"; import type { DeviceRegistryEntry } from "../../../data/device_registry";
import type { EntityRegistryEntry } from "../../../data/entity_registry"; import type { EntityRegistryEntry } from "../../../data/entity_registry";
@ -38,12 +39,6 @@ import type { HomeAssistant } from "../../../types";
import type { ConfigEntryExtended } from "./ha-config-integrations"; import type { ConfigEntryExtended } from "./ha-config-integrations";
import "./ha-integration-header"; import "./ha-integration-header";
const ERROR_STATES: ConfigEntry["state"][] = [
"migration_error",
"setup_error",
"setup_retry",
];
const integrationsWithPanel = { const integrationsWithPanel = {
hassio: "/hassio/dashboard", hassio: "/hassio/dashboard",
mqtt: "/config/mqtt", mqtt: "/config/mqtt",
@ -303,7 +298,7 @@ export class HaIntegrationCard extends LitElement {
> >
<ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon> <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
</mwc-icon-button> </mwc-icon-button>
<mwc-list-item @request-selected="${this._editEntryName}"> <mwc-list-item @request-selected="${this._handleRename}">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.config_entry.rename" "ui.panel.config.integrations.config_entry.rename"
)} )}
@ -420,6 +415,15 @@ export class HaIntegrationCard extends LitElement {
showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry); showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry);
} }
private _handleRename(ev: CustomEvent<RequestSelectedDetail>): void {
if (!shouldHandleRequestSelectedEvent(ev)) {
return;
}
this._editEntryName(
((ev.target as HTMLElement).closest("ha-card") as any).configEntry
);
}
private _handleReload(ev: CustomEvent<RequestSelectedDetail>): void { private _handleReload(ev: CustomEvent<RequestSelectedDetail>): void {
if (!shouldHandleRequestSelectedEvent(ev)) { if (!shouldHandleRequestSelectedEvent(ev)) {
return; return;
@ -578,8 +582,7 @@ export class HaIntegrationCard extends LitElement {
}); });
} }
private async _editEntryName(ev) { private async _editEntryName(configEntry: ConfigEntry) {
const configEntry = ev.target.closest("ha-card").configEntry;
const newName = await showPromptDialog(this, { const newName = await showPromptDialog(this, {
title: this.hass.localize("ui.panel.config.integrations.rename_dialog"), title: this.hass.localize("ui.panel.config.integrations.rename_dialog"),
defaultValue: configEntry.title, defaultValue: configEntry.title,

View File

@ -0,0 +1,312 @@
import "@material/mwc-button/mwc-button";
import "@material/mwc-linear-progress/mwc-linear-progress";
import { mdiStethoscope, mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../../components/ha-dialog";
import {
fetchNetworkStatus,
healNetwork,
stopHealNetwork,
subscribeHealNetworkProgress,
ZWaveJSHealNetworkStatusMessage,
ZWaveJSNetwork,
} from "../../../../../data/zwave_js";
import { haStyleDialog } from "../../../../../resources/styles";
import { HomeAssistant } from "../../../../../types";
import { ZWaveJSHealNetworkDialogParams } from "./show-dialog-zwave_js-heal-network";
@customElement("dialog-zwave_js-heal-network")
class DialogZWaveJSHealNetwork extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private entry_id?: string;
@state() private _status?: string;
@state() private _progress_total = 0;
@state() private _progress_finished = 0;
@state() private _progress_in_progress = 0;
private _subscribed?: Promise<UnsubscribeFunc>;
public showDialog(params: ZWaveJSHealNetworkDialogParams): void {
this._progress_total = 0;
this.entry_id = params.entry_id;
this._fetchData();
}
public closeDialog(): void {
this.entry_id = undefined;
this._status = undefined;
this._progress_total = 0;
this._unsubscribe();
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this.entry_id) {
return html``;
}
return html`
<ha-dialog
open
@closed=${this.closeDialog}
.heading=${createCloseHeading(
this.hass,
this.hass.localize("ui.panel.config.zwave_js.heal_network.title")
)}
>
${!this._status
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiStethoscope}
class="introduction"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.introduction"
)}
</p>
</div>
</div>
<p>
<em>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.traffic_warning"
)}
</em>
</p>
<mwc-button slot="primaryAction" @click=${this._startHeal}>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.start_heal"
)}
</mwc-button>
`
: ``}
${this._status === "started"
? html`
<div class="status">
<p>
<b>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.in_progress"
)}
</b>
</p>
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.run_in_background"
)}
</p>
</div>
${!this._progress_total
? html`
<mwc-linear-progress indeterminate> </mwc-linear-progress>
`
: ""}
<mwc-button slot="secondaryAction" @click=${this._stopHeal}>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.stop_heal"
)}
</mwc-button>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.panel.config.zwave_js.common.close")}
</mwc-button>
`
: ``}
${this._status === "failed"
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiCloseCircle}
class="failed"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.healing_failed"
)}
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.panel.config.zwave_js.common.close")}
</mwc-button>
`
: ``}
${this._status === "finished"
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiCheckCircle}
class="success"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.healing_complete"
)}
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.panel.config.zwave_js.common.close")}
</mwc-button>
`
: ``}
${this._status === "cancelled"
? html`
<div class="flex-container">
<ha-svg-icon
.path=${mdiCloseCircle}
class="failed"
></ha-svg-icon>
<div class="status">
<p>
${this.hass.localize(
"ui.panel.config.zwave_js.heal_network.healing_cancelled"
)}
</p>
</div>
</div>
<mwc-button slot="primaryAction" @click=${this.closeDialog}>
${this.hass.localize("ui.panel.config.zwave_js.common.close")}
</mwc-button>
`
: ``}
${this._progress_total && this._status !== "finished"
? html`
<mwc-linear-progress
determinate
.progress=${this._progress_finished}
.buffer=${this._progress_in_progress}
>
</mwc-linear-progress>
`
: ""}
</ha-dialog>
`;
}
private async _fetchData(): Promise<void> {
if (!this.hass) {
return;
}
const network: ZWaveJSNetwork = await fetchNetworkStatus(
this.hass!,
this.entry_id!
);
if (network.controller.is_heal_network_active) {
this._status = "started";
this._subscribed = subscribeHealNetworkProgress(
this.hass,
this.entry_id!,
this._handleMessage.bind(this)
);
}
}
private _startHeal(): void {
if (!this.hass) {
return;
}
healNetwork(this.hass, this.entry_id!);
this._status = "started";
this._subscribed = subscribeHealNetworkProgress(
this.hass,
this.entry_id!,
this._handleMessage.bind(this)
);
}
private _stopHeal(): void {
if (!this.hass) {
return;
}
stopHealNetwork(this.hass, this.entry_id!);
this._unsubscribe();
this._status = "cancelled";
}
private _handleMessage(message: ZWaveJSHealNetworkStatusMessage): void {
if (message.event === "heal network progress") {
let finished = 0;
let in_progress = 0;
for (const status of Object.values(message.heal_node_status)) {
if (status === "pending") {
in_progress++;
}
if (["skipped", "failed", "done"].includes(status)) {
finished++;
}
}
this._progress_total = Object.keys(message.heal_node_status).length;
this._progress_finished = finished / this._progress_total;
this._progress_in_progress = in_progress / this._progress_total;
}
if (message.event === "heal network done") {
this._unsubscribe();
this._status = "finished";
}
}
private _unsubscribe(): void {
if (this._subscribed) {
this._subscribed.then((unsub) => unsub());
this._subscribed = undefined;
}
}
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`
.success {
color: var(--success-color);
}
.failed {
color: var(--warning-color);
}
.flex-container {
display: flex;
align-items: center;
}
ha-svg-icon {
width: 68px;
height: 48px;
}
ha-svg-icon.introduction {
color: var(--primary-color);
}
.flex-container ha-svg-icon {
margin-right: 20px;
}
mwc-linear-progress {
margin-top: 8px;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-zwave_js-heal-network": DialogZWaveJSHealNetwork;
}
}

View File

@ -0,0 +1,19 @@
import { fireEvent } from "../../../../../common/dom/fire_event";
export interface ZWaveJSHealNetworkDialogParams {
entry_id: string;
}
export const loadHealNetworkDialog = () =>
import("./dialog-zwave_js-heal-network");
export const showZWaveJSHealNetworkDialog = (
element: HTMLElement,
healNetworkDialogParams: ZWaveJSHealNetworkDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-zwave_js-heal-network",
dialogImport: loadHealNetworkDialog,
dialogParams: healNetworkDialogParams,
});
};

View File

@ -1,6 +1,6 @@
import "@material/mwc-button/mwc-button"; import "@material/mwc-button/mwc-button";
import "@material/mwc-icon-button/mwc-icon-button"; import "@material/mwc-icon-button/mwc-icon-button";
import { mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js"; import { mdiAlertCircle, mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
@ -17,6 +17,11 @@ import {
ZWaveJSNetwork, ZWaveJSNetwork,
ZWaveJSNode, ZWaveJSNode,
} from "../../../../../data/zwave_js"; } from "../../../../../data/zwave_js";
import {
ConfigEntry,
getConfigEntries,
ERROR_STATES,
} from "../../../../../data/config_entries";
import { import {
showAlertDialog, showAlertDialog,
showConfirmationDialog, showConfirmationDialog,
@ -24,10 +29,13 @@ import {
import "../../../../../layouts/hass-tabs-subpage"; import "../../../../../layouts/hass-tabs-subpage";
import { haStyle } from "../../../../../resources/styles"; import { haStyle } from "../../../../../resources/styles";
import type { HomeAssistant, Route } from "../../../../../types"; import type { HomeAssistant, Route } from "../../../../../types";
import { fileDownload } from "../../../../../util/file_download";
import "../../../ha-config-section"; import "../../../ha-config-section";
import { showZWaveJSAddNodeDialog } from "./show-dialog-zwave_js-add-node"; import { showZWaveJSAddNodeDialog } from "./show-dialog-zwave_js-add-node";
import { showZWaveJSHealNetworkDialog } from "./show-dialog-zwave_js-heal-network";
import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node"; import { showZWaveJSRemoveNodeDialog } from "./show-dialog-zwave_js-remove-node";
import { configTabs } from "./zwave_js-config-router"; import { configTabs } from "./zwave_js-config-router";
import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-options-flow";
@customElement("zwave_js-config-dashboard") @customElement("zwave_js-config-dashboard")
class ZWaveJSConfigDashboard extends LitElement { class ZWaveJSConfigDashboard extends LitElement {
@ -41,6 +49,8 @@ class ZWaveJSConfigDashboard extends LitElement {
@property() public configEntryId?: string; @property() public configEntryId?: string;
@state() private _configEntry?: ConfigEntry;
@state() private _network?: ZWaveJSNetwork; @state() private _network?: ZWaveJSNetwork;
@state() private _nodes?: ZWaveJSNode[]; @state() private _nodes?: ZWaveJSNode[];
@ -58,6 +68,14 @@ class ZWaveJSConfigDashboard extends LitElement {
} }
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this._configEntry) {
return html``;
}
if (ERROR_STATES.includes(this._configEntry.state)) {
return this._renderErrorScreen();
}
return html` return html`
<hass-tabs-subpage <hass-tabs-subpage
.hass=${this.hass} .hass=${this.hass}
@ -161,6 +179,16 @@ class ZWaveJSConfigDashboard extends LitElement {
"ui.panel.config.zwave_js.common.remove_node" "ui.panel.config.zwave_js.common.remove_node"
)} )}
</mwc-button> </mwc-button>
<mwc-button @click=${this._healNetworkClicked}>
${this.hass.localize(
"ui.panel.config.zwave_js.common.heal_network"
)}
</mwc-button>
<mwc-button @click=${this._openOptionFlow}>
${this.hass.localize(
"ui.panel.config.zwave_js.common.reconfigure_server"
)}
</mwc-button>
</div> </div>
</ha-card> </ha-card>
<ha-card> <ha-card>
@ -208,10 +236,83 @@ class ZWaveJSConfigDashboard extends LitElement {
`; `;
} }
private _renderErrorScreen() {
const item = this._configEntry!;
let stateText: [string, ...unknown[]] | undefined;
let stateTextExtra: TemplateResult | string | undefined;
if (item.disabled_by) {
stateText = [
"ui.panel.config.integrations.config_entry.disable.disabled_cause",
{
cause:
this.hass.localize(
`ui.panel.config.integrations.config_entry.disable.disabled_by.${item.disabled_by}`
) || item.disabled_by,
},
];
if (item.state === "failed_unload") {
stateTextExtra = html`.
${this.hass.localize(
"ui.panel.config.integrations.config_entry.disable_restart_confirm"
)}.`;
}
} else if (item.state === "not_loaded") {
stateText = ["ui.panel.config.integrations.config_entry.not_loaded"];
} else if (ERROR_STATES.includes(item.state)) {
stateText = [
`ui.panel.config.integrations.config_entry.state.${item.state}`,
];
if (item.reason) {
this.hass.loadBackendTranslation("config", item.domain);
stateTextExtra = html` ${this.hass.localize(
`component.${item.domain}.config.error.${item.reason}`
) || item.reason}`;
} else {
stateTextExtra = html`
<br />
<a href="/config/logs"
>${this.hass.localize(
"ui.panel.config.integrations.config_entry.check_the_logs"
)}</a
>
`;
}
}
return html` ${stateText
? html`
<div class="error-message">
<ha-svg-icon .path=${mdiAlertCircle}></ha-svg-icon>
<h3>
${this._configEntry!.title}: ${this.hass.localize(...stateText)}
</h3>
<p>${stateTextExtra}</p>
<mwc-button @click=${this._handleBack}>
${this.hass?.localize("ui.panel.error.go_back") || "go back"}
</mwc-button>
</div>
`
: ""}`;
}
private _handleBack(): void {
history.back();
}
private async _fetchData() { private async _fetchData() {
if (!this.configEntryId) { if (!this.configEntryId) {
return; return;
} }
const configEntries = await getConfigEntries(this.hass);
this._configEntry = configEntries.find(
(entry) => entry.entry_id === this.configEntryId!
);
if (ERROR_STATES.includes(this._configEntry!.state)) {
return;
}
const [network, dataCollectionStatus] = await Promise.all([ const [network, dataCollectionStatus] = await Promise.all([
fetchNetworkStatus(this.hass!, this.configEntryId), fetchNetworkStatus(this.hass!, this.configEntryId),
fetchDataCollectionStatus(this.hass!, this.configEntryId), fetchDataCollectionStatus(this.hass!, this.configEntryId),
@ -253,6 +354,12 @@ class ZWaveJSConfigDashboard extends LitElement {
}); });
} }
private async _healNetworkClicked() {
showZWaveJSHealNetworkDialog(this, {
entry_id: this.configEntryId!,
});
}
private _dataCollectionToggled(ev) { private _dataCollectionToggled(ev) {
setDataCollectionPreference( setDataCollectionPreference(
this.hass!, this.hass!,
@ -261,6 +368,17 @@ class ZWaveJSConfigDashboard extends LitElement {
); );
} }
private async _openOptionFlow() {
if (!this.configEntryId) {
return;
}
const configEntries = await getConfigEntries(this.hass);
const configEntry = configEntries.find(
(entry) => entry.entry_id === this.configEntryId
);
showOptionsFlowDialog(this, configEntry!);
}
private async _dumpDebugClicked() { private async _dumpDebugClicked() {
await this._fetchNodeStatus(); await this._fetchNodeStatus();
@ -312,12 +430,7 @@ class ZWaveJSConfigDashboard extends LitElement {
return; return;
} }
const a = document.createElement("a"); fileDownload(this, signedPath.path, `zwave_js_dump.jsonl`);
a.href = signedPath.path;
a.download = `zwave_js_dump.jsonl`;
this.shadowRoot!.appendChild(a);
a.click();
this.shadowRoot!.removeChild(a);
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
@ -337,6 +450,27 @@ class ZWaveJSConfigDashboard extends LitElement {
color: red; color: red;
} }
.error-message {
display: flex;
color: var(--primary-text-color);
height: calc(100% - var(--header-height));
padding: 16px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.error-message h3 {
text-align: center;
font-weight: bold;
}
.error-message ha-svg-icon {
color: var(--error-color);
width: 64px;
height: 64px;
}
.content { .content {
margin-top: 24px; margin-top: 24px;
} }

View File

@ -1,5 +1,6 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-listbox/paper-listbox"; import "@polymer/paper-listbox/paper-listbox";
import { mdiDownload } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultArray, html, LitElement } from "lit"; import { css, CSSResultArray, html, LitElement } from "lit";
import { customElement, property, state, query } from "lit/decorators"; import { customElement, property, state, query } from "lit/decorators";
@ -13,6 +14,7 @@ import "../../../../../layouts/hass-tabs-subpage";
import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin"; import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
import { haStyle } from "../../../../../resources/styles"; import { haStyle } from "../../../../../resources/styles";
import { HomeAssistant, Route } from "../../../../../types"; import { HomeAssistant, Route } from "../../../../../types";
import { fileDownload } from "../../../../../util/file_download";
import { configTabs } from "./zwave_js-config-router"; import { configTabs } from "./zwave_js-config-router";
@customElement("zwave_js-logs") @customElement("zwave_js-logs")
@ -31,16 +33,20 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> { public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
return [ return [
subscribeZWaveJSLogs(this.hass, this.configEntryId, (log) => { subscribeZWaveJSLogs(this.hass, this.configEntryId, (update) => {
if (!this.hasUpdated) { if (!this.hasUpdated) {
return; return;
} }
if (Array.isArray(log.message)) { if (update.type === "log_message") {
for (const line of log.message) { if (Array.isArray(update.log_message.message)) {
this._textarea!.value += `${line}\n`; for (const line of update.log_message.message) {
this._textarea!.value += `${line}\n`;
}
} else {
this._textarea!.value += `${update.log_message.message}\n`;
} }
} else { } else {
this._textarea!.value += `${log.message}\n`; this._logConfig = update.log_config;
} }
}).then((unsub) => { }).then((unsub) => {
this._textarea!.value += `${this.hass.localize( this._textarea!.value += `${this.hass.localize(
@ -92,6 +98,14 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
` `
: ""} : ""}
</div> </div>
<mwc-icon-button
.label=${this.hass.localize(
"ui.panel.config.zwave_js.logs.download_logs"
)}
@click=${this._downloadLogs}
>
<ha-svg-icon .path=${mdiDownload}></ha-svg-icon>
</mwc-icon-button>
</ha-card> </ha-card>
<textarea readonly></textarea> <textarea readonly></textarea>
</div> </div>
@ -114,6 +128,14 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
); );
} }
private _downloadLogs() {
fileDownload(
this,
`data:text/plain;charset=utf-8,${encodeURI(this._textarea!.value)}`,
`zwave_js.log`
);
}
private _dropdownSelected(ev) { private _dropdownSelected(ev) {
if (ev.target === undefined || this._logConfig === undefined) { if (ev.target === undefined || this._logConfig === undefined) {
return; return;
@ -123,7 +145,6 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
return; return;
} }
setZWaveJSLogLevel(this.hass!, this.configEntryId, selected); setZWaveJSLogLevel(this.hass!, this.configEntryId, selected);
this._logConfig.level = selected;
this._textarea!.value += `${this.hass.localize( this._textarea!.value += `${this.hass.localize(
"ui.panel.config.zwave_js.logs.log_level_changed", "ui.panel.config.zwave_js.logs.log_level_changed",
{ level: selected.charAt(0).toUpperCase() + selected.slice(1) } { level: selected.charAt(0).toUpperCase() + selected.slice(1) }

View File

@ -9,13 +9,9 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { createCloseHeading } from "../../../components/ha-dialog"; import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-formfield"; import "../../../components/ha-formfield";
import "../../../components/ha-switch"; import "../../../components/ha-switch";
import "../../../components/map/ha-location-editor"; import "../../../components/map/ha-locations-editor";
import { import type { MarkerLocation } from "../../../components/map/ha-locations-editor";
defaultRadiusColor, import { getZoneEditorInitData, ZoneMutableParams } from "../../../data/zone";
getZoneEditorInitData,
passiveRadiusColor,
ZoneMutableParams,
} from "../../../data/zone";
import { haStyleDialog } from "../../../resources/styles"; import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { ZoneDetailDialogParams } from "./show-dialog-zone-detail"; import { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
@ -132,17 +128,19 @@ class DialogZoneDetail extends LitElement {
)}" )}"
.invalid=${iconValid} .invalid=${iconValid}
></paper-input> ></paper-input>
<ha-location-editor <ha-locations-editor
class="flex" class="flex"
.hass=${this.hass} .hass=${this.hass}
.location=${this._locationValue(this._latitude, this._longitude)} .locations=${this._location(
.radius=${this._radius} this._latitude,
.radiusColor=${this._passive this._longitude,
? passiveRadiusColor this._radius,
: defaultRadiusColor} this._passive,
.icon=${this._icon} this._icon
@change=${this._locationChanged} )}
></ha-location-editor> @location-updated=${this._locationChanged}
@radius-updated=${this._radiusChanged}
></ha-locations-editor>
<div class="location"> <div class="location">
<paper-input <paper-input
.value=${this._latitude} .value=${this._latitude}
@ -222,11 +220,40 @@ class DialogZoneDetail extends LitElement {
`; `;
} }
private _locationValue = memoizeOne((lat, lng) => [Number(lat), Number(lng)]); private _location = memoizeOne(
(
lat: number,
lng: number,
radius: number,
passive: boolean,
icon: string
): MarkerLocation[] => {
const computedStyles = getComputedStyle(this);
const zoneRadiusColor = computedStyles.getPropertyValue("--accent-color");
const passiveRadiusColor = computedStyles.getPropertyValue(
"--secondary-text-color"
);
return [
{
id: "location",
latitude: Number(lat),
longitude: Number(lng),
radius,
radius_color: passive ? passiveRadiusColor : zoneRadiusColor,
icon,
location_editable: true,
radius_editable: true,
},
];
}
);
private _locationChanged(ev) { private _locationChanged(ev: CustomEvent) {
[this._latitude, this._longitude] = ev.currentTarget.location; [this._latitude, this._longitude] = ev.detail.location;
this._radius = ev.currentTarget.radius; }
private _radiusChanged(ev: CustomEvent) {
this._radius = ev.detail.radius;
} }
private _passiveChanged(ev) { private _passiveChanged(ev) {
@ -292,7 +319,7 @@ class DialogZoneDetail extends LitElement {
.location > *:last-child { .location > *:last-child {
margin-left: 4px; margin-left: 4px;
} }
ha-location-editor { ha-locations-editor {
margin-top: 16px; margin-top: 16px;
} }
a { a {

View File

@ -31,11 +31,8 @@ import { saveCoreConfig } from "../../../data/core";
import { subscribeEntityRegistry } from "../../../data/entity_registry"; import { subscribeEntityRegistry } from "../../../data/entity_registry";
import { import {
createZone, createZone,
defaultRadiusColor,
deleteZone, deleteZone,
fetchZones, fetchZones,
homeRadiusColor,
passiveRadiusColor,
updateZone, updateZone,
Zone, Zone,
ZoneMutableParams, ZoneMutableParams,
@ -73,6 +70,15 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
private _getZones = memoizeOne( private _getZones = memoizeOne(
(storageItems: Zone[], stateItems: HassEntity[]): MarkerLocation[] => { (storageItems: Zone[], stateItems: HassEntity[]): MarkerLocation[] => {
const computedStyles = getComputedStyle(this);
const zoneRadiusColor = computedStyles.getPropertyValue("--accent-color");
const passiveRadiusColor = computedStyles.getPropertyValue(
"--secondary-text-color"
);
const homeRadiusColor = computedStyles.getPropertyValue(
"--primary-color"
);
const stateLocations: MarkerLocation[] = stateItems.map( const stateLocations: MarkerLocation[] = stateItems.map(
(entityState) => ({ (entityState) => ({
id: entityState.entity_id, id: entityState.entity_id,
@ -86,7 +92,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
? homeRadiusColor ? homeRadiusColor
: entityState.attributes.passive : entityState.attributes.passive
? passiveRadiusColor ? passiveRadiusColor
: defaultRadiusColor, : zoneRadiusColor,
location_editable: location_editable:
entityState.entity_id === "zone.home" && this._canEditCore, entityState.entity_id === "zone.home" && this._canEditCore,
radius_editable: false, radius_editable: false,
@ -94,7 +100,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
); );
const storageLocations: MarkerLocation[] = storageItems.map((zone) => ({ const storageLocations: MarkerLocation[] = storageItems.map((zone) => ({
...zone, ...zone,
radius_color: zone.passive ? passiveRadiusColor : defaultRadiusColor, radius_color: zone.passive ? passiveRadiusColor : zoneRadiusColor,
location_editable: true, location_editable: true,
radius_editable: true, radius_editable: true,
})); }));
@ -274,7 +280,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
} }
} }
protected updated(changedProps: PropertyValues) { public willUpdate(changedProps: PropertyValues) {
super.updated(changedProps); super.updated(changedProps);
const oldHass = changedProps.get("hass") as HomeAssistant | undefined; const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (oldHass && this._stateItems) { if (oldHass && this._stateItems) {
@ -410,8 +416,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
if (this.narrow) { if (this.narrow) {
return; return;
} }
await this.updateComplete;
this._activeEntry = created.id; this._activeEntry = created.id;
await this.updateComplete;
await this._map?.updateComplete;
this._map?.fitMarker(created.id); this._map?.fitMarker(created.id);
} }
@ -427,8 +434,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
if (this.narrow || !fitMap) { if (this.narrow || !fitMap) {
return; return;
} }
await this.updateComplete;
this._activeEntry = entry.id; this._activeEntry = entry.id;
await this.updateComplete;
await this._map?.updateComplete;
this._map?.fitMarker(entry.id); this._map?.fitMarker(entry.id);
} }

View File

@ -8,7 +8,7 @@ import "../../components/ha-circular-progress";
import "../../components/ha-date-range-picker"; import "../../components/ha-date-range-picker";
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import "../../components/state-history-charts"; import "../../components/chart/state-history-charts";
import { computeHistory, fetchDate } from "../../data/history"; import { computeHistory, fetchDate } from "../../data/history";
import "../../layouts/ha-app-layout"; import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";

View File

@ -1,24 +1,25 @@
import { mdiRefresh } from "@mdi/js"; import { mdiRefresh } from "@mdi/js";
import "@material/mwc-icon-button";
import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-header/app-header";
import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, html, LitElement, PropertyValues } from "lit"; import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeRTL } from "../../common/util/compute_rtl"; import { computeRTL } from "../../common/util/compute_rtl";
import "../../components/entity/ha-entity-picker"; import "../../components/entity/ha-entity-picker";
import "../../components/ha-circular-progress"; import "../../components/ha-circular-progress";
import "../../components/ha-date-range-picker"; import "../../components/ha-date-range-picker";
import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
import "../../components/ha-icon-button";
import "../../components/ha-menu-button"; import "../../components/ha-menu-button";
import { import {
clearLogbookCache, clearLogbookCache,
getLogbookData, getLogbookData,
LogbookEntry, LogbookEntry,
} from "../../data/logbook"; } from "../../data/logbook";
import { fetchPersons } from "../../data/person";
import { loadTraceContexts, TraceContexts } from "../../data/trace"; import { loadTraceContexts, TraceContexts } from "../../data/trace";
import { fetchUsers } from "../../data/user"; import { fetchUsers } from "../../data/user";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import "../../layouts/ha-app-layout"; import "../../layouts/ha-app-layout";
import { haStyle } from "../../resources/styles"; import { haStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
@ -44,7 +45,7 @@ export class HaPanelLogbook extends LitElement {
@state() private _ranges?: DateRangePickerRanges; @state() private _ranges?: DateRangePickerRanges;
private _fetchUserDone?: Promise<unknown>; private _fetchUserPromise?: Promise<void>;
@state() private _userIdToName = {}; @state() private _userIdToName = {};
@ -136,7 +137,7 @@ export class HaPanelLogbook extends LitElement {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
this.hass.loadBackendTranslation("title"); this.hass.loadBackendTranslation("title");
this._fetchUserDone = this._fetchUserNames(); this._fetchUserPromise = this._fetchUserNames();
const today = new Date(); const today = new Date();
today.setHours(0, 0, 0, 0); today.setHours(0, 0, 0, 0);
@ -198,23 +199,19 @@ export class HaPanelLogbook extends LitElement {
private async _fetchUserNames() { private async _fetchUserNames() {
const userIdToName = {}; const userIdToName = {};
// Start loading all the data // Start loading users
const personProm = fetchPersons(this.hass); const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
const userProm = this.hass.user!.is_admin && fetchUsers(this.hass);
// Process persons // Process persons
const persons = await personProm; Object.values(this.hass.states).forEach((entity) => {
if (
for (const person of persons.storage) { entity.attributes.user_id &&
if (person.user_id) { computeStateDomain(entity) === "person"
userIdToName[person.user_id] = person.name; ) {
this._userIdToName[entity.attributes.user_id] =
entity.attributes.friendly_name;
} }
} });
for (const person of persons.config) {
if (person.user_id) {
userIdToName[person.user_id] = person.name;
}
}
// Process users // Process users
if (userProm) { if (userProm) {
@ -254,16 +251,28 @@ export class HaPanelLogbook extends LitElement {
private async _getData() { private async _getData() {
this._isLoading = true; this._isLoading = true;
const [entries, traceContexts] = await Promise.all([ let entries;
getLogbookData( let traceContexts;
this.hass,
this._startDate.toISOString(), try {
this._endDate.toISOString(), [entries, traceContexts] = await Promise.all([
this._entityId getLogbookData(
), this.hass,
isComponentLoaded(this.hass, "trace") ? loadTraceContexts(this.hass) : {}, this._startDate.toISOString(),
this._fetchUserDone, this._endDate.toISOString(),
]); this._entityId
),
isComponentLoaded(this.hass, "trace") && this.hass.user?.is_admin
? loadTraceContexts(this.hass)
: {},
this._fetchUserPromise,
]);
} catch (err) {
showAlertDialog(this, {
title: this.hass.localize("ui.components.logbook.retrieval_error"),
text: err.message,
});
}
this._entries = entries; this._entries = entries;
this._traceContexts = traceContexts; this._traceContexts = traceContexts;

View File

@ -10,7 +10,7 @@ import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { throttle } from "../../../common/util/throttle"; import { throttle } from "../../../common/util/throttle";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/state-history-charts"; import "../../../components/chart/state-history-charts";
import { CacheConfig, getRecentWithCache } from "../../../data/cached-history"; import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
import { HistoryResult } from "../../../data/history"; import { HistoryResult } from "../../../data/history";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
@ -139,8 +139,8 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
.isLoadingData=${!this._stateHistory} .isLoadingData=${!this._stateHistory}
.historyData=${this._stateHistory} .historyData=${this._stateHistory}
.names=${this._names} .names=${this._names}
.upToNow=${true} up-to-now
.noSingle=${true} no-single
></state-history-charts> ></state-history-charts>
</div> </div>
</ha-card> </ha-card>

View File

@ -9,11 +9,12 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map"; import { classMap } from "lit/directives/class-map";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { computeStateDomain } from "../../../common/entity/compute_state_domain"; import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { throttle } from "../../../common/util/throttle"; import { throttle } from "../../../common/util/throttle";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-circular-progress"; import "../../../components/ha-circular-progress";
import { fetchUsers } from "../../../data/user";
import { getLogbookData, LogbookEntry } from "../../../data/logbook"; import { getLogbookData, LogbookEntry } from "../../../data/logbook";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import "../../logbook/ha-logbook"; import "../../logbook/ha-logbook";
@ -51,18 +52,22 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
}; };
} }
@property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@state() private _config?: LogbookCardConfig; @state() private _config?: LogbookCardConfig;
@state() private _logbookEntries?: LogbookEntry[]; @state() private _logbookEntries?: LogbookEntry[];
@state() private _persons = {};
@state() private _configEntities?: EntityConfig[]; @state() private _configEntities?: EntityConfig[];
@state() private _userIdToName = {};
private _lastLogbookDate?: Date; private _lastLogbookDate?: Date;
private _fetchUserPromise?: Promise<void>;
private _error?: string;
private _throttleGetLogbookEntries = throttle(() => { private _throttleGetLogbookEntries = throttle(() => {
this._getLogBookData(); this._getLogBookData();
}, 10000); }, 10000);
@ -114,7 +119,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
} }
protected firstUpdated(): void { protected firstUpdated(): void {
this._fetchPersonNames(); this._fetchUserPromise = this._fetchUserNames();
} }
protected updated(changedProperties: PropertyValues) { protected updated(changedProperties: PropertyValues) {
@ -184,7 +189,15 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
class=${classMap({ "no-header": !this._config!.title })} class=${classMap({ "no-header": !this._config!.title })}
> >
<div class="content"> <div class="content">
${!this._logbookEntries ${this._error
? html`
<div class="no-entries">
${`${this.hass.localize(
"ui.components.logbook.retrieval_error"
)}: ${this._error}`}
</div>
`
: !this._logbookEntries
? html` ? html`
<ha-circular-progress <ha-circular-progress
active active
@ -199,7 +212,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
virtualize virtualize
.hass=${this.hass} .hass=${this.hass}
.entries=${this._logbookEntries} .entries=${this._logbookEntries}
.userIdToName=${this._persons} .userIdToName=${this._userIdToName}
></ha-logbook> ></ha-logbook>
` `
: html` : html`
@ -228,14 +241,22 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
); );
const lastDate = this._lastLogbookDate || hoursToShowDate; const lastDate = this._lastLogbookDate || hoursToShowDate;
const now = new Date(); const now = new Date();
let newEntries;
const newEntries = await getLogbookData( try {
this.hass, [newEntries] = await Promise.all([
lastDate.toISOString(), getLogbookData(
now.toISOString(), this.hass,
this._configEntities!.map((entity) => entity.entity).toString(), lastDate.toISOString(),
true now.toISOString(),
); this._configEntities!.map((entity) => entity.entity).toString(),
true
),
this._fetchUserPromise,
]);
} catch (err) {
this._error = err.message;
}
const logbookEntries = this._logbookEntries const logbookEntries = this._logbookEntries
? [...newEntries, ...this._logbookEntries] ? [...newEntries, ...this._logbookEntries]
@ -248,20 +269,34 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
this._lastLogbookDate = now; this._lastLogbookDate = now;
} }
private _fetchPersonNames() { private async _fetchUserNames() {
if (!this.hass) { const userIdToName = {};
return;
}
// Start loading users
const userProm = this.hass.user?.is_admin && fetchUsers(this.hass);
// Process persons
Object.values(this.hass!.states).forEach((entity) => { Object.values(this.hass!.states).forEach((entity) => {
if ( if (
entity.attributes.user_id && entity.attributes.user_id &&
computeStateDomain(entity) === "person" computeStateDomain(entity) === "person"
) { ) {
this._persons[entity.attributes.user_id] = this._userIdToName[entity.attributes.user_id] =
entity.attributes.friendly_name; entity.attributes.friendly_name;
} }
}); });
// Process users
if (userProm) {
const users = await userProm;
for (const user of users) {
if (!(user.id in userIdToName)) {
userIdToName[user.id] = user.name;
}
}
}
this._userIdToName = userIdToName;
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

View File

@ -1,14 +1,5 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntities, HassEntity } from "home-assistant-js-websocket";
import { import { LatLngTuple } from "leaflet";
Circle,
CircleMarker,
LatLngTuple,
Layer,
Map,
Marker,
Polyline,
TileLayer,
} from "leaflet";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -17,32 +8,93 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import {
LeafletModuleType,
replaceTileLayer,
setupLeafletMap,
} from "../../../common/dom/setup-leaflet-map";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import { debounce } from "../../../common/util/debounce";
import parseAspectRatio from "../../../common/util/parse-aspect-ratio"; import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
import "../../../components/ha-card"; import "../../../components/ha-card";
import "../../../components/ha-icon-button"; import "../../../components/ha-icon-button";
import { fetchRecent } from "../../../data/history"; import { fetchRecent } from "../../../data/history";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import "../../map/ha-entity-marker"; import "../../../components/map/ha-entity-marker";
import { findEntities } from "../common/find-entities"; import { findEntities } from "../common/find-entities";
import { installResizeObserver } from "../common/install-resize-observer";
import { processConfigEntities } from "../common/process-config-entities"; import { processConfigEntities } from "../common/process-config-entities";
import { EntityConfig } from "../entity-rows/types"; import { EntityConfig } from "../entity-rows/types";
import { LovelaceCard } from "../types"; import { LovelaceCard } from "../types";
import { MapCardConfig } from "./types"; import { MapCardConfig } from "./types";
import "../../../components/map/ha-map";
import { mdiImageFilterCenterFocus } from "@mdi/js";
import type { HaMap, HaMapPaths } from "../../../components/map/ha-map";
import memoizeOne from "memoize-one";
import { getColorByIndex } from "../../../common/color/colors";
const MINUTE = 60000;
@customElement("hui-map-card") @customElement("hui-map-card")
class HuiMapCard extends LitElement implements LovelaceCard { class HuiMapCard extends LitElement implements LovelaceCard {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean, reflect: true })
public isPanel = false;
@state()
private _history?: HassEntity[][];
@state()
private _config?: MapCardConfig;
@query("ha-map")
private _map?: HaMap;
private _date?: Date;
private _configEntities?: string[];
private _colorDict: Record<string, string> = {};
private _colorIndex = 0;
public setConfig(config: MapCardConfig): void {
if (!config) {
throw new Error("Error in card configuration.");
}
if (!config.entities?.length && !config.geo_location_sources) {
throw new Error(
"Either entities or geo_location_sources must be specified"
);
}
if (config.entities && !Array.isArray(config.entities)) {
throw new Error("Entities need to be an array");
}
if (
config.geo_location_sources &&
!Array.isArray(config.geo_location_sources)
) {
throw new Error("Geo_location_sources needs to be an array");
}
this._config = config;
this._configEntities = (config.entities
? processConfigEntities<EntityConfig>(config.entities)
: []
).map((entity) => entity.entity);
this._cleanupHistory();
}
public getCardSize(): number {
if (!this._config?.aspect_ratio) {
return 7;
}
const ratio = parseAspectRatio(this._config.aspect_ratio);
const ar =
ratio && ratio.w > 0 && ratio.h > 0
? `${((100 * ratio.h) / ratio.w).toFixed(2)}`
: "100";
return 1 + Math.floor(Number(ar) / 25) || 3;
}
public static async getConfigElement() { public static async getConfigElement() {
await import("../editor/config-elements/hui-map-card-editor"); await import("../editor/config-elements/hui-map-card-editor");
return document.createElement("hui-map-card-editor"); return document.createElement("hui-map-card-editor");
@ -66,129 +118,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
return { type: "map", entities: foundEntities }; return { type: "map", entities: foundEntities };
} }
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean, reflect: true })
public isPanel = false;
@property()
private _history?: HassEntity[][];
private _date?: Date;
@property()
private _config?: MapCardConfig;
private _configEntities?: EntityConfig[];
// eslint-disable-next-line
private Leaflet?: LeafletModuleType;
private _leafletMap?: Map;
private _tileLayer?: TileLayer;
private _resizeObserver?: ResizeObserver;
private _debouncedResizeListener = debounce(
() => {
if (!this.isConnected || !this._leafletMap) {
return;
}
this._leafletMap.invalidateSize();
},
250,
false
);
private _mapItems: Array<Marker | Circle> = [];
private _mapZones: Array<Marker | Circle> = [];
private _mapPaths: Array<Polyline | CircleMarker> = [];
private _colorDict: Record<string, string> = {};
private _colorIndex = 0;
private _colors: string[] = [
"#0288D1",
"#00AA00",
"#984ea3",
"#00d2d5",
"#ff7f00",
"#af8d00",
"#7f80cd",
"#b3e900",
"#c42e60",
"#a65628",
"#f781bf",
"#8dd3c7",
];
public setConfig(config: MapCardConfig): void {
if (!config) {
throw new Error("Error in card configuration.");
}
if (!config.entities?.length && !config.geo_location_sources) {
throw new Error(
"Either entities or geo_location_sources must be specified"
);
}
if (config.entities && !Array.isArray(config.entities)) {
throw new Error("Entities need to be an array");
}
if (
config.geo_location_sources &&
!Array.isArray(config.geo_location_sources)
) {
throw new Error("Geo_location_sources needs to be an array");
}
this._config = config;
this._configEntities = config.entities
? processConfigEntities(config.entities)
: [];
this._cleanupHistory();
}
public getCardSize(): number {
if (!this._config?.aspect_ratio) {
return 7;
}
const ratio = parseAspectRatio(this._config.aspect_ratio);
const ar =
ratio && ratio.w > 0 && ratio.h > 0
? `${((100 * ratio.h) / ratio.w).toFixed(2)}`
: "100";
return 1 + Math.floor(Number(ar) / 25) || 3;
}
public connectedCallback(): void {
super.connectedCallback();
this._attachObserver();
if (this.hasUpdated) {
this.loadMap();
}
}
public disconnectedCallback(): void {
super.disconnectedCallback();
if (this._leafletMap) {
this._leafletMap.remove();
this._leafletMap = undefined;
this.Leaflet = undefined;
}
if (this._resizeObserver) {
this._resizeObserver.unobserve(this._mapEl);
}
}
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this._config) { if (!this._config) {
return html``; return html``;
@ -196,22 +125,29 @@ class HuiMapCard extends LitElement implements LovelaceCard {
return html` return html`
<ha-card id="card" .header=${this._config.title}> <ha-card id="card" .header=${this._config.title}>
<div id="root"> <div id="root">
<div <ha-map
id="map" .hass=${this.hass}
class=${classMap({ dark: this._config.dark_mode === true })} .entities=${this._getEntities(
></div> this.hass.states,
<ha-icon-button this._config,
this._configEntities
)}
.paths=${this._getHistoryPaths(this._config, this._history)}
.darkMode=${this._config.dark_mode}
></ha-map>
<mwc-icon-button
@click=${this._fitMap} @click=${this._fitMap}
tabindex="0" tabindex="0"
icon="hass:image-filter-center-focus"
title="Reset focus" title="Reset focus"
></ha-icon-button> >
<ha-svg-icon .path=${mdiImageFilterCenterFocus}></ha-svg-icon>
</mwc-icon-button>
</div> </div>
</ha-card> </ha-card>
`; `;
} }
protected shouldUpdate(changedProps) { protected shouldUpdate(changedProps: PropertyValues) {
if (!changedProps.has("hass") || changedProps.size > 1) { if (!changedProps.has("hass") || changedProps.size > 1) {
return true; return true;
} }
@ -228,7 +164,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
// Check if any state has changed // Check if any state has changed
for (const entity of this._configEntities) { for (const entity of this._configEntities) {
if (oldHass.states[entity.entity] !== this.hass!.states[entity.entity]) { if (oldHass.states[entity] !== this.hass!.states[entity]) {
return true; return true;
} }
} }
@ -238,17 +174,12 @@ class HuiMapCard extends LitElement implements LovelaceCard {
protected firstUpdated(changedProps: PropertyValues): void { protected firstUpdated(changedProps: PropertyValues): void {
super.firstUpdated(changedProps); super.firstUpdated(changedProps);
if (this.isConnected) {
this.loadMap();
}
const root = this.shadowRoot!.getElementById("root"); const root = this.shadowRoot!.getElementById("root");
if (!this._config || this.isPanel || !root) { if (!this._config || this.isPanel || !root) {
return; return;
} }
this._attachObserver();
if (!this._config.aspect_ratio) { if (!this._config.aspect_ratio) {
root.style.paddingBottom = "100%"; root.style.paddingBottom = "100%";
return; return;
@ -263,172 +194,86 @@ class HuiMapCard extends LitElement implements LovelaceCard {
} }
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
if (changedProps.has("hass") || changedProps.has("_history")) {
this._drawEntities();
this._fitMap();
}
if (changedProps.has("hass")) {
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
if (oldHass && oldHass.themes.darkMode !== this.hass.themes.darkMode) {
this._replaceTileLayer();
}
}
if (
changedProps.has("_config") &&
changedProps.get("_config") !== undefined
) {
this.updateMap(changedProps.get("_config") as MapCardConfig);
}
if (this._config?.hours_to_show && this._configEntities?.length) { if (this._config?.hours_to_show && this._configEntities?.length) {
const minute = 60000;
if (changedProps.has("_config")) { if (changedProps.has("_config")) {
this._getHistory(); this._getHistory();
} else if (Date.now() - this._date!.getTime() >= minute) { } else if (Date.now() - this._date!.getTime() >= MINUTE) {
this._getHistory(); this._getHistory();
} }
} }
} }
private get _mapEl(): HTMLDivElement { private _fitMap() {
return this.shadowRoot!.getElementById("map") as HTMLDivElement; this._map?.fitMap();
} }
private async loadMap(): Promise<void> { private _getColor(entityId: string): string {
[this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap( let color = this._colorDict[entityId];
this._mapEl, if (color) {
this._config!.dark_mode ?? this.hass.themes.darkMode return color;
);
this._drawEntities();
this._leafletMap.invalidateSize();
this._fitMap();
}
private _replaceTileLayer() {
const map = this._leafletMap;
const config = this._config;
const Leaflet = this.Leaflet;
if (!map || !config || !Leaflet || !this._tileLayer) {
return;
}
this._tileLayer = replaceTileLayer(
Leaflet,
map,
this._tileLayer,
this._config!.dark_mode ?? this.hass.themes.darkMode
);
}
private updateMap(oldConfig: MapCardConfig): void {
const map = this._leafletMap;
const config = this._config;
const Leaflet = this.Leaflet;
if (!map || !config || !Leaflet || !this._tileLayer) {
return;
}
if (this._config!.dark_mode !== oldConfig.dark_mode) {
this._replaceTileLayer();
}
if (
config.entities !== oldConfig.entities ||
config.geo_location_sources !== oldConfig.geo_location_sources
) {
this._drawEntities();
}
map.invalidateSize();
this._fitMap();
}
private _fitMap(): void {
if (!this._leafletMap || !this.Leaflet || !this._config || !this.hass) {
return;
}
const zoom = this._config.default_zoom;
if (this._mapItems.length === 0) {
this._leafletMap.setView(
new this.Leaflet.LatLng(
this.hass.config.latitude,
this.hass.config.longitude
),
zoom || 14
);
return;
}
const bounds = this.Leaflet.featureGroup(this._mapItems).getBounds();
this._leafletMap.fitBounds(bounds.pad(0.5));
if (zoom && this._leafletMap.getZoom() > zoom) {
this._leafletMap.setZoom(zoom);
}
}
private _getColor(entityId: string) {
let color;
if (this._colorDict[entityId]) {
color = this._colorDict[entityId];
} else {
color = this._colors[this._colorIndex];
this._colorIndex = (this._colorIndex + 1) % this._colors.length;
this._colorDict[entityId] = color;
} }
color = getColorByIndex(this._colorIndex);
this._colorIndex++;
this._colorDict[entityId] = color;
return color; return color;
} }
private _drawEntities(): void { private _getEntities = memoizeOne(
const hass = this.hass; (
const map = this._leafletMap; states: HassEntities,
const config = this._config; config: MapCardConfig,
const Leaflet = this.Leaflet; configEntities?: string[]
if (!hass || !map || !config || !Leaflet) { ) => {
return; if (!states || !config) {
} return undefined;
if (this._mapItems) {
this._mapItems.forEach((marker) => marker.remove());
}
const mapItems: Layer[] = (this._mapItems = []);
if (this._mapZones) {
this._mapZones.forEach((marker) => marker.remove());
}
const mapZones: Layer[] = (this._mapZones = []);
if (this._mapPaths) {
this._mapPaths.forEach((marker) => marker.remove());
}
const mapPaths: Layer[] = (this._mapPaths = []);
const allEntities = this._configEntities!.concat();
// Calculate visible geo location sources
if (config.geo_location_sources) {
const includesAll = config.geo_location_sources.includes("all");
for (const entityId of Object.keys(hass.states)) {
const stateObj = hass.states[entityId];
if (
computeDomain(entityId) === "geo_location" &&
(includesAll ||
config.geo_location_sources.includes(stateObj.attributes.source))
) {
allEntities.push({ entity: entityId });
}
} }
}
// DRAW history let entities = configEntities || [];
if (this._config!.hours_to_show && this._history) {
for (const entityStates of this._history) { if (config.geo_location_sources) {
const geoEntities: string[] = [];
// Calculate visible geo location sources
const includesAll = config.geo_location_sources.includes("all");
for (const stateObj of Object.values(states)) {
if (
computeDomain(stateObj.entity_id) === "geo_location" &&
(includesAll ||
config.geo_location_sources.includes(stateObj.attributes.source))
) {
geoEntities.push(stateObj.entity_id);
}
}
entities = [...entities, ...geoEntities];
}
return entities.map((entity) => ({
entity_id: entity,
color: this._getColor(entity),
}));
}
);
private _getHistoryPaths = memoizeOne(
(
config: MapCardConfig,
history?: HassEntity[][]
): HaMapPaths[] | undefined => {
if (!config.hours_to_show || !history) {
return undefined;
}
const paths: HaMapPaths[] = [];
for (const entityStates of history) {
if (entityStates?.length <= 1) { if (entityStates?.length <= 1) {
continue; continue;
} }
const entityId = entityStates[0].entity_id;
// filter location data from states and remove all invalid locations // filter location data from states and remove all invalid locations
const path = entityStates.reduce( const points = entityStates.reduce(
(accumulator: LatLngTuple[], state) => { (accumulator: LatLngTuple[], entityState) => {
const latitude = state.attributes.latitude; const latitude = entityState.attributes.latitude;
const longitude = state.attributes.longitude; const longitude = entityState.attributes.longitude;
if (latitude && longitude) { if (latitude && longitude) {
accumulator.push([latitude, longitude] as LatLngTuple); accumulator.push([latitude, longitude] as LatLngTuple);
} }
@ -437,162 +282,15 @@ class HuiMapCard extends LitElement implements LovelaceCard {
[] []
) as LatLngTuple[]; ) as LatLngTuple[];
// DRAW HISTORY paths.push({
for ( points,
let markerIndex = 0; color: this._getColor(entityStates[0].entity_id),
markerIndex < path.length - 1; gradualOpacity: 0.8,
markerIndex++ });
) {
const opacityStep = 0.8 / (path.length - 2);
const opacity = 0.2 + markerIndex * opacityStep;
// DRAW history path dots
mapPaths.push(
Leaflet.circleMarker(path[markerIndex], {
radius: 3,
color: this._getColor(entityId),
opacity,
interactive: false,
})
);
// DRAW history path lines
const line = [path[markerIndex], path[markerIndex + 1]];
mapPaths.push(
Leaflet.polyline(line, {
color: this._getColor(entityId),
opacity,
interactive: false,
})
);
}
} }
return paths;
} }
);
// DRAW entities
for (const entity of allEntities) {
const entityId = entity.entity;
const stateObj = hass.states[entityId];
if (!stateObj) {
continue;
}
const title = computeStateName(stateObj);
const {
latitude,
longitude,
passive,
icon,
radius,
entity_picture: entityPicture,
gps_accuracy: gpsAccuracy,
} = stateObj.attributes;
if (!(latitude && longitude)) {
continue;
}
if (computeStateDomain(stateObj) === "zone") {
// DRAW ZONE
if (passive) {
continue;
}
// create icon
let iconHTML = "";
if (icon) {
const el = document.createElement("ha-icon");
el.setAttribute("icon", icon);
iconHTML = el.outerHTML;
} else {
const el = document.createElement("span");
el.innerHTML = title;
iconHTML = el.outerHTML;
}
// create marker with the icon
mapZones.push(
Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({
html: iconHTML,
iconSize: [24, 24],
className: this._config!.dark_mode
? "dark"
: this._config!.dark_mode === false
? "light"
: "",
}),
interactive: false,
title,
})
);
// create circle around it
mapZones.push(
Leaflet.circle([latitude, longitude], {
interactive: false,
color: "#FF9800",
radius,
})
);
continue;
}
// DRAW ENTITY
// create icon
const entityName = title
.split(" ")
.map((part) => part[0])
.join("")
.substr(0, 3);
// create market with the icon
mapItems.push(
Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({
// Leaflet clones this element before adding it to the map. This messes up
// our Polymer object and we can't pass data through. Thus we hack like this.
html: `
<ha-entity-marker
entity-id="${entityId}"
entity-name="${entityName}"
entity-picture="${entityPicture || ""}"
entity-color="${this._getColor(entityId)}"
></ha-entity-marker>
`,
iconSize: [48, 48],
className: "",
}),
title: computeStateName(stateObj),
})
);
// create circle around if entity has accuracy
if (gpsAccuracy) {
mapItems.push(
Leaflet.circle([latitude, longitude], {
interactive: false,
color: this._getColor(entityId),
radius: gpsAccuracy,
})
);
}
}
this._mapItems.forEach((marker) => map.addLayer(marker));
this._mapZones.forEach((marker) => map.addLayer(marker));
this._mapPaths.forEach((marker) => map.addLayer(marker));
}
private async _attachObserver(): Promise<void> {
// Observe changes to map size and invalidate to prevent broken rendering
if (!this._resizeObserver) {
await installResizeObserver();
this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
}
this._resizeObserver.observe(this);
}
private async _getHistory(): Promise<void> { private async _getHistory(): Promise<void> {
this._date = new Date(); this._date = new Date();
@ -601,9 +299,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
return; return;
} }
const entityIds = this._configEntities!.map((entity) => entity.entity).join( const entityIds = this._configEntities!.join(",");
","
);
const endTime = new Date(); const endTime = new Date();
const startTime = new Date(); const startTime = new Date();
startTime.setHours(endTime.getHours() - this._config!.hours_to_show!); startTime.setHours(endTime.getHours() - this._config!.hours_to_show!);
@ -624,7 +320,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
if (stateHistory.length < 1) { if (stateHistory.length < 1) {
return; return;
} }
this._history = stateHistory; this._history = stateHistory;
} }
@ -636,13 +331,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
this._history = undefined; this._history = undefined;
} else { } else {
// remove unused entities // remove unused entities
const configEntityIds = this._configEntities?.map(
(configEntity) => configEntity.entity
);
this._history = this._history!.reduce( this._history = this._history!.reduce(
(accumulator: HassEntity[][], entityStates) => { (accumulator: HassEntity[][], entityStates) => {
const entityId = entityStates[0].entity_id; const entityId = entityStates[0].entity_id;
if (configEntityIds?.includes(entityId)) { if (this._configEntities?.includes(entityId)) {
accumulator.push(entityStates); accumulator.push(entityStates);
} }
return accumulator; return accumulator;
@ -660,7 +352,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
height: 100%; height: 100%;
} }
#map { ha-map {
z-index: 0; z-index: 0;
border: none; border: none;
position: absolute; position: absolute;
@ -671,7 +363,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
background: inherit; background: inherit;
} }
ha-icon-button { mwc-icon-button {
position: absolute; position: absolute;
top: 75px; top: 75px;
left: 3px; left: 3px;
@ -685,14 +377,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
:host([ispanel]) #root { :host([ispanel]) #root {
height: 100%; height: 100%;
} }
.dark {
color: #ffffff;
}
.light {
color: #000000;
}
`; `;
} }
} }

View File

@ -447,47 +447,37 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
--name-font-size: 1.2rem; --name-font-size: 1.2rem;
--brightness-font-size: 1.2rem; --brightness-font-size: 1.2rem;
--rail-border-color: transparent; --rail-border-color: transparent;
--auto-color: green;
--eco-color: springgreen;
--cool-color: #2b9af9;
--heat-color: #ff8100;
--manual-color: #44739e;
--off-color: #8a8a8a;
--fan_only-color: #8a8a8a;
--dry-color: #efbd07;
--idle-color: #8a8a8a;
--unknown-color: #bac;
} }
.auto, .auto,
.heat_cool { .heat_cool {
--mode-color: var(--auto-color); --mode-color: var(--state-climate-auto-color);
} }
.cool { .cool {
--mode-color: var(--cool-color); --mode-color: var(--state-climate-cool-color);
} }
.heat { .heat {
--mode-color: var(--heat-color); --mode-color: var(--state-climate-heat-color);
} }
.manual { .manual {
--mode-color: var(--manual-color); --mode-color: var(--state-climate-manual-color);
} }
.off { .off {
--mode-color: var(--off-color); --mode-color: var(--state-climate-off-color);
} }
.fan_only { .fan_only {
--mode-color: var(--fan_only-color); --mode-color: var(--state-climate-fan_only-color);
} }
.eco { .eco {
--mode-color: var(--eco-color); --mode-color: var(--state-climate-eco-color);
} }
.dry { .dry {
--mode-color: var(--dry-color); --mode-color: var(--state-climate-dry-color);
} }
.idle { .idle {
--mode-color: var(--idle-color); --mode-color: var(--state-climate-idle-color);
} }
.unknown-mode { .unknown-mode {
--mode-color: var(--unknown-color); --mode-color: var(--state-unknown-color);
} }
.more-info { .more-info {

View File

@ -33,18 +33,18 @@ export class HuiActionEditor extends LitElement {
@property() protected hass?: HomeAssistant; @property() protected hass?: HomeAssistant;
get _navigation_path(): string { get _navigation_path(): string {
const config = this.config as NavigateActionConfig; const config = this.config as NavigateActionConfig | undefined;
return config.navigation_path || ""; return config?.navigation_path || "";
} }
get _url_path(): string { get _url_path(): string {
const config = this.config as UrlActionConfig; const config = this.config as UrlActionConfig | undefined;
return config.url_path || ""; return config?.url_path || "";
} }
get _service(): string { get _service(): string {
const config = this.config as CallServiceActionConfig; const config = this.config as CallServiceActionConfig;
return config.service || ""; return config?.service || "";
} }
private _serviceAction = memoizeOne( private _serviceAction = memoizeOne(

View File

@ -29,6 +29,7 @@ export class HuiInputListEditor extends LitElement {
.index=${index} .index=${index}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
@blur=${this._consolidateEntries} @blur=${this._consolidateEntries}
@keydown=${this._handleKeyDown}
><ha-icon-button ><ha-icon-button
slot="suffix" slot="suffix"
class="clear-button" class="clear-button"
@ -70,6 +71,13 @@ export class HuiInputListEditor extends LitElement {
}); });
} }
private _handleKeyDown(ev: KeyboardEvent) {
if (ev.key === "Enter") {
ev.stopPropagation();
this._consolidateEntries(ev);
}
}
private _consolidateEntries(ev: Event): void { private _consolidateEntries(ev: Event): void {
const target = ev.target! as EditorTarget; const target = ev.target! as EditorTarget;
if (target.value === "") { if (target.value === "") {

View File

@ -37,6 +37,7 @@ const LAZY_LOAD_TYPES = {
"input-text-entity": () => import("../entity-rows/hui-input-text-entity-row"), "input-text-entity": () => import("../entity-rows/hui-input-text-entity-row"),
"lock-entity": () => import("../entity-rows/hui-lock-entity-row"), "lock-entity": () => import("../entity-rows/hui-lock-entity-row"),
"number-entity": () => import("../entity-rows/hui-number-entity-row"), "number-entity": () => import("../entity-rows/hui-number-entity-row"),
"select-entity": () => import("../entity-rows/hui-select-entity-row"),
"timer-entity": () => import("../entity-rows/hui-timer-entity-row"), "timer-entity": () => import("../entity-rows/hui-timer-entity-row"),
conditional: () => import("../special-rows/hui-conditional-row"), conditional: () => import("../special-rows/hui-conditional-row"),
"weather-entity": () => import("../entity-rows/hui-weather-entity-row"), "weather-entity": () => import("../entity-rows/hui-weather-entity-row"),
@ -68,6 +69,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
remote: "toggle", remote: "toggle",
scene: "scene", scene: "scene",
script: "script", script: "script",
select: "select",
sensor: "sensor", sensor: "sensor",
timer: "timer", timer: "timer",
switch: "toggle", switch: "toggle",

View File

@ -81,6 +81,7 @@ export class HuiGraphFooterEditor
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value=${this._hours_to_show} .value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"} .configValue=${"hours_to_show"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></paper-input> ></paper-input>

View File

@ -79,6 +79,7 @@ export class HuiHistoryGraphCardEditor
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value="${this._hours_to_show}" .value="${this._hours_to_show}"
min="1"
.configValue=${"hours_to_show"} .configValue=${"hours_to_show"}
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
></paper-input> ></paper-input>

View File

@ -85,6 +85,7 @@ export class HuiLogbookCardEditor
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value=${this._hours_to_show} .value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"} .configValue=${"hours_to_show"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></paper-input> ></paper-input>

View File

@ -34,7 +34,7 @@ const cardConfigStruct = object({
dark_mode: optional(boolean()), dark_mode: optional(boolean()),
entities: array(entitiesConfigStruct), entities: array(entitiesConfigStruct),
hours_to_show: optional(number()), hours_to_show: optional(number()),
geo_location_sources: optional(array()), geo_location_sources: optional(array(string())),
}); });
@customElement("hui-map-card-editor") @customElement("hui-map-card-editor")

View File

@ -177,6 +177,7 @@ export class HuiSensorCardEditor
)})" )})"
type="number" type="number"
.value=${this._hours_to_show} .value=${this._hours_to_show}
min="1"
.configValue=${"hours_to_show"} .configValue=${"hours_to_show"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></paper-input> ></paper-input>

View File

@ -11,7 +11,7 @@ import { customElement, property, state } from "lit/decorators";
import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import { UNAVAILABLE_STATES } from "../../../data/entity"; import { UNAVAILABLE } from "../../../data/entity";
import { setValue } from "../../../data/input_text"; import { setValue } from "../../../data/input_text";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
@ -75,7 +75,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
? html` ? html`
<div class="flex"> <div class="flex">
<ha-slider <ha-slider
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)} .disabled=${stateObj.state === UNAVAILABLE}
.dir=${computeRTLDirection(this.hass)} .dir=${computeRTLDirection(this.hass)}
.step="${Number(stateObj.attributes.step)}" .step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}" .min="${Number(stateObj.attributes.min)}"
@ -101,7 +101,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
<paper-input <paper-input
no-label-float no-label-float
auto-validate auto-validate
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)} .disabled=${stateObj.state === UNAVAILABLE}
pattern="[0-9]+([\\.][0-9]+)?" pattern="[0-9]+([\\.][0-9]+)?"
.step="${Number(stateObj.attributes.step)}" .step="${Number(stateObj.attributes.step)}"
.min="${Number(stateObj.attributes.min)}" .min="${Number(stateObj.attributes.min)}"

View File

@ -0,0 +1,186 @@
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
import "../../../components/entity/state-badge";
import "../../../components/ha-paper-dropdown-menu";
import { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics";
import { SelectEntity, setSelectOption } from "../../../data/select";
import { ActionHandlerEvent } from "../../../data/lovelace";
import { HomeAssistant } from "../../../types";
import { EntitiesCardEntityConfig } from "../cards/types";
import { actionHandler } from "../common/directives/action-handler-directive";
import { handleAction } from "../common/handle-action";
import { hasAction } from "../common/has-action";
import { hasConfigOrEntityChanged } from "../common/has-changed";
import { createEntityNotFoundWarning } from "../components/hui-warning";
import { LovelaceRow } from "./types";
@customElement("hui-select-entity-row")
class HuiSelectEntityRow extends LitElement implements LovelaceRow {
@property({ attribute: false }) public hass?: HomeAssistant;
@state() private _config?: EntitiesCardEntityConfig;
public setConfig(config: EntitiesCardEntityConfig): void {
if (!config || !config.entity) {
throw new Error("Entity must be specified");
}
this._config = config;
}
protected shouldUpdate(changedProps: PropertyValues): boolean {
return hasConfigOrEntityChanged(this, changedProps);
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
}
const stateObj = this.hass.states[this._config.entity] as
| SelectEntity
| undefined;
if (!stateObj) {
return html`
<hui-warning>
${createEntityNotFoundWarning(this.hass, this._config.entity)}
</hui-warning>
`;
}
const pointer =
(this._config.tap_action && this._config.tap_action.action !== "none") ||
(this._config.entity &&
!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(this._config.entity)));
return html`
<state-badge
.stateObj=${stateObj}
.overrideIcon=${this._config.icon}
.overrideImage=${this._config.image}
class=${classMap({
pointer,
})}
@action=${this._handleAction}
.actionHandler=${actionHandler({
hasHold: hasAction(this._config!.hold_action),
hasDoubleClick: hasAction(this._config!.double_tap_action),
})}
tabindex=${ifDefined(pointer ? "0" : undefined)}
></state-badge>
<ha-paper-dropdown-menu
.label=${this._config.name || computeStateName(stateObj)}
.disabled=${stateObj.state === UNAVAILABLE}
@iron-select=${this._selectedChanged}
@click=${stopPropagation}
>
<paper-listbox slot="dropdown-content">
${stateObj.attributes.options
? stateObj.attributes.options.map(
(option) =>
html`
<paper-item .option=${option}
>${(stateObj.attributes.device_class &&
this.hass!.localize(
`component.select.state.${stateObj.attributes.device_class}.${option}`
)) ||
this.hass!.localize(
`component.select.state._.${option}`
) ||
option}</paper-item
>
`
)
: ""}
</paper-listbox>
</ha-paper-dropdown-menu>
`;
}
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (!this.hass || !this._config) {
return;
}
const stateObj = this.hass.states[this._config.entity] as
| SelectEntity
| undefined;
if (!stateObj) {
return;
}
// Update selected after rendering the items or else it won't work in Firefox
if (stateObj.attributes.options) {
this.shadowRoot!.querySelector(
"paper-listbox"
)!.selected = stateObj.attributes.options.indexOf(stateObj.state);
}
}
private _handleAction(ev: ActionHandlerEvent) {
handleAction(this, this.hass!, this._config!, ev.detail.action!);
}
static get styles(): CSSResultGroup {
return css`
:host {
display: flex;
align-items: center;
}
ha-paper-dropdown-menu {
margin-left: 16px;
flex: 1;
}
paper-item {
cursor: pointer;
min-width: 200px;
}
.pointer {
cursor: pointer;
}
state-badge:focus {
outline: none;
background: var(--divider-color);
border-radius: 100%;
}
`;
}
private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity];
const option = ev.target.selectedItem.option;
if (option === stateObj.state) {
return;
}
forwardHaptic("light");
setSelectOption(this.hass!, stateObj.entity_id, option);
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-select-entity-row": HuiSelectEntityRow;
}
}

View File

@ -127,6 +127,10 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
public willUpdate(changedProperties: PropertyValues) { public willUpdate(changedProperties: PropertyValues) {
super.willUpdate(changedProperties); super.willUpdate(changedProperties);
if (this.lovelace?.editMode) {
import("./default-view-editable");
}
if (changedProperties.has("hass")) { if (changedProperties.has("hass")) {
const oldHass = changedProperties.get("hass") as const oldHass = changedProperties.get("hass") as
| HomeAssistant | HomeAssistant
@ -140,14 +144,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
if (changedProperties.has("narrow")) { if (changedProperties.has("narrow")) {
this._updateColumns(); this._updateColumns();
} return;
}
protected updated(changedProperties: PropertyValues): void {
super.updated(changedProperties);
if (this.lovelace?.editMode) {
import("./default-view-editable");
} }
const oldLovelace = changedProperties.get("lovelace") as const oldLovelace = changedProperties.get("lovelace") as
@ -155,10 +152,11 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
| undefined; | undefined;
if ( if (
changedProperties.has("lovelace") && changedProperties.has("cards") ||
oldLovelace && (changedProperties.has("lovelace") &&
(oldLovelace.config !== this.lovelace?.config || oldLovelace &&
oldLovelace.editMode !== this.lovelace?.editMode) (oldLovelace.config !== this.lovelace!.config ||
oldLovelace.editMode !== this.lovelace!.editMode))
) { ) {
this._createColumns(); this._createColumns();
} }

View File

@ -1,88 +0,0 @@
import "@polymer/iron-image/iron-image";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import { EventsMixin } from "../../mixins/events-mixin";
/*
* @appliesMixin EventsMixin
*/
class HaEntityMarker extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style include="iron-positioning"></style>
<style>
.marker {
position: relative;
display: block;
margin: 0 auto;
width: 2.5em;
text-align: center;
height: 2.5em;
line-height: 2.5em;
font-size: 1.5em;
border-radius: 50%;
border: 0.1em solid var(--ha-marker-color, var(--primary-color));
color: var(--primary-text-color);
background-color: var(--card-background-color);
}
iron-image {
border-radius: 50%;
}
</style>
<div class="marker" style$="border-color:{{entityColor}}">
<template is="dom-if" if="[[entityName]]">[[entityName]]</template>
<template is="dom-if" if="[[entityPicture]]">
<iron-image
sizing="cover"
class="fit"
src="[[entityPicture]]"
></iron-image>
</template>
</div>
`;
}
static get properties() {
return {
hass: {
type: Object,
},
entityId: {
type: String,
value: "",
},
entityName: {
type: String,
value: null,
},
entityPicture: {
type: String,
value: null,
},
entityColor: {
type: String,
value: null,
},
};
}
ready() {
super.ready();
this.addEventListener("click", (ev) => this.badgeTap(ev));
}
badgeTap(ev) {
ev.stopPropagation();
if (this.entityId) {
this.fire("hass-more-info", { entityId: this.entityId });
}
}
}
customElements.define("ha-entity-marker", HaEntityMarker);

View File

@ -1,263 +0,0 @@
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
import {
replaceTileLayer,
setupLeafletMap,
} from "../../common/dom/setup-leaflet-map";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { computeStateName } from "../../common/entity/compute_state_name";
import { navigate } from "../../common/navigate";
import "../../components/ha-icon";
import "../../components/ha-menu-button";
import { defaultRadiusColor } from "../../data/zone";
import "../../layouts/ha-app-layout";
import LocalizeMixin from "../../mixins/localize-mixin";
import "../../styles/polymer-ha-style";
import "./ha-entity-marker";
/*
* @appliesMixin LocalizeMixin
*/
class HaPanelMap extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style include="ha-style">
#map {
height: calc(100vh - var(--header-height));
width: 100%;
z-index: 0;
background: inherit;
}
.icon {
color: var(--primary-text-color);
}
</style>
<ha-app-layout>
<app-header fixed slot="header">
<app-toolbar>
<ha-menu-button
hass="[[hass]]"
narrow="[[narrow]]"
></ha-menu-button>
<div main-title>[[localize('panel.map')]]</div>
<template is="dom-if" if="[[computeShowEditZone(hass)]]">
<ha-icon-button
icon="hass:pencil"
on-click="openZonesEditor"
></ha-icon-button>
</template>
</app-toolbar>
</app-header>
<div id="map"></div>
</ha-app-layout>
`;
}
static get properties() {
return {
hass: {
type: Object,
observer: "drawEntities",
},
narrow: Boolean,
};
}
connectedCallback() {
super.connectedCallback();
this.loadMap();
}
async loadMap() {
this._darkMode = this.hass.themes.darkMode;
[this._map, this.Leaflet, this._tileLayer] = await setupLeafletMap(
this.$.map,
this._darkMode
);
this.drawEntities(this.hass);
this._map.invalidateSize();
this.fitMap();
}
disconnectedCallback() {
if (this._map) {
this._map.remove();
}
}
computeShowEditZone(hass) {
return !__DEMO__ && hass.user.is_admin;
}
openZonesEditor() {
navigate("/config/zone");
}
fitMap() {
let bounds;
if (this._mapItems.length === 0) {
this._map.setView(
new this.Leaflet.LatLng(
this.hass.config.latitude,
this.hass.config.longitude
),
14
);
} else {
bounds = new this.Leaflet.latLngBounds(
this._mapItems.map((item) => item.getLatLng())
);
this._map.fitBounds(bounds.pad(0.5));
}
}
drawEntities(hass) {
/* eslint-disable vars-on-top */
const map = this._map;
if (!map) return;
if (this._darkMode !== this.hass.themes.darkMode) {
this._darkMode = this.hass.themes.darkMode;
this._tileLayer = replaceTileLayer(
this.Leaflet,
map,
this._tileLayer,
this.hass.themes.darkMode
);
}
if (this._mapItems) {
this._mapItems.forEach(function (marker) {
marker.remove();
});
}
const mapItems = (this._mapItems = []);
if (this._mapZones) {
this._mapZones.forEach(function (marker) {
marker.remove();
});
}
const mapZones = (this._mapZones = []);
Object.keys(hass.states).forEach((entityId) => {
const entity = hass.states[entityId];
if (
entity.state === "home" ||
!("latitude" in entity.attributes) ||
!("longitude" in entity.attributes)
) {
return;
}
const title = computeStateName(entity);
let icon;
if (computeStateDomain(entity) === "zone") {
// DRAW ZONE
if (entity.attributes.passive) return;
// create icon
let iconHTML = "";
if (entity.attributes.icon) {
const el = document.createElement("ha-icon");
el.setAttribute("icon", entity.attributes.icon);
iconHTML = el.outerHTML;
} else {
const el = document.createElement("span");
el.innerHTML = title;
iconHTML = el.outerHTML;
}
icon = this.Leaflet.divIcon({
html: iconHTML,
iconSize: [24, 24],
className: "icon",
});
// create marker with the icon
mapZones.push(
this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude],
{
icon: icon,
interactive: false,
title: title,
}
).addTo(map)
);
// create circle around it
mapZones.push(
this.Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude],
{
interactive: false,
color: defaultRadiusColor,
radius: entity.attributes.radius,
}
).addTo(map)
);
return;
}
// DRAW ENTITY
// create icon
const entityPicture = entity.attributes.entity_picture || "";
const entityName = title
.split(" ")
.map(function (part) {
return part.substr(0, 1);
})
.join("");
/* Leaflet clones this element before adding it to the map. This messes up
our Polymer object and we can't pass data through. Thus we hack like this. */
icon = this.Leaflet.divIcon({
html:
"<ha-entity-marker entity-id='" +
entity.entity_id +
"' entity-name='" +
entityName +
"' entity-picture='" +
entityPicture +
"'></ha-entity-marker>",
iconSize: [45, 45],
className: "",
});
// create market with the icon
mapItems.push(
this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude],
{
icon: icon,
title: computeStateName(entity),
}
).addTo(map)
);
// create circle around if entity has accuracy
if (entity.attributes.gps_accuracy) {
mapItems.push(
this.Leaflet.circle(
[entity.attributes.latitude, entity.attributes.longitude],
{
interactive: false,
color: "#0288D1",
radius: entity.attributes.gps_accuracy,
}
).addTo(map)
);
}
});
}
}
customElements.define("ha-panel-map", HaPanelMap);

View File

@ -0,0 +1,103 @@
import { mdiPencil } from "@mdi/js";
import "@material/mwc-icon-button";
import "@polymer/app-layout/app-toolbar/app-toolbar";
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
import { property } from "lit/decorators";
import { computeStateDomain } from "../../common/entity/compute_state_domain";
import { navigate } from "../../common/navigate";
import "../../components/ha-svg-icon";
import "../../components/ha-menu-button";
import "../../layouts/ha-app-layout";
import { HomeAssistant } from "../../types";
import "../../components/map/ha-map";
import { haStyle } from "../../resources/styles";
class HaPanelMap extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean }) public narrow!: boolean;
private _entities: string[] = [];
protected render() {
return html`
<ha-app-layout>
<app-header fixed slot="header">
<app-toolbar>
<ha-menu-button
.hass=${this.hass}
.narrow=${this.narrow}
></ha-menu-button>
<div main-title>${this.hass.localize("panel.map")}</div>
${!__DEMO__ && this.hass.user?.is_admin
? html`<mwc-icon-button @click=${this._openZonesEditor}
><ha-svg-icon .path=${mdiPencil}></ha-svg-icon
></mwc-icon-button>`
: ""}
</app-toolbar>
</app-header>
<ha-map .hass=${this.hass} .entities=${this._entities} autoFit></ha-map>
</ha-app-layout>
`;
}
private _openZonesEditor() {
navigate("/config/zone");
}
public willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps);
if (!changedProps.has("hass")) {
return;
}
const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
this._getStates(oldHass);
}
private _getStates(oldHass?: HomeAssistant) {
let changed = false;
const personSources = new Set<string>();
const locationEntities: string[] = [];
Object.values(this.hass!.states).forEach((entity) => {
if (
entity.state === "home" ||
!("latitude" in entity.attributes) ||
!("longitude" in entity.attributes)
) {
return;
}
locationEntities.push(entity.entity_id);
if (computeStateDomain(entity) === "person" && entity.attributes.source) {
personSources.add(entity.attributes.source);
}
if (oldHass?.states[entity.entity_id] !== entity) {
changed = true;
}
});
if (changed) {
this._entities = locationEntities.filter(
(entity) => !personSources.has(entity)
);
}
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
ha-map {
height: calc(100vh - var(--header-height));
}
`,
];
}
}
customElements.define("ha-panel-map", HaPanelMap);
declare global {
interface HTMLElementTagNameMap {
"ha-panel-map": HaPanelMap;
}
}

Some files were not shown because too many files have changed in this diff Show More