IGP-Fan-Reference/IGP/Pages/BuildCalculator/Parts/HighlightsComponent.razor

@inject IJSRuntime jsRuntime;
@inject IEconomyService economyService
@inject IBuildOrderService buildOrderService
@inject ITimingService timingService

@implements IDisposable

<div class="highlightsContainer">
    <div>
        <div>Requested</div>

        @foreach (var ordersAtTime in buildOrderService.StartedOrders.Reverse())
        {
            foreach (var order in ordersAtTime.Value)
            {
                <div>

                    @ordersAtTime.Key | T @Interval.ToTime(ordersAtTime.Key)
                </div>
                <div>
                    @order.Info().Name
                </div>
                <br/>
            }
        }

    </div>
    <div>
        <div>Finished</div>

        @foreach (var ordersAtTime in buildOrderService.CompletedOrders.Reverse())
        {
            foreach (var order in ordersAtTime.Value)
            {
                <div>

                    @ordersAtTime.Key | T @Interval.ToTime(ordersAtTime.Key)
                </div>
                <div>
                    @order.Info().Name
                </div>
                <br/>
            }
        }
    </div>

</div>

<style>
    .highlightsContainer {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 400px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
    }
</style>

@code {

    protected override void OnInitialized()
    {
        economyService.Subscribe(StateHasChanged);
        buildOrderService.Subscribe(StateHasChanged);
    }

    void IDisposable.Dispose()
    {
        economyService.Unsubscribe(StateHasChanged);
        buildOrderService.Unsubscribe(StateHasChanged);
    }

    protected override bool ShouldRender()
    {
#if DEBUG
        jsRuntime.InvokeVoidAsync("console.time", "HighlightsComponent");
#endif

        return true;
    }

    protected override void OnAfterRender(bool firstRender)
    {
#if DEBUG
        jsRuntime.InvokeVoidAsync("console.timeEnd", "HighlightsComponent");
#endif
    }

}