✨ show entity name in editor

Author: JonasDoebertin

src/elements/card.ts

@@ -29,22 +29,6 @@ export class TodayCard extends LitElement {
         return document.createElement("today-card-editor");
     }
 
-    connectedCallback(): void {
-        super.connectedCallback();
-
-        if (this.refreshInterval === undefined) {
-            this.refreshInterval = window.setInterval((): void => {
-                this.updateEvents();
-            }, REFRESH_INTERVAL);
-        }
-    }
-
-    disconnectedCallback(): void {
-        window.clearInterval(this.refreshInterval);
-
-        super.disconnectedCallback();
-    }
-
     static getStubConfig(
         hass: HomeAssistant,
         entities: string[],
@@ -67,6 +51,22 @@ export class TodayCard extends LitElement {
         };
     }
 
+    connectedCallback(): void {
+        super.connectedCallback();
+
+        if (this.refreshInterval === undefined) {
+            this.refreshInterval = window.setInterval((): void => {
+                this.updateEvents();
+            }, REFRESH_INTERVAL);
+        }
+    }
+
+    disconnectedCallback(): void {
+        window.clearInterval(this.refreshInterval);
+
+        super.disconnectedCallback();
+    }
+
     setConfig(config: CardConfig) {
         setHass(this.hass);
         assert(config, CardConfig);
@@ -91,7 +91,8 @@ export class TodayCard extends LitElement {
         if (events.length === 0) {
             eventsHtml = html`
                 <div class="event">
-                    <div class="indicator" style="background-color: ${computeCssColor(this.config.fallback_color)}"></div>
+                    <div class="indicator"
+                         style="background-color: ${computeCssColor(this.config.fallback_color)}"></div>
                     <div class="details">
                         <p class="title">${localize("noEvents.title")}</p>
                         <p class="schedule">${localize("noEvents.subtitle")}</p>

src/elements/editor.ts

@@ -2,12 +2,13 @@ import styles from "bundle-text:./editor.css";
 import {CSSResult, html, LitElement, TemplateResult, unsafeCSS} from "lit";
 import {customElement, property, state} from "lit/decorators.js";
 import {assert} from "superstruct";
-import {fireEvent, processEditorEntities} from "../functions/config";
+import {processEditorEntities} from "../functions/config";
 import {loadHaComponents} from "../functions/hacks";
 import {CardConfig, EntitiesRowConfig} from "../structs/config";
 import {HomeAssistant} from "custom-card-helpers";
 import {setHass} from "../globals";
 import localize from "../localization/localize";
+import {fireEvent} from "../functions/events";
 
 const FORM_SCHEMA = [
     {

src/elements/entity-editor.ts

@@ -3,15 +3,16 @@ import styles from "bundle-text:./entity-editor.css";
 import {CSSResult, html, LitElement, TemplateResult, unsafeCSS} from "lit";
 import {customElement, property, state} from "lit/decorators.js";
 import {repeat} from "lit/directives/repeat";
-import {fireEvent} from "../functions/config";
 import {HomeAssistant} from "custom-card-helpers";
 import {EntitiesRowConfig} from "../structs/config";
 import localize from "../localization/localize";
+import {fireEvent} from "../functions/events";
+import {getEntityName} from "../functions/config";
 
 @customElement('today-card-entities-editor')
 export class TodayCardEntitiesEditor extends LitElement {
     @property({attribute: false}) public hass!: HomeAssistant;
-    @state() private entities: EntitiesRowConfig[] = [];
+    @state() public entities: EntitiesRowConfig[] = [];
 
     static get styles(): CSSResult {
         return unsafeCSS(styles);
@@ -31,7 +32,7 @@ export class TodayCardEntitiesEditor extends LitElement {
                     (entity, index) => html`
                         <div class="entity">
                             <div class="details">
-                                <span class="name">Name</span>
+                                <span class="name">${getEntityName(entity.entity)}</span>
                                 <span class="id">${entity.entity}</span>
                             </div>
                             <ha-color-picker
@@ -72,22 +73,18 @@ export class TodayCardEntitiesEditor extends LitElement {
         const value = event.detail.value;
 
         const newEntities = this.entities.concat();
-        newEntities[index] = {
-            entity: newEntities[index].entity,
-            color: value,
-        };
+        newEntities[index] = {...newEntities[index], color: value};
 
         fireEvent(this, "entities-changed", {entities: newEntities});
     }
 
     private addRow(event: Event): void {
-        // @ts-expect-error
-        const value = event.detail.value;
-        if (value === "") {
+        const entityId = event.detail.value;
+        if (entityId === "") {
             return;
         }
 
-        const newEntities = this.entities.concat({entity: value, color: ""});
+        const newEntities: EntitiesRowConfig[] = this.entities.concat({entity: entityId});
 
         // @ts-expect-error
         event.target.value = "";

src/functions/colors.ts

@@ -1,10 +1,10 @@
 export const FALLBACK_COLORS: string[] = [
-    "blue",
-    "yellow",
-    "red",
-    "cyan",
-    "deep-purple",
+    "light-blue",
+    "amber",
+    "light-green",
     "pink",
+    "deep-purple",
+    "deep-orange",
 ];
 
 export const THEME_COLORS: string[] = [

src/functions/config.ts

@@ -1,26 +1,14 @@
 import {EntitiesRowConfig} from "../structs/config";
 import {getFallBackColor} from "./colors";
+import {getHass} from "../globals";
 
-export function fireEvent(
-    node: HTMLElement,
-    type: string,
-    detail: Record<string, any> | null | undefined,
-    options?: Record<string, any>
-): Event {
-    options = options || {};
-    detail = detail === null || detail === undefined ? {} : detail;
+export function getEntityName(entity: string): string {
+    const hass = getHass();
+    if (!hass) {
+        return entity;
+    }
 
-    const event = new Event(type, {
-        bubbles: options.bubbles === undefined ? true : options.bubbles,
-        cancelable: Boolean(options.cancelable),
-        composed: options.composed === undefined ? true : options.composed,
-    });
-    // @ts-ignore
-    event.detail = detail;
-
-    node.dispatchEvent(event);
-
-    return event;
+    return hass.entities[entity]?.name ?? entity;
 }
 
 export function processEditorEntities(
@@ -31,13 +19,13 @@ export function processEditorEntities(
         if (typeof entry === "string") {
             return {
                 entity: entry,
-                color: getFallBackColor(i),
+                color: assignColors ? getFallBackColor(i): "",
             };
         }
 
-        // TODO: Inject color for object type entrys
-        // TODO: Only inject colors if enabled
-
-        return entry;
+        return {
+            entity: entry.entity,
+            color: entry.color ?? (assignColors ? getFallBackColor(i): ""),
+        };
     });
 }

src/functions/events.ts

@@ -0,0 +1,21 @@
+export function fireEvent(
+    node: HTMLElement,
+    type: string,
+    detail: Record<string, any> | null | undefined,
+    options?: Record<string, any>
+): Event {
+    options = options || {};
+    detail = detail === null || detail === undefined ? {} : detail;
+
+    const event = new Event(type, {
+        bubbles: options.bubbles === undefined ? true : options.bubbles,
+        cancelable: Boolean(options.cancelable),
+        composed: options.composed === undefined ? true : options.composed,
+    });
+    // @ts-ignore
+    event.detail = detail;
+
+    node.dispatchEvent(event);
+
+    return event;
+}