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

151 lines
4.5 KiB
Plaintext
Raw Normal View History

2023-08-04 17:05:25 +02:00
@page "/gallery"
<RadzenDataList WrapItems="@true" AllowPaging="true" Data="@imagePaths" PageSize="20" PagerHorizontalAlign="HorizontalAlign.Left" ShowPagingSummary="true" class="image-grid">
<Template Context="imagePath">
<div class="image-grid-item">
<RadzenCard Style="width: 200px; height: 200px; padding: 0; border: none;">
<RadzenButton Click="@(args => ShowImageInfo(imagePath))">
<RadzenImage Src="@imagePath" Style="width: 100%; height: 100%; object-fit: cover;" />
</RadzenButton>
</RadzenCard>
</div>
</Template>
</RadzenDataList>
<div class="image-popup" style="@popupStyle">
<div class="image-popup-content">
<div class="image-info">
<RadzenImage Src="@selectedImage" Style="max-width: 100%; max-height: 300px; object-fit: contain;" />
<p>@infoText</p>
</div>
<div class="close-button">
<RadzenButton Text="Close" Click="CloseImageInfo" />
</div>
</div>
</div>
<style>
.image-grid {
background-color: white; /* Hintergrund der RadzenDataList weiß machen */
}
.rz-data-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-grid-item {
margin: 5px;
}
.image-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9); /* Weißer Hintergrund mit Transparenz */
z-index: 9999;
}
.image-popup-content {
display: flex;
flex-direction: row;
justify-content: space-between;
max-width: 800px;
max-height: 400px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border-radius: 5px;
background-color: white; /* Weißer Hintergrund für den Inhalt */
}
.image-info {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.close-button {
flex: 0 0 auto;
display: flex;
align-items: flex-start;
justify-content: flex-end;
}
</style>
@code {
List<string> imagePaths = new List<string>();
string selectedImage;
string infoText = "Info Text";
string popupStyle = "display: none;";
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
// Get the physical path to the folder
string folderPath = Path.Combine(_environment.WebRootPath, "generated_images");
if (Directory.Exists(folderPath))
{
// Load the image file names from the folder
var imageFiles = Directory.GetFiles(folderPath, "*.jpg");
// Get the relative paths to the images
imagePaths = imageFiles.Select(file => file.Replace(_environment.WebRootPath, "").Replace("\\", "/")).ToList();
}
}
2023-08-18 11:52:58 +02:00
private async void ShowImageInfo(string imagePath)
2023-08-04 17:05:25 +02:00
{
selectedImage = imagePath;
popupStyle = "display: block;";
2023-08-18 11:52:58 +02:00
infoText = await GetInfoTextForImageAsync(imagePath);
}
private async Task<string> GetInfoTextForImageAsync(string imagePath)
{
// Bestimme den Ordnerpfad, in dem sich die Bilder und die info_texts.txt Datei befinden
string folderPath = Path.Combine(_environment.WebRootPath, "generated_images");
// Bestimme den Pfad zur info_texts.txt Datei
string infoTextsFilePath = Path.Combine(folderPath, "info_texts.txt");
// Überprüfe, ob die Datei existiert
if (!File.Exists(infoTextsFilePath))
return $"Kein Infotext für {imagePath} gefunden.";
// Lies alle Zeilen der Datei
var lines = await File.ReadAllLinesAsync(infoTextsFilePath);
string adaptedImagePath = imagePath.Substring(1) + ":";
// Durchsuche jede Zeile nach dem gegebenen imagePath
foreach (var line in lines)
{
if (line.StartsWith(adaptedImagePath)) // Überprüft, ob die Zeile mit dem Dateinamen des Bildes beginnt
{
// Trenne den Dateinamen und den Infotext und gib den Infotext zurück
return line.Split(new[] { ':' }, 2).LastOrDefault()?.Trim();
}
}
return $"Kein Infotext für {imagePath} gefunden.";
2023-08-04 17:05:25 +02:00
}
private void CloseImageInfo()
{
popupStyle = "display: none;";
}
[Inject]
private IWebHostEnvironment _environment { get; set; }
}