Add calendar trigger offsets in automation editor (#12486)

* Add calendar trigger offsets in automation editor

* Use duration selector for offset

* Fix typing for offsets/duratons

src/data/automation.ts

@@ -157,6 +157,7 @@ export interface CalendarTrigger extends BaseTrigger {
   platform: "calendar";
   event: "start" | "end";
   entity_id: string;
+  offset: string;
 }
 
 export type Trigger =

src/panels/config/automation/trigger/types/ha-automation-trigger-calendar.ts

@@ -5,7 +5,9 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { CalendarTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
+import type { HaDurationData } from "../../../../../components/ha-duration-input";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 
 @customElement("ha-automation-trigger-calendar")
@@ -39,20 +41,57 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
         ],
       ],
     },
+    { name: "offset", selector: { duration: {} } },
+    {
+      name: "offset_type",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "before",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.calendar.before"
+          ),
+        ],
+        [
+          "after",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.calendar.after"
+          ),
+        ],
+      ],
+    },
   ]);
 
   public static get defaultConfig() {
     return {
       event: "start" as CalendarTrigger["event"],
+      offset: 0,
     };
   }
 
   protected render() {
     const schema = this._schema(this.hass.localize);
+    // Convert from string representation to ha form duration representation
+    const trigger_offset = this.trigger.offset;
+    const duration: HaDurationData = createDurationData(trigger_offset)!;
+    let offset_type = "after";
+    if (
+      (typeof trigger_offset === "object" && duration!.hours! < 0) ||
+      (typeof trigger_offset === "string" && trigger_offset.startsWith("-"))
+    ) {
+      duration.hours = Math.abs(duration.hours!);
+      offset_type = "before";
+    }
+    const data = {
+      ...this.trigger,
+      offset: duration,
+      offset_type: offset_type,
+    };
     return html`
       <ha-form
         .schema=${schema}
-        .data=${this.trigger}
+        .data=${data}
         .hass=${this.hass}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -62,7 +101,14 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const newTrigger = ev.detail.value;
+    // Convert back to duration string representation
+    const duration = ev.detail.value.offset;
+    const offsetType = ev.detail.value.offset_type === "before" ? "-" : "";
+    const newTrigger = {
+      ...ev.detail.value,
+      offset: `${offsetType}${duration.hours}:${duration.minutes}:${duration.seconds}`,
+    };
+    delete newTrigger.offset_type;
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 

src/translations/en.json

@@ -1781,7 +1781,10 @@
                   "label": "Calendar",
                   "event": "[%key:ui::panel::config::automation::editor::triggers::type::homeassistant::event%]",
                   "start": "Event Start",
-                  "end": "Event End"
+                  "end": "Event End",
+                  "offset": "Offset (optional)",
+                  "before": "Before",
+                  "after": "After"
                 },
                 "device": {
                   "label": "Device",