KI-Kunst-Kirsten-Kloeckner/KIKunstKirstenKlöckner/Pages/Gallery.razor

@page "/gallery"

@using DataAccess.Data
@using DataAccess.Models

@inject DialogService DialogService;
@inject BildInfoData BildInfoData;
@inject WunschInfoData WunschInfoData;

<style>
    .small-image {
        width: 10em;
        height: 10em;
        z-index: auto;
        margin: 0.5em;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        border-radius: 1em;
        /* Gibt an, dass Änderungen an der transform-Eigenschaft innerhalb von 0.2s angewandt werden.*/
        transition: transform 0.2s;
    }

    /* Style, der angewendet wird, wenn über small-image gehovert wird. */
    .small-image:hover {
        transform: scale(1.1, 1.1);
        z-index: 100;
    }
</style>

<RadzenDataList WrapItems="@true" AllowPaging="true" PageSize="40" Data="@_bildInfos" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true">
    <Template Context="bildInfo">
        <RadzenImage class="small-image" Src="@bildInfo.Dateiname" Click="@(args => ShowImageDialog(bildInfo))" />
    </Template>
</RadzenDataList>

@code {
    List<BildInfoModel>? _bildInfos;

    protected override async Task OnInitializedAsync()
    {
        _bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();

        await base.OnInitializedAsync();
    }

    async Task ShowImageDialog(BildInfoModel bildInfo)
    {
        WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);

        int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));

        List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();

        async Task ButtonLeft()
        {
            listIndex = (listIndex != 0) ? listIndex - 1 : 0;
            bildInfo = _bildInfos[listIndex];
            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
            DialogService.Refresh();
        }

        async Task ButtonRight()
        {
            listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
            bildInfo = _bildInfos[listIndex];
            wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
            bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
            DialogService.Refresh();
        }


        var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
        @<div>
                <RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
                    <RadzenStack Orientation="Orientation.Horizontal">
                        <RadzenButton Click=@(async ()=> await ButtonLeft()) Disabled="(listIndex == 0)" Style="border-radius: 0%" Text="<"></RadzenButton>
                        <div>
                            <RadzenStack Orientation="Orientation.Vertical">
                                <RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
                            </RadzenStack>
                            <RadzenText Text="@wunschInfo.BildBeschreibung" />
                        </div>
                        <RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
                    </RadzenStack>
                    @foreach (var bild in bilderVomWunsch)
                    {
                        <RadzenImage class="small-image" Path="@bild.Dateiname"
                             Click="() => { bildInfo = bild; listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id)); DialogService.Refresh(); }" />
                    }
                </RadzenStack>
            </div>
    , 
            new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
    }


    [Inject]
    private IWebHostEnvironment _environment { get; set; }
}