awo-hamburg-intranet/module/knowledgecenter_update/Views/post_cardform_files.php

<div class="titlebar_small">
    <h2><?= $translation->get("files") ?></h2>
    <?php if (get_permission_state('r-wiki', $GLOBALS['main_contact']['master_mandant_id'], $GLOBALS['main_contact']['id']) == 1) { ?>
        <div class="post-action-btn-small green openFileGalleryMulti" title="Datei hinzufügen"
            data-ajax-function="saveFilesAjax" data-target="post_files">+
        </div>
    <?php } ?>
    <div class="post-action-btn green" id="saveFilesBtn" style="display:none;"><?= $saveIcon ?></div>
</div>
<hr>
<form id="postSettingsForm">
    <input type="hidden" id="post_id" name="post_id" value="<?php echo $postId; ?>">
    <input type="hidden" id="post_files" name="post_files">
</form>

<div id="filesDisplayContainer"></div>

<script>

    var fileIcons = {
        pdf: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-file-earmark-pdf" viewBox="0 0 16 16"> <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/> <path d="M4.603 14.087a.8.8 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.7 7.7 0 0 1 1.482-.645 20 20 0 0 0 1.062-2.227 7.3 7.3 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.188-.012.396-.047.614-.084.51-.27 1.134-.52 1.794a11 11 0 0 0 .98 1.686 5.8 5.8 0 0 1 1.334.05c.364.066.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.86.86 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.7 5.7 0 0 1-.911-.95 11.7 11.7 0 0 0-1.997.406 11.3 11.3 0 0 1-1.02 1.51c-.292.35-.609.656-.927.787a.8.8 0 0 1-.58.029m1.379-1.901q-.25.115-.459.238c-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361q.016.032.026.044l.035-.012c.137-.056.355-.235.635-.572a8 8 0 0 0 .45-.606m1.64-1.33a13 13 0 0 1 1.01-.193 12 12 0 0 1-.51-.858 21 21 0 0 1-.5 1.05zm2.446.45q.226.245.435.41c.24.19.407.253.498.256a.1.1 0 0 0 .07-.015.3.3 0 0 0 .094-.125.44.44 0 0 0 .059-.2.1.1 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a4 4 0 0 0-.612-.053zM8.078 7.8a7 7 0 0 0 .2-.828q.046-.282.038-.465a.6.6 0 0 0-.032-.198.5.5 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822q.036.167.09.346z"/> </svg>',
        image: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="green" class="bi bi-file-earmark-image" viewBox="0 0 16 16"> <path d="M6.502 7a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/> <path d="M14 14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zM4 1a1 1 0 0 0-1 1v10l2.224-2.224a.5.5 0 0 1 .61-.075L8 11l2.157-3.02a.5.5 0 0 1 .76-.063L13 10V4.5h-2A1.5 1.5 0 0 1 9.5 3V1z"/> </svg>',
        doc: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="blue" class="bi bi-file-earmark-word" viewBox="0 0 16 16"> <path d="M5.485 6.879a.5.5 0 1 0-.97.242l1.5 6a.5.5 0 0 0 .967.01L8 9.402l1.018 3.73a.5.5 0 0 0 .967-.01l1.5-6a.5.5 0 0 0-.97-.242l-1.036 4.144-.997-3.655a.5.5 0 0 0-.964 0l-.997 3.655L5.485 6.88z"/> <path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z"/> </svg>',
        default: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16"> <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/> <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/> </svg>'
    };

    $("#saveFilesBtn").click(function () {
        $.ajax({
            type: "POST",
            url: "/module/knowledgecenter_update/Ajax/Ajax.php",
            data: {
                action: 'save_post_files',
                post_id: $('#post_id').val(),
                post_files: $('#post_files').val()
            },
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    // console.log("Dateien erfolgreich gespeichert.");
                    location.reload(); // Seite neu laden, um die Änderungen anzuzeigen
                } else {
                    console.error("Fehler beim Speichern der Dateien:", response.error);
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX Fehler:", error);
            }
        });
    });
    window.saveFilesAjax = function () {
        $.ajax({
            type: "POST",
            url: "/module/knowledgecenter_update/Ajax/Ajax.php",
            data: {
                action: 'save_post_files',
                post_id: $('#post_id').val(),
                post_files: $('#post_files').val()
            },
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    console.log("Dateien erfolgreich gespeichert.");
                    location.reload();
                } else {
                    console.error("Fehler beim Speichern der Dateien:", response.error);
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX Fehler:", error);
            }
        });
    }

    function updateFileDisplayFromServer() {
        $.ajax({
            type: "POST",
            url: "/module/knowledgecenter_update/Ajax/Ajax.php",
            data: {
                action: 'get_post_files',
                post_id: $('#post_id').val()
            },
            dataType: "json",
            success: function (response) {
                if (response.success) {
                    var html = "";
                    // Definiere Listen für die verschiedenen Dateitypen
                    var imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
                    var pdfExtensions = ['pdf'];
                    var downloadableExtensions = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];

                    response.files.forEach(function (file, index) {
                        // Ermitteln der Dateiendung (in Kleinbuchstaben)
                        var fileExt = file.path.split('.').pop().toLowerCase();

                        // Falls keine Endung im Pfad enthalten ist, die Endung anhand der Beschreibung ermitteln:
                        if (file.path.indexOf('.') === -1 && file.description.indexOf('.') !== -1) {
                            fileExt = file.description.split('.').pop().toLowerCase();
                        }
                        index = index + 1; // Beginne bei 1

                        // Bestimme den passenden Icon-Code, basierend auf der Dateiendung
                        var icon;
                        if (fileExt === 'pdf') {
                            icon = fileIcons.pdf;
                        } else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].indexOf(fileExt) !== -1) {
                            icon = fileIcons.image;
                        } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].indexOf(fileExt) !== -1) {
                            icon = fileIcons.doc;
                        } else {
                            icon = fileIcons.default;
                        }

                        // Definiere den Lösch-Button
                        <?php if (get_permission_state('r-wiki', $GLOBALS['main_contact']['master_mandant_id'], $GLOBALS['main_contact']['id']) == 1) { ?>
                            var deleteButton = "<span class='file-delete post-action-btn-small' data-file-id='" + file.id + "' onclick='deleteFile(" + file.id + ")'>✕</span>";
                        <?php } else {
                            ?>
                            var deleteButton = "";
                            <?php
                        } ?>
                        // Erzeugen des HTML abhängig vom Dateityp
                        var htmlSegment = "<div class='fileItem'>" + icon + " ";

                        if (fileExt === 'pdf') {
                            var embedId = "embed_" + index;
                            htmlSegment += "<a href='#" + embedId + "' data-fslightbox='gallery' data-type='inline'>" + file.description + "</a>";
                            htmlSegment += deleteButton + "</div>";
                            htmlSegment += "<object id='" + embedId + "' data='" + file.path + "' type='application/pdf' width='100%' height='900px'></object>";
                        }
                        else if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'].indexOf(fileExt) !== -1) {
                            htmlSegment += "<a href='" + file.path + "' data-fslightbox='gallery'>" + file.description + "</a>" + deleteButton + "</div>";
                        }
                        else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].indexOf(fileExt) !== -1) {
                            htmlSegment += "<a href='" + file.path + "' download>" + file.description + "</a>" + deleteButton + "</div>";
                        }
                        else {
                            htmlSegment += "<a href='" + file.path + "' download>" + file.description + "</a>" + deleteButton + "</div>";
                        }

                        htmlSegment += "<hr>";
                        html += htmlSegment;
                    });


                    $("#filesDisplayContainer").html(html);

                    refreshFsLightbox();

                } else {
                    console.error("Fehler beim Abrufen der Dateien:", response.error);
                }
            },
            error: function (xhr, status, error) {
                console.error("AJAX Fehler beim Abrufen der Dateien:", error);
            }
        });
    }

    function deleteFile(fileId) {
        if (confirm("Möchten Sie diese Datei wirklich löschen?")) {
            $.ajax({
                type: "POST",
                url: "/module/knowledgecenter_update/Ajax/Ajax.php",
                data: {
                    action: 'delete_post_file',
                    file_id: fileId
                },
                dataType: "json",
                success: function (response) {
                    if (response.success) {
                        updateFileDisplayFromServer();
                    } else {
                        console.error("Fehler beim Löschen der Datei:", response.error);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("AJAX Fehler:", error);
                }
            });
        }
    }


    // Dateien direkt beim Laden der Seite abrufen
    updateFileDisplayFromServer();
</script>