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

73 lines
2.6 KiB
Plaintext
Raw Normal View History

2023-08-04 17:05:25 +02:00
@page "/gallery"
@using DataAccess.Data
@using DataAccess.Models
@inject DialogService DialogService;
@inject BildInfoData BildInfoData;
@inject WunschInfoData WunschInfoData;
2023-08-04 17:05:25 +02:00
<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;
2023-08-04 17:05:25 +02:00
}
/* Style, der angewendet wird, wenn über small-image gehovert wird. */
.small-image:hover {
transform: scale(1.1, 1.1);
z-index: 100;
2023-08-04 17:05:25 +02:00
}
</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>
2023-08-18 14:57:12 +02:00
2023-08-04 17:05:25 +02:00
@code {
IEnumerable<BildInfoModel>? _bildInfos;
2023-08-04 17:05:25 +02:00
protected override async Task OnInitializedAsync()
{
_bildInfos = await BildInfoData.GetAllBildInfosAsync();
2023-08-04 17:05:25 +02:00
await base.OnInitializedAsync();
}
async Task ShowImageDialog(BildInfoModel bildInfo)
2023-08-04 17:05:25 +02:00
{
WunschInfoModel wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
2023-08-04 17:05:25 +02:00
List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
@<div>
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
<RadzenStack Orientation="Orientation.Horizontal">
<RadzenStack Orientation="Orientation.Vertical">
<RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
</RadzenStack>
<RadzenText Text="@wunschInfo.BildBeschreibung"/>
</RadzenStack>
@foreach (var bild in bilderVomWunsch)
{
<RadzenImage class="small-image" Path="@bild.Dateiname"
Click="async () => { bildInfo = bild; DialogService.Close(); await ShowImageDialog(bild); }" />
}
</RadzenStack>
</div>,
new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
2023-08-04 17:05:25 +02:00
}
[Inject]
private IWebHostEnvironment _environment { get; set; }
}