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

20220928.0 (#13904)

Browse Source
This commit is contained in:
Bram Kragten 2022-09-28 18:14:25 +02:00 committed by GitHub
commit e88bb1114b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
176 changed files with 5410 additions and 3574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/stale.yml vendored
View File

@ -10,7 +10,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: 90 days stale policy
uses: actions/stale@v5.1.1
uses: actions/stale@v6.0.0
with:
repo-token: ${{ secrets.GITHUB_TOKEN }}
days-before-stale: 90

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

@ -68,6 +68,7 @@ class HaDemo extends HomeAssistantAppEl {
hidden_by: null,
entity_category: null,
has_entity_name: false,
unique_id: "co2_intensity",
},
{
config_entry_id: "co2signal",
@ -82,6 +83,7 @@ class HaDemo extends HomeAssistantAppEl {
hidden_by: null,
entity_category: null,
has_entity_name: false,
unique_id: "grid_fossil_fuel_percentage",
},
]);

5
demo/src/stubs/energy.ts
View File

@ -11,14 +11,12 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
{
stat_energy_from: "sensor.energy_consumption_tarif_1",
stat_cost: "sensor.energy_consumption_tarif_1_cost",
entity_energy_from: "sensor.energy_consumption_tarif_1",
entity_energy_price: null,
number_energy_price: null,
},
{
stat_energy_from: "sensor.energy_consumption_tarif_2",
stat_cost: "sensor.energy_consumption_tarif_2_cost",
entity_energy_from: "sensor.energy_consumption_tarif_2",
entity_energy_price: null,
number_energy_price: null,
},
@ -27,14 +25,12 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
{
stat_energy_to: "sensor.energy_production_tarif_1",
stat_compensation: "sensor.energy_production_tarif_1_compensation",
entity_energy_to: "sensor.energy_production_tarif_1",
entity_energy_price: null,
number_energy_price: null,
},
{
stat_energy_to: "sensor.energy_production_tarif_2",
stat_compensation: "sensor.energy_production_tarif_2_compensation",
entity_energy_to: "sensor.energy_production_tarif_2",
entity_energy_price: null,
number_energy_price: null,
},
@ -55,7 +51,6 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
type: "gas",
stat_energy_from: "sensor.energy_gas",
stat_cost: "sensor.energy_gas_cost",
entity_energy_from: "sensor.energy_gas",
entity_energy_price: null,
number_energy_price: null,
},

2
demo/src/stubs/history.ts
View File

@ -6,7 +6,7 @@ import {
endOfDay,
} from "date-fns/esm";
import { HassEntity } from "home-assistant-js-websocket";
import { StatisticValue } from "../../../src/data/history";
import { StatisticValue } from "../../../src/data/recorder";
import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
interface HistoryQueryParams {

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

@ -195,6 +195,48 @@ const SCHEMAS: {
},
},
},
select_disabled_list: {
name: "Select disabled option",
selector: {
select: {
options: [
{ label: "Option 1", value: "Option 1" },
{ label: "Option 2", value: "Option 2" },
{ label: "Option 3", value: "Option 3", disabled: true },
],
mode: "list",
},
},
},
select_disabled_multiple: {
name: "Select disabled option",
selector: {
select: {
multiple: true,
options: [
{ label: "Option 1", value: "Option 1" },
{ label: "Option 2", value: "Option 2" },
{ label: "Option 3", value: "Option 3", disabled: true },
],
mode: "list",
},
},
},
select_disabled: {
name: "Select disabled option",
selector: {
select: {
options: [
{ label: "Option 1", value: "Option 1" },
{ label: "Option 2", value: "Option 2" },
{ label: "Option 3", value: "Option 3", disabled: true },
{ label: "Option 4", value: "Option 4", disabled: true },
{ label: "Option 5", value: "Option 5", disabled: true },
{ label: "Option 6", value: "Option 6" },
],
},
},
},
select_custom: {
name: "Select (Custom)",
selector: {

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

@ -196,6 +196,7 @@ const createEntityRegistryEntries = (
icon: null,
platform: "updater",
has_entity_name: false,
unique_id: "updater",
},
];

121
gallery/src/pages/more-info/cover.ts
View File

@ -1,16 +1,7 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../../../src/components/ha-card";
import {
SUPPORT_OPEN,
SUPPORT_STOP,
SUPPORT_CLOSE,
SUPPORT_SET_POSITION,
SUPPORT_OPEN_TILT,
SUPPORT_STOP_TILT,
SUPPORT_CLOSE_TILT,
SUPPORT_SET_TILT_POSITION,
} from "../../../../src/data/cover";
import { CoverEntityFeature } from "../../../../src/data/cover";
import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity";
import {
@ -22,113 +13,127 @@ import "../../components/demo-more-infos";
const ENTITIES = [
getEntity("cover", "position_buttons", "on", {
friendly_name: "Position Buttons",
supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
supported_features:
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE,
}),
getEntity("cover", "position_slider_half", "on", {
friendly_name: "Position Half-Open",
supported_features:
SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.SET_POSITION,
current_position: 50,
}),
getEntity("cover", "position_slider_open", "on", {
friendly_name: "Position Open",
supported_features:
SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.SET_POSITION,
current_position: 100,
}),
getEntity("cover", "position_slider_closed", "on", {
friendly_name: "Position Closed",
supported_features:
SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.SET_POSITION,
current_position: 0,
}),
getEntity("cover", "tilt_buttons", "on", {
friendly_name: "Tilt Buttons",
supported_features:
SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT,
}),
getEntity("cover", "tilt_slider_half", "on", {
friendly_name: "Tilt Half-Open",
supported_features:
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_tilt_position: 50,
}),
getEntity("cover", "tilt_slider_open", "on", {
friendly_name: "Tilt Open",
supported_features:
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_tilt_position: 100,
}),
getEntity("cover", "tilt_slider_closed", "on", {
friendly_name: "Tilt Closed",
supported_features:
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_tilt_position: 0,
}),
getEntity("cover", "position_slider_tilt_slider", "on", {
friendly_name: "Both Sliders",
supported_features:
SUPPORT_OPEN +
SUPPORT_STOP +
SUPPORT_CLOSE +
SUPPORT_SET_POSITION +
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.SET_POSITION +
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_position: 30,
current_tilt_position: 70,
}),
getEntity("cover", "position_tilt_slider", "on", {
friendly_name: "Position & Tilt Slider",
supported_features:
SUPPORT_OPEN +
SUPPORT_STOP +
SUPPORT_CLOSE +
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_tilt_position: 70,
}),
getEntity("cover", "position_slider_tilt", "on", {
friendly_name: "Position Slider & Tilt",
supported_features:
SUPPORT_OPEN +
SUPPORT_STOP +
SUPPORT_CLOSE +
SUPPORT_SET_POSITION +
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT,
CoverEntityFeature.OPEN +
CoverEntityFeature.STOP +
CoverEntityFeature.CLOSE +
CoverEntityFeature.SET_POSITION +
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT,
current_position: 30,
}),
getEntity("cover", "position_slider_only_tilt_slider", "on", {
friendly_name: "Position Slider Only & Tilt Buttons",
supported_features:
SUPPORT_SET_POSITION +
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT,
CoverEntityFeature.SET_POSITION +
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT,
current_position: 30,
}),
getEntity("cover", "position_slider_only_tilt", "on", {
friendly_name: "Position Slider Only & Tilt",
supported_features:
SUPPORT_SET_POSITION +
SUPPORT_OPEN_TILT +
SUPPORT_STOP_TILT +
SUPPORT_CLOSE_TILT +
SUPPORT_SET_TILT_POSITION,
CoverEntityFeature.SET_POSITION +
CoverEntityFeature.OPEN_TILT +
CoverEntityFeature.STOP_TILT +
CoverEntityFeature.CLOSE_TILT +
CoverEntityFeature.SET_TILT_POSITION,
current_position: 30,
current_tilt_position: 70,
}),

3
gallery/src/pages/more-info/input-number.markdown Normal file
View File

@ -0,0 +1,3 @@
---
title: Input Number
---

60
gallery/src/pages/more-info/input-number.ts Normal file
View File

@ -0,0 +1,60 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../../../src/components/ha-card";
import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity";
import {
MockHomeAssistant,
provideHass,
} from "../../../../src/fake_data/provide_hass";
import "../../components/demo-more-infos";
const ENTITIES = [
getEntity("input_number", "box1", 0, {
friendly_name: "Box1",
min: 0,
max: 100,
step: 1,
initial: 0,
mode: "box",
unit_of_measurement: "items",
}),
getEntity("input_number", "slider1", 0, {
friendly_name: "Slider1",
min: 0,
max: 100,
step: 1,
initial: 0,
mode: "slider",
unit_of_measurement: "items",
}),
];
@customElement("demo-more-info-input-number")
class DemoMoreInfoInputNumber extends LitElement {
@property() public hass!: MockHomeAssistant;
@query("demo-more-infos") private _demoRoot!: HTMLElement;
protected render(): TemplateResult {
return html`
<demo-more-infos
.hass=${this.hass}
.entities=${ENTITIES.map((ent) => ent.entityId)}
></demo-more-infos>
`;
}
protected firstUpdated(changedProperties: PropertyValues) {
super.firstUpdated(changedProperties);
const hass = provideHass(this._demoRoot);
hass.updateTranslations(null, "en");
hass.addEntities(ENTITIES);
}
}
declare global {
interface HTMLElementTagNameMap {
"demo-more-info-input-number": DemoMoreInfoInputNumber;
}
}

91
gallery/src/pages/more-info/light.ts
View File

@ -1,12 +1,7 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import "../../../../src/components/ha-card";
import {
LightColorModes,
SUPPORT_EFFECT,
SUPPORT_FLASH,
SUPPORT_TRANSITION,
} from "../../../../src/data/light";
import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
import "../../../../src/dialogs/more-info/more-info-content";
import { getEntity } from "../../../../src/fake_data/entity";
import {
@ -22,8 +17,8 @@ const ENTITIES = [
getEntity("light", "kitchen_light", "on", {
friendly_name: "Brightness Light",
brightness: 200,
supported_color_modes: [LightColorModes.BRIGHTNESS],
color_mode: LightColorModes.BRIGHTNESS,
supported_color_modes: [LightColorMode.BRIGHTNESS],
color_mode: LightColorMode.BRIGHTNESS,
}),
getEntity("light", "color_temperature_light", "on", {
friendly_name: "White Color Temperature Light",
@ -32,10 +27,10 @@ const ENTITIES = [
min_mireds: 30,
max_mireds: 150,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
],
color_mode: LightColorModes.COLOR_TEMP,
color_mode: LightColorMode.COLOR_TEMP,
}),
getEntity("light", "color_hs_light", "on", {
friendly_name: "Color HS Light",
@ -44,13 +39,16 @@ const ENTITIES = [
rgb_color: [30, 100, 255],
min_mireds: 30,
max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorModes.HS,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.HS,
],
color_mode: LightColorModes.HS,
color_mode: LightColorMode.HS,
effect_list: ["random", "colorloop"],
}),
getEntity("light", "color_rgb_ct_light", "on", {
@ -59,22 +57,28 @@ const ENTITIES = [
color_temp: 75,
min_mireds: 30,
max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorModes.RGB,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.RGB,
],
color_mode: LightColorModes.COLOR_TEMP,
color_mode: LightColorMode.COLOR_TEMP,
effect_list: ["random", "colorloop"],
}),
getEntity("light", "color_RGB_light", "on", {
friendly_name: "Color Effects Light",
brightness: 255,
rgb_color: [30, 100, 255],
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
color_mode: LightColorModes.RGB,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
color_mode: LightColorMode.RGB,
effect_list: ["random", "colorloop"],
}),
getEntity("light", "color_rgbw_light", "on", {
@ -83,13 +87,16 @@ const ENTITIES = [
rgbw_color: [30, 100, 255, 125],
min_mireds: 30,
max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorModes.RGBW,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.RGBW,
],
color_mode: LightColorModes.RGBW,
color_mode: LightColorMode.RGBW,
effect_list: ["random", "colorloop"],
}),
getEntity("light", "color_rgbww_light", "on", {
@ -98,13 +105,16 @@ const ENTITIES = [
rgbww_color: [30, 100, 255, 125, 10],
min_mireds: 30,
max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorModes.RGBWW,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.RGBWW,
],
color_mode: LightColorModes.RGBWW,
color_mode: LightColorMode.RGBWW,
effect_list: ["random", "colorloop"],
}),
getEntity("light", "color_xy_light", "on", {
@ -114,13 +124,16 @@ const ENTITIES = [
rgb_color: [30, 100, 255],
min_mireds: 30,
max_mireds: 150,
supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
supported_features:
LightEntityFeature.EFFECT +
LightEntityFeature.FLASH +
LightEntityFeature.TRANSITION,
supported_color_modes: [
LightColorModes.BRIGHTNESS,
LightColorModes.COLOR_TEMP,
LightColorModes.XY,
LightColorMode.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.XY,
],
color_mode: LightColorModes.XY,
color_mode: LightColorMode.XY,
effect_list: ["random", "colorloop"],
}),
];

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

@ -1024,10 +1024,13 @@ class HassioAddonInfo extends LitElement {
button.progress = true;
const confirmed = await showConfirmationDialog(this, {
title: this.addon.name,
text: "Are you sure you want to uninstall this add-on?",
confirmText: "uninstall add-on",
dismissText: "no",
title: this.supervisor.localize("dialog.uninstall_addon.title", {
name: this.addon.name,
}),
text: this.supervisor.localize("dialog.uninstall_addon.text"),
confirmText: this.supervisor.localize("dialog.uninstall_addon.uninstall"),
dismissText: this.supervisor.localize("common.cancel"),
destructive: true,
});
if (!confirmed) {

14
hassio/src/dialogs/suggestAddonRestart.ts
View File

@ -18,9 +18,11 @@ export const suggestAddonRestart = async (
addon: HassioAddonDetails
): Promise<void> => {
const confirmed = await showConfirmationDialog(element, {
title: supervisor.localize("common.restart_name", "name", addon.name),
title: supervisor.localize("dialog.restart_addon.title", {
name: addon.name,
}),
text: supervisor.localize("dialog.restart_addon.text"),
confirmText: supervisor.localize("dialog.restart_addon.confirm_text"),
confirmText: supervisor.localize("dialog.restart_addon.restart"),
dismissText: supervisor.localize("common.cancel"),
});
if (confirmed) {
@ -28,11 +30,9 @@ export const suggestAddonRestart = async (
await restartHassioAddon(hass, addon.slug);
} catch (err: any) {
showAlertDialog(element, {
title: supervisor.localize(
"common.failed_to_restart_name",
"name",
addon.name
),
title: supervisor.localize("common.failed_to_restart_name", {
name: addon.name,
}),
text: extractApiErrorMessage(err),
});
}

44
hassio/src/system/hassio-supervisor-info.ts
View File

@ -23,6 +23,7 @@ import {
showAlertDialog,
showConfirmationDialog,
} from "../../../src/dialogs/generic/show-dialog-box";
import { showJoinBetaDialog } from "../../../src/panels/config/core/updates/show-dialog-join-beta";
import {
UNHEALTHY_REASON_URL,
UNSUPPORTED_REASON_URL,
@ -230,36 +231,27 @@ class HassioSupervisorInfo extends LitElement {
button.progress = true;
if (this.supervisor.supervisor.channel === "stable") {
const confirmed = await showConfirmationDialog(this, {
title: this.supervisor.localize("system.supervisor.warning"),
text: html`${this.supervisor.localize("system.supervisor.beta_warning")}
<br />
<b> ${this.supervisor.localize("system.supervisor.beta_backup")} </b>
<br /><br />
${this.supervisor.localize("system.supervisor.beta_release_items")}
<ul>
<li>Home Assistant Core</li>
<li>Home Assistant Supervisor</li>
<li>Home Assistant Operating System</li>
</ul>
<br />
${this.supervisor.localize("system.supervisor.beta_join_confirm")}`,
confirmText: this.supervisor.localize(
"system.supervisor.join_beta_action"
),
dismissText: this.supervisor.localize("common.cancel"),
showJoinBetaDialog(this, {
join: async () => {
await this._setChannel("beta");
button.progress = false;
},
cancel: () => {
button.progress = false;
},
});
if (!confirmed) {
button.progress = false;
return;
}
} else {
await this._setChannel("stable");
button.progress = false;
}
}
private async _setChannel(
channel: SupervisorOptions["channel"]
): Promise<void> {
try {
const data: Partial<SupervisorOptions> = {
channel:
this.supervisor.supervisor.channel === "stable" ? "beta" : "stable",
channel,
};
await setSupervisorOption(this.hass, data);
await this._reloadSupervisor();
@ -270,8 +262,6 @@ class HassioSupervisorInfo extends LitElement {
),
text: extractApiErrorMessage(err),
});
} finally {
button.progress = false;
}
}

2
package.json
View File

@ -111,7 +111,7 @@
"deep-freeze": "^0.0.1",
"fuse.js": "^6.0.0",
"google-timezones-json": "^1.0.2",
"hls.js": "^1.2.1",
"hls.js": "^1.2.3",
"home-assistant-js-websocket": "^8.0.0",
"idb-keyval": "^5.1.3",
"intl-messageformat": "^9.9.1",

2
pyproject.toml
View File

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

8
script/core
View File

@ -46,6 +46,14 @@ frontend:
# development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
fi
if [ ! -z "${CODESPACES}" ]; then
echo "
http:
use_x_forwarded_for: true
trusted_proxies:
- 127.0.0.1
" >> "${WD}/config/configuration.yaml"
fi
fi
hass -c "${WD}/config"

13
src/common/const.ts
View File

@ -6,6 +6,7 @@ import {
mdiAlert,
mdiAngleAcute,
mdiAppleSafari,
mdiArrowLeftRight,
mdiBell,
mdiBookmark,
mdiBrightness5,
@ -25,7 +26,6 @@ import {
mdiFlower,
mdiFormatListBulleted,
mdiFormTextbox,
mdiGasCylinder,
mdiGauge,
mdiGestureTapButton,
mdiGoogleAssistant,
@ -37,6 +37,8 @@ import {
mdiLightningBolt,
mdiMailbox,
mdiMapMarkerRadius,
mdiMeterGas,
mdiMicrophoneMessage,
mdiMolecule,
mdiMoleculeCo,
mdiMoleculeCo2,
@ -47,13 +49,14 @@ import {
mdiRobotVacuum,
mdiScriptText,
mdiSineWave,
mdiMicrophoneMessage,
mdiSpeedometer,
mdiThermometer,
mdiThermostat,
mdiTimerOutline,
mdiVideo,
mdiWaterPercent,
mdiWeatherCloudy,
mdiWeight,
mdiWhiteBalanceSunny,
mdiWifi,
} from "@mdi/js";
@ -121,9 +124,10 @@ export const FIXED_DEVICE_CLASS_ICONS = {
carbon_monoxide: mdiMoleculeCo,
current: mdiCurrentAc,
date: mdiCalendar,
distance: mdiArrowLeftRight,
energy: mdiLightningBolt,
frequency: mdiSineWave,
gas: mdiGasCylinder,
gas: mdiMeterGas,
humidity: mdiWaterPercent,
illuminance: mdiBrightness5,
moisture: mdiWaterPercent,
@ -140,11 +144,14 @@ export const FIXED_DEVICE_CLASS_ICONS = {
pressure: mdiGauge,
reactive_power: mdiFlash,
signal_strength: mdiWifi,
speed: mdiSpeedometer,
sulphur_dioxide: mdiMolecule,
temperature: mdiThermometer,
timestamp: mdiClock,
volatile_organic_compounds: mdiMolecule,
voltage: mdiSineWave,
// volume: TBD, => no well matching icon found
weight: mdiWeight,
};
/** Domains that have a state card. */

6
src/common/entity/feature_class_names.ts
View File

@ -1,10 +1,14 @@
import { HassEntity } from "home-assistant-js-websocket";
import { supportsFeature } from "./supports-feature";
export type FeatureClassNames<T extends number = number> = Partial<
Record<T, string>
>;
// Expects classNames to be an object mapping feature-bit -> className
export const featureClassNames = (
stateObj: HassEntity,
classNames: { [feature: number]: string }
classNames: FeatureClassNames
) => {
if (!stateObj || !stateObj.attributes.supported_features) {
return "";

1
src/common/entity/get_states.ts
View File

@ -37,6 +37,7 @@ const FIXED_DOMAIN_STATES = {
siren: ["on", "off"],
sun: ["above_horizon", "below_horizon"],
switch: ["on", "off"],
timer: ["active", "idle", "paused"],
update: ["on", "off"],
vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
weather: [

10
src/common/integrations/protocolIntegrationPicked.ts
View File

@ -1,11 +1,11 @@
import { html } from "lit";
import { getConfigEntries } from "../../data/config_entries";
import { showConfigFlowDialog } from "../../dialogs/config-flow/show-dialog-config-flow";
import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
import { showZWaveJSAddNodeDialog } from "../../panels/config/integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
import type { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
import { isComponentLoaded } from "../config/is_component_loaded";
import { fireEvent } from "../dom/fire_event";
import { navigate } from "../navigate";
export const protocolIntegrationPicked = async (
@ -39,8 +39,8 @@ export const protocolIntegrationPicked = async (
"ui.panel.config.integrations.config_flow.proceed"
),
confirm: () => {
fireEvent(element, "handler-picked", {
handler: "zwave_js",
showConfigFlowDialog(element, {
startFlowHandler: "zwave_js",
});
},
});
@ -75,8 +75,8 @@ export const protocolIntegrationPicked = async (
"ui.panel.config.integrations.config_flow.proceed"
),
confirm: () => {
fireEvent(element, "handler-picked", {
handler: "zha",
showConfigFlowDialog(element, {
startFlowHandler: "zha",
});
},
});

4
src/common/string/title-case.ts Normal file
View File

@ -0,0 +1,4 @@
export const titleCase = (s) =>
s.replace(/^_*(.)|_+(.)/g, (_s, c, d) =>
c ? c.toUpperCase() : " " + d.toUpperCase()
);

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

@ -13,6 +13,7 @@ import {
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { getGraphColorByIndex } from "../../common/color/colors";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import {
@ -20,31 +21,37 @@ import {
numberFormatToLocale,
} from "../../common/number/format_number";
import {
getStatisticIds,
getStatisticLabel,
getStatisticMetadata,
Statistics,
statisticsHaveType,
StatisticsMetaData,
StatisticType,
} from "../../data/history";
} from "../../data/recorder";
import type { HomeAssistant } from "../../types";
import "./ha-chart-base";
export type ExtendedStatisticType = StatisticType | "state";
export const statTypeMap: Record<ExtendedStatisticType, StatisticType> = {
mean: "mean",
min: "min",
max: "max",
sum: "sum",
state: "sum",
};
@customElement("statistics-chart")
class StatisticsChart extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public statisticsData!: Statistics;
@property({ type: Array }) public statisticIds?: StatisticsMetaData[];
@property() public names: boolean | Record<string, string> = false;
@property() public unit?: string;
@property({ attribute: false }) public endTime?: Date;
@property({ type: Array }) public statTypes: Array<StatisticType> = [
@property({ type: Array }) public statTypes: Array<ExtendedStatisticType> = [
"sum",
"min",
"mean",
@ -191,18 +198,28 @@ class StatisticsChart extends LitElement {
};
}
private async _getStatisticIds() {
this.statisticIds = await getStatisticIds(this.hass);
}
private _getStatisticsMetaData = memoizeOne(
async (statisticIds: string[] | undefined) => {
const statsMetadataArray = await getStatisticMetadata(
this.hass,
statisticIds
);
const statisticsMetaData = {};
statsMetadataArray.forEach((x) => {
statisticsMetaData[x.statistic_id] = x;
});
return statisticsMetaData;
}
);
private async _generateData() {
if (!this.statisticsData) {
return;
}
if (!this.statisticIds) {
await this._getStatisticIds();
}
const statisticsMetaData = await this._getStatisticsMetaData(
Object.keys(this.statisticsData)
);
let colorIndex = 0;
const statisticsData = Object.values(this.statisticsData);
@ -233,9 +250,7 @@ class StatisticsChart extends LitElement {
const names = this.names || {};
statisticsData.forEach((stats) => {
const firstStat = stats[0];
const meta = this.statisticIds!.find(
(stat) => stat.statistic_id === firstStat.statistic_id
);
const meta = statisticsMetaData?.[firstStat.statistic_id];
let name = names[firstStat.statistic_id];
if (!name) {
name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
@ -301,7 +316,7 @@ class StatisticsChart extends LitElement {
: this.statTypes;
sortedTypes.forEach((type) => {
if (statisticsHaveType(stats, type)) {
if (statisticsHaveType(stats, statTypeMap[type])) {
const band = drawBands && (type === "min" || type === "max");
statTypes.push(type);
statDataSets.push({
@ -329,7 +344,6 @@ class StatisticsChart extends LitElement {
let prevDate: Date | null = null;
// Process chart data.
let initVal: number | null = null;
let prevSum: number | null = null;
stats.forEach((stat) => {
const date = new Date(stat.start);
@ -341,11 +355,11 @@ class StatisticsChart extends LitElement {
statTypes.forEach((type) => {
let val: number | null;
if (type === "sum") {
if (initVal === null) {
initVal = val = stat.state || 0;
if (prevSum === null) {
val = 0;
prevSum = stat.sum;
} else {
val = initVal + ((stat.sum || 0) - prevSum!);
val = (stat.sum || 0) - prevSum;
}
} else {
val = stat[type];

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

@ -3,10 +3,11 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { customElement, property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { ensureArray } from "../../common/ensure-array";
import { fireEvent } from "../../common/dom/fire_event";
import { computeStateName } from "../../common/entity/compute_state_name";
import { stringCompare } from "../../common/string/compare";
import { getStatisticIds, StatisticsMetaData } from "../../data/history";
import { getStatisticIds, StatisticsMetaData } from "../../data/recorder";
import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
@ -39,22 +40,20 @@ export class HaStatisticPicker extends LitElement {
type: Array,
attribute: "include-statistics-unit-of-measurement",
})
public includeStatisticsUnitOfMeasurement?: string[];
public includeStatisticsUnitOfMeasurement?: string | 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[];
@property({ attribute: "include-display-unit-of-measurement" })
public includeDisplayUnitOfMeasurement?: string | string[];
/**
* Show only statistics with these device classes.
* @type {Array}
* @attr include-device-classes
*/
@property({ type: Array, attribute: "include-device-classes" })
@property({ attribute: "include-device-classes" })
public includeDeviceClasses?: string[];
/**
@ -97,8 +96,8 @@ export class HaStatisticPicker extends LitElement {
private _getStatistics = memoizeOne(
(
statisticIds: StatisticsMetaData[],
includeStatisticsUnitOfMeasurement?: string[],
includeDisplayUnitOfMeasurement?: string[],
includeStatisticsUnitOfMeasurement?: string | string[],
includeDisplayUnitOfMeasurement?: string | string[],
includeDeviceClasses?: string[],
entitiesOnly?: boolean
): Array<{ id: string; name: string; state?: HassEntity }> => {
@ -114,17 +113,15 @@ export class HaStatisticPicker extends LitElement {
}
if (includeStatisticsUnitOfMeasurement) {
const includeUnits = ensureArray(includeStatisticsUnitOfMeasurement);
statisticIds = statisticIds.filter((meta) =>
includeStatisticsUnitOfMeasurement.includes(
meta.statistics_unit_of_measurement
)
includeUnits.includes(meta.statistics_unit_of_measurement)
);
}
if (includeDisplayUnitOfMeasurement) {
const includeUnits = ensureArray(includeDisplayUnitOfMeasurement);
statisticIds = statisticIds.filter((meta) =>
includeDisplayUnitOfMeasurement.includes(
meta.display_unit_of_measurement
)
includeUnits.includes(meta.display_unit_of_measurement)
);
}

49
src/components/entity/ha-statistics-picker.ts
View File

@ -22,11 +22,52 @@ class HaStatisticsPicker extends LitElement {
@property({ attribute: "pick-statistic-label" })
public pickStatisticLabel?: string;
/**
* Show only statistics natively stored with these units of measurements.
* @attr include-statistics-unit-of-measurement
*/
@property({
attribute: "include-statistics-unit-of-measurement",
})
public includeStatisticsUnitOfMeasurement?: string[] | string;
/**
* Show only statistics displayed with these units of measurements.
* @attr include-display-unit-of-measurement
*/
@property({ attribute: "include-display-unit-of-measurement" })
public includeDisplayUnitOfMeasurement?: string[] | string;
/**
* Ignore filtering of statistics type and units when only a single statistic is selected.
* @type {boolean}
* @attr ignore-restrictions-on-first-statistic
*/
@property({
type: Boolean,
attribute: "ignore-restrictions-on-first-statistic",
})
public ignoreRestrictionsOnFirstStatistic = false;
protected render(): TemplateResult {
if (!this.hass) {
return html``;
}
const ignoreRestriction =
this.ignoreRestrictionsOnFirstStatistic &&
this._currentStatistics.length <= 1;
const includeDisplayUnitCurrent = ignoreRestriction
? undefined
: this.includeDisplayUnitOfMeasurement;
const includeStatisticsUnitCurrent = ignoreRestriction
? undefined
: this.includeStatisticsUnitOfMeasurement;
const includeStatisticTypesCurrent = ignoreRestriction
? undefined
: this.statisticTypes;
return html`
${this._currentStatistics.map(
(statisticId) => html`
@ -34,8 +75,10 @@ class HaStatisticsPicker extends LitElement {
<ha-statistic-picker
.curValue=${statisticId}
.hass=${this.hass}
.includeDisplayUnitOfMeasurement=${includeDisplayUnitCurrent}
.includeStatisticsUnitOfMeasurement=${includeStatisticsUnitCurrent}
.value=${statisticId}
.statisticTypes=${this.statisticTypes}
.statisticTypes=${includeStatisticTypesCurrent}
.statisticIds=${this.statisticIds}
.label=${this.pickedStatisticLabel}
@value-changed=${this._statisticChanged}
@ -46,6 +89,10 @@ class HaStatisticsPicker extends LitElement {
<div>
<ha-statistic-picker
.hass=${this.hass}
.includeDisplayUnitOfMeasurement=${this
.includeDisplayUnitOfMeasurement}
.includeStatisticsUnitOfMeasurement=${this
.includeStatisticsUnitOfMeasurement}
.statisticTypes=${this.statisticTypes}
.statisticIds=${this.statisticIds}
.label=${this.pickStatisticLabel}

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

@ -290,6 +290,7 @@ export class HaComboBox extends LitElement {
}
vaadin-combo-box-light {
position: relative;
--vaadin-combo-box-overlay-max-height: calc(45vh);
}
ha-textfield {
width: 100%;

11
src/components/ha-cover-controls.ts
View File

@ -3,15 +3,14 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
import { supportsFeature } from "../common/entity/supports-feature";
import {
CoverEntity,
CoverEntityFeature,
isClosing,
isFullyClosed,
isFullyOpen,
isOpening,
supportsClose,
supportsOpen,
supportsStop,
} from "../data/cover";
import { UNAVAILABLE } from "../data/entity";
import type { HomeAssistant } from "../types";
@ -32,7 +31,7 @@ class HaCoverControls extends LitElement {
<div class="state">
<ha-icon-button
class=${classMap({
hidden: !supportsOpen(this.stateObj),
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.OPEN),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_cover"
@ -44,7 +43,7 @@ class HaCoverControls extends LitElement {
</ha-icon-button>
<ha-icon-button
class=${classMap({
hidden: !supportsStop(this.stateObj),
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.STOP),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
@ -55,7 +54,7 @@ class HaCoverControls extends LitElement {
></ha-icon-button>
<ha-icon-button
class=${classMap({
hidden: !supportsClose(this.stateObj),
hidden: !supportsFeature(this.stateObj, CoverEntityFeature.CLOSE),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_cover"

20
src/components/ha-cover-tilt-controls.ts
View File

@ -2,13 +2,12 @@ import { mdiArrowBottomLeft, mdiArrowTopRight, mdiStop } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { supportsFeature } from "../common/entity/supports-feature";
import {
CoverEntity,
CoverEntityFeature,
isFullyClosedTilt,
isFullyOpenTilt,
supportsCloseTilt,
supportsOpenTilt,
supportsStopTilt,
} from "../data/cover";
import { UNAVAILABLE } from "../data/entity";
import { HomeAssistant } from "../types";
@ -27,7 +26,10 @@ class HaCoverTiltControls extends LitElement {
return html` <ha-icon-button
class=${classMap({
invisible: !supportsOpenTilt(this.stateObj),
invisible: !supportsFeature(
this.stateObj,
CoverEntityFeature.OPEN_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.open_tilt_cover"
@ -38,7 +40,10 @@ class HaCoverTiltControls extends LitElement {
></ha-icon-button>
<ha-icon-button
class=${classMap({
invisible: !supportsStopTilt(this.stateObj),
invisible: !supportsFeature(
this.stateObj,
CoverEntityFeature.STOP_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.stop_cover"
@ -49,7 +54,10 @@ class HaCoverTiltControls extends LitElement {
></ha-icon-button>
<ha-icon-button
class=${classMap({
invisible: !supportsCloseTilt(this.stateObj),
invisible: !supportsFeature(
this.stateObj,
CoverEntityFeature.CLOSE_TILT
),
})}
.label=${this.hass.localize(
"ui.dialogs.more_info_control.cover.close_tilt_cover"

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

@ -91,7 +91,7 @@ export class HaDialog extends DialogBase {
.header_button {
position: absolute;
right: 16px;
top: 10px;
top: 14px;
text-decoration: none;
color: inherit;
}

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

@ -13,6 +13,9 @@ export class HaFormfield extends FormfieldBase {
switch (input.tagName) {
case "HA-CHECKBOX":
case "HA-RADIO":
if ((input as any).disabled) {
break;
}
(input as any).checked = !(input as any).checked;
fireEvent(input, "change");
break;

2
src/components/ha-hls-player.ts
View File

@ -165,7 +165,7 @@ class HaHLSPlayer extends LitElement {
window.addEventListener("resize", this._resizeExoPlayer);
this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
this._videoEl.style.visibility = "hidden";
await this.hass!.auth.external!.sendMessage({
await this.hass!.auth.external!.fireMessage({
type: "exoplayer/play_hls",
payload: {
url: new URL(url, window.location.href).toString(),

221
src/components/ha-navigation-picker.ts Normal file
View File

@ -0,0 +1,221 @@
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { titleCase } from "../common/string/title-case";
import {
fetchConfig,
LovelaceConfig,
LovelaceViewConfig,
} from "../data/lovelace";
import { PolymerChangedEvent } from "../polymer-types";
import { HomeAssistant, PanelInfo } from "../types";
import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-icon";
type NavigationItem = {
path: string;
icon: string;
title: string;
};
const DEFAULT_ITEMS: NavigationItem[] = [{ path: "", icon: "", title: "" }];
// eslint-disable-next-line lit/prefer-static-styles
const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
<mwc-list-item graphic="icon" .twoline=${!!item.title}>
<ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
<span>${item.title || item.path}</span>
<span slot="secondary">${item.path}</span>
</mwc-list-item>
`;
const createViewNavigationItem = (
prefix: string,
view: LovelaceViewConfig,
index: number
) => ({
path: `/${prefix}/${view.path ?? index}`,
icon: view.icon ?? "mdi:view-compact",
title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
});
const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
path: `/${panel.url_path}`,
icon: panel.icon ?? "mdi:view-dashboard",
title:
panel.url_path === hass.defaultPanel
? hass.localize("panel.states")
: hass.localize(`panel.${panel.title}`) ||
panel.title ||
(panel.url_path ? titleCase(panel.url_path) : ""),
});
@customElement("ha-navigation-picker")
export class HaNavigationPicker extends LitElement {
@property() public hass?: HomeAssistant;
@property() public label?: string;
@property() public value?: string;
@property() public helper?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
@state() private _opened = false;
private navigationItemsLoaded = false;
private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
@query("ha-combo-box", true) private comboBox!: HaComboBox;
protected render(): TemplateResult {
return html`
<ha-combo-box
.hass=${this.hass}
item-value-path="path"
item-label-path="path"
.value=${this._value}
allow-custom-value
.filteredItems=${this.navigationItems}
.label=${this.label}
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
.renderer=${rowRenderer}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
@filter-changed=${this._filterChanged}
>
</ha-combo-box>
`;
}
private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
this._opened = ev.detail.value;
if (this._opened && !this.navigationItemsLoaded) {
this._loadNavigationItems();
}
}
private async _loadNavigationItems() {
this.navigationItemsLoaded = true;
const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
id,
...panel,
}));
const lovelacePanels = panels.filter(
(panel) => panel.component_name === "lovelace"
);
const viewConfigs = await Promise.all(
lovelacePanels.map((panel) =>
fetchConfig(
this.hass!.connection,
// path should be null to fetch default lovelace panel
panel.url_path === "lovelace" ? null : panel.url_path,
true
)
.then((config) => [panel.id, config] as [string, LovelaceConfig])
.catch((_) => [panel.id, undefined] as [string, undefined])
)
);
const panelViewConfig = new Map(viewConfigs);
this.navigationItems = [];
for (const panel of panels) {
this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
const config = panelViewConfig.get(panel.id);
if (!config) continue;
config.views.forEach((view, index) =>
this.navigationItems.push(
createViewNavigationItem(panel.url_path, view, index)
)
);
}
this.comboBox.filteredItems = this.navigationItems;
}
protected shouldUpdate(changedProps: PropertyValues) {
return !this._opened || changedProps.has("_opened");
}
private _valueChanged(ev: PolymerChangedEvent<string>) {
ev.stopPropagation();
this._setValue(ev.detail.value);
}
private _setValue(value: string) {
this.value = value;
fireEvent(
this,
"value-changed",
{ value: this._value },
{
bubbles: false,
composed: false,
}
);
}
private _filterChanged(ev: CustomEvent): void {
const filterString = ev.detail.value.toLowerCase();
const characterCount = filterString.length;
if (characterCount >= 2) {
const filteredItems: NavigationItem[] = [];
this.navigationItems.forEach((item) => {
if (
item.path.toLowerCase().includes(filterString) ||
item.title.toLowerCase().includes(filterString)
) {
filteredItems.push(item);
}
});
if (filteredItems.length > 0) {
this.comboBox.filteredItems = filteredItems;
} else {
this.comboBox.filteredItems = [];
}
} else {
this.comboBox.filteredItems = this.navigationItems;
}
}
private get _value() {
return this.value || "";
}
static get styles() {
return css`
ha-icon,
ha-svg-icon {
color: var(--primary-text-color);
position: relative;
bottom: 0px;
}
*[slot="prefix"] {
margin-right: 8px;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-navigation-picker": HaNavigationPicker;
}
}

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

@ -0,0 +1,47 @@
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import { NavigationSelector } from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-navigation-picker";
@customElement("ha-selector-navigation")
export class HaNavigationSelector extends LitElement {
@property() public hass!: HomeAssistant;
@property() public selector!: NavigationSelector;
@property() public value?: string;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean, reflect: true }) public disabled = false;
@property({ type: Boolean }) public required = true;
protected render() {
return html`
<ha-navigation-picker
.hass=${this.hass}
.label=${this.label}
.value=${this.value}
.required=${this.required}
.disabled=${this.disabled}
.helper=${this.helper}
@value-changed=${this._valueChanged}
></ha-navigation-picker>
`;
}
private _valueChanged(ev: CustomEvent) {
fireEvent(this, "value-changed", { value: ev.detail.value });
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-navigation": HaNavigationSelector;
}
}

23
src/components/ha-selector/ha-selector-select.ts
View File

@ -13,6 +13,7 @@ import type { HaComboBox } from "../ha-combo-box";
import "../ha-formfield";
import "../ha-radio";
import "../ha-select";
import "../ha-input-helper-text";
@customElement("ha-selector-select")
export class HaSelectSelector extends LitElement {
@ -40,7 +41,7 @@ export class HaSelectSelector extends LitElement {
);
if (!this.selector.select.custom_value && this._mode === "list") {
if (!this.selector.select.multiple || this.required) {
if (!this.selector.select.multiple) {
return html`
<div>
${this.label}
@ -50,7 +51,7 @@ export class HaSelectSelector extends LitElement {
<ha-radio
.checked=${item.value === this.value}
.value=${item.value}
.disabled=${this.disabled}
.disabled=${item.disabled || this.disabled}
@change=${this._valueChanged}
></ha-radio>
</ha-formfield>
@ -63,13 +64,14 @@ export class HaSelectSelector extends LitElement {
return html`
<div>
${this.label}${options.map(
${this.label}
${options.map(
(item: SelectOption) => html`
<ha-formfield .label=${item.label}>
<ha-checkbox
.checked=${this.value?.includes(item.value)}
.value=${item.value}
.disabled=${this.disabled}
.disabled=${item.disabled || this.disabled}
@change=${this._checkboxChanged}
></ha-checkbox>
</ha-formfield>
@ -112,7 +114,9 @@ export class HaSelectSelector extends LitElement {
.disabled=${this.disabled}
.required=${this.required && !value.length}
.value=${this._filter}
.items=${options.filter((item) => !this.value?.includes(item.value))}
.items=${options.filter(
(option) => !option.disabled && !value?.includes(option.value)
)}
@filter-changed=${this._filterChanged}
@value-changed=${this._comboBoxValueChanged}
></ha-combo-box>
@ -136,7 +140,7 @@ export class HaSelectSelector extends LitElement {
.helper=${this.helper}
.disabled=${this.disabled}
.required=${this.required}
.items=${options}
.items=${options.filter((item) => !item.disabled)}
.value=${this.value}
@filter-changed=${this._filterChanged}
@value-changed=${this._comboBoxValueChanged}
@ -157,7 +161,9 @@ export class HaSelectSelector extends LitElement {
>
${options.map(
(item: SelectOption) => html`
<mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
<mwc-list-item .value=${item.value} .disabled=${item.disabled}
>${item.label}</mwc-list-item
>
`
)}
</ha-select>
@ -285,6 +291,9 @@ export class HaSelectSelector extends LitElement {
ha-formfield {
display: block;
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
`;
}

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

@ -16,6 +16,7 @@ import "./ha-selector-device";
import "./ha-selector-duration";
import "./ha-selector-entity";
import "./ha-selector-file";
import "./ha-selector-navigation";
import "./ha-selector-number";
import "./ha-selector-object";
import "./ha-selector-select";

7
src/components/ha-textfield.ts
View File

@ -82,6 +82,13 @@ export class HaTextField extends TextFieldBase {
direction: var(--direction);
}
.mdc-floating-label:not(.mdc-floating-label--float-above) {
text-overflow: ellipsis;
width: inherit;
padding-right: 30px;
box-sizing: border-box;
}
input {
text-align: var(--text-field-text-align, start);
}

2
src/components/trace/trace-tab-styles.ts
View File

@ -28,7 +28,7 @@ export const traceTabStyles = css`
}
.tabs > *.active {
border-bottom-color: var(--accent-color);
border-bottom-color: var(--primary-color);
}
.tabs > *:focus,

13
src/data/application_credential.ts
View File

@ -8,6 +8,10 @@ export interface ApplicationCredentialsConfig {
integrations: Record<string, ApplicationCredentialsDomainConfig>;
}
export interface ApplicationCredentialsConfigEntry {
application_credentials_id?: string;
}
export interface ApplicationCredential {
id: string;
domain: string;
@ -21,6 +25,15 @@ export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
type: "application_credentials/config",
});
export const fetchApplicationCredentialsConfigEntry = async (
hass: HomeAssistant,
configEntryId: string
) =>
hass.callWS<ApplicationCredentialsConfigEntry>({
type: "application_credentials/config_entry",
config_entry_id: configEntryId,
});
export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
hass.callWS<ApplicationCredential[]>({
type: "application_credentials/list",

2
src/data/automation_i18n.ts
View File

@ -189,7 +189,7 @@ export const describeTrigger = (
// Time Trigger
if (trigger.platform === "time" && trigger.at) {
const at = trigger.at.includes(".")
? hass.states[trigger.at] || trigger.at
? `entity ${computeStateName(hass.states[trigger.at]) || trigger.at}`
: trigger.at;
return `When the time is equal to ${at}`;

4
src/data/camera.ts
View File

@ -6,6 +6,7 @@ import { timeCacheEntityPromiseFunc } from "../common/util/time-cache-entity-pro
import { HomeAssistant } from "../types";
import { getSignedPath } from "./auth";
export const CAMERA_ORIENTATIONS = [1, 2, 3, 4, 6, 8];
export const CAMERA_SUPPORT_ON_OFF = 1;
export const CAMERA_SUPPORT_STREAM = 2;
@ -26,6 +27,7 @@ export interface CameraEntity extends HassEntityBase {
export interface CameraPreferences {
preload_stream: boolean;
orientation: number;
}
export interface CameraThumbnail {
@ -109,11 +111,13 @@ export const fetchCameraPrefs = (hass: HomeAssistant, entityId: string) =>
entity_id: entityId,
});
type ValueOf<T extends any[]> = T[number];
export const updateCameraPrefs = (
hass: HomeAssistant,
entityId: string,
prefs: {
preload_stream?: boolean;
orientation?: ValueOf<typeof CAMERA_ORIENTATIONS>;
}
) =>
hass.callWS<CameraPreferences>({

24
src/data/config_entries.ts
View File

@ -1,3 +1,4 @@
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { HomeAssistant } from "../types";
export interface ConfigEntry {
@ -44,6 +45,29 @@ export const RECOVERABLE_STATES: ConfigEntry["state"][] = [
"setup_retry",
];
export interface ConfigEntryUpdate {
// null means no update as is the current state
type: null | "added" | "removed" | "updated";
entry: ConfigEntry;
}
export const subscribeConfigEntries = (
hass: HomeAssistant,
callbackFunction: (message: ConfigEntryUpdate[]) => void,
filters?: { type?: "helper" | "integration"; domain?: string }
): Promise<UnsubscribeFunc> => {
const params: any = {
type: "config_entries/subscribe",
};
if (filters && filters.type) {
params.type_filter = filters.type;
}
return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
(message) => callbackFunction(message),
params
);
};
export const getConfigEntries = (
hass: HomeAssistant,
filters?: { type?: "helper" | "integration"; domain?: string }

64
src/data/cover.ts
View File

@ -4,46 +4,16 @@ import {
} from "home-assistant-js-websocket";
import { supportsFeature } from "../common/entity/supports-feature";
export const SUPPORT_OPEN = 1;
export const SUPPORT_CLOSE = 2;
export const SUPPORT_SET_POSITION = 4;
export const SUPPORT_STOP = 8;
export const SUPPORT_OPEN_TILT = 16;
export const SUPPORT_CLOSE_TILT = 32;
export const SUPPORT_STOP_TILT = 64;
export const SUPPORT_SET_TILT_POSITION = 128;
export const FEATURE_CLASS_NAMES = {
4: "has-set_position",
16: "has-open_tilt",
32: "has-close_tilt",
64: "has-stop_tilt",
128: "has-set_tilt_position",
};
export const supportsOpen = (stateObj) =>
supportsFeature(stateObj, SUPPORT_OPEN);
export const supportsClose = (stateObj) =>
supportsFeature(stateObj, SUPPORT_CLOSE);
export const supportsSetPosition = (stateObj) =>
supportsFeature(stateObj, SUPPORT_SET_POSITION);
export const supportsStop = (stateObj) =>
supportsFeature(stateObj, SUPPORT_STOP);
export const supportsOpenTilt = (stateObj) =>
supportsFeature(stateObj, SUPPORT_OPEN_TILT);
export const supportsCloseTilt = (stateObj) =>
supportsFeature(stateObj, SUPPORT_CLOSE_TILT);
export const supportsStopTilt = (stateObj) =>
supportsFeature(stateObj, SUPPORT_STOP_TILT);
export const supportsSetTiltPosition = (stateObj) =>
supportsFeature(stateObj, SUPPORT_SET_TILT_POSITION);
export const enum CoverEntityFeature {
OPEN = 1,
CLOSE = 2,
SET_POSITION = 4,
STOP = 8,
OPEN_TILT = 16,
CLOSE_TILT = 32,
STOP_TILT = 64,
SET_TILT_POSITION = 128,
}
export function isFullyOpen(stateObj: CoverEntity) {
if (stateObj.attributes.current_position !== undefined) {
@ -77,17 +47,19 @@ export function isClosing(stateObj: CoverEntity) {
export function isTiltOnly(stateObj: CoverEntity) {
const supportsCover =
supportsOpen(stateObj) || supportsClose(stateObj) || supportsStop(stateObj);
supportsFeature(stateObj, CoverEntityFeature.OPEN) ||
supportsFeature(stateObj, CoverEntityFeature.CLOSE) ||
supportsFeature(stateObj, CoverEntityFeature.STOP);
const supportsTilt =
supportsOpenTilt(stateObj) ||
supportsCloseTilt(stateObj) ||
supportsStopTilt(stateObj);
supportsFeature(stateObj, CoverEntityFeature.OPEN_TILT) ||
supportsFeature(stateObj, CoverEntityFeature.CLOSE_TILT) ||
supportsFeature(stateObj, CoverEntityFeature.STOP_TILT);
return supportsTilt && !supportsCover;
}
interface CoverEntityAttributes extends HassEntityAttributeBase {
current_position: number;
current_tilt_position: number;
current_position?: number;
current_tilt_position?: number;
}
export interface CoverEntity extends HassEntityBase {

25
src/data/energy.ts
View File

@ -20,7 +20,8 @@ import {
getStatisticMetadata,
Statistics,
StatisticsMetaData,
} from "./history";
StatisticsUnitConfiguration,
} from "./recorder";
const energyCollectionKeys: (string | undefined)[] = [];
@ -28,7 +29,6 @@ export const emptyFlowFromGridSourceEnergyPreference =
(): FlowFromGridSourceEnergyPreference => ({
stat_energy_from: "",
stat_cost: null,
entity_energy_from: null,
entity_energy_price: null,
number_energy_price: null,
});
@ -37,7 +37,6 @@ export const emptyFlowToGridSourceEnergyPreference =
(): FlowToGridSourceEnergyPreference => ({
stat_energy_to: "",
stat_compensation: null,
entity_energy_to: null,
entity_energy_price: null,
number_energy_price: null,
});
@ -67,7 +66,6 @@ export const emptyGasEnergyPreference = (): GasSourceTypeEnergyPreference => ({
type: "gas",
stat_energy_from: "",
stat_cost: null,
entity_energy_from: null,
entity_energy_price: null,
number_energy_price: null,
});
@ -92,7 +90,6 @@ export interface FlowFromGridSourceEnergyPreference {
stat_cost: string | null;
// Can be used to generate costs if stat_cost omitted
entity_energy_from: string | null;
entity_energy_price: string | null;
number_energy_price: number | null;
}
@ -104,8 +101,7 @@ export interface FlowToGridSourceEnergyPreference {
// $ meter
stat_compensation: string | null;
// Can be used to generate costs if stat_cost omitted
entity_energy_to: string | null;
// Can be used to generate costs if stat_compensation omitted
entity_energy_price: string | null;
number_energy_price: number | null;
}
@ -141,7 +137,6 @@ export interface GasSourceTypeEnergyPreference {
stat_cost: string | null;
// Can be used to generate costs if stat_cost omitted
entity_energy_from: string | null;
entity_energy_price: string | null;
number_energy_price: number | null;
unit_of_measurement?: string | null;
@ -358,12 +353,19 @@ const getEnergyData = async (
// Subtract 1 hour from start to get starting point data
const startMinHour = addHours(start, -1);
const lengthUnit = hass.config.unit_system.length || "";
const units: StatisticsUnitConfiguration = {
energy: "kWh",
volume: lengthUnit === "km" ? "m³" : "ft³",
};
const stats = await fetchStatistics(
hass!,
startMinHour,
end,
statIDs,
period
period,
units
);
let statsCompare;
@ -385,7 +387,8 @@ const getEnergyData = async (
compareStartMinHour,
endCompare,
statIDs,
period
period,
units
);
}
@ -621,7 +624,7 @@ export const getEnergyGasUnitCategory = (
const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
if (statisticIdWithMeta) {
return ENERGY_GAS_VOLUME_UNITS.includes(
statisticIdWithMeta.display_unit_of_measurement
statisticIdWithMeta.statistics_unit_of_measurement
)
? "volume"
: "energy";

4
src/data/entity_registry.ts
View File

@ -20,10 +20,10 @@ export interface EntityRegistryEntry {
entity_category: "config" | "diagnostic" | null;
has_entity_name: boolean;
original_name?: string;
unique_id: string;
}
export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
unique_id: string;
capabilities: Record<string, unknown>;
original_icon?: string;
device_class?: string;
@ -61,7 +61,7 @@ export interface EntityRegistryEntryUpdateParams {
hidden_by: string | null;
new_entity_id?: string;
options_domain?: string;
options?: SensorEntityOptions | WeatherEntityOptions;
options?: SensorEntityOptions | NumberEntityOptions | WeatherEntityOptions;
}
export const findBatteryEntity = (

215
src/data/history.ts
View File

@ -1,10 +1,7 @@
import { HassEntities, HassEntity } from "home-assistant-js-websocket";
import { computeDomain } from "../common/entity/compute_domain";
import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
import {
computeStateName,
computeStateNameFromEntityAttributes,
} from "../common/entity/compute_state_name";
import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
import { LocalizeFunc } from "../common/translations/localize";
import { HomeAssistant } from "../types";
import { FrontendLocaleData } from "./translation";
@ -63,87 +60,6 @@ export interface HistoryResult {
timeline: TimelineEntity[];
}
export type StatisticType = "sum" | "min" | "max" | "mean";
export interface Statistics {
[statisticId: string]: StatisticValue[];
}
export interface StatisticValue {
statistic_id: string;
start: string;
end: string;
last_reset: string | null;
max: number | null;
mean: number | null;
min: number | null;
sum: number | null;
state: number | null;
}
export interface StatisticsMetaData {
display_unit_of_measurement: string;
statistics_unit_of_measurement: string;
statistic_id: string;
source: string;
name?: string | null;
has_sum: boolean;
has_mean: boolean;
}
export type StatisticsValidationResult =
| StatisticsValidationResultNoState
| StatisticsValidationResultEntityNotRecorded
| StatisticsValidationResultEntityNoLongerRecorded
| StatisticsValidationResultUnsupportedStateClass
| StatisticsValidationResultUnitsChanged
| StatisticsValidationResultUnsupportedUnitMetadata
| StatisticsValidationResultUnsupportedUnitState;
export interface StatisticsValidationResultNoState {
type: "no_state";
data: { statistic_id: string };
}
export interface StatisticsValidationResultEntityNoLongerRecorded {
type: "entity_no_longer_recorded";
data: { statistic_id: string };
}
export interface StatisticsValidationResultEntityNotRecorded {
type: "entity_not_recorded";
data: { statistic_id: string };
}
export interface StatisticsValidationResultUnsupportedStateClass {
type: "unsupported_state_class";
data: { statistic_id: string; state_class: string };
}
export interface StatisticsValidationResultUnitsChanged {
type: "units_changed";
data: { statistic_id: string; state_unit: string; metadata_unit: string };
}
export interface StatisticsValidationResultUnsupportedUnitMetadata {
type: "unsupported_unit_metadata";
data: {
statistic_id: string;
device_class: string;
metadata_unit: string;
supported_unit: string;
};
}
export interface StatisticsValidationResultUnsupportedUnitState {
type: "unsupported_unit_state";
data: { statistic_id: string; device_class: string; metadata_unit: string };
}
export interface StatisticsValidationResults {
[statisticId: string]: StatisticsValidationResult[];
}
export interface HistoryStates {
[entityId: string]: EntityHistoryState[];
}
@ -449,132 +365,3 @@ export const computeHistory = (
return { line: unitStates, timeline: timelineDevices };
};
// Statistics
export const getStatisticIds = (
hass: HomeAssistant,
statistic_type?: "mean" | "sum"
) =>
hass.callWS<StatisticsMetaData[]>({
type: "history/list_statistic_ids",
statistic_type,
});
export const getStatisticMetadata = (
hass: HomeAssistant,
statistic_ids?: string[]
) =>
hass.callWS<StatisticsMetaData[]>({
type: "recorder/get_statistics_metadata",
statistic_ids,
});
export const fetchStatistics = (
hass: HomeAssistant,
startTime: Date,
endTime?: Date,
statistic_ids?: string[],
period: "5minute" | "hour" | "day" | "month" = "hour"
) =>
hass.callWS<Statistics>({
type: "history/statistics_during_period",
start_time: startTime.toISOString(),
end_time: endTime?.toISOString(),
statistic_ids,
period,
});
export const validateStatistics = (hass: HomeAssistant) =>
hass.callWS<StatisticsValidationResults>({
type: "recorder/validate_statistics",
});
export const updateStatisticsMetadata = (
hass: HomeAssistant,
statistic_id: string,
unit_of_measurement: string | null
) =>
hass.callWS<void>({
type: "recorder/update_statistics_metadata",
statistic_id,
unit_of_measurement,
});
export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
hass.callWS<void>({
type: "recorder/clear_statistics",
statistic_ids,
});
export const calculateStatisticSumGrowth = (
values: StatisticValue[]
): number | null => {
if (!values || values.length < 2) {
return null;
}
const endSum = values[values.length - 1].sum;
if (endSum === null) {
return null;
}
const startSum = values[0].sum;
if (startSum === null) {
return endSum;
}
return endSum - startSum;
};
export const calculateStatisticsSumGrowth = (
data: Statistics,
stats: string[]
): number | null => {
let totalGrowth: number | null = null;
for (const stat of stats) {
if (!(stat in data)) {
continue;
}
const statGrowth = calculateStatisticSumGrowth(data[stat]);
if (statGrowth === null) {
continue;
}
if (totalGrowth === null) {
totalGrowth = statGrowth;
} else {
totalGrowth += statGrowth;
}
}
return totalGrowth;
};
export const statisticsHaveType = (
stats: StatisticValue[],
type: StatisticType
) => stats.some((stat) => stat[type] !== null);
export const adjustStatisticsSum = (
hass: HomeAssistant,
statistic_id: string,
start_time: string,
adjustment: number
): Promise<void> =>
hass.callWS({
type: "recorder/adjust_sum_statistics",
statistic_id,
start_time,
adjustment,
});
export const getStatisticLabel = (
hass: HomeAssistant,
statisticsId: string,
statisticsMetaData: StatisticsMetaData | undefined
): string => {
const entity = hass.states[statisticsId];
if (entity) {
return computeStateName(entity);
}
return statisticsMetaData?.name || statisticsId;
};

37
src/data/integrations.ts Normal file
View File

@ -0,0 +1,37 @@
import { HomeAssistant } from "../types";
export type IotStandards = "z-wave" | "zigbee" | "homekit" | "matter";
export interface Integration {
name?: string;
config_flow?: boolean;
integrations?: Integrations;
iot_standards?: IotStandards[];
is_built_in?: boolean;
iot_class?: string;
}
export interface Integrations {
[domain: string]: Integration;
}
export interface IntegrationDescriptions {
core: {
integration: Integrations;
hardware: Integrations;
helper: Integrations;
translated_name: string[];
};
custom: {
integration: Integrations;
hardware: Integrations;
helper: Integrations;
};
}
export const getIntegrationDescriptions = (
hass: HomeAssistant
): Promise<IntegrationDescriptions> =>
hass.callWS<IntegrationDescriptions>({
type: "integration/descriptions",
});

77
src/data/light.ts
View File

@ -3,76 +3,83 @@ import {
HassEntityBase,
} from "home-assistant-js-websocket";
export const enum LightColorModes {
export const enum LightEntityFeature {
EFFECT = 4,
FLASH = 8,
TRANSITION = 32,
}
export const enum LightColorMode {
UNKNOWN = "unknown",
ONOFF = "onoff",
BRIGHTNESS = "brightness",
COLOR_TEMP = "color_temp",
WHITE = "white",
HS = "hs",
XY = "xy",
RGB = "rgb",
RGBW = "rgbw",
RGBWW = "rgbww",
WHITE = "white",
}
const modesSupportingColor = [
LightColorModes.HS,
LightColorModes.XY,
LightColorModes.RGB,
LightColorModes.RGBW,
LightColorModes.RGBWW,
LightColorMode.HS,
LightColorMode.XY,
LightColorMode.RGB,
LightColorMode.RGBW,
LightColorMode.RGBWW,
];
const modesSupportingDimming = [
const modesSupportingBrightness = [
...modesSupportingColor,
LightColorModes.COLOR_TEMP,
LightColorModes.BRIGHTNESS,
LightColorMode.COLOR_TEMP,
LightColorMode.BRIGHTNESS,
LightColorMode.WHITE,
];
export const SUPPORT_EFFECT = 4;
export const SUPPORT_FLASH = 8;
export const SUPPORT_TRANSITION = 32;
export const lightSupportsColorMode = (
entity: LightEntity,
mode: LightColorModes
) => entity.attributes.supported_color_modes?.includes(mode);
mode: LightColorMode
) => entity.attributes.supported_color_modes?.includes(mode) || false;
export const lightIsInColorMode = (entity: LightEntity) =>
modesSupportingColor.includes(entity.attributes.color_mode);
(entity.attributes.color_mode &&
modesSupportingColor.includes(entity.attributes.color_mode)) ||
false;
export const lightSupportsColor = (entity: LightEntity) =>
entity.attributes.supported_color_modes?.some((mode) =>
modesSupportingColor.includes(mode)
);
export const lightSupportsDimming = (entity: LightEntity) =>
export const lightSupportsBrightness = (entity: LightEntity) =>
entity.attributes.supported_color_modes?.some((mode) =>
modesSupportingDimming.includes(mode)
);
modesSupportingBrightness.includes(mode)
) || false;
export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
entity.attributes.color_mode === LightColorModes.RGBWW
export const getLightCurrentModeRgbColor = (
entity: LightEntity
): number[] | undefined =>
entity.attributes.color_mode === LightColorMode.RGBWW
? entity.attributes.rgbww_color
: entity.attributes.color_mode === LightColorModes.RGBW
: entity.attributes.color_mode === LightColorMode.RGBW
? entity.attributes.rgbw_color
: entity.attributes.rgb_color;
interface LightEntityAttributes extends HassEntityAttributeBase {
min_mireds: number;
max_mireds: number;
friendly_name: string;
brightness: number;
hs_color: [number, number];
rgb_color: [number, number, number];
rgbw_color: [number, number, number, number];
rgbww_color: [number, number, number, number, number];
color_temp: number;
min_mireds?: number;
max_mireds?: number;
brightness?: number;
xy_color?: [number, number];
hs_color?: [number, number];
color_temp?: number;
rgb_color?: [number, number, number];
rgbw_color?: [number, number, number, number];
rgbww_color?: [number, number, number, number, number];
effect?: string;
effect_list: string[] | null;
supported_color_modes: LightColorModes[];
color_mode: LightColorModes;
effect_list?: string[] | null;
supported_color_modes?: LightColorMode[];
color_mode?: LightColorMode;
}
export interface LightEntity extends HassEntityBase {

2
src/data/lovelace.ts
View File

@ -93,6 +93,8 @@ export interface LovelaceViewConfig {
panel?: boolean;
background?: string;
visible?: boolean | ShowViewConfig[];
subview?: boolean;
back_path?: string;
}
export interface LovelaceViewElement extends HTMLElement {

247
src/data/recorder.ts Normal file
View File

@ -0,0 +1,247 @@
import { computeStateName } from "../common/entity/compute_state_name";
import { HomeAssistant } from "../types";
export type StatisticType = "state" | "sum" | "min" | "max" | "mean";
export interface Statistics {
[statisticId: string]: StatisticValue[];
}
export interface StatisticValue {
statistic_id: string;
start: string;
end: string;
last_reset: string | null;
max: number | null;
mean: number | null;
min: number | null;
sum: number | null;
state: number | null;
}
export interface StatisticsMetaData {
display_unit_of_measurement: string;
statistics_unit_of_measurement: string;
statistic_id: string;
source: string;
name?: string | null;
has_sum: boolean;
has_mean: boolean;
}
export type StatisticsValidationResult =
| StatisticsValidationResultNoState
| StatisticsValidationResultEntityNotRecorded
| StatisticsValidationResultEntityNoLongerRecorded
| StatisticsValidationResultUnsupportedStateClass
| StatisticsValidationResultUnitsChanged
| StatisticsValidationResultUnsupportedUnitMetadata
| StatisticsValidationResultUnsupportedUnitState;
export interface StatisticsValidationResultNoState {
type: "no_state";
data: { statistic_id: string };
}
export interface StatisticsValidationResultEntityNoLongerRecorded {
type: "entity_no_longer_recorded";
data: { statistic_id: string };
}
export interface StatisticsValidationResultEntityNotRecorded {
type: "entity_not_recorded";
data: { statistic_id: string };
}
export interface StatisticsValidationResultUnsupportedStateClass {
type: "unsupported_state_class";
data: { statistic_id: string; state_class: string };
}
export interface StatisticsValidationResultUnitsChanged {
type: "units_changed";
data: { statistic_id: string; state_unit: string; metadata_unit: string };
}
export interface StatisticsValidationResultUnsupportedUnitMetadata {
type: "unsupported_unit_metadata";
data: {
statistic_id: string;
device_class: string;
metadata_unit: string;
supported_unit: string;
};
}
export interface StatisticsUnitConfiguration {
energy?: "Wh" | "kWh" | "MWh";
power?: "W" | "kW";
pressure?:
| "Pa"
| "hPa"
| "kPa"
| "bar"
| "cbar"
| "mbar"
| "inHg"
| "psi"
| "mmHg";
temperature?: "°C" | "°F" | "K";
volume?: "ft³" | "m³";
}
export interface StatisticsValidationResultUnsupportedUnitState {
type: "unsupported_unit_state";
data: { statistic_id: string; device_class: string; metadata_unit: string };
}
export interface StatisticsValidationResults {
[statisticId: string]: StatisticsValidationResult[];
}
export const getStatisticIds = (
hass: HomeAssistant,
statistic_type?: "mean" | "sum"
) =>
hass.callWS<StatisticsMetaData[]>({
type: "recorder/list_statistic_ids",
statistic_type,
});
export const getStatisticMetadata = (
hass: HomeAssistant,
statistic_ids?: string[]
) =>
hass.callWS<StatisticsMetaData[]>({
type: "recorder/get_statistics_metadata",
statistic_ids,
});
export const fetchStatistics = (
hass: HomeAssistant,
startTime: Date,
endTime?: Date,
statistic_ids?: string[],
period: "5minute" | "hour" | "day" | "month" = "hour",
units?: StatisticsUnitConfiguration
) =>
hass.callWS<Statistics>({
type: "recorder/statistics_during_period",
start_time: startTime.toISOString(),
end_time: endTime?.toISOString(),
statistic_ids,
period,
units,
});
export const validateStatistics = (hass: HomeAssistant) =>
hass.callWS<StatisticsValidationResults>({
type: "recorder/validate_statistics",
});
export const updateStatisticsMetadata = (
hass: HomeAssistant,
statistic_id: string,
unit_of_measurement: string | null
) =>
hass.callWS<void>({
type: "recorder/update_statistics_metadata",
statistic_id,
unit_of_measurement,
});
export const clearStatistics = (hass: HomeAssistant, statistic_ids: string[]) =>
hass.callWS<void>({
type: "recorder/clear_statistics",
statistic_ids,
});
export const calculateStatisticSumGrowth = (
values: StatisticValue[]
): number | null => {
if (!values || values.length < 2) {
return null;
}
const endSum = values[values.length - 1].sum;
if (endSum === null) {
return null;
}
const startSum = values[0].sum;
if (startSum === null) {
return endSum;
}
return endSum - startSum;
};
export const calculateStatisticsSumGrowth = (
data: Statistics,
stats: string[]
): number | null => {
let totalGrowth: number | null = null;
for (const stat of stats) {
if (!(stat in data)) {
continue;
}
const statGrowth = calculateStatisticSumGrowth(data[stat]);
if (statGrowth === null) {
continue;
}
if (totalGrowth === null) {
totalGrowth = statGrowth;
} else {
totalGrowth += statGrowth;
}
}
return totalGrowth;
};
export const statisticsHaveType = (
stats: StatisticValue[],
type: StatisticType
) => stats.some((stat) => stat[type] !== null);
const mean_stat_types: readonly StatisticType[] = ["mean", "min", "max"];
const sum_stat_types: readonly StatisticType[] = ["sum"];
export const statisticsMetaHasType = (
metadata: StatisticsMetaData,
type: StatisticType
) => {
if (mean_stat_types.includes(type) && metadata.has_mean) {
return true;
}
if (sum_stat_types.includes(type) && metadata.has_sum) {
return true;
}
return false;
};
export const adjustStatisticsSum = (
hass: HomeAssistant,
statistic_id: string,
start_time: string,
adjustment: number,
display_unit: string
): Promise<void> =>
hass.callWS({
type: "recorder/adjust_sum_statistics",
statistic_id,
start_time,
adjustment,
display_unit,
});
export const getStatisticLabel = (
hass: HomeAssistant,
statisticsId: string,
statisticsMetaData: StatisticsMetaData | undefined
): string => {
const entity = hass.states[statisticsId];
if (entity) {
return computeStateName(entity);
}
return statisticsMetaData?.name || statisticsId;
};

3
src/data/scene.ts
View File

@ -14,8 +14,11 @@ export const SCENE_IGNORED_DOMAINS = [
"input_button",
"persistent_notification",
"person",
"scene",
"schedule",
"sensor",
"sun",
"update",
"weather",
"zone",
];

5
src/data/script.ts
View File

@ -15,7 +15,6 @@ import {
Describe,
boolean,
} from "superstruct";
import { computeObjectId } from "../common/entity/compute_object_id";
import { navigate } from "../common/navigate";
import { HomeAssistant } from "../types";
import {
@ -278,9 +277,9 @@ export type ActionType = keyof ActionTypes;
export const triggerScript = (
hass: HomeAssistant,
entityId: string,
scriptId: string,
variables?: Record<string, unknown>
) => hass.callService("script", computeObjectId(entityId), variables);
) => hass.callService("script", scriptId, variables);
export const canRun = (state: ScriptEntity) => {
if (state.state === "off") {

7
src/data/selector.ts
View File

@ -21,6 +21,7 @@ export type Selector =
| IconSelector
| LocationSelector
| MediaSelector
| NavigationSelector
| NumberSelector
| ObjectSelector
| SelectSelector
@ -171,6 +172,11 @@ export interface MediaSelectorValue {
};
}
export interface NavigationSelector {
// eslint-disable-next-line @typescript-eslint/ban-types
navigation: {};
}
export interface NumberSelector {
number: {
min?: number;
@ -189,6 +195,7 @@ export interface ObjectSelector {
export interface SelectOption {
value: string;
label: string;
disabled?: boolean;
}
export interface SelectSelector {

9
src/data/supported_brands.ts
View File

@ -1,6 +1,13 @@
import { SupportedBrandObj } from "../dialogs/config-flow/step-flow-pick-handler";
import type { HomeAssistant } from "../types";
export interface SupportedBrandObj {
name: string;
slug: string;
is_add?: boolean;
is_helper?: boolean;
supported_flows: string[];
}
export type SupportedBrandHandler = Record<string, string>;
export const getSupportedBrands = (hass: HomeAssistant) =>

2
src/data/zha.ts
View File

@ -309,7 +309,7 @@ export const fetchCommandsForCluster = (
cluster_type: clusterType,
});
export const fetchClustersForZhaNode = (
export const fetchClustersForZhaDevice = (
hass: HomeAssistant,
ieeeAddress: string
): Promise<Cluster[]> =>

1
src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
View File

@ -170,7 +170,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
),
});
}
this._params!.entryUpdated(result.config_entry);
this.closeDialog();
} catch (err: any) {
this._error = err.message || "Unknown error";

1
src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts
View File

@ -5,7 +5,6 @@ import { IntegrationManifest } from "../../data/integration";
export interface ConfigEntrySystemOptionsDialogParams {
entry: ConfigEntry;
manifest?: IntegrationManifest;
entryUpdated(entry: ConfigEntry): void;
}
export const loadConfigEntrySystemOptionsDialog = () =>

160
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -18,9 +18,7 @@ import {
AreaRegistryEntry,
subscribeAreaRegistry,
} from "../../data/area_registry";
import { fetchConfigFlowInProgress } from "../../data/config_flow";
import {
DataEntryFlowProgress,
DataEntryFlowStep,
subscribeDataEntryFlowProgressed,
} from "../../data/data_entry_flow";
@ -28,14 +26,12 @@ import {
DeviceRegistryEntry,
subscribeDeviceRegistry,
} from "../../data/device_registry";
import { fetchIntegrationManifest } from "../../data/integration";
import { haStyleDialog } from "../../resources/styles";
import type { HomeAssistant } from "../../types";
import { documentationUrl } from "../../util/documentation-url";
import { showAlertDialog } from "../generic/show-dialog-box";
import {
DataEntryFlowDialogParams,
FlowHandlers,
LoadingReason,
} from "./show-dialog-data-entry-flow";
import "./step-flow-abort";
@ -44,8 +40,6 @@ import "./step-flow-external";
import "./step-flow-form";
import "./step-flow-loading";
import "./step-flow-menu";
import "./step-flow-pick-flow";
import "./step-flow-pick-handler";
import "./step-flow-progress";
let instance = 0;
@ -86,12 +80,8 @@ class DataEntryFlowDialog extends LitElement {
@state() private _areas?: AreaRegistryEntry[];
@state() private _handlers?: FlowHandlers;
@state() private _handler?: string;
@state() private _flowsInProgress?: DataEntryFlowProgress[];
private _unsubAreas?: UnsubscribeFunc;
private _unsubDevices?: UnsubscribeFunc;
@ -102,15 +92,39 @@ class DataEntryFlowDialog extends LitElement {
this._params = params;
this._instance = instance++;
if (params.startFlowHandler) {
this._checkFlowsInProgress(params.startFlowHandler);
return;
}
const curInstance = this._instance;
let step: DataEntryFlowStep;
if (params.continueFlowId) {
if (params.startFlowHandler) {
this._loading = "loading_flow";
this._handler = params.startFlowHandler;
try {
step = await this._params!.flowConfig.createFlow(
this.hass,
params.startFlowHandler
);
} catch (err: any) {
this.closeDialog();
let message = err.message || err.body || "Unknown error";
if (typeof message !== "string") {
message = JSON.stringify(message);
}
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.integrations.config_flow.error"
),
text: `${this.hass.localize(
"ui.panel.config.integrations.config_flow.could_not_load"
)}: ${message}`,
});
return;
}
// Happens if second showDialog called
if (curInstance !== this._instance) {
return;
}
} else if (params.continueFlowId) {
this._loading = "loading_flow";
const curInstance = this._instance;
let step: DataEntryFlowStep;
try {
step = await params.flowConfig.fetchFlow(
this.hass,
@ -132,32 +146,17 @@ class DataEntryFlowDialog extends LitElement {
});
return;
}
// Happens if second showDialog called
if (curInstance !== this._instance) {
return;
}
this._processStep(step);
this._loading = undefined;
} else {
return;
}
// Create a new config flow. Show picker
if (!params.flowConfig.getFlowHandlers) {
throw new Error("No getFlowHandlers defined in flow config");
// Happens if second showDialog called
if (curInstance !== this._instance) {
return;
}
this._step = null;
// We only load the handlers once
if (this._handlers === undefined) {
this._loading = "loading_handlers";
try {
this._handlers = await params.flowConfig.getFlowHandlers(this.hass);
} finally {
this._loading = undefined;
}
}
this._processStep(step);
this._loading = undefined;
}
public closeDialog() {
@ -185,7 +184,6 @@ class DataEntryFlowDialog extends LitElement {
this._step = undefined;
this._params = undefined;
this._devices = undefined;
this._flowsInProgress = undefined;
this._handler = undefined;
if (this._unsubAreas) {
this._unsubAreas();
@ -218,15 +216,12 @@ class DataEntryFlowDialog extends LitElement {
hideActions
>
<div>
${this._loading ||
(this._step === null &&
this._handlers === undefined &&
this._handler === undefined)
${this._loading || this._step === null
? html`
<step-flow-loading
.flowConfig=${this._params.flowConfig}
.hass=${this.hass}
.loadingReason=${this._loading || "loading_handlers"}
.loadingReason=${this._loading}
.handler=${this._handler}
.step=${this._step}
></step-flow-loading>
@ -273,24 +268,7 @@ class DataEntryFlowDialog extends LitElement {
dialogAction="close"
></ha-icon-button>
</div>
${this._step === null
? this._handler
? html`<step-flow-pick-flow
.flowConfig=${this._params.flowConfig}
.hass=${this.hass}
.handler=${this._handler}
.flowsInProgress=${this._flowsInProgress}
></step-flow-pick-flow>`
: // Show handler picker
html`
<step-flow-pick-handler
.hass=${this.hass}
.handlers=${this._handlers}
.initialFilter=${this._params.searchQuery}
@handler-picked=${this._handlerPicked}
></step-flow-pick-handler>
`
: this._step.type === "form"
${this._step.type === "form"
? html`
<step-flow-form
.flowConfig=${this._params.flowConfig}
@ -400,64 +378,6 @@ class DataEntryFlowDialog extends LitElement {
});
}
private async _checkFlowsInProgress(handler: string) {
this._loading = "loading_handlers";
this._handler = handler;
const flowsInProgress = (
await fetchConfigFlowInProgress(this.hass.connection)
).filter((flow) => flow.handler === handler);
if (!flowsInProgress.length) {
// No flows in progress, create a new flow
this._loading = "loading_flow";
let step: DataEntryFlowStep;
try {
step = await this._params!.flowConfig.createFlow(this.hass, handler);
} catch (err: any) {
this.closeDialog();
const message =
err?.status_code === 404
? this.hass.localize(
"ui.panel.config.integrations.config_flow.no_config_flow"
)
: `${this.hass.localize(
"ui.panel.config.integrations.config_flow.could_not_load"
)}: ${err?.body?.message || err?.message}`;
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.integrations.config_flow.error"
),
text: message,
});
return;
} finally {
this._handler = undefined;
}
this._processStep(step);
if (this._params!.manifest === undefined) {
try {
this._params!.manifest = await fetchIntegrationManifest(
this.hass,
this._params?.domain || step.handler
);
} catch (_) {
// No manifest
this._params!.manifest = null;
}
}
} else {
this._step = null;
this._flowsInProgress = flowsInProgress;
}
this._loading = undefined;
}
private _handlerPicked(ev) {
this._checkFlowsInProgress(ev.detail.handler);
}
private async _processStep(
step: DataEntryFlowStep | undefined | Promise<DataEntryFlowStep>
): Promise<void> {

12
src/dialogs/config-flow/show-dialog-config-flow.ts
View File

@ -3,11 +3,9 @@ import {
createConfigFlow,
deleteConfigFlow,
fetchConfigFlow,
getConfigFlowHandlers,
handleConfigFlowStep,
} from "../../data/config_flow";
import { domainToName } from "../../data/integration";
import { getSupportedBrands } from "../../data/supported_brands";
import {
DataEntryFlowDialogParams,
loadDataEntryFlowDialog,
@ -22,16 +20,6 @@ export const showConfigFlowDialog = (
): void =>
showFlowDialog(element, dialogParams, {
loadDevicesAndAreas: true,
getFlowHandlers: async (hass) => {
const [integrations, helpers, supportedBrands] = await Promise.all([
getConfigFlowHandlers(hass, "integration"),
getConfigFlowHandlers(hass, "helper"),
getSupportedBrands(hass),
hass.loadBackendTranslation("title", undefined, true),
]);
return { integrations, helpers, supportedBrands };
},
createFlow: async (hass, handler) => {
const [step] = await Promise.all([
createConfigFlow(hass, handler),

2
src/dialogs/config-flow/show-dialog-data-entry-flow.ts
View File

@ -22,8 +22,6 @@ export interface FlowHandlers {
export interface FlowConfig {
loadDevicesAndAreas: boolean;
getFlowHandlers?: (hass: HomeAssistant) => Promise<FlowHandlers>;
createFlow(hass: HomeAssistant, handler: string): Promise<DataEntryFlowStep>;
fetchFlow(hass: HomeAssistant, flowId: string): Promise<DataEntryFlowStep>;

9
src/dialogs/config-flow/step-flow-abort.ts
View File

@ -12,10 +12,10 @@ import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
import { HomeAssistant } from "../../types";
import { showAddApplicationCredentialDialog } from "../../panels/config/application_credentials/show-dialog-add-application-credential";
import { configFlowContentStyles } from "./styles";
import { showConfirmationDialog } from "../generic/show-dialog-box";
import { domainToName } from "../../data/integration";
import { DataEntryFlowDialogParams } from "./show-dialog-data-entry-flow";
import { showConfigFlowDialog } from "./show-dialog-config-flow";
import { domainToName } from "../../data/integration";
import { showConfirmationDialog } from "../generic/show-dialog-box";
@customElement("step-flow-abort")
class StepFlowAbort extends LitElement {
@ -56,11 +56,16 @@ class StepFlowAbort extends LitElement {
private async _handleMissingCreds() {
const confirm = await showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.integrations.config_flow.missing_credentials_title"
),
text: this.hass.localize(
"ui.panel.config.integrations.config_flow.missing_credentials",
{
integration: domainToName(this.hass.localize, this.domain),
}
),
confirmText: this.hass.localize("ui.common.yes"),
dismissText: this.hass.localize("ui.common.no"),
});
this._flowDone();
if (!confirm) {

130
src/dialogs/config-flow/step-flow-pick-flow.ts
View File

@ -1,130 +0,0 @@
import "@polymer/paper-item";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-icon-next";
import { localizeConfigFlowTitle } from "../../data/config_flow";
import { DataEntryFlowProgress } from "../../data/data_entry_flow";
import { domainToName } from "../../data/integration";
import { HomeAssistant } from "../../types";
import { brandsUrl } from "../../util/brands-url";
import { FlowConfig } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
@customElement("step-flow-pick-flow")
class StepFlowPickFlow extends LitElement {
public flowConfig!: FlowConfig;
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false })
public flowsInProgress!: DataEntryFlowProgress[];
@property() public handler!: string;
protected render(): TemplateResult {
return html`
<h2>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.pick_flow_step.title"
)}
</h2>
<div>
${this.flowsInProgress.map(
(flow) => html` <paper-icon-item
@click=${this._flowInProgressPicked}
.flow=${flow}
>
<img
slot="item-icon"
loading="lazy"
src=${brandsUrl({
domain: flow.handler,
type: "icon",
useFallback: true,
darkOptimized: this.hass.themes?.darkMode,
})}
referrerpolicy="no-referrer"
/>
<paper-item-body>
${localizeConfigFlowTitle(this.hass.localize, flow)}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-icon-item>`
)}
<paper-item @click=${this._startNewFlowPicked} .handler=${this.handler}>
<paper-item-body>
${this.hass.localize(
"ui.panel.config.integrations.config_flow.pick_flow_step.new_flow",
"integration",
domainToName(this.hass.localize, this.handler)
)}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</div>
`;
}
private _startNewFlowPicked(ev) {
this._startFlow(ev.currentTarget.handler);
}
private _startFlow(handler: string) {
fireEvent(this, "flow-update", {
stepPromise: this.flowConfig.createFlow(this.hass, handler),
});
}
private _flowInProgressPicked(ev) {
const flow: DataEntryFlowProgress = ev.currentTarget.flow;
fireEvent(this, "flow-update", {
stepPromise: this.flowConfig.fetchFlow(this.hass, flow.flow_id),
});
}
static get styles(): CSSResultGroup {
return [
configFlowContentStyles,
css`
img {
width: 40px;
height: 40px;
}
ha-icon-next {
margin-right: 8px;
}
div {
overflow: auto;
max-height: 600px;
margin: 16px 0;
}
h2 {
padding-inline-end: 66px;
direction: var(--direction);
}
@media all and (max-height: 900px) {
div {
max-height: calc(100vh - 134px);
}
}
paper-icon-item,
paper-item {
cursor: pointer;
margin-bottom: 4px;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"step-flow-pick-flow": StepFlowPickFlow;
}
}

372
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -1,372 +0,0 @@
import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import Fuse from "fuse.js";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../common/config/is_component_loaded";
import { fireEvent } from "../../common/dom/fire_event";
import { protocolIntegrationPicked } from "../../common/integrations/protocolIntegrationPicked";
import { navigate } from "../../common/navigate";
import { caseInsensitiveStringCompare } from "../../common/string/compare";
import { LocalizeFunc } from "../../common/translations/localize";
import "../../components/ha-icon-next";
import "../../components/search-input";
import { domainToName } from "../../data/integration";
import { haStyleScrollbar } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { brandsUrl } from "../../util/brands-url";
import { documentationUrl } from "../../util/documentation-url";
import { showConfirmationDialog } from "../generic/show-dialog-box";
import { FlowHandlers } from "./show-dialog-data-entry-flow";
import { configFlowContentStyles } from "./styles";
interface HandlerObj {
name: string;
slug: string;
is_add?: boolean;
is_helper?: boolean;
}
export interface SupportedBrandObj extends HandlerObj {
supported_flows: string[];
}
declare global {
// for fire event
interface HASSDomEvents {
"handler-picked": {
handler: string;
};
}
}
@customElement("step-flow-pick-handler")
class StepFlowPickHandler extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public handlers!: FlowHandlers;
@property() public initialFilter?: string;
@state() private _filter?: string;
private _width?: number;
private _height?: number;
private _filterHandlers = memoizeOne(
(
h: FlowHandlers,
filter?: string,
_localize?: LocalizeFunc
): [(HandlerObj | SupportedBrandObj)[], HandlerObj[]] => {
const integrations: (HandlerObj | SupportedBrandObj)[] =
h.integrations.map((handler) => ({
name: domainToName(this.hass.localize, handler),
slug: handler,
}));
for (const [domain, domainBrands] of Object.entries(h.supportedBrands)) {
for (const [slug, name] of Object.entries(domainBrands)) {
integrations.push({
slug,
name,
supported_flows: [domain],
});
}
}
if (filter) {
const options: Fuse.IFuseOptions<HandlerObj> = {
keys: ["name", "slug"],
isCaseSensitive: false,
minMatchCharLength: 2,
threshold: 0.2,
};
const helpers: HandlerObj[] = h.helpers.map((handler) => ({
name: domainToName(this.hass.localize, handler),
slug: handler,
is_helper: true,
}));
return [
new Fuse(integrations, options)
.search(filter)
.map((result) => result.item),
new Fuse(helpers, options)
.search(filter)
.map((result) => result.item),
];
}
return [
integrations.sort((a, b) =>
caseInsensitiveStringCompare(a.name, b.name)
),
[],
];
}
);
protected render(): TemplateResult {
const [integrations, helpers] = this._getHandlers();
const addDeviceRows: HandlerObj[] = ["zha", "zwave_js"]
.filter((domain) => isComponentLoaded(this.hass, domain))
.map((domain) => ({
name: this.hass.localize(
`ui.panel.config.integrations.add_${domain}_device`
),
slug: domain,
is_add: true,
}))
.sort((a, b) => caseInsensitiveStringCompare(a.name, b.name));
return html`
<h2>${this.hass.localize("ui.panel.config.integrations.new")}</h2>
<search-input
.hass=${this.hass}
autofocus
.filter=${this._filter}
@value-changed=${this._filterChanged}
.label=${this.hass.localize("ui.panel.config.integrations.search")}
@keypress=${this._maybeSubmit}
></search-input>
<mwc-list
style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
})}
class="ha-scrollbar"
>
${addDeviceRows.length
? html`
${addDeviceRows.map((handler) => this._renderRow(handler))}
<li divider padded class="divider" role="separator"></li>
`
: ""}
${integrations.length
? integrations.map((handler) => this._renderRow(handler))
: html`
<p>
${this.hass.localize(
"ui.panel.config.integrations.note_about_integrations"
)}<br />
${this.hass.localize(
"ui.panel.config.integrations.note_about_website_reference"
)}<a
href=${documentationUrl(
this.hass,
`/integrations/${
this._filter ? `#search/${this._filter}` : ""
}`
)}
target="_blank"
rel="noreferrer"
>${this.hass.localize(
"ui.panel.config.integrations.home_assistant_website"
)}</a
>.
</p>
`}
${helpers.length
? html`
<li divider padded class="divider" role="separator"></li>
${helpers.map((handler) => this._renderRow(handler))}
`
: ""}
</mwc-list>
`;
}
private _renderRow(handler: HandlerObj) {
return html`
<mwc-list-item
graphic="medium"
.hasMeta=${!handler.is_add}
.handler=${handler}
@click=${this._handlerPicked}
>
<img
slot="graphic"
loading="lazy"
src=${brandsUrl({
domain: handler.slug,
type: "icon",
useFallback: true,
darkOptimized: this.hass.themes?.darkMode,
})}
referrerpolicy="no-referrer"
/>
<span>${handler.name} ${handler.is_helper ? " (helper)" : ""}</span>
${handler.is_add ? "" : html`<ha-icon-next slot="meta"></ha-icon-next>`}
</mwc-list-item>
`;
}
public willUpdate(changedProps: PropertyValues): void {
super.willUpdate(changedProps);
if (this._filter === undefined && this.initialFilter !== undefined) {
this._filter = this.initialFilter;
}
if (this.initialFilter !== undefined && this._filter === "") {
this.initialFilter = undefined;
this._filter = "";
this._width = undefined;
this._height = undefined;
} else if (
this.hasUpdated &&
changedProps.has("_filter") &&
(!this._width || !this._height)
) {
// Store the width and height so that when we search, box doesn't jump
const boundingRect =
this.shadowRoot!.querySelector("mwc-list")!.getBoundingClientRect();
this._width = boundingRect.width;
this._height = boundingRect.height;
}
}
protected firstUpdated(changedProps) {
super.firstUpdated(changedProps);
setTimeout(
() => this.shadowRoot!.querySelector("search-input")!.focus(),
0
);
}
private _getHandlers() {
return this._filterHandlers(
this.handlers,
this._filter,
this.hass.localize
);
}
private async _filterChanged(e) {
this._filter = e.detail.value;
}
private async _handlerPicked(ev) {
const handler: HandlerObj | SupportedBrandObj = ev.currentTarget.handler;
if (handler.is_add) {
this._handleAddPicked(handler.slug);
return;
}
if (handler.is_helper) {
navigate(`/config/helpers/add?domain=${handler.slug}`);
// This closes dialog.
fireEvent(this, "flow-update");
return;
}
if ("supported_flows" in handler) {
const slug = handler.supported_flows[0];
showConfirmationDialog(this, {
text: this.hass.localize(
"ui.panel.config.integrations.config_flow.supported_brand_flow",
{
supported_brand: handler.name,
flow_domain_name: domainToName(this.hass.localize, slug),
}
),
confirm: () => {
if (["zha", "zwave_js"].includes(slug)) {
this._handleAddPicked(slug);
return;
}
fireEvent(this, "handler-picked", {
handler: slug,
});
},
});
return;
}
fireEvent(this, "handler-picked", {
handler: handler.slug,
});
}
private async _handleAddPicked(slug: string): Promise<void> {
await protocolIntegrationPicked(this, this.hass, slug);
// This closes dialog.
fireEvent(this, "flow-update");
}
private _maybeSubmit(ev: KeyboardEvent) {
if (ev.key !== "Enter") {
return;
}
const handlers = this._getHandlers();
if (handlers.length > 0) {
fireEvent(this, "handler-picked", {
handler: handlers[0][0].slug,
});
}
}
static get styles(): CSSResultGroup {
return [
configFlowContentStyles,
haStyleScrollbar,
css`
img {
width: 40px;
height: 40px;
}
search-input {
display: block;
margin: 16px 16px 0;
}
ha-icon-next {
margin-right: 8px;
}
mwc-list {
overflow: auto;
max-height: 600px;
}
.divider {
border-bottom-color: var(--divider-color);
}
h2 {
padding-inline-end: 66px;
direction: var(--direction);
}
@media all and (max-height: 900px) {
mwc-list {
max-height: calc(100vh - 134px);
}
}
p {
text-align: center;
padding: 16px;
margin: 0;
}
p > a {
color: var(--primary-color);
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"step-flow-pick-handler": StepFlowPickHandler;
}
}

7
src/dialogs/generic/dialog-box.ts
View File

@ -2,6 +2,7 @@ import "@material/mwc-button/mwc-button";
import { mdiAlertOutline } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ifDefined } from "lit/directives/if-defined";
import { fireEvent } from "../../common/dom/fire_event";
import "../../components/ha-dialog";
@ -96,6 +97,9 @@ class DialogBox extends LitElement {
@click=${this._confirm}
?dialogInitialFocus=${!this._params.prompt}
slot="primaryAction"
class=${classMap({
destructive: this._params.destructive || false,
})}
>
${this._params.confirmText
? this._params.confirmText
@ -153,6 +157,9 @@ class DialogBox extends LitElement {
.secondary {
color: var(--secondary-text-color);
}
.destructive {
--mdc-theme-primary: var(--error-color);
}
ha-dialog {
--mdc-dialog-heading-ink-color: var(--primary-text-color);
--mdc-dialog-content-ink-color: var(--primary-text-color);

1
src/dialogs/generic/show-dialog-box.ts
View File

@ -16,6 +16,7 @@ export interface ConfirmationDialogParams extends BaseDialogBoxParams {
dismissText?: string;
confirm?: () => void;
cancel?: () => void;
destructive?: boolean;
}
export interface PromptDialogParams extends BaseDialogBoxParams {

14
src/dialogs/more-info/controls/more-info-climate.ts
View File

@ -377,12 +377,14 @@ class MoreInfoClimate extends LitElement {
private _handlePresetmodeChanged(ev) {
const newVal = ev.target.value || null;
this._callServiceHelper(
this.stateObj!.attributes.preset_mode,
newVal,
"set_preset_mode",
{ preset_mode: newVal }
);
if (newVal) {
this._callServiceHelper(
this.stateObj!.attributes.preset_mode,
newVal,
"set_preset_mode",
{ preset_mode: newVal }
);
}
}
private async _callServiceHelper(

25
src/dialogs/more-info/controls/more-info-cover.ts
View File

@ -1,19 +1,29 @@
import { css, CSSResult, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { attributeClassNames } from "../../../common/entity/attribute_class_names";
import { featureClassNames } from "../../../common/entity/feature_class_names";
import {
FeatureClassNames,
featureClassNames,
} from "../../../common/entity/feature_class_names";
import { supportsFeature } from "../../../common/entity/supports-feature";
import "../../../components/ha-attributes";
import "../../../components/ha-cover-tilt-controls";
import "../../../components/ha-labeled-slider";
import {
CoverEntity,
FEATURE_CLASS_NAMES,
CoverEntityFeature,
isTiltOnly,
supportsSetPosition,
supportsSetTiltPosition,
} from "../../../data/cover";
import { HomeAssistant } from "../../../types";
export const FEATURE_CLASS_NAMES: FeatureClassNames<CoverEntityFeature> = {
[CoverEntityFeature.SET_POSITION]: "has-set_position",
[CoverEntityFeature.OPEN_TILT]: "has-open_tilt",
[CoverEntityFeature.CLOSE_TILT]: "has-close_tilt",
[CoverEntityFeature.STOP_TILT]: "has-stop_tilt",
[CoverEntityFeature.SET_TILT_POSITION]: "has-set_tilt_position",
};
@customElement("more-info-cover")
class MoreInfoCover extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -34,13 +44,16 @@ class MoreInfoCover extends LitElement {
.caption=${this.hass.localize("ui.card.cover.position")}
pin=""
.value=${this.stateObj.attributes.current_position}
.disabled=${!supportsSetPosition(this.stateObj)}
.disabled=${!supportsFeature(
this.stateObj,
CoverEntityFeature.SET_POSITION
)}
@change=${this._coverPositionSliderChanged}
></ha-labeled-slider>
</div>
<div class="tilt">
${supportsSetTiltPosition(this.stateObj)
${supportsFeature(this.stateObj, CoverEntityFeature.SET_TILT_POSITION)
? // Either render the labeled slider and put the tilt buttons into its slot
// or (if tilt position is not supported and therefore no slider is shown)
// render a title <div> (same style as for a labeled slider) and directly put

60
src/dialogs/more-info/controls/more-info-light.ts
View File

@ -20,13 +20,13 @@ import "../../../components/ha-labeled-slider";
import "../../../components/ha-select";
import {
getLightCurrentModeRgbColor,
LightColorModes,
LightColorMode,
LightEntity,
LightEntityFeature,
lightIsInColorMode,
lightSupportsColor,
lightSupportsColorMode,
lightSupportsDimming,
SUPPORT_EFFECT,
lightSupportsBrightness,
} from "../../../data/light";
import type { HomeAssistant } from "../../../types";
@ -56,7 +56,7 @@ class MoreInfoLight extends LitElement {
@state() private _colorPickerColor?: [number, number, number];
@state() private _mode?: "color" | LightColorModes;
@state() private _mode?: "color" | LightColorMode;
protected render(): TemplateResult {
if (!this.hass || !this.stateObj) {
@ -65,29 +65,29 @@ class MoreInfoLight extends LitElement {
const supportsTemp = lightSupportsColorMode(
this.stateObj,
LightColorModes.COLOR_TEMP
LightColorMode.COLOR_TEMP
);
const supportsWhite = lightSupportsColorMode(
this.stateObj,
LightColorModes.WHITE
LightColorMode.WHITE
);
const supportsRgbww = lightSupportsColorMode(
this.stateObj,
LightColorModes.RGBWW
LightColorMode.RGBWW
);
const supportsRgbw =
!supportsRgbww &&
lightSupportsColorMode(this.stateObj, LightColorModes.RGBW);
lightSupportsColorMode(this.stateObj, LightColorMode.RGBW);
const supportsColor =
supportsRgbww || supportsRgbw || lightSupportsColor(this.stateObj);
return html`
<div class="content">
${lightSupportsDimming(this.stateObj)
${lightSupportsBrightness(this.stateObj)
? html`
<ha-labeled-slider
caption=${this.hass.localize("ui.card.light.brightness")}
@ -113,7 +113,7 @@ class MoreInfoLight extends LitElement {
: ""}
${supportsTemp &&
((!supportsColor && !supportsWhite) ||
this._mode === LightColorModes.COLOR_TEMP)
this._mode === LightColorMode.COLOR_TEMP)
? html`
<ha-labeled-slider
class="color_temp"
@ -204,7 +204,7 @@ class MoreInfoLight extends LitElement {
: ""}
`
: ""}
${supportsFeature(this.stateObj, SUPPORT_EFFECT) &&
${supportsFeature(this.stateObj, LightEntityFeature.EFFECT) &&
this.stateObj!.attributes.effect_list?.length
? html`
<hr />
@ -260,31 +260,31 @@ class MoreInfoLight extends LitElement {
let brightnessAdjust = 100;
this._brightnessAdjusted = undefined;
if (
stateObj.attributes.color_mode === LightColorModes.RGB &&
!lightSupportsColorMode(stateObj, LightColorModes.RGBWW) &&
!lightSupportsColorMode(stateObj, LightColorModes.RGBW)
stateObj.attributes.color_mode === LightColorMode.RGB &&
!lightSupportsColorMode(stateObj, LightColorMode.RGBWW) &&
!lightSupportsColorMode(stateObj, LightColorMode.RGBW)
) {
const maxVal = Math.max(...stateObj.attributes.rgb_color);
const maxVal = Math.max(...stateObj.attributes.rgb_color!);
if (maxVal < 255) {
this._brightnessAdjusted = maxVal;
brightnessAdjust = (this._brightnessAdjusted / 255) * 100;
}
}
this._brightnessSliderValue = Math.round(
(stateObj.attributes.brightness * brightnessAdjust) / 255
((stateObj.attributes.brightness || 0) * brightnessAdjust) / 255
);
this._ctSliderValue = stateObj.attributes.color_temp;
this._wvSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBW
? Math.round((stateObj.attributes.rgbw_color[3] * 100) / 255)
stateObj.attributes.color_mode === LightColorMode.RGBW
? Math.round((stateObj.attributes.rgbw_color![3] * 100) / 255)
: undefined;
this._cwSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBWW
? Math.round((stateObj.attributes.rgbww_color[3] * 100) / 255)
stateObj.attributes.color_mode === LightColorMode.RGBWW
? Math.round((stateObj.attributes.rgbww_color![3] * 100) / 255)
: undefined;
this._wwSliderValue =
stateObj.attributes.color_mode === LightColorModes.RGBWW
? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
stateObj.attributes.color_mode === LightColorMode.RGBWW
? Math.round((stateObj.attributes.rgbww_color![4] * 100) / 255)
: undefined;
const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
@ -307,10 +307,10 @@ class MoreInfoLight extends LitElement {
(supportsTemp: boolean, supportsWhite: boolean) => {
const modes = [{ label: "Color", value: "color" }];
if (supportsTemp) {
modes.push({ label: "Temperature", value: LightColorModes.COLOR_TEMP });
modes.push({ label: "Temperature", value: LightColorMode.COLOR_TEMP });
}
if (supportsWhite) {
modes.push({ label: "White", value: LightColorModes.WHITE });
modes.push({ label: "White", value: LightColorMode.WHITE });
}
return modes;
}
@ -342,7 +342,7 @@ class MoreInfoLight extends LitElement {
this._brightnessSliderValue = bri;
if (this._mode === LightColorModes.WHITE) {
if (this._mode === LightColorMode.WHITE) {
this.hass.callService("light", "turn_on", {
entity_id: this.stateObj!.entity_id,
white: Math.min(255, Math.round((bri * 255) / 100)),
@ -486,7 +486,7 @@ class MoreInfoLight extends LitElement {
}
private _setRgbWColor(rgbColor: [number, number, number]) {
if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW)) {
if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW)) {
const rgbww_color: [number, number, number, number, number] = this
.stateObj!.attributes.rgbww_color
? [...this.stateObj!.attributes.rgbww_color]
@ -495,7 +495,7 @@ class MoreInfoLight extends LitElement {
entity_id: this.stateObj!.entity_id,
rgbww_color: rgbColor.concat(rgbww_color.slice(3)),
});
} else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)) {
} else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)) {
const rgbw_color: [number, number, number, number] = this.stateObj!
.attributes.rgbw_color
? [...this.stateObj!.attributes.rgbw_color]
@ -524,8 +524,8 @@ class MoreInfoLight extends LitElement {
];
if (
lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
lightSupportsColorMode(this.stateObj!, LightColorMode.RGBWW) ||
lightSupportsColorMode(this.stateObj!, LightColorMode.RGBW)
) {
this._setRgbWColor(
this._colorBrightnessSliderValue
@ -535,7 +535,7 @@ class MoreInfoLight extends LitElement {
)
: [ev.detail.rgb.r, ev.detail.rgb.g, ev.detail.rgb.b]
);
} else if (lightSupportsColorMode(this.stateObj!, LightColorModes.RGB)) {
} else if (lightSupportsColorMode(this.stateObj!, LightColorMode.RGB)) {
const rgb_color: [number, number, number] = [
ev.detail.rgb.r,
ev.detail.rgb.g,

2
src/dialogs/more-info/ha-more-info-dialog.ts
View File

@ -90,7 +90,7 @@ export class MoreInfoDialog extends LitElement {
const stateObj = this.hass.states[entityId];
const domain = computeDomain(entityId);
const name = stateObj ? computeStateName(stateObj) : entityId;
const name = (stateObj && computeStateName(stateObj)) || entityId;
const tabs = this._getTabs(entityId, this.hass.user!.is_admin);
return html`

4
src/external_app/external_app_entrypoint.ts
View File

@ -7,7 +7,7 @@ This is the entry point for providing external app stuff from app entrypoint.
import { fireEvent } from "../common/dom/fire_event";
import { HomeAssistantMain } from "../layouts/home-assistant-main";
import type { EMExternalMessageCommands } from "./external_messaging";
import type { EMIncomingMessageCommands } from "./external_messaging";
export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
window.addEventListener("haptic", (ev) =>
@ -24,7 +24,7 @@ export const attachExternalToApp = (hassMainEl: HomeAssistantMain) => {
const handleExternalMessage = (
hassMainEl: HomeAssistantMain,
msg: EMExternalMessageCommands
msg: EMIncomingMessageCommands
): boolean => {
const bus = hassMainEl.hass.auth.external!;

129
src/external_app/external_messaging.ts
View File

@ -8,7 +8,6 @@ interface CommandInFlight {
export interface EMMessage {
id?: number;
type: string;
payload?: unknown;
}
interface EMError {
@ -30,34 +29,120 @@ interface EMMessageResultError {
error: EMError;
}
interface EMExternalMessageRestart {
interface EMOutgoingMessageConfigGet extends EMMessage {
type: "config/get";
}
interface EMOutgoingMessageMatterCommission extends EMMessage {
type: "matter/commission";
}
type EMOutgoingMessageWithAnswer = {
"config/get": {
request: EMOutgoingMessageConfigGet;
response: ExternalConfig;
};
"matter/commission": {
request: EMOutgoingMessageMatterCommission;
response: {
code: string;
};
};
};
interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
type: "exoplayer/play_hls";
payload: {
url: string;
muted: boolean;
};
}
interface EMOutgoingMessageExoplayerResize extends EMMessage {
type: "exoplayer/resize";
payload: {
left: number;
top: number;
right: number;
bottom: number;
};
}
interface EMOutgoingMessageExoplayerStop extends EMMessage {
type: "exoplayer/stop";
}
interface EMOutgoingMessageThemeUpdate extends EMMessage {
type: "theme-update";
}
interface EMOutgoingMessageHaptic extends EMMessage {
type: "haptic";
payload: { hapticType: string };
}
interface EMOutgoingMessageConnectionStatus extends EMMessage {
type: "connection-status";
payload: { event: string };
}
interface EMOutgoingMessageAppConfiguration extends EMMessage {
type: "config_screen/show";
}
interface EMOutgoingMessageTagWrite extends EMMessage {
type: "tag/write";
payload: {
name: string | null;
tag: string;
};
}
interface EMOutgoingMessageSidebarShow extends EMMessage {
type: "sidebar/show";
}
type EMOutgoingMessageWithoutAnswer =
| EMOutgoingMessageHaptic
| EMOutgoingMessageConnectionStatus
| EMOutgoingMessageAppConfiguration
| EMOutgoingMessageTagWrite
| EMOutgoingMessageSidebarShow
| EMOutgoingMessageExoplayerPlayHLS
| EMOutgoingMessageExoplayerResize
| EMOutgoingMessageExoplayerStop
| EMOutgoingMessageThemeUpdate
| EMMessageResultSuccess
| EMMessageResultError;
interface EMIncomingMessageRestart {
id: number;
type: "command";
command: "restart";
}
interface EMExternMessageShowNotifications {
interface EMIncomingMessageShowNotifications {
id: number;
type: "command";
command: "notifications/show";
}
export type EMExternalMessageCommands =
| EMExternalMessageRestart
| EMExternMessageShowNotifications;
export type EMIncomingMessageCommands =
| EMIncomingMessageRestart
| EMIncomingMessageShowNotifications;
type ExternalMessage =
type EMIncomingMessage =
| EMMessageResultSuccess
| EMMessageResultError
| EMExternalMessageCommands;
| EMIncomingMessageCommands;
type ExternalMessageHandler = (msg: EMExternalMessageCommands) => boolean;
type EMIncomingMessageHandler = (msg: EMIncomingMessageCommands) => boolean;
export interface ExternalConfig {
hasSettingsScreen: boolean;
hasSidebar: boolean;
canWriteTag: boolean;
hasExoPlayer: boolean;
canCommissionMatter: boolean;
}
export class ExternalMessaging {
@ -67,7 +152,7 @@ export class ExternalMessaging {
public msgId = 0;
private _commandHandler?: ExternalMessageHandler;
private _commandHandler?: EMIncomingMessageHandler;
public async attach() {
window[CALLBACK_EXTERNAL_BUS] = (msg) => this.receiveMessage(msg);
@ -77,12 +162,12 @@ export class ExternalMessaging {
payload: { event: ev.detail },
})
);
this.config = await this.sendMessage<ExternalConfig>({
this.config = await this.sendMessage<"config/get">({
type: "config/get",
});
}
public addCommandHandler(handler: ExternalMessageHandler) {
public addCommandHandler(handler: EMIncomingMessageHandler) {
this._commandHandler = handler;
}
@ -90,31 +175,33 @@ export class ExternalMessaging {
* Send message to external app that expects a response.
* @param msg message to send
*/
public sendMessage<T>(msg: EMMessage): Promise<T> {
public sendMessage<T extends keyof EMOutgoingMessageWithAnswer>(
msg: EMOutgoingMessageWithAnswer[T]["request"]
): Promise<EMOutgoingMessageWithAnswer[T]["response"]> {
const msgId = ++this.msgId;
msg.id = msgId;
this.fireMessage(msg);
this._sendExternal(msg);
return new Promise<T>((resolve, reject) => {
this.commands[msgId] = { resolve, reject };
});
return new Promise<EMOutgoingMessageWithAnswer[T]["response"]>(
(resolve, reject) => {
this.commands[msgId] = { resolve, reject };
}
);
}
/**
* Send message to external app without expecting a response.
* @param msg message to send
*/
public fireMessage(
msg: EMMessage | EMMessageResultSuccess | EMMessageResultError
) {
public fireMessage(msg: EMOutgoingMessageWithoutAnswer) {
if (!msg.id) {
msg.id = ++this.msgId;
}
this._sendExternal(msg);
}
public receiveMessage(msg: ExternalMessage) {
public receiveMessage(msg: EMIncomingMessage) {
if (__DEV__) {
// eslint-disable-next-line no-console
console.log("Receiving message from external app", msg);

52
src/panels/config/application_credentials/dialog-add-application-credential.ts
View File

@ -1,8 +1,9 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { mdiOpenInNew } from "@mdi/js";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-circular-progress";
import "../../../components/ha-combo-box";
@ -10,14 +11,15 @@ import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-markdown";
import "../../../components/ha-textfield";
import {
fetchApplicationCredentialsConfig,
createApplicationCredential,
ApplicationCredentialsConfig,
ApplicationCredential,
ApplicationCredentialsConfig,
createApplicationCredential,
fetchApplicationCredentialsConfig,
} from "../../../data/application_credential";
import { domainToName } from "../../../data/integration";
import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
interface Domain {
@ -98,6 +100,25 @@ export class DialogAddApplicationCredential extends LitElement {
>
<div>
${this._error ? html` <div class="error">${this._error}</div> ` : ""}
<p>
${this.hass.localize(
"ui.panel.config.application_credentials.editor.description"
)}
<br />
<a
href=${documentationUrl(
this.hass!,
"/integrations/application_credentials"
)}
target="_blank"
rel="noreferrer"
>
${this.hass!.localize(
"ui.panel.config.application_credentials.editor.view_documentation"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
</p>
<ha-combo-box
name="domain"
.hass=${this.hass}
@ -143,6 +164,10 @@ export class DialogAddApplicationCredential extends LitElement {
@input=${this._handleValueChanged}
error-message=${this.hass.localize("ui.common.error_required")}
dialogInitialFocus
.helper=${this.hass.localize(
"ui.panel.config.application_credentials.editor.client_id_helper"
)}
helperPersistent
></ha-textfield>
<ha-textfield
.label=${this.hass.localize(
@ -154,6 +179,10 @@ export class DialogAddApplicationCredential extends LitElement {
required
@input=${this._handleValueChanged}
error-message=${this.hass.localize("ui.common.error_required")}
.helper=${this.hass.localize(
"ui.panel.config.application_credentials.editor.client_secret_helper"
)}
helperPersistent
></ha-textfield>
</div>
${this._loading
@ -163,15 +192,18 @@ export class DialogAddApplicationCredential extends LitElement {
</div>
`
: html`
<mwc-button slot="primaryAction" @click=${this._abortDialog}>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button
slot="primaryAction"
.disabled=${!this._domain ||
!this._clientId ||
!this._clientSecret}
@click=${this._createApplicationCredential}
@click=${this._addApplicationCredential}
>
${this.hass.localize(
"ui.panel.config.application_credentials.editor.create"
"ui.panel.config.application_credentials.editor.add"
)}
</mwc-button>
`}
@ -213,7 +245,7 @@ export class DialogAddApplicationCredential extends LitElement {
this.closeDialog();
}
private async _createApplicationCredential(ev) {
private async _addApplicationCredential(ev) {
ev.preventDefault();
if (!this._domain || !this._clientId || !this._clientSecret) {
return;
@ -260,6 +292,12 @@ export class DialogAddApplicationCredential extends LitElement {
display: block;
margin-bottom: 24px;
}
a {
text-decoration: none;
}
a ha-svg-icon {
--mdc-icon-size: 16px;
}
`,
];
}

6
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -404,11 +404,15 @@ export default class HaAutomationActionRow extends LitElement {
private _onDelete() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.actions.delete_confirm_title"
),
text: this.hass.localize(
"ui.panel.config.automation.editor.actions.delete_confirm"
"ui.panel.config.automation.editor.actions.delete_confirm_text"
),
dismissText: this.hass.localize("ui.common.cancel"),
confirmText: this.hass.localize("ui.common.delete"),
destructive: true,
confirm: () => {
fireEvent(this, "value-changed", { value: null });
},

6
src/panels/config/automation/condition/ha-automation-condition-row.ts
View File

@ -314,11 +314,15 @@ export default class HaAutomationConditionRow extends LitElement {
private _onDelete() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.conditions.delete_confirm_title"
),
text: this.hass.localize(
"ui.panel.config.automation.editor.conditions.delete_confirm"
"ui.panel.config.automation.editor.conditions.delete_confirm_text"
),
dismissText: this.hass.localize("ui.common.cancel"),
confirmText: this.hass.localize("ui.common.delete"),
destructive: true,
confirm: () => {
fireEvent(this, "value-changed", { value: null });
},

16
src/panels/config/automation/ha-automation-editor.ts
View File

@ -31,6 +31,7 @@ import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../../../common/dom/fire_event";
import { navigate } from "../../../common/navigate";
import { copyToClipboard } from "../../../common/util/copy-clipboard";
import { afterNextRender } from "../../../common/util/render-status";
import "../../../components/ha-button-menu";
import "../../../components/ha-card";
import "../../../components/ha-fab";
@ -540,11 +541,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
private async confirmUnsavedChanged(): Promise<boolean> {
if (this._dirty) {
return showConfirmationDialog(this, {
title: this.hass!.localize(
"ui.panel.config.automation.editor.unsaved_confirm_title"
),
text: this.hass!.localize(
"ui.panel.config.automation.editor.unsaved_confirm"
"ui.panel.config.automation.editor.unsaved_confirm_text"
),
confirmText: this.hass!.localize("ui.common.leave"),
dismissText: this.hass!.localize("ui.common.stay"),
destructive: true,
});
}
return true;
@ -553,7 +558,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
private _backTapped = async () => {
const result = await this.confirmUnsavedChanged();
if (result) {
history.back();
afterNextRender(() => history.back());
}
};
@ -570,10 +575,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
private async _deleteConfirm() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm_title"
),
text: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm"
"ui.panel.config.automation.picker.delete_confirm_text",
{ name: this._config?.alias }
),
confirmText: this.hass!.localize("ui.common.delete"),
destructive: true,
dismissText: this.hass!.localize("ui.common.cancel"),
confirm: () => this._delete(),
});

7
src/panels/config/automation/ha-automation-picker.ts
View File

@ -341,12 +341,17 @@ class HaAutomationPicker extends LitElement {
private async _deleteConfirm(automation) {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm_title"
),
text: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm"
"ui.panel.config.automation.picker.delete_confirm_text",
{ name: automation.name }
),
confirmText: this.hass!.localize("ui.common.delete"),
dismissText: this.hass!.localize("ui.common.cancel"),
confirm: () => this._delete(automation),
destructive: true,
});
}

6
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@ -430,11 +430,15 @@ export default class HaAutomationTriggerRow extends LitElement {
private _onDelete() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm_title"
),
text: this.hass.localize(
"ui.panel.config.automation.editor.triggers.delete_confirm"
"ui.panel.config.automation.editor.triggers.delete_confirm_text"
),
dismissText: this.hass.localize("ui.common.cancel"),
confirmText: this.hass.localize("ui.common.delete"),
destructive: true,
confirm: () => {
fireEvent(this, "value-changed", { value: null });
},

95
src/panels/config/blueprint/dialog-import-blueprint.ts
View File

@ -1,4 +1,5 @@
import "@material/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
@ -105,50 +106,61 @@ class DialogImportBlueprint extends LitElement {
>
<pre>${this._result.raw_data}</pre>
</ha-expansion-panel>`
: html`${this.hass.localize(
"ui.panel.config.blueprint.add.import_introduction_link",
"community_link",
html`<a
href="https://www.home-assistant.io/get-blueprints"
target="_blank"
rel="noreferrer noopener"
>${this.hass.localize(
"ui.panel.config.blueprint.add.community_forums"
)}</a
>`
)}<ha-textfield
: html`
<p>
${this.hass.localize(
"ui.panel.config.blueprint.add.import_introduction"
)}
</p>
<a
href="https://www.home-assistant.io/get-blueprints"
target="_blank"
rel="noreferrer noopener"
>
${this.hass.localize(
"ui.panel.config.blueprint.add.community_forums"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
<ha-textfield
id="input"
.label=${this.hass.localize(
"ui.panel.config.blueprint.add.url"
)}
.value=${this._url || ""}
dialogInitialFocus
></ha-textfield>`}
></ha-textfield>
`}
</div>
<mwc-button
slot="primaryAction"
@click=${this.closeDialog}
.disabled=${this._saving}
>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
${!this._result
? html`<mwc-button
slot="primaryAction"
@click=${this._import}
.disabled=${this._importing}
>
${this._importing
? html`<ha-circular-progress
active
size="small"
.title=${this.hass.localize(
"ui.panel.config.blueprint.add.importing"
)}
></ha-circular-progress>`
: ""}
${this.hass.localize("ui.panel.config.blueprint.add.import_btn")}
</mwc-button>`
: html`<mwc-button
slot="secondaryAction"
@click=${this.closeDialog}
.disabled=${this._saving}
? html`
<mwc-button
slot="primaryAction"
@click=${this._import}
.disabled=${this._importing}
>
${this.hass.localize("ui.common.cancel")}
${this._importing
? html`<ha-circular-progress
active
size="small"
.title=${this.hass.localize(
"ui.panel.config.blueprint.add.importing"
)}
></ha-circular-progress>`
: ""}
${this.hass.localize(
"ui.panel.config.blueprint.add.import_btn"
)}
</mwc-button>
`
: html`
<mwc-button
slot="primaryAction"
@click=${this._save}
@ -164,7 +176,8 @@ class DialogImportBlueprint extends LitElement {
></ha-circular-progress>`
: ""}
${this.hass.localize("ui.panel.config.blueprint.add.save_btn")}
</mwc-button>`}
</mwc-button>
`}
</ha-dialog>
`;
}
@ -215,9 +228,19 @@ class DialogImportBlueprint extends LitElement {
static styles = [
haStyleDialog,
css`
p {
margin-top: 0;
margin-bottom: 8px;
}
ha-textfield {
display: block;
margin-top: 8px;
margin-top: 24px;
}
a {
text-decoration: none;
}
a ha-svg-icon {
--mdc-icon-size: 16px;
}
`,
];

8
src/panels/config/blueprint/ha-blueprint-overview.ts
View File

@ -329,11 +329,15 @@ class HaBlueprintOverview extends LitElement {
if (
!(await showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.blueprint.overview.confirm_delete_header"
"ui.panel.config.blueprint.overview.confirm_delete_title"
),
text: this.hass.localize(
"ui.panel.config.blueprint.overview.confirm_delete_text"
"ui.panel.config.blueprint.overview.confirm_delete_text",
{ name: blueprint.name }
),
confirmText: this.hass!.localize("ui.common.delete"),
dismissText: this.hass!.localize("ui.common.cancel"),
destructive: true,
}))
) {
return;

114
src/panels/config/cloud/account/cloud-alexa-pref.ts
View File

@ -1,11 +1,13 @@
import "@material/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import "../../../../components/ha-settings-row";
import "../../../../components/ha-switch";
import type { HaSwitch } from "../../../../components/ha-switch";
import { syncCloudAlexaEntities } from "../../../../data/alexa";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
import type { HomeAssistant } from "../../../../types";
@ -14,8 +16,6 @@ export class CloudAlexaPref extends LitElement {
@property() public cloudStatus?: CloudStatusLoggedIn;
@state() private _syncing = false;
protected render(): TemplateResult {
if (!this.cloudStatus) {
return html``;
@ -31,7 +31,20 @@ export class CloudAlexaPref extends LitElement {
"ui.panel.config.cloud.account.alexa.title"
)}
>
<div class="switch">
<div class="header-actions">
<a
href="https://www.nabucasa.com/config/amazon_alexa/"
target="_blank"
rel="noreferrer"
class="icon-link"
>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.cloud.account.alexa.link_learn_how_it_works"
)}
.path=${mdiHelpCircle}
></ha-icon-button>
</a>
<ha-switch
.checked=${alexa_enabled}
@change=${this._enabledToggleChanged}
@ -81,40 +94,25 @@ export class CloudAlexaPref extends LitElement {
</ha-alert>
`
: html`
<div class="state-reporting">
<h3>
<ha-settings-row>
<span slot="heading">
${this.hass!.localize(
"ui.panel.config.cloud.account.alexa.enable_state_reporting"
)}
</h3>
<div class="state-reporting-switch">
<ha-switch
.checked=${alexa_report_state}
@change=${this._reportToggleChanged}
></ha-switch>
</div>
</div>
<p>
${this.hass!.localize(
"ui.panel.config.cloud.account.alexa.info_state_reporting"
)}
</p>
</span>
<span slot="description">
${this.hass!.localize(
"ui.panel.config.cloud.account.alexa.info_state_reporting"
)}
</span>
<ha-switch
.checked=${alexa_report_state}
@change=${this._reportToggleChanged}
></ha-switch>
</ha-settings-row>
`}
</div>
<div class="card-actions">
${alexa_registered
? html`
<mwc-button
@click=${this._handleSync}
.disabled=${!alexa_enabled || this._syncing}
>
${this.hass!.localize(
"ui.panel.config.cloud.account.alexa.sync_entities"
)}
</mwc-button>
`
: ""}
<div class="spacer"></div>
<a href="/config/cloud/alexa">
<mwc-button
>${this.hass!.localize(
@ -127,21 +125,6 @@ export class CloudAlexaPref extends LitElement {
`;
}
private async _handleSync() {
this._syncing = true;
try {
await syncCloudAlexaEntities(this.hass!);
} catch (err: any) {
alert(
`${this.hass!.localize(
"ui.panel.config.cloud.account.alexa.sync_entities_error"
)} ${err.body.message}`
);
} finally {
this._syncing = false;
}
}
private async _enabledToggleChanged(ev) {
const toggle = ev.target as HaSwitch;
try {
@ -180,40 +163,33 @@ export class CloudAlexaPref extends LitElement {
a {
color: var(--primary-color);
}
.switch {
ha-settings-row {
padding: 0;
}
.header-actions {
position: absolute;
right: 24px;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .switch {
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-inline-end: 8px;
margin-right: 8px;
direction: var(--direction);
color: var(--secondary-text-color);
}
.card-actions {
display: flex;
}
.card-actions a {
text-decoration: none;
}
.spacer {
flex-grow: 1;
}
.state-reporting {
display: flex;
margin-top: 1.5em;
}
.state-reporting + p {
margin-top: 0.5em;
}
.state-reporting h3 {
flex-grow: 1;
margin: 0;
}
.state-reporting-switch {
margin-top: 0.25em;
margin-right: 7px;
margin-left: 0.5em;
}
`;
}
}

176
src/panels/config/cloud/account/cloud-google-pref.ts
View File

@ -1,15 +1,15 @@
import "@material/mwc-button";
import { mdiHelpCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property, state } from "lit/decorators";
import { property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import "../../../../components/ha-card";
import "../../../../components/ha-settings-row";
import type { HaSwitch } from "../../../../components/ha-switch";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
import { syncCloudGoogleEntities } from "../../../../data/google_assistant";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../types";
import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
@ -18,8 +18,6 @@ export class CloudGooglePref extends LitElement {
@property({ attribute: false }) public cloudStatus?: CloudStatusLoggedIn;
@state() private _syncing = false;
protected render(): TemplateResult {
if (!this.cloudStatus) {
return html``;
@ -36,11 +34,23 @@ export class CloudGooglePref extends LitElement {
"ui.panel.config.cloud.account.google.title"
)}
>
<div class="switch">
<div class="header-actions">
<a
href="https://www.nabucasa.com/config/google_assistant/"
target="_blank"
rel="noreferrer"
class="icon-link"
>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.cloud.account.google.link_learn_how_it_works"
)}
.path=${mdiHelpCircle}
></ha-icon-button>
</a>
<ha-switch
id="google_enabled"
.checked=${google_enabled}
@change=${this._enableToggleChanged}
@change=${this._enabledToggleChanged}
></ha-switch>
</div>
<div class="card-content">
@ -110,61 +120,50 @@ export class CloudGooglePref extends LitElement {
`
: ""}
<div class="state-reporting">
<h3>
${this.hass.localize(
<ha-settings-row>
<span slot="heading">
${this.hass!.localize(
"ui.panel.config.cloud.account.google.enable_state_reporting"
)}
</h3>
<div class="state-reporting-switch">
<ha-switch
.checked=${google_report_state}
@change=${this._reportToggleChanged}
></ha-switch>
</div>
</div>
<p>
${this.hass.localize(
"ui.panel.config.cloud.account.google.info_state_reporting"
)}
</p>
<div class="secure_devices">
<h3>
</span>
<span slot="description">
${this.hass!.localize(
"ui.panel.config.cloud.account.google.info_state_reporting"
)}
</span>
<ha-switch
.checked=${google_report_state}
@change=${this._reportToggleChanged}
></ha-switch>
</ha-settings-row>
<ha-settings-row>
<span slot="heading">
${this.hass.localize(
"ui.panel.config.cloud.account.google.security_devices"
)}
</h3>
${this.hass.localize(
"ui.panel.config.cloud.account.google.enter_pin_info"
</span>
<span slot="description">
${this.hass.localize(
"ui.panel.config.cloud.account.google.enter_pin_info"
)}
</span>
</ha-settings-row>
<ha-textfield
id="google_secure_devices_pin"
.label=${this.hass.localize(
"ui.panel.config.cloud.account.google.devices_pin"
)}
<ha-textfield
id="google_secure_devices_pin"
.label=${this.hass.localize(
"ui.panel.config.cloud.account.google.devices_pin"
)}
.placeholder=${this.hass.localize(
"ui.panel.config.cloud.account.google.enter_pin_hint"
)}
.value=${google_secure_devices_pin || ""}
@change=${this._pinChanged}
></ha-textfield>
</div>
.placeholder=${this.hass.localize(
"ui.panel.config.cloud.account.google.enter_pin_hint"
)}
.value=${google_secure_devices_pin || ""}
@change=${this._pinChanged}
></ha-textfield>
`}
</div>
<div class="card-actions">
${google_registered
? html`
<mwc-button
@click=${this._handleSync}
.disabled=${!google_enabled || this._syncing}
>
${this.hass.localize(
"ui.panel.config.cloud.account.google.sync_entities"
)}
</mwc-button>
`
: ""}
<div class="spacer"></div>
<a href="/config/cloud/google-assistant">
<mwc-button>
${this.hass.localize(
@ -177,32 +176,7 @@ export class CloudGooglePref extends LitElement {
`;
}
private async _handleSync() {
this._syncing = true;
try {
await syncCloudGoogleEntities(this.hass!);
} catch (err: any) {
showAlertDialog(this, {
title: this.hass.localize(
`ui.panel.config.cloud.account.google.${
err.status_code === 404
? "not_configured_title"
: "sync_failed_title"
}`
),
text: this.hass.localize(
`ui.panel.config.cloud.account.google.${
err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
}`
),
});
fireEvent(this, "ha-refresh-cloud-status");
} finally {
this._syncing = false;
}
}
private async _enableToggleChanged(ev) {
private async _enabledToggleChanged(ev) {
const toggle = ev.target as HaSwitch;
try {
await updateCloudPref(this.hass, { [toggle.id]: toggle.checked! });
@ -252,15 +226,27 @@ export class CloudGooglePref extends LitElement {
a {
color: var(--primary-color);
}
.switch {
.header-actions {
position: absolute;
right: 24px;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .switch {
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-inline-end: 8px;
margin-right: 8px;
direction: var(--direction);
color: var(--secondary-text-color);
}
ha-settings-row {
padding: 0;
}
ha-textfield {
width: 250px;
display: block;
@ -275,32 +261,6 @@ export class CloudGooglePref extends LitElement {
.warning {
color: var(--error-color);
}
.secure_devices {
padding-top: 8px;
}
.spacer {
flex-grow: 1;
}
.state-reporting {
display: flex;
margin-top: 1.5em;
}
.state-reporting + p {
margin-top: 0.5em;
}
h3 {
margin: 0 0 8px 0;
}
.state-reporting h3 {
flex-grow: 1;
margin: 0;
}
.state-reporting-switch {
margin-top: 0.25em;
margin-right: 7px;
margin-left: 0.5em;
}
`;
}
}

50
src/panels/config/cloud/account/cloud-remote-pref.ts
View File

@ -1,5 +1,5 @@
import "@material/mwc-button";
import { mdiContentCopy } from "@mdi/js";
import { mdiContentCopy, mdiHelpCircle } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
@ -58,12 +58,26 @@ export class CloudRemotePref extends LitElement {
"ui.panel.config.cloud.account.remote.title"
)}
>
<div class="switch">
<div class="header-actions">
<a
href="https://www.nabucasa.com/config/remote/"
target="_blank"
rel="noreferrer"
class="icon-link"
>
<ha-icon-button
.label=${this.hass.localize(
"ui.panel.config.cloud.account.remote.link_learn_how_it_works"
)}
.path=${mdiHelpCircle}
></ha-icon-button>
</a>
<ha-switch
.checked=${remote_enabled}
@change=${this._toggleChanged}
></ha-switch>
</div>
<div class="card-content">
${!remote_connected && remote_enabled
? html`
@ -98,18 +112,6 @@ export class CloudRemotePref extends LitElement {
></ha-svg-icon>
</div>
<div class="card-actions">
<a
href="https://www.nabucasa.com/config/remote/"
target="_blank"
rel="noreferrer"
>
<mwc-button
>${this.hass.localize(
"ui.panel.config.cloud.account.remote.link_learn_how_it_works"
)}</mwc-button
>
</a>
<div class="spacer"></div>
<mwc-button @click=${this._openCertInfo}>
${this.hass.localize(
"ui.panel.config.cloud.account.remote.certificate_info"
@ -158,15 +160,24 @@ export class CloudRemotePref extends LitElement {
a {
color: var(--primary-color);
}
.switch {
.header-actions {
position: absolute;
right: 24px;
top: 24px;
display: flex;
flex-direction: row;
}
:host([dir="rtl"]) .switch {
:host([dir="rtl"]) .header-actions {
right: auto;
left: 24px;
}
.header-actions .icon-link {
margin-top: -16px;
margin-inline-end: 8px;
margin-right: 8px;
direction: var(--direction);
color: var(--secondary-text-color);
}
.warning {
font-weight: bold;
margin-bottom: 1em;
@ -179,19 +190,12 @@ export class CloudRemotePref extends LitElement {
right: 24px;
top: 24px;
}
:host([dir="rtl"]) .switch {
right: auto;
left: 24px;
}
.card-actions {
display: flex;
}
.card-actions a {
text-decoration: none;
}
.spacer {
flex-grow: 1;
}
ha-svg-icon {
--mdc-icon-size: 18px;
color: var(--secondary-text-color);

172
src/panels/config/cloud/alexa/cloud-alexa.ts
View File

@ -5,6 +5,9 @@ import {
mdiCheckboxMultipleMarked,
mdiCloseBox,
mdiCloseBoxMultiple,
mdiDotsVertical,
mdiFormatListChecks,
mdiSync,
} from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@ -26,7 +29,11 @@ import "../../../../components/ha-card";
import "../../../../components/ha-formfield";
import "../../../../components/ha-icon-button";
import "../../../../components/ha-switch";
import { AlexaEntity, fetchCloudAlexaEntities } from "../../../../data/alexa";
import {
AlexaEntity,
fetchCloudAlexaEntities,
syncCloudAlexaEntities,
} from "../../../../data/alexa";
import {
AlexaEntityConfig,
CloudPreferences,
@ -59,6 +66,8 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
@state() private _entities?: AlexaEntity[];
@state() private _syncing = false;
@state()
private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
@ -222,74 +231,84 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
}
return html`
<hass-subpage .hass=${this.hass} .narrow=${
this.narrow
} .header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}>
${
emptyFilter
? html`
<mwc-button
slot="toolbar-icon"
@click=${this._openDomainToggler}
>${this.hass!.localize(
"ui.panel.config.cloud.alexa.manage_defaults"
)}</mwc-button
>
`
: ""
}
${
!emptyFilter
? html`
<div class="banner">
${this.hass!.localize("ui.panel.config.cloud.alexa.banner")}
</div>
`
: ""
}
${
exposedCards.length > 0
? html`
<div class="header">
<h3>
${this.hass!.localize(
"ui.panel.config.cloud.alexa.exposed_entities"
)}
</h3>
${!this.narrow
? this.hass!.localize(
"ui.panel.config.cloud.alexa.exposed",
"selected",
selected
)
: selected}
</div>
<div class="content">${exposedCards}</div>
`
: ""
}
${
notExposedCards.length > 0
? html`
<div class="header second">
<h3>
${this.hass!.localize(
"ui.panel.config.cloud.alexa.not_exposed_entities"
)}
</h3>
${!this.narrow
? this.hass!.localize(
"ui.panel.config.cloud.alexa.not_exposed",
"selected",
this._entities.length - selected
)
: this._entities.length - selected}
</div>
<div class="content">${notExposedCards}</div>
`
: ""
}
</div>
<hass-subpage
.hass=${this.hass}
.narrow=${this.narrow}
.header=${this.hass!.localize("ui.panel.config.cloud.alexa.title")}
>
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item
graphic="icon"
.disabled=${!emptyFilter}
@click=${this._openDomainToggler}
>
${this.hass.localize("ui.panel.config.cloud.alexa.manage_defaults")}
<ha-svg-icon
slot="graphic"
.path=${mdiFormatListChecks}
></ha-svg-icon>
</mwc-list-item>
<mwc-list-item
graphic="icon"
.disabled=${this._syncing}
@click=${this._handleSync}
>
${this.hass.localize("ui.panel.config.cloud.alexa.sync_entities")}
<ha-svg-icon slot="graphic" .path=${mdiSync}></ha-svg-icon>
</mwc-list-item>
</ha-button-menu>
${!emptyFilter
? html`
<div class="banner">
${this.hass!.localize("ui.panel.config.cloud.alexa.banner")}
</div>
`
: ""}
${exposedCards.length > 0
? html`
<div class="header">
<h3>
${this.hass!.localize(
"ui.panel.config.cloud.alexa.exposed_entities"
)}
</h3>
${!this.narrow
? this.hass!.localize(
"ui.panel.config.cloud.alexa.exposed",
"selected",
selected
)
: selected}
</div>
<div class="content">${exposedCards}</div>
`
: ""}
${notExposedCards.length > 0
? html`
<div class="header second">
<h3>
${this.hass!.localize(
"ui.panel.config.cloud.alexa.not_exposed_entities"
)}
</h3>
${!this.narrow
? this.hass!.localize(
"ui.panel.config.cloud.alexa.not_exposed",
"selected",
this._entities.length - selected
)
: this._entities.length - selected}
</div>
<div class="content">${notExposedCards}</div>
`
: ""}
</hass-subpage>
`;
}
@ -423,6 +442,21 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
});
}
private async _handleSync() {
this._syncing = true;
try {
await syncCloudAlexaEntities(this.hass!);
} catch (err: any) {
alert(
`${this.hass!.localize(
"ui.panel.config.cloud.alexa.sync_entities_error"
)} ${err.body.message}`
);
} finally {
this._syncing = false;
}
}
private async _updateDomainExposed(domain: string, expose: boolean) {
const defaultExpose =
this.cloudStatus.prefs.alexa_default_expose ||

17
src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
View File

@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { formatDateTime } from "../../../../common/datetime/format_date_time";
import { fireEvent } from "../../../../common/dom/fire_event";
import { createCloseHeading } from "../../../../components/ha-dialog";
import { haStyleDialog } from "../../../../resources/styles";
import type { HomeAssistant } from "../../../../types";
import type { CloudCertificateParams as CloudCertificateDialogParams } from "./show-dialog-cloud-certificate";
@ -32,8 +33,13 @@ class DialogCloudCertificate extends LitElement {
return html`
<ha-dialog
open
.heading=${this.hass!.localize(
"ui.panel.config.cloud.dialog_certificate.certificate_information"
hideActions
@closed=${this.closeDialog}
.heading=${createCloseHeading(
this.hass,
this.hass.localize(
"ui.panel.config.cloud.dialog_certificate.certificate_information"
)
)}
>
<div>
@ -76,6 +82,13 @@ class DialogCloudCertificate extends LitElement {
.break-word {
overflow-wrap: break-word;
}
p {
margin-top: 0;
margin-bottom: 12px;
}
p:last-child {
margin-bottom: 0;
}
`,
];
}

111
src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
View File

@ -1,18 +1,19 @@
import "@material/mwc-button";
import { mdiContentCopy, mdiOpenInNew } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { query, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import { copyToClipboard } from "../../../../common/util/copy-clipboard";
import type { HaTextField } from "../../../../components/ha-textfield";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-textfield";
import type { HaTextField } from "../../../../components/ha-textfield";
import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
import { haStyle, haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import { showToast } from "../../../../util/toast";
import { WebhookDialogParams } from "./show-dialog-manage-cloudhook";
const inputLabel = "Public URL – Click to copy to clipboard";
export class DialogManageCloudhook extends LitElement {
protected hass?: HomeAssistant;
@ -44,26 +45,19 @@ export class DialogManageCloudhook extends LitElement {
return html`
<ha-dialog
open
.heading=${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.webhook_for",
"name",
webhook.name
hideActions
@closed=${this.closeDialog}
.heading=${createCloseHeading(
this.hass!,
this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.webhook_for",
{ name: webhook.name }
)
)}
>
<div>
<p>
${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.available_at"
)}
</p>
<ha-textfield
.label=${inputLabel}
.value=${cloudhook.cloudhook_url}
@click=${this._copyClipboard}
@blur=${this._restoreLabel}
></ha-textfield>
<p>
${cloudhook.managed
${!cloudhook.managed
? html`
${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.managed_by_integration"
@ -79,7 +73,29 @@ export class DialogManageCloudhook extends LitElement {
)}</button
>.
`}
<br />
<a href=${docsUrl} target="_blank" rel="noreferrer">
${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.view_documentation"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
</p>
<ha-textfield
.label=${this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.public_url"
)}
.value=${cloudhook.cloudhook_url}
iconTrailing
readOnly
@click=${this.focusInput}
>
<ha-icon-button
@click=${this._copyUrl}
slot="trailingIcon"
.path=${mdiContentCopy}
></ha-icon-button>
</ha-textfield>
</div>
<a
@ -102,33 +118,40 @@ export class DialogManageCloudhook extends LitElement {
}
private async _disableWebhook() {
showConfirmationDialog(this, {
const confirmed = await showConfirmationDialog(this, {
title: this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.confirm_disable_title"
),
text: this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.confirm_disable"
"ui.panel.config.cloud.dialog_cloudhook.confirm_disable_text",
{ name: this._params!.webhook.name }
),
dismissText: this.hass!.localize("ui.common.cancel"),
confirmText: this.hass!.localize("ui.common.disable"),
confirm: () => {
this._params!.disableHook();
this.closeDialog();
},
destructive: true,
});
}
private _copyClipboard(ev: FocusEvent) {
const textField = ev.currentTarget as HaTextField;
try {
copyToClipboard(textField.value);
textField.label = this.hass!.localize(
"ui.panel.config.cloud.dialog_cloudhook.copied_to_clipboard"
);
} catch (err: any) {
// Copying failed. Oh no
if (confirmed) {
this._params!.disableHook();
this.closeDialog();
}
}
private _restoreLabel() {
this._input.label = inputLabel;
private focusInput(ev) {
const inputElement = ev.currentTarget as HaTextField;
inputElement.select();
}
private async _copyUrl(ev): Promise<void> {
if (!this.hass) return;
ev.stopPropagation();
const inputElement = ev.target.parentElement as HaTextField;
inputElement.select();
const url = this.hass.hassUrl(inputElement.value);
await copyToClipboard(url);
showToast(this, {
message: this.hass.localize("ui.common.copied_clipboard"),
});
}
static get styles(): CSSResultGroup {
@ -142,12 +165,24 @@ export class DialogManageCloudhook extends LitElement {
ha-textfield {
display: block;
}
ha-textfield > ha-icon-button {
--mdc-icon-button-size: 24px;
--mdc-icon-size: 18px;
}
button.link {
color: var(--primary-color);
text-decoration: none;
}
a {
text-decoration: none;
}
a ha-svg-icon {
--mdc-icon-size: 16px;
}
p {
margin-top: 0;
margin-bottom: 16px;
}
`,
];
}

77
src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
View File

@ -5,6 +5,9 @@ import {
mdiCheckboxMultipleMarked,
mdiCloseBox,
mdiCloseBoxMultiple,
mdiDotsVertical,
mdiFormatListChecks,
mdiSync,
} from "@mdi/js";
import type { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@ -45,6 +48,7 @@ import {
GoogleEntity,
} from "../../../../data/google_assistant";
import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
import "../../../../layouts/hass-loading-screen";
import "../../../../layouts/hass-subpage";
import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
@ -64,6 +68,8 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
@state() private _entities?: GoogleEntity[];
@state() private _syncing = false;
@state()
private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
@ -249,19 +255,39 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
.hass=${this.hass}
.header=${this.hass!.localize("ui.panel.config.cloud.google.title")}
.narrow=${this.narrow}>
${
emptyFilter
? html`
<mwc-button
slot="toolbar-icon"
@click=${this._openDomainToggler}
>${this.hass!.localize(
"ui.panel.config.cloud.google.manage_defaults"
)}</mwc-button
>
`
: ""
}
<ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<mwc-list-item
graphic="icon"
.disabled=${!emptyFilter}
@click=${this._openDomainToggler}
>
${this.hass.localize(
"ui.panel.config.cloud.google.manage_defaults"
)}
<ha-svg-icon
slot="graphic"
.path=${mdiFormatListChecks}
></ha-svg-icon>
</mwc-list-item>
<mwc-list-item
graphic="icon"
.disabled=${this._syncing}
@click=${this._handleSync}
>
${this.hass.localize("ui.panel.config.cloud.google.sync_entities")}
<ha-svg-icon
slot="graphic"
.path=${mdiSync}
></ha-svg-icon>
</mwc-list-item>
</ha-button-menu>
${
!emptyFilter
? html`
@ -506,6 +532,31 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
);
}
private async _handleSync() {
this._syncing = true;
try {
await cloudSyncGoogleAssistant(this.hass!);
} catch (err: any) {
showAlertDialog(this, {
title: this.hass.localize(
`ui.panel.config.cloud.google.${
err.status_code === 404
? "not_configured_title"
: "sync_failed_title"
}`
),
text: this.hass.localize(
`ui.panel.config.cloud.google.${
err.status_code === 404 ? "not_configured_text" : "sync_failed_text"
}`
),
});
fireEvent(this, "ha-refresh-cloud-status");
} finally {
this._syncing = false;
}
}
private _ensureEntitySync() {
if (this._popstateSyncAttached) {
return;

50
src/panels/config/core/ha-config-section-updates.ts
View File

@ -24,13 +24,11 @@ import {
checkForEntityUpdates,
filterUpdateEntitiesWithInstall,
} from "../../../data/update";
import {
showAlertDialog,
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-subpage";
import type { HomeAssistant } from "../../../types";
import "../dashboard/ha-config-updates";
import { showJoinBetaDialog } from "./updates/show-dialog-join-beta";
@customElement("ha-config-section-updates")
class HaConfigSectionUpdates extends LitElement {
@ -46,9 +44,7 @@ class HaConfigSectionUpdates extends LitElement {
super.firstUpdated(changedProps);
if (isComponentLoaded(this.hass, "hassio")) {
fetchHassioSupervisorInfo(this.hass).then((data) => {
this._supervisorInfo = data;
});
this._refreshSupervisorInfo();
}
}
@ -126,6 +122,10 @@ class HaConfigSectionUpdates extends LitElement {
`;
}
private async _refreshSupervisorInfo() {
this._supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
}
private _toggleSkipped(ev: CustomEvent<RequestSelectedDetail>): void {
if (ev.detail.source !== "property") {
return;
@ -142,35 +142,23 @@ class HaConfigSectionUpdates extends LitElement {
}
if (this._supervisorInfo!.channel === "stable") {
const confirmed = await showConfirmationDialog(this, {
title: this.hass.localize("ui.dialogs.join_beta_channel.title"),
text: html`${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
<br />
<b> ${this.hass.localize("ui.dialogs.join_beta_channel.backup")} </b>
<br /><br />
${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
<ul>
<li>Home Assistant Core</li>
<li>Home Assistant Supervisor</li>
<li>Home Assistant Operating System</li>
</ul>
<br />
${this.hass.localize("ui.dialogs.join_beta_channel.confirm")}`,
confirmText: this.hass.localize("ui.panel.config.updates.join_beta"),
dismissText: this.hass.localize("ui.common.cancel"),
showJoinBetaDialog(this, {
join: async () => this._setChannel("beta"),
});
if (!confirmed) {
return;
}
} else {
this._setChannel("stable");
}
}
private async _setChannel(
channel: SupervisorOptions["channel"]
): Promise<void> {
try {
const data: Partial<SupervisorOptions> = {
channel: this._supervisorInfo!.channel === "stable" ? "beta" : "stable",
};
await setSupervisorOption(this.hass, data);
await setSupervisorOption(this.hass, {
channel,
});
await reloadSupervisor(this.hass);
await this._refreshSupervisorInfo();
} catch (err: any) {
showAlertDialog(this, {
text: extractApiErrorMessage(err),

3
src/panels/config/core/ha-config-system-navigation.ts
View File

@ -181,6 +181,7 @@ class HaConfigSystemNavigation extends LitElement {
});
});
},
destructive: true,
});
}
@ -205,7 +206,7 @@ class HaConfigSystemNavigation extends LitElement {
const hardwareInfo: HardwareInfo = await this.hass.callWS({
type: "hardware/info",
});
this._boardName = hardwareInfo?.hardware?.[0].name;
this._boardName = hardwareInfo?.hardware?.[0]?.name;
} else if (isHassioLoaded) {
const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
if (osData.board) {

108
src/panels/config/core/updates/dialog-join-beta.ts Normal file
View File

@ -0,0 +1,108 @@
import "@material/mwc-button/mwc-button";
import { mdiOpenInNew } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/ha-alert";
import { createCloseHeading } from "../../../../components/ha-dialog";
import "../../../../components/ha-header-bar";
import { HassDialog } from "../../../../dialogs/make-dialog-manager";
import { haStyleDialog } from "../../../../resources/styles";
import { HomeAssistant } from "../../../../types";
import { documentationUrl } from "../../../../util/documentation-url";
import { JoinBetaDialogParams } from "./show-dialog-join-beta";
@customElement("dialog-join-beta")
export class DialogJoinBeta
extends LitElement
implements HassDialog<JoinBetaDialogParams>
{
@property({ attribute: false }) public hass!: HomeAssistant;
@state() private _dialogParams?: JoinBetaDialogParams;
public showDialog(dialogParams: JoinBetaDialogParams): void {
this._dialogParams = dialogParams;
}
public closeDialog(): void {
this._dialogParams = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
protected render(): TemplateResult {
if (!this._dialogParams) {
return html``;
}
return html`
<ha-dialog
open
@closed=${this.closeDialog}
.heading=${createCloseHeading(
this.hass,
this.hass.localize("ui.dialogs.join_beta_channel.title")
)}
>
<ha-alert alert-type="warning">
${this.hass.localize("ui.dialogs.join_beta_channel.backup")}
</ha-alert>
<p>
${this.hass.localize("ui.dialogs.join_beta_channel.warning")}
${this.hass.localize("ui.dialogs.join_beta_channel.release_items")}
</p>
<ul>
<li>Home Assistant Core</li>
<li>Home Assistant Supervisor</li>
<li>Home Assistant Operating System</li>
</ul>
<a
href=${documentationUrl(this.hass!, "/faq/release/")}
target="_blank"
rel="noreferrer"
>
${this.hass!.localize(
"ui.dialogs.join_beta_channel.view_documentation"
)}
<ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
</a>
<mwc-button slot="primaryAction" @click=${this._cancel}>
${this.hass.localize("ui.common.cancel")}
</mwc-button>
<mwc-button slot="primaryAction" @click=${this._join}>
${this.hass.localize("ui.dialogs.join_beta_channel.join")}
</mwc-button>
</ha-dialog>
`;
}
private _cancel() {
this._dialogParams?.cancel?.();
this.closeDialog();
}
private _join() {
this._dialogParams?.join?.();
this.closeDialog();
}
static get styles(): CSSResultGroup {
return [
haStyleDialog,
css`
a {
text-decoration: none;
}
a ha-svg-icon {
--mdc-icon-size: 16px;
}
`,
];
}
}
declare global {
interface HTMLElementTagNameMap {
"dialog-join-beta": DialogJoinBeta;
}
}

18
src/panels/config/core/updates/show-dialog-join-beta.ts Normal file
View File

@ -0,0 +1,18 @@
import { fireEvent } from "../../../../common/dom/fire_event";
import "./dialog-join-beta";
export interface JoinBetaDialogParams {
join?: () => any;
cancel?: () => any;
}
export const showJoinBetaDialog = (
element: HTMLElement,
dialogParams: JoinBetaDialogParams
): void => {
fireEvent(element, "show-dialog", {
dialogTag: "dialog-join-beta",
dialogImport: () => import("./dialog-join-beta"),
dialogParams,
});
};

25
src/panels/config/devices/device-detail/integration-elements/zha/device-actions.ts
View File

@ -1,9 +1,7 @@
import {
mdiCogRefresh,
mdiDelete,
mdiDrawPen,
mdiFamilyTree,
mdiFileTree,
mdiGroup,
mdiPlus,
} from "@mdi/js";
@ -12,9 +10,7 @@ import type { DeviceRegistryEntry } from "../../../../../../data/device_registry
import { fetchZHADevice } from "../../../../../../data/zha";
import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../../../../types";
import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
import { showZHAManageZigbeeDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-manage-zigbee-device";
import { showZHAReconfigureDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-reconfigure-device";
import type { DeviceAction } from "../../../ha-config-device-page";
@ -59,13 +55,6 @@ export const getZHADeviceActions = async (
icon: mdiPlus,
action: () => navigate(`/config/zha/add/${zhaDevice!.ieee}`),
},
{
label: hass.localize(
"ui.dialogs.zha_device_info.buttons.device_children"
),
icon: mdiFileTree,
action: () => showZHADeviceChildrenDialog(el, { device: zhaDevice! }),
},
]
);
}
@ -73,16 +62,10 @@ export const getZHADeviceActions = async (
actions.push(
...[
{
label: hass.localize(
"ui.dialogs.zha_device_info.buttons.zigbee_information"
),
icon: mdiDrawPen,
action: () => showZHADeviceZigbeeInfoDialog(el, { device: zhaDevice }),
},
{
label: hass.localize("ui.dialogs.zha_device_info.buttons.clusters"),
label: hass.localize("ui.dialogs.zha_device_info.buttons.manage"),
icon: mdiGroup,
action: () => showZHAClusterDialog(el, { device: zhaDevice }),
action: () =>
showZHAManageZigbeeDeviceDialog(el, { device: zhaDevice }),
},
{
label: hass.localize("ui.dialogs.zha_device_info.buttons.view_network"),

1
src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts
View File

@ -23,6 +23,7 @@ export class HaDeviceActionsZha extends LitElement {
@state() private _zhaDevice?: ZHADevice;
protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (changedProperties.has("device")) {
const zigbeeConnection = this.device.connections.find(
(conn) => conn[0] === "zigbee"

8
src/panels/config/energy/components/ha-energy-battery-settings.ts
View File

@ -16,7 +16,7 @@ import {
import {
StatisticsMetaData,
getStatisticLabel,
} from "../../../../data/history";
} from "../../../../data/recorder";
import {
showAlertDialog,
showConfirmationDialog,
@ -36,7 +36,7 @@ export class EnergyBatterySettings extends LitElement {
public preferences!: EnergyPreferences;
@property({ attribute: false })
public statsMetadata!: Record<string, StatisticsMetaData>;
public statsMetadata?: Record<string, StatisticsMetaData>;
@property({ attribute: false })
public validationResult?: EnergyPreferencesValidation;
@ -104,14 +104,14 @@ export class EnergyBatterySettings extends LitElement {
>${getStatisticLabel(
this.hass,
source.stat_energy_from,
this.statsMetadata[source.stat_energy_from]
this.statsMetadata?.[source.stat_energy_from]
)}</span
>
<span
>${getStatisticLabel(
this.hass,
source.stat_energy_to,
this.statsMetadata[source.stat_energy_to]
this.statsMetadata?.[source.stat_energy_to]
)}</span
>
</div>

6
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -15,7 +15,7 @@ import {
import {
StatisticsMetaData,
getStatisticLabel,
} from "../../../../data/history";
} from "../../../../data/recorder";
import {
showAlertDialog,
showConfirmationDialog,
@ -35,7 +35,7 @@ export class EnergyDeviceSettings extends LitElement {
public preferences!: EnergyPreferences;
@property({ attribute: false })
public statsMetadata!: Record<string, StatisticsMetaData>;
public statsMetadata?: Record<string, StatisticsMetaData>;
@property({ attribute: false })
public validationResult?: EnergyPreferencesValidation;
@ -90,7 +90,7 @@ export class EnergyDeviceSettings extends LitElement {
>${getStatisticLabel(
this.hass,
device.stat_consumption,
this.statsMetadata[device.stat_consumption]
this.statsMetadata?.[device.stat_consumption]
)}</span
>
<ha-icon-button

14
src/panels/config/energy/components/ha-energy-gas-settings.ts
View File

@ -16,7 +16,7 @@ import {
import {
StatisticsMetaData,
getStatisticLabel,
} from "../../../../data/history";
} from "../../../../data/recorder";
import {
showAlertDialog,
showConfirmationDialog,
@ -36,7 +36,7 @@ export class EnergyGasSettings extends LitElement {
public preferences!: EnergyPreferences;
@property({ attribute: false })
public statsMetadata!: Record<string, StatisticsMetaData>;
public statsMetadata?: Record<string, StatisticsMetaData>;
@property({ attribute: false })
public validationResult?: EnergyPreferencesValidation;
@ -98,7 +98,7 @@ export class EnergyGasSettings extends LitElement {
>${getStatisticLabel(
this.hass,
source.stat_energy_from,
this.statsMetadata[source.stat_energy_from]
this.statsMetadata?.[source.stat_energy_from]
)}</span
>
<ha-icon-button
@ -133,7 +133,10 @@ export class EnergyGasSettings extends LitElement {
private _addSource() {
showEnergySettingsGasDialog(this, {
unit: getEnergyGasUnitCategory(this.preferences, this.statsMetadata),
allowedGasUnitCategory: getEnergyGasUnitCategory(
this.preferences,
this.statsMetadata
),
saveCallback: async (source) => {
delete source.unit_of_measurement;
await this._savePreferences({
@ -149,11 +152,12 @@ export class EnergyGasSettings extends LitElement {
ev.currentTarget.closest(".row").source;
showEnergySettingsGasDialog(this, {
source: { ...origSource },
unit: getEnergyGasUnitCategory(
allowedGasUnitCategory: getEnergyGasUnitCategory(
this.preferences,
this.statsMetadata,
origSource.stat_energy_from
),
metadata: this.statsMetadata?.[origSource.stat_energy_from],
saveCallback: async (newSource) => {
await this._savePreferences({
...this.preferences,

8
src/panels/config/energy/components/ha-energy-grid-settings.ts
View File

@ -30,7 +30,7 @@ import {
import {
StatisticsMetaData,
getStatisticLabel,
} from "../../../../data/history";
} from "../../../../data/recorder";
import { showConfigFlowDialog } from "../../../../dialogs/config-flow/show-dialog-config-flow";
import {
showAlertDialog,
@ -55,7 +55,7 @@ export class EnergyGridSettings extends LitElement {
public preferences!: EnergyPreferences;
@property({ attribute: false })
public statsMetadata!: Record<string, StatisticsMetaData>;
public statsMetadata?: Record<string, StatisticsMetaData>;
@property({ attribute: false })
public validationResult?: EnergyPreferencesValidation;
@ -136,7 +136,7 @@ export class EnergyGridSettings extends LitElement {
>${getStatisticLabel(
this.hass,
flow.stat_energy_from,
this.statsMetadata[flow.stat_energy_from]
this.statsMetadata?.[flow.stat_energy_from]
)}</span
>
<ha-icon-button
@ -183,7 +183,7 @@ export class EnergyGridSettings extends LitElement {
>${getStatisticLabel(
this.hass,
flow.stat_energy_to,
this.statsMetadata[flow.stat_energy_to]
this.statsMetadata?.[flow.stat_energy_to]
)}</span
>
<ha-icon-button

6
src/panels/config/energy/components/ha-energy-solar-settings.ts
View File

@ -16,7 +16,7 @@ import {
import {
StatisticsMetaData,
getStatisticLabel,
} from "../../../../data/history";
} from "../../../../data/recorder";
import {
showConfirmationDialog,
showAlertDialog,
@ -36,7 +36,7 @@ export class EnergySolarSettings extends LitElement {
public preferences!: EnergyPreferences;
@property({ attribute: false })
public statsMetadata!: Record<string, StatisticsMetaData>;
public statsMetadata?: Record<string, StatisticsMetaData>;
@property({ attribute: false })
public validationResult?: EnergyPreferencesValidation;
@ -106,7 +106,7 @@ export class EnergySolarSettings extends LitElement {
>${getStatisticLabel(
this.hass,
source.stat_energy_from,
this.statsMetadata[source.stat_energy_from]
this.statsMetadata?.[source.stat_energy_from]
)}</span
>
${this.info

4
src/panels/config/energy/components/ha-energy-validation-result.ts
View File

@ -32,9 +32,7 @@ class EnergyValidationMessage extends LitElement {
>
${this.hass.localize(
`ui.panel.config.energy.validation.issues.${issueType}.description`,
issueType === "entity_unexpected_unit_price"
? { currency: this.hass.config.currency }
: undefined
{ currency: this.hass.config.currency }
)}
${
issueType === "recorder_untracked"

65
src/panels/config/energy/dialogs/dialog-energy-gas-settings.ts
View File

@ -21,6 +21,7 @@ import "../../../../components/ha-radio";
import "../../../../components/ha-formfield";
import "../../../../components/ha-textfield";
import type { HaRadio } from "../../../../components/ha-radio";
import { getStatisticMetadata } from "../../../../data/recorder";
@customElement("dialog-energy-gas-settings")
export class DialogEnergyGasSettings
@ -35,7 +36,9 @@ export class DialogEnergyGasSettings
@state() private _costs?: "no-costs" | "number" | "entity" | "statistic";
@state() private _unit?: string;
@state() private _pickableUnit?: string;
@state() private _pickedDisplayUnit?: string;
@state() private _error?: string;
@ -46,6 +49,7 @@ export class DialogEnergyGasSettings
this._source = params.source
? { ...params.source }
: emptyGasEnergyPreference();
this._pickedDisplayUnit = params.metadata?.display_unit_of_measurement;
this._costs = this._source.entity_energy_price
? "entity"
: this._source.number_energy_price
@ -58,7 +62,8 @@ export class DialogEnergyGasSettings
public closeDialog(): void {
this._params = undefined;
this._source = undefined;
this._unit = undefined;
this._pickableUnit = undefined;
this._pickedDisplayUnit = undefined;
this._error = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@ -68,13 +73,16 @@ export class DialogEnergyGasSettings
return html``;
}
const unit =
this._unit ||
(this._params.unit === undefined
? "m³ or kWh"
: this._params.unit === "energy"
? "kWh"
: "m³");
const pickableUnit =
this._pickableUnit ||
(this._params.allowedGasUnitCategory === undefined
? "ft³, m³, Wh, kWh or MWh"
: this._params.allowedGasUnitCategory === "energy"
? "Wh, kWh or MWh"
: "ft³ or m³");
const externalSource =
this._source.stat_cost && this._source.stat_cost.includes(":");
return html`
<ha-dialog
@ -90,22 +98,21 @@ export class DialogEnergyGasSettings
<ha-statistic-picker
.hass=${this.hass}
.includeStatisticsUnitOfMeasurement=${this._params.unit === undefined
.includeStatisticsUnitOfMeasurement=${this._params
.allowedGasUnitCategory === undefined
? ENERGY_GAS_UNITS
: this._params.unit === "energy"
: this._params.allowedGasUnitCategory === "energy"
? ENERGY_GAS_ENERGY_UNITS
: ENERGY_GAS_VOLUME_UNITS}
.value=${this._source.stat_energy_from}
.label=${`${this.hass.localize(
"ui.panel.config.energy.gas.dialog.gas_usage"
)} (${
this._params.unit === undefined
this._params.allowedGasUnitCategory === undefined
? this.hass.localize(
"ui.panel.config.energy.gas.dialog.m3_or_kWh"
)
: this._params.unit === "energy"
? "kWh"
: "m³"
: pickableUnit
})`}
@value-changed=${this._statisticChanged}
dialogInitialFocus
@ -136,6 +143,7 @@ export class DialogEnergyGasSettings
value="statistic"
name="costs"
.checked=${this._costs === "statistic"}
.disabled=${externalSource}
@change=${this._handleCostChanged}
></ha-radio>
</ha-formfield>
@ -160,6 +168,7 @@ export class DialogEnergyGasSettings
value="entity"
name="costs"
.checked=${this._costs === "entity"}
.disabled=${externalSource}
@change=${this._handleCostChanged}
></ha-radio>
</ha-formfield>
@ -171,7 +180,7 @@ export class DialogEnergyGasSettings
.value=${this._source.entity_energy_price}
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_entity_input`,
{ unit }
{ unit: this._pickedDisplayUnit || pickableUnit }
)}
@value-changed=${this._priceEntityChanged}
></ha-entity-picker>`
@ -192,14 +201,16 @@ export class DialogEnergyGasSettings
? html`<ha-textfield
.label=${this.hass.localize(
`ui.panel.config.energy.gas.dialog.cost_number_input`,
{ unit }
{ unit: this._pickedDisplayUnit || pickableUnit }
)}
class="price-options"
step=".01"
type="number"
.value=${this._source.number_energy_price}
@change=${this._numberPriceChanged}
.suffix=${`${this.hass.config.currency}/${unit}`}
.suffix=${`${this.hass.config.currency}/${
this._pickedDisplayUnit || pickableUnit
}`}
>
</ha-textfield>`
: ""}
@ -250,23 +261,25 @@ export class DialogEnergyGasSettings
};
}
private _statisticChanged(ev: CustomEvent<{ value: string }>) {
private async _statisticChanged(ev: CustomEvent<{ value: string }>) {
if (ev.detail.value) {
const entity = this.hass.states[ev.detail.value];
if (entity?.attributes.unit_of_measurement) {
// Wh is normalized to kWh by stats generation
this._unit =
entity.attributes.unit_of_measurement === "Wh"
? "kWh"
: entity.attributes.unit_of_measurement;
this._pickedDisplayUnit = entity.attributes.unit_of_measurement;
} else {
this._pickedDisplayUnit = (
await getStatisticMetadata(this.hass, [ev.detail.value])
)[0]?.display_unit_of_measurement;
}
} else {
this._unit = undefined;
this._pickedDisplayUnit = undefined;
}
if (ev.detail.value.includes(":") && this._costs !== "statistic") {
this._costs = "no-costs";
}
this._source = {
...this._source!,
stat_energy_from: ev.detail.value,
entity_energy_from: ev.detail.value,
};
}

3
src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts
View File

@ -269,9 +269,6 @@ export class DialogEnergyGridFlowSettings
[this._params!.direction === "from"
? "stat_energy_from"
: "stat_energy_to"]: ev.detail.value,
[this._params!.direction === "from"
? "entity_energy_from"
: "entity_energy_to"]: ev.detail.value,
};
}

4
src/panels/config/energy/dialogs/show-dialogs-energy.ts
View File

@ -9,6 +9,7 @@ import {
GasSourceTypeEnergyPreference,
SolarSourceTypeEnergyPreference,
} from "../../../../data/energy";
import { StatisticsMetaData } from "../../../../data/recorder";
export interface EnergySettingsGridFlowDialogParams {
source?:
@ -45,7 +46,8 @@ export interface EnergySettingsBatteryDialogParams {
export interface EnergySettingsGasDialogParams {
source?: GasSourceTypeEnergyPreference;
unit?: EnergyGasUnit;
allowedGasUnitCategory?: EnergyGasUnit;
metadata?: StatisticsMetaData;
saveCallback: (source: GasSourceTypeEnergyPreference) => Promise<void>;
}

22
src/panels/config/energy/ha-config-energy.ts
View File

@ -13,7 +13,7 @@ import {
import {
getStatisticMetadata,
StatisticsMetaData,
} from "../../../data/history";
} from "../../../data/recorder";
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-subpage";
import { haStyle } from "../../../resources/styles";
@ -90,37 +90,37 @@ class HaConfigEnergy extends LitElement {
<ha-energy-grid-settings
.hass=${this.hass}
.preferences=${this._preferences!}
.statsMetadata=${this._statsMetadata!}
.validationResult=${this._validationResult!}
.statsMetadata=${this._statsMetadata}
.validationResult=${this._validationResult}
@value-changed=${this._prefsChanged}
></ha-energy-grid-settings>
<ha-energy-solar-settings
.hass=${this.hass}
.preferences=${this._preferences!}
.statsMetadata=${this._statsMetadata!}
.validationResult=${this._validationResult!}
.statsMetadata=${this._statsMetadata}
.validationResult=${this._validationResult}
.info=${this._info}
@value-changed=${this._prefsChanged}
></ha-energy-solar-settings>
<ha-energy-battery-settings
.hass=${this.hass}
.preferences=${this._preferences!}
.statsMetadata=${this._statsMetadata!}
.validationResult=${this._validationResult!}
.statsMetadata=${this._statsMetadata}
.validationResult=${this._validationResult}
@value-changed=${this._prefsChanged}
></ha-energy-battery-settings>
<ha-energy-gas-settings
.hass=${this.hass}
.preferences=${this._preferences!}
.statsMetadata=${this._statsMetadata!}
.validationResult=${this._validationResult!}
.statsMetadata=${this._statsMetadata}
.validationResult=${this._validationResult}
@value-changed=${this._prefsChanged}
></ha-energy-gas-settings>
<ha-energy-device-settings
.hass=${this.hass}
.preferences=${this._preferences!}
.statsMetadata=${this._statsMetadata!}
.validationResult=${this._validationResult!}
.statsMetadata=${this._statsMetadata}
.validationResult=${this._validationResult}
@value-changed=${this._prefsChanged}
></ha-energy-device-settings>
</div>

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