How to implement an Widget HTML (Form) + Angular + CRON String + import for ESP32/ESP8266?

Hello @alvarolb and @jaimebs ,

I’m trying to develop an Alarm Clock/Timer device to turn equipment on or off.
Example:

However, I need a widget that informs the device of the day and time setting for the alert.

Initially, I imagined developing something with libraries that manipulate strings with CRON standard settings. I managed to find some very interesting libraries for this purpose.

However, I’m having difficulty implementing the widget to generate the CRON standard string and send it to the device (ESP32).

Initially, I imagined creating a property (e.g., “alarm_1”) that would store the CRON string and some additional information, such as a boolean variable to indicate whether the alert is active or deactivated, and whether the action is to turn the relay on or off. Then, the device would read the JSON from the property when it is changed, executing a trigger via Node-RED.

{
"cron_string": "30 20 * * WED,THU,FRI,SAT",
"action_rele": true,
"enable": true
}

or
{
"cron_string": "30 20 * * 3-6",
"action_rele": true,
"enable": true
}

NOTE: I need to develop a solution to be deployed on the Dashboard, as the project users will be the ones configuring the timer.

I know that Node-RED has “palettes” with this functionality that could send commands to devices, but I need this “configuration form” to be available in the panel for project users.
Furthermore, I need the device to store this information so it can execute the command even without internet (the device will have an RTC clock to store the date and time).

I found some libraries in AngularJS and Angular that would enable the widget and the production of the CRON string.

The problem I’m facing is how to implement one of them in Thinger’s HTML Widget. I don’t have much frontend knowledge and I still find implementing AngularJS in Thinger a bit complex (NOTE: Comparatively, implementing the Apex Chart widget is very easy). If you could help by demonstrating how to implement this widget, I would greatly appreciate it!

My goal is to develop a widget that allows configuring the “Weekly” option, through which the project user can indicate information about the day and time the relay operates:

NOTE: I considered implementing this functionality via Formly, but I couldn’t find examples that made it feasible by generating a CRON string. Therefore, I abandoned that approach for now.