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

100 lines
3.9 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 {
List<BildInfoModel>? _bildInfos;
2023-08-04 17:05:25 +02:00
protected override async Task OnInitializedAsync()
{
_bildInfos = (await BildInfoData.GetAllBildInfosAsync()).ToList();
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
int listIndex = _bildInfos.IndexOf(_bildInfos.First(info => info.Id == bildInfo.Id));
List<BildInfoModel> bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
2023-11-16 23:00:04 +01:00
async Task ButtonLeft()
{
listIndex = (listIndex != 0) ? listIndex - 1 : 0;
bildInfo = _bildInfos[listIndex];
2023-11-16 23:00:04 +01:00
wunschInfo = await WunschInfoData.GetWunschInfoAsync(bildInfo.WunschId);
bilderVomWunsch = _bildInfos!.Where(info => info.WunschId == wunschInfo.Id).ToList();
DialogService.Refresh();
}
2023-11-16 23:00:04 +01:00
async Task ButtonRight()
{
listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
bildInfo = _bildInfos[listIndex];
2023-11-16 23:00:04 +01:00
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">
2023-11-16 23:00:04 +01:00
<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>
2023-11-16 23:00:04 +01:00
<RadzenButton Click=@(async ()=> await ButtonRight()) Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%" Text=">"></RadzenButton>
</RadzenStack>
@foreach (var bild in bilderVomWunsch)
{
2023-11-16 23:00:04 +01:00
<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%" });
2023-08-04 17:05:25 +02:00
}
2023-08-04 17:05:25 +02:00
[Inject]
private IWebHostEnvironment _environment { get; set; }
}