diff --git a/src/components/timeslot-editor.ts b/src/components/timeslot-editor.ts index 460ddb0..f7337c6 100755 --- a/src/components/timeslot-editor.ts +++ b/src/components/timeslot-editor.ts @@ -126,6 +126,27 @@ export class TimeslotEditor extends LitElement { const availableWidth = w * width - leftMargin - rightMargin; start += w * width; + const content = (() => { + if (actionText && (availableWidth > textWidth / 3 || availableWidth > 50) && availableWidth > 30) { + return html` + + ${actionText} + + `; + } + + const icons = this.computeActionIcons(e); + if (!!icons) { + return html` + + ${icons.map((icon) => html``)} + + `; + } + + return ''; + })(); + return html`
- ${actionText && (availableWidth > textWidth / 3 || availableWidth > 50) && availableWidth > 30 - ? actionText - : ''} - + ${content}
`; }); @@ -237,6 +253,37 @@ export class TimeslotEditor extends LitElement { ).join(', '); } + computeActionIcons(entry: Timeslot) { + if (!this.hass) return; + if (!entry.actions) return; + + return unique( + entry.actions.map(action => { + const actionConfig = this.actions.find(e => compareActions(e, action, true)); + if (!actionConfig) return []; + + if ( + actionConfig.variables && + Object.keys(actionConfig.variables).some(field => action.service_data && field in action.service_data) + ) { + return Object.entries(actionConfig.variables) + .filter(([field]) => action.service_data && field in action.service_data) + .map(([field, variable]) => { + const value = action.service_data![field]; + if (variable.type == EVariableType.List) { + variable = variable as ListVariable; + const listItem = variable.options.find(e => e.value == value); + return listItem?.icon; + } else return undefined; + }); + } + return [actionConfig.icon]; + }) + .reduce((prev, icons) => [...prev, ...icons], []) + .filter((icon) => !!icon) + ); + } + @eventOptions({ passive: true }) private _handleTouchStart(ev: MouseEvent | TouchEvent) { const fullWidth = parseFloat(getComputedStyle(this).getPropertyValue('width')); @@ -336,6 +383,7 @@ export class TimeslotEditor extends LitElement { _selectSlot(ev: Event) { if (this.isDragging) return; let el = ev.target as HTMLElement; + if (el.tagName.toLowerCase() == 'ha-icon') el = el.parentElement as HTMLElement; if (el.tagName.toLowerCase() == 'span') el = el.parentElement as HTMLElement; if (el.classList.contains('handle')) el = el.parentElement as HTMLElement; const slot = Number(el.getAttribute('slot'));