mirror of
https://github.com/home-assistant/frontend.git
synced 2025-09-05 19:26:33 +00:00
Compare commits
4 Commits
fix-backgr
...
fix_create
Author | SHA1 | Date | |
---|---|---|---|
![]() |
35d53f18ae | ||
![]() |
960e0dd9e0 | ||
![]() |
31c6247a86 | ||
![]() |
8ec8dc160f |
@@ -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);
|
||||
|
@@ -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);
|
||||
|
@@ -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);
|
@@ -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);
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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);
|
||||
|
@@ -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",
|
||||
|
@@ -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"
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
|
@@ -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);
|
||||
}
|
||||
`;
|
||||
|
@@ -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;
|
||||
|
@@ -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
|
||||
|
@@ -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}
|
||||
|
@@ -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) {
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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>
|
||||
|
@@ -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));
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
.
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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));
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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));
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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) {
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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>
|
||||
`;
|
||||
}
|
||||
|
@@ -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 : "",
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
`;
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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>
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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}
|
||||
|
@@ -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"),
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
@@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@@ -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;
|
||||
|
@@ -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[];
|
||||
}
|
||||
|
@@ -28,7 +28,6 @@ export type ItemType =
|
||||
| "entity"
|
||||
| "floor"
|
||||
| "group"
|
||||
| "label"
|
||||
| "scene"
|
||||
| "script"
|
||||
| "automation_blueprint"
|
||||
|
@@ -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"] & {
|
||||
/**
|
||||
|
@@ -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,
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
@@ -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 {
|
||||
|
@@ -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"
|
||||
|
@@ -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));
|
||||
|
@@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@@ -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));
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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);
|
||||
|
@@ -6,7 +6,6 @@ import {
|
||||
|
||||
export interface AreaRegistryDetailDialogParams {
|
||||
entry?: AreaRegistryEntry;
|
||||
suggestedName?: string;
|
||||
createEntry?: (values: AreaRegistryEntryMutableParams) => Promise<unknown>;
|
||||
updateEntry?: (
|
||||
updates: Partial<AreaRegistryEntryMutableParams>
|
||||
|
@@ -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>;
|
||||
}
|
||||
|
||||
|
@@ -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,
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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 : "",
|
||||
|
@@ -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,
|
||||
];
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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 {
|
||||
|
@@ -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() {
|
||||
|
@@ -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 {
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
|
@@ -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(",");
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@@ -35,7 +35,6 @@ import { ButtonsHeaderFooterConfig } from "../header-footer/types";
|
||||
const HIDE_DOMAIN = new Set([
|
||||
"automation",
|
||||
"configurator",
|
||||
"conversation",
|
||||
"device_tracker",
|
||||
"geo_location",
|
||||
"persistent_notification",
|
||||
|
@@ -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);
|
||||
|
@@ -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();
|
||||
}
|
||||
|
@@ -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);
|
||||
}
|
||||
|
||||
* {
|
||||
|
@@ -116,9 +116,6 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
|
||||
entities: {
|
||||
redirect: "/config/entities",
|
||||
},
|
||||
labels: {
|
||||
redirect: "/config/labels",
|
||||
},
|
||||
energy: {
|
||||
component: "energy",
|
||||
redirect: "/energy",
|
||||
|
@@ -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);
|
||||
|
||||
|
@@ -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)",
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
@@ -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;
|
||||
|
@@ -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 {
|
||||
|
@@ -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
114
yarn.lock
@@ -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"
|
||||
|
Reference in New Issue
Block a user