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