From cf0bb149eb2a8f4eb0bb402f6ab2ef4075a3b7f2 Mon Sep 17 00:00:00 2001 From: Darter Date: Sun, 2 Jun 2024 02:40:17 +0200 Subject: [PATCH 1/7] init --- packages/v3/src/esp-entity-table.ts | 59 +++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 7 deletions(-) diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts index 3b31e5b..3063e88 100644 --- a/packages/v3/src/esp-entity-table.ts +++ b/packages/v3/src/esp-entity-table.ts @@ -11,6 +11,7 @@ import "iconify-icon"; interface entityConfig { unique_id: string; sorting_weight: number; + sorting_group?: string; domain: string; id: string; state: string; @@ -50,6 +51,11 @@ interface entityConfig { is_disabled_by_default?: boolean; } +interface groupConfig { + name: string; + sorting_weight: number; +} + export const stateOn = "ON"; export const stateOff = "OFF"; @@ -70,6 +76,7 @@ export class EntityTable extends LitElement implements RestAction { private _actionRenderer = new ActionRenderer(); private _basePath = getBasePath(); + private groups: groupConfig[] = [] private static ENTITY_UNDEFINED = "States"; private static ENTITY_CATEGORIES = [ "Sensor and Control", @@ -92,6 +99,7 @@ export class EntityTable extends LitElement implements RestAction { unique_id: data.id, id: parts.slice(1).join("-"), entity_category: data.entity_category, + sorting_group: data.sorting_group ?? (EntityTable.ENTITY_CATEGORIES[parseInt(data.entity_category)] || EntityTable.ENTITY_UNDEFINED), value_numeric_history: [data.value], } as entityConfig; entity.has_action = this.hasAction(entity); @@ -102,9 +110,9 @@ export class EntityTable extends LitElement implements RestAction { this.entities.sort((a, b) => { const sortA = a.sorting_weight ?? a.name; const sortB = b.sorting_weight ?? b.name; - return a.entity_category < b.entity_category + return a.sorting_group < b.sorting_group ? -1 - : a.entity_category == b.entity_category + : a.sorting_group == b.sorting_group ? sortA < sortB ? -1 : 1 @@ -125,6 +133,33 @@ export class EntityTable extends LitElement implements RestAction { this.requestUpdate(); } }); + + window.source?.addEventListener("sorting_group", (e: Event) => { + const messageEvent = e as MessageEvent; + const data = JSON.parse(messageEvent.data); + const groupIndex = this.groups.findIndex((x) => x.name === data.name); + if (groupIndex === -1) { + let group = { + ...data, + } as groupConfig; + this.groups.push(group); + this.groups.sort((a, b) => { + return a.sorting_weight < b.sorting_weight + ? -1 + : 1 + }); + } + }); + + this.groups = EntityTable.ENTITY_CATEGORIES.map((category, index) => ({ + name: category, + sorting_weight: index - 1000 + })); + + this.groups.push({ + name: EntityTable.ENTITY_UNDEFINED, + sorting_weight: -10001 + }); } hasAction(entity: entityConfig): boolean { @@ -165,24 +200,34 @@ export class EntityTable extends LitElement implements RestAction { } render() { - function groupBy(xs: Array, key: string): Map> { - return xs.reduce(function (rv, x) { + const groupBy = (xs: Array, key: string): Map> => { + const groupedMap = xs.reduce(function (rv, x) { ( rv.get(x[key]) || (() => { - let tmp: Array = []; + let tmp: Array = []; rv.set(x[key], tmp); return tmp; })() ).push(x); return rv; }, new Map>()); + + const sortedGroupedMap = new Map>(); + for (const group of this.groups) { + const groupName = group.name; + if (groupedMap.has(groupName)) { + sortedGroupedMap.set(groupName, groupedMap.get(groupName) || []); + } + } + + return sortedGroupedMap; } const entities = this.show_all ? this.entities : this.entities.filter((elem) => !elem.is_disabled_by_default); - const grouped = groupBy(entities, "entity_category"); + const grouped = groupBy(entities, "sorting_group"); const elems = Array.from(grouped, ([name, value]) => ({ name, value })); return html`
@@ -192,7 +237,7 @@ export class EntityTable extends LitElement implements RestAction { class="tab-header" @dblclick="${this._handleTabHeaderDblClick}" > - ${EntityTable.ENTITY_CATEGORIES[parseInt(group.name)] || + ${group.name || EntityTable.ENTITY_UNDEFINED}
From d40496eb2d43f9445ff9b7492d88c0a9f2f239eb Mon Sep 17 00:00:00 2001 From: Darter Date: Sun, 2 Jun 2024 17:50:59 +0200 Subject: [PATCH 2/7] use === instead of ==, styling to support multiline headers --- .vscode/settings.json | 3 +++ packages/v3/src/css/tab.ts | 4 +++- packages/v3/src/esp-entity-table.ts | 6 +++--- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6d2e34a --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "iis.configDir": "" +} \ No newline at end of file diff --git a/packages/v3/src/css/tab.ts b/packages/v3/src/css/tab.ts index ef03a9b..7e837d5 100644 --- a/packages/v3/src/css/tab.ts +++ b/packages/v3/src/css/tab.ts @@ -3,9 +3,11 @@ import { css } from "lit"; export default css` .tab-header { display: inline-flex; - min-height: 40px; + max-width:90%; font-weight: 400; padding-inline: 1.5em; + padding-top: 0.5em; + padding-bottom: 0.5em; align-items: center; border-radius: 12px 12px 0px 0px; background-color: rgba(127, 127, 127, 0.3); diff --git a/packages/v3/src/esp-entity-table.ts b/packages/v3/src/esp-entity-table.ts index 3063e88..56d4faf 100644 --- a/packages/v3/src/esp-entity-table.ts +++ b/packages/v3/src/esp-entity-table.ts @@ -112,7 +112,7 @@ export class EntityTable extends LitElement implements RestAction { const sortB = b.sorting_weight ?? b.name; return a.sorting_group < b.sorting_group ? -1 - : a.sorting_group == b.sorting_group + : a.sorting_group === b.sorting_group ? sortA < sortB ? -1 : 1 @@ -153,12 +153,12 @@ export class EntityTable extends LitElement implements RestAction { this.groups = EntityTable.ENTITY_CATEGORIES.map((category, index) => ({ name: category, - sorting_weight: index - 1000 + sorting_weight: index })); this.groups.push({ name: EntityTable.ENTITY_UNDEFINED, - sorting_weight: -10001 + sorting_weight: -1 }); } From 0698ee0148150ea24385643d3848dacd0017d6c3 Mon Sep 17 00:00:00 2001 From: Darter Date: Thu, 27 Jun 2024 16:16:45 +0200 Subject: [PATCH 3/7] add height and width --- packages/v2/public/logo.svg | 2 +- packages/v3/public/logo.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/v2/public/logo.svg b/packages/v2/public/logo.svg index f22981e..d5f35e7 100644 --- a/packages/v2/public/logo.svg +++ b/packages/v2/public/logo.svg @@ -1,5 +1,5 @@ - +