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

@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();
        }
    }

    private async void ShowImageInfo(string imagePath)
    {
        selectedImage = imagePath;
        popupStyle = "display: block;";
        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.";
    }

    private void CloseImageInfo()
    {
        popupStyle = "display: none;";
    }

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