Tesserae - Cron Editor

CronEditor

Description

A component to edit cron expressions

CronEditor allows users to schedule tasks using a simplified UI for daily schedules, with a fallback to raw cron expressions for advanced users.

API reference

class

CronEditor

public sealed class CronEditor : ComponentBase<CronEditor, HTMLDivElement>, IObservableComponent<(string cron, bool enabled)>

A structured editor for cron expressions, exposing the schedule fields (minutes, hours, day-of-month, month, day-of-week) as separate inputs.

Constructors

Constructor

CronEditor

public CronEditor(string initialCron = "0 12 * * *", bool initialEnabled = true)

Initializes a new instance of this class.

Properties

Property

CronEditor.Value

public (string cron, bool enabled) Value { get ; set ; }

Gets or sets the cron expression and its enabled/disabled state as a tuple.

Methods

Method

CronEditor.DaysEnabled

public CronEditor DaysEnabled(bool enabled = true)

Enables or disables the day-of-week selector in the editor.

Method

CronEditor.ShowEnableCheckbox

public CronEditor ShowEnableCheckbox(bool visible)

Shows the enable checkbox.

Method

CronEditor.MinuteInterval

public CronEditor MinuteInterval(int interval)

Sets the minute-step interval used by the editor.

Method

CronEditor.OnChange

public CronEditor OnChange(ComponentEventHandler<CronEditor> onChange)

Registers a callback invoked when the change event fires.

Method

CronEditor.AsObservable

public IObservable<(string cron, bool enabled)> AsObservable()

Returns the component's current value as an .

Method

CronEditor.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic

cron-editor-basic-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor();

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

With Days Selection Disabled

cron-editor-no-days-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor().DaysEnabled(false);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Custom Interval (30 mins)

cron-editor-interval-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor().MinuteInterval(30);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

With Initial Value (Custom)

cron-editor-initial-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor("*/5 * * * *");

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Initially Disabled

cron-editor-disabled-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor(initialEnabled: false);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

With Enable Checkbox Hidden

cron-editor-no-checkbox-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = CronEditor().ShowEnableCheckbox(false);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Observable

cron-editor-observable-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var editor = CronEditor();
            var text = TextBlock("Current value: " + editor.Value.cron + " (" + (editor.Value.enabled ? "Enabled" : "Disabled") + ")");
            editor.OnChange((s) => text.Text = "Current value: " + s.Value.cron + " (" + (s.Value.enabled ? "Enabled" : "Disabled") + ")");

            var component = VStack().Children(editor, text);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Preset Schedules with Description

Use buttons to seed the editor with common schedules (hourly, daily, weekly, monthly). A live description gives users a human-readable summary of the current expression so they can confirm what they configured.

cron-editor-presets-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static string Describe(string cron)
        {
            switch (cron)
            {
                case "0 * * * *":   return "Every hour, on the hour";
                case "0 9 * * *":   return "Every day at 09:00";
                case "0 9 * * 1":   return "Every Monday at 09:00";
                case "0 9 1 * *":   return "First day of each month at 09:00";
                case "*/15 * * * *":return "Every 15 minutes";
                default:            return $"Custom: {cron}";
            }
        }

        private static void Main()
        {
            var editor      = CronEditor("0 9 * * *");
            var description = TextBlock(Describe(editor.Value.cron)).SemiBold();

            editor.OnChange(s => description.Text(Describe(s.Value.cron)));

            void Apply(string cron) => editor.Value = (cron, editor.Value.enabled);

            var component = VStack().Children(
                HStack().Gap(8.px()).Children(
                    Button("Hourly").SetIcon(UIcons.Clock).OnClick((s, e) => Apply("0 * * * *")),
                    Button("Daily 9am").SetIcon(UIcons.Sun).OnClick((s, e) => Apply("0 9 * * *")),
                    Button("Weekly Mon").SetIcon(UIcons.Calendar).OnClick((s, e) => Apply("0 9 * * 1")),
                    Button("Monthly").SetIcon(UIcons.CalendarLines).OnClick((s, e) => Apply("0 9 1 * *")),
                    Button("Every 15m").SetIcon(UIcons.Refresh).OnClick((s, e) => Apply("*/15 * * * *"))
                ),
                editor.MT(16),
                HStack().PT(8).Children(Label("Runs: ").SetContent(description))
            ).Padding(16.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

CronEditor

Description

API reference

Constructors

CronEditor

Properties

CronEditor.Value

Methods

CronEditor.DaysEnabled

CronEditor.ShowEnableCheckbox

CronEditor.MinuteInterval

CronEditor.OnChange

CronEditor.AsObservable

CronEditor.Render

Samples

Basic

With Days Selection Disabled

Custom Interval (30 mins)

With Initial Value (Custom)

Initially Disabled

With Enable Checkbox Hidden

Observable

Preset Schedules with Description

See also