Skip to content

Commit

Permalink
Fix data table column widths (#149)
Browse files Browse the repository at this point in the history
  • Loading branch information
@farmio
farmio authored Aug 6, 2024
1 parent 3639075 commit 82a364e
Show file tree
Hide file tree
Showing 2 changed files with 119 additions and 116 deletions.
64 changes: 23 additions & 41 deletions src/views/entities_view.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import { mdiDelete, mdiInformationSlabCircleOutline, mdiPlus, mdiPencilOutline } from "@mdi/js";
import { LitElement, TemplateResult, html, css } from "lit";
import { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined";

import { HassEntity } from "home-assistant-js-websocket";
import memoize from "memoize-one";

import "@ha/layouts/hass-loading-screen";
import "@ha/layouts/hass-tabs-subpage";
import "@ha/components/ha-card";
import "@ha/layouts/hass-tabs-subpage-data-table";
import "@ha/components/ha-fab";
import "@ha/components/ha-icon-button";
import "@ha/components/ha-icon-overflow-menu";
import "@ha/components/ha-state-icon";
import "@ha/components/ha-svg-icon";
import "@ha/components/data-table/ha-data-table";
import { navigate } from "@ha/common/navigate";
import { mainWindow } from "@ha/common/dom/get_main_window";
import { fireEvent } from "@ha/common/dom/fire_event";
Expand All @@ -25,8 +21,6 @@ import { showAlertDialog, showConfirmationDialog } from "@ha/dialogs/generic/sho
import type { PageNavigation } from "@ha/layouts/hass-tabs-subpage";
import { HomeAssistant, Route } from "@ha/types";

import "../components/knx-project-tree-view";

import { getEntityEntries, deleteEntity } from "../services/websocket.service";
import { KNX } from "../types/knx";
import { KNXLogger } from "../tools/knx-logger";
Expand Down Expand Up @@ -85,43 +79,44 @@ export class KNXEntitiesView extends LitElement {
});
}

private _columns = memoize((_narrow, _language): DataTableColumnContainer<EntityRow> => {
private _columns = memoize((_language): DataTableColumnContainer<EntityRow> => {
const iconWidth = "56px";
const actionWidth = "176px"; // 48px*3 + 16px*2 padding
const textColumnWith = `calc((100% - ${iconWidth} - ${actionWidth}) / 4)`;

return {
icon: {
title: "",
width: iconWidth,
minWidth: iconWidth,
maxWidth: iconWidth,
type: "icon",
template: (entry) => html`
<ha-state-icon
title=${ifDefined(entry.entityState?.state)}
slot="item-icon"
.state=${entry.entityState}
.hass=${this.hass}
.stateObj=${entry.entityState}
></ha-state-icon>
`,
},
friendly_name: {
showNarrow: true,
filterable: true,
sortable: true,
title: "Friendly Name",
width: textColumnWith,
flex: 2,
template: (entry) => entry.entityState?.attributes.friendly_name ?? "",
},
entity_id: {
filterable: true,
sortable: true,
title: "Entity ID",
width: textColumnWith,
flex: 1,
// template: (entry) => entry.entity_id,
},
device: {
filterable: true,
sortable: true,
title: "Device",
width: textColumnWith,
flex: 1,
template: (entry) =>
entry.device_id ? (this.hass.devices[entry.device_id].name ?? "") : "",
},
Expand All @@ -135,12 +130,14 @@ export class KNXEntitiesView extends LitElement {
title: "Area",
sortable: true,
filterable: true,
width: textColumnWith,
flex: 1,
template: (entry) => entry.area?.name ?? "",
},
actions: {
showNarrow: true,
title: "",
width: actionWidth,
minWidth: actionWidth,
maxWidth: actionWidth,
type: "icon-button",
template: (entry) => html`
<ha-icon-button
Expand Down Expand Up @@ -208,25 +205,19 @@ export class KNXEntitiesView extends LitElement {
}

return html`
<hass-tabs-subpage
<hass-tabs-subpage-data-table
.hass=${this.hass}
.narrow=${this.narrow!}
.narrow=${this.narrow}
.route=${this.route!}
.tabs=${this.tabs}
.localizeFunc=${this.knx.localize}
.columns=${this._columns(this.hass.language)}
.data=${this.knx_entities}
.hasFab=${true}
.searchLabel=${this.hass.localize("ui.components.data-table.search")}
.clickable=${false}
.filter=${this.filterDevice}
>
<div class="sections">
<ha-data-table
class="entity-table"
.hass=${this.hass}
.columns=${this._columns(this.narrow, this.hass.language)}
.data=${this.knx_entities}
.hasFab=${true}
.searchLabel=${this.hass.localize("ui.components.data-table.search")}
.clickable=${false}
.filter=${this.filterDevice}
></ha-data-table>
</div>
<ha-fab
slot="fab"
.label=${this.hass.localize("ui.common.add")}
Expand All @@ -235,7 +226,7 @@ export class KNXEntitiesView extends LitElement {
>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
</ha-fab>
</hass-tabs-subpage>
</hass-tabs-subpage-data-table>
`;
}

Expand All @@ -249,15 +240,6 @@ export class KNXEntitiesView extends LitElement {
--app-header-background-color: var(--sidebar-background-color);
--app-header-text-color: var(--sidebar-text-color);
}
.sections {
display: flex;
flex-direction: row;
height: 100%;
}
.entity-table {
flex: 1;
}
`;
}
}
Expand Down
171 changes: 96 additions & 75 deletions src/views/group_monitor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { html, CSSResultGroup, LitElement, TemplateResult, nothing } from "lit";
import { customElement, property, state } from "lit/decorators";

import memoize from "memoize-one";

import "@ha/layouts/hass-loading-screen";
import "@ha/layouts/hass-tabs-subpage-data-table";
import { HASSDomEvent } from "@ha/common/dom/fire_event";
import { computeRTLDirection } from "@ha/common/util/compute_rtl";
Expand Down Expand Up @@ -34,8 +37,6 @@ export class KNXGroupMonitor extends LitElement {

@property({ type: Array, reflect: false }) public tabs!: PageNavigation[];

@state() private columns: DataTableColumnContainer = {};

@state() private projectLoaded = false;

@state() private subscribed?: () => void;
Expand Down Expand Up @@ -70,78 +71,94 @@ export class KNXGroupMonitor extends LitElement {
this.telegram_callback(message);
this.requestUpdate();
});

//! We need to lateinit this property due to the fact that this.hass needs to be available
this.columns = {
index: {
hidden: this.narrow,
title: "#",
sortable: true,
direction: "desc",
type: "numeric",
width: "60px", // 4 digits
},
timestamp: {
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_time"),
width: "110px",
},
direction: {
hidden: this.narrow,
filterable: true,
title: this.knx.localize("group_monitor_direction"),
width: "120px",
},
sourceAddress: {
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_source"),
width: this.narrow ? "90px" : this.projectLoaded ? "95px" : "20%",
},
sourceText: {
hidden: this.narrow || !this.projectLoaded,
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_source"),
width: "20%",
},
destinationAddress: {
sortable: true,
filterable: true,
title: this.knx.localize("group_monitor_destination"),
width: this.narrow ? "90px" : this.projectLoaded ? "96px" : "20%",
},
destinationText: {
hidden: this.narrow || !this.projectLoaded,
sortable: true,
filterable: true,
title: this.knx.localize("group_monitor_destination"),
width: "20%",
},
type: {
hidden: this.narrow,
title: this.knx.localize("group_monitor_type"),
filterable: true,
width: "155px", // 155px suits for "GroupValueResponse"
},
payload: {
hidden: this.narrow && this.projectLoaded,
title: this.knx.localize("group_monitor_payload"),
filterable: true,
type: "numeric",
width: "105px",
},
value: {
hidden: !this.projectLoaded,
title: this.knx.localize("group_monitor_value"),
filterable: true,
width: this.narrow ? "105px" : "150px",
},
};
}
}

private _columns = memoize(
(narrow, projectLoaded, _language): DataTableColumnContainer<DataTableRowData> => ({
index: {
showNarrow: false,
title: "#",
sortable: true,
direction: "desc",
type: "numeric",
minWidth: "60px", // 4 digits
maxWidth: "60px",
},
timestamp: {
showNarrow: false,
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_time"),
minWidth: "110px",
maxWidth: "110px",
},
sourceAddress: {
showNarrow: true,
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_source"),
flex: 2,
template: (row) =>
projectLoaded
? html`<div>${row.sourceAddress}</div>
<div>${row.sourceText}</div>`
: row.sourceAddress,
},
sourceText: {
hidden: true,
filterable: true,
sortable: true,
title: this.knx.localize("group_monitor_source"),
},
destinationAddress: {
showNarrow: true,
sortable: true,
filterable: true,
title: this.knx.localize("group_monitor_destination"),
flex: 2,
template: (row) =>
projectLoaded
? html`<div>${row.destinationAddress}</div>
<div>${row.destinationText}</div>`
: row.destinationAddress,
},
destinationText: {
showNarrow: true,
hidden: true,
sortable: true,
filterable: true,
title: this.knx.localize("group_monitor_destination"),
},
type: {
showNarrow: false,
title: this.knx.localize("group_monitor_type"),
filterable: true,
minWidth: "155px", // 155px suits for "GroupValueResponse"
maxWidth: "155px",
template: (row) =>
html`<div>${row.type}</div>
<div>${row.direction}</div>`,
},
payload: {
showNarrow: false,
hidden: narrow && projectLoaded,
title: this.knx.localize("group_monitor_payload"),
filterable: true,
type: "numeric",
minWidth: "105px",
maxWidth: "105px",
},
value: {
showNarrow: true,
hidden: !projectLoaded,
title: this.knx.localize("group_monitor_value"),
filterable: true,
flex: 1,
},
}),
);

protected telegram_callback(telegram: TelegramDict): void {
this.telegrams.push(telegram);
const rows = [...this.rows];
Expand Down Expand Up @@ -169,17 +186,21 @@ export class KNXGroupMonitor extends LitElement {
}

protected render(): TemplateResult | void {
if (this.subscribed === undefined) {
return html` <hass-loading-screen
.message=${this.knx.localize("group_monitor_waiting_to_connect")}
>
</hass-loading-screen>`;
}
return html`
<hass-tabs-subpage-data-table
.hass=${this.hass}
.narrow=${this.narrow!}
.route=${this.route!}
.tabs=${this.tabs}
.localizeFunc=${this.knx.localize}
.columns=${this.columns}
.noDataText=${this.subscribed
? this.knx.localize("group_monitor_connected_waiting_telegrams")
: this.knx.localize("group_monitor_waiting_to_connect")}
.columns=${this._columns(this.narrow, this.projectLoaded, this.hass.language)}
.noDataText=${this.knx.localize("group_monitor_connected_waiting_telegrams")}
.data=${this.rows}
.hasFab=${false}
.searchLabel=${this.hass.localize("ui.components.data-table.search")}
Expand Down

0 comments on commit 82a364e

Please sign in to comment.