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

20220831.0 (#13541)

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-08-31 12:45:33 -04:00 committed by GitHub
commit 5466705d97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
289 changed files with 8476 additions and 4260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.github/workflows/nightly.yaml vendored
View File

@ -55,9 +55,19 @@ jobs:
rm -rf dist home_assistant_frontend.egg-info
python3 -m build
- name: Archive translations
run: tar -czvf translations.tar.gz translations
- name: Upload build artifacts
uses: actions/upload-artifact@v3
with:
name: wheels
path: dist/home_assistant_frontend*.whl
if-no-files-found: error
- name: Upload translations
uses: actions/upload-artifact@v3
with:
name: translations
path: translations.tar.gz
if-no-files-found: error

4
.husky/pre-commit Executable file
View File

@ -0,0 +1,4 @@
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
yarn run lint-staged --relative --shell "/bin/bash"

2
build-scripts/webpack.js
View File

@ -76,7 +76,7 @@ const createWebpackConfig = ({
chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
},
plugins: [
new WebpackBar({ fancy: !isProdBuild }),
!isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
new WebpackManifestPlugin({
// Only include the JS of entrypoints
filter: (file) => file.isInitial && !file.name.endsWith(".map"),

2
demo/src/ha-demo.ts
View File

@ -61,6 +61,7 @@ class HaDemo extends HomeAssistantAppEl {
area_id: null,
disabled_by: null,
entity_id: "sensor.co2_intensity",
unique_id: "sensor.co2_intensity",
name: null,
icon: null,
platform: "co2signal",
@ -74,6 +75,7 @@ class HaDemo extends HomeAssistantAppEl {
area_id: null,
disabled_by: null,
entity_id: "sensor.grid_fossil_fuel_percentage",
unique_id: "sensor.co2_intensity",
name: null,
icon: null,
platform: "co2signal",

7
gallery/src/ha-gallery.ts
View File

@ -5,7 +5,7 @@ import { html, css, LitElement, PropertyValues } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../src/components/ha-icon-button";
import "../../src/managers/notification-manager";
import "../../src/components/ha-expansion-panel";
import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
import { haStyle } from "../../src/resources/styles";
import { PAGES, SIDEBAR } from "../build/import-pages";
import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
@ -174,9 +174,10 @@ class HaGallery extends LitElement {
const menuItem = this.shadowRoot!.querySelector(
`a[href="#${this._page}"]`
)!;
// Make sure section is expanded
if (menuItem.parentElement instanceof HTMLDetailsElement) {
menuItem.parentElement.open = true;
if (menuItem.parentElement instanceof HaExpansionPanel) {
menuItem.parentElement.expanded = true;
}
}

43
gallery/src/pages/automation/describe-action.ts
View File

@ -1,7 +1,9 @@
import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { customElement, property, state } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-yaml-editor";
import { Action } from "../../../../src/data/script";
import { describeAction } from "../../../../src/data/script_i18n";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
@ -88,6 +90,15 @@ const ACTIONS = [
then: [{ delay: "00:00:01" }],
else: [{ delay: "00:00:05" }],
},
{
if: [{ condition: "state" }],
then: [{ delay: "00:00:01" }],
},
{
if: [{ condition: "state" }, { condition: "state" }],
then: [{ delay: "00:00:01" }],
else: [{ delay: "00:00:05" }],
},
{
choose: [
{
@ -103,16 +114,38 @@ const ACTIONS = [
},
];
const initialAction: Action = {
service: "light.turn_on",
target: {
entity_id: "light.kitchen",
},
};
@customElement("demo-automation-describe-action")
export class DemoAutomationDescribeAction extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant;
@state() _action = initialAction;
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
<ha-card header="Actions">
<div class="action">
<span>
${this._action
? describeAction(this.hass, this._action)
: "<invalid YAML>"}
</span>
<ha-yaml-editor
label="Action Config"
.defaultValue=${initialAction}
@value-changed=${this._dataChanged}
></ha-yaml-editor>
</div>
${ACTIONS.map(
(conf) => html`
<div class="action">
@ -132,6 +165,11 @@ export class DemoAutomationDescribeAction extends LitElement {
hass.addEntities(ENTITIES);
}
private _dataChanged(ev: CustomEvent): void {
ev.stopPropagation();
this._action = ev.detail.isValid ? ev.detail.value : undefined;
}
static get styles() {
return css`
ha-card {
@ -147,6 +185,9 @@ export class DemoAutomationDescribeAction extends LitElement {
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
}

79
gallery/src/pages/automation/describe-condition.ts
View File

@ -1,31 +1,81 @@
import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-yaml-editor";
import { Condition } from "../../../../src/data/automation";
import { describeCondition } from "../../../../src/data/automation_i18n";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
const ENTITIES = [
getEntity("light", "kitchen", "on", {
friendly_name: "Kitchen Light",
}),
getEntity("device_tracker", "person", "home", {
friendly_name: "Person",
}),
getEntity("zone", "home", "", {
friendly_name: "Home",
}),
];
const conditions = [
{ condition: "and" },
{ condition: "not" },
{ condition: "or" },
{ condition: "state" },
{ condition: "numeric_state" },
{ condition: "state", entity_id: "light.kitchen", state: "on" },
{
condition: "numeric_state",
entity_id: "light.kitchen",
attribute: "brightness",
below: 80,
above: 20,
},
{ condition: "sun", after: "sunset" },
{ condition: "sun", after: "sunrise" },
{ condition: "zone" },
{ condition: "sun", after: "sunrise", offset: "-01:00" },
{ condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
{ condition: "time" },
{ condition: "template" },
];
const initialCondition: Condition = {
condition: "state",
entity_id: "light.kitchen",
state: "on",
};
@customElement("demo-automation-describe-condition")
export class DemoAutomationDescribeCondition extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant;
@state() _condition = initialCondition;
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
<ha-card header="Conditions">
<div class="condition">
<span>
${this._condition
? describeCondition(this._condition, this.hass)
: "<invalid YAML>"}
</span>
<ha-yaml-editor
label="Condition Config"
.defaultValue=${initialCondition}
@value-changed=${this._dataChanged}
></ha-yaml-editor>
</div>
${conditions.map(
(conf) => html`
<div class="condition">
<span>${describeCondition(conf as any)}</span>
<span>${describeCondition(conf as any, this.hass)}</span>
<pre>${dump(conf)}</pre>
</div>
`
@ -34,6 +84,18 @@ export class DemoAutomationDescribeCondition extends LitElement {
`;
}
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
const hass = provideHass(this);
hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
private _dataChanged(ev: CustomEvent): void {
ev.stopPropagation();
this._condition = ev.detail.isValid ? ev.detail.value : undefined;
}
static get styles() {
return css`
ha-card {
@ -49,6 +111,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
}

95
gallery/src/pages/automation/describe-trigger.ts
View File

@ -1,34 +1,92 @@
import { dump } from "js-yaml";
import { html, css, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-yaml-editor";
import { Trigger } from "../../../../src/data/automation";
import { describeTrigger } from "../../../../src/data/automation_i18n";
import { getEntity } from "../../../../src/fake_data/entity";
import { provideHass } from "../../../../src/fake_data/provide_hass";
import { HomeAssistant } from "../../../../src/types";
const ENTITIES = [
getEntity("light", "kitchen", "on", {
friendly_name: "Kitchen Light",
}),
getEntity("person", "person", "", {
friendly_name: "Person",
}),
getEntity("zone", "home", "", {
friendly_name: "Home",
}),
];
const triggers = [
{ platform: "state" },
{ platform: "state", entity_id: "light.kitchen", from: "off", to: "on" },
{ platform: "mqtt" },
{ platform: "geo_location" },
{ platform: "homeassistant" },
{ platform: "numeric_state" },
{ platform: "sun" },
{
platform: "geo_location",
source: "test_source",
zone: "zone.home",
event: "enter",
},
{ platform: "homeassistant", event: "start" },
{
platform: "numeric_state",
entity_id: "light.kitchen",
attribute: "brightness",
below: 80,
above: 20,
},
{ platform: "sun", event: "sunset" },
{ platform: "time_pattern" },
{ platform: "webhook" },
{ platform: "zone" },
{
platform: "zone",
entity_id: "person.person",
zone: "zone.home",
event: "enter",
},
{ platform: "tag" },
{ platform: "time" },
{ platform: "time", at: "15:32" },
{ platform: "template" },
{ platform: "event" },
{ platform: "event", event_type: "homeassistant_started" },
];
const initialTrigger: Trigger = {
platform: "state",
entity_id: "light.kitchen",
};
@customElement("demo-automation-describe-trigger")
export class DemoAutomationDescribeTrigger extends LitElement {
@property({ attribute: false }) hass!: HomeAssistant;
@state() _trigger = initialTrigger;
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
<ha-card header="Triggers">
<div class="trigger">
<span>
${this._trigger
? describeTrigger(this._trigger, this.hass)
: "<invalid YAML>"}
</span>
<ha-yaml-editor
label="Trigger Config"
.defaultValue=${initialTrigger}
@value-changed=${this._dataChanged}
></ha-yaml-editor>
</div>
${triggers.map(
(conf) => html`
<div class="trigger">
<span>${describeTrigger(conf as any)}</span>
<span>${describeTrigger(conf as any, this.hass)}</span>
<pre>${dump(conf)}</pre>
</div>
`
@ -37,6 +95,18 @@ export class DemoAutomationDescribeTrigger extends LitElement {
`;
}
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
const hass = provideHass(this);
hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
private _dataChanged(ev: CustomEvent): void {
ev.stopPropagation();
this._trigger = ev.detail.isValid ? ev.detail.value : undefined;
}
static get styles() {
return css`
ha-card {
@ -52,6 +122,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
span {
margin-right: 16px;
}
ha-yaml-editor {
width: 50%;
}
`;
}
}

32
gallery/src/pages/components/dialogs.markdown Normal file
View File

@ -0,0 +1,32 @@
---
title: Dialgos
subtitle: Dialogs provide important prompts in a user flow.
---
# Material Desing 3
Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview).
# Highlighted guidelines
## Content
* A best practice is to always use a title, even if it is optional by Material guidelines.
* People mainly read the title and a button. Put the most important information in those two.
* Try to avoid user generated content in the title, this could make the title unreadable long.
* If users become unsure, they read the description. Make sure this explains what will happen.
* Strive for minimalism.
## Buttons and X-icon
* Keep the labels short, for example `Save`, `Delete`, `Enable`.
* Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
* Destructive actions should be a red warning button.
* Alert or confirmation dialogs only have buttons and no X-icon.
* Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
## Example
### Confirmation dialog
> **Delete dashboard?**
>
> Dashboard [dashboard name] will be permanently deleted from Home Assistant.
>
> Cancel / Delete

7
gallery/src/pages/components/ha-alert.markdown
View File

@ -3,6 +3,13 @@ title: Alerts
subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
---
<style>
ha-alert {
display: block;
margin: 4px 0;
}
</style>
# Alert `<ha-alert>`
The alert offers four severity levels that set a distinctive icon and color.

5
gallery/src/pages/components/ha-expansion-panel.markdown Normal file
View File

@ -0,0 +1,5 @@
---
title: Expansion Panel
---
Expansion panel following all the ARIA guidelines.

157
gallery/src/pages/components/ha-expansion-panel.ts Normal file
View File

@ -0,0 +1,157 @@
import { mdiPacMan } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-expansion-panel";
import "../../../../src/components/ha-markdown";
import "../../components/demo-black-white-row";
import { LONG_TEXT } from "../../data/text";
const SHORT_TEXT = LONG_TEXT.substring(0, 113);
const SAMPLES: {
template: (slot: string, leftChevron: boolean) => TemplateResult;
}[] = [
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
header="Attr header"
>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
header="Attr header"
secondary="Attr secondary"
>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
.header=${"Prop header"}
>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
.header=${"Prop header"}
.secondary=${"Prop secondary"}
>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
.header=${"Prop header"}
>
<span slot="secondary">Slot Secondary</span>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
<span slot="header">Slot header</span>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
<span slot="header">Slot header with actions</span>
<ha-icon-button
slot="icons"
label="Some Action"
.path=${mdiPacMan}
></ha-icon-button>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
{
template(slot, leftChevron) {
return html`
<ha-expansion-panel
slot=${slot}
.leftChevron=${leftChevron}
header="Attr Header with actions"
>
<ha-icon-button
slot="icons"
label="Some Action"
.path=${mdiPacMan}
></ha-icon-button>
${SHORT_TEXT}
</ha-expansion-panel>
`;
},
},
];
@customElement("demo-components-ha-expansion-panel")
export class DemoHaExpansionPanel extends LitElement {
protected render(): TemplateResult {
return html`
${SAMPLES.map(
(sample) => html`
<demo-black-white-row>
${["light", "dark"].map((slot) =>
sample.template(slot, slot === "dark")
)}
</demo-black-white-row>
`
)}
`;
}
static get styles() {
return css`
ha-expansion-panel {
margin: -16px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-expansion-panel": DemoHaExpansionPanel;
}
}

14
gallery/src/pages/components/ha-form.ts
View File

@ -3,6 +3,7 @@ import "@material/mwc-button";
import { html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@ -20,16 +21,22 @@ const ENTITIES = [
}),
getEntity("media_player", "livingroom", "playing", {
friendly_name: "Livingroom",
media_content_type: "music",
device_class: "tv",
}),
getEntity("media_player", "lounge", "idle", {
friendly_name: "Lounge",
supported_features: 444983,
device_class: "speaker",
}),
getEntity("light", "bedroom", "on", {
friendly_name: "Bedroom",
effect: "colorloop",
effect_list: ["colorloop", "random"],
}),
getEntity("switch", "coffee", "off", {
friendly_name: "Coffee",
device_class: "switch",
}),
];
@ -141,7 +148,13 @@ const SCHEMAS: {
selector: { attribute: { entity_id: "" } },
context: { filter_entity: "entity" },
},
{
name: "State",
selector: { state: { entity_id: "" } },
context: { filter_entity: "entity", filter_attribute: "Attribute" },
},
{ name: "Device", selector: { device: {} } },
{ name: "Config entry", selector: { config_entry: {} } },
{ name: "Duration", selector: { duration: {} } },
{ name: "area", selector: { area: {} } },
{ name: "target", selector: { target: {} } },
@ -423,6 +436,7 @@ class DemoHaForm extends LitElement {
hass.addEntities(ENTITIES);
mockEntityRegistry(hass);
mockDeviceRegistry(hass, DEVICES);
mockConfigEntries(hass);
mockAreaRegistry(hass, AREAS);
mockHassioSupervisor(hass);
}

10
gallery/src/pages/components/ha-selector.ts
View File

@ -3,6 +3,7 @@ import "@material/mwc-button";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, state } from "lit/decorators";
import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@ -115,11 +116,19 @@ const SCHEMAS: {
name: "One of each",
input: {
entity: { name: "Entity", selector: { entity: {} } },
state: {
name: "State",
selector: { state: { entity_id: "alarm_control_panel.alarm" } },
},
attribute: {
name: "Attribute",
selector: { attribute: { entity_id: "" } },
},
device: { name: "Device", selector: { device: {} } },
config_entry: {
name: "Integration",
selector: { config_entry: {} },
},
duration: { name: "Duration", selector: { duration: {} } },
addon: { name: "Addon", selector: { addon: {} } },
area: { name: "Area", selector: { area: {} } },
@ -276,6 +285,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
hass.addEntities(ENTITIES);
mockEntityRegistry(hass);
mockDeviceRegistry(hass, DEVICES);
mockConfigEntries(hass);
mockAreaRegistry(hass, AREAS);
mockHassioSupervisor(hass);
hass.mockWS("auth/sign_path", (params) => params);

5
gallery/src/pages/lovelace/entities-card.ts
View File

@ -75,6 +75,10 @@ const ENTITIES = [
timestamp: 1641801600,
friendly_name: "Date and Time",
}),
getEntity("sensor", "humidity", "23.2", {
friendly_name: "Humidity",
unit_of_measurement: "%",
}),
getEntity("input_select", "dropdown", "Soda", {
friendly_name: "Dropdown",
options: ["Soda", "Beer", "Wine"],
@ -142,6 +146,7 @@ const CONFIGS = [
- light.non_existing
- climate.ecobee
- input_number.number
- sensor.humidity
`,
},
{

1
gallery/src/pages/misc/integration-card.ts
View File

@ -191,6 +191,7 @@ const createEntityRegistryEntries = (
hidden_by: null,
entity_category: null,
entity_id: "binary_sensor.updater",
unique_id: "binary_sensor.updater",
name: null,
icon: null,
platform: "updater",

13
hassio/src/addon-store/hassio-addon-store.ts
View File

@ -22,8 +22,10 @@ import {
HassioAddonRepository,
reloadHassioAddons,
} from "../../../src/data/hassio/addon";
import { extractApiErrorMessage } from "../../../src/data/hassio/common";
import { StoreAddon } from "../../../src/data/supervisor/store";
import { Supervisor } from "../../../src/data/supervisor/supervisor";
import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
import "../../../src/layouts/hass-loading-screen";
import "../../../src/layouts/hass-subpage";
import { HomeAssistant, Route } from "../../../src/types";
@ -59,8 +61,15 @@ class HassioAddonStore extends LitElement {
@state() private _filter?: string;
public async refreshData() {
await reloadHassioAddons(this.hass);
await this._loadData();
try {
await reloadHassioAddons(this.hass);
} catch (err) {
showAlertDialog(this, {
text: extractApiErrorMessage(err),
});
} finally {
await this._loadData();
}
}
protected render(): TemplateResult {

12
hassio/src/addon-view/hassio-addon-dashboard.ts
View File

@ -75,7 +75,7 @@ class HassioAddonDashboard extends LitElement {
></hass-error-screen>`;
}
if (!this.addon) {
if (!this.addon || !this.supervisor?.addon) {
return html`<hass-loading-screen></hass-loading-screen>`;
}
@ -209,8 +209,8 @@ class HassioAddonDashboard extends LitElement {
}
if (requestedAddon) {
const addonsInfo = await fetchHassioAddonsInfo(this.hass);
const validAddon = addonsInfo.addons.some(
const store = await fetchSupervisorStore(this.hass);
const validAddon = store.addons.some(
(addon) => addon.slug === requestedAddon
);
if (!validAddon) {
@ -238,7 +238,7 @@ class HassioAddonDashboard extends LitElement {
if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
fireEvent(this, "supervisor-collection-refresh", {
collection: "supervisor",
collection: "addon",
});
}
@ -263,6 +263,10 @@ class HassioAddonDashboard extends LitElement {
return;
}
try {
if (!this.supervisor.addon) {
const addonsInfo = await fetchHassioAddonsInfo(this.hass);
fireEvent(this, "supervisor-update", { addon: addonsInfo });
}
this.addon = await fetchAddonInfo(this.hass, this.supervisor, addon);
} catch (err: any) {
this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;

3
hassio/src/addon-view/info/hassio-addon-info.ts
View File

@ -40,6 +40,7 @@ import "../../../../src/components/ha-settings-row";
import "../../../../src/components/ha-svg-icon";
import "../../../../src/components/ha-switch";
import {
AddonCapability,
fetchHassioAddonChangelog,
fetchHassioAddonInfo,
HassioAddonDetails,
@ -701,7 +702,7 @@ class HassioAddonInfo extends LitElement {
}
private _showMoreInfo(ev): void {
const id = ev.currentTarget.id;
const id = ev.currentTarget.id as AddonCapability;
showHassioMarkdownDialog(this, {
title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
content:

4
hassio/src/backups/hassio-backups.ts
View File

@ -176,7 +176,7 @@ export class HassioBackups extends LitElement {
: supervisorTabs(this.hass)}
.hass=${this.hass}
.localizeFunc=${this.supervisor.localize}
.searchLabel=${this.supervisor.localize("search")}
.searchLabel=${this.supervisor.localize("backup.search")}
.noDataText=${this.supervisor.localize("backup.no_backups")}
.narrow=${this.narrow}
.route=${this.route}
@ -240,7 +240,7 @@ export class HassioBackups extends LitElement {
: html`
<ha-icon-button
.label=${this.supervisor.localize(
"snapshot.delete_selected"
"backup.delete_selected"
)}
.path=${mdiDelete}
id="delete-btn"

13
hassio/src/components/supervisor-backup-content.ts
View File

@ -17,9 +17,12 @@ import {
} from "../../../src/data/hassio/backup";
import { Supervisor } from "../../../src/data/supervisor/supervisor";
import { PolymerChangedEvent } from "../../../src/polymer-types";
import { HomeAssistant } from "../../../src/types";
import { HomeAssistant, TranslationDict } from "../../../src/types";
import "./supervisor-formfield-label";
type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
interface CheckboxItem {
slug: string;
checked: boolean;
@ -108,9 +111,9 @@ export class SupervisorBackupContent extends LitElement {
this._focusTarget?.focus();
}
private _localize = (string: string) =>
this.supervisor?.localize(`backup.${string}`) ||
this.localize!(`ui.panel.page-onboarding.restore.${string}`);
private _localize = (key: BackupOrRestoreKey) =>
this.supervisor?.localize(`backup.${key}`) ||
this.localize!(`ui.panel.page-onboarding.restore.${key}`);
protected render(): TemplateResult {
if (!this.onboarding && !this.supervisor) {
@ -168,7 +171,7 @@ export class SupervisorBackupContent extends LitElement {
: ""}
${this.backupType === "partial"
? html`<div class="partial-picker">
${this.backup?.homeassistant
${!this.backup || this.backup.homeassistant
? html`<ha-formfield
.label=${html`<supervisor-formfield-label
label="Home Assistant"

10
hassio/src/dialogs/registries/dialog-hassio-registries.ts
View File

@ -4,7 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { createCloseHeading } from "../../../../src/components/ha-dialog";
import "../../../../src/components/ha-form/ha-form";
import { HaFormSchema } from "../../../../src/components/ha-form/types";
import type { SchemaUnion } from "../../../../src/components/ha-form/types";
import "../../../../src/components/ha-icon-button";
import "../../../../src/components/ha-settings-row";
import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@ -19,7 +19,7 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
import type { HomeAssistant } from "../../../../src/types";
import { RegistriesDialogParams } from "./show-dialog-registries";
const SCHEMA: HaFormSchema[] = [
const SCHEMA = [
{
name: "registry",
required: true,
@ -35,7 +35,7 @@ const SCHEMA: HaFormSchema[] = [
required: true,
selector: { text: { type: "password" } },
},
];
] as const;
@customElement("dialog-hassio-registries")
class HassioRegistriesDialog extends LitElement {
@ -135,8 +135,8 @@ class HassioRegistriesDialog extends LitElement {
`;
}
private _computeLabel = (schema: HaFormSchema) =>
this.supervisor.localize(`dialog.registries.${schema.name}`) || schema.name;
private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
this.supervisor.localize(`dialog.registries.${schema.name}`);
private _valueChanged(ev: CustomEvent) {
this._input = ev.detail.value;

5
hassio/src/supervisor-base-element.ts
View File

@ -22,10 +22,11 @@ import {
Supervisor,
SupervisorObject,
supervisorCollection,
SupervisorKeys,
} from "../../src/data/supervisor/supervisor";
import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
import { urlSyncMixin } from "../../src/state/url-sync-mixin";
import { HomeAssistant, Route, TranslationDict } from "../../src/types";
import { HomeAssistant, Route } from "../../src/types";
import { getTranslation } from "../../src/util/common-translation";
declare global {
@ -124,7 +125,7 @@ export class SupervisorBaseElement extends urlSyncMixin(
this.supervisor = {
...this.supervisor,
localize: await computeLocalize<TranslationDict["supervisor"]>(
localize: await computeLocalize<SupervisorKeys>(
this.constructor.prototype,
language,
{

11
lint-staged.config.js
View File

@ -1,4 +1,11 @@
module.exports = {
"*.{js,ts}": 'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
"!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
"*.{js,ts}": [
"prettier --write",
'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
],
"!(/translations)*.{json,css,md,html}": "prettier --write",
"translations/*/*.json": (files) =>
'printf "%s\n" "These files should not be modified. Instead, make the necessary modifications in src/translations/en.json. Please see translations/README.md for details." ' +
files.join(" ") +
" >&2 && exit 1",
};

23
package.json
View File

@ -16,6 +16,9 @@
"lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
"lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
"format": "yarn run format:eslint && yarn run format:prettier",
"postinstall": "husky install",
"prepack": "pinst --disable",
"postpack": "pinst --enable",
"test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
},
"author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@ -46,6 +49,7 @@
"@fullcalendar/daygrid": "5.9.0",
"@fullcalendar/interaction": "5.9.0",
"@fullcalendar/list": "5.9.0",
"@fullcalendar/timegrid": "5.9.0",
"@lit-labs/motion": "^1.0.2",
"@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
"@material/chips": "14.0.0-canary.261f2db59.0",
@ -89,8 +93,8 @@
"@polymer/paper-tooltip": "^3.0.1",
"@polymer/polymer": "3.4.1",
"@thomasloven/round-slider": "0.5.4",
"@vaadin/combo-box": "^23.0.10",
"@vaadin/vaadin-themable-mixin": "^23.0.10",
"@vaadin/combo-box": "^23.1.5",
"@vaadin/vaadin-themable-mixin": "^23.1.5",
"@vibrant/color": "^3.2.1-alpha.1",
"@vibrant/core": "^3.2.1-alpha.1",
"@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@ -107,15 +111,14 @@
"deep-freeze": "^0.0.1",
"fuse.js": "^6.0.0",
"google-timezones-json": "^1.0.2",
"hls.js": "^1.1.5",
"home-assistant-js-websocket": "^7.1.0",
"hls.js": "^1.2.1",
"home-assistant-js-websocket": "^8.0.0",
"idb-keyval": "^5.1.3",
"intl-messageformat": "^9.9.1",
"js-yaml": "^4.1.0",
"leaflet": "^1.7.1",
"leaflet-draw": "^1.0.4",
"lit": "^2.1.2",
"lit-vaadin-helpers": "^0.3.0",
"marked": "^4.0.12",
"memoize-one": "^5.2.1",
"node-vibrant": "3.2.1-alpha.1",
@ -202,9 +205,9 @@
"gulp-rename": "^2.0.0",
"gulp-zopfli-green": "^3.0.1",
"html-minifier": "^4.0.0",
"husky": "^1.3.1",
"husky": "^8.0.1",
"instant-mocha": "^1.3.1",
"lint-staged": "^11.1.2",
"lint-staged": "^13.0.3",
"lit-analyzer": "^1.2.1",
"lodash.template": "^4.5.0",
"magic-string": "^0.25.7",
@ -213,6 +216,7 @@
"mocha": "^8.4.0",
"object-hash": "^2.0.3",
"open": "^7.0.4",
"pinst": "^3.0.0",
"prettier": "^2.4.1",
"require-dir": "^1.2.0",
"rollup": "^2.8.2",
@ -245,11 +249,6 @@
"@lit/reactive-element": "1.2.1"
},
"main": "src/home-assistant.js",
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"prettier": {
"trailingComma": "es5",
"arrowParens": "always"

2
pyproject.toml
View File

@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
[project]
name = "home-assistant-frontend"
version = "20220802.0"
version = "20220831.0"
license = {text = "Apache-2.0"}
description = "The Home Assistant frontend"
readme = "README.md"

3
src/auth/ha-auth-flow.ts
View File

@ -314,7 +314,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
}
private _computeStepDescription(step: DataEntryFlowStepForm) {
const resourceKey = `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description`;
const resourceKey =
`ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description` as const;
const args: string[] = [];
const placeholders = step.description_placeholders || {};
Object.keys(placeholders).forEach((key) => {

44
src/common/const.ts
View File

@ -98,6 +98,7 @@ export const FIXED_DOMAIN_ICONS = {
proximity: mdiAppleSafari,
remote: mdiRemote,
scene: mdiPalette,
schedule: mdiCalendarClock,
script: mdiScriptText,
select: mdiFormatListBulleted,
sensor: mdiEye,
@ -166,46 +167,6 @@ export const DOMAINS_WITH_CARD = [
"water_heater",
];
/** Domains with separate more info dialog. */
export const DOMAINS_WITH_MORE_INFO = [
"alarm_control_panel",
"automation",
"camera",
"climate",
"configurator",
"counter",
"cover",
"fan",
"group",
"humidifier",
"input_datetime",
"light",
"lock",
"media_player",
"person",
"remote",
"script",
"scene",
"sun",
"timer",
"update",
"vacuum",
"water_heater",
"weather",
];
/** Domains that do not show the default more info dialog content (e.g. the attribute section)
* and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
"input_number",
"input_select",
"input_text",
"number",
"scene",
"update",
"select",
];
/** Domains that render an input element instead of a text value when displayed in a row.
* Those rows should then not show a cursor pointer when hovered (which would normally
* be the default) unless the element itself enforces it (e.g. a button). Also those elements
@ -237,9 +198,6 @@ export const DOMAINS_INPUT_ROW = [
"vacuum",
];
/** Domains that should have the history hidden in the more info dialog. */
export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
/** States that we consider "off". */
export const STATES_OFF = ["closed", "locked", "off"];

24
src/common/datetime/format_date_time.ts
View File

@ -1,7 +1,7 @@
import memoizeOne from "memoize-one";
import { FrontendLocaleData } from "../../data/translation";
import { useAmPm } from "./use_am_pm";
import { polyfillsLoaded } from "../translations/localize";
import { useAmPm } from "./use_am_pm";
if (__BUILD__ === "latest" && polyfillsLoaded) {
await polyfillsLoaded;
@ -28,6 +28,28 @@ const formatDateTimeMem = memoizeOne(
)
);
// Aug 9, 8:23 AM
export const formatShortDateTime = (
dateObj: Date,
locale: FrontendLocaleData
) => formatShortDateTimeMem(locale).format(dateObj);
const formatShortDateTimeMem = memoizeOne(
(locale: FrontendLocaleData) =>
new Intl.DateTimeFormat(
locale.language === "en" && !useAmPm(locale)
? "en-u-hc-h23"
: locale.language,
{
month: "short",
day: "numeric",
hour: useAmPm(locale) ? "numeric" : "2-digit",
minute: "2-digit",
hour12: useAmPm(locale),
}
)
);
// August 9, 2021, 8:23:15 AM
export const formatDateTimeWithSeconds = (
dateObj: Date,

28
src/common/datetime/format_duration.ts Normal file
View File

@ -0,0 +1,28 @@
import { HaDurationData } from "../../components/ha-duration-input";
const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
export const formatDuration = (duration: HaDurationData) => {
const d = duration.days || 0;
const h = duration.hours || 0;
const m = duration.minutes || 0;
const s = duration.seconds || 0;
const ms = duration.milliseconds || 0;
if (d > 0) {
return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
}
if (h > 0) {
return `${h}:${leftPad(m)}:${leftPad(s)}`;
}
if (m > 0) {
return `${m}:${leftPad(s)}`;
}
if (s > 0) {
return `${s} seconds`;
}
if (ms > 0) {
return `${ms} milliseconds`;
}
return null;
};

16
src/common/datetime/format_time.ts
View File

@ -1,7 +1,7 @@
import memoizeOne from "memoize-one";
import { FrontendLocaleData } from "../../data/translation";
import { useAmPm } from "./use_am_pm";
import { polyfillsLoaded } from "../translations/localize";
import { useAmPm } from "./use_am_pm";
if (__BUILD__ === "latest" && polyfillsLoaded) {
await polyfillsLoaded;
@ -64,3 +64,17 @@ const formatTimeWeekdayMem = memoizeOne(
}
)
);
// 21:15
export const formatTime24h = (dateObj: Date) =>
formatTime24hMem().format(dateObj);
const formatTime24hMem = memoizeOne(
() =>
// en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
new Intl.DateTimeFormat("en-GB", {
hour: "numeric",
minute: "2-digit",
hour12: false,
})
);

9
src/common/entity/compute_state_display.ts
View File

@ -64,9 +64,12 @@ export const computeStateDisplayFromEntityAttributes = (
// fallback to default
}
}
return `${formatNumber(state, locale)}${
attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
}`;
const unit = !attributes.unit_of_measurement
? ""
: attributes.unit_of_measurement === "%"
? "%"
: ` ${attributes.unit_of_measurement}`;
return `${formatNumber(state, locale)}${unit}`;
}
const domain = computeDomain(entityId);

277
src/common/entity/get_states.ts Normal file
View File

@ -0,0 +1,277 @@
import { HassEntity } from "home-assistant-js-websocket";
import { computeStateDomain } from "./compute_state_domain";
import { UNAVAILABLE_STATES } from "../../data/entity";
const FIXED_DOMAIN_STATES = {
alarm_control_panel: [
"armed_away",
"armed_custom_bypass",
"armed_home",
"armed_night",
"armed_vacation",
"arming",
"disarmed",
"disarming",
"pending",
"triggered",
],
automation: ["on", "off"],
binary_sensor: ["on", "off"],
button: [],
calendar: ["on", "off"],
camera: ["idle", "recording", "streaming"],
cover: ["closed", "closing", "open", "opening"],
device_tracker: ["home", "not_home"],
fan: ["on", "off"],
humidifier: ["on", "off"],
input_boolean: ["on", "off"],
input_button: [],
light: ["on", "off"],
lock: ["jammed", "locked", "locking", "unlocked", "unlocking"],
media_player: ["idle", "off", "paused", "playing", "standby"],
person: ["home", "not_home"],
remote: ["on", "off"],
scene: [],
schedule: ["on", "off"],
script: ["on", "off"],
siren: ["on", "off"],
sun: ["above_horizon", "below_horizon"],
switch: ["on", "off"],
update: ["on", "off"],
vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
weather: [
"clear-night",
"cloudy",
"exceptional",
"fog",
"hail",
"lightning-rainy",
"lightning",
"partlycloudy",
"pouring",
"rainy",
"snowy-rainy",
"snowy",
"sunny",
"windy-variant",
"windy",
],
};
const FIXED_DOMAIN_ATTRIBUTE_STATES = {
alarm_control_panel: {
code_format: ["number", "text"],
},
binary_sensor: {
device_class: [
"battery",
"battery_charging",
"co",
"cold",
"connectivity",
"door",
"garage_door",
"gas",
"heat",
"light",
"lock",
"moisture",
"motion",
"moving",
"occupancy",
"opening",
"plug",
"power",
"presence",
"problem",
"running",
"safety",
"smoke",
"sound",
"tamper",
"update",
"vibration",
"window",
],
},
button: {
device_class: ["restart", "update"],
},
camera: {
frontend_stream_type: ["hls", "web_rtc"],
},
climate: {
hvac_action: ["off", "idle", "heating", "cooling", "drying", "fan"],
},
cover: {
device_class: [
"awning",
"blind",
"curtain",
"damper",
"door",
"garage",
"gate",
"shade",
"shutter",
"window",
],
},
humidifier: {
device_class: ["humidifier", "dehumidifier"],
},
media_player: {
device_class: ["tv", "speaker", "receiver"],
media_content_type: [
"app",
"channel",
"episode",
"game",
"image",
"movie",
"music",
"playlist",
"tvshow",
"url",
"video",
],
},
number: {
device_class: ["temperature"],
},
sensor: {
device_class: [
"apparent_power",
"aqi",
"battery",
"carbon_dioxide",
"carbon_monoxide",
"current",
"date",
"duration",
"energy",
"frequency",
"gas",
"humidity",
"illuminance",
"monetary",
"nitrogen_dioxide",
"nitrogen_monoxide",
"nitrous_oxide",
"ozone",
"pm1",
"pm10",
"pm25",
"power_factor",
"power",
"pressure",
"reactive_power",
"signal_strength",
"sulphur_dioxide",
"temperature",
"timestamp",
"volatile_organic_compounds",
"voltage",
],
state_class: ["measurement", "total", "total_increasing"],
},
switch: {
device_class: ["outlet", "switch"],
},
update: {
device_class: ["firmware"],
},
water_heater: {
away_mode: ["on", "off"],
},
};
export const getStates = (
state: HassEntity,
attribute: string | undefined = undefined
): string[] => {
const domain = computeStateDomain(state);
const result: string[] = [];
if (!attribute && domain in FIXED_DOMAIN_STATES) {
result.push(...FIXED_DOMAIN_STATES[domain]);
} else if (
attribute &&
domain in FIXED_DOMAIN_ATTRIBUTE_STATES &&
attribute in FIXED_DOMAIN_ATTRIBUTE_STATES[domain]
) {
result.push(...FIXED_DOMAIN_ATTRIBUTE_STATES[domain][attribute]);
}
// Dynamic values based on the entities
switch (domain) {
case "climate":
if (!attribute) {
result.push(...state.attributes.hvac_modes);
} else if (attribute === "fan_mode") {
result.push(...state.attributes.fan_modes);
} else if (attribute === "preset_mode") {
result.push(...state.attributes.preset_modes);
} else if (attribute === "swing_mode") {
result.push(...state.attributes.swing_modes);
}
break;
case "device_tracker":
case "person":
if (!attribute) {
result.push("home", "not_home");
}
break;
case "fan":
if (attribute === "preset_mode") {
result.push(...state.attributes.preset_modes);
}
break;
case "humidifier":
if (attribute === "mode") {
result.push(...state.attributes.available_modes);
}
break;
case "input_select":
case "select":
if (!attribute) {
result.push(...state.attributes.options);
}
break;
case "light":
if (attribute === "effect") {
result.push(...state.attributes.effect_list);
} else if (attribute === "color_mode") {
result.push(...state.attributes.color_modes);
}
break;
case "media_player":
if (attribute === "sound_mode") {
result.push(...state.attributes.sound_mode_list);
} else if (attribute === "source") {
result.push(...state.attributes.source_list);
}
break;
case "remote":
if (attribute === "current_activity") {
result.push(...state.attributes.activity_list);
}
break;
case "vacuum":
if (attribute === "fan_speed") {
result.push(...state.attributes.fan_speed_list);
}
break;
case "water_heater":
if (!attribute || attribute === "operation_mode") {
result.push(...state.attributes.operation_list);
}
break;
}
if (!attribute) {
// All entities can have unavailable states
result.push(...UNAVAILABLE_STATES);
}
return [...new Set(result)];
};

51
src/common/translations/localize.ts
View File

@ -9,18 +9,47 @@ import { getLocalLanguage } from "../../util/common-translation";
// Exclude some patterns from key type checking for now
// These are intended to be removed as errors are fixed
// Fixing component category will require tighter definition of types from backend and/or web socket
type LocalizeKeyExceptions =
| `${string}`
export type LocalizeKeys =
| FlattenObjectKeys<Omit<TranslationDict, "supervisor">>
| `panel.${string}`
| `state.${string}`
| `state_attributes.${string}`
| `state_badge.${string}`
| `ui.${string}`
| `${keyof TranslationDict["supervisor"]}.${string}`
| `ui.card.alarm_control_panel.${string}`
| `ui.card.weather.attributes.${string}`
| `ui.card.weather.cardinal_direction.${string}`
| `ui.components.logbook.${string}`
| `ui.components.selectors.file.${string}`
| `ui.dialogs.entity_registry.editor.${string}`
| `ui.dialogs.more_info_control.vacuum.${string}`
| `ui.dialogs.options_flow.loading.${string}`
| `ui.dialogs.quick-bar.commands.${string}`
| `ui.dialogs.repair_flow.loading.${string}`
| `ui.dialogs.unhealthy.reason.${string}`
| `ui.dialogs.unsupported.reason.${string}`
| `ui.panel.config.${string}.${"caption" | "description"}`
| `ui.panel.config.automation.${string}`
| `ui.panel.config.dashboard.${string}`
| `ui.panel.config.devices.${string}`
| `ui.panel.config.energy.${string}`
| `ui.panel.config.helpers.${string}`
| `ui.panel.config.info.${string}`
| `ui.panel.config.integrations.${string}`
| `ui.panel.config.logs.${string}`
| `ui.panel.config.lovelace.${string}`
| `ui.panel.config.network.${string}`
| `ui.panel.config.scene.${string}`
| `ui.panel.config.url.${string}`
| `ui.panel.config.zha.${string}`
| `ui.panel.config.zwave_js.${string}`
| `ui.panel.developer-tools.tabs.${string}`
| `ui.panel.lovelace.card.${string}`
| `ui.panel.lovelace.editor.${string}`
| `ui.panel.page-authorize.form.${string}`
| `component.${string}`;
// Tweaked from https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types
type FlattenObjectKeys<
export type FlattenObjectKeys<
T extends Record<string, any>,
Key extends keyof T = keyof T
> = Key extends string
@ -29,10 +58,8 @@ type FlattenObjectKeys<
: `${Key}`
: never;
export type LocalizeFunc<
Dict extends Record<string, unknown> = TranslationDict
> = (
key: FlattenObjectKeys<Dict> | LocalizeKeyExceptions,
export type LocalizeFunc<Keys extends string = LocalizeKeys> = (
key: Keys,
...args: any[]
) => string;
@ -94,14 +121,12 @@ export const polyfillsLoaded =
* }
*/
export const computeLocalize = async <
Dict extends Record<string, unknown> = TranslationDict
>(
export const computeLocalize = async <Keys extends string = LocalizeKeys>(
cache: any,
language: string,
resources: Resources,
formats?: FormatsType
): Promise<LocalizeFunc<Dict>> => {
): Promise<LocalizeFunc<Keys>> => {
if (polyfillsLoaded) {
await polyfillsLoaded;
}

20
src/components/chart/statistics-chart.ts
View File

@ -15,13 +15,13 @@ import {
import { customElement, property, state } from "lit/decorators";
import { getGraphColorByIndex } from "../../common/color/colors";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { computeStateName } from "../../common/entity/compute_state_name";
import {
formatNumber,
numberFormatToLocale,
} from "../../common/number/format_number";
import {
getStatisticIds,
getStatisticLabel,
Statistics,
statisticsHaveType,
StatisticsMetaData,
@ -233,24 +233,18 @@ class StatisticsChart extends LitElement {
const names = this.names || {};
statisticsData.forEach((stats) => {
const firstStat = stats[0];
let name = names[firstStat.statistic_id];
if (!name) {
const entityState = this.hass.states[firstStat.statistic_id];
if (entityState) {
name = computeStateName(entityState);
} else {
name = firstStat.statistic_id;
}
}
const meta = this.statisticIds!.find(
(stat) => stat.statistic_id === firstStat.statistic_id
);
let name = names[firstStat.statistic_id];
if (!name) {
name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
}
if (!this.unit) {
if (unit === undefined) {
unit = meta?.unit_of_measurement;
} else if (unit !== meta?.unit_of_measurement) {
unit = meta?.display_unit_of_measurement;
} else if (unit !== meta?.display_unit_of_measurement) {
unit = null;
}
}

4
src/components/date-range-picker.ts
View File

@ -221,6 +221,10 @@ class DateRangePickerElement extends WrappedElement {
.calendar-table {
padding: 0 !important;
}
.daterangepicker.ltr {
direction: ltr;
text-align: left;
}
`;
const shadowRoot = this.shadowRoot!;
shadowRoot.appendChild(style);

2
src/components/device/ha-area-devices-picker.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-button/mwc-button";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";

3
src/components/device/ha-device-automation-picker.ts
View File

@ -172,8 +172,7 @@ export abstract class HaDeviceAutomationPicker<
static get styles(): CSSResultGroup {
return css`
ha-select {
width: 100%;
margin-top: 4px;
display: block;
}
`;
}

2
src/components/device/ha-device-picker.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";

20
src/components/entity/ha-entity-attribute-picker.ts
View File

@ -15,6 +15,14 @@ class HaEntityAttributePicker extends LitElement {
@property() public entityId?: string;
/**
* List of attributes to be hidden.
* @type {Array}
* @attr hide-attributes
*/
@property({ type: Array, attribute: "hide-attributes" })
public hideAttributes?: string[];
@property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false;
@ -42,10 +50,12 @@ class HaEntityAttributePicker extends LitElement {
if (changedProps.has("_opened") && this._opened) {
const state = this.entityId ? this.hass.states[this.entityId] : undefined;
(this._comboBox as any).items = state
? Object.keys(state.attributes).map((key) => ({
value: key,
label: formatAttributeName(key),
}))
? Object.keys(state.attributes)
.filter((key) => !this.hideAttributes?.includes(key))
.map((key) => ({
value: key,
label: formatAttributeName(key),
}))
: [];
}
}
@ -58,7 +68,7 @@ class HaEntityAttributePicker extends LitElement {
return html`
<ha-combo-box
.hass=${this.hass}
.value=${this.value || ""}
.value=${this.value ? formatAttributeName(this.value) : ""}
.autofocus=${this.autofocus}
.label=${this.label ??
this.hass.localize(

2
src/components/entity/ha-entity-picker.ts
View File

@ -1,7 +1,7 @@
import "@material/mwc-list/mwc-list-item";
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";

111
src/components/entity/ha-entity-state-picker.ts Normal file
View File

@ -0,0 +1,111 @@
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { computeStateDisplay } from "../../common/entity/compute_state_display";
import { PolymerChangedEvent } from "../../polymer-types";
import { getStates } from "../../common/entity/get_states";
import { HomeAssistant } from "../../types";
import "../ha-combo-box";
import type { HaComboBox } from "../ha-combo-box";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@customElement("ha-entity-state-picker")
class HaEntityStatePicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public entityId?: string;
@property() public attribute?: string;
@property({ type: Boolean }) public autofocus = false;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean, attribute: "allow-custom-value" })
public allowCustomValue;
@property() public label?: string;
@property() public value?: string;
@property() public helper?: string;
@property({ type: Boolean }) private _opened = false;
@query("ha-combo-box", true) private _comboBox!: HaComboBox;
protected shouldUpdate(changedProps: PropertyValues) {
return !(!changedProps.has("_opened") && this._opened);
}
protected updated(changedProps: PropertyValues) {
if (changedProps.has("_opened") && this._opened) {
const state = this.entityId ? this.hass.states[this.entityId] : undefined;
(this._comboBox as any).items =
this.entityId && state
? getStates(state, this.attribute).map((key) => ({
value: key,
label: !this.attribute
? computeStateDisplay(
this.hass.localize,
state,
this.hass.locale,
key
)
: key,
}))
: [];
}
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
return html`
<ha-combo-box
.hass=${this.hass}
.value=${this.value
? this.entityId && this.hass.states[this.entityId]
? computeStateDisplay(
this.hass.localize,
this.hass.states[this.entityId],
this.hass.locale,
this.value
)
: this.value
: ""}
.autofocus=${this.autofocus}
.label=${this.label ??
this.hass.localize("ui.components.entity.entity-state-picker.state")}
.disabled=${this.disabled || !this.entityId}
.required=${this.required}
.helper=${this.helper}
.allowCustomValue=${this.allowCustomValue}
item-value-path="value"
item-label-path="label"
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
>
</ha-combo-box>
`;
}
private _openedChanged(ev: PolymerChangedEvent<boolean>) {
this._opened = ev.detail.value;
}
private _valueChanged(ev: PolymerChangedEvent<string>) {
this.value = ev.detail.value;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-entity-state-picker": HaEntityStatePicker;
}
}

43
src/components/entity/ha-statistic-picker.ts
View File

@ -1,6 +1,6 @@
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event";
@ -31,12 +31,23 @@ export class HaStatisticPicker extends LitElement {
@property({ type: Boolean }) public disabled?: boolean;
/**
* Show only statistics with these unit of measuments.
* Show only statistics natively stored with these units of measurements.
* @type {Array}
* @attr include-unit-of-measurement
* @attr include-statistics-unit-of-measurement
*/
@property({ type: Array, attribute: "include-unit-of-measurement" })
public includeUnitOfMeasurement?: string[];
@property({
type: Array,
attribute: "include-statistics-unit-of-measurement",
})
public includeStatisticsUnitOfMeasurement?: string[];
/**
* Show only statistics displayed with these units of measurements.
* @type {Array}
* @attr include-display-unit-of-measurement
*/
@property({ type: Array, attribute: "include-display-unit-of-measurement" })
public includeDisplayUnitOfMeasurement?: string[];
/**
* Show only statistics with these device classes.
@ -86,7 +97,8 @@ export class HaStatisticPicker extends LitElement {
private _getStatistics = memoizeOne(
(
statisticIds: StatisticsMetaData[],
includeUnitOfMeasurement?: string[],
includeStatisticsUnitOfMeasurement?: string[],
includeDisplayUnitOfMeasurement?: string[],
includeDeviceClasses?: string[],
entitiesOnly?: boolean
): Array<{ id: string; name: string; state?: HassEntity }> => {
@ -101,9 +113,18 @@ export class HaStatisticPicker extends LitElement {
];
}
if (includeUnitOfMeasurement) {
if (includeStatisticsUnitOfMeasurement) {
statisticIds = statisticIds.filter((meta) =>
includeUnitOfMeasurement.includes(meta.unit_of_measurement)
includeStatisticsUnitOfMeasurement.includes(
meta.statistics_unit_of_measurement
)
);
}
if (includeDisplayUnitOfMeasurement) {
statisticIds = statisticIds.filter((meta) =>
includeDisplayUnitOfMeasurement.includes(
meta.display_unit_of_measurement
)
);
}
@ -184,7 +205,8 @@ export class HaStatisticPicker extends LitElement {
if (this.hasUpdated) {
(this.comboBox as any).items = this._getStatistics(
this.statisticIds!,
this.includeUnitOfMeasurement,
this.includeStatisticsUnitOfMeasurement,
this.includeDisplayUnitOfMeasurement,
this.includeDeviceClasses,
this.entitiesOnly
);
@ -192,7 +214,8 @@ export class HaStatisticPicker extends LitElement {
this.updateComplete.then(() => {
(this.comboBox as any).items = this._getStatistics(
this.statisticIds!,
this.includeUnitOfMeasurement,
this.includeStatisticsUnitOfMeasurement,
this.includeDisplayUnitOfMeasurement,
this.includeDeviceClasses,
this.entitiesOnly
);

2
src/components/ha-addon-picker.ts
View File

@ -1,5 +1,5 @@
import { html, LitElement, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import { isComponentLoaded } from "../common/config/is_component_loaded";
import { fireEvent } from "../common/dom/fire_event";

1
src/components/ha-alert.ts
View File

@ -83,7 +83,6 @@ class HaAlert extends LitElement {
position: relative;
padding: 8px;
display: flex;
margin: 4px 0;
}
.issue-type.rtl {
flex-direction: row-reverse;

2
src/components/ha-area-picker.ts
View File

@ -1,6 +1,6 @@
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";

39
src/components/ha-base-time-input.ts
View File

@ -1,10 +1,11 @@
import "@material/mwc-list/mwc-list-item";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import "./ha-select";
import "./ha-textfield";
import { HaTextField } from "./ha-textfield";
import "./ha-input-helper-text";
export interface TimeChangedEvent {
@ -36,7 +37,7 @@ export class HaBaseTimeInput extends LitElement {
/**
* determines if inputs are required
*/
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean }) public required = false;
/**
* 12 or 24 hr format
@ -123,11 +124,6 @@ export class HaBaseTimeInput extends LitElement {
*/
@property() amPm: "AM" | "PM" = "AM";
/**
* Formatted time string
*/
@property() value?: string;
protected render(): TemplateResult {
return html`
${this.label
@ -140,11 +136,11 @@ export class HaBaseTimeInput extends LitElement {
id="day"
type="number"
inputmode="numeric"
.value=${this.days}
.value=${this.days.toFixed()}
.label=${this.dayLabel}
name="days"
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
no-spinner
.required=${this.required}
.autoValidate=${this.autoValidate}
@ -161,16 +157,16 @@ export class HaBaseTimeInput extends LitElement {
id="hour"
type="number"
inputmode="numeric"
.value=${this.hours}
.value=${this.hours.toFixed()}
.label=${this.hourLabel}
name="hours"
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
no-spinner
.required=${this.required}
.autoValidate=${this.autoValidate}
maxlength="2"
.max=${this._hourMax}
max=${ifDefined(this._hourMax)}
min="0"
.disabled=${this.disabled}
suffix=":"
@ -184,7 +180,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.minutes)}
.label=${this.minLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="minutes"
no-spinner
.required=${this.required}
@ -205,7 +201,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.seconds)}
.label=${this.secLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="seconds"
no-spinner
.required=${this.required}
@ -226,7 +222,7 @@ export class HaBaseTimeInput extends LitElement {
.value=${this._formatValue(this.milliseconds, 3)}
.label=${this.millisecLabel}
@input=${this._valueChanged}
@focus=${this._onFocus}
@focusin=${this._onFocus}
name="milliseconds"
no-spinner
.required=${this.required}
@ -260,9 +256,10 @@ export class HaBaseTimeInput extends LitElement {
`;
}
private _valueChanged(ev) {
this[ev.target.name] =
ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
private _valueChanged(ev: InputEvent) {
const textField = ev.currentTarget as HaTextField;
this[textField.name] =
textField.name === "amPm" ? textField.value : Number(textField.value);
const value: TimeChangedEvent = {
hours: this.hours,
minutes: this.minutes,
@ -277,8 +274,8 @@ export class HaBaseTimeInput extends LitElement {
});
}
private _onFocus(ev) {
ev.target.select();
private _onFocus(ev: FocusEvent) {
(ev.currentTarget as HaTextField).select();
}
/**
@ -293,7 +290,7 @@ export class HaBaseTimeInput extends LitElement {
*/
private get _hourMax() {
if (this.noHoursLimit) {
return null;
return undefined;
}
if (this.format === 12) {
return 12;

9
src/components/ha-blueprint-picker.ts
View File

@ -5,7 +5,12 @@ import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import { stringCompare } from "../common/string/compare";
import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
import {
Blueprint,
BlueprintDomain,
Blueprints,
fetchBlueprints,
} from "../data/blueprint";
import { HomeAssistant } from "../types";
import "./ha-select";
@ -17,7 +22,7 @@ class HaBluePrintPicker extends LitElement {
@property() public value = "";
@property() public domain = "automation";
@property() public domain: BlueprintDomain = "automation";
@property() public blueprints?: Blueprints;

55
src/components/ha-combo-box.ts
View File

@ -9,8 +9,9 @@ import type {
} from "@vaadin/combo-box/vaadin-combo-box-light";
import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../common/dom/fire_event";
import { HomeAssistant } from "../types";
import "./ha-icon-button";
@ -72,31 +73,31 @@ export class HaComboBox extends LitElement {
@property({ attribute: "error-message" }) public errorMessage?: string;
@property({ type: Boolean }) public invalid?: boolean;
@property({ type: Boolean }) public invalid = false;
@property({ type: Boolean }) public icon?: boolean;
@property({ type: Boolean }) public icon = false;
@property() public items?: any[];
@property({ attribute: false }) public items?: any[];
@property() public filteredItems?: any[];
@property({ attribute: false }) public filteredItems?: any[];
@property({ attribute: "allow-custom-value", type: Boolean })
public allowCustomValue?: boolean;
public allowCustomValue = false;
@property({ attribute: "item-value-path" }) public itemValuePath?: string;
@property({ attribute: "item-value-path" }) public itemValuePath = "value";
@property({ attribute: "item-label-path" }) public itemLabelPath?: string;
@property({ attribute: "item-label-path" }) public itemLabelPath = "label";
@property({ attribute: "item-id-path" }) public itemIdPath?: string;
@property() public renderer?: ComboBoxLitRenderer<any>;
@property({ type: Boolean }) public disabled?: boolean;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean, reflect: true, attribute: "opened" })
private _opened?: boolean;
public opened?: boolean;
@query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
@ -149,37 +150,45 @@ export class HaComboBox extends LitElement {
attr-for-value="value"
>
<ha-textfield
.label=${this.label}
.placeholder=${this.placeholder}
.disabled=${this.disabled}
.required=${this.required}
.validationMessage=${this.validationMessage}
label=${ifDefined(this.label)}
placeholder=${ifDefined(this.placeholder)}
?disabled=${this.disabled}
?required=${this.required}
validationMessage=${ifDefined(this.validationMessage)}
.errorMessage=${this.errorMessage}
class="input"
autocapitalize="none"
autocomplete="off"
autocorrect="off"
spellcheck="false"
.suffix=${html`<div style="width: 28px;"></div>`}
.suffix=${html`<div
style="width: 28px;"
role="none presentation"
></div>`}
.icon=${this.icon}
.invalid=${this.invalid}
.helper=${this.helper}
helper=${ifDefined(this.helper)}
helperPersistent
>
<slot name="icon" slot="leadingIcon"></slot>
</ha-textfield>
${this.value
? html`<ha-svg-icon
aria-label=${this.hass?.localize("ui.components.combo-box.clear")}
role="button"
tabindex="-1"
aria-label=${ifDefined(this.hass?.localize("ui.common.clear"))}
class="clear-button"
.path=${mdiClose}
@click=${this._clearValue}
></ha-svg-icon>`
: ""}
<ha-svg-icon
aria-label=${this.hass?.localize("ui.components.combo-box.show")}
role="button"
tabindex="-1"
aria-label=${ifDefined(this.label)}
aria-expanded=${this.opened ? "true" : "false"}
class="toggle-button"
.path=${this._opened ? mdiMenuUp : mdiMenuDown}
.path=${this.opened ? mdiMenuUp : mdiMenuDown}
@click=${this._toggleOpen}
></ha-svg-icon>
</vaadin-combo-box-light>
@ -199,7 +208,7 @@ export class HaComboBox extends LitElement {
}
private _toggleOpen(ev: Event) {
if (this._opened) {
if (this.opened) {
this._comboBox?.close();
ev.stopPropagation();
} else {
@ -211,7 +220,7 @@ export class HaComboBox extends LitElement {
const opened = ev.detail.value;
// delay this so we can handle click event before setting _opened
setTimeout(() => {
this._opened = opened;
this.opened = opened;
}, 0);
// @ts-ignore
fireEvent(this, ev.type, ev.detail);

156
src/components/ha-config-entry-picker.ts Normal file
View File

@ -0,0 +1,156 @@
import "@material/mwc-list/mwc-list-item";
import { html, LitElement, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { PolymerChangedEvent } from "../polymer-types";
import { HomeAssistant } from "../types";
import type { HaComboBox } from "./ha-combo-box";
import { ConfigEntry, getConfigEntries } from "../data/config_entries";
import { domainToName } from "../data/integration";
import { caseInsensitiveStringCompare } from "../common/string/compare";
import { brandsUrl } from "../util/brands-url";
import "./ha-combo-box";
export interface ConfigEntryExtended extends ConfigEntry {
localized_domain_name?: string;
}
@customElement("ha-config-entry-picker")
class HaConfigEntryPicker extends LitElement {
public hass!: HomeAssistant;
@property() public integration?: string;
@property() public label?: string;
@property() public value = "";
@property() public helper?: string;
@state() private _configEntries?: ConfigEntryExtended[];
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@query("ha-combo-box") private _comboBox!: HaComboBox;
public open() {
this._comboBox?.open();
}
public focus() {
this._comboBox?.focus();
}
protected firstUpdated() {
this._getConfigEntries();
}
private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
item
) => html`<mwc-list-item twoline graphic="icon">
<span
>${item.title ||
this.hass.localize(
"ui.panel.config.integrations.config_entry.unnamed_entry"
)}</span
>
<span slot="secondary">${item.localized_domain_name}</span>
<img
slot="graphic"
src=${brandsUrl({
domain: item.domain,
type: "icon",
darkOptimized: this.hass.themes?.darkMode,
})}
referrerpolicy="no-referrer"
@error=${this._onImageError}
@load=${this._onImageLoad}
/>
</mwc-list-item>`;
protected render(): TemplateResult {
if (!this._configEntries) {
return html``;
}
return html`
<ha-combo-box
.hass=${this.hass}
.label=${this.label === undefined && this.hass
? this.hass.localize("ui.components.config-entry-picker.config_entry")
: this.label}
.value=${this._value}
.required=${this.required}
.disabled=${this.disabled}
.helper=${this.helper}
.renderer=${this._rowRenderer}
.items=${this._configEntries}
item-value-path="entry_id"
item-id-path="entry_id"
item-label-path="title"
@value-changed=${this._valueChanged}
></ha-combo-box>
`;
}
private _onImageLoad(ev) {
ev.target.style.visibility = "initial";
}
private _onImageError(ev) {
ev.target.style.visibility = "hidden";
}
private async _getConfigEntries() {
getConfigEntries(this.hass, {
type: "integration",
domain: this.integration,
}).then((configEntries) => {
this._configEntries = configEntries
.map(
(entry: ConfigEntry): ConfigEntryExtended => ({
...entry,
localized_domain_name: domainToName(
this.hass.localize,
entry.domain
),
})
)
.sort((conf1, conf2) =>
caseInsensitiveStringCompare(
conf1.localized_domain_name + conf1.title,
conf2.localized_domain_name + conf2.title
)
);
});
}
private get _value() {
return this.value || "";
}
private _valueChanged(ev: PolymerChangedEvent<string>) {
ev.stopPropagation();
const newValue = ev.detail.value;
if (newValue !== this._value) {
this._setValue(newValue);
}
}
private _setValue(value: string) {
this.value = value;
setTimeout(() => {
fireEvent(this, "value-changed", { value });
fireEvent(this, "change");
}, 0);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-config-entry-picker": HaConfigEntryPicker;
}
}

1
src/components/ha-dialog.ts
View File

@ -80,6 +80,7 @@ export class HaDialog extends DialogBase {
.mdc-dialog .mdc-dialog__surface {
position: var(--dialog-surface-position, relative);
top: var(--dialog-surface-top);
margin-top: var(--dialog-surface-margin-top);
min-height: var(--mdc-dialog-min-height, auto);
border-radius: var(--ha-dialog-border-radius, 28px);
}

8
src/components/ha-duration-input.ts
View File

@ -14,17 +14,17 @@ export interface HaDurationData {
@customElement("ha-duration-input")
class HaDurationInput extends LitElement {
@property({ attribute: false }) public data!: HaDurationData;
@property({ attribute: false }) public data?: HaDurationData;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public required?: boolean;
@property({ type: Boolean }) public required = false;
@property({ type: Boolean }) public enableMillisecond?: boolean;
@property({ type: Boolean }) public enableMillisecond = false;
@property({ type: Boolean }) public enableDay?: boolean;
@property({ type: Boolean }) public enableDay = false;
@property({ type: Boolean }) public disabled = false;

111
src/components/ha-expansion-panel.ts
View File

@ -14,11 +14,13 @@ import { nextRender } from "../common/util/render-status";
import "./ha-svg-icon";
@customElement("ha-expansion-panel")
class HaExpansionPanel extends LitElement {
export class HaExpansionPanel extends LitElement {
@property({ type: Boolean, reflect: true }) expanded = false;
@property({ type: Boolean, reflect: true }) outlined = false;
@property({ type: Boolean, reflect: true }) leftChevron = false;
@property() header?: string;
@property() secondary?: string;
@ -29,23 +31,42 @@ class HaExpansionPanel extends LitElement {
protected render(): TemplateResult {
return html`
<div
id="summary"
@click=${this._toggleContainer}
@keydown=${this._toggleContainer}
role="button"
tabindex="0"
aria-expanded=${this.expanded}
aria-controls="sect1"
>
<slot class="header" name="header">
${this.header}
<slot class="secondary" name="secondary">${this.secondary}</slot>
</slot>
<ha-svg-icon
.path=${mdiChevronDown}
class="summary-icon ${classMap({ expanded: this.expanded })}"
></ha-svg-icon>
<div class="top">
<div
id="summary"
@click=${this._toggleContainer}
@keydown=${this._toggleContainer}
@focus=${this._focusChanged}
@blur=${this._focusChanged}
role="button"
tabindex="0"
aria-expanded=${this.expanded}
aria-controls="sect1"
>
${this.leftChevron
? html`
<ha-svg-icon
.path=${mdiChevronDown}
class="summary-icon ${classMap({ expanded: this.expanded })}"
></ha-svg-icon>
`
: ""}
<slot name="header">
<div class="header">
${this.header}
<slot class="secondary" name="secondary">${this.secondary}</slot>
</div>
</slot>
${!this.leftChevron
? html`
<ha-svg-icon
.path=${mdiChevronDown}
class="summary-icon ${classMap({ expanded: this.expanded })}"
></ha-svg-icon>
`
: ""}
</div>
<slot name="icons"></slot>
</div>
<div
class="container ${classMap({ expanded: this.expanded })}"
@ -61,23 +82,35 @@ class HaExpansionPanel extends LitElement {
}
protected willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps);
if (changedProps.has("expanded") && this.expanded) {
this._showContent = this.expanded;
setTimeout(() => {
// Verify we're still expanded
if (this.expanded) {
this._container.style.overflow = "initial";
}
}, 300);
}
}
private _handleTransitionEnd() {
this._container.style.removeProperty("height");
this._container.style.overflow = this.expanded ? "initial" : "hidden";
this._showContent = this.expanded;
}
private async _toggleContainer(ev): Promise<void> {
if (ev.defaultPrevented) {
return;
}
if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
return;
}
ev.preventDefault();
const newExpanded = !this.expanded;
fireEvent(this, "expanded-will-change", { expanded: newExpanded });
this._container.style.overflow = "hidden";
if (newExpanded) {
this._showContent = true;
@ -98,12 +131,28 @@ class HaExpansionPanel extends LitElement {
fireEvent(this, "expanded-changed", { expanded: this.expanded });
}
private _focusChanged(ev) {
this.shadowRoot!.querySelector(".top")!.classList.toggle(
"focused",
ev.type === "focus"
);
}
static get styles(): CSSResultGroup {
return css`
:host {
display: block;
}
.top {
display: flex;
align-items: center;
}
.top.focused {
background: var(--input-fill-color);
}
:host([outlined]) {
box-shadow: none;
border-width: 1px;
@ -115,7 +164,17 @@ class HaExpansionPanel extends LitElement {
border-radius: var(--ha-card-border-radius, 4px);
}
.summary-icon {
margin-left: 8px;
}
:host([leftchevron]) .summary-icon {
margin-left: 0;
margin-right: 8px;
}
#summary {
flex: 1;
display: flex;
padding: var(--expansion-panel-summary-padding, 0 8px);
min-height: 48px;
@ -126,15 +185,8 @@ class HaExpansionPanel extends LitElement {
outline: none;
}
#summary:focus {
background: var(--input-fill-color);
}
.summary-icon {
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
margin-left: auto;
margin-inline-start: auto;
margin-inline-end: initial;
direction: var(--direction);
}
@ -142,6 +194,11 @@ class HaExpansionPanel extends LitElement {
transform: rotate(180deg);
}
.header,
::slotted([slot="header"]) {
flex: 1;
}
.container {
padding: var(--expansion-panel-content-padding, 0 8px);
overflow: hidden;
@ -153,10 +210,6 @@ class HaExpansionPanel extends LitElement {
height: auto;
}
.header {
display: block;
}
.secondary {
display: block;
color: var(--secondary-text-color);

1
src/components/ha-form/compute-initial-ha-form-data.ts
View File

@ -50,6 +50,7 @@ export const computeInitialHaFormData = (
"text" in selector ||
"addon" in selector ||
"attribute" in selector ||
"file" in selector ||
"icon" in selector ||
"theme" in selector
) {

6
src/components/ha-form/ha-form-positive_time_period_dict.ts
View File

@ -5,9 +5,9 @@ import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types";
@customElement("ha-form-positive_time_period_dict")
export class HaFormTimePeriod extends LitElement implements HaFormElement {
@property() public schema!: HaFormTimeSchema;
@property({ attribute: false }) public schema!: HaFormTimeSchema;
@property() public data!: HaFormTimeData;
@property({ attribute: false }) public data!: HaFormTimeData;
@property() public label!: string;
@ -25,7 +25,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
return html`
<ha-duration-input
.label=${this.label}
.required=${this.schema.required}
?required=${this.schema.required}
.data=${this.data}
.disabled=${this.disabled}
></ha-duration-input>

12
src/components/ha-form/ha-form.ts
View File

@ -35,20 +35,20 @@ export class HaForm extends LitElement implements HaFormElement {
@property({ attribute: false }) public data!: HaFormDataContainer;
@property({ attribute: false }) public schema!: HaFormSchema[];
@property({ attribute: false }) public schema!: readonly HaFormSchema[];
@property() public error?: Record<string, string>;
@property({ type: Boolean }) public disabled = false;
@property() public computeError?: (schema: HaFormSchema, error) => string;
@property() public computeError?: (schema: any, error) => string;
@property() public computeLabel?: (
schema: HaFormSchema,
data?: HaFormDataContainer
schema: any,
data: HaFormDataContainer
) => string;
@property() public computeHelper?: (schema: HaFormSchema) => string;
@property() public computeHelper?: (schema: any) => string | undefined;
public focus() {
const root = this.shadowRoot?.querySelector(".root");
@ -168,7 +168,7 @@ export class HaForm extends LitElement implements HaFormElement {
return this.computeHelper ? this.computeHelper(schema) : "";
}
private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
private _computeError(error, schema: HaFormSchema | readonly HaFormSchema[]) {
return this.computeError ? this.computeError(error, schema) : error;
}

17
src/components/ha-form/types.ts
View File

@ -31,7 +31,7 @@ export interface HaFormGridSchema extends HaFormBaseSchema {
type: "grid";
name: "";
column_min_width?: string;
schema: HaFormSchema[];
schema: readonly HaFormSchema[];
}
export interface HaFormSelector extends HaFormBaseSchema {
@ -53,12 +53,15 @@ export interface HaFormIntegerSchema extends HaFormBaseSchema {
export interface HaFormSelectSchema extends HaFormBaseSchema {
type: "select";
options: Array<[string, string]>;
options: ReadonlyArray<readonly [string, string]>;
}
export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
type: "multi_select";
options: Record<string, string> | string[] | Array<[string, string]>;
options:
| Record<string, string>
| readonly string[]
| ReadonlyArray<readonly [string, string]>;
}
export interface HaFormFloatSchema extends HaFormBaseSchema {
@ -78,6 +81,12 @@ export interface HaFormTimeSchema extends HaFormBaseSchema {
type: "positive_time_period_dict";
}
// Type utility to unionize a schema array by flattening any grid schemas
export type SchemaUnion<
SchemaArray extends readonly HaFormSchema[],
Schema = SchemaArray[number]
> = Schema extends HaFormGridSchema ? SchemaUnion<Schema["schema"]> : Schema;
export interface HaFormDataContainer {
[key: string]: HaFormData;
}
@ -100,7 +109,7 @@ export type HaFormMultiSelectData = string[];
export type HaFormTimeData = HaDurationData;
export interface HaFormElement extends LitElement {
schema: HaFormSchema | HaFormSchema[];
schema: HaFormSchema | readonly HaFormSchema[];
data?: HaFormDataContainer | HaFormData;
label?: string;
}

4
src/components/ha-gauge.ts
View File

@ -132,7 +132,9 @@ export class Gauge extends LitElement {
this._segment_label
? this._segment_label
: this.valueText || formatNumber(this.value, this.locale)
} ${this._segment_label ? "" : this.label}
}${
this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
}
</text>
</svg>`;
}

2
src/components/ha-icon-picker.ts
View File

@ -1,5 +1,5 @@
import { css, html, LitElement, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { customIcons } from "../data/custom_icons";

34
src/components/ha-navigation-list.ts
View File

@ -1,11 +1,12 @@
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { ActionDetail } from "@material/mwc-list/mwc-list";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";
import { navigate } from "../common/navigate";
import type { PageNavigation } from "../layouts/hass-tabs-subpage";
import type { HomeAssistant } from "../types";
import "./ha-clickable-list-item";
import "./ha-icon-next";
import "./ha-list-item";
import "./ha-svg-icon";
@customElement("ha-navigation-list")
@ -18,17 +19,22 @@ class HaNavigationList extends LitElement {
@property({ type: Boolean }) public hasSecondary = false;
@property() public label?: string;
public render(): TemplateResult {
return html`
<mwc-list>
<mwc-list
innerRole="menu"
itemRoles="menuitem"
innerAriaLabel=${ifDefined(this.label)}
@action=${this._handleListAction}
>
${this.pages.map(
(page) => html`
<ha-clickable-list-item
<ha-list-item
graphic="avatar"
.twoline=${this.hasSecondary}
.hasMeta=${!this.narrow}
@click=${this._entryClicked}
href=${page.path}
>
<div
slot="graphic"
@ -44,15 +50,20 @@ class HaNavigationList extends LitElement {
${!this.narrow
? html`<ha-icon-next slot="meta"></ha-icon-next>`
: ""}
</ha-clickable-list-item>
</ha-list-item>
`
)}
</mwc-list>
`;
}
private _entryClicked(ev) {
ev.currentTarget.blur();
private _handleListAction(ev: CustomEvent<ActionDetail>) {
const path = this.pages[ev.detail.index].path;
if (path.endsWith("#external-app-configuration")) {
this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
} else {
navigate(path);
}
}
static styles: CSSResultGroup = css`
@ -75,10 +86,9 @@ class HaNavigationList extends LitElement {
.icon-background ha-svg-icon {
color: #fff;
}
ha-clickable-list-item {
ha-list-item {
cursor: pointer;
font-size: var(--navigation-list-item-title-font-size);
padding: var(--navigation-list-item-padding) 0;
}
`;
}

3
src/components/ha-related-items.ts
View File

@ -326,6 +326,9 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
line-height: var(--paper-font-title_-_line-height);
opacity: var(--dark-primary-opacity);
}
h3:first-child {
margin-top: 0;
}
`;
}
}

7
src/components/ha-selector/ha-selector-attribute.ts
View File

@ -8,9 +8,9 @@ import "../entity/ha-entity-attribute-picker";
@customElement("ha-selector-attribute")
export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: AttributeSelector;
@property({ attribute: false }) public selector!: AttributeSelector;
@property() public value?: any;
@ -22,7 +22,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public required = true;
@property() public context?: {
@property({ attribute: false }) public context?: {
filter_entity?: string;
};
@ -32,6 +32,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
.hass=${this.hass}
.entityId=${this.selector.attribute.entity_id ||
this.context?.filter_entity}
.hideAttributes=${this.selector.attribute.hide_attributes}
.value=${this.value}
.label=${this.label}
.helper=${this.helper}

2
src/components/ha-selector/ha-selector-color-temp.ts
View File

@ -47,7 +47,7 @@ export class HaColorTempSelector extends LitElement {
static styles = css`
ha-labeled-slider {
--ha-slider-background: -webkit-linear-gradient(
right,
var(--float-end),
rgb(255, 160, 0) 0%,
white 50%,
rgb(166, 209, 255) 100%

47
src/components/ha-selector/ha-selector-config-entry.ts Normal file
View File

@ -0,0 +1,47 @@
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { ConfigEntrySelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-config-entry-picker";
@customElement("ha-selector-config_entry")
export class HaConfigEntrySelector extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public selector!: ConfigEntrySelector;
@property() public value?: any;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`<ha-config-entry-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
.integration=${this.selector.config_entry.integration}
allow-custom-entity
></ha-config-entry-picker>`;
}
static styles = css`
ha-config-entry-picker {
width: 100%;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-config_entry": HaConfigEntrySelector;
}
}

4
src/components/ha-selector/ha-selector-datetime.ts
View File

@ -11,9 +11,9 @@ import type { HaTimeInput } from "../ha-time-input";
@customElement("ha-selector-datetime")
export class HaDateTimeSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: DateTimeSelector;
@property({ attribute: false }) public selector!: DateTimeSelector;
@property() public value?: string;

10
src/components/ha-selector/ha-selector-duration.ts
View File

@ -2,15 +2,15 @@ import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { DurationSelector } from "../../data/selector";
import type { HomeAssistant } from "../../types";
import "../ha-duration-input";
import { HaDurationData } from "../ha-duration-input";
@customElement("ha-selector-duration")
export class HaTimeDuration extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: DurationSelector;
@property({ attribute: false }) public selector!: DurationSelector;
@property() public value?: string;
@property({ attribute: false }) public value?: HaDurationData;
@property() public label?: string;
@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement {
.data=${this.value}
.disabled=${this.disabled}
.required=${this.required}
.enableDay=${this.selector.duration.enable_day}
?enableDay=${this.selector.duration.enable_day}
></ha-duration-input>
`;
}

98
src/components/ha-selector/ha-selector-file.ts Normal file
View File

@ -0,0 +1,98 @@
import { mdiFile } from "@mdi/js";
import { html, LitElement, PropertyValues } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { removeFile, uploadFile } from "../../data/file_upload";
import { FileSelector } from "../../data/selector";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import { HomeAssistant } from "../../types";
import "../ha-file-upload";
@customElement("ha-selector-file")
export class HaFileSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property() public selector!: FileSelector;
@property() public value?: string;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
@state() private _filename?: { fileId: string; name: string };
@state() private _busy = false;
protected render() {
return html`
<ha-file-upload
.hass=${this.hass}
.accept=${this.selector.file.accept}
.icon=${mdiFile}
.label=${this.label}
.required=${this.required}
.disabled=${this.disabled}
.helper=${this.helper}
.uploading=${this._busy}
.value=${this.value ? this._filename?.name || "Unknown file" : ""}
@file-picked=${this._uploadFile}
@change=${this._removeFile}
></ha-file-upload>
`;
}
protected willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps);
if (
changedProps.has("value") &&
this._filename &&
this.value !== this._filename.fileId
) {
this._filename = undefined;
}
}
private async _uploadFile(ev) {
this._busy = true;
const file = ev.detail.files![0];
try {
const fileId = await uploadFile(this.hass, file);
this._filename = { fileId, name: file.name };
fireEvent(this, "value-changed", { value: fileId });
} catch (err: any) {
showAlertDialog(this, {
text: this.hass.localize("ui.components.selectors.file.upload_failed", {
reason: err.message || err,
}),
});
} finally {
this._busy = false;
}
}
private _removeFile = async () => {
this._busy = true;
try {
await removeFile(this.hass, this.value!);
} catch (err) {
// Not ideal if removal fails, but will be cleaned up later
} finally {
this._busy = false;
}
this._filename = undefined;
fireEvent(this, "value-changed", { value: "" });
};
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-file": HaFileSelector;
}
}

1
src/components/ha-selector/ha-selector-icon.ts
View File

@ -24,6 +24,7 @@ export class HaIconSelector extends LitElement {
protected render() {
return html`
<ha-icon-picker
.hass=${this.hass}
.label=${this.label}
.value=${this.value}
.required=${this.required}

8
src/components/ha-selector/ha-selector-media.ts
View File

@ -15,13 +15,13 @@ import type { HomeAssistant } from "../../types";
import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
import "../ha-alert";
import "../ha-form/ha-form";
import type { HaFormSchema } from "../ha-form/types";
import type { SchemaUnion } from "../ha-form/types";
import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
const MANUAL_SCHEMA = [
{ name: "media_content_id", required: false, selector: { text: {} } },
{ name: "media_content_type", required: false, selector: { text: {} } },
];
] as const;
@customElement("ha-selector-media")
export class HaMediaSelector extends LitElement {
@ -163,7 +163,9 @@ export class HaMediaSelector extends LitElement {
</ha-card>`}`;
}
private _computeLabelCallback = (schema: HaFormSchema): string =>
private _computeLabelCallback = (
schema: SchemaUnion<typeof MANUAL_SCHEMA>
): string =>
this.hass.localize(`ui.components.selectors.media.${schema.name}`);
private _entityChanged(ev: CustomEvent) {

52
src/components/ha-selector/ha-selector-state.ts Normal file
View File

@ -0,0 +1,52 @@
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { StateSelector } from "../../data/selector";
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
import { HomeAssistant } from "../../types";
import "../entity/ha-entity-state-picker";
@customElement("ha-selector-state")
export class HaSelectorState extends SubscribeMixin(LitElement) {
@property() public hass!: HomeAssistant;
@property() public selector!: StateSelector;
@property() public value?: any;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
@property() public context?: {
filter_attribute?: string;
filter_entity?: string;
};
protected render() {
return html`
<ha-entity-state-picker
.hass=${this.hass}
.entityId=${this.selector.state.entity_id ||
this.context?.filter_entity}
.attribute=${this.selector.state.attribute ||
this.context?.filter_attribute}
.value=${this.value}
.label=${this.label}
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
allow-custom-value
></ha-entity-state-picker>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-state": HaSelectorState;
}
}

3
src/components/ha-selector/ha-selector-target.ts
View File

@ -64,7 +64,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
super.updated(changedProperties);
if (
changedProperties.has("selector") &&
this.selector.target.device?.integration &&
(this.selector.target.device?.integration ||
this.selector.target.entity?.integration) &&
!this._entitySources
) {
fetchEntitySourcesWithCache(this.hass).then((sources) => {

10
src/components/ha-selector/ha-selector-template.ts
View File

@ -1,4 +1,4 @@
import { html, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { HomeAssistant } from "../../types";
@ -48,6 +48,14 @@ export class HaTemplateSelector extends LitElement {
}
fireEvent(this, "value-changed", { value });
}
static get styles() {
return css`
p {
margin-top: 0;
}
`;
}
}
declare global {

4
src/components/ha-selector/ha-selector-time.ts
View File

@ -6,9 +6,9 @@ import "../ha-time-input";
@customElement("ha-selector-time")
export class HaTimeSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public selector!: TimeSelector;
@property({ attribute: false }) public selector!: TimeSelector;
@property() public value?: string;

3
src/components/ha-selector/ha-selector.ts
View File

@ -9,14 +9,17 @@ import "./ha-selector-area";
import "./ha-selector-attribute";
import "./ha-selector-boolean";
import "./ha-selector-color-rgb";
import "./ha-selector-config-entry";
import "./ha-selector-date";
import "./ha-selector-datetime";
import "./ha-selector-device";
import "./ha-selector-duration";
import "./ha-selector-entity";
import "./ha-selector-file";
import "./ha-selector-number";
import "./ha-selector-object";
import "./ha-selector-select";
import "./ha-selector-state";
import "./ha-selector-target";
import "./ha-selector-template";
import "./ha-selector-text";

4
src/components/ha-service-control.ts
View File

@ -230,7 +230,9 @@ export class HaServiceControl extends LitElement {
@value-changed=${this._serviceChanged}
></ha-service-picker>
<div class="description">
<p>${serviceData?.description}</p>
${serviceData?.description
? html`<p>${serviceData?.description}</p>`
: ""}
${this._manifest
? html` <a
href=${this._manifest.is_built_in

2
src/components/ha-service-picker.ts
View File

@ -1,5 +1,5 @@
import { html, LitElement } from "lit";
import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";

63
src/components/ha-sidebar.ts
View File

@ -49,6 +49,7 @@ import { subscribeRepairsIssueRegistry } from "../data/repairs";
import { updateCanInstall, UpdateEntity } from "../data/update";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
import { loadSortable, SortableInstance } from "../resources/sortable.ondemand";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant, PanelInfo, Route } from "../types";
import "./ha-icon";
@ -177,8 +178,6 @@ const computePanels = memoizeOne(
}
);
let Sortable;
@customElement("ha-sidebar")
class HaSidebar extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -205,6 +204,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
private _recentKeydownActiveUntil = 0;
private sortableStyleLoaded = false;
// @ts-ignore
@LocalStorage("sidebarPanelOrder", true, {
attribute: false,
@ -217,7 +218,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
})
private _hiddenPanels: string[] = [];
private _sortable?;
private _sortable?: SortableInstance;
public hassSubscribe(): UnsubscribeFunc[] {
return [
@ -658,36 +659,36 @@ class HaSidebar extends SubscribeMixin(LitElement) {
}
private async _activateEditMode() {
if (!Sortable) {
const [sortableImport, sortStylesImport] = await Promise.all([
import("sortablejs/modular/sortable.core.esm"),
import("../resources/ha-sortable-style"),
]);
const style = document.createElement("style");
style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
this.shadowRoot!.appendChild(style);
Sortable = sortableImport.Sortable;
Sortable.mount(sortableImport.OnSpill);
Sortable.mount(sortableImport.AutoScroll());
}
await this.updateComplete;
this._createSortable();
await Promise.all([this._loadSortableStyle(), this._createSortable()]);
}
private _createSortable() {
this._sortable = new Sortable(this.shadowRoot!.getElementById("sortable"), {
animation: 150,
fallbackClass: "sortable-fallback",
dataIdAttr: "data-panel",
handle: "paper-icon-item",
onSort: async () => {
this._panelOrder = this._sortable.toArray();
},
});
private async _loadSortableStyle() {
if (this.sortableStyleLoaded) return;
const sortStylesImport = await import("../resources/ha-sortable-style");
const style = document.createElement("style");
style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
this.shadowRoot!.appendChild(style);
this.sortableStyleLoaded = true;
await this.updateComplete;
}
private async _createSortable() {
const Sortable = await loadSortable();
this._sortable = new Sortable(
this.shadowRoot!.getElementById("sortable")!,
{
animation: 150,
fallbackClass: "sortable-fallback",
dataIdAttr: "data-panel",
handle: "paper-icon-item",
onSort: async () => {
this._panelOrder = this._sortable!.toArray();
},
}
);
}
private _deactivateEditMode() {

2
src/components/ha-target-picker.ts
View File

@ -258,7 +258,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
}
private _renderChip(
type: string,
type: "area_id" | "device_id" | "entity_id",
id: string,
name: string,
entityState?: HassEntity,

2
src/components/ha-time-input.ts
View File

@ -43,7 +43,7 @@ export class HaTimeInput extends LitElement {
.minutes=${Number(parts[1])}
.seconds=${Number(parts[2])}
.format=${useAMPM ? 12 : 24}
.amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
.amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"}
.disabled=${this.disabled}
@value-changed=${this._timeChanged}
.enableSecond=${this.enableSecond}

1
src/components/ha-water_heater-control.js
View File

@ -26,6 +26,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
#target_temperature {
@apply --layout-self-center;
font-size: 200%;
direction: ltr;
}
.control-buttons {
font-size: 200%;

9
src/components/ha-water_heater-state.js
View File

@ -31,11 +31,16 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
font-weight: bold;
text-transform: capitalize;
}
.label {
direction: ltr;
display: inline-block;
}
</style>
<div class="target">
<span class="state-label"> [[_localizeState(stateObj)]] </span>
[[computeTarget(hass, stateObj)]]
<span class="state-label label"> [[_localizeState(stateObj)]] </span>
<span class="label">[[computeTarget(hass, stateObj)]]</span>
</div>
<template is="dom-if" if="[[currentStatus]]">

24
src/components/trace/hat-script-graph.ts
View File

@ -1,6 +1,5 @@
import {
mdiAbTesting,
mdiAlertOctagon,
mdiArrowDecision,
mdiArrowUp,
mdiAsterisk,
@ -10,17 +9,18 @@ import {
mdiCheckboxBlankOutline,
mdiCheckboxMarkedOutline,
mdiChevronDown,
mdiChevronRight,
mdiChevronUp,
mdiClose,
mdiCloseOctagon,
mdiCodeBraces,
mdiCodeBrackets,
mdiDevices,
mdiExclamation,
mdiGestureDoubleTap,
mdiHandBackRight,
mdiPalette,
mdiRefresh,
mdiRoomService,
mdiShuffleDisabled,
mdiTimerOutline,
mdiTrafficLight,
} from "@mdi/js";
import { css, html, LitElement, PropertyValues } from "lit";
import { customElement, property } from "lit/decorators";
@ -46,7 +46,6 @@ import {
ChooseActionTraceStep,
ConditionTraceStep,
IfActionTraceStep,
StopActionTraceStep,
TraceExtended,
} from "../../data/trace";
import "../ha-icon-button";
@ -419,7 +418,7 @@ export class HatScriptGraph extends LitElement {
return html`
<hat-graph-node
.graphStart=${graphStart}
.iconPath=${mdiExclamation}
.iconPath=${mdiGestureDoubleTap}
@focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace}
?active=${this.selected === path}
@ -485,7 +484,7 @@ export class HatScriptGraph extends LitElement {
return html`
<hat-graph-node
.graphStart=${graphStart}
.iconPath=${mdiExclamation}
.iconPath=${mdiPalette}
@focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace}
?active=${this.selected === path}
@ -504,7 +503,7 @@ export class HatScriptGraph extends LitElement {
return html`
<hat-graph-node
.graphStart=${graphStart}
.iconPath=${mdiChevronRight}
.iconPath=${mdiRoomService}
@focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace}
?active=${this.selected === path}
@ -523,7 +522,7 @@ export class HatScriptGraph extends LitElement {
return html`
<hat-graph-node
.graphStart=${graphStart}
.iconPath=${mdiTrafficLight}
.iconPath=${mdiCodeBraces}
@focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace}
?active=${this.selected === path}
@ -587,13 +586,10 @@ export class HatScriptGraph extends LitElement {
graphStart = false,
disabled = false
) {
const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
return html`
<hat-graph-node
.graphStart=${graphStart}
.iconPath=${trace?.[0].result?.error
? mdiAlertOctagon
: mdiCloseOctagon}
.iconPath=${mdiHandBackRight}
@focus=${this.selectNode(node, path)}
?track=${path in this.trace.trace}
?active=${this.selected === path}

6
src/components/trace/hat-trace-timeline.ts
View File

@ -317,7 +317,11 @@ class ActionRenderer {
private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
this._renderEntry(
triggerStep.path,
`Triggered ${
`${
triggerStep.changed_variables.trigger.alias
? `${triggerStep.changed_variables.trigger.alias} triggered`
: "Triggered"
} ${
triggerStep.path === "trigger"
? "manually"
: `by the ${this.trace.trigger}`

33
src/data/action.ts Normal file
View File

@ -0,0 +1,33 @@
import {
mdiAbTesting,
mdiArrowDecision,
mdiCallSplit,
mdiCodeBraces,
mdiDevices,
mdiGestureDoubleTap,
mdiHandBackRight,
mdiPalette,
mdiPlay,
mdiRefresh,
mdiRoomService,
mdiShuffleDisabled,
mdiTimerOutline,
mdiTrafficLight,
} from "@mdi/js";
export const ACTION_TYPES = {
condition: mdiAbTesting,
delay: mdiTimerOutline,
event: mdiGestureDoubleTap,
play_media: mdiPlay,
activate_scene: mdiPalette,
service: mdiRoomService,
wait_template: mdiCodeBraces,
wait_for_trigger: mdiTrafficLight,
repeat: mdiRefresh,
choose: mdiArrowDecision,
if: mdiCallSplit,
device_id: mdiDevices,
stop: mdiHandBackRight,
parallel: mdiShuffleDisabled,
};

3
src/data/automation.ts
View File

@ -8,7 +8,7 @@ import { BlueprintInput } from "./blueprint";
import { DeviceCondition, DeviceTrigger } from "./device_automation";
import { Action, MODES } from "./script";
export const AUTOMATION_DEFAULT_MODE: ManualAutomationConfig["mode"] = "single";
export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
export interface AutomationEntity extends HassEntityBase {
attributes: HassEntityAttributeBase & {
@ -62,6 +62,7 @@ export interface ContextConstraint {
}
export interface BaseTrigger {
alias?: string;
platform: string;
id?: string;
variables?: Record<string, unknown>;

496
src/data/automation_i18n.ts
View File

@ -1,14 +1,502 @@
import secondsToDuration from "../common/datetime/seconds_to_duration";
import { computeStateName } from "../common/entity/compute_state_name";
import type { HomeAssistant } from "../types";
import { Condition, Trigger } from "./automation";
import {
DeviceCondition,
DeviceTrigger,
localizeDeviceAutomationCondition,
localizeDeviceAutomationTrigger,
} from "./device_automation";
import { formatAttributeName } from "./entity_attributes";
export const describeTrigger = (trigger: Trigger) =>
`${trigger.platform} trigger`;
export const describeTrigger = (
trigger: Trigger,
hass: HomeAssistant,
ignoreAlias = false
) => {
if (trigger.alias && !ignoreAlias) {
return trigger.alias;
}
export const describeCondition = (condition: Condition) => {
if (condition.alias) {
// Event Trigger
if (trigger.platform === "event" && trigger.event_type) {
let eventTypes = "";
if (Array.isArray(trigger.event_type)) {
for (const [index, state] of trigger.event_type.entries()) {
eventTypes += `${index > 0 ? "," : ""} ${
trigger.event_type.length > 1 &&
index === trigger.event_type.length - 1
? "or"
: ""
} ${state}`;
}
} else {
eventTypes = trigger.event_type.toString();
}
return `When ${eventTypes} event is fired`;
}
// Home Assistant Trigger
if (trigger.platform === "homeassistant" && trigger.event) {
return `When Home Assistant is ${
trigger.event === "start" ? "started" : "shutdown"
}`;
}
// Numeric State Trigger
if (trigger.platform === "numeric_state" && trigger.entity_id) {
let base = "When";
const stateObj = hass.states[trigger.entity_id];
const entity = stateObj ? computeStateName(stateObj) : trigger.entity_id;
if (trigger.attribute) {
base += ` ${formatAttributeName(trigger.attribute)} from`;
}
base += ` ${entity} is`;
if ("above" in trigger) {
base += ` above ${trigger.above}`;
}
if ("below" in trigger && "above" in trigger) {
base += " and";
}
if ("below" in trigger) {
base += ` below ${trigger.below}`;
}
return base;
}
// State Trigger
if (trigger.platform === "state" && trigger.entity_id) {
let base = "When";
let entities = "";
const states = hass.states;
if (trigger.attribute) {
base += ` ${formatAttributeName(trigger.attribute)} from`;
}
if (Array.isArray(trigger.entity_id)) {
for (const [index, entity] of trigger.entity_id.entries()) {
if (states[entity]) {
entities += `${index > 0 ? "," : ""} ${
trigger.entity_id.length > 1 &&
index === trigger.entity_id.length - 1
? "or"
: ""
} ${computeStateName(states[entity]) || entity}`;
}
}
} else {
entities = states[trigger.entity_id]
? computeStateName(states[trigger.entity_id])
: trigger.entity_id;
}
base += ` ${entities} changes`;
if (trigger.from) {
let from = "";
if (Array.isArray(trigger.from)) {
for (const [index, state] of trigger.from.entries()) {
from += `${index > 0 ? "," : ""} ${
trigger.from.length > 1 && index === trigger.from.length - 1
? "or"
: ""
} ${state}`;
}
} else {
from = trigger.from.toString();
}
base += ` from ${from}`;
}
if (trigger.to) {
let to = "";
if (Array.isArray(trigger.to)) {
for (const [index, state] of trigger.to.entries()) {
to += `${index > 0 ? "," : ""} ${
trigger.to.length > 1 && index === trigger.to.length - 1 ? "or" : ""
} ${state}`;
}
} else if (trigger.to) {
to = trigger.to.toString();
}
base += ` to ${to}`;
}
if ("for" in trigger) {
let duration: string;
if (typeof trigger.for === "number") {
duration = `for ${secondsToDuration(trigger.for)!}`;
} else if (typeof trigger.for === "string") {
duration = `for ${trigger.for}`;
} else {
duration = `for ${JSON.stringify(trigger.for)}`;
}
base += ` for ${duration}`;
}
return base;
}
// Sun Trigger
if (trigger.platform === "sun" && trigger.event) {
let base = `When the sun ${trigger.event === "sunset" ? "sets" : "rises"}`;
if (trigger.offset) {
let duration = "";
if (trigger.offset) {
if (typeof trigger.offset === "number") {
duration = ` offset by ${secondsToDuration(trigger.offset)!}`;
} else if (typeof trigger.offset === "string") {
duration = ` offset by ${trigger.offset}`;
} else {
duration = ` offset by ${JSON.stringify(trigger.offset)}`;
}
}
base += duration;
}
return base;
}
// Tag Trigger
if (trigger.platform === "tag") {
return "When a tag is scanned";
}
// Time Trigger
if (trigger.platform === "time" && trigger.at) {
const at = trigger.at.includes(".")
? hass.states[trigger.at] || trigger.at
: trigger.at;
return `When the time is equal to ${at}`;
}
// Time Patter Trigger
if (trigger.platform === "time_pattern") {
return "Time pattern trigger";
}
// Zone Trigger
if (trigger.platform === "zone" && trigger.entity_id && trigger.zone) {
let entities = "";
let zones = "";
let zonesPlural = false;
const states = hass.states;
if (Array.isArray(trigger.entity_id)) {
for (const [index, entity] of trigger.entity_id.entries()) {
if (states[entity]) {
entities += `${index > 0 ? "," : ""} ${
trigger.entity_id.length > 1 &&
index === trigger.entity_id.length - 1
? "or"
: ""
} ${computeStateName(states[entity]) || entity}`;
}
}
} else {
entities = states[trigger.entity_id]
? computeStateName(states[trigger.entity_id])
: trigger.entity_id;
}
if (Array.isArray(trigger.zone)) {
if (trigger.zone.length > 1) {
zonesPlural = true;
}
for (const [index, zone] of trigger.zone.entries()) {
if (states[zone]) {
zones += `${index > 0 ? "," : ""} ${
trigger.zone.length > 1 && index === trigger.zone.length - 1
? "or"
: ""
} ${computeStateName(states[zone]) || zone}`;
}
}
} else {
zones = states[trigger.zone]
? computeStateName(states[trigger.zone])
: trigger.zone;
}
return `When ${entities} ${trigger.event}s ${zones} ${
zonesPlural ? "zones" : "zone"
}`;
}
// Geo Location Trigger
if (trigger.platform === "geo_location" && trigger.source && trigger.zone) {
let sources = "";
let zones = "";
let zonesPlural = false;
const states = hass.states;
if (Array.isArray(trigger.source)) {
for (const [index, source] of trigger.source.entries()) {
sources += `${index > 0 ? "," : ""} ${
trigger.source.length > 1 && index === trigger.source.length - 1
? "or"
: ""
} ${source}`;
}
} else {
sources = trigger.source;
}
if (Array.isArray(trigger.zone)) {
if (trigger.zone.length > 1) {
zonesPlural = true;
}
for (const [index, zone] of trigger.zone.entries()) {
if (states[zone]) {
zones += `${index > 0 ? "," : ""} ${
trigger.zone.length > 1 && index === trigger.zone.length - 1
? "or"
: ""
} ${computeStateName(states[zone]) || zone}`;
}
}
} else {
zones = states[trigger.zone]
? computeStateName(states[trigger.zone])
: trigger.zone;
}
return `When ${sources} ${trigger.event}s ${zones} ${
zonesPlural ? "zones" : "zone"
}`;
}
// MQTT Trigger
if (trigger.platform === "mqtt") {
return "When a MQTT payload has been received";
}
// Template Trigger
if (trigger.platform === "template") {
return "When a template triggers";
}
// Webhook Trigger
if (trigger.platform === "webhook") {
return "When a Webhook payload has been received";
}
if (trigger.platform === "device") {
const config = trigger as DeviceTrigger;
const localized = localizeDeviceAutomationTrigger(hass, config);
if (localized) {
return localized;
}
const stateObj = hass.states[config.entity_id as string];
return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
config.type
}`;
}
return `${trigger.platform || "Unknown"} trigger`;
};
export const describeCondition = (
condition: Condition,
hass: HomeAssistant,
ignoreAlias = false
) => {
if (condition.alias && !ignoreAlias) {
return condition.alias;
}
if (["or", "and", "not"].includes(condition.condition)) {
return `multiple conditions using "${condition.condition}"`;
}
// State Condition
if (condition.condition === "state" && condition.entity_id) {
let base = "Confirm";
const stateObj = hass.states[condition.entity_id];
const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
if ("attribute" in condition) {
base += ` ${condition.attribute} from`;
}
let states = "";
if (Array.isArray(condition.state)) {
for (const [index, state] of condition.state.entries()) {
states += `${index > 0 ? "," : ""} ${
condition.state.length > 1 && index === condition.state.length - 1
? "or"
: ""
} ${state}`;
}
} else {
states = condition.state.toString();
}
base += ` ${entity} is ${states}`;
if ("for" in condition) {
let duration: string;
if (typeof condition.for === "number") {
duration = `for ${secondsToDuration(condition.for)!}`;
} else if (typeof condition.for === "string") {
duration = `for ${condition.for}`;
} else {
duration = `for ${JSON.stringify(condition.for)}`;
}
base += ` for ${duration}`;
}
return base;
}
// Numeric State Condition
if (condition.condition === "numeric_state" && condition.entity_id) {
let base = "Confirm";
const stateObj = hass.states[condition.entity_id];
const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
if ("attribute" in condition) {
base += ` ${condition.attribute} from`;
}
base += ` ${entity} is`;
if ("above" in condition) {
base += ` above ${condition.above}`;
}
if ("below" in condition && "above" in condition) {
base += " and";
}
if ("below" in condition) {
base += ` below ${condition.below}`;
}
return base;
}
// Sun condition
if (
condition.condition === "sun" &&
("before" in condition || "after" in condition)
) {
let base = "Confirm";
if (!condition.after && !condition.before) {
base += " sun";
return base;
}
base += " sun";
if (condition.after) {
let duration = "";
if (condition.after_offset) {
if (typeof condition.after_offset === "number") {
duration = ` offset by ${secondsToDuration(condition.after_offset)!}`;
} else if (typeof condition.after_offset === "string") {
duration = ` offset by ${condition.after_offset}`;
} else {
duration = ` offset by ${JSON.stringify(condition.after_offset)}`;
}
}
base += ` after ${condition.after}${duration}`;
}
if (condition.before) {
base += ` before ${condition.before}`;
}
return base;
}
// Zone condition
if (condition.condition === "zone" && condition.entity_id && condition.zone) {
let entities = "";
let entitiesPlural = false;
let zones = "";
let zonesPlural = false;
const states = hass.states;
if (Array.isArray(condition.entity_id)) {
if (condition.entity_id.length > 1) {
entitiesPlural = true;
}
for (const [index, entity] of condition.entity_id.entries()) {
if (states[entity]) {
entities += `${index > 0 ? "," : ""} ${
condition.entity_id.length > 1 &&
index === condition.entity_id.length - 1
? "or"
: ""
} ${computeStateName(states[entity]) || entity}`;
}
}
} else {
entities = states[condition.entity_id]
? computeStateName(states[condition.entity_id])
: condition.entity_id;
}
if (Array.isArray(condition.zone)) {
if (condition.zone.length > 1) {
zonesPlural = true;
}
for (const [index, zone] of condition.zone.entries()) {
if (states[zone]) {
zones += `${index > 0 ? "," : ""} ${
condition.zone.length > 1 && index === condition.zone.length - 1
? "or"
: ""
} ${computeStateName(states[zone]) || zone}`;
}
}
} else {
zones = states[condition.zone]
? computeStateName(states[condition.zone])
: condition.zone;
}
return `Confirm ${entities} ${entitiesPlural ? "are" : "is"} in ${zones} ${
zonesPlural ? "zones" : "zone"
}`;
}
if (condition.condition === "device") {
const config = condition as DeviceCondition;
const localized = localizeDeviceAutomationCondition(hass, config);
if (localized) {
return localized;
}
const stateObj = hass.states[config.entity_id as string];
return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
config.type
}`;
}
return `${condition.condition} condition`;
};

10
src/data/blueprint.ts
View File

@ -1,6 +1,8 @@
import { HomeAssistant } from "../types";
import { Selector } from "./selector";
export type BlueprintDomain = "automation" | "script";
export type Blueprints = Record<string, BlueprintOrError>;
export type BlueprintOrError = Blueprint | { error: string };
@ -9,7 +11,7 @@ export interface Blueprint {
}
export interface BlueprintMetaData {
domain: string;
domain: BlueprintDomain;
name: string;
input?: Record<string, BlueprintInput | null>;
description?: string;
@ -30,7 +32,7 @@ export interface BlueprintImportResult {
validation_errors: string[] | null;
}
export const fetchBlueprints = (hass: HomeAssistant, domain: string) =>
export const fetchBlueprints = (hass: HomeAssistant, domain: BlueprintDomain) =>
hass.callWS<Blueprints>({ type: "blueprint/list", domain });
export const importBlueprint = (hass: HomeAssistant, url: string) =>
@ -38,7 +40,7 @@ export const importBlueprint = (hass: HomeAssistant, url: string) =>
export const saveBlueprint = (
hass: HomeAssistant,
domain: string,
domain: BlueprintDomain,
path: string,
yaml: string,
source_url?: string
@ -53,7 +55,7 @@ export const saveBlueprint = (
export const deleteBlueprint = (
hass: HomeAssistant,
domain: string,
domain: BlueprintDomain,
path: string
) =>
hass.callWS<BlueprintImportResult>({

6
src/data/cloud/tts.ts
View File

@ -59,9 +59,9 @@ export const getCloudTtsSupportedGenders = (
if (curLang === language) {
genders.push([
gender,
localize(`ui.panel.media-browser.tts.gender_${gender}`) ||
localize(`ui.panel.config.cloud.account.tts.${gender}`) ||
gender,
gender === "male" || gender === "female"
? localize(`ui.panel.config.cloud.account.tts.${gender}`)
: gender,
]);
}
}

27
src/data/condition.ts Normal file
View File

@ -0,0 +1,27 @@
import {
mdiAmpersand,
mdiClockOutline,
mdiCodeBraces,
mdiDevices,
mdiGateOr,
mdiIdentifier,
mdiMapMarkerRadius,
mdiNotEqualVariant,
mdiNumeric,
mdiStateMachine,
mdiWeatherSunny,
} from "@mdi/js";
export const CONDITION_TYPES = {
device: mdiDevices,
and: mdiAmpersand,
or: mdiGateOr,
not: mdiNotEqualVariant,
state: mdiStateMachine,
numeric_state: mdiNumeric,
sun: mdiWeatherSunny,
template: mdiCodeBraces,
time: mdiClockOutline,
trigger: mdiIdentifier,
zone: mdiMapMarkerRadius,
};

135
src/data/energy.ts
View File

@ -248,6 +248,62 @@ export interface EnergyData {
fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
}
export const getReferencedStatisticIds = (
prefs: EnergyPreferences,
info: EnergyInfo
): string[] => {
const statIDs: string[] = [];
for (const source of prefs.energy_sources) {
if (source.type === "solar") {
statIDs.push(source.stat_energy_from);
continue;
}
if (source.type === "gas") {
statIDs.push(source.stat_energy_from);
if (source.stat_cost) {
statIDs.push(source.stat_cost);
}
const costStatId = info.cost_sensors[source.stat_energy_from];
if (costStatId) {
statIDs.push(costStatId);
}
continue;
}
if (source.type === "battery") {
statIDs.push(source.stat_energy_from);
statIDs.push(source.stat_energy_to);
continue;
}
// grid source
for (const flowFrom of source.flow_from) {
statIDs.push(flowFrom.stat_energy_from);
if (flowFrom.stat_cost) {
statIDs.push(flowFrom.stat_cost);
}
const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
if (costStatId) {
statIDs.push(costStatId);
}
}
for (const flowTo of source.flow_to) {
statIDs.push(flowTo.stat_energy_to);
if (flowTo.stat_compensation) {
statIDs.push(flowTo.stat_compensation);
}
const costStatId = info.cost_sensors[flowTo.stat_energy_to];
if (costStatId) {
statIDs.push(costStatId);
}
}
}
return statIDs;
};
const getEnergyData = async (
hass: HomeAssistant,
prefs: EnergyPreferences,
@ -285,55 +341,15 @@ const getEnergyData = async (
}
const consumptionStatIDs: string[] = [];
const statIDs: string[] = [];
for (const source of prefs.energy_sources) {
if (source.type === "solar") {
statIDs.push(source.stat_energy_from);
continue;
}
if (source.type === "gas") {
statIDs.push(source.stat_energy_from);
if (source.stat_cost) {
statIDs.push(source.stat_cost);
}
const costStatId = info.cost_sensors[source.stat_energy_from];
if (costStatId) {
statIDs.push(costStatId);
}
continue;
}
if (source.type === "battery") {
statIDs.push(source.stat_energy_from);
statIDs.push(source.stat_energy_to);
continue;
}
// grid source
for (const flowFrom of source.flow_from) {
consumptionStatIDs.push(flowFrom.stat_energy_from);
statIDs.push(flowFrom.stat_energy_from);
if (flowFrom.stat_cost) {
statIDs.push(flowFrom.stat_cost);
}
const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
if (costStatId) {
statIDs.push(costStatId);
}
}
for (const flowTo of source.flow_to) {
statIDs.push(flowTo.stat_energy_to);
if (flowTo.stat_compensation) {
statIDs.push(flowTo.stat_compensation);
}
const costStatId = info.cost_sensors[flowTo.stat_energy_to];
if (costStatId) {
statIDs.push(costStatId);
if (source.type === "grid") {
for (const flowFrom of source.flow_from) {
consumptionStatIDs.push(flowFrom.stat_energy_from);
}
}
}
const statIDs = getReferencedStatisticIds(prefs, info);
const dayDifference = differenceInDays(end || new Date(), start);
const period =
@ -581,7 +597,7 @@ export const getEnergySolarForecasts = (hass: HomeAssistant) =>
type: "energy/solar_forecast",
});
export const ENERGY_GAS_VOLUME_UNITS = ["m³", "ft³"];
export const ENERGY_GAS_VOLUME_UNITS = ["m³"];
export const ENERGY_GAS_ENERGY_UNITS = ["kWh"];
export const ENERGY_GAS_UNITS = [
...ENERGY_GAS_VOLUME_UNITS,
@ -591,18 +607,21 @@ export const ENERGY_GAS_UNITS = [
export type EnergyGasUnit = "volume" | "energy";
export const getEnergyGasUnitCategory = (
hass: HomeAssistant,
prefs: EnergyPreferences
prefs: EnergyPreferences,
statisticsMetaData: Record<string, StatisticsMetaData> = {},
excludeSource?: string
): EnergyGasUnit | undefined => {
for (const source of prefs.energy_sources) {
if (source.type !== "gas") {
continue;
}
const entity = hass.states[source.stat_energy_from];
if (entity) {
if (excludeSource && excludeSource === source.stat_energy_from) {
continue;
}
const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
if (statisticIdWithMeta) {
return ENERGY_GAS_VOLUME_UNITS.includes(
entity.attributes.unit_of_measurement!
statisticIdWithMeta.display_unit_of_measurement
)
? "volume"
: "energy";
@ -612,7 +631,6 @@ export const getEnergyGasUnitCategory = (
};
export const getEnergyGasUnit = (
hass: HomeAssistant,
prefs: EnergyPreferences,
statisticsMetaData: Record<string, StatisticsMetaData> = {}
): string | undefined => {
@ -620,18 +638,9 @@ export const getEnergyGasUnit = (
if (source.type !== "gas") {
continue;
}
const entity = hass.states[source.stat_energy_from];
if (entity?.attributes.unit_of_measurement) {
// Wh is normalized to kWh by stats generation
return entity.attributes.unit_of_measurement === "Wh"
? "kWh"
: entity.attributes.unit_of_measurement;
}
const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
if (statisticIdWithMeta?.unit_of_measurement) {
return statisticIdWithMeta.unit_of_measurement === "Wh"
? "kWh"
: statisticIdWithMeta.unit_of_measurement;
if (statisticIdWithMeta?.display_unit_of_measurement) {
return statisticIdWithMeta.display_unit_of_measurement;
}
}
return undefined;

13
src/data/entity_registry.ts
View File

@ -1,5 +1,6 @@
import { Connection, createCollection } from "home-assistant-js-websocket";
import { Store } from "home-assistant-js-websocket/dist/store";
import memoizeOne from "memoize-one";
import { computeStateName } from "../common/entity/compute_state_name";
import { caseInsensitiveStringCompare } from "../common/string/compare";
import { debounce } from "../common/util/debounce";
@ -7,6 +8,7 @@ import { HomeAssistant } from "../types";
export interface EntityRegistryEntry {
entity_id: string;
unique_id: string;
name: string | null;
icon: string | null;
platform: string;
@ -21,7 +23,6 @@ export interface EntityRegistryEntry {
}
export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
unique_id: string;
capabilities: Record<string, unknown>;
original_icon?: string;
device_class?: string;
@ -161,6 +162,16 @@ export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
);
export const entityRegistryByUniqueId = memoizeOne(
(entries: HomeAssistant["entities"]) => {
const entities: HomeAssistant["entities"] = {};
for (const entity of Object.values(entries)) {
entities[entity.unique_id] = entity;
}
return entities;
}
);
export const getEntityPlatformLookup = (
entities: EntityRegistryEntry[]
): Record<string, string> => {

22
src/data/file_upload.ts Normal file
View File

@ -0,0 +1,22 @@
import { HomeAssistant } from "../types";
export const uploadFile = async (hass: HomeAssistant, file: File) => {
const fd = new FormData();
fd.append("file", file);
const resp = await hass.fetchWithAuth("/api/file_upload", {
method: "POST",
body: fd,
});
if (resp.status === 413) {
throw new Error(`Uploaded file is too large (${file.name})`);
} else if (resp.status !== 200) {
throw new Error("Unknown error");
}
const data = await resp.json();
return data.file_id;
};
export const removeFile = async (hass: HomeAssistant, file_id: string) =>
hass.callApi("DELETE", "file_upload", {
file_id,
});

8
src/data/hardware.ts
View File

@ -37,3 +37,11 @@ export interface HardwareInfoBoardInfo {
revision?: string;
hassio_board_id?: string;
}
export interface SystemStatusStreamMessage {
cpu_percent: number;
memory_free_mb: number;
memory_used_mb: number;
memory_used_percent: number;
timestamp: string;
}

6
src/data/hassio/addon.ts
View File

@ -1,6 +1,6 @@
import { atLeastVersion } from "../../common/config/version";
import type { HaFormSchema } from "../../components/ha-form/types";
import { HomeAssistant } from "../../types";
import { HomeAssistant, TranslationDict } from "../../types";
import { supervisorApiCall } from "../supervisor/common";
import { StoreAddonDetails } from "../supervisor/store";
import { Supervisor, SupervisorArch } from "../supervisor/supervisor";
@ -10,6 +10,10 @@ import {
HassioResponse,
} from "./common";
export type AddonCapability = Exclude<
keyof TranslationDict["supervisor"]["addon"]["dashboard"]["capability"],
"label" | "role" | "stages"
>;
export type AddonStage = "stable" | "experimental" | "deprecated";
export type AddonAppArmour = "disable" | "default" | "profile";
export type AddonRole = "default" | "homeassistant" | "manager" | "admin";

6
src/data/hassio/resolution.ts
View File

@ -1,10 +1,10 @@
import { atLeastVersion } from "../../common/config/version";
import { HomeAssistant } from "../../types";
import { HomeAssistant, TranslationDict } from "../../types";
import { hassioApiResultExtractor, HassioResponse } from "./common";
export interface HassioResolution {
unsupported: string[];
unhealthy: string[];
unsupported: (keyof TranslationDict["supervisor"]["system"]["supervisor"]["unsupported_reason"])[];
unhealthy: (keyof TranslationDict["supervisor"]["system"]["supervisor"]["unhealthy_reason"])[];
issues: string[];
suggestions: string[];
}

22
src/data/helpers_crud.ts
View File

@ -1,31 +1,32 @@
import { fetchCounter, updateCounter, deleteCounter } from "./counter";
import { deleteCounter, fetchCounter, updateCounter } from "./counter";
import {
deleteInputBoolean,
fetchInputBoolean,
updateInputBoolean,
deleteInputBoolean,
} from "./input_boolean";
import {
deleteInputButton,
fetchInputButton,
updateInputButton,
deleteInputButton,
} from "./input_button";
import {
deleteInputDateTime,
fetchInputDateTime,
updateInputDateTime,
deleteInputDateTime,
} from "./input_datetime";
import {
deleteInputNumber,
fetchInputNumber,
updateInputNumber,
deleteInputNumber,
} from "./input_number";
import {
deleteInputSelect,
fetchInputSelect,
updateInputSelect,
deleteInputSelect,
} from "./input_select";
import { fetchInputText, updateInputText, deleteInputText } from "./input_text";
import { fetchTimer, updateTimer, deleteTimer } from "./timer";
import { deleteInputText, fetchInputText, updateInputText } from "./input_text";
import { deleteSchedule, fetchSchedule, updateSchedule } from "./schedule";
import { deleteTimer, fetchTimer, updateTimer } from "./timer";
export const HELPERS_CRUD = {
input_boolean: {
@ -68,4 +69,9 @@ export const HELPERS_CRUD = {
update: updateTimer,
delete: deleteTimer,
},
schedule: {
fetch: fetchSchedule,
update: updateSchedule,
delete: deleteSchedule,
},
};

9
src/data/history.ts
View File

@ -82,7 +82,8 @@ export interface StatisticValue {
}
export interface StatisticsMetaData {
unit_of_measurement: string;
display_unit_of_measurement: string;
statistics_unit_of_measurement: string;
statistic_id: string;
source: string;
name?: string | null;
@ -412,6 +413,7 @@ export const computeHistory = (
unit = stateWithUnitorStateClass.a.unit_of_measurement || " ";
} else {
unit = {
zone: localize("ui.dialogs.more_info_control.zone.graph_unit"),
climate: hass.config.unit_system.temperature,
counter: "#",
humidifier: "%",
@ -568,12 +570,11 @@ export const adjustStatisticsSum = (
export const getStatisticLabel = (
hass: HomeAssistant,
statisticsId: string,
statisticsMetaData: Record<string, StatisticsMetaData>
statisticsMetaData: StatisticsMetaData | undefined
): string => {
const entity = hass.states[statisticsId];
if (entity) {
return computeStateName(entity);
}
const statisticMetaData = statisticsMetaData[statisticsId];
return statisticMetaData?.name || statisticsId;
return statisticsMetaData?.name || statisticsId;
};

2
src/data/logbook.ts
View File

@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
import { UNAVAILABLE_STATES } from "./entity";
const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor"];
export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
export interface LogbookStreamMessage {
events: LogbookEntry[];

6
src/data/media-player.ts
View File

@ -34,7 +34,7 @@ import type {
} from "home-assistant-js-websocket";
import { supportsFeature } from "../common/entity/supports-feature";
import { MediaPlayerItemId } from "../components/media-player/ha-media-player-browse";
import type { HomeAssistant } from "../types";
import type { HomeAssistant, TranslationDict } from "../types";
import { UNAVAILABLE_STATES } from "./entity";
import { isTTSMediaSource } from "./tts";
@ -170,14 +170,14 @@ export interface MediaPlayerThumbnail {
export interface ControlButton {
icon: string;
// Used as key for action as well as tooltip and aria-label translation key
action: string;
action: keyof TranslationDict["ui"]["card"]["media_player"];
}
export interface MediaPlayerItem {
title: string;
media_content_type: string;
media_content_id: string;
media_class: string;
media_class: keyof TranslationDict["ui"]["components"]["media-browser"]["class"];
children_media_class?: string;
can_play: boolean;
can_expand: boolean;

8
src/data/panel.ts
View File

@ -21,16 +21,16 @@ export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
? hass.panels[hass.defaultPanel]
: hass.panels[DEFAULT_PANEL];
export const getPanelNameTranslationKey = (panel: PanelInfo): string => {
export const getPanelNameTranslationKey = (panel: PanelInfo) => {
if (panel.url_path === "lovelace") {
return "panel.states";
return "panel.states" as const;
}
if (panel.url_path === "profile") {
return "panel.profile";
return "panel.profile" as const;
}
return `panel.${panel.title}`;
return `panel.${panel.title}` as const;
};
export const getPanelTitle = (hass: HomeAssistant): string | undefined => {

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