init

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<any>, key: string): Map<string, Array<any>> {
-      return xs.reduce(function (rv, x) {
+    const groupBy = (xs: Array<any>, key: string): Map<string, Array<any>> => {
+      const groupedMap = xs.reduce(function (rv, x) {
         (
           rv.get(x[key]) ||
           (() => {
-            let tmp: Array<string> = [];
+            let tmp: Array<any> = [];
             rv.set(x[key], tmp);
             return tmp;
           })()
         ).push(x);
         return rv;
       }, new Map<string, Array<any>>());
+
+      const sortedGroupedMap = new Map<string, Array<any>>();
+      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`
       <div>
@@ -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}
             </div>
             <div class="tab-container">