RackPeek/Shared.Rcl/Connections/PortGroupVisualizer.razor

@using RackPeek.Domain.Persistence
@using RackPeek.Domain.Resources.Connections
@using RackPeek.Domain.Resources.SubResources
@inject IResourceCollection Repository

@if (PortGroup is not null && !string.IsNullOrWhiteSpace(ResourceName))
{
    <div class="flex flex-wrap">

        @for (var i = 0; i < PortGroup.Count; i++)
        {
            var index = i;

            var port = new PortReference
            {
                Resource = ResourceName,
                PortGroup = PortGroupIndex,
                PortIndex = index
            };

            var conn = GetConnection(port);
            var selected = SelectedPortIndex == index;
            
            <button type="button"
                    data-testid="@($"{BaseTestId}-port-{index}")"
                    title="@GetTooltip(conn, port)"
                    class="group flex flex-col items-center w-6 leading-none"
                    @onclick="() => SelectPort(index, port)">
                
                <div class="w-6 h-3 flex items-center justify-center
                            shadow-inner
                            border-t border-b border-r
                            @(index == 0 ? "border-l" : "")
                            @(selected
                                ? "bg-emerald-500 border-emerald-400"
                                : conn != null
                                    ? "bg-blue-600 border-blue-500"
                                    : "bg-zinc-800 border-zinc-700 group-hover:bg-zinc-700")">

                    <div class="w-2 h-[1.5px]
                                @(selected
                                    ? "bg-black"
                                    : conn != null
                                        ? "bg-blue-200"
                                        : "bg-zinc-600")">
                    </div>

                </div>

                <div class="text-[8px] text-zinc-500 mt-[1px]">
                    @(index + 1)
                </div>

            </button>
        }

    </div>
}

@code {

    [Parameter] public string ResourceName { get; set; } = "";
    [Parameter] public int PortGroupIndex { get; set; }
    [Parameter] public Port? PortGroup { get; set; }
    [Parameter] public string? TestIdPrefix { get; set; }

    [Parameter] public int? SelectedPortIndex { get; set; }
    [Parameter] public EventCallback<int?> SelectedPortIndexChanged { get; set; }

    [Parameter] public EventCallback<PortReference> OnPortClicked { get; set; }

    private List<Connection> _connections = new();
    private string BaseTestId =>
        string.IsNullOrWhiteSpace(TestIdPrefix)
            ? "port-visualizer"
            : TestIdPrefix;
    
    protected override async Task OnParametersSetAsync()
    {
        _connections = (await Repository.GetConnectionsAsync()).ToList();
    }

    async Task SelectPort(int index, PortReference port)
    {
        if (SelectedPortIndexChanged.HasDelegate)
            await SelectedPortIndexChanged.InvokeAsync(index);

        if (OnPortClicked.HasDelegate)
            await OnPortClicked.InvokeAsync(port);
    }

    Connection? GetConnection(PortReference port)
    {
        return _connections.FirstOrDefault(c =>
            (c.A.Resource == port.Resource &&
             c.A.PortGroup == port.PortGroup &&
             c.A.PortIndex == port.PortIndex)
            ||
            (c.B.Resource == port.Resource &&
             c.B.PortGroup == port.PortGroup &&
             c.B.PortIndex == port.PortIndex));
    }

    string GetTooltip(Connection? conn, PortReference port)
    {
        if (conn == null)
            return "Available";

        var other =
            conn.A.Resource == port.Resource &&
            conn.A.PortGroup == port.PortGroup &&
            conn.A.PortIndex == port.PortIndex
                ? conn.B
                : conn.A;

        return $"{other.Resource} (port {other.PortIndex + 1})";
    }

}