96 lines
3.4 KiB
Plaintext
96 lines
3.4 KiB
Plaintext
@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();
|
|
|
|
void ButtonLeft()
|
|
{
|
|
listIndex = (listIndex != 0) ? listIndex - 1 : 0;
|
|
bildInfo = _bildInfos[listIndex];
|
|
DialogService.Refresh();
|
|
}
|
|
|
|
void ButtonRight()
|
|
{
|
|
listIndex = (listIndex != _bildInfos.Count - 1) ? listIndex + 1 : _bildInfos.Count - 1;
|
|
bildInfo = _bildInfos[listIndex];
|
|
DialogService.Refresh();
|
|
}
|
|
|
|
|
|
var result = await DialogService.OpenAsync(wunschInfo.Wunsch, ds =>
|
|
@<div>
|
|
<RadzenStack Orientation="Orientation.Horizontal" Wrap="FlexWrap.Wrap">
|
|
<RadzenStack Orientation="Orientation.Horizontal">
|
|
<RadzenButton Click="ButtonLeft" Disabled="(listIndex == 0)" Style="border-radius: 0%"> </RadzenButton>
|
|
<div>
|
|
<RadzenStack Orientation="Orientation.Vertical">
|
|
<RadzenImage Style="width: 400px; height: 400px;" Path="@bildInfo.Dateiname" />
|
|
</RadzenStack>
|
|
<RadzenText Text="@wunschInfo.BildBeschreibung" />
|
|
</div>
|
|
<RadzenButton Click="ButtonRight" Disabled="(listIndex == _bildInfos.Count - 1)" Style="border-radius: 0%"> </RadzenButton>
|
|
</RadzenStack>
|
|
@foreach (var bild in bilderVomWunsch)
|
|
{
|
|
<RadzenImage class="small-image" Path="@bild.Dateiname"
|
|
Click="() => { bildInfo = bild; DialogService.Refresh(); }" />
|
|
}
|
|
</RadzenStack>
|
|
</div>
|
|
,
|
|
new DialogOptions() { CloseDialogOnOverlayClick = true, Width = "50%" });
|
|
}
|
|
|
|
|
|
[Inject]
|
|
private IWebHostEnvironment _environment { get; set; }
|
|
}
|