${!this.narrow
? html`
-
+ ${area.name}
+
`
: ""}
${area.name}
+
+ ${area.name}
+
+ ${area.picture
+ ? html`
+ `}
${devices.length
@@ -181,7 +219,8 @@ class HaConfigAreaPage extends LitElement {
.header=${this.hass.localize(
"ui.panel.config.areas.editor.linked_entities_caption"
)}
- >${entities.length
+ >
+ ${entities.length
? entities.map(
(entity) =>
html`
@@ -390,6 +429,7 @@ class HaConfigAreaPage extends LitElement {
try {
await deleteAreaRegistryEntry(this.hass!, entry!.area_id);
+ afterNextRender(() => history.back());
return true;
} catch (err: any) {
return false;
@@ -403,7 +443,7 @@ class HaConfigAreaPage extends LitElement {
haStyle,
css`
h1 {
- margin-top: 0;
+ margin: 0;
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(
--paper-font-headline_-_-webkit-font-smoothing
@@ -413,6 +453,13 @@ class HaConfigAreaPage extends LitElement {
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
opacity: var(--dark-primary-opacity);
+ display: flex;
+ align-items: center;
+ }
+
+ img {
+ border-radius: var(--ha-card-border-radius, 4px);
+ width: 100%;
}
.container {
@@ -458,6 +505,34 @@ class HaConfigAreaPage extends LitElement {
paper-item.no-link {
cursor: default;
}
+
+ ha-card > a:first-child {
+ display: block;
+ }
+ ha-card > *:first-child {
+ margin-top: -16px;
+ }
+ .img-container {
+ position: relative;
+ }
+ .img-edit-btn {
+ position: absolute;
+ top: 4px;
+ right: 4px;
+ display: none;
+ }
+ .img-container:hover .img-edit-btn {
+ display: block;
+ }
+ .img-edit-btn::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background-color: var(--card-background-color);
+ opacity: 0.5;
+ border-radius: 50%;
+ }
`,
];
}
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index a2d27e63b7..d694234ea6 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -1,15 +1,8 @@
import { mdiHelpCircle, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one";
-import { HASSDomEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
-import {
- DataTableColumnContainer,
- RowClickedEvent,
-} from "../../../components/data-table/ha-data-table";
import "../../../components/ha-fab";
import "../../../components/ha-icon-button";
import "../../../components/ha-svg-icon";
@@ -21,7 +14,7 @@ import type { DeviceRegistryEntry } from "../../../data/device_registry";
import type { EntityRegistryEntry } from "../../../data/entity_registry";
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
import "../../../layouts/hass-loading-screen";
-import "../../../layouts/hass-tabs-subpage-data-table";
+import "../../../layouts/hass-tabs-subpage";
import { HomeAssistant, Route } from "../../../types";
import "../ha-config-section";
import { configSections } from "../ha-panel-config";
@@ -53,97 +46,51 @@ export class HaConfigAreasDashboard extends LitElement {
entities: EntityRegistryEntry[]
) =>
areas.map((area) => {
+ let noDevicesInArea = 0;
+ let noServicesInArea = 0;
+ let noEntitiesInArea = 0;
+
const devicesInArea = new Set();
for (const device of devices) {
if (device.area_id === area.area_id) {
devicesInArea.add(device.id);
+ if (device.entry_type === "service") {
+ noServicesInArea++;
+ } else {
+ noDevicesInArea++;
+ }
}
}
- let entitiesInArea = 0;
-
for (const entity of entities) {
if (
entity.area_id
? entity.area_id === area.area_id
: devicesInArea.has(entity.device_id)
) {
- entitiesInArea++;
+ noEntitiesInArea++;
}
}
return {
...area,
- devices: devicesInArea.size,
- entities: entitiesInArea,
+ devices: noDevicesInArea,
+ services: noServicesInArea,
+ entities: noEntitiesInArea,
};
})
);
- private _columns = memoizeOne(
- (narrow: boolean): DataTableColumnContainer =>
- narrow
- ? {
- name: {
- title: this.hass.localize(
- "ui.panel.config.areas.data_table.area"
- ),
- sortable: true,
- filterable: true,
- grows: true,
- direction: "asc",
- },
- }
- : {
- name: {
- title: this.hass.localize(
- "ui.panel.config.areas.data_table.area"
- ),
- sortable: true,
- filterable: true,
- grows: true,
- direction: "asc",
- },
- devices: {
- title: this.hass.localize(
- "ui.panel.config.areas.data_table.devices"
- ),
- sortable: true,
- type: "numeric",
- width: "20%",
- direction: "asc",
- },
- entities: {
- title: this.hass.localize(
- "ui.panel.config.areas.data_table.entities"
- ),
- sortable: true,
- type: "numeric",
- width: "20%",
- direction: "asc",
- },
- }
- );
-
protected render(): TemplateResult {
return html`
-
-
+
`;
}
@@ -191,11 +190,6 @@ export class HaConfigAreasDashboard extends LitElement {
});
}
- private _handleRowClicked(ev: HASSDomEvent) {
- const areaId = ev.detail.id;
- navigate(`/config/areas/area/${areaId}`);
- }
-
private _openDialog(entry?: AreaRegistryEntry) {
showAreaRegistryDetailDialog(this, {
entry,
@@ -210,6 +204,51 @@ export class HaConfigAreasDashboard extends LitElement {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
+ .container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ grid-gap: 16px 16px;
+ padding: 8px 16px 16px;
+ margin: 0 auto 64px auto;
+ max-width: 1000px;
+ }
+ .container > * {
+ max-width: 500px;
+ }
+ ha-card {
+ overflow: hidden;
+ }
+ a {
+ text-decoration: none;
+ }
+ h1 {
+ padding-bottom: 0;
+ }
+ .picture {
+ height: 150px;
+ width: 100%;
+ background-size: cover;
+ background-position: center;
+ position: relative;
+ }
+ .picture.placeholder::before {
+ position: absolute;
+ content: "";
+ width: 100%;
+ height: 100%;
+ background-color: var(--sidebar-selected-icon-color);
+ opacity: 0.12;
+ }
+ .card-content {
+ min-height: 16px;
+ color: var(--secondary-text-color);
+ }
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ha-config-areas-dashboard": HaConfigAreasDashboard;
+ }
+}
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index 055b770147..6f9569e6cf 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -376,9 +376,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
result.push({
...entry,
entity,
- name:
- computeEntityRegistryName(this.hass!, entry) ||
- this.hass.localize("state.default.unavailable"),
+ name: computeEntityRegistryName(this.hass!, entry),
unavailable,
restored,
area: area ? area.name : undefined,
diff --git a/src/translations/en.json b/src/translations/en.json
index c5df32dc8a..9a565b0875 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -930,6 +930,7 @@
"caption": "Areas",
"description": "Group devices and entities into areas",
"edit_settings": "Area settings",
+ "add_picture": "Add a picture",
"data_table": {
"area": "Area",
"devices": "Devices",
+ 
`
+ : html`
+ ${this._areas(this.areas, this.devices, this.entities).map(
+ (area) =>
+ html`
+
+ `
+ )}
+
${area.name}
+
+
+
+ ${area.devices
+ ? html`
+ ${this.hass.localize(
+ "ui.panel.config.integrations.config_entry.devices",
+ "count",
+ area.devices
+ )}${area.services ? "," : ""}
+ `
+ : ""}
+ ${area.services
+ ? html`
+ ${this.hass.localize(
+ "ui.panel.config.integrations.config_entry.services",
+ "count",
+ area.services
+ )}
+ `
+ : ""}
+ ${(area.devices || area.services) && area.entities
+ ? this.hass.localize("ui.common.and")
+ : ""}
+ ${area.entities
+ ? html`
+ ${this.hass.localize(
+ "ui.panel.config.integrations.config_entry.entities",
+ "count",
+ area.entities
+ )}
+ `
+ : ""}
+
+