Allow device triggers to specify extra fields, update ha-form with support for paper-time-input

[emontnemery]

Allow device triggers to specify extra fields which will then be shown in the UI using ha-form.
Some extra love is given to support for (duration) in device automation triggers

Screenshot:

Intended for backend PRs home-assistant/core#26658, home-assistant/core#27133 etc.

[emontnemery]

Maybe this styling should not be here?
Also, how to block saving the automation if the paper-time-input is invalid?

[bramkragten]

You could move it to ha-style.ts

[emontnemery]

OK, but how to add it such that it only applies to paper-input inside paper-time-input?

[bramkragten]

Can we add a days field? For if you want more than 23 hours?

[emontnemery]

Can we add a days field? For if you want more than 23 hours?

OK, makes sense, will give it a try.
Backend only supports hh:mm:ss though, I guess OK to split hours in days + hours in frontend?

[bramkragten]

Can we add a days field? For if you want more than 23 hours?

OK, makes sense, will give it a try.
Backend only supports hh:mm:ss though, I guess OK to split hours in days + hours in frontend?

Yeah, I think it's fine to make the hours field take more than 23 with an option too

[emontnemery]

I added a days input, how to make the paper-input and paper-time-input on same row though?

Also, the maths became super ugly converting back and forth between strings and numbers; will clean that up tomorrow.

[bramkragten]

Set display of the paper-input to inline-block and give it a proper width:

paper-input {
  display: inline-block;
  width: 50px;
}

[bramkragten]

Btw, the backend does seem to support days:

    # If given, will trigger when condition has been for X time, can also use days and milliseconds.
    for:
      hours: 1
      minutes: 10
      seconds: 5

https://www.home-assistant.io/docs/automation/trigger/#numeric-state-trigger

[emontnemery]

@bramkragten Thanks for help with styling!

Days and hh:mm:ss is now on a single row, but it's quite ugly

How to achieve something like this:

[bramkragten]

@bramkragten Thanks for help with styling!

Days and hh:mm:ss is now on a single row, but it's quite ugly

How to achieve something like this:

We might be better of creating a new element for picking time that has all the logic you want and includes days, that could also handle the hours -> days conversion and export it in the right format. We could reuse that element for all automation triggers. Trying to get this component to do 2 totally different thing will be messy. Or we should add the days to the current time picker...

[emontnemery]

Or we should add the days to the current time picker...

I went down that route, I think it's quite OK:

[emontnemery]

fetchDeviceTriggerCapabilities is called when device trigger is picked, but if we're editing an existing automation that won't happen. The purpose of this is just to load the trigger capabilities once.
OK to take care of it here, or should it be done elsewhere, for example in componentDidMount?

[balloob]

The render method should never have side effects. Not in Preact nor Lit. It is possible that this method can get called multiple times before the capabilities resolve, and you will do many requests.

Instead, do it inside componentDidUpdate. (similar to updated in Lit)

[emontnemery]

OK, moved out of render but to componentDidMount, componentDidUpdate was not called after first render.

[balloob]

Can we drop days ? People can just do 72 hours if they want that.

[bramkragten]

Already did