Compare commits

..

4 Commits

Author SHA1 Message Date
Paul Bottein
35d53f18ae Fix not found category 2024-03-28 13:45:56 +01:00
Paul Bottein
960e0dd9e0 Add suggested name 2024-03-28 13:33:18 +01:00
Paul Bottein
31c6247a86 Fix categories filtering 2024-03-28 13:30:53 +01:00
Paul Bottein
8ec8dc160f Display category dialog in category picker 2024-03-28 13:15:48 +01:00
93 changed files with 1345 additions and 5111 deletions

View File

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

View File

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

View File

@@ -1,7 +0,0 @@
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);

View File

@@ -1,7 +0,0 @@
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);

View File

@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
--mdc-icon-size: 24px;
--control-select-color: var(--state-fan-active-color);
--control-select-thickness: 130px;
--control-select-border-radius: 36px;
--control-select-border-radius: 48px;
}
.vertical-selects {
height: 300px;

View File

@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
--control-slider-background: #ffcf4c;
--control-slider-background-opacity: 0.2;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
}
.vertical-sliders {
height: 300px;

View File

@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
--control-switch-on-color: var(--green-color);
--control-switch-off-color: var(--red-color);
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-border-radius: 48px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}

View File

@@ -17,10 +17,6 @@ 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", {
@@ -104,7 +100,7 @@ const DEVICES = [
const AREAS: AreaRegistryEntry[] = [
{
area_id: "backyard",
floor_id: "ground",
floor_id: null,
name: "Backyard",
icon: null,
picture: null,
@@ -113,7 +109,7 @@ const AREAS: AreaRegistryEntry[] = [
},
{
area_id: "bedroom",
floor_id: "first",
floor_id: null,
name: "Bedroom",
icon: "mdi:bed",
picture: null,
@@ -122,7 +118,7 @@ const AREAS: AreaRegistryEntry[] = [
},
{
area_id: "livingroom",
floor_id: "ground",
floor_id: null,
name: "Livingroom",
icon: "mdi:sofa",
picture: null,
@@ -131,45 +127,6 @@ 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>;
@@ -177,12 +134,7 @@ 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" } },
@@ -191,12 +143,15 @@ 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: {
@@ -345,8 +300,6 @@ 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: {
@@ -403,8 +356,6 @@ 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);

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.1",
"@codemirror/view": "6.26.0",
"@egjs/hammerjs": "2.0.17",
"@formatjs/intl-datetimeformat": "6.12.3",
"@formatjs/intl-displaynames": "6.6.6",
@@ -185,8 +185,8 @@
"@types/tar": "6.1.11",
"@types/ua-parser-js": "0.7.39",
"@types/webspeechapi": "0.0.29",
"@typescript-eslint/eslint-plugin": "7.4.0",
"@typescript-eslint/parser": "7.4.0",
"@typescript-eslint/eslint-plugin": "7.3.1",
"@typescript-eslint/parser": "7.3.1",
"@web/dev-server": "0.1.38",
"@web/dev-server-rollup": "0.4.1",
"babel-loader": "9.1.3",

View File

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

View File

@@ -22,6 +22,14 @@ 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 {
@@ -44,17 +52,10 @@ export class HaAssistChip extends MdAssistChip {
margin-inline-end: unset;
margin-inline-start: var(--_icon-label-space);
}
::before {
background: var(--ha-assist-chip-container-color, transparent);
opacity: var(--ha-assist-chip-container-opacity, 1);
}
: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;
}
`,
];

View File

@@ -5,22 +5,20 @@ import { LabelRegistryEntry } from "../../data/label_registry";
import { computeCssColor } from "../../common/color/compute-color";
import { fireEvent } from "../../common/dom/fire_event";
import "../ha-label";
import { stringCompare } from "../../common/string/compare";
@customElement("ha-data-table-labels")
class HaDataTableLabels extends LitElement {
@property({ attribute: false }) public labels!: LabelRegistryEntry[];
protected render(): TemplateResult {
const labels = this.labels.sort((a, b) => stringCompare(a.name, b.name));
return html`
<ha-chip-set>
${repeat(
labels.slice(0, 2),
this.labels.slice(0, 2),
(label) => label.label_id,
(label) => this._renderLabel(label, true)
)}
${labels.length > 2
${this.labels.length > 2
? html`<ha-button-menu
absolute
role="button"
@@ -29,10 +27,10 @@ class HaDataTableLabels extends LitElement {
@closed=${this._handleIconOverflowMenuClosed}
>
<ha-label slot="trigger" class="plus" dense>
+${labels.length - 2}
+${this.labels.length - 2}
</ha-label>
${repeat(
labels.slice(2),
this.labels.slice(2),
(label) => label.label_id,
(label) => html`
<ha-list-item @click=${this._labelClicked} .item=${label}>
@@ -106,14 +104,13 @@ class HaDataTableLabels extends LitElement {
flex-wrap: nowrap;
}
ha-label {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-color: var(--color);
--ha-label-background-opacity: 0.5;
}
ha-button-menu {
border-radius: 10px;
}
.plus {
--ha-label-background-color: transparent;
border: 1px solid var(--divider-color);
}
`;

View File

@@ -33,7 +33,6 @@ import "../ha-svg-icon";
import "../search-input";
import { filterData, sortData } from "./sort-filter";
import { groupBy } from "../../common/util/group-by";
import { stringCompare } from "../../common/string/compare";
declare global {
// for fire event
@@ -182,13 +181,6 @@ 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) {
@@ -394,7 +386,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...
@@ -520,6 +512,10 @@ export class HaDataTable extends LitElement {
items.push({ append: true, content: this.appendRow });
}
if (this.hasFab) {
items.push({ empty: true });
}
if (this.groupColumn) {
const grouped = groupBy(items, (item) => item[this.groupColumn!]);
if (grouped.undefined) {
@@ -530,13 +526,7 @@ export class HaDataTable extends LitElement {
const sorted: {
[key: string]: DataTableRowData[];
} = Object.keys(grouped)
.sort((a, b) =>
stringCompare(
["", "-", "—"].includes(a) ? "zzz" : a,
["", "-", "—"].includes(b) ? "zzz" : b,
this.hass.locale.language
)
)
.sort()
.reduce((obj, key) => {
obj[key] = grouped[key];
return obj;
@@ -565,10 +555,6 @@ export class HaDataTable extends LitElement {
} else {
this._items = items;
}
if (this.hasFab) {
this._items = [...this._items, { empty: true }];
}
} else {
this._items = data;
}
@@ -607,7 +593,10 @@ export class HaDataTable extends LitElement {
private _handleHeaderRowCheckboxClick(ev: Event) {
const checkbox = ev.target as HaCheckbox;
if (checkbox.checked) {
this.selectAll();
this._checkedRows = this._filteredData
.filter((data) => data.selectable !== false)
.map((data) => data[this.id]);
this._checkedRowsChanged();
} else {
this._checkedRows = [];
this._checkedRowsChanged();
@@ -634,13 +623,9 @@ export class HaDataTable extends LitElement {
ev
.composedPath()
.find((el) =>
[
"ha-checkbox",
"mwc-button",
"ha-button",
"ha-icon-button",
"ha-assist-chip",
].includes((el as HTMLElement).localName)
["ha-checkbox", "mwc-button", "ha-button", "ha-assist-chip"].includes(
(el as HTMLElement).localName
)
)
) {
return;

View File

@@ -1,12 +1,12 @@
import { mdiTextureBox } from "@mdi/js";
import { mdiSofa } from "@mdi/js";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { showAreaFilterDialog } from "../dialogs/area-filter/show-area-filter-dialog";
import { HomeAssistant } from "../types";
import "./ha-icon-next";
import "./ha-svg-icon";
import "./ha-textfield";
import "./ha-icon-next";
export type AreaFilterValue = {
hidden?: string[];
@@ -51,7 +51,7 @@ export class HaAreaPicker extends LitElement {
@keydown=${this._edit}
.disabled=${this.disabled}
>
<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>
<ha-svg-icon slot="graphic" .path=${mdiSofa}></ha-svg-icon>
<span>${this.label}</span>
<span slot="secondary">${description}</span>
<ha-icon-next

View File

@@ -1,18 +1,14 @@
import { mdiTextureBox } from "@mdi/js";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, TemplateResult, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain";
import { stringCompare } from "../common/string/compare";
import {
ScorableTextItem,
fuzzyFilterSort,
} from "../common/string/filter/sequence-matching";
import { computeRTL } from "../common/util/compute_rtl";
import { AreaRegistryEntry } from "../data/area_registry";
import {
DeviceEntityDisplayLookup,
@@ -30,11 +26,10 @@ import { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-floor-icon";
import "./ha-icon-button";
import "./ha-list-item";
import "./ha-svg-icon";
import "./ha-tree-indicator";
import { stringCompare } from "../common/string/compare";
type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
@@ -44,11 +39,22 @@ interface FloorAreaEntry {
icon: string | null;
strings: string[];
type: "floor" | "area";
level: number | null;
hasFloor?: boolean;
lastArea?: boolean;
}
const rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) =>
html`<ha-list-item
graphic="icon"
style=${item.type === "area" && item.hasFloor
? "--mdc-list-side-padding-left: 48px;"
: ""}
>
${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
: nothing}
${item.name}
</ha-list-item>`;
@customElement("ha-area-floor-picker")
export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -137,44 +143,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
await this.comboBox?.focus();
}
private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
const rtl = computeRTL(this.hass);
return html`
<ha-list-item
graphic="icon"
style=${item.type === "area" && item.hasFloor
? rtl
? "--mdc-list-side-padding-right: 48px;"
: "--mdc-list-side-padding-left: 48px;"
: ""}
>
${item.type === "area" && item.hasFloor
? html`<ha-tree-indicator
style=${styleMap({
width: "48px",
position: "absolute",
top: "0px",
left: rtl ? undefined : "8px",
right: rtl ? "8px" : undefined,
transform: rtl ? "scaleX(-1)" : "",
})}
.end=${item.lastArea}
slot="graphic"
></ha-tree-indicator>`
: nothing}
${item.type === "floor"
? html`<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>`
: item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon
slot="graphic"
.path=${mdiTextureBox}
></ha-svg-icon>`}
${item.name}
</ha-list-item>
`;
};
private _getAreas = memoizeOne(
(
floors: FloorRegistryEntry[],
@@ -197,7 +165,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
name: this.hass.localize("ui.components.area-picker.no_areas"),
icon: null,
strings: [],
level: null,
},
];
}
@@ -349,7 +316,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
name: this.hass.localize("ui.components.area-picker.no_match"),
icon: null,
strings: [],
level: null,
},
];
}
@@ -384,19 +350,16 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
name: floor.name,
icon: floor.icon,
strings: [floor.floor_id, ...floor.aliases, floor.name],
level: floor.level,
});
}
output.push(
...floorAreas.map((area, index, array) => ({
...floorAreas.map((area) => ({
id: area.area_id,
type: "area" as const,
name: area.name,
icon: area.icon,
strings: [area.area_id, ...area.aliases, area.name],
hasFloor: true,
level: null,
lastArea: index === array.length - 1,
}))
);
});
@@ -410,7 +373,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
),
icon: null,
strings: [],
level: null,
});
}
@@ -421,7 +383,6 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
name: area.name,
icon: area.icon,
strings: [area.area_id, ...area.aliases, area.name],
level: null,
}))
);
@@ -470,7 +431,7 @@ export class HaAreaFloorPicker extends SubscribeMixin(LitElement) {
.placeholder=${this.placeholder
? this.hass.areas[this.placeholder]?.name
: undefined}
.renderer=${this._rowRenderer}
.renderer=${rowRenderer}
@filter-changed=${this._filterChanged}
@opened-changed=${this._openedChanged}
@value-changed=${this._areaChanged}

View File

@@ -1,15 +1,14 @@
import { mdiTextureBox } from "@mdi/js";
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { HassEntity } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, TemplateResult, html } from "lit";
import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain";
import {
ScorableTextItem,
fuzzyFilterSort,
ScorableTextItem,
} from "../common/string/filter/sequence-matching";
import {
AreaRegistryEntry,
@@ -21,8 +20,10 @@ import {
getDeviceEntityDisplayLookup,
} from "../data/device_registry";
import { EntityRegistryDisplayEntry } from "../data/entity_registry";
import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
import {
showAlertDialog,
showPromptDialog,
} from "../dialogs/generic/show-dialog-box";
import { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box";
@@ -36,18 +37,14 @@ type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) =>
html`<ha-list-item
graphic="icon"
class=${classMap({ "add-new": item.area_id === ADD_NEW_ID })}
class=${classMap({ "add-new": item.area_id === "add_new" })}
>
${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
: html`<ha-svg-icon slot="graphic" .path=${mdiTextureBox}></ha-svg-icon>`}
: nothing}
${item.name}
</ha-list-item>`;
const ADD_NEW_ID = "___ADD_NEW___";
const NO_ITEMS_ID = "___NO_ITEMS___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
@customElement("ha-area-picker")
export class HaAreaPicker extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -136,6 +133,20 @@ export class HaAreaPicker extends LitElement {
noAdd: this["noAdd"],
excludeAreas: this["excludeAreas"]
): AreaRegistryEntry[] => {
if (!areas.length) {
return [
{
area_id: "no_areas",
floor_id: null,
name: this.hass.localize("ui.components.area-picker.no_areas"),
picture: null,
icon: null,
aliases: [],
labels: [],
},
];
}
let deviceEntityLookup: DeviceEntityDisplayLookup = {};
let inputDevices: DeviceRegistryEntry[] | undefined;
let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -272,9 +283,9 @@ export class HaAreaPicker extends LitElement {
if (!outputAreas.length) {
outputAreas = [
{
area_id: NO_ITEMS_ID,
area_id: "no_areas",
floor_id: null,
name: this.hass.localize("ui.components.area-picker.no_areas"),
name: this.hass.localize("ui.components.area-picker.no_match"),
picture: null,
icon: null,
aliases: [],
@@ -288,7 +299,7 @@ export class HaAreaPicker extends LitElement {
: [
...outputAreas,
{
area_id: ADD_NEW_ID,
area_id: "add_new",
floor_id: null,
name: this.hass.localize("ui.components.area-picker.add_new"),
picture: null,
@@ -362,40 +373,20 @@ export class HaAreaPicker extends LitElement {
const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
filterString,
target.items?.filter(
(item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
) || []
target.items || []
);
if (filteredItems.length === 0) {
if (!this.noAdd) {
this.comboBox.filteredItems = [
{
area_id: NO_ITEMS_ID,
floor_id: null,
name: this.hass.localize("ui.components.area-picker.no_match"),
icon: null,
picture: null,
labels: [],
aliases: [],
},
] as AreaRegistryEntry[];
} else {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
area_id: ADD_NEW_SUGGESTION_ID,
floor_id: null,
name: this.hass.localize(
"ui.components.area-picker.add_new_sugestion",
{ name: this._suggestion }
),
icon: "mdi:plus",
picture: null,
labels: [],
aliases: [],
},
] as AreaRegistryEntry[];
}
if (!this.noAdd && filteredItems?.length === 0) {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
area_id: "add_new_suggestion",
name: this.hass.localize(
"ui.components.area-picker.add_new_sugestion",
{ name: this._suggestion }
),
picture: null,
},
];
} else {
this.comboBox.filteredItems = filteredItems;
}
@@ -413,13 +404,11 @@ export class HaAreaPicker extends LitElement {
ev.stopPropagation();
let newValue = ev.detail.value;
if (newValue === NO_ITEMS_ID) {
if (newValue === "no_areas") {
newValue = "";
this.comboBox.setInputValue("");
return;
}
if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
if (!["add_new_suggestion", "add_new"].includes(newValue)) {
if (newValue !== this._value) {
this._setValue(newValue);
}
@@ -427,14 +416,25 @@ export class HaAreaPicker extends LitElement {
}
(ev.target as any).value = this._value;
this.hass.loadFragmentTranslation("config");
showAreaRegistryDetailDialog(this, {
suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
createEntry: async (values) => {
showPromptDialog(this, {
title: this.hass.localize("ui.components.area-picker.add_dialog.title"),
text: this.hass.localize("ui.components.area-picker.add_dialog.text"),
confirmText: this.hass.localize(
"ui.components.area-picker.add_dialog.add"
),
inputLabel: this.hass.localize(
"ui.components.area-picker.add_dialog.name"
),
defaultValue:
newValue === "add_new_suggestion" ? this._suggestion : undefined,
confirm: async (name) => {
if (!name) {
return;
}
try {
const area = await createAreaRegistryEntry(this.hass, values);
const area = await createAreaRegistryEntry(this.hass, {
name,
});
const areas = [...Object.values(this.hass.areas), area];
this.comboBox.filteredItems = this._getAreas(
areas,
@@ -454,16 +454,18 @@ export class HaAreaPicker extends LitElement {
} catch (err: any) {
showAlertDialog(this, {
title: this.hass.localize(
"ui.components.area-picker.failed_create_area"
"ui.components.area-picker.add_dialog.failed_create_area"
),
text: err.message,
});
}
},
cancel: () => {
this._setValue(undefined);
this._suggestion = undefined;
this.comboBox.setInputValue("");
},
});
this._suggestion = undefined;
this.comboBox.setInputValue("");
}
private _setValue(value?: string) {

View File

@@ -1,89 +0,0 @@
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;
}
}

View File

@@ -6,7 +6,6 @@ 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";
@@ -54,18 +53,18 @@ export class HaColorPicker extends LitElement {
`
: nothing}
${this.defaultColor
? html` <ha-list-item value="default">
? html` <mwc-list-item value="default">
${this.hass.localize(`ui.components.color-picker.default_color`)}
</ha-list-item>`
</mwc-list-item>`
: nothing}
${Array.from(THEME_COLORS).map(
(color) => html`
<ha-list-item .value=${color} graphic="icon">
<mwc-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>
</ha-list-item>
</mwc-list-item>
`
)}
</ha-select>

View File

@@ -1,13 +1,12 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
import { mdiFilterVariantRemove } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { Blueprints, fetchBlueprints } from "../data/blueprint";
import { findRelated, RelatedResult } from "../data/search";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import { haStyleScrollbar } from "../resources/styles";
import { Blueprints, fetchBlueprints } from "../data/blueprint";
@customElement("ha-filter-blueprints")
export class HaFilterBlueprints extends LitElement {
@@ -36,11 +35,7 @@ export class HaFilterBlueprints extends LitElement {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.blueprint.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._blueprints && this._shouldRender
@@ -55,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>`
@@ -133,15 +128,6 @@ export class HaFilterBlueprints extends LitElement {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -161,10 +147,6 @@ export class HaFilterBlueprints extends LitElement {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -175,11 +157,11 @@ export class HaFilterBlueprints extends LitElement {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
`,
];

View File

@@ -2,7 +2,6 @@ import { ActionDetail, SelectedDetail } from "@material/mwc-list";
import {
mdiDelete,
mdiDotsVertical,
mdiFilterVariantRemove,
mdiPencil,
mdiPlus,
mdiTag,
@@ -69,11 +68,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.category.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._shouldRender
@@ -83,15 +78,13 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
class="ha-scrollbar"
activatable
>
${this._categories.length > 0
? html`<ha-list-item
.selected=${!this.value?.length}
.activated=${!this.value?.length}
>${this.hass.localize(
"ui.panel.config.category.filter.show_all"
)}</ha-list-item
>`
: nothing}
<ha-list-item
.selected=${!this.value?.length}
.activated=${!this.value?.length}
>${this.hass.localize(
"ui.panel.config.category.filter.show_all"
)}</ha-list-item
>
${this._categories.map(
(category) =>
html`<ha-list-item
@@ -149,11 +142,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
: nothing}
</ha-expansion-panel>
${this.expanded
? html`<ha-list-item
graphic="icon"
@click=${this._addCategory}
class="add"
>
? html`<ha-list-item graphic="icon" @click=${this._addCategory}>
<ha-svg-icon slot="graphic" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize("ui.panel.config.category.editor.add")}
</ha-list-item>`
@@ -259,22 +248,12 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
css`
:host {
border-bottom: 1px solid var(--divider-color);
position: relative;
}
:host([expanded]) {
flex: 1;
@@ -288,10 +267,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -302,11 +277,11 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
mwc-list {
--mdc-list-item-meta-size: auto;
@@ -316,12 +291,6 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
.warning {
color: var(--error-color);
}
.add {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
`,
];
}

View File

@@ -1,4 +1,3 @@
import { mdiFilterVariantRemove } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -14,11 +13,10 @@ import { stringCompare } from "../common/string/compare";
import { computeDeviceName } from "../data/device_registry";
import { findRelated, RelatedResult } from "../data/search";
import { haStyleScrollbar } from "../resources/styles";
import { loadVirtualizer } from "../resources/virtualizer";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-expansion-panel";
import "./search-input-outlined";
import "./ha-check-list-item";
import { loadVirtualizer } from "../resources/virtualizer";
@customElement("ha-filter-devices")
export class HaFilterDevices extends LitElement {
@@ -34,8 +32,6 @@ export class HaFilterDevices extends LitElement {
@state() private _shouldRender = false;
@state() private _filter?: string;
public willUpdate(properties: PropertyValues) {
super.willUpdate(properties);
@@ -55,49 +51,30 @@ export class HaFilterDevices extends LitElement {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.devices.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._shouldRender
? html`<search-input-outlined
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
? html`<mwc-list class="ha-scrollbar">
<lit-virtualizer
.items=${this._devices(this.hass.devices)}
.renderItem=${this._renderItem}
@click=${this._handleItemClick}
>
</search-input-outlined>
<mwc-list class="ha-scrollbar">
<lit-virtualizer
.items=${this._devices(
this.hass.devices,
this._filter || "",
this.value
)}
.keyFunction=${this._keyFunction}
.renderItem=${this._renderItem}
@click=${this._handleItemClick}
>
</lit-virtualizer>
</mwc-list>`
</lit-virtualizer>
</mwc-list>`
: nothing}
</ha-expansion-panel>
`;
}
private _keyFunction = (device) => device?.id;
private _renderItem = (device) =>
!device
? nothing
: html`<ha-check-list-item
.value=${device.id}
.selected=${this.value?.includes(device.id)}
>
${computeDeviceName(device, this.hass)}
</ha-check-list-item>`;
html`<ha-check-list-item
.value=${device.id}
.selected=${this.value?.includes(device.id)}
>
${computeDeviceName(device, this.hass)}
</ha-check-list-item>`;
private _handleItemClick(ev) {
const listItem = ev.target.closest("ha-check-list-item");
@@ -119,7 +96,7 @@ export class HaFilterDevices extends LitElement {
setTimeout(() => {
if (!this.expanded) return;
this.renderRoot.querySelector("mwc-list")!.style.height =
`${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
`${this.clientHeight - 49}px`;
}, 300);
}
}
@@ -132,28 +109,16 @@ export class HaFilterDevices extends LitElement {
this.expanded = ev.detail.expanded;
}
private _handleSearchChange(ev: CustomEvent) {
this._filter = ev.detail.value.toLowerCase();
}
private _devices = memoizeOne(
(devices: HomeAssistant["devices"], filter: string, _value) => {
const values = Object.values(devices);
return values
.filter(
(device) =>
!filter ||
computeDeviceName(device, this.hass).toLowerCase().includes(filter)
)
.sort((a, b) =>
stringCompare(
computeDeviceName(a, this.hass),
computeDeviceName(b, this.hass),
this.hass.locale.language
)
);
}
);
private _devices = memoizeOne((devices: HomeAssistant["devices"]) => {
const values = Object.values(devices);
return values.sort((a, b) =>
stringCompare(
a.name_by_user || a.name || "",
b.name_by_user || b.name || "",
this.hass.locale.language
)
);
});
private async _findRelated() {
const relatedPromises: Promise<RelatedResult>[] = [];
@@ -190,15 +155,6 @@ export class HaFilterDevices extends LitElement {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -219,10 +175,6 @@ export class HaFilterDevices extends LitElement {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -233,19 +185,15 @@ export class HaFilterDevices extends LitElement {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
ha-check-list-item {
width: 100%;
}
search-input-outlined {
display: block;
padding: 0 8px;
}
`,
];
}

View File

@@ -1,4 +1,3 @@
import { mdiFilterVariantRemove } from "@mdi/js";
import {
css,
CSSResultGroup,
@@ -15,11 +14,10 @@ import { computeStateName } from "../common/entity/compute_state_name";
import { stringCompare } from "../common/string/compare";
import { findRelated, RelatedResult } from "../data/search";
import { haStyleScrollbar } from "../resources/styles";
import { loadVirtualizer } from "../resources/virtualizer";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-state-icon";
import "./search-input-outlined";
import "./ha-check-list-item";
import { loadVirtualizer } from "../resources/virtualizer";
@customElement("ha-filter-entities")
export class HaFilterEntities extends LitElement {
@@ -35,8 +33,6 @@ export class HaFilterEntities extends LitElement {
@state() private _shouldRender = false;
@state() private _filter?: string;
public willUpdate(properties: PropertyValues) {
super.willUpdate(properties);
@@ -56,30 +52,14 @@ export class HaFilterEntities extends LitElement {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.entities.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._shouldRender
? html`
<search-input-outlined
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
>
</search-input-outlined>
<mwc-list class="ha-scrollbar">
<lit-virtualizer
.items=${this._entities(
this.hass.states,
this.type,
this._filter || "",
this.value
)}
.keyFunction=${this._keyFunction}
.items=${this._entities(this.hass.states, this.type)}
.renderItem=${this._renderItem}
@click=${this._handleItemClick}
>
@@ -96,28 +76,24 @@ export class HaFilterEntities extends LitElement {
setTimeout(() => {
if (!this.expanded) return;
this.renderRoot.querySelector("mwc-list")!.style.height =
`${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
`${this.clientHeight - 49}px`;
}, 300);
}
}
private _keyFunction = (entity) => entity?.entity_id;
private _renderItem = (entity) =>
!entity
? nothing
: html`<ha-check-list-item
.value=${entity.entity_id}
.selected=${this.value?.includes(entity.entity_id)}
graphic="icon"
>
<ha-state-icon
slot="graphic"
.hass=${this.hass}
.stateObj=${entity}
></ha-state-icon>
${computeStateName(entity)}
</ha-check-list-item>`;
html`<ha-check-list-item
.value=${entity.entity_id}
.selected=${this.value?.includes(entity.entity_id)}
graphic="icon"
>
<ha-state-icon
slot="graphic"
.hass=${this.hass}
.stateObj=${entity}
></ha-state-icon>
${computeStateName(entity)}
</ha-check-list-item>`;
private _handleItemClick(ev) {
const listItem = ev.target.closest("ha-check-list-item");
@@ -142,27 +118,12 @@ export class HaFilterEntities extends LitElement {
this.expanded = ev.detail.expanded;
}
private _handleSearchChange(ev: CustomEvent) {
this._filter = ev.detail.value.toLowerCase();
}
private _entities = memoizeOne(
(
states: HomeAssistant["states"],
type: this["type"],
filter: string,
_value
) => {
(states: HomeAssistant["states"], type: this["type"]) => {
const values = Object.values(states);
return values
.filter(
(entityState) =>
(!type || computeStateDomain(entityState) !== type) &&
(!filter ||
entityState.entity_id.toLowerCase().includes(filter) ||
entityState.attributes.friendly_name
?.toLowerCase()
.includes(filter))
(entityState) => !type || computeStateDomain(entityState) !== type
)
.sort((a, b) =>
stringCompare(
@@ -209,15 +170,6 @@ export class HaFilterEntities extends LitElement {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -237,10 +189,6 @@ export class HaFilterEntities extends LitElement {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -251,20 +199,16 @@ export class HaFilterEntities extends LitElement {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
ha-check-list-item {
--mdc-list-item-graphic-margin: 16px;
width: 100%;
}
search-input-outlined {
display: block;
padding: 0 8px;
}
`,
];
}

View File

@@ -1,27 +1,20 @@
import "@material/mwc-menu/mwc-menu-surface";
import { mdiFilterVariantRemove, mdiTextureBox } from "@mdi/js";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeRTL } from "../common/util/compute_rtl";
import {
FloorRegistryEntry,
getFloorAreaLookup,
subscribeFloorRegistry,
} from "../data/floor_registry";
import { RelatedResult, findRelated } from "../data/search";
import { findRelated, RelatedResult } from "../data/search";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-floor-icon";
import "./ha-icon";
import "./ha-svg-icon";
import "./ha-tree-indicator";
@customElement("ha-filter-floor-areas")
export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
@@ -56,13 +49,9 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
${this.hass.localize("ui.panel.config.areas.caption")}
${this.value?.areas?.length || this.value?.floors?.length
? html`<div class="badge">
${(this.value?.areas?.length || 0) +
(this.value?.floors?.length || 0)}
</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
${(this.value?.areas?.length || 0) +
(this.value?.floors?.length || 0)}
</div>`
: nothing}
</div>
${this._shouldRender
@@ -81,18 +70,18 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
graphic="icon"
@request-selected=${this._handleItemClick}
>
<ha-floor-icon
slot="graphic"
.floor=${floor}
></ha-floor-icon>
${floor.icon
? html`<ha-icon
slot="graphic"
.icon=${floor.icon}
></ha-icon>`
: nothing}
${floor.name}
</ha-check-list-item>
${repeat(
floor.areas,
(area, index) =>
`${area.area_id}${index === floor.areas.length - 1 ? "___last" : ""}`,
(area, index) =>
this._renderArea(area, index === floor.areas.length - 1)
(area) => area.area_id,
(area) => this._renderArea(area)
)}
`
)}
@@ -108,37 +97,20 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
`;
}
private _renderArea(area, last: boolean = false) {
const hasFloor = !!area.floor_id;
return html`
<ha-check-list-item
.value=${area.area_id}
.selected=${this.value?.areas?.includes(area.area_id) || false}
.type=${"areas"}
graphic="icon"
@request-selected=${this._handleItemClick}
class=${classMap({
rtl: computeRTL(this.hass),
floor: hasFloor,
})}
>
${hasFloor
? html`
<ha-tree-indicator
.end=${last}
slot="graphic"
></ha-tree-indicator>
`
: nothing}
${area.icon
? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
: html`<ha-svg-icon
slot="graphic"
.path=${mdiTextureBox}
></ha-svg-icon>`}
${area.name}
</ha-check-list-item>
`;
private _renderArea(area) {
return html`<ha-check-list-item
.value=${area.area_id}
.selected=${this.value?.areas?.includes(area.area_id) || false}
.type=${"areas"}
graphic="icon"
class=${area.floor_id ? "floor" : ""}
@request-selected=${this._handleItemClick}
>
${area.icon
? html`<ha-icon slot="graphic" .icon=${area.icon}></ha-icon>`
: nothing}
${area.name}
</ha-check-list-item>`;
}
private _handleItemClick(ev) {
@@ -261,15 +233,6 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -289,10 +252,6 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -303,36 +262,19 @@ export class HaFilterFloorAreas extends SubscribeMixin(LitElement) {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
ha-check-list-item {
--mdc-list-item-graphic-margin: 16px;
}
.floor {
padding-left: 48px;
padding-inline-start: 48px;
padding-inline-end: 16px;
padding-left: 32px;
padding-inline-start: 32px;
}
ha-tree-indicator {
width: 56px;
position: absolute;
top: 0px;
left: 0px;
}
.rtl ha-tree-indicator {
right: 0px;
left: initial;
transform: scaleX(-1);
}
.subdir {
margin-inline-end: 8px;
opacity: .6;
}
.
`,
];
}

View File

@@ -1,19 +1,16 @@
import { SelectedDetail } from "@material/mwc-list";
import { mdiFilterVariantRemove } from "@mdi/js";
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";
import "./search-input-outlined";
@customElement("ha-filter-integrations")
export class HaFilterIntegrations extends LitElement {
@@ -29,8 +26,6 @@ export class HaFilterIntegrations extends LitElement {
@state() private _shouldRender = false;
@state() private _filter?: string;
protected render() {
return html`
<ha-expansion-panel
@@ -42,34 +37,21 @@ export class HaFilterIntegrations extends LitElement {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.integrations.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._manifests && this._shouldRender
? html`<search-input-outlined
.hass=${this.hass}
.filter=${this._filter}
@value-changed=${this._handleSearchChange}
>
</search-input-outlined>
? html`
<mwc-list
@selected=${this._integrationsSelected}
multi
class="ha-scrollbar"
>
${repeat(
this._integrations(this._manifests, this._filter, this.value),
(i) => i.domain,
${this._integrations(this._manifests).map(
(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
@@ -81,7 +63,8 @@ export class HaFilterIntegrations extends LitElement {
${integration.name || integration.domain}
</ha-check-list-item>`
)}
</mwc-list> `
</mwc-list>
`
: nothing}
</ha-expansion-panel>
`;
@@ -92,7 +75,7 @@ export class HaFilterIntegrations extends LitElement {
setTimeout(() => {
if (!this.expanded) return;
this.renderRoot.querySelector("mwc-list")!.style.height =
`${this.clientHeight - 49 - 32}px`; // 32px is the height of the search input
`${this.clientHeight - 49}px`;
}, 300);
}
}
@@ -109,36 +92,26 @@ export class HaFilterIntegrations extends LitElement {
this._manifests = await fetchIntegrationManifests(this.hass);
}
private _integrations = memoizeOne(
(manifest: IntegrationManifest[], filter: string | undefined, _value) =>
manifest
.filter(
(mnfst) =>
(!mnfst.integration_type ||
!["entity", "system", "hardware"].includes(
mnfst.integration_type
)) &&
(!filter ||
mnfst.name.toLowerCase().includes(filter) ||
mnfst.domain.toLowerCase().includes(filter))
)
.sort((a, b) =>
stringCompare(
a.name || a.domain,
b.name || b.domain,
this.hass.locale.language
)
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 async _integrationsSelected(
ev: CustomEvent<SelectedDetail<Set<number>>>
) {
const integrations = this._integrations(
this._manifests!,
this._filter,
this.value
);
const integrations = this._integrations(this._manifests!);
if (!ev.detail.index.size) {
fireEvent(this, "data-table-filter-changed", {
@@ -163,19 +136,6 @@ export class HaFilterIntegrations extends LitElement {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
private _handleSearchChange(ev: CustomEvent) {
this._filter = ev.detail.value.toLowerCase();
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -195,10 +155,6 @@ export class HaFilterIntegrations extends LitElement {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -209,15 +165,11 @@ export class HaFilterIntegrations extends LitElement {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
}
search-input-outlined {
display: block;
padding: 0 8px;
color: var(--text-accent-color, var(--text-primary-color));
}
`,
];

View File

@@ -1,13 +1,10 @@
import { SelectedDetail } from "@material/mwc-list";
import "@material/mwc-menu/mwc-menu-surface";
import { mdiCog, mdiFilterVariantRemove } 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 { repeat } from "lit/directives/repeat";
import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event";
import { navigate } from "../common/navigate";
import {
LabelRegistryEntry,
subscribeLabelRegistry,
@@ -53,11 +50,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
<div slot="header" class="header">
${this.hass.localize("ui.panel.config.labels.caption")}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._shouldRender
@@ -67,44 +60,30 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
class="ha-scrollbar"
multi
>
${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>`;
}
)}
${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>`;
})}
</mwc-list>
`
: nothing}
</ha-expansion-panel>
${this.expanded
? html`<ha-list-item
graphic="icon"
@click=${this._manageLabels}
class="add"
>
<ha-svg-icon slot="graphic" .path=${mdiCog}></ha-svg-icon>
${this.hass.localize("ui.panel.config.labels.manage_labels")}
</ha-list-item>`
: nothing}
`;
}
@@ -113,15 +92,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
setTimeout(() => {
if (!this.expanded) return;
this.renderRoot.querySelector("mwc-list")!.style.height =
`${this.clientHeight - (49 + 48)}px`;
`${this.clientHeight - 49}px`;
}, 300);
}
}
private _manageLabels() {
navigate("/config/labels");
}
private _expandedWillChange(ev) {
this._shouldRender = ev.detail.expanded;
}
@@ -154,21 +129,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
css`
:host {
position: relative;
border-bottom: 1px solid var(--divider-color);
}
:host([expanded]) {
@@ -183,10 +148,6 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -197,25 +158,19 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
.warning {
color: var(--error-color);
}
ha-label {
--ha-label-background-color: var(--color, var(--grey-color));
--ha-label-background-color: var(--color);
--ha-label-background-opacity: 0.5;
}
.add {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
`,
];
}

View File

@@ -1,12 +1,11 @@
import { SelectedDetail } from "@material/mwc-list";
import { mdiFilterVariantRemove } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { haStyleScrollbar } from "../resources/styles";
import type { HomeAssistant } from "../types";
import "./ha-check-list-item";
import "./ha-expansion-panel";
import "./ha-check-list-item";
import "./ha-icon";
@customElement("ha-filter-states")
@@ -44,11 +43,7 @@ export class HaFilterStates extends LitElement {
<div slot="header" class="header">
${this.label}
${this.value?.length
? html`<div class="badge">${this.value?.length}</div>
<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilter}
></ha-icon-button>`
? html`<div class="badge">${this.value?.length}</div>`
: nothing}
</div>
${this._shouldRender
@@ -123,15 +118,6 @@ export class HaFilterStates extends LitElement {
});
}
private _clearFilter(ev) {
ev.preventDefault();
this.value = undefined;
fireEvent(this, "data-table-filter-changed", {
value: undefined,
items: undefined,
});
}
static get styles(): CSSResultGroup {
return [
haStyleScrollbar,
@@ -151,10 +137,6 @@ export class HaFilterStates extends LitElement {
display: flex;
align-items: center;
}
.header ha-icon-button {
margin-inline-start: auto;
margin-inline-end: 8px;
}
.badge {
display: inline-block;
margin-left: 8px;
@@ -165,11 +147,11 @@ export class HaFilterStates extends LitElement {
border-radius: 50%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
`,
];

View File

@@ -1,56 +0,0 @@
import {
mdiHome,
mdiHomeFloor0,
mdiHomeFloor1,
mdiHomeFloor2,
mdiHomeFloor3,
mdiHomeFloorNegative1,
} from "@mdi/js";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators";
import { FloorRegistryEntry } from "../data/floor_registry";
import "./ha-icon";
import "./ha-svg-icon";
export const floorDefaultIconPath = (
floor: Pick<FloorRegistryEntry, "level">
) => {
switch (floor.level) {
case 0:
return mdiHomeFloor0;
case 1:
return mdiHomeFloor1;
case 2:
return mdiHomeFloor2;
case 3:
return mdiHomeFloor3;
case -1:
return mdiHomeFloorNegative1;
}
return mdiHome;
};
@customElement("ha-floor-icon")
export class HaFloorIcon extends LitElement {
@property({ attribute: false }) public floor!: Pick<
FloorRegistryEntry,
"icon" | "level"
>;
@property() public icon?: string;
protected render() {
if (this.floor.icon) {
return html`<ha-icon .icon=${this.floor.icon}></ha-icon>`;
}
const defaultPath = floorDefaultIconPath(this.floor);
return html`<ha-svg-icon .path=${defaultPath}></ha-svg-icon>`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-floor-icon": HaFloorIcon;
}
}

View File

@@ -1,19 +1,16 @@
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { LitElement, PropertyValues, TemplateResult, html } from "lit";
import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import memoizeOne from "memoize-one";
import { fireEvent } from "../common/dom/fire_event";
import { computeDomain } from "../common/entity/compute_domain";
import {
ScorableTextItem,
fuzzyFilterSort,
ScorableTextItem,
} from "../common/string/filter/sequence-matching";
import {
AreaRegistryEntry,
updateAreaRegistryEntry,
} from "../data/area_registry";
import { AreaRegistryEntry } from "../data/area_registry";
import {
DeviceEntityDisplayLookup,
DeviceRegistryEntry,
@@ -21,34 +18,34 @@ import {
} from "../data/device_registry";
import { EntityRegistryDisplayEntry } from "../data/entity_registry";
import {
FloorRegistryEntry,
createFloorRegistryEntry,
getFloorAreaLookup,
subscribeFloorRegistry,
} from "../data/floor_registry";
import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
showAlertDialog,
showPromptDialog,
} from "../dialogs/generic/show-dialog-box";
import { HomeAssistant, ValueChangedEvent } from "../types";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./ha-combo-box";
import type { HaComboBox } from "./ha-combo-box";
import "./ha-floor-icon";
import "./ha-icon-button";
import "./ha-list-item";
import "./ha-svg-icon";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import {
createFloorRegistryEntry,
FloorRegistryEntry,
getFloorAreaLookup,
subscribeFloorRegistry,
} from "../data/floor_registry";
type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
const ADD_NEW_ID = "___ADD_NEW___";
const NO_FLOORS_ID = "___NO_FLOORS___";
const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";
const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) =>
html`<ha-list-item
graphic="icon"
class=${classMap({ "add-new": item.floor_id === ADD_NEW_ID })}
class=${classMap({ "add-new": item.floor_id === "add_new" })}
>
<ha-floor-icon slot="graphic" .floor=${item}></ha-floor-icon>
${item.icon
? html`<ha-icon slot="graphic" .icon=${item.icon}></ha-icon>`
: nothing}
${item.name}
</ha-list-item>`;
@@ -151,6 +148,18 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
noAdd: this["noAdd"],
excludeFloors: this["excludeFloors"]
): FloorRegistryEntry[] => {
if (!floors.length) {
return [
{
floor_id: "no_floors",
name: this.hass.localize("ui.components.floor-picker.no_floors"),
icon: null,
level: 0,
aliases: [],
},
];
}
let deviceEntityLookup: DeviceEntityDisplayLookup = {};
let inputDevices: DeviceRegistryEntry[] | undefined;
let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -275,7 +284,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)
)
);
@@ -290,10 +299,10 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
if (!outputFloors.length) {
outputFloors = [
{
floor_id: NO_FLOORS_ID,
name: this.hass.localize("ui.components.floor-picker.no_floors"),
floor_id: "no_floors",
name: this.hass.localize("ui.components.floor-picker.no_match"),
icon: null,
level: null,
level: 0,
aliases: [],
},
];
@@ -304,10 +313,10 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
: [
...outputFloors,
{
floor_id: ADD_NEW_ID,
floor_id: "add_new",
name: this.hass.localize("ui.components.floor-picker.add_new"),
icon: "mdi:plus",
level: null,
level: 0,
aliases: [],
},
];
@@ -334,7 +343,7 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
this.excludeFloors
).map((floor) => ({
...floor,
strings: [floor.floor_id, floor.name, ...floor.aliases],
strings: [floor.floor_id, floor.name], // ...floor.aliases
}));
this.comboBox.items = floors;
this.comboBox.filteredItems = floors;
@@ -378,36 +387,20 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
const filteredItems = fuzzyFilterSort<ScorableFloorRegistryEntry>(
filterString,
target.items?.filter(
(item) => ![NO_FLOORS_ID, ADD_NEW_ID].includes(item.label_id)
) || []
target.items || []
);
if (filteredItems.length === 0) {
if (this.noAdd) {
this.comboBox.filteredItems = [
{
floor_id: NO_FLOORS_ID,
name: this.hass.localize("ui.components.floor-picker.no_match"),
icon: null,
level: null,
aliases: [],
},
] as FloorRegistryEntry[];
} else {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
floor_id: ADD_NEW_SUGGESTION_ID,
name: this.hass.localize(
"ui.components.floor-picker.add_new_sugestion",
{ name: this._suggestion }
),
icon: "mdi:plus",
level: null,
aliases: [],
},
] as FloorRegistryEntry[];
}
if (!this.noAdd && filteredItems?.length === 0) {
this._suggestion = filterString;
this.comboBox.filteredItems = [
{
floor_id: "add_new_suggestion",
name: this.hass.localize(
"ui.components.floor-picker.add_new_sugestion",
{ name: this._suggestion }
),
picture: null,
},
];
} else {
this.comboBox.filteredItems = filteredItems;
}
@@ -425,13 +418,11 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
ev.stopPropagation();
let newValue = ev.detail.value;
if (newValue === NO_FLOORS_ID) {
if (newValue === "no_floors") {
newValue = "";
this.comboBox.setInputValue("");
return;
}
if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
if (!["add_new_suggestion", "add_new"].includes(newValue)) {
if (newValue !== this._value) {
this._setValue(newValue);
}
@@ -439,18 +430,24 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
}
(ev.target as any).value = this._value;
this.hass.loadFragmentTranslation("config");
showFloorRegistryDetailDialog(this, {
suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
createEntry: async (values, addedAreas) => {
showPromptDialog(this, {
title: this.hass.localize("ui.components.floor-picker.add_dialog.title"),
text: this.hass.localize("ui.components.floor-picker.add_dialog.text"),
confirmText: this.hass.localize(
"ui.components.floor-picker.add_dialog.add"
),
inputLabel: this.hass.localize(
"ui.components.floor-picker.add_dialog.name"
),
defaultValue:
newValue === "add_new_suggestion" ? this._suggestion : undefined,
confirm: async (name) => {
if (!name) {
return;
}
try {
const floor = await createFloorRegistryEntry(this.hass, values);
addedAreas.forEach((areaId) => {
updateAreaRegistryEntry(this.hass, areaId, {
floor_id: floor.floor_id,
});
const floor = await createFloorRegistryEntry(this.hass, {
name,
});
const floors = [...this._floors!, floor];
this.comboBox.filteredItems = this._getFloors(
@@ -472,16 +469,18 @@ export class HaFloorPicker extends SubscribeMixin(LitElement) {
} catch (err: any) {
showAlertDialog(this, {
title: this.hass.localize(
"ui.components.floor-picker.failed_create_floor"
"ui.components.floor-picker.add_dialog.failed_create_floor"
),
text: err.message,
});
}
},
cancel: () => {
this._setValue(undefined);
this._suggestion = undefined;
this.comboBox.setInputValue("");
},
});
this._suggestion = undefined;
this.comboBox.setInputValue("");
}
private _setValue(value?: string) {

View File

@@ -1,169 +0,0 @@
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;
}
}

View File

@@ -118,7 +118,7 @@ export class HaIconPicker extends LitElement {
<ha-icon .icon=${this._value || this.placeholder} slot="icon">
</ha-icon>
`
: html`<slot slot="icon" name="fallback"></slot>`}
: html`<slot name="fallback"></slot>`}
</ha-combo-box>
`;
}

View File

@@ -385,8 +385,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
const filteredItems = fuzzyFilterSort<ScorableLabelItem>(
filterString,
target.items?.filter(
(item) => ![NO_LABELS_ID, ADD_NEW_ID].includes(item.label_id)
target.items?.filter((item) =>
[NO_LABELS_ID, ADD_NEW_ID].includes(item.ignoreFilter)
) || []
);
if (filteredItems.length === 0) {
@@ -445,8 +445,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
(ev.target as any).value = this._value;
this.hass.loadFragmentTranslation("config");
showLabelDetailDialog(this, {
entry: undefined,
suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

View File

@@ -43,7 +43,6 @@ class HaLabel extends LitElement {
border-radius: 18px;
color: var(--ha-label-text-color);
--mdc-icon-size: 12px;
text-wrap: nowrap;
}
.content > * {
position: relative;

View File

@@ -2,10 +2,8 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { LitElement, TemplateResult, css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../common/color/compute-color";
import { fireEvent } from "../common/dom/fire_event";
import { stringCompare } from "../common/string/compare";
import {
LabelRegistryEntry,
subscribeLabelRegistry,
@@ -77,7 +75,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
@property({ type: Boolean }) public required = false;
@state() private _labels?: { [id: string]: LabelRegistryEntry };
@state() private _labels?: LabelRegistryEntry[];
@query("ha-label-picker", true) public labelPicker!: HaLabelPicker;
@@ -94,44 +92,28 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeLabelRegistry(this.hass.connection, (labels) => {
const lookUp = {};
labels.forEach((label) => {
lookUp[label.label_id] = label;
});
this._labels = lookUp;
this._labels = labels;
}),
];
}
private _sortedLabels = memoizeOne(
(
value: string[] | undefined,
labels: { [id: string]: LabelRegistryEntry } | undefined,
language: string
) =>
value
?.map((id) => labels?.[id])
.sort((a, b) => stringCompare(a?.name || "", b?.name || "", language))
);
protected render(): TemplateResult {
const labels = this._sortedLabels(
this.value,
this._labels,
this.hass.locale.language
);
return html`
${labels?.length
${this.value?.length
? html`<ha-chip-set>
${repeat(
labels,
(label) => label?.label_id,
(label) => {
this.value,
(item) => item,
(item, idx) => {
const label = this._labels?.find(
(lbl) => lbl.label_id === item
);
const color = label?.color
? computeCssColor(label.color)
: undefined;
return html`
<ha-input-chip
.idx=${idx}
.item=${label}
@remove=${this._removeItem}
@click=${this._openDetail}
@@ -172,12 +154,12 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
}
private _removeItem(ev) {
const label = ev.currentTarget.item;
this._setValue(this._value.filter((id) => id !== label.label_id));
this._value.splice(ev.target.idx, 1);
this._setValue([...this._value]);
}
private _openDetail(ev) {
const label = ev.currentTarget.item;
const label = ev.target.item;
showLabelDetailDialog(this, {
entry: label,
updateEntry: async (values) => {
@@ -186,6 +168,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
label.label_id,
values
);
this._labels = this._labels!.map((lbl) =>
lbl.label_id === updated.label_id ? updated : lbl
);
return updated;
},
});
@@ -214,7 +199,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
margin-bottom: 8px;
}
ha-input-chip {
--md-input-chip-selected-container-color: var(--color, var(--grey-color));
--md-input-chip-selected-container-color: var(--color);
--ha-input-chip-selected-container-opacity: 0.5;
}
`;

View File

@@ -1,44 +0,0 @@
import { MdMenuItem } from "@material/web/menu/menu-item";
import "element-internals-polyfill";
import { CSSResult, css } from "lit";
import { customElement } from "lit/decorators";
@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);
}
:host(.warning) {
--md-menu-item-label-text-color: var(--error-color);
--md-menu-item-leading-icon-color: var(--error-color);
}
::slotted([slot="headline"]) {
text-wrap: nowrap;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-menu-item": HaMenuItem;
}
}

View File

@@ -1,22 +0,0 @@
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;
}
}

View File

@@ -1,49 +0,0 @@
import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
import "element-internals-polyfill";
import { css } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-outlined-text-field")
export class HaOutlinedTextField extends MdOutlinedTextField {
static override styles = [
...super.styles,
css`
:host {
--md-sys-color-on-surface: var(--primary-text-color);
--md-sys-color-primary: var(--primary-text-color);
--md-outlined-text-field-input-text-color: var(--primary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-outlined-field-outline-color: var(--outline-color);
--md-outlined-field-focus-outline-color: var(--primary-color);
--md-outlined-field-hover-outline-color: var(--outline-hover-color);
}
:host([dense]) {
--md-outlined-field-top-space: 5.5px;
--md-outlined-field-bottom-space: 5.5px;
--md-outlined-field-container-shape-start-start: 10px;
--md-outlined-field-container-shape-start-end: 10px;
--md-outlined-field-container-shape-end-end: 10px;
--md-outlined-field-container-shape-end-start: 10px;
--md-outlined-field-focus-outline-width: 1px;
--mdc-icon-size: var(--md-input-chip-icon-size, 18px);
}
md-outlined-field {
background: var(--ha-outlined-text-field-container-color, transparent);
opacity: var(--ha-outlined-text-field-container-opacity, 1);
border-start-start-radius: var(--_container-shape-start-start);
border-start-end-radius: var(--_container-shape-start-end);
border-end-end-radius: var(--_container-shape-end-end);
border-end-start-radius: var(--_container-shape-end-start);
}
.input {
font-family: Roboto, sans-serif;
}
`,
];
}
declare global {
interface HTMLElementTagNameMap {
"ha-outlined-text-field": HaOutlinedTextField;
}
}

View File

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

View File

@@ -1,153 +0,0 @@
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;
}
}

View File

@@ -30,7 +30,6 @@ export class HaLabelSelector extends LitElement {
if (this.selector.label.multiple) {
return html`
<ha-labels-picker
no-add
.hass=${this.hass}
.value=${ensureArray(this.value ?? [])}
.disabled=${this.disabled}
@@ -42,7 +41,6 @@ export class HaLabelSelector extends LitElement {
}
return html`
<ha-label-picker
no-add
.hass=${this.hass}
.value=${this.value}
.disabled=${this.disabled}

View File

@@ -30,7 +30,6 @@ 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"),

View File

@@ -1,38 +0,0 @@
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;
}
}

View File

@@ -6,10 +6,10 @@ import "@material/mwc-menu/mwc-menu-surface";
import {
mdiClose,
mdiDevices,
mdiHome,
mdiFloorPlan,
mdiLabel,
mdiPlus,
mdiTextureBox,
mdiSofa,
mdiUnfoldMoreVertical,
} from "@mdi/js";
import { ComboBoxLightOpenedChangedEvent } from "@vaadin/combo-box/vaadin-combo-box-light";
@@ -18,23 +18,30 @@ import {
HassServiceTarget,
UnsubscribeFunc,
} from "home-assistant-js-websocket";
import { CSSResultGroup, LitElement, css, html, nothing, unsafeCSS } from "lit";
import { css, CSSResultGroup, html, LitElement, nothing, unsafeCSS } from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { ensureArray } from "../common/array/ensure-array";
import { computeCssColor } from "../common/color/compute-color";
import { hex2rgb } from "../common/color/convert-color";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import { computeDomain } from "../common/entity/compute_domain";
import { computeStateName } from "../common/entity/compute_state_name";
import { isValidEntityId } from "../common/entity/valid_entity_id";
import { AreaRegistryEntry } from "../data/area_registry";
import {
DeviceRegistryEntry,
computeDeviceName,
DeviceRegistryEntry,
} from "../data/device_registry";
import { EntityRegistryDisplayEntry } from "../data/entity_registry";
import { HomeAssistant } from "../types";
import "./device/ha-device-picker";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./entity/ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
import "./ha-area-floor-picker";
import "./ha-icon-button";
import "./ha-input-helper-text";
import "./ha-svg-icon";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import {
FloorRegistryEntry,
subscribeFloorRegistry,
@@ -43,17 +50,9 @@ import {
LabelRegistryEntry,
subscribeLabelRegistry,
} from "../data/label_registry";
import { SubscribeMixin } from "../mixins/subscribe-mixin";
import { HomeAssistant } from "../types";
import "./device/ha-device-picker";
import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
import "./entity/ha-entity-picker";
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
import "./ha-area-floor-picker";
import { floorDefaultIconPath } from "./ha-floor-icon";
import "./ha-icon-button";
import "./ha-input-helper-text";
import "./ha-svg-icon";
import { computeCssColor } from "../common/color/compute-color";
import { AreaRegistryEntry } from "../data/area_registry";
import { hex2rgb } from "../common/color/convert-color";
@customElement("ha-target-picker")
export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -139,7 +138,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
floor?.name || floor_id,
undefined,
floor?.icon,
floor ? floorDefaultIconPath(floor) : mdiHome
mdiFloorPlan
);
})
: ""}
@@ -152,7 +151,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
area?.name || area_id,
undefined,
area?.icon,
mdiTextureBox
mdiSofa
);
})
: nothing}

View File

@@ -1,36 +0,0 @@
import { LitElement, TemplateResult, css, html } from "lit";
import { customElement, property } from "lit/decorators";
@customElement("ha-tree-indicator")
export class HaTreeIndicator extends LitElement {
@property({ type: Boolean, reflect: true })
public end?: boolean = false;
protected render(): TemplateResult {
return html`
<svg width="100%" height="100%" viewBox="0 0 48 48">
<line x1="24" y1="0" x2="24" y2=${this.end ? "24" : "48"}></line>
<line x1="24" y1="24" x2="36" y2="24"></line>
</svg>
`;
}
static styles = css`
:host {
display: block;
width: 48px;
height: 48px;
}
line {
stroke: var(--divider-color);
stroke-width: 2;
stroke-dasharray: 2;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"ha-tree-indicator": HaTreeIndicator;
}
}

View File

@@ -1,18 +1,11 @@
import { mdiClose, mdiMagnify } from "@mdi/js";
import {
CSSResultGroup,
LitElement,
TemplateResult,
css,
html,
nothing,
} from "lit";
import "@material/web/textfield/outlined-text-field";
import type { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field";
import { mdiMagnify } from "@mdi/js";
import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
import { customElement, property, query } from "lit/decorators";
import { fireEvent } from "../common/dom/fire_event";
import { HomeAssistant } from "../types";
import "./ha-icon-button";
import "./ha-outlined-text-field";
import type { HaOutlinedTextField } from "./ha-outlined-text-field";
import "./ha-svg-icon";
@customElement("search-input-outlined")
@@ -37,22 +30,19 @@ class SearchInputOutlined extends LitElement {
this._input?.focus();
}
@query("ha-outlined-text-field", true) private _input!: HaOutlinedTextField;
@query("md-outlined-text-field", true) private _input!: MdOutlinedTextField;
protected render(): TemplateResult {
const placeholder =
this.placeholder || this.hass.localize("ui.common.search");
return html`
<ha-outlined-text-field
<md-outlined-text-field
.autofocus=${this.autofocus}
.aria-label=${this.label || this.hass.localize("ui.common.search")}
.placeholder=${placeholder}
.placeholder=${this.placeholder ||
this.hass.localize("ui.common.search")}
.value=${this.filter || ""}
icon
.iconTrailing=${this.filter || this.suffix}
@input=${this._filterInputChanged}
dense
>
<slot name="prefix" slot="leading-icon">
<ha-svg-icon
@@ -61,16 +51,7 @@ class SearchInputOutlined extends LitElement {
.path=${mdiMagnify}
></ha-svg-icon>
</slot>
${this.filter
? html`<ha-icon-button
aria-label="Clear input"
slot="trailing-icon"
@click=${this._clearSearch}
.path=${mdiClose}
>
</ha-icon-button>`
: nothing}
</ha-outlined-text-field>
</md-outlined-text-field>
`;
}
@@ -82,31 +63,44 @@ class SearchInputOutlined extends LitElement {
this._filterChanged(e.target.value);
}
private async _clearSearch() {
this._filterChanged("");
}
static get styles(): CSSResultGroup {
return css`
:host {
display: inline-flex;
/* For iOS */
z-index: 0;
--mdc-icon-button-size: 24px;
}
ha-outlined-text-field {
md-outlined-text-field {
display: block;
width: 100%;
--ha-outlined-text-field-container-color: var(--card-background-color);
--md-sys-color-on-surface: var(--primary-text-color);
--md-sys-color-primary: var(--primary-text-color);
--md-outlined-text-field-input-text-color: var(--primary-text-color);
--md-sys-color-on-surface-variant: var(--secondary-text-color);
--md-outlined-field-top-space: 5.5px;
--md-outlined-field-bottom-space: 5.5px;
--md-outlined-field-outline-color: var(--outline-color);
--md-outlined-field-container-shape-start-start: 10px;
--md-outlined-field-container-shape-start-end: 10px;
--md-outlined-field-container-shape-end-end: 10px;
--md-outlined-field-container-shape-end-start: 10px;
--md-outlined-field-focus-outline-width: 1px;
--md-outlined-field-focus-outline-color: var(--primary-color);
}
ha-svg-icon,
ha-icon-button {
display: flex;
--mdc-icon-size: var(--md-input-chip-icon-size, 18px);
color: var(--primary-text-color);
}
ha-svg-icon {
outline: none;
}
.clear-button {
--mdc-icon-size: 20px;
}
.trailing {
display: flex;
align-items: center;
}
`;
}
}

View File

@@ -10,7 +10,7 @@ import { computeDomain } from "../common/entity/compute_domain";
export { subscribeEntityRegistryDisplay } from "./ws-entity_registry_display";
type EntityCategory = "config" | "diagnostic";
type entityCategory = "config" | "diagnostic";
export interface EntityRegistryDisplayEntry {
entity_id: string;
@@ -20,7 +20,7 @@ export interface EntityRegistryDisplayEntry {
area_id?: string;
labels: string[];
hidden?: boolean;
entity_category?: EntityCategory;
entity_category?: entityCategory;
translation_key?: string;
platform?: string;
display_precision?: number;
@@ -40,7 +40,7 @@ export interface EntityRegistryDisplayEntryResponse {
hb?: boolean;
dp?: number;
}[];
entity_categories: Record<number, EntityCategory>;
entity_categories: Record<number, entityCategory>;
}
export interface EntityRegistryEntry {
@@ -55,7 +55,7 @@ export interface EntityRegistryEntry {
labels: string[];
disabled_by: "user" | "device" | "integration" | "config_entry" | null;
hidden_by: Exclude<EntityRegistryEntry["disabled_by"], "config_entry">;
entity_category: EntityCategory | null;
entity_category: entityCategory | null;
has_entity_name: boolean;
original_name?: string;
unique_id: string;

View File

@@ -1,16 +1,16 @@
import { Connection, createCollection } from "home-assistant-js-websocket";
import { Store } from "home-assistant-js-websocket/dist/store";
import { stringCompare } from "../common/string/compare";
import { debounce } from "../common/util/debounce";
import { HomeAssistant } from "../types";
import { AreaRegistryEntry } from "./area_registry";
import { debounce } from "../common/util/debounce";
export { subscribeAreaRegistry } from "./ws-area_registry";
export interface FloorRegistryEntry {
floor_id: string;
name: string;
level: number | null;
level: number;
icon: string | null;
aliases: string[];
}

View File

@@ -28,7 +28,6 @@ export type ItemType =
| "entity"
| "floor"
| "group"
| "label"
| "scene"
| "script"
| "automation_blueprint"

View File

@@ -31,7 +31,6 @@ export type Selector =
| DateSelector
| DateTimeSelector
| DeviceSelector
| FloorSelector
| LegacyDeviceSelector
| DurationSelector
| EntitySelector
@@ -171,14 +170,6 @@ 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"] & {
/**

View File

@@ -190,7 +190,7 @@ class LightColorTempPicker extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: -webkit-linear-gradient(
top,

View File

@@ -1,8 +1,9 @@
import { mdiShieldOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { stateColorCss } from "../../../common/entity/state_color";
import "../../../components/ha-control-button";
import "../../../components/ha-outlined-button";
import "../../../components/ha-state-icon";
import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel";
import "../../../state-control/alarm_control_panel/ha-state-control-alarm_control_panel-modes";
@@ -56,10 +57,15 @@ class MoreInfoAlarmControlPanel extends LitElement {
${["triggered", "arming", "pending"].includes(this.stateObj.state)
? html`
<div class="status">
<span></span>
<div class="icon">
<ha-state-icon .hass=${this.hass} .stateObj=${this.stateObj}>
</ha-state-icon>
</div>
<ha-outlined-button @click=${this._disarm}>
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
<ha-svg-icon slot="icon" .path=${mdiShieldOff}></ha-svg-icon>
</ha-outlined-button>
</div>
`
: html`
@@ -70,15 +76,7 @@ class MoreInfoAlarmControlPanel extends LitElement {
</ha-state-control-alarm_control_panel-modes>
`}
</div>
<div>
${["triggered", "arming", "pending"].includes(this.stateObj.state)
? html`
<ha-control-button @click=${this._disarm} class="disarm">
${this.hass.localize("ui.card.alarm_control_panel.disarm")}
</ha-control-button>
`
: nothing}
</div>
<span></span>
`;
}
@@ -129,12 +127,8 @@ class MoreInfoAlarmControlPanel extends LitElement {
transition: background-color 180ms ease-in-out;
opacity: 0.2;
}
ha-control-button.disarm {
height: 60px;
min-width: 130px;
max-width: 200px;
margin: 0 auto;
--control-button-border-radius: 24px;
.status ha-outlined-button {
margin-top: 32px;
}
`,
];

View File

@@ -170,7 +170,7 @@ class MoreInfoLock extends LitElement {
--control-button-border-radius: 24px;
}
.open-button {
width: 130px;
width: 100px;
--control-button-background-color: var(--state-color);
}
.open-button.confirm {

View File

@@ -77,8 +77,6 @@ declare global {
}
}
const DEFAULT_VIEW: View = "info";
@customElement("ha-more-info-dialog")
export class MoreInfoDialog extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -87,9 +85,7 @@ export class MoreInfoDialog extends LitElement {
@state() private _entityId?: string | null;
@state() private _currView: View = DEFAULT_VIEW;
@state() private _initialView: View = DEFAULT_VIEW;
@state() private _currView: View = "info";
@state() private _childView?: ChildView;
@@ -106,8 +102,7 @@ export class MoreInfoDialog extends LitElement {
this.closeDialog();
return;
}
this._currView = params.view || DEFAULT_VIEW;
this._initialView = params.view || DEFAULT_VIEW;
this._currView = params.view || "info";
this._childView = undefined;
this.large = false;
this._loadEntityRegistryEntry();
@@ -132,7 +127,6 @@ export class MoreInfoDialog extends LitElement {
this._entry = undefined;
this._childView = undefined;
this._infoEditMode = false;
this._initialView = DEFAULT_VIEW;
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
@@ -189,15 +183,10 @@ export class MoreInfoDialog extends LitElement {
if (this._childView) {
this._childView = undefined;
} else {
this.setView(this._initialView);
this.setView("info");
}
}
private _resetInitialView() {
this._initialView = DEFAULT_VIEW;
this.setView(DEFAULT_VIEW);
}
private _goToHistory() {
this.setView("history");
}
@@ -273,10 +262,7 @@ export class MoreInfoDialog extends LitElement {
const title = this._childView?.viewTitle ?? name;
const isDefaultView = this._currView === DEFAULT_VIEW && !this._childView;
const isSpecificInitialView =
this._initialView !== DEFAULT_VIEW && !this._childView;
const showCloseIcon = isDefaultView || isSpecificInitialView;
const isInfoView = this._currView === "info" && !this._childView;
return html`
<ha-dialog
@@ -288,7 +274,7 @@ export class MoreInfoDialog extends LitElement {
flexContent
>
<ha-dialog-header slot="heading">
${showCloseIcon
${isInfoView
? html`
<ha-icon-button
slot="navigationIcon"
@@ -311,7 +297,7 @@ export class MoreInfoDialog extends LitElement {
<span slot="title" .title=${title} @click=${this._enlarge}>
${title}
</span>
${isDefaultView
${isInfoView
? html`
${this.shouldShowHistory(domain)
? html`
@@ -421,34 +407,7 @@ export class MoreInfoDialog extends LitElement {
`
: nothing}
`
: isSpecificInitialView
? html`
<ha-button-menu
corner="BOTTOM_END"
menuCorner="END"
slot="actionItems"
@closed=${stopPropagation}
fixed
>
<ha-icon-button
slot="trigger"
.label=${this.hass.localize("ui.common.menu")}
.path=${mdiDotsVertical}
></ha-icon-button>
<ha-list-item
graphic="icon"
@request-selected=${this._resetInitialView}
>
${this.hass.localize("ui.dialogs.more_info_control.info")}
<ha-svg-icon
slot="graphic"
.path=${mdiInformationOutline}
></ha-svg-icon>
</ha-list-item>
</ha-button-menu>
`
: nothing}
: nothing}
</ha-dialog-header>
<div
class="content"

View File

@@ -142,12 +142,9 @@ 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));

View File

@@ -1,13 +1,12 @@
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button/mwc-button";
import "@material/web/divider/divider";
import {
mdiArrowDown,
mdiArrowUp,
mdiClose,
mdiFilterRemove,
mdiFilterVariant,
mdiFilterVariantRemove,
mdiFormatListChecks,
mdiMenuDown,
} from "@mdi/js";
@@ -20,7 +19,6 @@ import {
nothing,
} from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { fireEvent } from "../common/dom/fire_event";
import { LocalizeFunc } from "../common/translations/localize";
import "../components/chips/ha-assist-chip";
@@ -32,10 +30,7 @@ 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";
@@ -178,10 +173,6 @@ export class HaTabsSubpageDataTable extends LitElement {
@query("ha-data-table", true) private _dataTable!: HaDataTable;
@query("#group-by-menu") private _groupByMenu!: HaMenu;
@query("#sort-by-menu") private _sortByMenu!: HaMenu;
private _showPaneController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width > 750,
});
@@ -196,14 +187,6 @@ export class HaTabsSubpageDataTable extends LitElement {
}
}
private _toggleGroupBy() {
this._groupByMenu.open = !this._groupByMenu.open;
}
private _toggleSortBy() {
this._sortByMenu.open = !this._sortByMenu.open;
}
protected render(): TemplateResult {
const localize = this.localizeFunc || this.hass.localize;
const showPane = this._showPaneController.value ?? !this.narrow;
@@ -228,9 +211,6 @@ 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>`
@@ -246,38 +226,73 @@ export class HaTabsSubpageDataTable extends LitElement {
</search-input-outlined>`;
const sortByMenu = Object.values(this.columns).find((col) => col.sortable)
? html`
? html`<ha-button-menu fixed>
<ha-assist-chip
.label=${localize("ui.components.subpage-data-table.sort_by", {
sortColumn: this._sortColumn
? ` ${this.columns[this._sortColumn].title || this.columns[this._sortColumn].label}`
: "",
})}
id="sort-by-anchor"
@click=${this._toggleSortBy}
slot="trigger"
>
<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>
${Object.entries(this.columns).map(([id, column]) =>
column.sortable
? html`<ha-list-item
.value=${id}
@request-selected=${this._handleSortBy}
hasMeta
.activated=${id === this._sortColumn}
>
${this._sortColumn === id
? html`<ha-svg-icon
slot="meta"
.path=${this._sortDirection === "desc"
? mdiArrowDown
: mdiArrowUp}
></ha-svg-icon>`
: nothing}
${column.title || column.label}
</ha-list-item>`
: nothing
)}
</ha-button-menu>`
: nothing;
const groupByMenu = Object.values(this.columns).find((col) => col.groupable)
? html`
? html`<ha-button-menu fixed>
<ha-assist-chip
.label=${localize("ui.components.subpage-data-table.group_by", {
groupColumn: this._groupColumn
? ` ${this.columns[this._groupColumn].title || this.columns[this._groupColumn].label}`
: "",
})}
id="group-by-anchor"
@click=${this._toggleGroupBy}
slot="trigger"
>
<ha-svg-icon slot="trailing-icon" .path=${mdiMenuDown}></ha-svg-icon
></ha-assist-chip>
`
${Object.entries(this.columns).map(([id, column]) =>
column.groupable
? html`<ha-list-item
.value=${id}
@request-selected=${this._handleGroupBy}
.activated=${id === this._groupColumn}
>
${column.title || column.label}
</ha-list-item> `
: nothing
)}
<li divider role="separator"></li>
<ha-list-item
.value=${undefined}
@request-selected=${this._handleGroupBy}
.activated=${this._groupColumn === undefined}
>${localize(
"ui.components.subpage-data-table.dont_group_by"
)}</ha-list-item
>
</ha-button-menu>`
: nothing;
return html`
@@ -297,54 +312,11 @@ export class HaTabsSubpageDataTable extends LitElement {
>
${this._selectMode
? html`<div class="selection-bar" slot="toolbar">
<div class="selection-controls">
<div class="center-vertical">
<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}>
<div slot="headline">
${localize("ui.components.subpage-data-table.select_all")}
</div>
</ha-menu-item>
<ha-menu-item .value=${undefined} @click=${this._selectNone}>
<div slot="headline">
${localize(
"ui.components.subpage-data-table.select_none"
)}
</div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item
.value=${undefined}
@click=${this._disableSelectMode}
>
<div slot="headline">
${localize(
"ui.components.subpage-data-table.close_select_mode"
)}
</div>
</ha-menu-item>
</ha-button-menu-new>
<p>
${localize("ui.components.subpage-data-table.selected", {
selected: this.selected || "0",
@@ -358,7 +330,30 @@ export class HaTabsSubpageDataTable extends LitElement {
: nothing}
${this.showFilters
? !showPane
? nothing
? html`<ha-dialog
open
hideActions
.heading=${localize("ui.components.subpage-data-table.filters")}
>
<ha-dialog-header slot="heading">
<ha-icon-button
slot="navigationIcon"
.path=${mdiClose}
@click=${this._toggleFilters}
></ha-icon-button>
<span slot="title"
>${localize(
"ui.components.subpage-data-table.filters"
)}</span
>
<ha-icon-button
slot="actionItems"
.path=${mdiFilterRemove}
></ha-icon-button>
</ha-dialog-header>
<div class="filter-dialog-content">
<slot name="filter-pane"></slot></div
></ha-dialog>`
: html`<div class="pane" slot="pane">
<div class="table-header">
<ha-assist-chip
@@ -373,15 +368,10 @@ export class HaTabsSubpageDataTable extends LitElement {
.path=${mdiFilterVariant}
></ha-svg-icon>
</ha-assist-chip>
${this.filters
? html`<ha-icon-button
.path=${mdiFilterVariantRemove}
@click=${this._clearFilters}
.label=${localize(
"ui.components.subpage-data-table.clear_filter"
)}
></ha-icon-button>`
: nothing}
<ha-icon-button
.path=${mdiFilterRemove}
@click=${this._clearFilters}
></ha-icon-button>
</div>
<div class="pane-content">
<slot name="filter-pane"></slot>
@@ -441,91 +431,6 @@ export class HaTabsSubpageDataTable extends LitElement {
</ha-data-table>`}
<div slot="fab"><slot name="fab"></slot></div>
</hass-tabs-subpage>
<ha-menu anchor="group-by-anchor" id="group-by-menu" positioning="fixed">
${Object.entries(this.columns).map(([id, column]) =>
column.groupable
? html`
<ha-menu-item
.value=${id}
@click=${this._handleGroupBy}
.selected=${id === this._groupColumn}
class=${classMap({ selected: id === this._groupColumn })}
>
${column.title || column.label}
</ha-menu-item>
`
: nothing
)}
<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")}
</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`
<ha-menu-item
.value=${id}
@click=${this._handleSortBy}
keep-open
.selected=${id === this._sortColumn}
class=${classMap({ selected: id === this._sortColumn })}
>
${this._sortColumn === id
? html`
<ha-svg-icon
slot="end"
.path=${this._sortDirection === "desc"
? mdiArrowDown
: mdiArrowUp}
></ha-svg-icon>
`
: nothing}
${column.title || column.label}
</ha-menu-item>
`
: nothing
)}
</ha-menu>
${this.showFilters && !showPane
? html`<ha-dialog
open
hideActions
.heading=${localize("ui.components.subpage-data-table.filters")}
>
<ha-dialog-header slot="heading">
<ha-icon-button
slot="navigationIcon"
.path=${mdiClose}
@click=${this._toggleFilters}
.label=${localize(
"ui.components.subpage-data-table.close_filter"
)}
></ha-icon-button>
<span slot="title"
>${localize("ui.components.subpage-data-table.filters")}</span
>
${this.filters
? html`<ha-icon-button
slot="actionItems"
@click=${this._clearFilters}
.path=${mdiFilterVariantRemove}
.label=${localize(
"ui.components.subpage-data-table.clear_filter"
)}
></ha-icon-button>`
: nothing}
</ha-dialog-header>
<div class="filter-dialog-content">
<slot name="filter-pane"></slot></div
></ha-dialog>`
: nothing}
`;
}
@@ -543,6 +448,7 @@ export class HaTabsSubpageDataTable extends LitElement {
}
private _handleSortBy(ev) {
ev.stopPropagation();
const columnId = ev.currentTarget.value;
if (!this._sortDirection || this._sortColumn !== columnId) {
this._sortDirection = "asc";
@@ -567,14 +473,6 @@ 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;
@@ -587,7 +485,6 @@ export class HaTabsSubpageDataTable extends LitElement {
return css`
:host {
display: block;
height: 100%;
}
ha-data-table {
@@ -709,18 +606,16 @@ 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%;
font-weight: 400;
font-size: 11px;
background-color: var(--primary-color);
background-color: var(--accent-color);
line-height: 16px;
text-align: center;
padding: 0px 2px;
color: var(--text-primary-color);
color: var(--text-accent-color, var(--text-primary-color));
}
.narrow-header-row {
@@ -743,34 +638,30 @@ export class HaTabsSubpageDataTable extends LitElement {
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
--ha-assist-chip-container-color: var(--card-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;
--ha-assist-chip-container-color: var(--card-background-color);
}
ha-button-menu {
--mdc-list-item-meta-size: 16px;
--mdc-list-item-meta-display: flex;
}
ha-button-menu ha-assist-chip {
--md-assist-chip-trailing-space: 8px;
}
.select-mode-chip {
@@ -779,7 +670,6 @@ export class HaTabsSubpageDataTable extends LitElement {
}
ha-dialog {
--dialog-z-index: 100;
--mdc-dialog-min-width: calc(
100vw - env(safe-area-inset-right) - env(safe-area-inset-left)
);
@@ -798,12 +688,6 @@ export class HaTabsSubpageDataTable extends LitElement {
display: flex;
flex-direction: column;
}
#sort-by-anchor,
#group-by-anchor,
ha-button-menu-new ha-assist-chip {
--md-assist-chip-trailing-space: 8px;
}
`;
}
}

View File

@@ -344,10 +344,6 @@ 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));

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 && this._parameters.message !== parameters.message) {
if (this._parameters) {
this._parameters = undefined;
await this.updateComplete;
}

View File

@@ -52,9 +52,7 @@ class DialogAreaDetail extends LitElement {
): Promise<void> {
this._params = params;
this._error = undefined;
this._name = this._params.entry
? this._params.entry.name
: this._params.suggestedName || "";
this._name = this._params.entry ? this._params.entry.name : "";
this._aliases = this._params.entry ? this._params.entry.aliases : [];
this._labels = this._params.entry ? this._params.entry.labels : [];
this._picture = this._params.entry?.picture || null;

View File

@@ -1,30 +1,19 @@
import "@material/mwc-button";
import "@material/mwc-list/mwc-list";
import { mdiTextureBox } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { property, state } from "lit/decorators";
import { repeat } from "lit/directives/repeat";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/chips/ha-chip-set";
import "../../../components/chips/ha-input-chip";
import "../../../components/ha-alert";
import "../../../components/ha-aliases-editor";
import { createCloseHeading } from "../../../components/ha-dialog";
import "../../../components/ha-icon-picker";
import "../../../components/ha-picture-upload";
import "../../../components/ha-settings-row";
import "../../../components/ha-svg-icon";
import "../../../components/ha-textfield";
import {
FloorRegistryEntry,
FloorRegistryEntryMutableParams,
} from "../../../data/floor_registry";
import { haStyle, haStyleDialog } from "../../../resources/styles";
import "../../../components/ha-icon-picker";
import { FloorRegistryEntryMutableParams } from "../../../data/floor_registry";
import { haStyleDialog } from "../../../resources/styles";
import { HomeAssistant } from "../../../types";
import { FloorRegistryDetailDialogParams } from "./show-dialog-floor-registry-detail";
import { showAreaRegistryDetailDialog } from "./show-dialog-area-registry-detail";
import { updateAreaRegistryEntry } from "../../../data/area_registry";
class DialogFloorDetail extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@@ -43,59 +32,30 @@ class DialogFloorDetail extends LitElement {
@state() private _submitting?: boolean;
@state() private _addedAreas = new Set<string>();
@state() private _removedAreas = new Set<string>();
public showDialog(params: FloorRegistryDetailDialogParams): void {
public async showDialog(
params: FloorRegistryDetailDialogParams
): Promise<void> {
this._params = params;
this._error = undefined;
this._name = this._params.entry
? this._params.entry.name
: this._params.suggestedName || "";
this._name = this._params.entry ? this._params.entry.name : "";
this._aliases = this._params.entry?.aliases || [];
this._icon = this._params.entry?.icon || null;
this._level = this._params.entry?.level ?? null;
this._addedAreas.clear();
this._removedAreas.clear();
await this.updateComplete;
}
public closeDialog(): void {
this._error = "";
this._params = undefined;
this._addedAreas.clear();
this._removedAreas.clear();
fireEvent(this, "dialog-closed", { dialog: this.localName });
}
private _floorAreas = memoizeOne(
(
entry: FloorRegistryEntry | undefined,
areas: HomeAssistant["areas"],
added: Set<string>,
removed: Set<string>
) =>
Object.values(areas).filter(
(area) =>
(area.floor_id === entry?.floor_id || added.has(area.area_id)) &&
!removed.has(area.area_id)
)
);
protected render() {
const areas = this._floorAreas(
this._params?.entry,
this.hass.areas,
this._addedAreas,
this._removedAreas
);
if (!this._params) {
return nothing;
}
const entry = this._params.entry;
const nameInvalid = !this._isNameValid();
return html`
<ha-dialog
open
@@ -150,62 +110,7 @@ class DialogFloorDetail extends LitElement {
.value=${this._icon}
@value-changed=${this._iconChanged}
.label=${this.hass.localize("ui.panel.config.areas.editor.icon")}
>
${!this._icon
? html`
<ha-floor-icon
slot="fallback"
.floor=${{ level: this._level }}
></ha-floor-icon>
`
: nothing}
</ha-icon-picker>
<h3 class="header">
${this.hass.localize(
"ui.panel.config.floors.editor.areas_section"
)}
</h3>
<p class="description">
${this.hass.localize(
"ui.panel.config.floors.editor.areas_description"
)}
</p>
${areas.length
? html`<ha-chip-set>
${repeat(
areas,
(area) => area.area_id,
(area) =>
html`<ha-input-chip
.area=${area}
@click=${this._openArea}
@remove=${this._removeArea}
.label=${area?.name}
>
${area.icon
? html`<ha-icon
slot="icon"
.icon=${area.icon}
></ha-icon>`
: html`<ha-svg-icon
slot="icon"
.path=${mdiTextureBox}
></ha-svg-icon>`}
</ha-input-chip>`
)}
</ha-chip-set>`
: nothing}
<ha-area-picker
no-add
.hass=${this.hass}
@value-changed=${this._addArea}
.excludeAreas=${areas.map((a) => a.area_id)}
.label=${this.hass.localize(
"ui.panel.config.floors.editor.add_area"
)}
></ha-area-picker>
></ha-icon-picker>
<h3 class="header">
${this.hass.localize(
@@ -241,41 +146,6 @@ class DialogFloorDetail extends LitElement {
`;
}
private _openArea(ev) {
const area = ev.target.area;
showAreaRegistryDetailDialog(this, {
entry: area,
updateEntry: (values) =>
updateAreaRegistryEntry(this.hass!, area.area_id, values),
});
}
private _removeArea(ev) {
const areaId = ev.target.area.area_id;
if (this._addedAreas.has(areaId)) {
this._addedAreas.delete(areaId);
this._addedAreas = new Set(this._addedAreas);
return;
}
this._removedAreas.add(areaId);
this._removedAreas = new Set(this._removedAreas);
}
private _addArea(ev) {
const areaId = ev.detail.value;
if (!areaId) {
return;
}
ev.target.value = "";
if (this._removedAreas.has(areaId)) {
this._removedAreas.delete(areaId);
this._removedAreas = new Set(this._removedAreas);
return;
}
this._addedAreas.add(areaId);
this._addedAreas = new Set(this._addedAreas);
}
private _isNameValid() {
return this._name.trim() !== "";
}
@@ -287,7 +157,7 @@ class DialogFloorDetail extends LitElement {
private _levelChanged(ev) {
this._error = undefined;
this._level = ev.target.value === "" ? null : Number(ev.target.value);
this._level = Number(ev.target.value);
}
private _iconChanged(ev) {
@@ -306,13 +176,9 @@ class DialogFloorDetail extends LitElement {
aliases: this._aliases,
};
if (create) {
await this._params!.createEntry!(values, this._addedAreas);
await this._params!.createEntry!(values);
} else {
await this._params!.updateEntry!(
values,
this._addedAreas,
this._removedAreas
);
await this._params!.updateEntry!(values);
}
this.closeDialog();
} catch (err: any) {
@@ -330,19 +196,12 @@ class DialogFloorDetail extends LitElement {
static get styles(): CSSResultGroup {
return [
haStyle,
haStyleDialog,
css`
ha-textfield {
display: block;
margin-bottom: 16px;
}
ha-floor-icon {
color: var(--secondary-text-color);
}
ha-chip-set {
margin-bottom: 8px;
}
`,
];
}

View File

@@ -1,4 +1,3 @@
import { ActionDetail } from "@material/mwc-list";
import {
mdiDelete,
mdiDotsVertical,
@@ -18,16 +17,14 @@ import {
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
import { ActionDetail } from "@material/mwc-list";
import { formatListWithAnds } from "../../../common/string/format-list";
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,
@@ -42,7 +39,6 @@ import {
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-tabs-subpage";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { HomeAssistant, Route } from "../../../types";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
@@ -51,10 +47,7 @@ import {
showAreaRegistryDetailDialog,
} 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 };
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
@customElement("ha-config-areas-dashboard")
export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
@@ -161,7 +154,9 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
html`<div class="floor">
<div class="header">
<h2>
<ha-floor-icon .floor=${floor}></ha-floor-icon>
${floor.icon
? html`<ha-icon .icon=${floor.icon}></ha-icon>`
: nothing}
${floor.name}
</h2>
<ha-button-menu
@@ -193,22 +188,13 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
>
</ha-button-menu>
</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 class="areas">
${floor.areas.map((area) => this._renderArea(area))}
</div>
</div>`
)}
${areasAndFloors?.unassisgnedAreas.length
? html`<div class="floor">
? html`<div class="unassigned">
<div class="header">
<h2>
${this.hass.localize(
@@ -216,20 +202,11 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
)}
</h2>
</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 class="areas">
${areasAndFloors?.unassisgnedAreas.map((area) =>
this._renderArea(area)
)}
</div>
</div>`
: nothing}
</div>
@@ -271,14 +248,7 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
? html`<ha-icon .icon=${area.icon}></ha-icon>`
: ""}
</div>
<div class="card-header">
${area.name}
<ha-icon-button
.area=${area}
.path=${mdiPencil}
@click=${this._openAreaDetails}
></ha-icon-button>
</div>
<h1 class="card-header">${area.name}</h1>
<div class="card-content">
<div>
${formatListWithAnds(
@@ -312,39 +282,6 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
loadAreaRegistryDetailDialog();
}
private _openAreaDetails(ev) {
ev.preventDefault();
const area = ev.currentTarget.area;
showAreaRegistryDetailDialog(this, {
entry: area,
updateEntry: async (values) =>
updateAreaRegistryEntry(this.hass!, area.area_id, values),
});
}
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) {
@@ -414,31 +351,10 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
private _openFloorDialog(entry?: FloorRegistryEntry) {
showFloorRegistryDetailDialog(this, {
entry,
createEntry: async (values, addedAreas) => {
const floor = await createFloorRegistryEntry(this.hass!, values);
addedAreas.forEach((areaId) => {
updateAreaRegistryEntry(this.hass, areaId, {
floor_id: floor.floor_id,
});
});
},
updateEntry: async (values, addedAreas, removedAreas) => {
const floor = await updateFloorRegistryEntry(
this.hass!,
entry!.floor_id,
values
);
addedAreas.forEach((areaId) => {
updateAreaRegistryEntry(this.hass, areaId, {
floor_id: floor.floor_id,
});
});
removedAreas.forEach((areaId) => {
updateAreaRegistryEntry(this.hass, areaId, {
floor_id: null,
});
});
},
createEntry: async (values) =>
createFloorRegistryEntry(this.hass!, values),
updateEntry: async (values) =>
updateFloorRegistryEntry(this.hass!, entry!.floor_id, values),
});
}
@@ -507,10 +423,9 @@ export class HaConfigAreasDashboard extends SubscribeMixin(LitElement) {
min-height: 16px;
color: var(--secondary-text-color);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
.floor {
--primary-color: var(--secondary-text-color);
margin-inline-end: 8px;
}
.warning {
color: var(--error-color);

View File

@@ -6,7 +6,6 @@ import {
export interface AreaRegistryDetailDialogParams {
entry?: AreaRegistryEntry;
suggestedName?: string;
createEntry?: (values: AreaRegistryEntryMutableParams) => Promise<unknown>;
updateEntry?: (
updates: Partial<AreaRegistryEntryMutableParams>

View File

@@ -6,15 +6,9 @@ import {
export interface FloorRegistryDetailDialogParams {
entry?: FloorRegistryEntry;
suggestedName?: string;
createEntry?: (
values: FloorRegistryEntryMutableParams,
addedAreas: Set<string>
) => Promise<unknown>;
createEntry?: (values: FloorRegistryEntryMutableParams) => Promise<unknown>;
updateEntry?: (
updates: Partial<FloorRegistryEntryMutableParams>,
addedAreas: Set<string>,
removedAreas: Set<string>
updates: Partial<FloorRegistryEntryMutableParams>
) => Promise<unknown>;
}

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 role="separator" tabindex="-1"></md-divider>`
<md-divider></md-divider>`
: ""}
${repeat(
items,

View File

@@ -1,22 +1,16 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
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,16 +18,14 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { customElement, property, query, state } from "lit/decorators";
import { customElement, property, 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";
@@ -45,23 +37,16 @@ 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";
import "../../../components/ha-fab";
import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-blueprints";
import "../../../components/ha-filter-categories";
import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-entities";
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 type { HaMenu } from "../../../components/ha-menu";
import "../../../components/ha-menu-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import {
AutomationEntity,
@@ -74,21 +59,11 @@ import {
} from "../../../data/automation";
import {
CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry,
} from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context";
import { UNAVAILABLE } from "../../../data/entity";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import { EntityRegistryEntry } from "../../../data/entity_registry";
import { findRelated } from "../../../data/search";
import {
showAlertDialog,
@@ -97,18 +72,20 @@ import {
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
import { HomeAssistant, Route } 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 { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import { showNewAutomationDialog } from "./show-dialog-new-automation";
import "../../../components/data-table/ha-data-table-labels";
import {
LabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import "../../../components/ha-filter-labels";
type AutomationItem = AutomationEntity & {
name: string;
area: string | undefined;
last_triggered?: string | undefined;
formatted_state: string;
category: string | undefined;
@@ -138,8 +115,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
@state() private _expandedFilter?: string;
@state() private _selected: string[] = [];
@state()
_categories!: CategoryRegistryEntry[];
@@ -150,19 +125,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
@state() private _overflowAutomation?: AutomationItem;
@query("#overflow-menu") private _overflowMenu!: HaMenu;
private _sizeController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width,
});
private _automations = memoizeOne(
(
automations: AutomationEntity[],
entityReg: EntityRegistryEntry[],
areas: HomeAssistant["areas"],
categoryReg?: CategoryRegistryEntry[],
labelReg?: LabelRegistryEntry[],
filteredAutomations?: string[] | null
@@ -185,9 +151,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
return {
...automation,
name: computeStateName(automation),
area: entityRegEntry?.area_id
? areas[entityRegEntry?.area_id]?.name
: undefined,
last_triggered: automation.attributes.last_triggered || undefined,
formatted_state: this.hass.formatEntityState(automation),
category: category
@@ -256,13 +219,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
`;
},
},
area: {
title: localize("ui.panel.config.automation.picker.headers.area"),
hidden: true,
groupable: true,
filterable: true,
sortable: true,
},
category: {
title: localize("ui.panel.config.automation.picker.headers.category"),
hidden: true,
@@ -277,32 +233,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
template: (automation) =>
automation.labels.map((lbl) => lbl.name).join(" "),
},
last_triggered: {
sortable: true,
width: "130px",
title: localize("ui.card.automation.last_triggered"),
hidden: narrow,
template: (automation) => {
if (!automation.last_triggered) {
return this.hass.localize("ui.components.relative_time.never");
}
const date = new Date(automation.last_triggered);
const now = new Date();
const dayDifference = differenceInDays(now, date);
return html`
${dayDifference > 3
? formatShortDateTime(date, locale, this.hass.config)
: relativeTime(date, locale)}
`;
},
};
columns.last_triggered = {
sortable: true,
width: "130px",
title: localize("ui.card.automation.last_triggered"),
hidden: narrow,
template: (automation) => {
if (!automation.last_triggered) {
return this.hass.localize("ui.components.relative_time.never");
}
const date = new Date(automation.last_triggered);
const now = new Date();
const dayDifference = differenceInDays(now, date);
return html`
${dayDifference > 3
? formatShortDateTime(date, locale, this.hass.config)
: relativeTime(date, locale)}
`;
},
formatted_state: {
};
if (!this.narrow) {
columns.formatted_state = {
width: "82px",
sortable: true,
groupable: true,
title: "",
type: "overflow",
hidden: narrow,
label: this.hass.localize("ui.panel.config.automation.picker.state"),
template: (automation) => html`
<ha-entity-toggle
@@ -310,38 +267,88 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.hass=${this.hass}
></ha-entity-toggle>
`,
},
actions: {
title: "",
width: "64px",
type: "icon-button",
template: (automation) => html`
<ha-icon-button
.automation=${automation}
.label=${this.hass.localize("ui.common.overflow_menu")}
.path=${mdiDotsVertical}
@click=${this._showOverflowMenu}
></ha-icon-button>
`,
},
};
}
columns.actions = {
title: "",
width: "64px",
type: "overflow-menu",
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>
`,
};
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(
@@ -358,88 +365,18 @@ 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>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`;
const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<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>`;
})}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
.narrow=${this.narrow}
.backPath=${
this._searchParms.has("historyBack") ? undefined : "/config"
}
back-path="/config"
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,
@@ -449,7 +386,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.data=${this._automations(
this.automations,
this._entityReg,
this.hass.areas,
this._categories,
this._labels,
this._filteredAutomations
@@ -529,156 +465,36 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-blueprints>
${
!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>
${labelsInOverflow
? 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 || labelsInOverflow
? 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.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.bulk_actions.enable"
"ui.panel.config.automation.picker.empty_header"
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._handleBulkDisable}>
<ha-svg-icon
slot="start"
.path=${mdiToggleSwitchOffOutline}
></ha-svg-icon>
<div slot="headline">
</h1>
<p>
${this.hass.localize(
"ui.panel.config.automation.picker.bulk_actions.disable"
"ui.panel.config.automation.picker.empty_text_1"
)}
</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
}
</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(
@@ -690,97 +506,13 @@ 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"
? mdiToggleSwitch
: mdiToggleSwitchOffOutline
}
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>
`;
}
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_entityReg")) {
this._applyFilters();
}
}
firstUpdated() {
if (this._searchParms.has("blueprint")) {
this._filterBlueprint();
}
if (this._searchParms.has("label")) {
this._filterLabel();
}
}
private _filterExpanded(ev) {
@@ -868,21 +600,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
this._filteredAutomations = items ? [...items] : undefined;
}
private _filterLabel() {
const label = this._searchParms.get("label");
if (!label) {
return;
}
this._filters = {
...this._filters,
"ha-filter-labels": {
value: [label],
items: undefined,
},
};
this._applyFilters();
}
private async _filterBlueprint() {
const blueprint = this._searchParms.get("blueprint");
if (!blueprint) {
@@ -908,29 +625,15 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
this._applyFilters();
}
private _showInfo(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private _showInfo(automation: any) {
fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
}
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;
private _runActions(automation: any) {
triggerAutomationActions(this.hass, automation.entity_id);
}
private _editCategory(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private _editCategory(automation: any) {
const entityReg = this._entityReg.find(
(reg) => reg.entity_id === automation.entity_id
);
@@ -951,9 +654,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
});
}
private _showTrace(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private _showTrace(automation: any) {
if (!automation.attributes.id) {
showAlertDialog(this, {
text: this.hass.localize(
@@ -967,18 +668,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
);
}
private async _toggle(ev): Promise<void> {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private async _toggle(automation): Promise<void> {
const service = automation.state === "off" ? "turn_on" : "turn_off";
await this.hass.callService("automation", service, {
entity_id: automation.entity_id,
});
}
private async _deleteConfirm(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private async _deleteConfirm(automation) {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.picker.delete_confirm_title"
@@ -1012,9 +709,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
}
private async _duplicate(ev) {
const automation = ev.currentTarget.parentElement.anchorElement.automation;
private async duplicate(automation) {
try {
const config = await fetchAutomationFileConfig(
this.hass,
@@ -1073,12 +768,6 @@ 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" });
@@ -1087,94 +776,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
}
}
private async _handleBulkCategory(ev) {
const category = ev.currentTarget.value;
this._bulkAddCategory(category);
}
private async _bulkAddCategory(category: string) {
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 action = ev.currentTarget.action;
this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels:
action === "add"
? this.hass.entities[entityId].labels.concat(label)
: this.hass.entities[entityId].labels.filter(
(lbl) => lbl !== 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);
}
private async _bulkCreateCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "automation",
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
"automation",
values
);
this._bulkAddCategory(category.category_id);
return category;
},
});
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host {
display: block;
}
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
@@ -1186,16 +791,6 @@ 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;
}
`,
];
}

View File

@@ -85,7 +85,7 @@ class DialogAssignCategory extends LitElement {
private _categoryChanged(ev: CustomEvent): void {
if (!ev.detail.value) {
this._category = undefined;
return;
}
this._category = ev.detail.value;
}

View File

@@ -179,16 +179,16 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
const filteredItems = fuzzyFilterSort<ScorableCategoryRegistryEntry>(
filterString,
target.items?.filter(
(item) => ![NO_CATEGORIES_ID, ADD_NEW_ID].includes(item.category_id)
) || []
target.items || []
);
if (filteredItems?.length === 0) {
if (this.noAdd) {
this.comboBox.filteredItems = [
{
category_id: NO_CATEGORIES_ID,
name: this.hass.localize("ui.components.category-picker.no_match"),
name: this.hass.localize(
"ui.components.category-picker.no_categories"
),
icon: null,
},
] as ScorableCategoryRegistryEntry[];
@@ -237,8 +237,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
(ev.target as any).value = this._value;
this.hass.loadFragmentTranslation("config");
showCategoryRegistryDetailDialog(this, {
scope: this.scope!,
suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",

View File

@@ -1,6 +1,6 @@
import { consume } from "@lit-labs/context";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import { mdiChevronRight, mdiMenuDown, mdiPlus } from "@mdi/js";
import { mdiPlus } from "@mdi/js";
import {
CSSResultGroup,
LitElement,
@@ -10,10 +10,8 @@ import {
nothing,
} from "lit";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import {
@@ -25,29 +23,23 @@ import { LocalizeFunc } from "../../../common/translations/localize";
import {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/entity/ha-battery-icon";
import "../../../components/ha-alert";
import "../../../components/ha-button-menu";
import "../../../components/ha-check-list-item";
import "../../../components/ha-fab";
import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-integrations";
import "../../../components/ha-filter-labels";
import "../../../components/ha-filter-states";
import "../../../components/ha-icon-button";
import "../../../components/ha-menu-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-alert";
import { ConfigEntry, sortConfigEntries } from "../../../data/config_entries";
import { fullEntitiesContext } from "../../../data/context";
import {
DeviceEntityLookup,
DeviceRegistryEntry,
computeDeviceName,
updateDeviceRegistryEntry,
} from "../../../data/device_registry";
import {
EntityRegistryEntry,
@@ -55,31 +47,23 @@ import {
findBatteryEntity,
} from "../../../data/entity_registry";
import { IntegrationManifest } from "../../../data/integration";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { brandsUrl } from "../../../util/brands-url";
import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
interface DeviceRowData extends DeviceRegistryEntry {
device?: DeviceRowData;
area?: string;
integration?: string;
battery_entity?: [string | undefined, string | undefined];
label_entries: EntityRegistryEntry[];
}
@customElement("ha-config-devices-dashboard")
export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
export class HaConfigDeviceDashboard extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean }) public narrow = false;
@@ -98,8 +82,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
@state() private _searchParms = new URLSearchParams(window.location.search);
@state() private _selected: string[] = [];
@state() private _filter: string = history.state?.filter || "";
@state() private _filters: Record<
@@ -109,9 +91,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
@state() private _expandedFilter?: string;
@state()
_labels!: LabelRegistryEntry[];
private _ignoreLocationChange = false;
public connectedCallback() {
@@ -194,23 +173,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
},
};
}
if (this._searchParms.has("label")) {
this._filterLabel();
}
}
private _filterLabel() {
const label = this._searchParms.get("label");
if (!label) {
return;
}
this._filters = {
...this._filters,
"ha-filter-labels": {
value: [label],
items: undefined,
},
};
}
private _clearFilter() {
@@ -228,17 +190,11 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
string,
{ value: string[] | undefined; items: Set<string> | undefined }
>,
localize: LocalizeFunc,
labelReg?: LabelRegistryEntry[]
localize: LocalizeFunc
) => {
// Some older installations might have devices pointing at invalid entryIDs
// So we guard for that.
let outputDevices: DeviceRowData[] = Object.values(devices).map(
(device) => ({
...device,
label_entries: [],
})
);
let outputDevices: DeviceRowData[] = Object.values(devices);
const deviceEntityLookup: DeviceEntityLookup = {};
for (const entity of entities) {
@@ -265,16 +221,16 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
const filteredDomains = new Set<string>();
Object.entries(filters).forEach(([key, filter]) => {
if (key === "config_entry" && filter.value?.length) {
Object.entries(filters).forEach(([key, flter]) => {
if (key === "config_entry" && flter.value?.length) {
outputDevices = outputDevices.filter((device) =>
device.config_entries.some((entryId) =>
filter.value?.includes(entryId)
flter.value?.includes(entryId)
)
);
const configEntries = entries.filter(
(entry) => entry.entry_id && filter.value?.includes(entry.entry_id)
(entry) => entry.entry_id && flter.value?.includes(entry.entry_id)
);
configEntries.forEach((configEntry) => {
@@ -283,21 +239,17 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
if (configEntries.length === 1) {
filteredConfigEntry = configEntries[0];
}
} else if (key === "ha-filter-integrations" && filter.value?.length) {
} else if (key === "ha-filter-integrations" && flter.value?.length) {
const entryIds = entries
.filter((entry) => filter.value!.includes(entry.domain))
.filter((entry) => flter.value!.includes(entry.domain))
.map((entry) => entry.entry_id);
outputDevices = outputDevices.filter((device) =>
device.config_entries.some((entryId) => entryIds.includes(entryId))
);
filter.value!.forEach((domain) => filteredDomains.add(domain));
} else if (key === "ha-filter-labels" && filter.value?.length) {
flter.value!.forEach((domain) => filteredDomains.add(domain));
} else if (flter.items) {
outputDevices = outputDevices.filter((device) =>
device.labels.some((lbl) => filter.value!.includes(lbl))
);
} else if (filter.items) {
outputDevices = outputDevices.filter((device) =>
filter.items!.has(device.id)
flter.items!.has(device.id)
);
}
});
@@ -318,12 +270,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
.map((entId) => entryLookup[entId]),
manifestLookup
);
const labels = labelReg && device?.labels;
const labelsEntries = (labels || []).map(
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
);
return {
...device,
name: computeDeviceName(
@@ -360,7 +306,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
this.hass.states[
this._batteryEntity(device.id, deviceEntityLookup) || ""
]?.state,
label_entries: labelsEntries,
};
});
@@ -406,15 +351,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
direction: "asc",
grows: true,
template: (device) => html`
<div style="font-size: 14px;">${device.name}</div>
${device.name}
<div class="secondary">${device.area} | ${device.integration}</div>
${device.label_entries.length
? html`
<ha-data-table-labels
.labels=${device.label_entries}
></ha-data-table-labels>
`
: nothing}
`,
};
} else {
@@ -423,18 +361,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
main: true,
sortable: true,
filterable: true,
direction: "asc",
grows: true,
template: (device) => html`
<div style="font-size: 14px;">${device.name}</div>
${device.label_entries.length
? html`
<ha-data-table-labels
.labels=${device.label_entries}
></ha-data-table-labels>
`
: nothing}
`,
direction: "asc",
};
}
@@ -513,25 +441,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
? this.hass.localize("ui.panel.config.devices.disabled")
: "",
};
columns.labels = {
title: "",
hidden: true,
filterable: true,
template: (device) =>
device.label_entries.map((lbl) => lbl.name).join(" "),
};
return columns;
});
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeLabelRegistry(this.hass.connection, (labels) => {
this._labels = labels;
}),
];
}
protected render(): TemplateResult {
const { devicesOutput } = this._devicesAndFilterDomains(
this.hass.devices,
@@ -540,47 +452,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
this.hass.areas,
this.manifests,
this._filters,
this.hass.localize,
this._labels
this.hass.localize
);
const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((deviceId) =>
this.hass.devices[deviceId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((deviceId) =>
this.hass.devices[deviceId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<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>`;
})}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-menu-item
>`;
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@@ -595,9 +469,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
)}
.columns=${this._columns(this.hass.localize, this.narrow)}
.data=${devicesOutput}
selectable
.selected=${this._selected.length}
@selection-changed=${this._handleSelectionChanged}
.filter=${this._filter}
hasFilters
.filters=${Object.values(this._filters).filter(
@@ -608,7 +479,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
@row-click=${this._handleRowClicked}
clickable
hasFab
class=${this.narrow ? "narrow" : ""}
>
<ha-integration-overflow-menu
.hass=${this.hass}
@@ -661,58 +531,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-states>
<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>
${!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.add_label"
)}
>
<ha-svg-icon
slot="trailing-icon"
.path=${mdiMenuDown}
></ha-svg-icon>
</ha-assist-chip>
${labelItems}
</ha-button-menu-new>`
: html` <ha-button-menu-new has-overflow slot="selection-bar"
><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>
<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>
</ha-button-menu-new>`}
</hass-tabs-subpage-data-table>
`;
}
@@ -772,10 +590,8 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
this.hass.areas,
this.manifests,
this._filters,
this.hass.localize,
this._labels
this.hass.localize
);
if (
filteredDomains.size === 1 &&
(PROTOCOL_INTEGRATIONS as ReadonlyArray<string>).includes(
@@ -792,54 +608,9 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
});
}
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const action = ev.currentTarget.action;
this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<DeviceRegistryEntry>[] = [];
this._selected.forEach((deviceId) => {
promises.push(
updateDeviceRegistryEntry(this.hass, deviceId, {
labels:
action === "add"
? this.hass.devices[deviceId].labels.concat(label)
: this.hass.devices[deviceId].labels.filter(
(lbl) => lbl !== label
),
})
);
});
await Promise.all(promises);
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
static get styles(): CSSResultGroup {
return [
css`
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
hass-tabs-subpage-data-table.narrow {
--data-table-row-height: 72px;
}
ha-button-menu {
margin-left: 8px;
margin-inline-start: 8px;
@@ -852,16 +623,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
text-transform: uppercase;
direction: var(--direction);
}
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;
}
`,
haStyle,
];

View File

@@ -3,19 +3,14 @@ import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiAlertCircle,
mdiCancel,
mdiChevronRight,
mdiDelete,
mdiDotsVertical,
mdiEye,
mdiEyeOff,
mdiMenuDown,
mdiPencilOff,
mdiPlus,
mdiRestoreAlert,
mdiToggleSwitch,
mdiToggleSwitchOffOutline,
mdiUndo,
} from "@mdi/js";
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import { HassEntity } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
@@ -29,7 +24,6 @@ import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map";
import { until } from "lit/directives/until";
import memoize from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import type { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeDomain } from "../../../common/entity/compute_domain";
import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -43,36 +37,26 @@ import type {
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-alert";
import "../../../components/ha-button-menu";
import "../../../components/ha-check-list-item";
import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-integrations";
import "../../../components/ha-filter-labels";
import "../../../components/ha-filter-states";
import "../../../components/ha-icon";
import "../../../components/ha-icon-button";
import "../../../components/ha-menu-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import "../../../components/ha-alert";
import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
import { fullEntitiesContext } from "../../../data/context";
import { UNAVAILABLE } from "../../../data/entity";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
computeEntityRegistryName,
removeEntityRegistryEntry,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import { entryIcon } from "../../../data/icons";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import {
showAlertDialog,
showConfirmationDialog,
@@ -81,17 +65,11 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage-data-table";
import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import type { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { showAddIntegrationDialog } from "../integrations/show-add-integration-dialog";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import {
EntitySources,
fetchEntitySourcesWithCache,
} from "../../../data/entity_sources";
export interface StateEntity
extends Omit<EntityRegistryEntry, "id" | "unique_id"> {
@@ -108,11 +86,10 @@ export interface EntityRow extends StateEntity {
status: string | undefined;
area?: string;
localized_platform: string;
label_entries: LabelRegistryEntry[];
}
@customElement("ha-config-entities")
export class HaConfigEntities extends SubscribeMixin(LitElement) {
export class HaConfigEntities extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ type: Boolean }) public isWide = false;
@@ -138,15 +115,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
{ value: string[] | undefined; items: Set<string> | undefined }
> = {};
@state() private _selected: string[] = [];
@state() private _selectedEntities: string[] = [];
@state() private _expandedFilter?: string;
@state()
_labels!: LabelRegistryEntry[];
@state() private _entitySources?: EntitySources;
@query("hass-tabs-subpage-data-table", true)
private _dataTable!: HaTabsSubpageDataTable;
@@ -230,21 +202,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
filterable: true,
direction: "asc",
grows: true,
template: (entry) => html`
<div style="font-size: 14px;">${entry.name}</div>
${narrow
? html`<div class="secondary">
template: narrow
? (entry) => html`
${entry.name}<br />
<div class="secondary">
${entry.entity_id} | ${entry.localized_platform}
</div>`
: nothing}
${entry.label_entries.length
? html`
<ha-data-table-labels
.labels=${entry.label_entries}
></ha-data-table-labels>
`
: nothing}
`,
</div>
`
: undefined,
},
entity_id: {
title: localize("ui.panel.config.entities.picker.headers.entity_id"),
@@ -336,13 +301,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
`
: "—",
},
labels: {
title: "",
hidden: true,
filterable: true,
template: (entry) =>
entry.label_entries.map((lbl) => lbl.name).join(" "),
},
})
);
@@ -357,8 +315,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
string,
{ value: string[] | undefined; items: Set<string> | undefined }
>,
entries?: ConfigEntry[],
labelReg?: LabelRegistryEntry[]
entries?: ConfigEntry[]
) => {
const result: EntityRow[] = [];
@@ -380,12 +337,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
let filteredConfigEntry: ConfigEntry | undefined;
const filteredDomains = new Set<string>();
Object.entries(filters).forEach(([key, filter]) => {
if (key === "config_entry" && filter.value?.length) {
Object.entries(filters).forEach(([key, flter]) => {
if (key === "config_entry" && flter.value?.length) {
filteredEntities = filteredEntities.filter(
(entity) =>
entity.config_entry_id &&
filter.value?.includes(entity.config_entry_id)
flter.value?.includes(entity.config_entry_id)
);
if (!entries) {
@@ -394,7 +351,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
}
const configEntries = entries.filter(
(entry) => entry.entry_id && filter.value?.includes(entry.entry_id)
(entry) => entry.entry_id && flter.value?.includes(entry.entry_id)
);
configEntries.forEach((configEntry) => {
@@ -403,29 +360,23 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
if (configEntries.length === 1) {
filteredConfigEntry = configEntries[0];
}
} else if (key === "ha-filter-integrations" && filter.value?.length) {
} else if (key === "ha-filter-integrations" && flter.value?.length) {
if (!entries) {
this._loadConfigEntries();
return;
}
const entryIds = entries
.filter((entry) => filter.value!.includes(entry.domain))
.filter((entry) => flter.value!.includes(entry.domain))
.map((entry) => entry.entry_id);
filteredEntities = filteredEntities.filter(
(entity) =>
filter.value?.includes(entity.platform) ||
(entity.config_entry_id &&
entryIds.includes(entity.config_entry_id))
entity.config_entry_id &&
entryIds.includes(entity.config_entry_id)
);
filter.value!.forEach((domain) => filteredDomains.add(domain));
} else if (key === "ha-filter-labels" && filter.value?.length) {
flter.value!.forEach((domain) => filteredDomains.add(domain));
} else if (flter.items) {
filteredEntities = filteredEntities.filter((entity) =>
entity.labels.some((lbl) => filter.value!.includes(lbl))
);
} else if (filter.items) {
filteredEntities = filteredEntities.filter((entity) =>
filter.items!.has(entity.entity_id)
flter.items!.has(entity.entity_id)
);
}
});
@@ -453,11 +404,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
continue;
}
const labels = labelReg && entry?.labels;
const labelsEntries = (labels || []).map(
(lbl) => labelReg!.find((label) => label.label_id === lbl)!
);
result.push({
...entry,
entity,
@@ -485,7 +431,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
: localize(
"ui.panel.config.entities.picker.status.available"
),
label_entries: labelsEntries,
});
}
@@ -493,14 +438,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
}
);
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeLabelRegistry(this.hass.connection, (labels) => {
this._labels = labels;
}),
];
}
protected render() {
if (!this.hass || this._entities === undefined) {
return html` <hass-loading-screen></hass-loading-screen> `;
@@ -514,8 +451,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
this.hass.areas,
this._stateEntities,
this._filters,
this._entries,
this._labels
this._entries
);
const includeAddDeviceFab =
@@ -524,50 +460,13 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
[...filteredDomains][0]
);
const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<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>`;
})}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-menu-item
>`;
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
.narrow=${this.narrow}
.backPath=${
this._searchParms.has("historyBack") ? undefined : "/config"
}
.backPath=${this._searchParms.has("historyBack")
? undefined
: "/config"}
.route=${this.route}
.tabs=${configSections.devices}
.columns=${this._columns(
@@ -580,151 +479,118 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
"ui.panel.config.entities.picker.search"
)}
hasFilters
.filters=${
Object.values(this._filters).filter((filter) => filter.value?.length)
.length
}
.filters=${Object.values(this._filters).filter(
(filter) => filter.value?.length
).length}
.selected=${this._selectedEntities.length}
.filter=${this._filter}
selectable
.selected=${this._selected.length}
@selection-changed=${this._handleSelectionChanged}
clickable
@selection-changed=${this._handleSelectionChanged}
@clear-filter=${this._clearFilter}
@search-changed=${this._handleSearchChange}
@row-click=${this._openEditEntry}
id="entity_id"
.hasFab=${includeAddDeviceFab}
class=${this.narrow ? "narrow" : ""}
>
<ha-integration-overflow-menu
.hass=${this.hass}
slot="toolbar-icon"
></ha-integration-overflow-menu>
${
!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.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.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>
<md-divider role="separator" tabindex="-1"></md-divider>`
: nothing
}
<ha-menu-item @click=${this._enableSelected}>
<ha-svg-icon slot="start" .path=${mdiToggleSwitch}></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._disableSelected}>
<ha-svg-icon
slot="start"
.path=${mdiToggleSwitchOffOutline}
></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
</div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._unhideSelected}>
<ha-svg-icon
slot="start"
.path=${mdiEye}
></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.entities.picker.unhide_selected.button"
)}
</div>
</ha-menu-item>
<ha-menu-item @click=${this._hideSelected}>
<ha-svg-icon
slot="start"
.path=${mdiEyeOff}
></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.button"
)}
</div>
</ha-menu-item>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._removeSelected} class="warning">
<ha-svg-icon
slot="start"
.path=${mdiDelete}
></ha-svg-icon>
<div slot="headline">
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}
</div>
</ha-menu-item>
</ha-button-menu-new>
${
this._filters.config_entry?.value?.length
? html`<ha-alert slot="filter-pane">
Filtering by config entry
${this._entries?.find(
(entry) =>
entry.entry_id === this._filters.config_entry!.value![0]
)?.title || this._filters.config_entry.value[0]}
</ha-alert>`
: nothing
}
<div class="header-btns" slot="selection-bar">
${!this.narrow
? html`
<mwc-button
@click=${this._enableSelected}
.disabled=${!this._selectedEntities.length}
>${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}</mwc-button
>
<mwc-button
@click=${this._disableSelected}
.disabled=${!this._selectedEntities.length}
>${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}</mwc-button
>
<mwc-button
@click=${this._hideSelected}
.disabled=${!this._selectedEntities.length}
>${this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.button"
)}</mwc-button
>
<mwc-button
@click=${this._removeSelected}
.disabled=${!this._selectedEntities.length}
class="warning"
>${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}</mwc-button
>
`
: html`
<ha-icon-button
id="enable-btn"
.disabled=${!this._selectedEntities.length}
@click=${this._enableSelected}
.path=${mdiUndo}
.label=${this.hass.localize("ui.common.enable")}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="enable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.button"
)}
</simple-tooltip>
<ha-icon-button
id="disable-btn"
.disabled=${!this._selectedEntities.length}
@click=${this._disableSelected}
.path=${mdiCancel}
.label=${this.hass.localize("ui.common.disable")}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="disable-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.button"
)}
</simple-tooltip>
<ha-icon-button
id="hide-btn"
.disabled=${!this._selectedEntities.length}
@click=${this._hideSelected}
.path=${mdiEyeOff}
.label=${this.hass.localize("ui.common.hide")}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="hide-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.button"
)}
</simple-tooltip>
<ha-icon-button
class="warning"
id="remove-btn"
.disabled=${!this._selectedEntities.length}
@click=${this._removeSelected}
.path=${mdiDelete}
.label=${this.hass.localize("ui.common.remove")}
></ha-icon-button>
<simple-tooltip animation-delay="0" for="remove-btn">
${this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.button"
)}
</simple-tooltip>
`}
</div>
${this._filters.config_entry?.value?.length
? html`<ha-alert slot="filter-pane">
Filtering by config entry
${this._entries?.find(
(entry) =>
entry.entry_id === this._filters.config_entry!.value![0]
)?.title || this._filters.config_entry.value[0]}
</ha-alert>`
: nothing}
<ha-filter-floor-areas
.hass=${this.hass}
type="entity"
@@ -767,29 +633,16 @@ ${
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-states>
<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>
${
includeAddDeviceFab
? html`<ha-fab
.label=${this.hass.localize(
"ui.panel.config.devices.add_device"
)}
extended
@click=${this._addDevice}
slot="fab"
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>`
: nothing
}
${includeAddDeviceFab
? html`<ha-fab
.label=${this.hass.localize("ui.panel.config.devices.add_device")}
extended
@click=${this._addDevice}
slot="fab"
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>`
: nothing}
</hass-tabs-subpage-data-table>
`;
}
@@ -815,9 +668,6 @@ ${
},
};
this._setFiltersFromUrl();
fetchEntitySourcesWithCache(this.hass).then((sources) => {
this._entitySources = sources;
});
}
private _setFiltersFromUrl() {
@@ -853,41 +703,20 @@ ${
},
};
}
if (this._searchParms.has("label")) {
this._filterLabel();
}
}
private _filterLabel() {
const label = this._searchParms.get("label");
if (!label) {
return;
}
this._filters = {
...this._filters,
"ha-filter-labels": {
value: [label],
items: undefined,
},
};
}
private _clearFilter() {
this._filters = {};
}
public willUpdate(changedProps: PropertyValues): void {
public willUpdate(changedProps: PropertyValues<this>): void {
super.willUpdate(changedProps);
const oldHass = changedProps.get("hass");
let changed = false;
if (!this.hass || !this._entities) {
return;
}
if (
changedProps.has("hass") ||
changedProps.has("_entities") ||
changedProps.has("_entitySources")
) {
if (changedProps.has("hass") || changedProps.has("_entities")) {
const stateEntities: StateEntity[] = [];
const regEntityIds = new Set(
this._entities.map((entity) => entity.entity_id)
@@ -898,7 +727,6 @@ ${
}
if (
!oldHass ||
changedProps.has("_entitySources") ||
this.hass.states[entityId] !== oldHass.states[entityId]
) {
changed = true;
@@ -906,8 +734,7 @@ ${
stateEntities.push({
name: computeStateName(this.hass.states[entityId]),
entity_id: entityId,
platform:
this._entitySources?.[entityId]?.domain || computeDomain(entityId),
platform: computeDomain(entityId),
disabled_by: null,
hidden_by: null,
area_id: null,
@@ -937,14 +764,14 @@ ${
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
this._selectedEntities = ev.detail.value;
}
private async _enableSelected() {
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.confirm_title",
{ number: this._selected.length }
{ number: this._selectedEntities.length }
),
text: this.hass.localize(
"ui.panel.config.entities.picker.enable_selected.confirm_text"
@@ -955,7 +782,7 @@ ${
let require_restart = false;
let reload_delay = 0;
await Promise.all(
this._selected.map(async (entity) => {
this._selectedEntities.map(async (entity) => {
const result = await updateEntityRegistryEntry(this.hass, entity, {
disabled_by: null,
});
@@ -992,7 +819,7 @@ ${
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.confirm_title",
{ number: this._selected.length }
{ number: this._selectedEntities.length }
),
text: this.hass.localize(
"ui.panel.config.entities.picker.disable_selected.confirm_text"
@@ -1000,7 +827,7 @@ ${
confirmText: this.hass.localize("ui.common.disable"),
dismissText: this.hass.localize("ui.common.cancel"),
confirm: () => {
this._selected.forEach((entity) =>
this._selectedEntities.forEach((entity) =>
updateEntityRegistryEntry(this.hass, entity, {
disabled_by: "user",
})
@@ -1014,7 +841,7 @@ ${
showConfirmationDialog(this, {
title: this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.confirm_title",
{ number: this._selected.length }
{ number: this._selectedEntities.length }
),
text: this.hass.localize(
"ui.panel.config.entities.picker.hide_selected.confirm_text"
@@ -1022,7 +849,7 @@ ${
confirmText: this.hass.localize("ui.common.hide"),
dismissText: this.hass.localize("ui.common.cancel"),
confirm: () => {
this._selected.forEach((entity) =>
this._selectedEntities.forEach((entity) =>
updateEntityRegistryEntry(this.hass, entity, {
hidden_by: "user",
})
@@ -1032,66 +859,22 @@ ${
});
}
private _unhideSelected() {
this._selected.forEach((entity) =>
updateEntityRegistryEntry(this.hass, entity, {
hidden_by: null,
})
);
this._clearSelection();
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const action = ev.currentTarget.action;
await this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
const entityReg =
this.hass.entities[entityId] ||
this._entities.find((entReg) => entReg.entity_id === entityId);
if (!entityReg) {
return;
}
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels:
action === "add"
? entityReg.labels.concat(label)
: entityReg.labels.filter((lbl) => lbl !== label),
})
);
});
await Promise.all(promises);
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
private _removeSelected() {
const removeableEntities = this._selected.filter((entity) => {
const removeableEntities = this._selectedEntities.filter((entity) => {
const stateObj = this.hass.states[entity];
return stateObj?.attributes.restored;
});
showConfirmationDialog(this, {
title: this.hass.localize(
`ui.panel.config.entities.picker.remove_selected.confirm_${
removeableEntities.length !== this._selected.length ? "partly_" : ""
removeableEntities.length !== this._selectedEntities.length
? "partly_"
: ""
}title`,
{ number: removeableEntities.length }
),
text:
removeableEntities.length === this._selected.length
removeableEntities.length === this._selectedEntities.length
? this.hass.localize(
"ui.panel.config.entities.picker.remove_selected.confirm_text"
)
@@ -1099,7 +882,7 @@ ${
"ui.panel.config.entities.picker.remove_selected.confirm_partly_text",
{
removable: removeableEntities.length,
selected: this._selected.length,
selected: this._selectedEntities.length,
}
),
confirmText: this.hass.localize("ui.common.remove"),
@@ -1135,8 +918,7 @@ ${
this.hass.areas,
this._stateEntities,
this._filters,
this._entries,
this._labels
this._entries
);
if (
filteredDomains.size === 1 &&
@@ -1158,12 +940,6 @@ ${
return [
haStyle,
css`
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
hass-tabs-subpage-data-table.narrow {
--data-table-row-height: 72px;
}
hass-loading-screen {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
@@ -1225,17 +1001,6 @@ ${
text-transform: uppercase;
direction: var(--direction);
}
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;
}
`,
];
}

View File

@@ -1,30 +1,9 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiAlertCircle,
mdiChevronRight,
mdiCog,
mdiDotsVertical,
mdiMenuDown,
mdiPencilOff,
mdiPlus,
mdiTag,
} from "@mdi/js";
import { mdiAlertCircle, mdiPencilOff, mdiPlus } from "@mdi/js";
import { HassEntity } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
nothing,
} from "lit";
import { LitElement, PropertyValues, TemplateResult, html } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { HASSDomEvent } from "../../../common/dom/fire_event";
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
import { navigate } from "../../../common/navigate";
import {
@@ -35,42 +14,21 @@ import { extractSearchParam } from "../../../common/url/search-params";
import {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-fab";
import "../../../components/ha-filter-categories";
import "../../../components/ha-filter-devices";
import "../../../components/ha-filter-entities";
import "../../../components/ha-filter-floor-areas";
import "../../../components/ha-filter-labels";
import "../../../components/ha-icon";
import "../../../components/ha-icon-overflow-menu";
import "../../../components/ha-state-icon";
import "../../../components/ha-svg-icon";
import {
CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry,
} from "../../../data/category_registry";
import {
ConfigEntry,
subscribeConfigEntries,
} from "../../../data/config_entries";
import { getConfigFlowHandlers } from "../../../data/config_flow";
import { fullEntitiesContext } from "../../../data/context";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
subscribeEntityRegistry,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import { domainToName } from "../../../data/integration";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
import { showOptionsFlowDialog } from "../../../dialogs/config-flow/show-dialog-options-flow";
import {
@@ -81,13 +39,9 @@ import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info
import "../../../layouts/hass-loading-screen";
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config";
import "../integrations/ha-integration-overflow-menu";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
import { isHelperDomain } from "./const";
import { showHelperDetailDialog } from "./show-dialog-helper-detail";
@@ -100,8 +54,6 @@ type HelperItem = {
type: string;
configEntry?: ConfigEntry;
entity?: HassEntity;
category: string | undefined;
label_entries: LabelRegistryEntry[];
};
// This groups items by a key but only returns last entry per key.
@@ -141,33 +93,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
@state() private _configEntries?: Record<string, ConfigEntry>;
@state() private _selected: string[] = [];
@state() private _activeFilters?: string[];
@state() private _filters: Record<
string,
{ value: string[] | undefined; items: Set<string> | undefined }
> = {};
@state() private _expandedFilter?: string;
@state()
_categories!: CategoryRegistryEntry[];
@state()
_labels!: LabelRegistryEntry[];
@state()
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
@state() private _filteredStateItems?: string[] | null;
private _sizeController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width,
});
public hassSubscribe() {
return [
subscribeConfigEntries(
@@ -192,89 +117,58 @@ 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;
}),
subscribeCategoryRegistry(
this.hass.connection,
"helpers",
(categories) => {
this._categories = categories;
}
),
];
}
private _columns = memoizeOne(
(
narrow: boolean,
localize: LocalizeFunc
): DataTableColumnContainer<HelperItem> => ({
icon: {
title: "",
label: localize("ui.panel.config.helpers.picker.headers.icon"),
type: "icon",
template: (helper) =>
helper.entity
? html`<ha-state-icon
.hass=${this.hass}
.stateObj=${helper.entity}
></ha-state-icon>`
: html`<ha-svg-icon
.path=${helper.icon}
style="color: var(--error-color)"
></ha-svg-icon>`,
},
name: {
title: localize("ui.panel.config.helpers.picker.headers.name"),
main: true,
sortable: true,
filterable: true,
grows: true,
direction: "asc",
template: (helper) => html`
<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}
`,
},
entity_id: {
title: localize("ui.panel.config.helpers.picker.headers.entity_id"),
hidden: this.narrow,
sortable: true,
filterable: true,
width: "25%",
},
category: {
title: localize("ui.panel.config.helpers.picker.headers.category"),
hidden: true,
groupable: true,
filterable: true,
sortable: true,
},
labels: {
title: "",
hidden: true,
filterable: true,
template: (helper) =>
helper.label_entries.map((lbl) => lbl.name).join(" "),
},
localized_type: {
(narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
const columns: DataTableColumnContainer<HelperItem> = {
icon: {
title: "",
label: localize("ui.panel.config.helpers.picker.headers.icon"),
type: "icon",
template: (helper) =>
helper.entity
? html`<ha-state-icon
.hass=${this.hass}
.stateObj=${helper.entity}
></ha-state-icon>`
: html`<ha-svg-icon
.path=${helper.icon}
style="color: var(--error-color)"
></ha-svg-icon>`,
},
name: {
title: localize("ui.panel.config.helpers.picker.headers.name"),
main: true,
sortable: true,
filterable: true,
grows: true,
direction: "asc",
template: (helper) => html`
${helper.name}
${narrow
? html`<div class="secondary">${helper.entity_id}</div> `
: ""}
`,
},
};
if (!narrow) {
columns.entity_id = {
title: localize("ui.panel.config.helpers.picker.headers.entity_id"),
sortable: true,
filterable: true,
width: "25%",
};
}
columns.localized_type = {
title: localize("ui.panel.config.helpers.picker.headers.type"),
sortable: true,
width: "25%",
filterable: true,
groupable: true,
},
editable: {
};
columns.editable = {
title: "",
label: this.hass.localize(
"ui.panel.config.helpers.picker.headers.editable"
@@ -297,36 +191,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
`
: ""}
`,
},
actions: {
title: "",
width: "64px",
type: "overflow-menu",
template: (helper) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiCog,
label: this.hass.localize(
"ui.panel.config.automation.picker.show_settings"
),
action: () => this._openSettings(helper),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.automation.picker.${helper.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(helper),
},
]}
>
</ha-icon-overflow-menu>
`,
},
})
};
return columns;
}
);
private _getItems = memoizeOne(
@@ -334,16 +201,8 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
localize: LocalizeFunc,
stateItems: HassEntity[],
entityEntries: Record<string, EntityRegistryEntry>,
configEntries: Record<string, ConfigEntry>,
entityReg: EntityRegistryEntry[],
categoryReg?: CategoryRegistryEntry[],
labelReg?: LabelRegistryEntry[],
filteredStateItems?: string[] | null
configEntries: Record<string, ConfigEntry>
): HelperItem[] => {
if (filteredStateItems === null) {
return [];
}
const configEntriesCopy = { ...configEntries };
const states = stateItems.map((entityState) => {
@@ -380,36 +239,16 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
type: configEntry.domain,
configEntry,
entity: undefined,
selectable: false,
}));
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;
const category = entityRegEntry?.categories.helpers;
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)!
),
category: category
? categoryReg?.find((cat) => cat.category_id === category)?.name
: 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,
}));
}
);
@@ -423,69 +262,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
return html` <hass-loading-screen></hass-loading-screen> `;
}
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>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`;
const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<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> `;
})}<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div>
</ha-menu-item>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@@ -493,173 +269,20 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
back-path="/config"
.route=${this.route}
.tabs=${configSections.devices}
selectable
.selected=${this._selected.length}
@selection-changed=${this._handleSelectionChanged}
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._entityReg,
this._categories,
this._labels,
this._filteredStateItems
this._configEntries
)}
initialGroupColumn="category"
.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-floor-areas
.hass=${this.hass}
.type=${"entity"}
.value=${this._filters["ha-filter-floor-areas"]?.value}
@data-table-filter-changed=${this._filterChanged}
slot="filter-pane"
.expanded=${this._expandedFilter === "ha-filter-floor-areas"}
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-floor-areas>
<ha-filter-devices
.hass=${this.hass}
.type=${"entity"}
.value=${this._filters["ha-filter-devices"]?.value}
@data-table-filter-changed=${this._filterChanged}
slot="filter-pane"
.expanded=${this._expandedFilter === "ha-filter-devices"}
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-devices>
<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-filter-categories
.hass=${this.hass}
scope="helpers"
.value=${this._filters["ha-filter-categories"]?.value}
@data-table-filter-changed=${this._filterChanged}
slot="filter-pane"
.expanded=${this._expandedFilter === "ha-filter-categories"}
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-categories>
${!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>
${labelsInOverflow
? 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}
${this.narrow || labelsInOverflow
? html`
<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-button-menu-new>`
: nothing}
<ha-integration-overflow-menu
.hass=${this.hass}
slot="toolbar-icon"
@@ -670,7 +293,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
"ui.panel.config.helpers.picker.create_helper"
)}
extended
@click=${this._createHelper}
@click=${this._createHelpler}
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
@@ -678,151 +301,6 @@ 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)));
}
if (key === "ha-filter-categories" && filter.value?.length) {
const categoryItems: Set<string> = new Set();
this._stateItems
.filter(
(stateItem) =>
filter.value![0] ===
this._entityReg.find(
(reg) => reg.entity_id === stateItem.entity_id
)?.categories.helpers
)
.forEach((stateItem) => categoryItems.add(stateItem.entity_id));
if (!items) {
items = categoryItems;
continue;
}
items =
"intersection" in items
? // @ts-ignore
items.intersection(categoryItems)
: new Set([...items].filter((x) => categoryItems!.has(x)));
}
}
this._filteredStateItems = items ? [...items] : undefined;
}
private _clearFilter() {
this._filters = {};
this._applyFilters();
}
private _editCategory(helper: any) {
const entityReg = this._entityReg.find(
(reg) => reg.entity_id === helper.entity_id
);
if (!entityReg) {
showAlertDialog(this, {
title: this.hass.localize(
"ui.panel.config.automation.picker.no_category_support"
),
text: this.hass.localize(
"ui.panel.config.automation.picker.no_category_entity_reg"
),
});
return;
}
showAssignCategoryDialog(this, {
scope: "helpers",
entityReg,
});
}
private async _handleBulkCategory(ev) {
const category = ev.currentTarget.value;
this._bulkAddCategory(category);
}
private async _bulkAddCategory(category: string) {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
categories: { helpers: category },
})
);
});
await Promise.all(promises);
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const action = ev.currentTarget.action;
this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels:
action === "add"
? this.hass.entities[entityId].labels.concat(label)
: this.hass.entities[entityId].labels.filter(
(lbl) => lbl !== label
),
})
);
});
await Promise.all(promises);
}
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
}
protected firstUpdated(changedProps: PropertyValues) {
super.firstUpdated(changedProps);
if (this.route.path === "/add") {
@@ -940,72 +418,9 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
}
}
private _openSettings(helper: HelperItem) {
if (helper.entity) {
showMoreInfoDialog(this, {
entityId: helper.entity_id,
view: "settings",
});
} else {
showOptionsFlowDialog(this, helper.configEntry!);
}
}
private _createHelper() {
private _createHelpler() {
showHelperDetailDialog(this, {});
}
private async _bulkCreateCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "helpers",
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
"helpers",
values
);
this._bulkAddCategory(category.category_id);
return category;
},
});
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host {
display: block;
}
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
hass-tabs-subpage-data-table.narrow {
--data-table-row-height: 72px;
}
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;
}
`,
];
}
}
declare global {

View File

@@ -49,19 +49,11 @@ 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() {

View File

@@ -1,11 +1,4 @@
import {
mdiDelete,
mdiDevices,
mdiHelpCircle,
mdiPlus,
mdiRobot,
mdiShape,
} from "@mdi/js";
import { mdiHelpCircle, mdiPlus } from "@mdi/js";
import { LitElement, PropertyValues, html, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
@@ -18,7 +11,6 @@ import {
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-relative-time";
import "../../../components/ha-icon-overflow-menu";
import {
LabelRegistryEntry,
LabelRegistryEntryMutableParams,
@@ -35,7 +27,6 @@ import "../../../layouts/hass-tabs-subpage-data-table";
import { HomeAssistant, Route } from "../../../types";
import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "./show-dialog-label-detail";
import { navigate } from "../../../common/navigate";
@customElement("ha-config-labels")
export class HaConfigLabels extends LitElement {
@@ -80,41 +71,6 @@ export class HaConfigLabels extends LitElement {
filterable: true,
grows: true,
},
actions: {
title: "",
width: "64px",
type: "overflow-menu",
template: (label) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
label: this.hass.localize("ui.panel.config.entities.caption"),
path: mdiShape,
action: () => this._navigateEntities(label),
},
{
label: this.hass.localize("ui.panel.config.devices.caption"),
path: mdiDevices,
action: () => this._navigateDevices(label),
},
{
label: this.hass.localize("ui.panel.config.automation.caption"),
path: mdiRobot,
action: () => this._navigateAutomations(label),
},
{
label: this.hass.localize("ui.common.delete"),
path: mdiDelete,
action: () => this._removeLabel(label),
warning: true,
},
]}
>
</ha-icon-overflow-menu>
`,
},
};
return columns;
});
@@ -233,7 +189,6 @@ export class HaConfigLabels extends LitElement {
}),
dismissText: this.hass!.localize("ui.common.cancel"),
confirmText: this.hass!.localize("ui.common.remove"),
destructive: true,
}))
) {
return false;
@@ -248,20 +203,6 @@ export class HaConfigLabels extends LitElement {
return false;
}
}
private _navigateEntities(label: LabelRegistryEntry) {
navigate(`/config/entities?historyBack=1&label=${label.label_id}`);
}
private _navigateDevices(label: LabelRegistryEntry) {
navigate(`/config/devices/dashboard?historyBack=1&label=${label.label_id}`);
}
private _navigateAutomations(label: LabelRegistryEntry) {
navigate(
`/config/automation/dashboard?historyBack=1&label=${label.label_id}`
);
}
}
declare global {

View File

@@ -1,15 +1,10 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import {
mdiChevronRight,
mdiCog,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiPalette,
mdiPencilOff,
mdiPlay,
@@ -21,7 +16,6 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
@@ -29,7 +23,6 @@ import {
} from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { computeCssColor } from "../../../common/color/compute-color";
import { formatShortDateTime } from "../../../common/datetime/format_date_time";
import { relativeTime } from "../../../common/datetime/relative_time";
import { HASSDomEvent, fireEvent } from "../../../common/dom/fire_event";
@@ -39,7 +32,6 @@ import { LocalizeFunc } from "../../../common/translations/localize";
import {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-button";
@@ -51,26 +43,18 @@ 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-item";
import "../../../components/ha-state-icon";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import {
CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry,
} from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context";
import { isUnavailableState } from "../../../data/entity";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import { EntityRegistryEntry } from "../../../data/entity_registry";
import { forwardHaptic } from "../../../data/haptics";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import {
@@ -84,7 +68,6 @@ import {
showAlertDialog,
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
@@ -92,13 +75,10 @@ import { HomeAssistant, Route } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
type SceneItem = SceneEntity & {
name: string;
area: string | undefined;
category: string | undefined;
labels: LabelRegistryEntry[];
};
@@ -115,10 +95,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
@property({ attribute: false }) public scenes!: SceneEntity[];
@state() private _searchParms = new URLSearchParams(window.location.search);
@state() private _selected: string[] = [];
@state() private _activeFilters?: string[];
@state() private _filteredScenes?: string[] | null;
@@ -140,15 +116,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
private _sizeController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width,
});
private _scenes = memoizeOne(
(
scenes: SceneEntity[],
entityReg: EntityRegistryEntry[],
areas: HomeAssistant["areas"],
categoryReg?: CategoryRegistryEntry[],
labelReg?: LabelRegistryEntry[],
filteredScenes?: string[] | null
@@ -169,9 +140,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
return {
...scene,
name: computeStateName(scene),
area: entityRegEntry?.area_id
? areas[entityRegEntry?.area_id]?.name
: undefined,
category: category
? categoryReg?.find((cat) => cat.category_id === category)?.name
: undefined,
@@ -214,13 +182,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
: nothing}
`,
},
area: {
title: localize("ui.panel.config.scene.picker.headers.area"),
hidden: true,
groupable: true,
filterable: true,
sortable: true,
},
category: {
title: localize("ui.panel.config.scene.picker.headers.category"),
hidden: true,
@@ -234,13 +195,14 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
filterable: true,
template: (scene) => scene.labels.map((lbl) => lbl.name).join(" "),
},
state: {
};
if (!narrow) {
columns.state = {
title: localize(
"ui.panel.config.scene.picker.headers.last_activated"
),
sortable: true,
width: "30%",
hidden: narrow,
template: (scene) => {
const lastActivated = scene.state;
if (!lastActivated || isUnavailableState(lastActivated)) {
@@ -255,100 +217,86 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
: relativeTime(date, this.hass.locale)}
`;
},
},
only_editable: {
title: "",
width: "56px",
template: (scene) =>
!scene.attributes.id
? html`
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.scene.picker.only_editable"
)}
</simple-tooltip>
<ha-svg-icon
.path=${mdiPencilOff}
style="color: var(--secondary-text-color)"
></ha-svg-icon>
`
: "",
},
actions: {
title: "",
width: "64px",
type: "overflow-menu",
template: (scene) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiInformationOutline,
label: this.hass.localize(
"ui.panel.config.scene.picker.show_info"
),
action: () => this._showInfo(scene),
},
{
path: mdiCog,
label: this.hass.localize(
"ui.panel.config.automation.picker.show_settings"
),
action: () => this._openSettings(scene),
},
{
path: mdiPlay,
label: this.hass.localize(
"ui.panel.config.scene.picker.activate"
),
action: () => this._activateScene(scene),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(scene),
},
{
divider: true,
},
{
path: mdiContentDuplicate,
label: this.hass.localize(
"ui.panel.config.scene.picker.duplicate"
),
action: () => this._duplicate(scene),
disabled: !scene.attributes.id,
},
{
label: this.hass.localize(
"ui.panel.config.scene.picker.delete"
),
path: mdiDelete,
action: () => this._deleteConfirm(scene),
warning: scene.attributes.id,
disabled: !scene.attributes.id,
},
]}
>
</ha-icon-overflow-menu>
`,
},
};
}
columns.only_editable = {
title: "",
width: "56px",
template: (scene) =>
!scene.attributes.id
? html`
<simple-tooltip animation-delay="0" position="left">
${this.hass.localize(
"ui.panel.config.scene.picker.only_editable"
)}
</simple-tooltip>
<ha-svg-icon
.path=${mdiPencilOff}
style="color: var(--secondary-text-color)"
></ha-svg-icon>
`
: "",
};
columns.actions = {
title: "",
width: "64px",
type: "overflow-menu",
template: (scene) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiInformationOutline,
label: this.hass.localize(
"ui.panel.config.scene.picker.show_info"
),
action: () => this._showInfo(scene),
},
{
path: mdiPlay,
label: this.hass.localize(
"ui.panel.config.scene.picker.activate"
),
action: () => this._activateScene(scene),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.scene.picker.${scene.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(scene),
},
{
divider: true,
},
{
path: mdiContentDuplicate,
label: this.hass.localize(
"ui.panel.config.scene.picker.duplicate"
),
action: () => this._duplicate(scene),
disabled: !scene.attributes.id,
},
{
label: this.hass.localize(
"ui.panel.config.scene.picker.delete"
),
path: mdiDelete,
action: () => this._deleteConfirm(scene),
warning: scene.attributes.id,
disabled: !scene.attributes.id,
},
]}
>
</ha-icon-overflow-menu>
`,
};
return columns;
}
);
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_entityReg")) {
this._applyFilters();
}
}
protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
return [
subscribeCategoryRegistry(this.hass.connection, "scene", (categories) => {
@@ -361,70 +309,6 @@ class HaSceneDashboard 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>
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`;
const labelItems = html` ${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
reducedTouchTarget
></ha-checkbox>
<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>`;
})}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@@ -432,9 +316,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
back-path="/config"
.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
@@ -445,7 +326,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
.data=${this._scenes(
this.scenes,
this._entityReg,
this.hass.areas,
this._categories,
this._labels,
this._filteredScenes
@@ -517,103 +397,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
@expanded-changed=${this._filterExpanded}
></ha-filter-categories>
${!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>
${labelsInOverflow
? 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}
${this.narrow || labelsInOverflow
? html`
<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-button-menu-new>`
: nothing}
${!this.scenes.length
? html`<div class="empty" slot="empty">
<ha-svg-icon .path=${mdiPalette}></ha-svg-icon>
@@ -739,33 +522,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
this._applyFilters();
}
firstUpdated() {
if (this._searchParms.has("label")) {
this._filterLabel();
}
}
private _filterLabel() {
const label = this._searchParms.get("label");
if (!label) {
return;
}
this._filters = {
...this._filters,
"ha-filter-labels": {
value: [label],
items: undefined,
},
};
this._applyFilters();
}
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
}
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
const scene = this.scenes.find((a) => a.entity_id === ev.detail.id);
@@ -774,46 +530,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
}
}
private async _handleBulkCategory(ev) {
const category = ev.currentTarget.value;
this._bulkAddCategory(category);
}
private async _bulkAddCategory(category: string) {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
categories: { scene: category },
})
);
});
await Promise.all(promises);
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const action = ev.currentTarget.action;
this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels:
action === "add"
? this.hass.entities[entityId].labels.concat(label)
: this.hass.entities[entityId].labels.filter(
(lbl) => lbl !== label
),
})
);
});
await Promise.all(promises);
}
private _editCategory(scene: any) {
const entityReg = this._entityReg.find(
(reg) => reg.entity_id === scene.entity_id
@@ -839,13 +555,6 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
fireEvent(this, "hass-more-info", { entityId: scene.entity_id });
}
private _openSettings(scene: SceneEntity) {
showMoreInfoDialog(this, {
entityId: scene.entity_id,
view: "settings",
});
}
private _activateScene = async (scene: SceneEntity) => {
await activateScene(this.hass, scene.entity_id);
showToast(this, {
@@ -909,38 +618,10 @@ class HaSceneDashboard extends SubscribeMixin(LitElement) {
});
}
private async _bulkCreateCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "scene",
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
"scene",
values
);
this._bulkAddCategory(category.category_id);
return category;
},
});
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host {
display: block;
}
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
@@ -952,16 +633,6 @@ class HaSceneDashboard 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;
}
`,
];
}

View File

@@ -1,14 +1,9 @@
import { consume } from "@lit-labs/context";
import { ResizeController } from "@lit-labs/observers/resize-controller";
import {
mdiChevronRight,
mdiCog,
mdiContentDuplicate,
mdiDelete,
mdiDotsVertical,
mdiHelpCircle,
mdiInformationOutline,
mdiMenuDown,
mdiPlay,
mdiPlus,
mdiScriptText,
@@ -20,7 +15,6 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
CSSResultGroup,
LitElement,
PropertyValues,
TemplateResult,
css,
html,
@@ -29,7 +23,6 @@ import {
import { customElement, property, 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";
@@ -40,7 +33,6 @@ import { LocalizeFunc } from "../../../common/translations/localize";
import {
DataTableColumnContainer,
RowClickedEvent,
SelectionChangedEvent,
} from "../../../components/data-table/ha-data-table";
import "../../../components/data-table/ha-data-table-labels";
import "../../../components/ha-fab";
@@ -52,24 +44,16 @@ 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-item";
import "../../../components/ha-sub-menu";
import "../../../components/ha-svg-icon";
import {
CategoryRegistryEntry,
createCategoryRegistryEntry,
subscribeCategoryRegistry,
} from "../../../data/category_registry";
import { fullEntitiesContext } from "../../../data/context";
import { UNAVAILABLE } from "../../../data/entity";
import {
EntityRegistryEntry,
UpdateEntityRegistryEntryResult,
updateEntityRegistryEntry,
} from "../../../data/entity_registry";
import { EntityRegistryEntry } from "../../../data/entity_registry";
import {
LabelRegistryEntry,
createLabelRegistryEntry,
subscribeLabelRegistry,
} from "../../../data/label_registry";
import {
@@ -85,7 +69,6 @@ import {
showAlertDialog,
showConfirmationDialog,
} from "../../../dialogs/generic/show-dialog-box";
import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
import "../../../layouts/hass-tabs-subpage-data-table";
import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
import { haStyle } from "../../../resources/styles";
@@ -94,13 +77,10 @@ import { documentationUrl } from "../../../util/documentation-url";
import { showToast } from "../../../util/toast";
import { showNewAutomationDialog } from "../automation/show-dialog-new-automation";
import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
import { configSections } from "../ha-panel-config";
import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
type ScriptItem = ScriptEntity & {
name: string;
area: string | undefined;
category: string | undefined;
labels: LabelRegistryEntry[];
};
@@ -121,8 +101,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
@state() private _searchParms = new URLSearchParams(window.location.search);
@state() private _selected: string[] = [];
@state() private _activeFilters?: string[];
@state() private _filteredScripts?: string[] | null;
@@ -144,15 +122,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
@consume({ context: fullEntitiesContext, subscribe: true })
_entityReg!: EntityRegistryEntry[];
private _sizeController = new ResizeController(this, {
callback: (entries) => entries[0]?.contentRect.width,
});
private _scripts = memoizeOne(
(
scripts: ScriptEntity[],
entityReg: EntityRegistryEntry[],
areas: HomeAssistant["areas"],
categoryReg?: CategoryRegistryEntry[],
labelReg?: LabelRegistryEntry[],
filteredScripts?: string[] | null
@@ -175,9 +148,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
return {
...script,
name: computeStateName(script),
area: entityRegEntry?.area_id
? areas[entityRegEntry?.area_id]?.name
: undefined,
last_triggered: script.attributes.last_triggered || undefined,
category: category
? categoryReg?.find((cat) => cat.category_id === category)?.name
@@ -243,13 +213,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
`;
},
},
area: {
title: localize("ui.panel.config.script.picker.headers.area"),
hidden: true,
groupable: true,
filterable: true,
sortable: true,
},
category: {
title: localize("ui.panel.config.script.picker.headers.category"),
hidden: true,
@@ -263,8 +226,9 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
filterable: true,
template: (script) => script.labels.map((lbl) => lbl.name).join(" "),
},
last_triggered: {
hidden: narrow,
};
if (!narrow) {
columns.last_triggered = {
sortable: true,
width: "40%",
title: localize("ui.card.automation.last_triggered"),
@@ -284,74 +248,66 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
: this.hass.localize("ui.components.relative_time.never")}
`;
},
},
actions: {
title: "",
width: "64px",
type: "overflow-menu",
template: (script) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiInformationOutline,
label: this.hass.localize(
"ui.panel.config.script.picker.show_info"
),
action: () => this._showInfo(script),
},
{
path: mdiCog,
label: this.hass.localize(
"ui.panel.config.automation.picker.show_settings"
),
action: () => this._openSettings(script),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(script),
},
{
path: mdiPlay,
label: this.hass.localize(
"ui.panel.config.script.picker.run"
),
action: () => this._runScript(script),
},
{
path: mdiTransitConnection,
label: this.hass.localize(
"ui.panel.config.script.picker.show_trace"
),
action: () => this._showTrace(script),
},
{
divider: true,
},
{
path: mdiContentDuplicate,
label: this.hass.localize(
"ui.panel.config.script.picker.duplicate"
),
action: () => this._duplicate(script),
},
{
label: this.hass.localize(
"ui.panel.config.script.picker.delete"
),
path: mdiDelete,
action: () => this._deleteConfirm(script),
warning: true,
},
]}
>
</ha-icon-overflow-menu>
`,
},
};
}
columns.actions = {
title: "",
width: "64px",
type: "overflow-menu",
template: (script) => html`
<ha-icon-overflow-menu
.hass=${this.hass}
narrow
.items=${[
{
path: mdiInformationOutline,
label: this.hass.localize(
"ui.panel.config.script.picker.show_info"
),
action: () => this._showInfo(script),
},
{
path: mdiTag,
label: this.hass.localize(
`ui.panel.config.script.picker.${script.category ? "edit_category" : "assign_category"}`
),
action: () => this._editCategory(script),
},
{
path: mdiPlay,
label: this.hass.localize("ui.panel.config.script.picker.run"),
action: () => this._runScript(script),
},
{
path: mdiTransitConnection,
label: this.hass.localize(
"ui.panel.config.script.picker.show_trace"
),
action: () => this._showTrace(script),
},
{
divider: true,
},
{
path: mdiContentDuplicate,
label: this.hass.localize(
"ui.panel.config.script.picker.duplicate"
),
action: () => this._duplicate(script),
},
{
label: this.hass.localize(
"ui.panel.config.script.picker.delete"
),
path: mdiDelete,
action: () => this._deleteConfirm(script),
warning: true,
},
]}
>
</ha-icon-overflow-menu>
`,
};
return columns;
@@ -374,69 +330,6 @@ class HaScriptPicker 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
><md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateCategory}>
<div slot="headline">
${this.hass.localize("ui.panel.config.category.editor.add")}
</div>
</ha-menu-item>`;
const labelItems = html`${this._labels?.map((label) => {
const color = label.color ? computeCssColor(label.color) : undefined;
const selected = this._selected.every((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
const partial =
!selected &&
this._selected.some((entityId) =>
this.hass.entities[entityId]?.labels.includes(label.label_id)
);
return html`<ha-menu-item
.value=${label.label_id}
.action=${selected ? "remove" : "add"}
@click=${this._handleBulkLabel}
keep-open
reducedTouchTarget
>
<ha-checkbox
slot="start"
.checked=${selected}
.indeterminate=${partial}
></ha-checkbox>
<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>`;
})}
<md-divider role="separator" tabindex="-1"></md-divider>
<ha-menu-item @click=${this._bulkCreateLabel}>
<div slot="headline">
${this.hass.localize("ui.panel.config.labels.add_label")}
</div></ha-menu-item
>`;
const labelsInOverflow =
(this._sizeController.value && this._sizeController.value < 700) ||
(!this._sizeController.value && this.hass.dockedSidebar === "docked");
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
@@ -446,9 +339,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
.tabs=${configSections.automations}
hasFilters
initialGroupColumn="category"
selectable
.selected=${this._selected.length}
@selection-changed=${this._handleSelectionChanged}
.filters=${Object.values(this._filters).filter(
(filter) => filter.value?.length
).length}
@@ -460,7 +350,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
.data=${this._scripts(
this.scripts,
this._entityReg,
this.hass.areas,
this._categories,
this._labels,
this._filteredScripts
@@ -542,104 +431,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
.narrow=${this.narrow}
@expanded-changed=${this._filterExpanded}
></ha-filter-blueprints>
${!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>
${labelsInOverflow
? 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}
${this.narrow || labelsInOverflow
? html`
<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-button-menu-new>`
: nothing}
${!this.scripts.length
? html` <div class="empty" slot="empty">
<ha-svg-icon .path=${mdiScriptText}></ha-svg-icon>
@@ -769,35 +560,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
this._filteredScripts = items ? [...items] : undefined;
}
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_entityReg")) {
this._applyFilters();
}
}
firstUpdated() {
if (this._searchParms.has("blueprint")) {
this._filterBlueprint();
}
if (this._searchParms.has("label")) {
this._filterLabel();
}
}
private _filterLabel() {
const label = this._searchParms.get("label");
if (!label) {
return;
}
this._filters = {
...this._filters,
"ha-filter-labels": {
value: [label],
items: undefined,
},
};
this._applyFilters();
}
private async _filterBlueprint() {
@@ -837,52 +603,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
});
}
private _handleSelectionChanged(
ev: HASSDomEvent<SelectionChangedEvent>
): void {
this._selected = ev.detail.value;
}
private async _handleBulkCategory(ev) {
const category = ev.currentTarget.value;
this._bulkAddCategory(category);
}
private async _bulkAddCategory(category: string) {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
categories: { script: category },
})
);
});
await Promise.all(promises);
}
private async _handleBulkLabel(ev) {
const label = ev.currentTarget.value;
const action = ev.currentTarget.action;
this._bulkLabel(label, action);
}
private async _bulkLabel(label: string, action: "add" | "remove") {
const promises: Promise<UpdateEntityRegistryEntryResult>[] = [];
this._selected.forEach((entityId) => {
promises.push(
updateEntityRegistryEntry(this.hass, entityId, {
labels:
action === "add"
? this.hass.entities[entityId].labels.concat(label)
: this.hass.entities[entityId].labels.filter(
(lbl) => lbl !== label
),
})
);
});
await Promise.all(promises);
}
private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
const entry = this.entityRegistry.find((e) => e.entity_id === ev.detail.id);
if (entry) {
@@ -919,13 +639,6 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
fireEvent(this, "hass-more-info", { entityId: script.entity_id });
}
private _openSettings(script: any) {
showMoreInfoDialog(this, {
entityId: script.entity_id,
view: "settings",
});
}
private _showTrace(script: any) {
const entry = this.entityRegistry.find(
(e) => e.entity_id === script.entity_id
@@ -1025,38 +738,10 @@ class HaScriptPicker extends SubscribeMixin(LitElement) {
}
}
private async _bulkCreateCategory() {
showCategoryRegistryDetailDialog(this, {
scope: "script",
createEntry: async (values) => {
const category = await createCategoryRegistryEntry(
this.hass,
"script",
values
);
this._bulkAddCategory(category.category_id);
return category;
},
});
}
private _bulkCreateLabel() {
showLabelDetailDialog(this, {
createEntry: async (values) => {
const label = await createLabelRegistryEntry(this.hass, values);
this._bulkLabel(label.label_id, "add");
return label;
},
});
}
static get styles(): CSSResultGroup {
return [
haStyle,
css`
:host {
display: block;
}
hass-tabs-subpage-data-table {
--data-table-row-height: 60px;
}
@@ -1071,16 +756,6 @@ class HaScriptPicker 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;
}
`,
];
}

View File

@@ -9,7 +9,6 @@ import { property, query, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { ensureArray } from "../../common/array/ensure-array";
import { storage } from "../../common/decorators/storage";
import { computeDomain } from "../../common/entity/compute_domain";
import { navigate } from "../../common/navigate";
import { constructUrlCurrentPath } from "../../common/url/construct-url";
import {
@@ -28,29 +27,37 @@ import "../../components/ha-menu-button";
import "../../components/ha-target-picker";
import "../../components/ha-top-app-bar-fixed";
import {
EntityHistoryState,
AreaDeviceLookup,
AreaEntityLookup,
getAreaDeviceLookup,
getAreaEntityLookup,
} from "../../data/area_registry";
import {
DeviceEntityLookup,
getDeviceEntityLookup,
subscribeDeviceRegistry,
} from "../../data/device_registry";
import { subscribeEntityRegistry } from "../../data/entity_registry";
import {
HistoryResult,
HistoryStates,
LineChartState,
LineChartUnit,
computeGroupKey,
computeHistory,
subscribeHistory,
HistoryStates,
EntityHistoryState,
LineChartUnit,
computeGroupKey,
LineChartState,
} from "../../data/history";
import { Statistics, fetchStatistics } from "../../data/recorder";
import {
expandAreaTarget,
expandDeviceTarget,
expandFloorTarget,
expandLabelTarget,
} from "../../data/selector";
import { fetchStatistics, Statistics } from "../../data/recorder";
import { getSensorNumericDeviceClasses } from "../../data/sensor";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import { SubscribeMixin } from "../../mixins/subscribe-mixin";
import { haStyle } from "../../resources/styles";
import { HomeAssistant } from "../../types";
import { fileDownload } from "../../util/file_download";
import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
import { computeDomain } from "../../common/entity/compute_domain";
class HaPanelHistory extends LitElement {
class HaPanelHistory extends SubscribeMixin(LitElement) {
@property({ attribute: false }) hass!: HomeAssistant;
@property({ reflect: true, type: Boolean }) public narrow = false;
@@ -76,6 +83,12 @@ class HaPanelHistory extends LitElement {
@state() private _statisticsHistory?: HistoryResult;
@state() private _deviceEntityLookup?: DeviceEntityLookup;
@state() private _areaEntityLookup?: AreaEntityLookup;
@state() private _areaDeviceLookup?: AreaDeviceLookup;
@state()
private _showBack?: boolean;
@@ -110,6 +123,18 @@ class HaPanelHistory extends LitElement {
this._unsubscribeHistory();
}
public hassSubscribe(): UnsubscribeFunc[] {
return [
subscribeEntityRegistry(this.hass.connection!, (entities) => {
this._deviceEntityLookup = getDeviceEntityLookup(entities);
this._areaEntityLookup = getAreaEntityLookup(entities);
}),
subscribeDeviceRegistry(this.hass.connection!, (devices) => {
this._areaDeviceLookup = getAreaDeviceLookup(devices);
}),
];
}
private _goBack(): void {
history.back();
}
@@ -307,9 +332,7 @@ class HaPanelHistory extends LitElement {
const entityIds = searchParams.entity_id;
const deviceIds = searchParams.device_id;
const areaIds = searchParams.area_id;
const floorIds = searchParams.floor_id;
const labelsIds = searchParams.label_id;
if (entityIds || deviceIds || areaIds || floorIds || labelsIds) {
if (entityIds || deviceIds || areaIds) {
this._targetPickerValue = {};
}
if (entityIds) {
@@ -324,14 +347,6 @@ class HaPanelHistory extends LitElement {
const splitIds = areaIds.split(",");
this._targetPickerValue!.area_id = splitIds;
}
if (floorIds) {
const splitIds = floorIds.split(",");
this._targetPickerValue!.floor_id = splitIds;
}
if (labelsIds) {
const splitIds = labelsIds.split(",");
this._targetPickerValue!.label_id = splitIds;
}
const startDate = searchParams.start_date;
if (startDate) {
@@ -507,77 +522,95 @@ class HaPanelHistory extends LitElement {
private _getEntityIds(): string[] {
return this.__getEntityIds(
this._targetPickerValue,
this.hass.entities,
this.hass.devices,
this.hass.areas
this._deviceEntityLookup,
this._areaEntityLookup,
this._areaDeviceLookup
);
}
private __getEntityIds = memoizeOne(
(
targetPickerValue: HassServiceTarget,
entities: HomeAssistant["entities"],
devices: HomeAssistant["devices"],
areas: HomeAssistant["areas"]
deviceEntityLookup: DeviceEntityLookup | undefined,
areaEntityLookup: AreaEntityLookup | undefined,
areaDeviceLookup: AreaDeviceLookup | undefined
): string[] => {
if (!targetPickerValue) {
if (
!targetPickerValue ||
deviceEntityLookup === undefined ||
areaEntityLookup === undefined ||
areaDeviceLookup === undefined
) {
return [];
}
const targetSelector = { target: {} };
const targetEntities = new Set(ensureArray(targetPickerValue.entity_id));
const targetDevices = new Set(ensureArray(targetPickerValue.device_id));
const targetAreas = new Set(ensureArray(targetPickerValue.area_id));
const targetFloors = new Set(ensureArray(targetPickerValue.floor_id));
const targetLabels = new Set(ensureArray(targetPickerValue.label_id));
const entityIds = new Set<string>();
let {
area_id: searchingAreaId,
device_id: searchingDeviceId,
entity_id: searchingEntityId,
} = targetPickerValue;
targetLabels.forEach((labelId) => {
const expanded = expandLabelTarget(
this.hass,
labelId,
areas,
devices,
entities,
targetSelector
);
expanded.devices.forEach((id) => targetDevices.add(id));
expanded.entities.forEach((id) => targetEntities.add(id));
expanded.areas.forEach((id) => targetAreas.add(id));
});
if (searchingAreaId) {
searchingAreaId = ensureArray(searchingAreaId);
for (const singleSearchingAreaId of searchingAreaId) {
const foundEntities = areaEntityLookup[singleSearchingAreaId];
if (foundEntities?.length) {
for (const foundEntity of foundEntities) {
if (foundEntity.entity_category === null) {
entityIds.add(foundEntity.entity_id);
}
}
}
targetFloors.forEach((floorId) => {
const expanded = expandFloorTarget(
this.hass,
floorId,
areas,
targetSelector
);
expanded.areas.forEach((id) => targetAreas.add(id));
});
const foundDevices = areaDeviceLookup[singleSearchingAreaId];
if (!foundDevices?.length) {
continue;
}
targetAreas.forEach((areaId) => {
const expanded = expandAreaTarget(
this.hass,
areaId,
devices,
entities,
targetSelector
);
expanded.devices.forEach((id) => targetDevices.add(id));
expanded.entities.forEach((id) => targetEntities.add(id));
});
for (const foundDevice of foundDevices) {
const foundDeviceEntities = deviceEntityLookup[foundDevice.id];
if (!foundDeviceEntities?.length) {
continue;
}
targetDevices.forEach((deviceId) => {
const expanded = expandDeviceTarget(
this.hass,
deviceId,
entities,
targetSelector
);
expanded.entities.forEach((id) => targetEntities.add(id));
});
for (const foundDeviceEntity of foundDeviceEntities) {
if (
(!foundDeviceEntity.area_id ||
foundDeviceEntity.area_id === singleSearchingAreaId) &&
foundDeviceEntity.entity_category === null
) {
entityIds.add(foundDeviceEntity.entity_id);
}
}
}
}
}
return Array.from(targetEntities);
if (searchingDeviceId) {
searchingDeviceId = ensureArray(searchingDeviceId);
for (const singleSearchingDeviceId of searchingDeviceId) {
const foundEntities = deviceEntityLookup[singleSearchingDeviceId];
if (!foundEntities?.length) {
continue;
}
for (const foundEntity of foundEntities) {
if (foundEntity.entity_category === null) {
entityIds.add(foundEntity.entity_id);
}
}
}
}
if (searchingEntityId) {
searchingEntityId = ensureArray(searchingEntityId);
for (const singleSearchingEntityId of searchingEntityId) {
entityIds.add(singleSearchingEntityId);
}
}
return [...entityIds];
}
);
@@ -606,12 +639,6 @@ class HaPanelHistory extends LitElement {
","
);
}
if (this._targetPickerValue.label_id) {
params.label_id = ensureArray(this._targetPickerValue.label_id).join(",");
}
if (this._targetPickerValue.floor_id) {
params.floor_id = ensureArray(this._targetPickerValue.floor_id).join(",");
}
if (this._targetPickerValue.area_id) {
params.area_id = ensureArray(this._targetPickerValue.area_id).join(",");
}

View File

@@ -35,9 +35,6 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
@state() protected _config?: T;
@property({ type: Boolean, reflect: true })
public isPanel = false;
public getCardSize(): number | Promise<number> {
return 1;
}
@@ -101,10 +98,10 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
display: block;
padding: 24px 16px 16px;
}
:host([ispanel]) #root {
--ha-card-border-radius: var(--restore-card-border-radius);
--ha-card-border-width: var(--restore-card-border-width);
--ha-card-box-shadow: var(--restore-card-border-shadow);
:host {
--ha-card-border-radius: inherit !important;
--ha-card-border-width: inherit !important;
--ha-card-box-shadow: inherit !important;
}
`;
}

View File

@@ -35,7 +35,6 @@ import { ButtonsHeaderFooterConfig } from "../header-footer/types";
const HIDE_DOMAIN = new Set([
"automation",
"configurator",
"conversation",
"device_tracker",
"geo_location",
"persistent_notification",

View File

@@ -58,12 +58,18 @@ export interface AndCondition extends BaseCondition {
function getValueFromEntityId(
hass: HomeAssistant,
value: string
): string | undefined {
if (isValidEntityId(value) && hass.states[value]) {
return hass.states[value]?.state;
value: string | string[]
): string | string[] {
if (
typeof value === "string" &&
isValidEntityId(value) &&
hass.states[value]
) {
value = hass.states[value]?.state;
} else if (Array.isArray(value)) {
value = value.map((v) => getValueFromEntityId(hass, v) as string);
}
return undefined;
return value;
}
function checkStateCondition(
@@ -77,17 +83,8 @@ function checkStateCondition(
let value = condition.state ?? condition.state_not;
// Handle entity_id, UI should be updated for conditionnal card (filters does not have UI for now)
if (Array.isArray(value)) {
const entityValues = value
.map((v) => getValueFromEntityId(hass, v))
.filter((v): v is string => v !== undefined);
value = [...value, ...entityValues];
} else if (typeof value === "string") {
const entityValue = getValueFromEntityId(hass, value);
value = [value];
if (entityValue) {
value.push(entityValue);
}
if (Array.isArray(value) || typeof value === "string") {
value = getValueFromEntityId(hass, value);
}
return condition.state != null
@@ -106,10 +103,10 @@ function checkStateNumericCondition(
// Handle entity_id, UI should be updated for conditionnal card (filters does not have UI for now)
if (typeof above === "string") {
above = getValueFromEntityId(hass, above) ?? above;
above = getValueFromEntityId(hass, above) as string;
}
if (typeof below === "string") {
below = getValueFromEntityId(hass, below) ?? below;
below = getValueFromEntityId(hass, below) as string;
}
const numericState = Number(state);

View File

@@ -172,14 +172,12 @@ class DialogDashboardStrategyEditor extends LitElement {
`;
}
private _takeControl(ev) {
ev.stopPropagation();
private _takeControl() {
this._params!.takeControl();
this.closeDialog();
}
private _showRawConfigEditor(ev) {
ev.stopPropagation();
private _showRawConfigEditor() {
this._params!.showRawConfigEditor();
this.closeDialog();
}

View File

@@ -130,9 +130,6 @@ export class PanelView extends LitElement implements LovelaceViewElement {
:host {
display: block;
height: 100%;
--restore-card-border-radius: var(--ha-card-border-radius, 12px);
--restore-card-border-width: var(--ha-card-border-width, 1px);
--restore-card-box-shadow: var(--ha-card-box-shadow, none);
}
* {

View File

@@ -116,9 +116,6 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
entities: {
redirect: "/config/entities",
},
labels: {
redirect: "/config/labels",
},
energy: {
component: "energy",
redirect: "/energy",

View File

@@ -32,7 +32,6 @@ const mainStyles = css`
--accent-color: ${unsafeCSS(DEFAULT_ACCENT_COLOR)};
--divider-color: rgba(0, 0, 0, 0.12);
--outline-color: rgba(0, 0, 0, 0.12);
--outline-hover-color: rgba(0, 0, 0, 0.24);
--scrollbar-thumb-color: rgb(194, 194, 194);

View File

@@ -15,7 +15,6 @@ export const darkStyles = {
"switch-unchecked-track-color": "#9b9b9b",
"divider-color": "rgba(225, 225, 225, .12)",
"outline-color": "rgba(225, 225, 225, .12)",
"outline-hover-color": "rgba(225, 225, 225, .24)",
"mdc-ripple-color": "#AAAAAA",
"mdc-linear-progress-buffer-color": "rgba(255, 255, 255, 0.1)",
@@ -143,10 +142,7 @@ 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)",

View File

@@ -129,7 +129,7 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
max-height: max(320px, var(--modes-count, 1) * 80px);
min-height: max(200px, var(--modes-count, 1) * 80px);
--control-select-thickness: 130px;
--control-select-border-radius: 36px;
--control-select-border-radius: 48px;
--control-select-color: var(--primary-color);
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;

View File

@@ -75,7 +75,7 @@ export class HaStateControlCoverPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

View File

@@ -112,7 +112,7 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

View File

@@ -142,7 +142,7 @@ export class HaStateControlCoverToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-border-radius: 48px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 36px;
--control-button-border-radius: 48px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

View File

@@ -142,7 +142,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;
@@ -153,7 +153,7 @@ export class HaStateControlFanSpeed extends LitElement {
max-height: 320px;
min-height: 200px;
--control-select-thickness: 130px;
--control-select-border-radius: 36px;
--control-select-border-radius: 48px;
--control-select-color: var(--primary-color);
--control-select-background: var(--disabled-color);
--control-select-background-opacity: 0.2;

View File

@@ -133,7 +133,7 @@ export class HaStateControlToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-border-radius: 48px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 36px;
--control-button-border-radius: 48px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

View File

@@ -89,7 +89,7 @@ export class HaStateControlLightBrightness extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

View File

@@ -167,7 +167,7 @@ export class HaStateControlLockToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-border-radius: 48px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -187,7 +187,7 @@ export class HaStateControlLockToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 36px;
--control-button-border-radius: 48px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

View File

@@ -71,7 +71,7 @@ export class HaStateControlValvePosition extends LitElement {
max-height: 320px;
min-height: 200px;
--control-slider-thickness: 130px;
--control-slider-border-radius: 36px;
--control-slider-border-radius: 48px;
--control-slider-color: var(--primary-color);
--control-slider-background: var(--disabled-color);
--control-slider-background-opacity: 0.2;

View File

@@ -142,7 +142,7 @@ export class HaStateControlValveToggle extends LitElement {
max-height: 320px;
min-height: 200px;
--control-switch-thickness: 130px;
--control-switch-border-radius: 36px;
--control-switch-border-radius: 48px;
--control-switch-padding: 6px;
--mdc-icon-size: 24px;
}
@@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
ha-control-button {
flex: 1;
width: 100%;
--control-button-border-radius: 36px;
--control-button-border-radius: 48px;
--mdc-icon-size: 24px;
}
ha-control-button.active {

View File

@@ -501,18 +501,11 @@
},
"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}",
"close_select_mode": "Close selection mode",
"select_all": "Select all",
"select_none": "Select none"
"selected": "Selected {selected}"
},
"config-entry-picker": {
"config_entry": "Integration"
@@ -571,7 +564,6 @@
"add_new_sugestion": "Add new category ''{name}''",
"add_new": "Add new category…",
"no_categories": "You don't have any categories",
"no_match": "No matching categories found",
"add_dialog": {
"title": "Add new category",
"text": "Enter the name of the new category.",
@@ -600,7 +592,13 @@
"no_areas": "You don't have any areas",
"no_match": "No matching areas found",
"unassigned_areas": "Unassigned areas",
"failed_create_area": "Failed to create area."
"add_dialog": {
"title": "Add new area",
"text": "Enter the name of the new area.",
"name": "Name",
"add": "Add",
"failed_create_area": "Failed to create area."
}
},
"floor-picker": {
"clear": "Clear",
@@ -610,7 +608,13 @@
"add_new": "Add new floor…",
"no_floors": "You don't have any floors",
"no_match": "No matching floors found",
"failed_create_floor": "Failed to create floor."
"add_dialog": {
"title": "Add new floor",
"text": "Enter the name of the new floor.",
"name": "Name",
"add": "Add",
"failed_create_floor": "Failed to create floor."
}
},
"area-filter": {
"title": "Areas",
@@ -1114,7 +1118,6 @@
"edit": "Edit entity",
"details": "Details",
"back_to_info": "Back to info",
"info": "Information",
"related": "Related",
"history": "History",
"logbook": "Logbook",
@@ -1927,10 +1930,7 @@
"aliases_section": "Aliases",
"no_aliases": "No configured aliases",
"configured_aliases": "{count} configured {count, plural,\n one {alias}\n other {aliases}\n}",
"aliases_description": "Aliases are alternative names used in voice assistants to refer to this floor.",
"areas_section": "Areas",
"areas_description": "Specify the areas that are on this floor.",
"add_area": "Add area"
"aliases_description": "Aliases are alternative names used in voice assistants to refer to this floor."
}
},
"category": {
@@ -1959,13 +1959,8 @@
"labels": {
"caption": "Labels",
"description": "Group devices and entities",
"headers": {
"name": "Name",
"icon": "Icon",
"color": "Color"
},
"headers": { "name": "Name", "icon": "Icon", "color": "Color" },
"add_label": "Add label",
"manage_labels": "Manage labels",
"no_labels": "You don't have any labels",
"introduction": "Labels can help you organize your areas, devices and entities. They can be used to filter in the UI, or use them as a target in automations.",
"introduction2": "Go to the area, device or entity you want to add a label to, and click on the edit button to assign labels to them.",
@@ -2266,8 +2261,7 @@
"name": "Name",
"entity_id": "Entity ID",
"type": "Type",
"editable": "Editable",
"category": "Category"
"editable": "Editable"
},
"create_helper": "Create helper",
"no_helpers": "Looks like you don't have any helpers yet!"
@@ -2671,7 +2665,6 @@
"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.",
@@ -2690,16 +2683,7 @@
"trigger": "Trigger",
"actions": "Actions",
"state": "State",
"category": "Category",
"area": "Area"
},
"bulk_action": "Action",
"bulk_actions": {
"move_category": "Move to category",
"no_category": "No category",
"add_label": "Add label",
"enable": "Enable",
"disable": "Disable"
"category": "Category"
},
"empty_header": "Start automating",
"empty_text_1": "Automations make Home Assistant automatically respond to things happening in and around your home.",
@@ -3565,8 +3549,7 @@
"headers": {
"name": "Name",
"state": "State",
"category": "Category",
"area": "Area"
"category": "Category"
},
"edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
"assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -3675,8 +3658,7 @@
"state": "State",
"name": "Name",
"last_activated": "Last activated",
"category": "Category",
"area": "Area"
"category": "Category"
},
"edit_category": "[%key:ui::panel::config::automation::picker::edit_category%]",
"assign_category": "[%key:ui::panel::config::automation::picker::assign_category%]",
@@ -4060,9 +4042,6 @@
"button": "Hide selected",
"confirm_title": "Do you want to hide {number} {number, plural,\n one {entity}\n other {entities}\n}?",
"confirm_text": "Hidden entities will not be shown on your dashboard. Their history is still tracked and you can still interact with them with services."
},
"unhide_selected": {
"button": "Unhide selected"
}
}
},
@@ -5409,6 +5388,7 @@
"type": "View type",
"type_warning_sections": "You can not change your view to use the 'sections' view type because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.",
"type_warning_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.",
"types": {
"masonry": "Masonry (default)",
"sidebar": "Sidebar",

114
yarn.lock
View File

@@ -1526,14 +1526,14 @@ __metadata:
languageName: node
linkType: hard
"@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"
"@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"
dependencies:
"@codemirror/state": "npm:^6.4.0"
style-mod: "npm:^4.1.0"
w3c-keyname: "npm:^2.2.4"
checksum: 10/6d2b19b2439c36b2712d3560eeb0c198ad2ee442ad22641c2b4bce94077812cffbb52ca12328219d3b9663b2dd0ffc63481432a2550839e5c7a7a53704e82a9a
checksum: 10/d4ef249044cbc293a7267c83e08671a68646fd7bbe1efb8d205c01385f157c93918eabeaedb62a4cc10598ab63818ac749cec4f6355fe0404d9d4beb7857c31f
languageName: node
linkType: hard
@@ -4543,15 +4543,15 @@ __metadata:
languageName: node
linkType: hard
"@typescript-eslint/eslint-plugin@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/eslint-plugin@npm:7.4.0"
"@typescript-eslint/eslint-plugin@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/eslint-plugin@npm:7.3.1"
dependencies:
"@eslint-community/regexpp": "npm:^4.5.1"
"@typescript-eslint/scope-manager": "npm:7.4.0"
"@typescript-eslint/type-utils": "npm:7.4.0"
"@typescript-eslint/utils": "npm:7.4.0"
"@typescript-eslint/visitor-keys": "npm:7.4.0"
"@typescript-eslint/scope-manager": "npm:7.3.1"
"@typescript-eslint/type-utils": "npm:7.3.1"
"@typescript-eslint/utils": "npm:7.3.1"
"@typescript-eslint/visitor-keys": "npm:7.3.1"
debug: "npm:^4.3.4"
graphemer: "npm:^1.4.0"
ignore: "npm:^5.2.4"
@@ -4564,44 +4564,44 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: 10/9bd8852c7e4e9608c3fded94f7c60506cc7d2b6d8a8c1cad6d48969a7363751b20282874e55ccdf180635cf204cb10b3e1e5c3d1cff34d4fcd07762be3fc138e
checksum: 10/8ed276113a714d93ab3ababb1179e4785bd9378e6d97726519ea1d2ac502a94475e0be988c2ec427dcfc1e6950329d58da6e64131ee87028fce63493461cc51a
languageName: node
linkType: hard
"@typescript-eslint/parser@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/parser@npm:7.4.0"
"@typescript-eslint/parser@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/parser@npm:7.3.1"
dependencies:
"@typescript-eslint/scope-manager": "npm:7.4.0"
"@typescript-eslint/types": "npm:7.4.0"
"@typescript-eslint/typescript-estree": "npm:7.4.0"
"@typescript-eslint/visitor-keys": "npm:7.4.0"
"@typescript-eslint/scope-manager": "npm:7.3.1"
"@typescript-eslint/types": "npm:7.3.1"
"@typescript-eslint/typescript-estree": "npm:7.3.1"
"@typescript-eslint/visitor-keys": "npm:7.3.1"
debug: "npm:^4.3.4"
peerDependencies:
eslint: ^8.56.0
peerDependenciesMeta:
typescript:
optional: true
checksum: 10/142a9e1187d305ed43b4fef659c36fa4e28359467198c986f0955c70b4067c9799f4c85d9881fbf099c55dfb265e30666e28b3ef290520e242b45ca7cb8e4ca9
checksum: 10/018326010fec1dcefd75809ccac5102a475bf1e052d824b898d707e7c0bf3e51e101164b410d1b2a513628985c96eb412538644d2005e26b99a22db6eb9402df
languageName: node
linkType: hard
"@typescript-eslint/scope-manager@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/scope-manager@npm:7.4.0"
"@typescript-eslint/scope-manager@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/scope-manager@npm:7.3.1"
dependencies:
"@typescript-eslint/types": "npm:7.4.0"
"@typescript-eslint/visitor-keys": "npm:7.4.0"
checksum: 10/8cf9292444f9731017a707cac34bef5ae0eb33b5cd42ed07fcd046e981d97889d9201d48e02f470f2315123f53771435e10b1dc81642af28a11df5352a8e8be2
"@typescript-eslint/types": "npm:7.3.1"
"@typescript-eslint/visitor-keys": "npm:7.3.1"
checksum: 10/7384d1f46d7f3678a1135a1ac0bd8b6dfa2f01e93b19e2510c7082766cf6983a1bf80b4ccf498651199a81d9f2bdb65101fd7a19226a723260514204d0c30b34
languageName: node
linkType: hard
"@typescript-eslint/type-utils@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/type-utils@npm:7.4.0"
"@typescript-eslint/type-utils@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/type-utils@npm:7.3.1"
dependencies:
"@typescript-eslint/typescript-estree": "npm:7.4.0"
"@typescript-eslint/utils": "npm:7.4.0"
"@typescript-eslint/typescript-estree": "npm:7.3.1"
"@typescript-eslint/utils": "npm:7.3.1"
debug: "npm:^4.3.4"
ts-api-utils: "npm:^1.0.1"
peerDependencies:
@@ -4609,23 +4609,23 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: 10/a8bd0929d8237679b2b8a7817f070a4b9658ee976882fba8ff37e4a70dd33f87793e1b157771104111fe8054eaa8ad437a010b6aa465072fbdb932647125db2d
checksum: 10/fae9003a76a8f2a2a4bb88dc0f82c0a1ca0688633183fac391920e7124a12807aac84bb287a21f61e99523c15223d1c08e7680685ebf21d07429604cba6c420b
languageName: node
linkType: hard
"@typescript-eslint/types@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/types@npm:7.4.0"
checksum: 10/2782c5bf65cd3dfa9cd32bc3023676bbca22144987c3f6c6b67fd96c73d4a60b85a57458c49fd11b9971ac6531824bb3ae0664491e7a6de25d80c523c9be92b7
"@typescript-eslint/types@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/types@npm:7.3.1"
checksum: 10/c9c8eae1cf937cececd99a253bd65eb71b40206e79cf917ad9c3b3ab80cc7ce5fefb2804f9fd2a70e7438951f0d1e63df3031fc61e3a08dfef5fde208a12e0ed
languageName: node
linkType: hard
"@typescript-eslint/typescript-estree@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/typescript-estree@npm:7.4.0"
"@typescript-eslint/typescript-estree@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/typescript-estree@npm:7.3.1"
dependencies:
"@typescript-eslint/types": "npm:7.4.0"
"@typescript-eslint/visitor-keys": "npm:7.4.0"
"@typescript-eslint/types": "npm:7.3.1"
"@typescript-eslint/visitor-keys": "npm:7.3.1"
debug: "npm:^4.3.4"
globby: "npm:^11.1.0"
is-glob: "npm:^4.0.3"
@@ -4635,34 +4635,34 @@ __metadata:
peerDependenciesMeta:
typescript:
optional: true
checksum: 10/162ec9d7582f45588342e1be36fdb60e41f50bbdfbc3035c91b517ff5d45244f776921c88d88e543e1c7d0f1e6ada5474a8316b78f1b0e6d2233b101bc45b166
checksum: 10/363ad9864b56394b4000dff7c2b77d0ea52042c3c20e3b86c0f3c66044915632d9890255527c6f3a5ef056886dec72e38fbcfce49d4ad092c160440f54128230
languageName: node
linkType: hard
"@typescript-eslint/utils@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/utils@npm:7.4.0"
"@typescript-eslint/utils@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/utils@npm:7.3.1"
dependencies:
"@eslint-community/eslint-utils": "npm:^4.4.0"
"@types/json-schema": "npm:^7.0.12"
"@types/semver": "npm:^7.5.0"
"@typescript-eslint/scope-manager": "npm:7.4.0"
"@typescript-eslint/types": "npm:7.4.0"
"@typescript-eslint/typescript-estree": "npm:7.4.0"
"@typescript-eslint/scope-manager": "npm:7.3.1"
"@typescript-eslint/types": "npm:7.3.1"
"@typescript-eslint/typescript-estree": "npm:7.3.1"
semver: "npm:^7.5.4"
peerDependencies:
eslint: ^8.56.0
checksum: 10/ffed27e770c486cd000ff892d9049b0afe8b9d6318452a5355b78a37436cbb414bceacae413a2ac813f3e584684825d5e0baa2e6376b7ad6013a108ac91bc19d
checksum: 10/234d9d65fe5d0f4a31345bd8f5a6f2879a578b3a531a14c2b3edaa7fb587c71d26249f86c41857382c0405384dc104955c02b588b3cee6fc2734f1ae40aef07b
languageName: node
linkType: hard
"@typescript-eslint/visitor-keys@npm:7.4.0":
version: 7.4.0
resolution: "@typescript-eslint/visitor-keys@npm:7.4.0"
"@typescript-eslint/visitor-keys@npm:7.3.1":
version: 7.3.1
resolution: "@typescript-eslint/visitor-keys@npm:7.3.1"
dependencies:
"@typescript-eslint/types": "npm:7.4.0"
"@typescript-eslint/types": "npm:7.3.1"
eslint-visitor-keys: "npm:^3.4.1"
checksum: 10/70dc99f2ad116c6e2d9e55af249e4453e06bba2ceea515adef2d2e86e97e557865bb1b1d467667462443eb0d624baba36f7442fd1082f3874339bbc381c26e93
checksum: 10/163a93597c1d696920a19b3c1627d02368bdd52059f811c0fadd680c38034bb6418ebefe99d8ce26e0dd44ae184f18fab186af775de1a8771256be1a7905c174
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.1"
"@codemirror/view": "npm:6.26.0"
"@egjs/hammerjs": "npm:2.0.17"
"@formatjs/intl-datetimeformat": "npm:6.12.3"
"@formatjs/intl-displaynames": "npm:6.6.6"
@@ -9688,8 +9688,8 @@ __metadata:
"@types/tar": "npm:6.1.11"
"@types/ua-parser-js": "npm:0.7.39"
"@types/webspeechapi": "npm:0.0.29"
"@typescript-eslint/eslint-plugin": "npm:7.4.0"
"@typescript-eslint/parser": "npm:7.4.0"
"@typescript-eslint/eslint-plugin": "npm:7.3.1"
"@typescript-eslint/parser": "npm:7.3.1"
"@vaadin/combo-box": "npm:24.3.10"
"@vaadin/vaadin-themable-mixin": "npm:24.3.10"
"@vibrant/color": "npm:3.2.1-alpha.1"