From cf09e88a5b21d5b8545d6debfe03cf3ca93e31bc Mon Sep 17 00:00:00 2001
From: patrickzerhusen <patrick.zerhusen@endex-geodaten.de>
Date: Tue, 16 Jun 2026 16:06:25 +0200
Subject: [PATCH] custom edit and create modals

---
 public/admin.php   |  68 +++++++++++
 public/js/admin.js | 286 ++++++++++++++++++++-------------------------
 2 files changed, 194 insertions(+), 160 deletions(-)

diff --git a/public/admin.php b/public/admin.php
index 37ea501..56c9be1 100644
--- a/public/admin.php
+++ b/public/admin.php
@@ -538,6 +538,74 @@ $counts['total'] = count($all_contributions);
 
     </div>
 
+    
+    <!-- ============================================================= -->
+    <!-- Edit Contribution Modal (Admin)                               -->
+    <!-- ============================================================= -->
+    <div id="admin-edit-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Beitrag bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-edit-title">Titel</label>
+                <input type="text" id="admin-edit-title" class="form-input">
+            </div>
+            <div class="form-group">
+                <label for="admin-edit-description">Beschreibung</label>
+                <textarea id="admin-edit-description" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-edit-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-edit-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminEdit()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Edit Comment Modal (Admin)                                    -->
+    <!-- ============================================================= -->
+    <div id="admin-comment-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2><i class="fa-solid fa-pen"></i> Kommentar bearbeiten</h2>
+            <div class="form-group">
+                <label for="admin-comment-content">Inhalt</label>
+                <textarea id="admin-comment-content" class="form-input" rows="4"></textarea>
+            </div>
+            <input type="hidden" id="admin-comment-id">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-comment-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminComment()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- ============================================================= -->
+    <!-- Create/Edit News Modal (Admin)                                -->
+    <!-- ============================================================= -->
+    <div id="admin-news-modal" class="modal-overlay" style="display:none;">
+        <div class="modal-content">
+            <h2 id="admin-news-modal-title"><i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen</h2>
+            <div class="form-group">
+                <label for="admin-news-title">Titel</label>
+                <input type="text" id="admin-news-title" class="form-input" placeholder="Titel der Neuigkeit">
+            </div>
+            <div class="form-group">
+                <label for="admin-news-content">Inhalt</label>
+                <textarea id="admin-news-content" class="form-input" rows="4" placeholder="Neuigkeit verfassen..."></textarea>
+            </div>
+            <div class="form-group">
+                <label for="admin-news-author">Autor</label>
+                <input type="text" id="admin-news-author" class="form-input" value="Stadtverwaltung">
+            </div>
+            <input type="hidden" id="admin-news-id">
+            <input type="hidden" id="admin-news-mode">
+            <div class="modal-actions">
+                <button class="btn btn-secondary" onclick="closeAdminModal('admin-news-modal')">Abbrechen</button>
+                <button class="btn btn-primary" onclick="submitAdminNews()">Speichern</button>
+            </div>
+        </div>
+    </div>
+
 
     <!-- ============================================================= -->
     <!-- Loads JavaScript Dependencies                                 -->
diff --git a/public/js/admin.js b/public/js/admin.js
index bc7f08a..beb3925 100644
--- a/public/js/admin.js
+++ b/public/js/admin.js
@@ -319,6 +319,22 @@ function escapeHtml(text) {
     return div.innerHTML;
 }
 
+
+// Closes Admin Modals by ID
+function closeAdminModal(modalId) {
+    document.getElementById(modalId).style.display = 'none';
+}
+
+// Closes Admin Modals on Escape Key
+document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+        document.querySelectorAll('.modal-overlay').forEach(function (modal) {
+            modal.style.display = 'none';
+        });
+    }
+});
+
+
 // =====================================================================
 // Block 9: CRUD Operations for Contributions
 // =====================================================================
@@ -354,45 +370,36 @@ function changeStatus(contributionId, newStatus) {
 
 // UPDATE: Edits existing Contributions
 function editContribution(contributionId, currentTitle, currentDescription) {
-    Swal.fire({
-        title: 'Beitrag bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-title" class="swal2-input" value="' + escapeHtml(currentTitle) + '">' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Beschreibung</label>' +
-                    '<textarea id="swal-description" class="swal2-textarea">' + escapeHtml(currentDescription) + '</textarea>' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return {
-                title: document.getElementById('swal-title').value.trim(),
-                description: document.getElementById('swal-description').value.trim()
-            };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-edit-id').value = contributionId;
+    document.getElementById('admin-edit-title').value = currentTitle;
+    document.getElementById('admin-edit-description').value = currentDescription;
+    document.getElementById('admin-edit-modal').style.display = 'flex';
+}
 
-        apiCall({
-            action: 'update',
-            contribution_id: contributionId,
-            title: result.value.title,
-            description: result.value.description
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+// Submits Edit from Custom Modal
+function submitAdminEdit() {
+    var id = document.getElementById('admin-edit-id').value;
+    var title = document.getElementById('admin-edit-title').value.trim();
+    var description = document.getElementById('admin-edit-description').value.trim();
+
+    if (!title) {
+        Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update',
+        contribution_id: id,
+        title: title,
+        description: description
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-edit-modal');
+        Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -458,35 +465,33 @@ function changeCommentStatus(commentId, newStatus) {
 
 // UPDATE: Edits existing Comments
 function editModComment(commentId, currentContent) {
-    Swal.fire({
-        title: 'Kommentar bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<label class="swal-label">Inhalt</label>' +
-                '<textarea id="swal-comment-content" class="swal2-textarea">' + escapeHtml(currentContent) + '</textarea>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return { content: document.getElementById('swal-comment-content').value.trim() };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-comment-id').value = commentId;
+    document.getElementById('admin-comment-content').value = currentContent;
+    document.getElementById('admin-comment-modal').style.display = 'flex';
+}
 
-        apiCall({
-            action: 'update_comment',
-            comment_id: commentId,
-            content: result.value.content
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+// Submits Comment Edit from Custom Modal
+function submitAdminComment() {
+    var id = document.getElementById('admin-comment-id').value;
+    var content = document.getElementById('admin-comment-content').value.trim();
+
+    if (!content) {
+        Swal.fire('Inhalt fehlt', 'Bitte geben Sie einen Inhalt ein.', 'warning');
+        return;
+    }
+
+    apiCall({
+        action: 'update_comment',
+        comment_id: id,
+        content: content
+    }).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-comment-modal');
+        Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
+            .then(function () { location.reload(); });
     });
 }
 
@@ -523,107 +528,68 @@ function deleteModComment(commentId) {
 // Block 11: CRUD Operations for News
 // =====================================================================
 
-// CREATE: Submits new News Article
+// CREATE: Creates News
 function createNews() {
-    Swal.fire({
-        title: 'Neuigkeit hinzufügen',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-news-title" class="swal2-input" placeholder="Titel der Neuigkeit">' +
-                '</div>' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Inhalt</label>' +
-                    '<textarea id="swal-news-content" class="swal2-textarea" placeholder="Neuigkeit verfassen..."></textarea>' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Autor</label>' +
-                    '<input id="swal-news-author" class="swal2-input" value="Stadtverwaltung">' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Veröffentlichen',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            const title   = document.getElementById('swal-news-title').value.trim();
-            const content = document.getElementById('swal-news-content').value.trim();
-            const author  = document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung';
-            if (!title || !content) {
-                Swal.showValidationMessage('Titel und Inhalt sind Pflichtfelder.');
-                return false;
-            }
-            return { title, content, author_name: author };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
-
-        apiCall({
-            action: 'create_news',
-            municipality_id: ADMIN_CONFIG.id,
-            title: result.value.title,
-            content: result.value.content,
-            author_name: result.value.author_name
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Veröffentlicht!', 'Neuigkeit wurde veröffentlicht.', 'success')
-                .then(function () { location.reload(); });
-        });
-    });
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen';
+    document.getElementById('admin-news-id').value = '';
+    document.getElementById('admin-news-mode').value = 'create';
+    document.getElementById('admin-news-title').value = '';
+    document.getElementById('admin-news-content').value = '';
+    document.getElementById('admin-news-author').value = 'Stadtverwaltung';
+    document.getElementById('admin-news-modal').style.display = 'flex';
 }
 
-
 // UPDATE: Edits existing News
 function editNews(newsId, currentTitle, currentContent, currentAuthor) {
-    Swal.fire({
-        title: 'Neuigkeit bearbeiten',
-        html:
-            '<div class="swal-form">' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Titel</label>' +
-                    '<input id="swal-news-title" class="swal2-input" value="' + escapeHtml(currentTitle) + '">' +
-                '</div>' +
-                '<div class="swal-group">' +
-                    '<label class="swal-label">Inhalt</label>' +
-                    '<textarea id="swal-news-content" class="swal2-textarea">' + escapeHtml(currentContent) + '</textarea>' +
-                '</div>' +
-                '<div>' +
-                    '<label class="swal-label">Autor</label>' +
-                    '<input id="swal-news-author" class="swal2-input" value="' + escapeHtml(currentAuthor) + '">' +
-                '</div>' +
-            '</div>',
-        showCancelButton: true,
-        confirmButtonText: 'Speichern',
-        cancelButtonText: 'Abbrechen',
-        confirmButtonColor: ADMIN_CONFIG.primaryColor,
-        preConfirm: function () {
-            return {
-                title:       document.getElementById('swal-news-title').value.trim(),
-                content:     document.getElementById('swal-news-content').value.trim(),
-                author_name: document.getElementById('swal-news-author').value.trim() || 'Stadtverwaltung'
-            };
-        }
-    }).then(function (result) {
-        if (!result.isConfirmed) return;
+    document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-pen"></i> Neuigkeit bearbeiten';
+    document.getElementById('admin-news-id').value = newsId;
+    document.getElementById('admin-news-mode').value = 'edit';
+    document.getElementById('admin-news-title').value = currentTitle;
+    document.getElementById('admin-news-content').value = currentContent;
+    document.getElementById('admin-news-author').value = currentAuthor;
+    document.getElementById('admin-news-modal').style.display = 'flex';
+}
 
-        apiCall({
+// Submits News from Custom Modal (Create or Edit)
+function submitAdminNews() {
+    var mode = document.getElementById('admin-news-mode').value;
+    var title = document.getElementById('admin-news-title').value.trim();
+    var content = document.getElementById('admin-news-content').value.trim();
+    var author = document.getElementById('admin-news-author').value.trim() || 'Stadtverwaltung';
+
+    if (!title || !content) {
+        Swal.fire('Pflichtfelder', 'Titel und Inhalt sind Pflichtfelder.', 'warning');
+        return;
+    }
+
+    var data;
+    if (mode === 'create') {
+        data = {
+            action: 'create_news',
+            municipality_id: ADMIN_CONFIG.id,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    } else {
+        data = {
             action: 'update_news',
-            news_id: newsId,
-            title: result.value.title,
-            content: result.value.content,
-            author_name: result.value.author_name
-        }).then(function (response) {
-            if (response.error) {
-                Swal.fire('Fehler', response.error, 'error');
-                return;
-            }
-            Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
-                .then(function () { location.reload(); });
-        });
+            news_id: document.getElementById('admin-news-id').value,
+            title: title,
+            content: content,
+            author_name: author
+        };
+    }
+
+    apiCall(data).then(function (response) {
+        if (response.error) {
+            Swal.fire('Fehler', response.error, 'error');
+            return;
+        }
+        closeAdminModal('admin-news-modal');
+        var msg = mode === 'create' ? 'Neuigkeit wurde veröffentlicht.' : 'Neuigkeit wurde aktualisiert.';
+        Swal.fire('Gespeichert!', msg, 'success')
+            .then(function () { location.reload(); });
     });
 }