From 134b1127acb58fb7731bd33131f7ebec6c2a68c0 Mon Sep 17 00:00:00 2001
From: masterElmar <masterelmar@users.noreply.github.com>
Date: Sun, 31 Mar 2024 15:43:43 +0200
Subject: [PATCH] updated admin panel

---
 .gitignore                  |   2 +-
 pb_public/admin/manage.html | 247 ++++++++++++++++++++++++++++++++++++
 pb_public/admin/upload.html |   9 +-
 3 files changed, 251 insertions(+), 7 deletions(-)
 create mode 100644 pb_public/admin/manage.html
diff --git a/.gitignore b/.gitignore
index 3124447..010db40 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,4 +5,4 @@
 *.mp4
 *.png
 /pb_data/storage/
-/pb_data/
+/pb_data/storage/**
\ No newline at end of file
diff --git a/pb_public/admin/manage.html b/pb_public/admin/manage.html
new file mode 100644
index 0000000..5751898
--- /dev/null
+++ b/pb_public/admin/manage.html
@@ -0,0 +1,247 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <title>Medien verwalten</title>
+
+    <!-- Bootstrap core CSS -->
+    <link href="../css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../css/icons/bootstrap-icons.css">
+    <script src="../js/bootstrap.bundle.min.js"></script>
+
+</head>
+
+<body>
+<div class="card border-0">
+    <div class="card-body">
+        <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-3">
+            <div class="container-fluid">
+                <a class="navbar-brand">DBR</a>
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link" href="upload.html">Medien hinzufügen</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="manage.html">Datein verwalten</a>
+                        </li>
+                    </ul>
+                    <div class="d-flex">
+                        <ul class="navbar-nav ml-auto">
+                            <li class="nav-item">
+                                <a class="nav-link" href="logout.php">Ausloggen <i
+                                        class="bi-box-arrow-right text-light"></i></a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </nav>
+    </div>
+</div>
+
+<div class="card border-0">
+    <div class="card-body">
+        <div class="container d-grid gap-3">
+            <div class="p-2 bg-light border">
+                <h3>Medien verwalten</h3>
+                <!-- Delete All Selected Button -->
+                <button type="button" class="btn btn-danger" onclick="deleteAllSelected()">Delete All Selected</button>
+                <table class="table">
+                    <thead>
+                    <tr>
+                        <th scope="col">Auswahl
+                            <input type="checkbox" id="selectAll" onclick="selectAll()">
+                        </th>
+                        <th scope="col">Preview</th>
+                        <th scope="col">Dateiname</th>
+                        <th scope="col">Gruppe</th>
+                        <th scope="col">Dauer (ms)</th>
+                        <th scope="col">Aktionen</th>
+                    </tr>
+                    </thead>
+                    <tbody id="mediaList">
+                    <!-- Media files will be listed here dynamically -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="../js/jquery-1.11.0.js"></script>
+<script>
+
+    // define mediaData array of mediaData Objects
+    let mediaData = [];
+
+    // fetch mediaData from http://127.0.0.1:8090/api/collections/media/records/ with GET method
+    function fetchMediaData() {
+        fetch("http://127.0.0.1:8090/api/collections/media/records/", {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => response.json())
+            .then((data) => {
+                mediaData.push(...data.items);
+                populateMediaList();
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+                showToast("Error fetching media data");
+            });
+    }
+    fetchMediaData();
+
+    console.log(mediaData);
+
+    // Function to populate media list
+    function populateMediaList() {
+        const mediaList = document.getElementById("mediaList");
+        mediaList.innerHTML = "";
+
+        mediaData.forEach((media) => {
+            const row = document.createElement("tr");
+            row.innerHTML = `
+                <td>
+                    <input type="checkbox" id="${media.id}">
+                </td>
+                <td>
+                    <a href="http://127.0.0.1:8090/api/files/${media.collectionId}/${media.id}/${media.media}">
+                        <img src="http://127.0.0.1:8090/api/files/${media.collectionId}/${media.id}/${media.media}?thumb=100x100" alt="Preview" style="width: 100px; height: 100px;">
+                    </a>
+                </td>
+                <td>${media.media}</td>
+                <td>${media.group}</td>
+                <td>
+                    <input type="number" id="${media.id}" name="duration" max="10000000" min="2000" value="${media.duration}">
+                </td>
+                <td>
+                    <button type="button" class="btn btn-danger" onclick="deleteMedia('${media.id}')">Delete</button>
+                    <button type="button" class="btn btn-primary" onclick="updateDuration('${media.id}')">Update Duration</button>
+                </td>
+            `;
+            mediaList.appendChild(row);
+        });
+    }
+
+    // Function to delete media
+    function deleteMedia(mediaId) {
+        // Implement deletion logic here (e.g., make API call)
+        // After successful deletion, update the mediaData array and refresh the media list
+        // delete media from http://127.0.0.1:8090/api/collections/media/records/{id} with DELETE method
+        // check for response 204 and remove media from mediaData array
+        fetch(`http://127.0.0.1:8090/api/collections/media/records/`+ mediaId, {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        })
+            .then((response) => {
+                if (response.status === 204) {
+                    mediaData = mediaData.filter((media) => media.id !== mediaId);
+                    populateMediaList();
+                    showToast("Datei erfolgreich gelöscht");
+                }
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+                showToast("Fehler beim Löschen des Eintrags");
+            });
+
+        populateMediaList();
+    }
+
+    // Function to update duration
+    function updateDuration(index) {
+        // get input with id of index and name of duration
+        let durationInputs = document.getElementsByName("duration");
+        // find the input with the id of index
+        let durationInput = Array.from(durationInputs).find(input => input.id === index.toString());
+        // PATCH request to update the duration of the media file /api/collections/media/records/:id
+        fetch(`http://127.0.0.1:8090/api/collections/media/records/`+ index, {
+            method: "PATCH",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                duration: durationInput.value,
+            }),
+        })
+            .then((response) => {
+                if (response.status === 200) {
+                    // Update the duration in the mediaData array from the response data
+                    response.json().then((data) => {
+                        const updatedMedia = mediaData.find((media) => media.id === index);
+                        updatedMedia.duration = data.duration;
+                        showToast("Dauer aktualisiert " + data.duration + "ms");
+                    });
+                }
+            })
+            .catch((error) => {
+                console.error("Error:", error);
+                showToast("Fehler beim Aktualisieren der Dauer");
+            });
+    }
+
+    function showToast(message) {
+        const toast = document.createElement("div");
+        toast.className = "toast";
+        toast.style.position = "fixed"; // Set position to fixed
+        toast.style.bottom = "20px"; // Set bottom spacing
+        toast.style.left = "50%"; // Center horizontally
+        toast.style.transform = "translateX(-50%)"; // Center horizontally
+        toast.innerHTML = `
+            <div class="toast-header">
+                <strong class="me-auto">Info</strong>
+                <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
+            </div>
+            <div class="toast-body">
+                ${message}
+            </div>
+        `;
+        document.body.appendChild(toast);
+        new bootstrap.Toast(toast).show();
+    }
+
+    // Initial population of media list
+    populateMediaList();
+
+    // Function to handle delete all selected
+    function deleteAllSelected() {
+        const checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
+        const selectedIds = Array.from(checkedCheckboxes).map(checkbox => checkbox.id);
+        if (selectedIds.length === 0) {
+            showToast("Keine Elemente ausgewählt");
+            return;
+        }
+
+        if (confirm("Bist du dir sicher die ausgewählten Elemente zu löschen?")) {
+            selectedIds.forEach(id => {
+                deleteMedia(id);
+            });
+        }
+    }
+
+    function selectAll() {
+        const selectAllCheckbox = document.getElementById("selectAll");
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        checkboxes.forEach(checkbox => {
+            checkbox.checked = selectAllCheckbox.checked;
+        });
+    }
+
+</script>
+</body>
+</html>
diff --git a/pb_public/admin/upload.html b/pb_public/admin/upload.html
index 61b4f7e..0e303b5 100644
--- a/pb_public/admin/upload.html
+++ b/pb_public/admin/upload.html
@@ -23,7 +23,7 @@
     <div class="card-body">
         <nav class="navbar navbar-expand-lg navbar-dark bg-dark rounded-3">
             <div class="container-fluid">
-                <a class="navbar-brand" href="dashboard.php">DBR</a>
+                <a class="navbar-brand">DBR</a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                         data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
@@ -32,13 +32,10 @@
                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                         <li class="nav-item">
-                            <a class="nav-link active" aria-current="page" href="dashboard.php">Home</a>
+                            <a class="nav-link" href="upload.html">Medien hinzufügen</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link" href="addSlider.php">Medien hinzufügen</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link" href="listSlider.php">Datein verwalten</a>
+                            <a class="nav-link" href="manage.html">Datein verwalten</a>
                         </li>
                     </ul>
                     <div class="d-flex">
