Tesserae - Plan

Plan

Description

A component to display a plan

The Plan component displays a complex task with its sub-tasks and overall progress.

API reference

class

Plan

public sealed class Plan : IComponent, IHasMarginPadding

A timeline-style display for showing a multi-step plan or schedule with start/end times for each step.

Constructors

Constructor

Plan

public Plan(string title)

Initializes a new instance of this class.

Properties

Property

Plan.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

Plan.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Methods

Method

Plan.Render

public HTMLElement Render()

Renders the component's root HTML element.

Method

Plan.Title

public Plan Title(string title)

Gets or sets the title of the component.

Method

Plan.HeaderCommands

public Plan HeaderCommands(params IComponent[] commands)

Sets the components shown in the header command area.

Method

Plan.FooterMessage

public Plan FooterMessage(string message)

Sets a message shown in the footer.

Method

Plan.FooterCommands

public Plan FooterCommands(params IComponent[] commands)

Sets the components shown in the footer command area.

Method

Plan.AddTask

public Plan AddTask(string title, bool completed)

Adds the given task to the component.

Method

Plan.Progress

public Plan Progress(int position, int total)

Configures the component to progress.

Method

Plan.Progress

public Plan Progress(float percent)

Configures the component to progress.

Method

Plan.Indeterminate

public Plan Indeterminate()

Configures the component to indeterminate.

Method

Plan.StartStopButton

public Plan StartStopButton(Action<Button> onStartStop)

Adds a start / stop toggle button wired up via the supplied callback.

Method

Plan.HideStartStopButton

public Plan HideStartStopButton()

Hides the start stop button.

Method

Plan.ShowStartStopButton

public Plan ShowStartStopButton()

Shows the start stop button.

Method

Plan.Start

public Plan Start()

Starts the component's operation.

Method

Plan.Stop

public Plan Stop()

Stops the component's operation.

Samples

Running plan with partial progress

plan-running-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 = Plan("SCIM user provisioning deep dive")
                .HeaderCommands(Button("Update").NoBorder().Rounded())
                .AddTask("Collect official SCIM RFCs and specifications from IETF and RFC repositories.", true)
                .AddTask("Survey major identity providers' SCIM documentation and authentication methods.", false)
                .AddTask("Gather sample SCIM request and response payloads and endpoint patterns.", false)
                .AddTask("Identify open-source SCIM implementations and C# libraries with examples.", false)
                .AddTask("Compile technical explanation covering endpoints, auth, schemas, and examples.", false)
                .FooterMessage("Finalizing details for licenses and attribution...")
                .FooterCommands(TextBlock("117 searches").Small().SemiBold())
                .Progress(1, 5)
                .Stop()
                .MaxWidth(800.px());

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

Completed plan with stop button hidden

plan-completed-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 = Plan("Database Migration Plan")
                .AddTask("Backup database", true)
                .AddTask("Run schema update", true)
                .AddTask("Migrate data", true)
                .FooterMessage("Migration complete")
                .Progress(100)
                .HideStartStopButton()
                .MaxWidth(800.px());

            component.Render().style.maxWidth = "800px";

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

Plan with indeterminate progress

plan-indeterminate-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 = Plan("Analyzing Log Files")
                .AddTask("Download logs from S3", true)
                .AddTask("Parse JSON structure", true)
                .AddTask("Find error patterns", false)
                .FooterMessage("Scanning file 45 of 200...")
                .Indeterminate()
                .Start()
                .MaxWidth(800.px());

            component.Render().style.maxWidth = "800px";

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

Plan

Description

API reference

Constructors

Plan

Properties

Plan.Margin

Plan.Padding

Methods

Plan.Render

Plan.Title

Plan.HeaderCommands

Plan.FooterMessage

Plan.FooterCommands

Plan.AddTask

Plan.Progress

Plan.Progress

Plan.Indeterminate

Plan.StartStopButton

Plan.HideStartStopButton

Plan.ShowStartStopButton

Plan.Start

Plan.Stop

Samples

Running plan with partial progress

Completed plan with stop button hidden

Plan with indeterminate progress

See also