github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

20240402.0 (#20314)

This commit is contained in:
Bram Kragten 2024-04-02 11:44:05 +02:00 committed by GitHub
parent fd06d434f2 871949e760
commit d3bf0da289
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
40 changed files with 1491 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/src/stubs/area_registry.ts
View File

@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
export const mockAreaRegistry = (
hass: MockHomeAssistant,
data: AreaRegistryEntry[] = []
) => hass.mockWS("config/area_registry/list", () => data);
) => {
hass.mockWS("config/area_registry/list", () => data);
const areas = {};
data.forEach((area) => {
areas[area.area_id] = area;
});
hass.updateHass({ areas });
};

9
demo/src/stubs/device_registry.ts
View File

@ -4,4 +4,11 @@ import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
export const mockDeviceRegistry = (
hass: MockHomeAssistant,
data: DeviceRegistryEntry[] = []
) => hass.mockWS("config/device_registry/list", () => data);
) => {
hass.mockWS("config/device_registry/list", () => data);
const devices = {};
data.forEach((device) => {
devices[device.id] = device;
});
hass.updateHass({ devices });
};

7
demo/src/stubs/floor_registry.ts Normal file
View File

@ -0,0 +1,7 @@
import { FloorRegistryEntry } from "../../../src/data/floor_registry";
import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
export const mockFloorRegistry = (
hass: MockHomeAssistant,
data: FloorRegistryEntry[] = []
) => hass.mockWS("config/floor_registry/list", () => data);

7
demo/src/stubs/label_registry.ts Normal file
View File

@ -0,0 +1,7 @@
import { LabelRegistryEntry } from "../../../src/data/label_registry";
import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
export const mockLabelRegistry = (
hass: MockHomeAssistant,
data: LabelRegistryEntry[] = []
) => hass.mockWS("config/label_registry/list", () => data);

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

@ -17,6 +17,10 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
import type { HomeAssistant } from "../../../../src/types";
import "../../components/demo-black-white-row";
import { FloorRegistryEntry } from "../../../../src/data/floor_registry";
import { LabelRegistryEntry } from "../../../../src/data/label_registry";
import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
const ENTITIES = [
getEntity("alarm_control_panel", "alarm", "disarmed", {
@ -100,7 +104,7 @@ const DEVICES = [
const AREAS: AreaRegistryEntry[] = [
{
area_id: "backyard",
floor_id: null,
floor_id: "ground",
name: "Backyard",
icon: null,
picture: null,
@ -109,7 +113,7 @@ const AREAS: AreaRegistryEntry[] = [
},
{
area_id: "bedroom",
floor_id: null,
floor_id: "first",
name: "Bedroom",
icon: "mdi:bed",
picture: null,
@ -118,7 +122,7 @@ const AREAS: AreaRegistryEntry[] = [
},
{
area_id: "livingroom",
floor_id: null,
floor_id: "ground",
name: "Livingroom",
icon: "mdi:sofa",
picture: null,
@ -127,6 +131,45 @@ const AREAS: AreaRegistryEntry[] = [
},
];
const FLOORS: FloorRegistryEntry[] = [
{
floor_id: "ground",
name: "Ground floor",
level: 0,
icon: null,
aliases: [],
},
{
floor_id: "first",
name: "First floor",
level: 1,
icon: "mdi:numeric-1",
aliases: [],
},
{
floor_id: "second",
name: "Second floor",
level: 2,
icon: "mdi:numeric-2",
aliases: [],
},
];
const LABELS: LabelRegistryEntry[] = [
{
label_id: "energy",
name: "Energy",
icon: null,
color: "yellow",
},
{
label_id: "entertainment",
name: "Entertainment",
icon: "mdi:popcorn",
color: "blue",
},
];
const SCHEMAS: {
name: string;
input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
@ -134,7 +177,12 @@ const SCHEMAS: {
{
name: "One of each",
input: {
label: { name: "Label", selector: { label: {} } },
floor: { name: "Floor", selector: { floor: {} } },
area: { name: "Area", selector: { area: {} } },
device: { name: "Device", selector: { device: {} } },
entity: { name: "Entity", selector: { entity: {} } },
target: { name: "Target", selector: { target: {} } },
state: {
name: "State",
selector: { state: { entity_id: "alarm_control_panel.alarm" } },
@ -143,15 +191,12 @@ const SCHEMAS: {
name: "Attribute",
selector: { attribute: { entity_id: "" } },
},
device: { name: "Device", selector: { device: {} } },
config_entry: {
name: "Integration",
selector: { config_entry: {} },
},
duration: { name: "Duration", selector: { duration: {} } },
addon: { name: "Addon", selector: { addon: {} } },
area: { name: "Area", selector: { area: {} } },
target: { name: "Target", selector: { target: {} } },
number_box: {
name: "Number Box",
selector: {
@ -300,6 +345,8 @@ const SCHEMAS: {
entity: { name: "Entity", selector: { entity: { multiple: true } } },
device: { name: "Device", selector: { device: { multiple: true } } },
area: { name: "Area", selector: { area: { multiple: true } } },
floor: { name: "Floor", selector: { floor: { multiple: true } } },
label: { name: "Label", selector: { label: { multiple: true } } },
select: {
name: "Select Multiple",
selector: {
@ -356,6 +403,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
mockDeviceRegistry(hass, DEVICES);
mockConfigEntries(hass);
mockAreaRegistry(hass, AREAS);
mockFloorRegistry(hass, FLOORS);
mockLabelRegistry(hass, LABELS);
mockHassioSupervisor(hass);
hass.mockWS("auth/sign_path", (params) => params);
hass.mockWS("media_player/browse_media", this._browseMedia);

2
package.json
View File

@ -33,7 +33,7 @@
"@codemirror/legacy-modes": "6.3.3",
"@codemirror/search": "6.5.6",
"@codemirror/state": "6.4.1",
"@codemirror/view": "6.26.0",
"@codemirror/view": "6.26.1",
"@egjs/hammerjs": "2.0.17",
"@formatjs/intl-datetimeformat": "6.12.3",
"@formatjs/intl-displaynames": "6.6.6",

2
pyproject.toml
View File

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

15
src/components/chips/ha-assist-chip.ts
View File

@ -22,14 +22,6 @@ export class HaAssistChip extends MdAssistChip {
);
--md-assist-chip-outline-color: var(--outline-color);
--md-assist-chip-label-text-weight: 400;
--ha-assist-chip-filled-container-color: rgba(
var(--rgb-primary-text-color),
0.15
);
--ha-assist-chip-active-container-color: rgba(
var(--rgb-primary-color),
0.15
);
}
/** Material 3 doesn't have a filled chip, so we have to make our own **/
.filled {
@ -52,10 +44,17 @@ export class HaAssistChip extends MdAssistChip {
margin-inline-end: unset;
margin-inline-start: var(--_icon-label-space);
}
::before {
background: var(--ha-assist-chip-container-color);
opacity: var(--ha-assist-chip-container-opacity);
}
:where(.active)::before {
background: var(--ha-assist-chip-active-container-color);
opacity: var(--ha-assist-chip-active-container-opacity);
}
.label {
font-family: Roboto, sans-serif;
}
`,
];

24
src/components/data-table/ha-data-table.ts
View File

@ -181,6 +181,13 @@ export class HaDataTable extends LitElement {
this._checkedRowsChanged();
}
public selectAll(): void {
this._checkedRows = this._filteredData
.filter((data) => data.selectable !== false)
.map((data) => data[this.id]);
this._checkedRowsChanged();
}
public connectedCallback() {
super.connectedCallback();
if (this._items.length) {
@ -386,7 +393,7 @@ export class HaDataTable extends LitElement {
`;
}
private _keyFunction = (row: DataTableRowData) => row[this.id] || row;
private _keyFunction = (row: DataTableRowData) => row?.[this.id] || row;
private _renderRow = (row: DataTableRowData, index: number) => {
// not sure how this happens...
@ -593,10 +600,7 @@ export class HaDataTable extends LitElement {
private _handleHeaderRowCheckboxClick(ev: Event) {
const checkbox = ev.target as HaCheckbox;
if (checkbox.checked) {
this._checkedRows = this._filteredData
.filter((data) => data.selectable !== false)
.map((data) => data[this.id]);
this._checkedRowsChanged();
this.selectAll();
} else {
this._checkedRows = [];
this._checkedRowsChanged();
@ -623,9 +627,13 @@ export class HaDataTable extends LitElement {
ev
.composedPath()
.find((el) =>
["ha-checkbox", "mwc-button", "ha-button", "ha-assist-chip"].includes(
(el as HTMLElement).localName
)
[
"ha-checkbox",
"mwc-button",
"ha-button",
"ha-icon-button",
"ha-assist-chip",
].includes((el as HTMLElement).localName)
)
) {
return;

89
src/components/ha-button-menu-new.ts Normal file
View File

@ -0,0 +1,89 @@
import { Button } from "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, query } from "lit/decorators";
import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
import type { HaIconButton } from "./ha-icon-button";
import "./ha-menu";
import type { HaMenu } from "./ha-menu";
@customElement("ha-button-menu-new")
export class HaButtonMenuNew extends LitElement {
protected readonly [FOCUS_TARGET];
@property({ type: Boolean }) public disabled = false;
@property() public positioning?: "fixed" | "absolute" | "popover";
@property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
false;
@query("ha-menu", true) private _menu!: HaMenu;
public get items() {
return this._menu.items;
}
public override focus() {
if (this._menu.open) {
this._menu.focus();
} else {
this._triggerButton?.focus();
}
}
protected render(): TemplateResult {
return html`
<div @click=${this._handleClick}>
<slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
</div>
<ha-menu
.positioning=${this.positioning}
.hasOverflow=${this.hasOverflow}
>
<slot></slot>
</ha-menu>
`;
}
private _handleClick(): void {
if (this.disabled) {
return;
}
this._menu.anchorElement = this;
if (this._menu.open) {
this._menu.close();
} else {
this._menu.show();
}
}
private get _triggerButton() {
return this.querySelector(
'ha-icon-button[slot="trigger"], mwc-button[slot="trigger"], ha-assist-chip[slot="trigger"]'
) as HaIconButton | Button | null;
}
private _setTriggerAria() {
if (this._triggerButton) {
this._triggerButton.ariaHasPopup = "menu";
}
}
static get styles(): CSSResultGroup {
return css`
:host {
display: inline-block;
position: relative;
}
::slotted([disabled]) {
color: var(--disabled-text-color);
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-button-menu-new": HaButtonMenuNew;
}
}

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

@ -6,6 +6,7 @@ import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import "./ha-select";
import "./ha-list-item";
import { HomeAssistant } from "../types";
import { LocalizeKeys } from "../common/translations/localize";
@ -53,18 +54,18 @@ export class HaColorPicker extends LitElement {
`
: nothing}
${this.defaultColor
? html` <mwc-list-item value="default">
? html` <ha-list-item value="default">
${this.hass.localize(`ui.components.color-picker.default_color`)}
</mwc-list-item>`
</ha-list-item>`
: nothing}
${Array.from(THEME_COLORS).map(
(color) => html`
<mwc-list-item .value=${color} graphic="icon">
<ha-list-item .value=${color} graphic="icon">
${this.hass.localize(
`ui.components.color-picker.colors.${color}` as LocalizeKeys
) || color}
<span slot="graphic">${this.renderColorCircle(color)}</span>
</mwc-list-item>
</ha-list-item>
`
)}
</ha-select>

2
src/components/ha-filter-blueprints.ts
View File

@ -50,7 +50,7 @@ export class HaFilterBlueprints extends LitElement {
? nothing
: html`<ha-check-list-item
.value=${id}
.selected=${this.value?.includes(id)}
.selected=${(this.value || []).includes(id)}
>
${blueprint.metadata.name || id}
</ha-check-list-item>`

7
src/components/ha-filter-devices.ts
View File

@ -57,7 +57,8 @@ export class HaFilterDevices extends LitElement {
${this._shouldRender
? html`<mwc-list class="ha-scrollbar">
<lit-virtualizer
.items=${this._devices(this.hass.devices)}
.items=${this._devices(this.hass.devices, this.value)}
.keyFunction=${this._keyFunction}
.renderItem=${this._renderItem}
@click=${this._handleItemClick}
>
@ -68,6 +69,8 @@ export class HaFilterDevices extends LitElement {
`;
}
private _keyFunction = (device) => device?.id;
private _renderItem = (device) =>
html`<ha-check-list-item
.value=${device.id}
@ -109,7 +112,7 @@ export class HaFilterDevices extends LitElement {
this.expanded = ev.detail.expanded;
}
private _devices = memoizeOne((devices: HomeAssistant["devices"]) => {
private _devices = memoizeOne((devices: HomeAssistant["devices"], _value) => {
const values = Object.values(devices);
return values.sort((a, b) =>
stringCompare(

11
src/components/ha-filter-entities.ts
View File

@ -59,7 +59,12 @@ export class HaFilterEntities extends LitElement {
? html`
<mwc-list class="ha-scrollbar">
<lit-virtualizer
.items=${this._entities(this.hass.states, this.type)}
.items=${this._entities(
this.hass.states,
this.type,
this.value
)}
.keyFunction=${this._keyFunction}
.renderItem=${this._renderItem}
@click=${this._handleItemClick}
>
@ -81,6 +86,8 @@ export class HaFilterEntities extends LitElement {
}
}
private _keyFunction = (entity) => entity?.entity_id;
private _renderItem = (entity) =>
html`<ha-check-list-item
.value=${entity.entity_id}
@ -119,7 +126,7 @@ export class HaFilterEntities extends LitElement {
}
private _entities = memoizeOne(
(states: HomeAssistant["states"], type: this["type"]) => {
(states: HomeAssistant["states"], type: this["type"], _value) => {
const values = Object.values(states);
return values
.filter(

42
src/components/ha-filter-integrations.ts
View File

@ -1,15 +1,16 @@
import { SelectedDetail } from "@material/mwc-list";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import {
fetchIntegrationManifests,
IntegrationManifest,
} from "../data/integration";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-domain-icon";
@customElement("ha-filter-integrations")
@ -47,11 +48,15 @@ export class HaFilterIntegrations extends LitElement {
multi
class="ha-scrollbar"
>
${this._integrations(this._manifests).map(
${repeat(
this._integrations(this._manifests, this.value),
(i) => i.domain,
(integration) =>
html`<ha-check-list-item
.value=${integration.domain}
.selected=${this.value?.includes(integration.domain)}
.selected=${(this.value || []).includes(
integration.domain
)}
graphic="icon"
>
<ha-domain-icon
@ -92,26 +97,27 @@ export class HaFilterIntegrations extends LitElement {
this._manifests = await fetchIntegrationManifests(this.hass);
}
private _integrations = memoizeOne((manifest: IntegrationManifest[]) =>
manifest
.filter(
(mnfst) =>
!mnfst.integration_type ||
!["entity", "system", "hardware"].includes(mnfst.integration_type)
)
.sort((a, b) =>
stringCompare(
a.name || a.domain,
b.name || b.domain,
this.hass.locale.language
private _integrations = memoizeOne(
(manifest: IntegrationManifest[], _value) =>
manifest
.filter(
(mnfst) =>
!mnfst.integration_type ||
!["entity", "system", "hardware"].includes(mnfst.integration_type)
)
.sort((a, b) =>
stringCompare(
a.name || a.domain,
b.name || b.domain,
this.hass.locale.language
)
)
)
);
private async _integrationsSelected(
ev: CustomEvent<SelectedDetail<Set<number>>>
) {
const integrations = this._integrations(this._manifests!);
const integrations = this._integrations(this._manifests!, this.value);
if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", {

49
src/components/ha-filter-labels.ts
View File

@ -1,9 +1,10 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
import { mdiPlus } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { mdiPlus } from "@mdi/js";
import { repeat } from "lit/directives/repeat";
import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event";
import {
@ -12,13 +13,13 @@ import {
subscribeLabelRegistry,
} from "../data/label_registry";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-expansion-panel";
import "./ha-icon";
import "./ha-label";
import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
@customElement("ha-filter-labels")
export class HaFilterLabels extends SubscribeMixin(LitElement) {
@ -63,26 +64,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
class="ha-scrollbar"
multi
>
${this._labels.map((label) => {
const color = label.color
? computeCssColor(label.color)
: undefined;
return html`<ha-check-list-item
.value=${label.label_id}
.selected=${this.value?.includes(label.label_id)}
hasMeta
>
<ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon
? html`<ha-icon
slot="icon"
.icon=${label.icon}
></ha-icon>`
: nothing}
${label.name}
</ha-label>
</ha-check-list-item>`;
})}
${repeat(
this._labels,
(label) => label.label_id,
(label) => {
const color = label.color
? computeCssColor(label.color)
: undefined;
return html`<ha-check-list-item
.value=${label.label_id}
.selected=${(this.value || []).includes(label.label_id)}
hasMeta
>
<ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon
? html`<ha-icon
slot="icon"
.icon=${label.icon}
></ha-icon>`
: nothing}
${label.name}
</ha-label>
</ha-check-list-item>`;
}
)}
</mwc-list>
`
: nothing}

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

@ -274,7 +274,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
if (areaIds) {
const floorAreaLookup = getFloorAreaLookup(areas);
outputFloors = outputFloors.filter((floor) =>
floorAreaLookup[floor.floor_id].some((area) =>
floorAreaLookup[floor.floor_id]?.some((area) =>
areaIds!.includes(area.area_id)
)
);

169
src/components/ha-floors-picker.ts Normal file
View File

@ -0,0 +1,169 @@
import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import type { HomeAssistant } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-floor-picker";
@customElement("ha-floors-picker")
export class HaFloorsPicker extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public label?: string;
@property({ type: Array }) public value?: string[];
@property() public helper?: string;
@property() public placeholder?: string;
@property({ type: Boolean, attribute: "no-add" })
public noAdd = false;
/**
* Show only floors with entities from specific domains.
* @type {Array}
* @attr include-domains
*/
@property({ type: Array, attribute: "include-domains" })
public includeDomains?: string[];
/**
* Show no floors with entities of these domains.
* @type {Array}
* @attr exclude-domains
*/
@property({ type: Array, attribute: "exclude-domains" })
public excludeDomains?: string[];
/**
* Show only floors with entities of these device classes.
* @type {Array}
* @attr include-device-classes
*/
@property({ type: Array, attribute: "include-device-classes" })
public includeDeviceClasses?: string[];
@property({ attribute: false })
public deviceFilter?: HaDevicePickerDeviceFilterFunc;
@property({ attribute: false })
public entityFilter?: (entity: HassEntity) => boolean;
@property({ attribute: "picked-floor-label" })
public pickedFloorLabel?: string;
@property({ attribute: "pick-floor-label" })
public pickFloorLabel?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = false;
protected render() {
if (!this.hass) {
return nothing;
}
const currentFloors = this._currentFloors;
return html`
${currentFloors.map(
(floor) => html`
<div>
<ha-floor-picker
.curValue=${floor}
.noAdd=${this.noAdd}
.hass=${this.hass}
.value=${floor}
.label=${this.pickedFloorLabel}
.includeDomains=${this.includeDomains}
.excludeDomains=${this.excludeDomains}
.includeDeviceClasses=${this.includeDeviceClasses}
.deviceFilter=${this.deviceFilter}
.entityFilter=${this.entityFilter}
.disabled=${this.disabled}
@value-changed=${this._floorChanged}
></ha-floor-picker>
</div>
`
)}
<div>
<ha-floor-picker
.noAdd=${this.noAdd}
.hass=${this.hass}
.label=${this.pickFloorLabel}
.helper=${this.helper}
.includeDomains=${this.includeDomains}
.excludeDomains=${this.excludeDomains}
.includeDeviceClasses=${this.includeDeviceClasses}
.deviceFilter=${this.deviceFilter}
.entityFilter=${this.entityFilter}
.disabled=${this.disabled}
.placeholder=${this.placeholder}
.required=${this.required && !currentFloors.length}
@value-changed=${this._addFloor}
.excludeFloors=${currentFloors}
></ha-floor-picker>
</div>
`;
}
private get _currentFloors(): string[] {
return this.value || [];
}
private async _updateFloors(floors) {
this.value = floors;
fireEvent(this, "value-changed", {
value: floors,
});
}
private _floorChanged(ev: CustomEvent) {
ev.stopPropagation();
const curValue = (ev.currentTarget as any).curValue;
const newValue = ev.detail.value;
if (newValue === curValue) {
return;
}
const currentFloors = this._currentFloors;
if (!newValue || currentFloors.includes(newValue)) {
this._updateFloors(currentFloors.filter((ent) => ent !== curValue));
return;
}
this._updateFloors(
currentFloors.map((ent) => (ent === curValue ? newValue : ent))
);
}
private _addFloor(ev: CustomEvent) {
ev.stopPropagation();
const toAdd = ev.detail.value;
if (!toAdd) {
return;
}
(ev.currentTarget as any).value = "";
const currentFloors = this._currentFloors;
if (currentFloors.includes(toAdd)) {
return;
}
this._updateFloors([...currentFloors, toAdd]);
}
static override styles = css`
div {
margin-top: 8px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-floors-picker": HaFloorsPicker;
}
}

37
src/components/ha-menu-item.ts Normal file
View File

@ -0,0 +1,37 @@
import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { MdMenuItem } from "@material/web/menu/menu-item";
@customElement("ha-menu-item")
export class HaMenuItem extends MdMenuItem {
static override styles: CSSResult[] = [
...MdMenuItem.styles,
css`
:host {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-on-primary: var(--primary-text-color);
--md-sys-color-secondary: var(--secondary-text-color);
--md-sys-color-surface: var(--card-background-color);
--md-sys-color-on-surface: var(--primary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-secondary-container: rgba(
var(--rgb-primary-color),
0.15
);
--md-sys-color-on-secondary-container: var(--text-primary-color);
--mdc-icon-size: 16px;
--md-sys-color-on-primary-container: var(--primary-text-color);
--md-sys-color-on-secondary-container: var(--primary-text-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-menu-item": HaMenuItem;
}
}

22
src/components/ha-menu.ts Normal file
View File

@ -0,0 +1,22 @@
import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { MdMenu } from "@material/web/menu/menu";
@customElement("ha-menu")
export class HaMenu extends MdMenu {
static override styles: CSSResult[] = [
...MdMenu.styles,
css`
:host {
--md-sys-color-surface-container: var(--card-background-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-menu": HaMenu;
}
}

3
src/components/ha-outlined-text-field.ts
View File

@ -27,6 +27,9 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
--md-outlined-field-focus-outline-width: 1px;
--mdc-icon-size: var(--md-input-chip-icon-size, 18px);
}
.input {
font-family: Roboto, sans-serif;
}
`,
];
}

16
src/components/ha-selector/ha-selector-area.ts
View File

@ -87,8 +87,12 @@ export class HaAreaSelector extends LitElement {
.label=${this.label}
.helper=${this.helper}
no-add
.deviceFilter=${this._filterDevices}
.entityFilter=${this._filterEntities}
.deviceFilter=${this.selector.area?.device
? this._filterDevices
: undefined}
.entityFilter=${this.selector.area?.entity
? this._filterEntities
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-area-picker>
@ -102,8 +106,12 @@ export class HaAreaSelector extends LitElement {
.helper=${this.helper}
.pickAreaLabel=${this.label}
no-add
.deviceFilter=${this._filterDevices}
.entityFilter=${this._filterEntities}
.deviceFilter=${this.selector.area?.device
? this._filterDevices
: undefined}
.entityFilter=${this.selector.area?.entity
? this._filterEntities
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-areas-picker>

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

@ -0,0 +1,153 @@
import { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, PropertyValues, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { ensureArray } from "../../common/array/ensure-array";
import type { DeviceRegistryEntry } from "../../data/device_registry";
import { getDeviceIntegrationLookup } from "../../data/device_registry";
import { fireEvent } from "../../common/dom/fire_event";
import {
EntitySources,
fetchEntitySourcesWithCache,
} from "../../data/entity_sources";
import type { FloorSelector } from "../../data/selector";
import {
filterSelectorDevices,
filterSelectorEntities,
} from "../../data/selector";
import { HomeAssistant } from "../../types";
import "../ha-floor-picker";
import "../ha-floors-picker";
@customElement("ha-selector-floor")
export class HaFloorSelector extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public selector!: FloorSelector;
@property() public value?: any;
@property() public label?: string;
@property() public helper?: string;
@property({ type: Boolean }) public disabled = false;
@property({ type: Boolean }) public required = true;
@state() private _entitySources?: EntitySources;
private _deviceIntegrationLookup = memoizeOne(getDeviceIntegrationLookup);
private _hasIntegration(selector: FloorSelector) {
return (
(selector.floor?.entity &&
ensureArray(selector.floor.entity).some(
(filter) => filter.integration
)) ||
(selector.floor?.device &&
ensureArray(selector.floor.device).some((device) => device.integration))
);
}
protected willUpdate(changedProperties: PropertyValues): void {
if (changedProperties.has("selector") && this.value !== undefined) {
if (this.selector.floor?.multiple && !Array.isArray(this.value)) {
this.value = [this.value];
fireEvent(this, "value-changed", { value: this.value });
} else if (!this.selector.floor?.multiple && Array.isArray(this.value)) {
this.value = this.value[0];
fireEvent(this, "value-changed", { value: this.value });
}
}
}
protected updated(changedProperties: PropertyValues): void {
if (
changedProperties.has("selector") &&
this._hasIntegration(this.selector) &&
!this._entitySources
) {
fetchEntitySourcesWithCache(this.hass).then((sources) => {
this._entitySources = sources;
});
}
}
protected render() {
if (this._hasIntegration(this.selector) && !this._entitySources) {
return nothing;
}
if (!this.selector.floor?.multiple) {
return html`
<ha-floor-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
.helper=${this.helper}
no-add
.deviceFilter=${this.selector.floor?.device
? this._filterDevices
: undefined}
.entityFilter=${this.selector.floor?.entity
? this._filterEntities
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-floor-picker>
`;
}
return html`
<ha-floors-picker
.hass=${this.hass}
.value=${this.value}
.helper=${this.helper}
.pickFloorLabel=${this.label}
no-add
.deviceFilter=${this.selector.floor?.device
? this._filterDevices
: undefined}
.entityFilter=${this.selector.floor?.entity
? this._filterEntities
: undefined}
.disabled=${this.disabled}
.required=${this.required}
></ha-floors-picker>
`;
}
private _filterEntities = (entity: HassEntity): boolean => {
if (!this.selector.floor?.entity) {
return true;
}
return ensureArray(this.selector.floor.entity).some((filter) =>
filterSelectorEntities(filter, entity, this._entitySources)
);
};
private _filterDevices = (device: DeviceRegistryEntry): boolean => {
if (!this.selector.floor?.device) {
return true;
}
const deviceIntegrations = this._entitySources
? this._deviceIntegrationLookup(
this._entitySources,
Object.values(this.hass.entities)
)
: undefined;
return ensureArray(this.selector.floor.device).some((filter) =>
filterSelectorDevices(filter, device, deviceIntegrations)
);
};
}
declare global {
interface HTMLElementTagNameMap {
"ha-selector-floor": HaFloorSelector;
}
}

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

@ -30,6 +30,7 @@ const LOAD_ELEMENTS = {
entity: () => import("./ha-selector-entity"),
statistic: () => import("./ha-selector-statistic"),
file: () => import("./ha-selector-file"),
floor: () => import("./ha-selector-floor"),
label: () => import("./ha-selector-label"),
language: () => import("./ha-selector-language"),
navigation: () => import("./ha-selector-navigation"),

38
src/components/ha-sub-menu.ts Normal file
View File

@ -0,0 +1,38 @@
import { customElement } from "lit/decorators";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { MdSubMenu } from "@material/web/menu/sub-menu";
@customElement("ha-sub-menu")
// @ts-expect-error
export class HaSubMenu extends MdSubMenu {
static override styles: CSSResult[] = [
MdSubMenu.styles,
css`
:host {
--ha-icon-display: block;
--md-sys-color-primary: var(--primary-text-color);
--md-sys-color-on-primary: var(--primary-text-color);
--md-sys-color-secondary: var(--secondary-text-color);
--md-sys-color-surface: var(--card-background-color);
--md-sys-color-on-surface: var(--primary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-sys-color-secondary-container: rgba(
var(--rgb-primary-color),
0.15
);
--md-sys-color-on-secondary-container: var(--text-primary-color);
--mdc-icon-size: 16px;
--md-sys-color-on-primary-container: var(--primary-text-color);
--md-sys-color-on-secondary-container: var(--primary-text-color);
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-sub-menu": HaSubMenu;
}
}

9
src/data/selector.ts
View File

@ -31,6 +31,7 @@ export type Selector =
| DateSelector
| DateTimeSelector
| DeviceSelector
| FloorSelector
| LegacyDeviceSelector
| DurationSelector
| EntitySelector
@ -170,6 +171,14 @@ export interface DeviceSelector {
} | null;
}
export interface FloorSelector {
floor: {
entity?: EntitySelectorFilter | readonly EntitySelectorFilter[];
device?: DeviceSelectorFilter | readonly DeviceSelectorFilter[];
multiple?: boolean;
} | null;
}
export interface LegacyDeviceSelector {
device: DeviceSelector["device"] & {
/**

5
src/layouts/hass-subpage.ts
View File

@ -142,9 +142,12 @@ class HassSubpage extends LitElement {
right: calc(16px + env(safe-area-inset-right));
inset-inline-end: calc(16px + env(safe-area-inset-right));
inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
:host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom));

148
src/layouts/hass-tabs-subpage-data-table.ts
View File

@ -1,15 +1,13 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button/mwc-button";
import "@material/web/menu/menu";
import type { MdMenu } from "@material/web/menu/menu";
import "@material/web/menu/menu-item";
import "@material/web/divider/divider";
import {
mdiArrowDown,
mdiArrowUp,
mdiClose,
mdiFilterRemove,
mdiFilterVariant,
mdiFilterVariantRemove,
mdiFormatListChecks,
mdiMenuDown,
} from "@mdi/js";
@ -34,7 +32,10 @@ import type {
HaDataTable,
SortingDirection,
} from "../components/data-table/ha-data-table";
import "../components/ha-button-menu-new";
import "../components/ha-dialog";
import { HaMenu } from "../components/ha-menu";
import "../components/ha-menu-item";
import "../components/search-input-outlined";
import type { HomeAssistant, Route } from "../types";
import "./hass-tabs-subpage";
@ -177,9 +178,9 @@ export class HaTabsSubpageDataTable extends LitElement {
@query("ha-data-table", true) private _dataTable!: HaDataTable;
@query("#group-by-menu") private _groupByMenu!: MdMenu;
@query("#group-by-menu") private _groupByMenu!: HaMenu;
@query("#sort-by-menu") private _sortByMenu!: MdMenu;
@query("#sort-by-menu") private _sortByMenu!: HaMenu;
private _showPaneController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width > 750,
@ -227,6 +228,9 @@ export class HaTabsSubpageDataTable extends LitElement {
class="has-dropdown select-mode-chip"
.active=${this._selectMode}
@click=${this._enableSelectMode}
.title=${localize(
"ui.components.subpage-data-table.enter_selection_mode"
)}
>
<ha-svg-icon slot="icon" .path=${mdiFormatListChecks}></ha-svg-icon>
</ha-assist-chip>`
@ -252,8 +256,11 @@ export class HaTabsSubpageDataTable extends LitElement {
id="sort-by-anchor"
@click=${this._toggleSortBy}
>
<ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon
></ha-assist-chip>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon>
</ha-assist-chip>
`
: nothing;
@ -290,11 +297,45 @@ export class HaTabsSubpageDataTable extends LitElement {
>
${this._selectMode
? html`<div class="selection-bar" slot="toolbar">
<div class="center-vertical">
<div class="selection-controls">
<ha-icon-button
.path=${mdiClose}
@click=${this._disableSelectMode}
.label=${localize(
"ui.components.subpage-data-table.exit_selection_mode"
)}
></ha-icon-button>
<ha-button-menu-new positioning="absolute">
<ha-assist-chip
.label=${localize(
"ui.components.subpage-data-table.select"
)}
slot="trigger"
>
<ha-svg-icon
slot="icon"
.path=${mdiFormatListChecks}
></ha-svg-icon>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon
></ha-assist-chip>
<ha-menu-item .value=${undefined} @click=${this._selectAll}
>${localize("ui.components.subpage-data-table.select_all")}
</ha-menu-item>
<ha-menu-item .value=${undefined} @click=${this._selectNone}
>${localize("ui.components.subpage-data-table.select_none")}
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item
.value=${undefined}
@click=${this._disableSelectMode}
>${localize(
"ui.components.subpage-data-table.close_select_mode"
)}
</ha-menu-item>
</ha-button-menu-new>
<p>
${localize("ui.components.subpage-data-table.selected", {
selected: this.selected || "0",
@ -318,6 +359,9 @@ export class HaTabsSubpageDataTable extends LitElement {
slot="navigationIcon"
.path=${mdiClose}
@click=${this._toggleFilters}
.label=${localize(
"ui.components.subpage-data-table.close_filter"
)}
></ha-icon-button>
<span slot="title"
>${localize(
@ -326,7 +370,11 @@ export class HaTabsSubpageDataTable extends LitElement {
>
<ha-icon-button
slot="actionItems"
.path=${mdiFilterRemove}
@click=${this._clearFilters}
.path=${mdiFilterVariantRemove}
.label=${localize(
"ui.components.subpage-data-table.clear_filter"
)}
></ha-icon-button>
</ha-dialog-header>
<div class="filter-dialog-content">
@ -347,8 +395,11 @@ export class HaTabsSubpageDataTable extends LitElement {
></ha-svg-icon>
</ha-assist-chip>
<ha-icon-button
.path=${mdiFilterRemove}
.path=${mdiFilterVariantRemove}
@click=${this._clearFilters}
.label=${localize(
"ui.components.subpage-data-table.clear_filter"
)}
></ha-icon-button>
</div>
<div class="pane-content">
@ -409,39 +460,39 @@ export class HaTabsSubpageDataTable extends LitElement {
</ha-data-table>`}
<div slot="fab"><slot name="fab"></slot></div>
</hass-tabs-subpage>
<md-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
<ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
column.groupable
? html`
<md-menu-item
<ha-menu-item
.value=${id}
@click=${this._handleGroupBy}
.selected=${id === this._groupColumn}
class=${classMap({ selected: id === this._groupColumn })}
>
${column.title || column.label}
</md-menu-item>
</ha-menu-item>
`
: nothing
)}
<li divider role="separator"></li>
<md-menu-item
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item
.value=${undefined}
@click=${this._handleGroupBy}
.selected=${this._groupColumn === undefined}
class=${classMap({ selected: this._groupColumn === undefined })}
>${localize(
"ui.components.subpage-data-table.dont_group_by"
)}</md-menu-item
>
</md-menu>
<md-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
${localize("ui.components.subpage-data-table.dont_group_by")}
</ha-menu-item>
</ha-menu>
<ha-menu anchor="sort-by-anchor" id="sort-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
column.sortable
? html`
<md-menu-item
<ha-menu-item
.value=${id}
@click=${this._handleSortBy}
keep-open
.selected=${id === this._sortColumn}
class=${classMap({ selected: id === this._sortColumn })}
>
@ -456,11 +507,11 @@ export class HaTabsSubpageDataTable extends LitElement {
`
: nothing}
${column.title || column.label}
</md-menu-item>
</ha-menu-item>
`
: nothing
)}
</md-menu>
</ha-menu>
`;
}
@ -478,8 +529,6 @@ export class HaTabsSubpageDataTable extends LitElement {
}
private _handleSortBy(ev) {
ev.stopPropagation();
ev.preventDefault();
const columnId = ev.currentTarget.value;
if (!this._sortDirection || this._sortColumn !== columnId) {
this._sortDirection = "asc";
@ -504,6 +553,14 @@ export class HaTabsSubpageDataTable extends LitElement {
this._dataTable.clearSelection();
}
private _selectAll() {
this._dataTable.selectAll();
}
private _selectNone() {
this._dataTable.clearSelection();
}
private _handleSearchChange(ev: CustomEvent) {
if (this.filter === ev.detail.value) {
return;
@ -637,6 +694,8 @@ export class HaTabsSubpageDataTable extends LitElement {
position: absolute;
top: -4px;
right: -4px;
inset-inline-end: -4px;
inset-inline-start: initial;
min-width: 16px;
box-sizing: border-box;
border-radius: 50%;
@ -669,21 +728,31 @@ export class HaTabsSubpageDataTable extends LitElement {
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
--ha-assist-chip-container-color: var(--primary-background-color);
}
.selection-controls {
display: flex;
align-items: center;
gap: 8px;
}
.selection-controls p {
margin-left: 8px;
margin-inline-start: 8px;
margin-inline-end: initial;
}
.center-vertical {
display: flex;
align-items: center;
gap: 8px;
}
.relative {
position: relative;
}
.selection-bar p {
margin-left: 16px;
}
ha-assist-chip {
--ha-assist-chip-container-shape: 10px;
}
@ -712,23 +781,10 @@ export class HaTabsSubpageDataTable extends LitElement {
display: flex;
flex-direction: column;
}
/* TODO: Migrate to ha-menu and ha-menu-item */
md-menu {
--md-menu-container-color: var(--card-background-color);
}
md-menu-item {
--md-menu-item-label-text-color: var(--primary-text-color);
--mdc-icon-size: 16px;
--md-menu-item-selected-container-color: rgba(
var(--rgb-primary-color),
0.15
);
}
md-menu-item.selected {
--md-menu-item-label-text-color: var(--primary-color);
}
#sort-by-anchor,
#group-by-anchor {
#group-by-anchor,
ha-button-menu-new ha-assist-chip {
--md-assist-chip-trailing-space: 8px;
}
`;

4
src/layouts/hass-tabs-subpage.ts
View File

@ -344,6 +344,10 @@ class HassTabsSubpage extends LitElement {
inset-inline-start: initial;
bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
:host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom));

2
src/managers/notification-manager.ts
View File

@ -27,7 +27,7 @@ class NotificationManager extends LitElement {
@query("ha-toast") private _toast!: HaToast | undefined;
public async showDialog(parameters: ShowToastParams) {
if (this._parameters) {
if (this._parameters && this._parameters.message !== parameters.message) {
this._parameters = undefined;
await this.updateComplete;
}

3
src/panels/config/areas/dialog-floor-registry-detail.ts
View File

@ -213,6 +213,9 @@ class DialogFloorDetail extends LitElement {
display: block;
margin-bottom: 16px;
}
ha-floor-icon {
color: var(--secondary-text-color);
}
`,
];
}

66
src/panels/config/areas/ha-config-areas-dashboard.ts
View File

@ -23,9 +23,11 @@ import "../../../components/ha-fab";
import "../../../components/ha-floor-icon";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
import "../../../components/ha-sortable";
import {
AreaRegistryEntry,
createAreaRegistryEntry,
updateAreaRegistryEntry,
} from "../../../data/area_registry";
import {
FloorRegistryEntry,
@ -50,6 +52,10 @@ import {
} from "./show-dialog-area-registry-detail";
import { showFloorRegistryDetailDialog } from "./show-dialog-floor-registry-detail";
const UNASSIGNED_PATH = ["__unassigned__"];
const SORT_OPTIONS = { sort: false, delay: 500, delayOnTouchOnly: true };
@customElement("ha-config-areas-dashboard")
export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@ -187,13 +193,22 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
>
</ha-button-menu>
</div>
<div class="areas">
${floor.areas.map((area) => this._renderArea(area))}
</div>
<ha-sortable
handle-selector="a"
draggable-selector="a"
@item-moved=${this._areaMoved}
group="floor"
.options=${SORT_OPTIONS}
.path=${[floor.floor_id]}
>
<div class="areas">
${floor.areas.map((area) => this._renderArea(area))}
</div>
</ha-sortable>
</div>`
)}
${areasAndFloors?.unassisgnedAreas.length
? html`<div class="unassigned">
? html`<div class="floor">
<div class="header">
<h2>
${this.hass.localize(
@ -201,11 +216,20 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
)}
</h2>
</div>
<div class="areas">
${areasAndFloors?.unassisgnedAreas.map((area) =>
this._renderArea(area)
)}
</div>
<ha-sortable
handle-selector="a"
draggable-selector="a"
@item-moved=${this._areaMoved}
group="floor"
.options=${SORT_OPTIONS}
.path=${UNASSIGNED_PATH}
>
<div class="areas">
${areasAndFloors?.unassisgnedAreas.map((area) =>
this._renderArea(area)
)}
</div>
</ha-sortable>
</div>`
: nothing}
</div>
@ -281,6 +305,29 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
loadAreaRegistryDetailDialog();
}
private async _areaMoved(ev) {
const areasAndFloors = this._processAreas(
this.hass.areas,
this.hass.devices,
this.hass.entities,
this._floors!
);
let area: AreaRegistryEntry;
if (ev.detail.oldPath === UNASSIGNED_PATH) {
area = areasAndFloors.unassisgnedAreas[ev.detail.oldIndex];
} else {
const oldFloor = areasAndFloors.floors!.find(
(floor) => floor.floor_id === ev.detail.oldPath[0]
);
area = oldFloor!.areas[ev.detail.oldIndex];
}
await updateAreaRegistryEntry(this.hass, area.area_id, {
floor_id:
ev.detail.newPath === UNASSIGNED_PATH ? null : ev.detail.newPath[0],
});
}
private _handleFloorAction(ev: CustomEvent<ActionDetail>) {
const floor = (ev.currentTarget as any).floor;
switch (ev.detail.index) {
@ -424,7 +471,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
}
.floor {
--primary-color: var(--secondary-text-color);
margin-inline-end: 8px;
}
.warning {
color: var(--error-color);

2
src/panels/config/automation/add-automation-element-dialog.ts
View File

@ -556,7 +556,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
></ha-svg-icon
><ha-svg-icon slot="end" .path=${mdiPlus}></ha-svg-icon>
</ha-list-item-new>
<md-divider></md-divider>`
<md-divider role="separator" tabindex="-1"></md-divider>`
: ""}
${repeat(
items,

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

@ -1,16 +1,23 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/web/divider/divider";
import {
mdiChevronRight,
mdiCog,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiPlay,
mdiPlayCircleOutline,
mdiPlus,
mdiRobotHappy,
mdiStopCircleOutline,
mdiTag,
mdiToggleSwitch,
mdiToggleSwitchOffOutline,
mdiTransitConnection,
} from "@mdi/js";
import { differenceInDays } from "date-fns/esm";
@ -24,9 +31,10 @@ import {
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { isComponentLoaded } from "../../../common/config/is_component_loaded";
import { formatShortDateTime } from "../../../common/datetime/format_date_time";
import { relativeTime } from "../../../common/datetime/relative_time";
@ -38,6 +46,7 @@ import "../../../components/chips/ha-assist-chip";
import type {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/entity/ha-entity-toggle";
@ -50,6 +59,9 @@ import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-labels";
import "../../../components/ha-icon-button";
import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-menu";
import "../../../components/ha-menu-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import {
AutomationEntity,
@ -66,7 +78,11 @@ import {
} from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context";
import { UNAVAILABLE } from "../../../data/entity";
import { EntityRegistryEntry } from "../../../data/entity_registry";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import {
LabelRegistryEntry,
subscribeLabelRegistry,
@ -79,11 +95,13 @@ import {
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { configSections } from "../ha-panel-config";
import { showNewAutomationDialog } from "./show-dialog-new-automation";
import type { HaMenu } from "../../../components/ha-menu";
type AutomationItem = AutomationEntity & {
name: string;
@ -116,6 +134,8 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
@state() private _expandedFilter?: string;
@state() private _selected: string[] = [];
@state()
_categories!: CategoryRegistryEntry[];
@ -126,6 +146,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
@state() private _overflowAutomation?: AutomationItem;
@query("#overflow-menu") private _overflowMenu!: HaMenu;
private _automations = memoizeOne(
(
automations: AutomationEntity[],
@ -274,82 +298,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
columns.actions = {
title: "",
width: "64px",
type: "overflow-menu",
type: "icon-button",
template: (automation) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiInformationOutline,
label: this.hass.localize(
"ui.panel.config.automation.editor.show_info"
),
action: () => this._showInfo(automation),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.automation.picker.${automation.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(automation),
},
{
path: mdiPlay,
label: this.hass.localize(
"ui.panel.config.automation.editor.run"
),
action: () => this._runActions(automation),
},
{
path: mdiTransitConnection,
label: this.hass.localize(
"ui.panel.config.automation.editor.show_trace"
),
action: () => this._showTrace(automation),
},
{
divider: true,
},
{
path: mdiContentDuplicate,
label: this.hass.localize(
"ui.panel.config.automation.picker.duplicate"
),
action: () => this.duplicate(automation),
},
{
path:
automation.state === "off"
? mdiPlayCircleOutline
: mdiStopCircleOutline,
label:
automation.state === "off"
? this.hass.localize(
"ui.panel.config.automation.editor.enable"
)
: this.hass.localize(
"ui.panel.config.automation.editor.disable"
),
action: () => this._toggle(automation),
},
{
label: this.hass.localize(
"ui.panel.config.automation.picker.delete"
),
path: mdiDelete,
action: () => this._deleteConfirm(automation),
warning: true,
},
]}
>
</ha-icon-overflow-menu>
<ha-icon-button
.automation=${automation}
.label=${this.hass.localize("ui.common.overflow_menu")}
.path=${mdiDotsVertical}
@click=${this._showOverflowMenu}
></ha-icon-button>
`,
};
return columns;
}
);
private _showOverflowMenu = (ev) => {
if (
this._overflowMenu.open &&
ev.target === this._overflowMenu.anchorElement
) {
this._overflowMenu.close();
return;
}
this._overflowAutomation = ev.target.automation;
this._overflowMenu.anchorElement = ev.target;
this._overflowMenu.show();
};
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeCategoryRegistry(
@ -366,6 +341,40 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
protected render(): TemplateResult {
const categoryItems = html`${this._categories?.map(
(category) =>
html`<ha-menu-item
.value=${category.category_id}
@click=${this._handleBulkCategory}
>
${category.icon
? html`<ha-icon slot="start" .icon=${category.icon}></ha-icon>`
: html`<ha-svg-icon slot="start" .path=${mdiTag}></ha-svg-icon>`}
<div slot="headline">${category.name}</div>
</ha-menu-item>`
)}
<ha-menu-item .value=${null} @click=${this._handleBulkCategory}>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.no_category"
)}
</div>
</ha-menu-item>`;
const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
return html`<ha-menu-item
.value=${label.label_id}
@click=${this._handleBulkLabel}
>
<ha-label style=${color ? `--color: ${color}` : ""}>
${label.icon
? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
: nothing}
${label.name}
</ha-label>
</ha-menu-item>`;
})}`;
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@ -374,10 +383,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
id="entity_id"
.route=${this.route}
.tabs=${configSections.automations}
selectable
.selected=${this._selected.length}
@selection-changed=${this._handleSelectionChanged}
hasFilters
.filters=${Object.values(this._filters).filter(
(filter) => filter.value?.length
).length}
.filters=${
Object.values(this._filters).filter((filter) => filter.value?.length)
.length
}
.columns=${this._columns(
this.narrow,
this.hass.localize,
@ -466,36 +479,156 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-blueprints>
${!this.automations.length
? html`<div class="empty" slot="empty">
<ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
<h1>
${
!this.narrow
? html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
slot="trigger"
.label=${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.move_category"
)}
>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon>
</ha-assist-chip>
${categoryItems}
</ha-button-menu-new>
${this.hass.dockedSidebar === "docked"
? nothing
: html`<ha-button-menu-new slot="selection-bar">
<ha-assist-chip
slot="trigger"
.label=${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.add_label"
)}
>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon>
</ha-assist-chip>
${labelItems}
</ha-button-menu-new>`}`
: nothing
}
<ha-button-menu-new has-overflow slot="selection-bar">
${
this.narrow
? html`<ha-assist-chip
.label=${this.hass.localize(
"ui.panel.config.automation.picker.bulk_action"
)}
slot="trigger"
>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon>
</ha-assist-chip>`
: html`<ha-icon-button
.path=${mdiDotsVertical}
.label=${"ui.panel.config.automation.picker.bulk_action"}
slot="trigger"
></ha-icon-button>`
}
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon
></ha-assist-chip>
${
this.narrow
? html`<ha-sub-menu>
<ha-menu-item slot="item">
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.move_category"
)}
</div>
<ha-svg-icon
slot="end"
.path=${mdiChevronRight}
></ha-svg-icon>
</ha-menu-item>
<ha-menu slot="menu">${categoryItems}</ha-menu>
</ha-sub-menu>`
: nothing
}
${
this.narrow || this.hass.dockedSidebar === "docked"
? html` <ha-sub-menu>
<ha-menu-item slot="item">
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.add_label"
)}
</div>
<ha-svg-icon
slot="end"
.path=${mdiChevronRight}
></ha-svg-icon>
</ha-menu-item>
<ha-menu slot="menu">${labelItems}</ha-menu>
</ha-sub-menu>`
: nothing
}
<ha-menu-item @click=${this._handleBulkEnable}>
<ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.empty_header"
"ui.panel.config.automation.picker.bulk_actions.enable"
)}
</h1>
<p>
</div>
</ha-menu-item>
<ha-menu-item @click=${this._handleBulkDisable}>
<ha-svg-icon
slot="start"
.path=${mdiToggleSwitchOffOutline}
></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.empty_text_1"
"ui.panel.config.automation.picker.bulk_actions.disable"
)}
</p>
<p>
${this.hass.localize(
"ui.panel.config.automation.picker.empty_text_2",
{ user: this.hass.user?.name || "Alice" }
)}
</p>
<a
href=${documentationUrl(this.hass, "/docs/automation/editor/")}
target="_blank"
rel="noreferrer"
>
<ha-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</a>
</div>`
: nothing}
</div>
</ha-menu-item>
</ha-button-menu-new>
${
!this.automations.length
? html`<div class="empty" slot="empty">
<ha-svg-icon .path=${mdiRobotHappy}></ha-svg-icon>
<h1>
${this.hass.localize(
"ui.panel.config.automation.picker.empty_header"
)}
</h1>
<p>
${this.hass.localize(
"ui.panel.config.automation.picker.empty_text_1"
)}
</p>
<p>
${this.hass.localize(
"ui.panel.config.automation.picker.empty_text_2",
{ user: this.hass.user?.name || "Alice" }
)}
</p>
<a
href=${documentationUrl(
this.hass,
"/docs/automation/editor/"
)}
target="_blank"
rel="noreferrer"
>
<ha-button>
${this.hass.localize("ui.panel.config.common.learn_more")}
</ha-button>
</a>
</div>`
: nothing
}
<ha-fab
slot="fab"
.label=${this.hass.localize(
@ -507,6 +640,80 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
</hass-tabs-subpage-data-table>
<ha-menu id="overflow-menu" positioning="fixed">
<ha-menu-item @click=${this._showInfo}>
<ha-svg-icon
.path=${mdiInformationOutline}
slot="start"
></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.editor.show_info")}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._showSettings}>
<ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.picker.show_settings"
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._editCategory}>
<ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
`ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._runActions}>
<ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.editor.run")}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._showTrace}>
<ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.automation.editor.show_trace"
)}
</div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._duplicate}>
<ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._toggle}>
<ha-svg-icon
.path=${
this._overflowAutomation?.state === "off"
? mdiPlayCircleOutline
: mdiStopCircleOutline
}
slot="start"
></ha-svg-icon>
<div slot="headline">
${
this._overflowAutomation?.state === "off"
? this.hass.localize("ui.panel.config.automation.editor.enable")
: this.hass.localize(
"ui.panel.config.automation.editor.disable"
)
}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._deleteConfirm} class="warning">
<ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
<div slot="headline">
${this.hass.localize("ui.panel.config.automation.picker.delete")}
</div>
</ha-menu-item>
</ha-menu>
`;
}
@ -633,15 +840,29 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
this._applyFilters();
}
private _showInfo(automation: any) {
private _showInfo(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
}
private _runActions(automation: any) {
private _showSettings(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
fireEvent(this, "hass-more-info", {
entityId: automation.entity_id,
view: "settings",
});
}
private _runActions(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
triggerAutomationActions(this.hass, automation.entity_id);
}
private _editCategory(automation: any) {
private _editCategory(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
const entityReg = this._entityReg.find(
(reg) => reg.entity_id === automation.entity_id
);
@ -662,7 +883,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
});
}
private _showTrace(automation: any) {
private _showTrace(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
if (!automation.attributes.id) {
showAlertDialog(this, {
text: this.hass.localize(
@ -676,14 +899,18 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
);
}
private async _toggle(automation): Promise<void> {
private async _toggle(ev): Promise<void> {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
const service = automation.state === "off" ? "turn_on" : "turn_off";
await this.hass.callService("automation", service, {
entity_id: automation.entity_id,
});
}
private async _deleteConfirm(automation) {
private async _deleteConfirm(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm_title"
@ -717,7 +944,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
}
private async duplicate(automation) {
private async _duplicate(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
try {
const config = await fetchAutomationFileConfig(
this.hass,
@ -776,6 +1005,12 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
}
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
}
private _createNew() {
if (isComponentLoaded(this.hass, "blueprint")) {
showNewAutomationDialog(this, { mode: "automation" });
@ -784,6 +1019,48 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
}
private async _handleBulkCategory(ev) {
const category = ev.currentTarget.value;
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
categories: { automation: category },
})
);
});
await Promise.all(promises);
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels: this.hass.entities[entityId].labels.concat(label),
})
);
});
await Promise.all(promises);
}
private async _handleBulkEnable() {
const promises: Promise<ServiceCallResponse>[] = [];
this._selected.forEach((entityId) => {
promises.push(turnOnOffEntity(this.hass, entityId, true));
});
await Promise.all(promises);
}
private async _handleBulkDisable() {
const promises: Promise<ServiceCallResponse>[] = [];
this._selected.forEach((entityId) => {
promises.push(turnOnOffEntity(this.hass, entityId, false));
});
await Promise.all(promises);
}
static get styles(): CSSResultGroup {
return [
haStyle,
@ -799,6 +1076,16 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
--mdc-icon-size: 80px;
max-width: 500px;
}
ha-assist-chip {
--ha-assist-chip-container-shape: 10px;
}
ha-button-menu-new ha-assist-chip {
--md-assist-chip-trailing-space: 8px;
}
ha-label {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-opacity: 0.5;
}
`,
];
}

4
src/panels/config/entities/ha-config-entities.ts
View File

@ -527,11 +527,11 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
.filters=${Object.values(this._filters).filter(
(filter) => filter.value?.length
).length}
.selected=${this._selectedEntities.length}
.filter=${this._filter}
selectable
clickable
.selected=${this._selectedEntities.length}
@selection-changed=${this._handleSelectionChanged}
clickable
@clear-filter=${this._clearFilter}
@search-changed=${this._handleSearchChange}
@row-click=${this._openEditEntry}

189
src/panels/config/helpers/ha-config-helpers.ts
View File

@ -1,8 +1,17 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiAlertCircle, mdiPencilOff, mdiPlus } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, TemplateResult, html } from "lit";
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property, state } from "lit/decorators";
import { consume } from "@lit-labs/context";
import memoizeOne from "memoize-one";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { navigate } from "../../../common/navigate";
@ -15,6 +24,7 @@ import {
DataTableColumnContainer,
RowClickedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-fab";
import "../../../components/ha-icon";
import "../../../components/ha-state-icon";
@ -44,6 +54,13 @@ import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { isHelperDomain } from "./const";
import { showHelperDetailDialog } from "./show-dialog-helper-detail";
import {
LabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import { fullEntitiesContext } from "../../../data/context";
import "../../../components/ha-filter-labels";
import { haStyle } from "../../../resources/styles";
type HelperItem = {
id: string;
@ -54,6 +71,7 @@ type HelperItem = {
type: string;
configEntry?: ConfigEntry;
entity?: HassEntity;
label_entries: LabelRegistryEntry[];
};
// This groups items by a key but only returns last entry per key.
@ -93,6 +111,24 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
@state() private _configEntries?: Record<string, ConfigEntry>;
@state() private _activeFilters?: string[];
@state() private _filters: Record<
string,
{ value: string[] | undefined; items: Set<string> | undefined }
> = {};
@state() private _expandedFilter?: string;
@state()
_labels!: LabelRegistryEntry[];
@state()
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
@state() private _filteredStateItems?: string[] | null;
public hassSubscribe() {
return [
subscribeConfigEntries(
@ -117,6 +153,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
subscribeEntityRegistry(this.hass.connection!, (entries) => {
this._entityEntries = groupByOne(entries, (entry) => entry.entity_id);
}),
subscribeLabelRegistry(this.hass.connection, (labels) => {
this._labels = labels;
}),
];
}
@ -146,10 +185,17 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
grows: true,
direction: "asc",
template: (helper) => html`
${helper.name}
<div style="font-size: 14px;">${helper.name}</div>
${narrow
? html`<div class="secondary">${helper.entity_id}</div> `
: ""}
: nothing}
${helper.label_entries.length
? html`
<ha-data-table-labels
.labels=${helper.label_entries}
></ha-data-table-labels>
`
: nothing}
`,
},
};
@ -201,8 +247,15 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
localize: LocalizeFunc,
stateItems: HassEntity[],
entityEntries: Record<string, EntityRegistryEntry>,
configEntries: Record<string, ConfigEntry>
configEntries: Record<string, ConfigEntry>,
entityReg: EntityRegistryEntry[],
labelReg?: LabelRegistryEntry[],
filteredStateItems?: string[] | null
): HelperItem[] => {
if (filteredStateItems === null) {
return [];
}
const configEntriesCopy = { ...configEntries };
const states = stateItems.map((entityState) => {
@ -241,14 +294,29 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
entity: undefined,
}));
return [...states, ...entries].map((item) => ({
...item,
localized_type: item.configEntry
? domainToName(localize, item.type)
: localize(
`ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
) || item.type,
}));
return [...states, ...entries]
.filter((item) =>
filteredStateItems
? filteredStateItems?.includes(item.entity_id)
: true
)
.map((item) => {
const entityRegEntry = entityReg.find(
(reg) => reg.entity_id === item.entity_id
);
const labels = labelReg && entityRegEntry?.labels;
return {
...item,
localized_type: item.configEntry
? domainToName(localize, item.type)
: localize(
`ui.panel.config.helpers.types.${item.type}` as LocalizeKeys
) || item.type,
label_entries: (labels || []).map(
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
),
};
});
}
);
@ -269,20 +337,40 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
back-path="/config"
.route=${this.route}
.tabs=${configSections.devices}
hasFilters
.filters=${Object.values(this._filters).filter(
(filter) => filter.value?.length
).length}
.columns=${this._columns(this.narrow, this.hass.localize)}
.data=${this._getItems(
this.hass.localize,
this._stateItems,
this._entityEntries,
this._configEntries
this._configEntries,
this._entityReg,
this._labels,
this._filteredStateItems
)}
.activeFilters=${this._activeFilters}
@clear-filter=${this._clearFilter}
@row-click=${this._openEditDialog}
hasFab
clickable
.noDataText=${this.hass.localize(
"ui.panel.config.helpers.picker.no_helpers"
)}
class=${this.narrow ? "narrow" : ""}
>
<ha-filter-labels
.hass=${this.hass}
.value=${this._filters["ha-filter-labels"]?.value}
@data-table-filter-changed=${this._filterChanged}
slot="filter-pane"
.expanded=${this._expandedFilter === "ha-filter-labels"}
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-labels>
<ha-integration-overflow-menu
.hass=${this.hass}
slot="toolbar-icon"
@ -293,7 +381,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
"ui.panel.config.helpers.picker.create_helper"
)}
extended
@click=${this._createHelpler}
@click=${this._createHelper}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
@ -301,6 +389,63 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
`;
}
private _filterExpanded(ev) {
if (ev.detail.expanded) {
this._expandedFilter = ev.target.localName;
} else if (this._expandedFilter === ev.target.localName) {
this._expandedFilter = undefined;
}
}
private _filterChanged(ev) {
const type = ev.target.localName;
this._filters[type] = ev.detail;
this._applyFilters();
}
private _applyFilters() {
const filters = Object.entries(this._filters);
let items: Set<string> | undefined;
for (const [key, filter] of filters) {
if (filter.items) {
if (!items) {
items = filter.items;
continue;
}
items =
"intersection" in items
? // @ts-ignore
items.intersection(filter.items)
: new Set([...items].filter((x) => filter.items!.has(x)));
}
if (key === "ha-filter-labels" && filter.value?.length) {
const labelItems: Set<string> = new Set();
this._stateItems
.filter((stateItem) =>
this._entityReg
.find((reg) => reg.entity_id === stateItem.entity_id)
?.labels.some((lbl) => filter.value!.includes(lbl))
)
.forEach((stateItem) => labelItems.add(stateItem.entity_id));
if (!items) {
items = labelItems;
continue;
}
items =
"intersection" in items
? // @ts-ignore
items.intersection(labelItems)
: new Set([...items].filter((x) => labelItems!.has(x)));
}
}
this._filteredStateItems = items ? [...items] : undefined;
}
private _clearFilter() {
this._filters = {};
this._applyFilters();
}
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
if (this.route.path === "/add") {
@ -418,9 +563,23 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
}
}
private _createHelpler() {
private _createHelper() {
showHelperDetailDialog(this, {});
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
hass-tabs-subpage-data-table.narrow {
--data-table-row-height: 72px;
}
`,
];
}
}
declare global {

8
src/panels/config/labels/dialog-label-detail.ts
View File

@ -49,11 +49,19 @@ class DialogLabelDetail
this._icon = "";
this._color = "";
}
document.body.addEventListener("keydown", this._handleKeyPress);
}
private _handleKeyPress = (ev: KeyboardEvent) => {
if (ev.key === "Escape") {
ev.stopPropagation();
}
};
public closeDialog(): void {
this._params = undefined;
fireEvent(this, "dialog-closed", { dialog: this.localName });
document.body.removeEventListener("keydown", this._handleKeyPress);
}
protected render() {

5
src/resources/styles-data.ts
View File

@ -143,7 +143,10 @@ export const derivedStyles = {
"mdc-select-disabled-ink-color": "var(--input-disabled-ink-color)",
"mdc-select-dropdown-icon-color": "var(--input-dropdown-icon-color)",
"mdc-select-disabled-dropdown-icon-color": "var(--input-disabled-ink-color)",
"ha-assist-chip-filled-container-color":
"rgba(var(--rgb-primary-text-color),0.15)",
"ha-assist-chip-active-container-color":
"rgba(var(--rgb-primary-color),0.15)",
"chip-background-color": "rgba(var(--rgb-primary-text-color), 0.15)",
// Vaadin
"material-body-text-color": "var(--primary-text-color)",

18
src/translations/en.json
View File

@ -501,11 +501,18 @@
},
"subpage-data-table": {
"filters": "Filters",
"clear_filter": "Clear filter",
"close_filter": "Close filters",
"exit_selection_mode": "Exit selection mode",
"enter_selection_mode": "Enter selection mode",
"sort_by": "Sort by {sortColumn}",
"group_by": "Group by {groupColumn}",
"dont_group_by": "Don't group",
"select": "Select",
"selected": "Selected {selected}"
"selected": "Selected {selected}",
"close_select_mode": "Close selection mode",
"select_all": "Select all",
"select_none": "Select none"
},
"config-entry-picker": {
"config_entry": "Integration"
@ -2669,6 +2676,7 @@
"edit_automation": "Edit automation",
"dev_automation": "Debug automation",
"show_info_automation": "Show info about automation",
"show_settings": "Show settings",
"delete": "[%key:ui::common::delete%]",
"delete_confirm_title": "Delete automation?",
"delete_confirm_text": "{name} will be permanently deleted.",
@ -2689,6 +2697,14 @@
"state": "State",
"category": "Category"
},
"bulk_action": "Action",
"bulk_actions": {
"move_category": "Move to category",
"no_category": "No category",
"add_label": "Add label",
"enable": "Enable",
"disable": "Disable"
},
"empty_header": "Start automating",
"empty_text_1": "Automations make Home Assistant automatically respond to things happening in and around your home.",
"empty_text_2": "Automations connect triggers to actions in a ''when trigger then action'' fashion with optional conditions. For example: ''When the sun sets and if {user} is home, then turn on the lights''."

10
yarn.lock
View File

@ -1526,14 +1526,14 @@ __metadata:
languageName: node
linkType: hard
"@codemirror/view@npm:6.26.0, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
version: 6.26.0
resolution: "@codemirror/view@npm:6.26.0"
"@codemirror/view@npm:6.26.1, @codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0":
version: 6.26.1
resolution: "@codemirror/view@npm:6.26.1"
dependencies:
"@codemirror/state": "npm:^6.4.0"
style-mod: "npm:^4.1.0"
w3c-keyname: "npm:^2.2.4"
checksum: 10/d4ef249044cbc293a7267c83e08671a68646fd7bbe1efb8d205c01385f157c93918eabeaedb62a4cc10598ab63818ac749cec4f6355fe0404d9d4beb7857c31f
checksum: 10/6d2b19b2439c36b2712d3560eeb0c198ad2ee442ad22641c2b4bce94077812cffbb52ca12328219d3b9663b2dd0ffc63481432a2550839e5c7a7a53704e82a9a
languageName: node
linkType: hard
@ -9604,7 +9604,7 @@ __metadata:
"@codemirror/legacy-modes": "npm:6.3.3"
"@codemirror/search": "npm:6.5.6"
"@codemirror/state": "npm:6.4.1"
"@codemirror/view": "npm:6.26.0"
"@codemirror/view": "npm:6.26.1"
"@egjs/hammerjs": "npm:2.0.17"
"@formatjs/intl-datetimeformat": "npm:6.12.3"
"@formatjs/intl-displaynames": "npm:6.6.6"