Release

packages/v2/src/esp-entity-table.ts

@@ -285,6 +285,29 @@ class ActionRenderer {
     </div>`;
   }
 
+  private _datetime(
+    entity: entityConfig,
+    type: string,
+    action: string,
+    opt: string,
+    value: string,
+  ) {
+    return html`
+      <input 
+        type="${type}" 
+        name="${entity.unique_id}"
+        id="${entity.unique_id}"
+        value="${value}"
+        @change="${(e: Event) => {
+          const val = (<HTMLTextAreaElement>e.target)?.value;
+          this.actioner?.restAction(
+            entity,
+            `${action}?${opt}=${val}`
+          );
+        }}"
+      />
+    `;
+  }
 
   private _textinput(
     entity: entityConfig,
@@ -411,6 +434,32 @@ class ActionRenderer {
     );
   }
 
+  render_date() {
+    if (!this.entity) return;
+    return html`
+      ${this._datetime(
+        this.entity,
+        "date",
+        "set",
+        "value",
+        this.entity.value,
+      )}
+    `;
+  }
+
+  render_time() {
+    if (!this.entity) return;
+    return html`
+      ${this._datetime(
+        this.entity,
+        "time",
+        "set",
+        "value",
+        this.entity.value,
+      )}
+    `;
+  }
+
   render_text() {
     if (!this.entity) return;
     return this._textinput(

packages/v2/vite.config.ts

@@ -87,6 +87,8 @@ export default defineConfig({
       "/climate": proxy_target,
       "/events": proxy_target,
       "/text": proxy_target,
+      "/date": proxy_target,
+      "/time": proxy_target,
     },
   },
 });

packages/v3/src/css/app.ts

@@ -3,7 +3,7 @@ import { css } from "lit";
 export default css`
   .flex-grid-half {
     display: grid;
-    grid-template-columns: 500px 2fr;
+    grid-template-columns: 600px 2fr;
   }
   .flex-grid-half.expanded_entity,
   .flex-grid-half.expanded_logs {

packages/v3/src/css/esp-entity-table.ts

@@ -46,14 +46,18 @@ export default css`
     text-align: center;
   }
   .entity-row > :nth-child(2) {
-    flex: 1 1 50%;
+    flex: 1 1 40%;
     margin-left: 16px;
     margin-right: 8px;
     text-wrap: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 150px;
   }
   .entity-row > :nth-child(3) {
     flex: 1 1 50%;
     margin-right: 8px;
+    margin-left: 20px;
     text-align: right;
     display: flex;
     justify-content: space-between;

packages/v3/src/esp-app.ts

@@ -120,6 +120,14 @@ export default class EspApp extends LitElement {
     setInterval(() => {
       this.connected = !!this.ping && Date.now() - this.lastUpdate < 15000;
     }, 5000);
+    document.addEventListener('entity-tab-header-double-clicked', (e) => {
+      const mainElement = this.shadowRoot?.querySelector('main.flex-grid-half');
+      mainElement?.classList.toggle('expanded_entity');
+    });
+    document.addEventListener('log-tab-header-double-clicked', (e) => {
+      const mainElement = this.shadowRoot?.querySelector('main.flex-grid-half');
+      mainElement?.classList.toggle('expanded_logs');
+    });
   }
 
   schemeDefault() {
@@ -162,7 +170,6 @@ export default class EspApp extends LitElement {
       ? html`<section
           id="col_logs"
           class="col"
-          @dblclick="${this._handleDblClick}"
         >
           <esp-log rows="50" .scheme="${this.scheme}"></esp-log>
         </section>`
@@ -210,8 +217,7 @@ export default class EspApp extends LitElement {
       <main class="flex-grid-half" @toggle-layout="${this._handleLayoutToggle}">
         <section
           id="col_entities"
-          class="col"
-          @dblclick="${this._handleDblClick}"
+          class="col"          
         >
           <esp-entity-table .scheme="${this.scheme}"></esp-entity-table>
           ${this.renderOta()}
@@ -221,17 +227,6 @@ export default class EspApp extends LitElement {
     `;
   }
 
-  private _handleDblClick(e: Event) {
-    e.currentTarget?.parentNode?.classList.toggle(
-      "expanded_entity",
-      e.currentTarget?.id === "col_entities" ? undefined : false
-    );
-    e.currentTarget?.parentNode?.classList.toggle(
-      "expanded_logs",
-      e.currentTarget?.id === "col_logs" ? undefined : false
-    );
-  }
-
   private _updateUptime(e: MessageEvent) {
     if (e.lastEventId) {
       this.ping = parseInt(e.lastEventId);

packages/v3/src/esp-entity-table.ts

@@ -29,8 +29,8 @@ interface entityConfig {
   target_temperature_high?: number;
   min_temp?: number;
   max_temp?: number;
-  min_value?: number;
-  max_value?: number;
+  min_value?: string;
+  max_value?: string;
   step?: number;
   min_length?: number;
   max_length?: number;
@@ -185,7 +185,10 @@ export class EntityTable extends LitElement implements RestAction {
       <div>
         ${elems.map(
           (group) => html`
-            <div class="tab-header">
+            <div 
+              class="tab-header"
+              @dblclick="${this._handleTabHeaderDblClick}"
+            >
               ${EntityTable.ENTITY_CATEGORIES[parseInt(group.name)] ||
               EntityTable.ENTITY_UNDEFINED}
             </div>
@@ -240,8 +243,16 @@ export class EntityTable extends LitElement implements RestAction {
       );
     }
   }
+  _handleTabHeaderDblClick(e: Event) {
+    const doubleClickEvent = new CustomEvent('entity-tab-header-double-clicked', {
+      bubbles: true,
+      composed: true,
+    });
+    e.target?.dispatchEvent(doubleClickEvent);
+  }
 }
 
+
 type ActionRendererNonCallable = "entity" | "actioner" | "exec";
 type ActionRendererMethodKey = keyof Omit<
   ActionRenderer,
@@ -271,15 +282,16 @@ class ActionRenderer {
     </button>`;
   }
 
-  private _date(
+  private _datetime(
     entity: entityConfig,
+    type: string,
     action: string,
     opt: string,
     value: string,
   ) {
     return html`
       <input 
-        type="date" 
+        type="${type}" 
         name="${entity.unique_id}"
         id="${entity.unique_id}"
         value="${value}"
@@ -294,7 +306,6 @@ class ActionRenderer {
     `;
   }
 
-
   private _switch(entity: entityConfig) {
     return html`<esp-switch
       color="var(--primary-color,currentColor)"
@@ -337,28 +348,22 @@ class ActionRenderer {
     entity: entityConfig,
     action: string,
     opt: string,
-    value: number | string,
-    min?: number,
-    max?: number,
+    value: string | number,
+    min?: string | undefined,
+    max?: string | undefined,
     step = 1
   ) {
     if(entity.mode == 1) {
-      const val = Number(value);
-      let stepString = step.toString();
-      let numDecimalPlaces = 0
-      if (stepString.indexOf('.') !== -1) {
-        numDecimalPlaces = stepString.split('.')[1].length;
-      }
       return html`<div class="range">
         <label>${min || 0}</label>
         <input
           type="${entity.mode == 1 ? "number" : "range"}"
           name="${entity.unique_id}"
           id="${entity.unique_id}"
           step="${step}"
-          min="${min || Math.min(0, val)}"
-          max="${max || Math.max(10, val)}"
-          .value="${(val.toFixed(numDecimalPlaces))}"
+          min="${min || Math.min(0, value as number)}"
+          max="${max || Math.max(10, value as number)}"
+          .value="${value}"
           @change="${(e: Event) => {
             const val = (<HTMLTextAreaElement>e.target)?.value;
             this.actioner?.restAction(entity, `${action}?${opt}=${val}`);
@@ -450,13 +455,26 @@ class ActionRenderer {
   render_date() {
     if (!this.entity) return;
     return html`
-      ${this._date(
+      ${this._datetime(
         this.entity,
+        "date",
+        "set",
+        "value",
+        this.entity.value,
+      )}
+    `;
+  }
+
+  render_time() {
+    if (!this.entity) return;
+    return html`
+      ${this._datetime(
+        this.entity,
+        "time",
         "set",
         "value",
         this.entity.value,
       )}
-      ${this.entity.uom}
     `;
   }
 

packages/v3/src/esp-log.ts

@@ -50,7 +50,12 @@ export class DebugLog extends LitElement {
 
   render() {
     return html`
-      <div class="tab-header">Debug Log</div>
+      <div 
+        class="tab-header"
+        @dblclick="${this._handleTabHeaderDblClick}"
+      >
+        Debug Log
+      </div>
       <div class="tab-container">
         <div class="logs" color-scheme="${this.scheme}">
           <div class="thead trow">
@@ -77,6 +82,14 @@ export class DebugLog extends LitElement {
     `;
   }
 
+  _handleTabHeaderDblClick(e: Event) {
+    const doubleClickEvent = new CustomEvent('log-tab-header-double-clicked', {
+      bubbles: true,
+      composed: true,
+    });
+    e.target?.dispatchEvent(doubleClickEvent);
+  }
+
   static get styles() {
     return [
       cssTab,

packages/v3/src/esp-range-slider.ts

@@ -11,14 +11,13 @@ export class EspRangeSlider extends LitElement {
   private inputRange: HTMLInputElement | null = null;
   private currentValue: HTMLInputElement | null = null;
 
-  private numDecimalPlaces: number = 0;
   private longPressTimer: ReturnType<typeof setTimeout> | null = null;
   private isPopupInputVisible: boolean = false;
 
-  @property({ type: Number }) value = 0;
-  @property({ type: Number }) min = 0;
-  @property({ type: Number }) max = 0;
-  @property({ type: Number }) step = 0;
+  @property({ type: String }) value = 0;
+  @property({ type: String }) min = 0;
+  @property({ type: String }) max = 0;
+  @property({ type: String }) step = 0;
   @property({ type: String }) name = "";
 
   protected firstUpdated(
@@ -31,12 +30,6 @@ export class EspRangeSlider extends LitElement {
     this.currentValue = this.shadowRoot?.getElementById(
       currentValueID
     ) as HTMLInputElement;
-
-    let stepString = this.step.toString();
-    if (stepString.indexOf('.') !== -1) {
-      this.numDecimalPlaces = stepString.split('.')[1].length;
-    }
-
     document.addEventListener('mousedown', (event) => {
       if(!document.querySelector('.popup-number-input')) {
         return;
@@ -133,7 +126,7 @@ export class EspRangeSlider extends LitElement {
   updateCurrentValueOverlay(): void {
     const newValueAsPercent = Number( (this.inputRange.value - this.inputRange.min) * 100 / (this.inputRange.max - this.inputRange.min) ),
     newPosition = 10 - (newValueAsPercent * 0.2);
-    this.currentValue.innerHTML = `<span>${Number(this.inputRange?.value).toFixed(this.numDecimalPlaces)}</span>`;
+    this.currentValue.innerHTML = `<span>${this.inputRange?.value}</span>`;
     this.currentValue.style.left = `calc(${newValueAsPercent}% + (${newPosition}px))`;
 
     const spanTooltip = this.currentValue?.querySelector('span');
@@ -168,7 +161,7 @@ export class EspRangeSlider extends LitElement {
   render() {
     return html`
       <div class="range-wrap">
-        <label style="text-aligne: left;">${this.min || 0}</label>
+        <label>${this.min || 0}</label>
         <div class="slider-wrap">
           <div class="range-value" id="rangeValue"></div>
             <input
@@ -178,7 +171,7 @@ export class EspRangeSlider extends LitElement {
               step="${this.step}"
               min="${this.min || Math.min(0, this.value)}"
               max="${this.max || Math.max(10, this.value)}"
-              .value="${(this.value.toFixed(this.numDecimalPlaces))}"
+              .value="${this.value}"
               @input="${this.onInputEvent}"
               @change="${this.onInputChangeEvent}"
             />
@@ -199,6 +192,7 @@ export class EspRangeSlider extends LitElement {
           -webkit-appearance: none;
           margin: 20px 0;
           width: 100%;
+          touch-action: none;
         }
         input[type=range]:focus {
           outline: none;
@@ -228,11 +222,8 @@ export class EspRangeSlider extends LitElement {
           display: flex;
           align-items: center;
         }
-        .range-wrap label{
-          flex: 1;
-        }
         .slider-wrap{
-          width: 70%; 
+          flex-grow: 1;
           margin: 0px 15px;
           position: relative;
         }

packages/v3/vite.config.ts

@@ -89,6 +89,7 @@ export default defineConfig({
       "/events": proxy_target,
       "/text": proxy_target,
       "/date": proxy_target,
+      "/time": proxy_target,
     },
   },
 });