Tesserae

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.

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