@page "/"

@rendermode InteractiveServer 

<PageTitle>Home</PageTitle>

<ProgressBar TargetProduction="100" CurrentProduction="50" BarColor="blue" @rendermode="InteractiveServer"></ProgressBar>

@code {

    // Parameter to receive the target production value from the parent component
    [Parameter]
    public int TargetProduction { get; set; }

    // Parameter to receive the current production value from the parent component
    [Parameter]
    public int CurrentProduction { get; set; }

    // Parameter for setting the color of the progress bar (default is blue)
    [Parameter]
    public string BarColor { get; set; } = "blue";

    // Event callback to notify the parent component when the production is restarted
    [Parameter]
    public EventCallback<int> CurrentProductionRestarted { get; set; }

    // Method to reset the production progress
    private void Restart()
    {
        // Logs a message in the browser console using JavaScript (JSInterop)
        _ = JSRuntime.InvokeVoidAsync("console.log", "Restart command requested!");

        // Reset the current production to zero
        CurrentProduction = 0;

        // Trigger the event callback to inform the parent component
        CurrentProductionRestarted.InvokeAsync(0);
    }
}

public async Task BlazorControlLoaded(TBlazorControl control)
{
    // Runs once for each Blazor control on the display, after it has loaded.
    // Two-way: the third argument names the component's EventCallback that sends changes back to the tag.
    control.BindEvent("CurrentProduction", @Tag.CurrentProduction.GetName(), "CurrentProductionRestarted");
    // One-way (third argument null): the tag only sends values to the control.
    control.BindEvent("TargetProduction", @Tag.TargetProduction.GetName(), null);
    control.BindEvent("BarColor", @Tag.BarColor.GetName(), null);
}

@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<!--
    This is a simple Blazor component that displays a progress bar.
    The progress bar represents production progress based on a target.
    It also includes a "Restart Simulation" button to reset progress.
-->

<div class="ms-2">
    <h3>Progress Bar</h3>

    <!-- Display the target and current production values -->
    <p>Target Production: @TargetProduction</p>
    <p>Current Production: @CurrentProduction</p>

    <!-- Conditional rendering: If the target is 0 or less, display an empty progress bar -->
    @if (TargetProduction <= 0)
    {
        <div style="width: 100%; background: #ddd; height:30px; border-radius: 5px; position: relative">
            <div style="width: 0%; background-color: @(BarColor); height:30px; border-radius: 5px"></div>
        </div>
    }
    else
    {
        <!--
            When the target production is greater than 0,
            the progress bar dynamically updates its width based on the production progress.
        -->
        <div style="width: 100%; background: #ddd; height:30px; border-radius: 5px; position: relative">
            <div style="width: @(CurrentProduction * 100 / TargetProduction)%;
                        background-color: @(BarColor);
                        height:30px;
                        border-radius: 5px"></div>
        </div>
    }

    <br />

    <!-- A button to restart the simulation (reset the production value) -->
    <button type="button" class="btn btn-primary ml-2" @onclick="Restart">
        Restart Simulation
    </button>
</div>

@code {

    // Parameter to receive the target production value from the parent component
    [Parameter]
    public int TargetProduction { get; set; }

    // Parameter to receive the current production value from the parent component
    [Parameter]
    public int CurrentProduction { get; set; }

    // Parameter for setting the color of the progress bar (default is blue)
    [Parameter]
    public string BarColor { get; set; } = "blue";

    // Event callback to notify the parent component when the production is restarted
    [Parameter]
    public EventCallback<int> CurrentProductionRestarted { get; set; }

    // Method to reset the production progress
    private void Restart()
    {
        // Logs a message in the browser console using JavaScript (JSInterop)
        _ = JSRuntime.InvokeVoidAsync("console.log", "Restart command requested!");

        // Reset the current production to zero
        CurrentProduction = 0;

        // Trigger the event callback to inform the parent component
        CurrentProductionRestarted.InvokeAsync(0);
    }
}

@using Microsoft.AspNetCore.Components.Web

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <!-- Razor class library: the DLL FrameworX loads from fx-10\HTML5\BlazorControls\.
       Give your own control a new AssemblyName so it does not overwrite the
       BlazorControlExample.dll that FrameworX ships in that folder. -->
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <SupportedPlatform Include="browser" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.13" />
  </ItemGroup>

</Project>

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <Folder Include="wwwroot\images\" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\BlazorControlExample\BlazorControlExample.csproj" />
  </ItemGroup>

</Project>

using WebUIBlazor.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents().AddInteractiveServerComponents();
var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();

app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>().AddInteractiveServerRenderMode();



app.Run();

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="BlazorBootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="BlazorControlExample.css" />
    <link rel="stylesheet" href="WebUIBlazor.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
</Router>

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using WebUIBlazor
@using WebUIBlazor.Components
@using BlazorControlExample