WatchExample1.razor

@namespace MudExtensions.Docs.Examples
@inject ISnackbar Snackbar
@using MudBlazor.Extensions
@using MudExtensions.Utilities

<MudGrid>
    <MudItem xs="12" sm="8">
        <MudStack Class="mud-width-full" AlignItems="AlignItems.Center">
            <MudWatch @ref="_watch" Interval="TimeSpan.FromMilliseconds(1)" Mode="_watchMode" LapRecords="_lapRecords" LapRecordsChanged="@(() => Snackbar.Add("Lap updated."))"
                      Wheel="_wheel" ShowHour="_showHour" ShowMinute="_showMinute" ShowSecond="_showSecond" ShowMillisecond="_showMillisecond"
                      Delimiter="@_delimiter" Typo="_typo" TypoMillisecond="_typoMillisecond" Color="_color" CountdownCompleted="@(() => Snackbar.Add("Completed"))" />
            <MudStack Row="true">
                <MudButton OnClick="@(() => _watch.Start())">Start</MudButton>
                <MudButton OnClick="@(() => _watch.Stop())">Stop</MudButton>
                <MudButton OnClick="@(() => _watch.Lap())">Lap</MudButton>
                <MudButton OnClick="@(() => _watch.Reset())">Reset</MudButton>
            </MudStack>
            @for (int i = 0; i < _lapRecords.Count(); i++)
            {
                int a = i;
                <MudText>@($"Lap {a + 1}: Total Time: {_lapRecords[a].TotalTime.ToString(@"mm\:ss\:fff")} - Gap: {_lapRecords[a].Gap.ToString(@"ss\:fff")}")</MudText>
            }
        </MudStack>
    </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack Spacing="4">
            <MudSelect @bind-Value="_watchMode" Variant="Variant.Outlined" Label="watch Mode">
                @foreach (WatchMode item in Enum.GetValues<WatchMode>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
            <MudSwitchM3 @bind-Value="_wheel" Color="Color.Secondary" Label="Wheel" />
            <div class="d-flex flex-wrap gap-4">
                <MudSwitchM3 @bind-Value="_showHour" Color="Color.Secondary" Label="Show Hour" />
                <MudSwitchM3 @bind-Value="_showMinute" Color="Color.Secondary" Label="Show Minute" />
                <MudSwitchM3 @bind-Value="_showSecond" Color="Color.Secondary" Label="Show Second" />
                <MudSwitchM3 @bind-Value="_showMillisecond" Color="Color.Secondary" Label="Show Millisecond" />
            </div>
            <MudTextField @bind-Value="_delimiter" Variant="Variant.Outlined" Label="Delimiter" />
            <MudSelect @bind-Value="_typo" Variant="Variant.Outlined" Label="Typo">
                @foreach (Typo item in Enum.GetValues<Typo>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>

            <MudSelect @bind-Value="_typoMillisecond" Variant="Variant.Outlined" Label="Typo Millisecond">
                @foreach (Typo item in Enum.GetValues<Typo>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>

            <MudSelect @bind-Value="_color" Variant="Variant.Outlined" Label="Color">
                @foreach (Color item in Enum.GetValues<Color>())
                {
                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                }
            </MudSelect>
        </MudStack>
    </MudItem>
</MudGrid>

@code {
    MudWatch _watch = new();
    WatchMode _watchMode = WatchMode.Watch;
    bool _wheel;
    bool _showHour = true;
    bool _showMinute = true;
    bool _showSecond = true;
    bool _showMillisecond = false;
    string _delimiter = ":";
    Typo _typo = Typo.h6;
    Typo _typoMillisecond = Typo.h6;
    Color _color;
    List<LapRecord> _lapRecords = new();
    TimeSpan _value = new TimeSpan(0, 0, 0);
}