mapo-core/MP-TAB-SERV/Components/MachineBlock.razor

@if (isLoading)
{
    <div class="card text-white mapBlock shadow bg-secondary p-0 m-0">
        <div class="card-body">
            <div class="placeholder-glow">
                <span class="placeholder col-7"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-4"></span>
                <span class="placeholder col-7"></span>
            </div>
        </div>
    </div>
}
else
{
    @if (RecMSE == null)
    {
        <div class="card text-white mapBlock shadow bg-secondary p-0 m-0">
            <div class="card-body">
                <div class="alert alert-info w-100 fs-3">No data</div>
                <div class="placeholder-glow">
                    <span class="placeholder col-7"></span>
                    <span class="placeholder col-4"></span>
                    <span class="placeholder col-4"></span>
                    <span class="placeholder col-7"></span>
                </div>
            </div>
        </div>
    }
    else
    {
        @if (FullMode)
        {
            if (Width > 640)
            {
                <div class="card shadow rounded rounded-4 border-secondary" @onclick="ShowDetail">
                    <img src="@ImgUrlMacc(RecMSE.Url)" class="card-img-top imgFitToSize" alt="@RecMSE.CodMacchina">
                    <div class="bg-black">
                        <div class="card-img-overlay p-0 d-flex flex-row-reverse align-items-start rCTop">
                            <div class="labelTopDx px-2 w-100">
                                <div class="text-center fs-2 fw-bold">
                                    @RecMSE.Nome
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-1">
                        <div class="@RecMSE.Semaforo borderStd p-1">
                            <div class="d-flex justify-content-center fs-5">
                                <span><b>@RecMSE.DescrizioneStato</b>: &nbsp; @(FormatDurata(RecMSE.Durata))</span>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <div class="col-4">
                                <EgwCoreLib.Razor.CircleGaugeMulti Titolo="@($"{currMaxVal}")" Testo="#pz rich" maxVal="@currMaxVal" ListInner="@innerCircleVals" ListOuter="@outerCircleVals" ShowCircleBtn="true"></EgwCoreLib.Razor.CircleGaugeMulti>
                            </div>
                            <div class="col-8" style="line-height: 1.6rem;">
                                <div class="d-flex justify-content-around">
                                    <div class="text-center text-success d-flex justify-content-between">
                                        <div>
                                            <i class="fa-regular fa-circle-check"></i>&nbsp; @($" {RecMSE.PezziConf}") &nbsp;
                                        </div>
                                        <div class="text-danger">
                                            + &nbsp;
                                            @if (datiProdAct != null)
                                            {
                                                @($" {datiProdAct.PzConfScarto}")
                                            }
                                        </div>
                                    </div>
                                    <div class="text-center text-warning ">
                                        <div>
                                            <i class="fa-solid fa-layer-group"></i>&nbsp; @($" {RecMSE.PezziProd}")
                                        </div>
                                    </div>
                                </div>
                                <div class="text-center text-light d-flex justify-content-between">
                                    <div class="col-4"><span>ART:</span></div>
                                    <div class="col-8">@($"{RecMSE.CodArticolo}")</div>
                                </div>
                                <div class="text-center text-light d-flex justify-content-between small lh-sm">
                                    <div class="col-4">ODL:</div>
                                    <div class="col-8">@($"ODL{RecMSE.IdxOdl:00000000}")</div>
                                </div>
                                <div class="text-center text-light d-flex justify-content-between small lh-sm">
                                    <div class="col-4">PODL:</div>
                                    <div class="col-8">@($"PODL{RecMSE.IdxPOdl:00000000}")</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            }
            else
            {

                <div class="cardObj shadow" @onclick="ShowDetail">
                    <div class="card-body p-0">
                        <div class="@RecMSE.Semaforo borderStd p-1 text-center">
                            <div class="fs-5" style="line-height: 1.8rem;">
                                <b>@RecMSE.Nome</b>
                                <br />
                                <b>@RecMSE.DescrizioneStato</b>: &nbsp; @(FormatDurata(RecMSE.Durata))
                            </div>
                        </div>
                        @if (showCard)
                        {
                            <div class="d-flex justify-content-between w-100" style="height: 100px; width: 100px;">
                                <div class="col-6">
                                    <EgwCoreLib.Razor.CircleGaugeMulti Titolo="@($"{currMaxVal}")" Testo="#pz prod" maxVal="@currMaxVal" ListInner="@innerCircleVals" ListOuter="@outerCircleVals" ShowCircleBtn="true"></EgwCoreLib.Razor.CircleGaugeMulti>
                                </div>
                                <div style="font-size: 1rem" class="me-3 col-6">
                                    <div class="text-center text-success d-flex justify-content-between pe-2">
                                        <div class="col-4"><i class="fa-regular fa-circle-check"></i></div>
                                        <div class="col-8 d-flex justify-content-between">
                                            <div>
                                                @($"{RecMSE.PezziConf}")
                                            </div>
                                            <div class="text-danger">
                                                + &nbsp;
                                                @if (datiProdAct != null)
                                                {
                                                    @($" {datiProdAct.PzConfScarto}")
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-center text-warning d-flex justify-content-between">
                                        <div class="col-4"><i class="fa-solid fa-layer-group"></i></div>
                                        <div class="col-8">@($"{RecMSE.PezziProd}")</div>
                                    </div>
                                    <div class="text-center text-light d-flex justify-content-between">
                                        <div class="col-4"><span>ART.</span></div>
                                        <div class="col-8">@RecMSE.CodArticolo</div>
                                    </div>
                                    <div class="text-center text-light d-flex justify-content-between small">
                                        <div class="col-4">ORD.</div>
                                        <div class="col-8">@($"ODL{RecMSE.IdxOdl:00000000}")</div>
                                    </div>
                                </div>
                            </div>
                        }
                    </div>
                </div>
            }
        }
        else
        {

            <div class="cardObj px-3 py-1">
                <div class="text-center d-flex justify-content-between ">
                    <div class="col-4">
                        <div class="py-2">
                            <h4 class="text-start mb-0 fw-bold">
                                @RecMSE.Nome
                            </h4>
                        </div>
                        <div style="font-size: 1rem" class="me-3">
                            <div class="text-end text-success d-flex justify-content-between">
                                <div class="col-4"><i class="fa-regular fa-circle-check"></i></div>
                                <div class="col-8 d-flex justify-content-between">
                                    <div>
                                        @($"{RecMSE.PezziConf}")
                                    </div>
                                    <div class="text-danger">
                                        + &nbsp;
                                        @if (datiProdAct != null)
                                        {
                                            @($" {datiProdAct.PzConfScarto}")
                                        }
                                    </div>
                                </div>
                            </div>
                            <div class="text-end text-warning d-flex justify-content-between">
                                <div class="col-4"><i class="fa-solid fa-layer-group"></i></div>
                                <div class="col-8">@($"{RecMSE.PezziProd}")</div>
                            </div>
                            <div class="text-end text-primary d-flex justify-content-between">
                                <div class="col-4"><i class="fa-brands fa-stack-overflow"></i></div>
                                <div class="col-8">@($"{RecMSE.extraVal}")</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-4" style="max-height: 8rem; max-width: 8rem;">
                        <EgwCoreLib.Razor.CircleGaugeMulti Titolo="@($"{currMaxVal}")" Testo="#pz prod" maxVal="@currMaxVal" ListInner="@innerCircleVals" ListOuter="@outerCircleVals" ShowCircleBtn="true"></EgwCoreLib.Razor.CircleGaugeMulti>
                    </div>
                    <div class="col-4 d-flex flex-wrap justify-content-center align-items-center " style="line-height: 1.6rem;">

                        <div>
                            <div class="text-light d-flex justify-content-between small lh-sm">
                                <div class="text-start col-4">ART:</div>
                                <div class="text-end col-8">@($"{RecMSE.CodArticolo}")</div>
                            </div>
                            <div class="text-end text-light d-flex justify-content-between small lh-sm">
                                <div class="text-start col-4">ODL:</div>
                                <div class="text-end col-8">@($"ODL{RecMSE.IdxOdl:00000000}")</div>
                            </div>
                            <div class="text-end text-light d-flex justify-content-between small lh-sm">
                                <div class="text-start col-4">PODL:</div>
                                <div class="text-end col-8">@($"PODL{RecMSE.IdxPOdl:00000000}")</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <div class="col-10 mb-2 px-2 py-1 @RecMSE.Semaforo statusCard">
                        <div class="d-flex justify-content-center ">
                            <div class="p-0 mr-auto me-1">
                                <b>@RecMSE.DescrizioneStato</b> :
                            </div>
                            <div class="p-0">
                                @(FormatDurata(RecMSE.Durata))
                            </div>
                        </div>
                    </div>
                    <div class="col-2">
                        <div class="px-1 w-100">
                            <button class="btn btn-sm btn-secondary w-100"><i class="fa-regular fa-file-pdf"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        }

    }
}