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'));