lukas.uptmoor/webgis-lohne
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: lukas.uptmoor:2bfb245a46f50a857fb73cc4314e423c381d55e9
Branches Tags
lukas.uptmoor:main lukas.uptmoor:dev/patrick lukas.uptmoor:dev/tasks-module lukas.uptmoor:dev/lukas
...
compare: lukas.uptmoor:dev/patrick
Branches Tags
lukas.uptmoor:dev/patrick lukas.uptmoor:main lukas.uptmoor:dev/tasks-module lukas.uptmoor:dev/lukas

18 Commits
2bfb245a46 ... dev/patric

Author SHA1 Message Date
patrickzerhusen
13a1f50134 news sort control in sidebar 2026-06-16 16:58:25 +02:00
patrickzerhusen
7e9c8cd60d news sort control in sidebar 2026-06-16 16:58:15 +02:00
patrickzerhusen
2aae2cd518 contribution sort control in sidebar 2026-06-16 16:35:49 +02:00
patrickzerhusen
286026d7ba polished sidebar design 2026-06-16 16:32:56 +02:00
patrickzerhusen
5aa1fbf13c contribution sort control in sidebar 2026-06-16 16:27:56 +02:00
patrickzerhusen
36ef947be0 redesigned category filter in sidebar 2026-06-16 16:24:11 +02:00
patrickzerhusen
cf09e88a5b custom edit and create modals 2026-06-16 16:06:25 +02:00
patrickzerhusen
70fe829e97 cutom edit contribution modal 2026-06-16 15:53:42 +02:00
patrickzerhusen
c1dd6cc009 replaced sweet alert inline styles with CSS classes 2026-06-16 15:43:48 +02:00
patrickzerhusen
336e7cf3a6 moved add news button 2026-06-16 15:32:39 +02:00
patrickzerhusen
6898a837e8 adapted sweet alert styles to design theme 2026-06-16 15:19:00 +02:00
patrickzerhusen
a859e61483 replaced sweet alert inline styles with CSS classes 2026-06-16 15:15:18 +02:00
patrickzerhusen
3fa47a3347 developer notice colour in modals 2026-06-16 15:10:54 +02:00
patrickzerhusen
7c0a17c915 added utility designs 2026-06-16 15:05:25 +02:00
patrickzerhusen
59147deec6 added utility designs 2026-06-16 15:00:20 +02:00
patrickzerhusen
d5efbc02d2 added utility designs 2026-06-16 14:58:19 +02:00
patrickzerhusen
60d6b9e4b6 added utility designs 2026-06-16 14:57:52 +02:00
patrickzerhusen
ee84734601 replaced inline styles with CSS classes 2026-06-16 14:42:57 +02:00
5 changed files with 505 additions and 235 deletions
Expand all files Collapse all files

116
public/admin.php
View File

@@ -228,7 +228,7 @@ $counts['total'] = count($all_contributions);
<div id="contributions-container"> <div id="contributions-container">
<?php if (empty($all_contributions)): ?> <?php if (empty($all_contributions)): ?>
<div class="empty-state"> <div class="empty-state">
<i class="fa-solid fa-inbox" style="font-size:2rem;margin-bottom:8px;display:block;"></i> <i class="fa-solid fa-inbox"></i>
Noch keine Beiträge vorhanden. Noch keine Beiträge vorhanden.
</div> </div>
<?php else: ?> <?php else: ?>
@@ -334,9 +334,9 @@ $counts['total'] = count($all_contributions);
<i class="fa-solid fa-trash"></i> Löschen <i class="fa-solid fa-trash"></i> Löschen
</button> </button>
<a class="btn btn-map" href="index.php" target="_blank"> <!-- <a class="btn btn-map" href="index.php" target="_blank">
<i class="fa-solid fa-map-location-dot"></i> Karte <i class="fa-solid fa-map-location-dot"></i> Karte
</a> </a> -->
</div> </div>
</div> </div>
</div> </div>
@@ -381,7 +381,7 @@ $counts['total'] = count($all_contributions);
<div id="comments-mod-container"> <div id="comments-mod-container">
<?php if (empty($all_comments)): ?> <?php if (empty($all_comments)): ?>
<div class="empty-state"> <div class="empty-state">
<i class="fa-solid fa-comments" style="font-size:2rem;margin-bottom:8px;display:block;"></i> <i class="fa-solid fa-comments"></i>
Noch keine Kommentare vorhanden. Noch keine Kommentare vorhanden.
</div> </div>
<?php else: ?> <?php else: ?>
@@ -409,9 +409,9 @@ $counts['total'] = count($all_contributions);
<!-- Expanded Detail --> <!-- Expanded Detail -->
<div class="contribution-row-detail"> <div class="contribution-row-detail">
<div style="padding:12px 0;"> <div>
<!-- Comment Content --> <!-- Comment Content -->
<div style="font-size:0.9rem;line-height:1.6;color:var(--color-text);margin-bottom:12px;"> <div class="detail-block">
<?= nl2br(htmlspecialchars($comment['content'])) ?> <?= nl2br(htmlspecialchars($comment['content'])) ?>
</div> </div>
<!-- Meta --> <!-- Meta -->
@@ -457,25 +457,37 @@ $counts['total'] = count($all_contributions);
<!-- News Article Tab --> <!-- News Article Tab -->
<!-- ========================================================= --> <!-- ========================================================= -->
<div id="tab-news" class="page-tab-content" style="display:none;"> <div id="tab-news" class="page-tab-content" style="display:none;">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;">
<h2 style="margin:0;border:none;padding:0;"><i class="fa-solid fa-newspaper"></i> Neuigkeiten</h2> <!-- Filter -->
<button class="btn btn-approve" onclick="createNews()"> <div class="filter-tabs" id="news-filter-tabs">
<i class="fa-solid fa-plus"></i> Nachricht hinzufügen <button class="filter-tab active" onclick="filterNewsByStatus('all', this)">
</button> Alle <span class="tab-count"><?= count($news_items) ?></span>
</button>
</div>
<!-- Sort Controls -->
<div class="sort-controls">
<span id="news-visible-count"><?= count($news_items) ?> Neuigkeiten</span>
<div style="display:flex;gap:var(--space-sm);align-items:center;">
<select onchange="sortNewsRows(this.value)">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
</select>
</div>
</div> </div>
<?php if (empty($news_items)): ?> <?php if (empty($news_items)): ?>
<div class="empty-state"> <div class="empty-state">
<i class="fa-solid fa-newspaper" style="font-size:2rem;margin-bottom:8px;display:block;"></i> <i class="fa-solid fa-newspaper"></i>
Noch keine Neuigkeiten veröffentlicht. Noch keine Neuigkeiten veröffentlicht.
</div> </div>
<?php else: ?> <?php else: ?>
<?php foreach ($news_items as $news): ?> <?php foreach ($news_items as $news): ?>
<div class="contribution-row" data-id="<?= $news['news_id'] ?>"> <div class="contribution-row" data-id="<?= $news['news_id'] ?>" data-date="<?= $news['published_at'] ?>">
<div class="contribution-row-header" onclick="toggleRow(this.parentElement)"> <div class="contribution-row-header" onclick="toggleRow(this.parentElement)">
<div class="contribution-row-summary"> <div class="contribution-row-summary">
<span class="title"><?= htmlspecialchars($news['title']) ?></span> <span class="title"><?= htmlspecialchars($news['title']) ?></span>
<span style="font-size:0.8rem;color:#999;"> <span class="detail-block-meta">
<?= date('d.m.Y', strtotime($news['published_at'])) ?> <?= date('d.m.Y', strtotime($news['published_at'])) ?>
· <?= htmlspecialchars($news['author_name']) ?> · <?= htmlspecialchars($news['author_name']) ?>
</span> </span>
@@ -483,7 +495,7 @@ $counts['total'] = count($all_contributions);
<i class="fa-solid fa-chevron-down collapse-icon"></i> <i class="fa-solid fa-chevron-down collapse-icon"></i>
</div> </div>
<div class="contribution-row-detail"> <div class="contribution-row-detail">
<div style="padding:12px 0;font-size:0.9rem;line-height:1.6;color:#5a5a7a;"> <div class="detail-block">
<?= nl2br(htmlspecialchars($news['content'])) ?> <?= nl2br(htmlspecialchars($news['content'])) ?>
</div> </div>
<div class="action-buttons"> <div class="action-buttons">
@@ -498,6 +510,12 @@ $counts['total'] = count($all_contributions);
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
<?php endif; ?> <?php endif; ?>
<div class="tab-footer-action">
<button class="btn btn-approve" onclick="createNews()">
<i class="fa-solid fa-plus"></i> Neuigkeit hinzufügen
</button>
</div>
</div> </div>
@@ -521,6 +539,74 @@ $counts['total'] = count($all_contributions);
</div> </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 --> <!-- Loads JavaScript Dependencies -->
<!-- ============================================================= --> <!-- ============================================================= -->

56
public/index.php
View File

@@ -167,6 +167,16 @@ $news_items = $stmt->fetchAll();
<div class="list-search"> <div class="list-search">
<input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input"> <input type="text" id="list-search-input" placeholder="Beiträge durchsuchen..." class="form-input">
</div> </div>
<div class="list-controls">
<select id="list-sort" class="form-input list-sort-select" onchange="updateContributionsList()">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
<option value="category">Nach Kategorie</option>
<option value="likes">Meiste Bewertungen</option>
<option value="comments">Meiste Kommentare</option>
</select>
<span id="list-count" class="list-count"></span>
</div>
<div id="contributions-list"> <div id="contributions-list">
<!-- Contribution Cards — populated by app.js --> <!-- Contribution Cards — populated by app.js -->
</div> </div>
@@ -185,6 +195,14 @@ $news_items = $stmt->fetchAll();
<input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()"> <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
</div> </div>
<div class="list-controls">
<select id="news-sort" class="form-input list-sort-select" onchange="sortNews()">
<option value="date-desc">Neueste zuerst</option>
<option value="date-asc">Älteste zuerst</option>
</select>
<span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
</div>
<!-- News Items Container --> <!-- News Items Container -->
<div id="news-list"> <div id="news-list">
<?php if (empty($news_items)): ?> <?php if (empty($news_items)): ?>
@@ -192,9 +210,10 @@ $news_items = $stmt->fetchAll();
<?php else: ?> <?php else: ?>
<?php foreach ($news_items as $news): ?> <?php foreach ($news_items as $news): ?>
<div class="news-item" <div class="news-item"
data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>" data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>" data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"> data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
data-date="<?= $news['published_at'] ?>">
<h3><?= htmlspecialchars($news['title']) ?></h3> <h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p> <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date"> <span class="news-date">
@@ -218,7 +237,7 @@ $news_items = $stmt->fetchAll();
<h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3> <h3><i class="fa-solid fa-book"></i> Interaktive Anleitung</h3>
<p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p> <p>Klicken Sie unten auf Tutorial starten um Schritt für Schritt durch die Kernfunktionen der Mitmachkarte geführt zu werden.</p>
<p> <p>
<button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}" style="font-size:0.85rem;"> <button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}">
<i class="fa-solid fa-route"></i> Tutorial starten <i class="fa-solid fa-route"></i> Tutorial starten
</button> </button>
</p> </p>
@@ -274,7 +293,7 @@ $news_items = $stmt->fetchAll();
<li>Hinweise und Verbesserungsvorschläge für die Stadtverwaltung hinzufügen</li> <li>Hinweise und Verbesserungsvorschläge für die Stadtverwaltung hinzufügen</li>
<li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li> <li>Bestehende Beiträge der Bürgerschaft betrachten und bewerten</li>
</ul> </ul>
<p style="background:#fff3cd;padding:10px;border-radius:6px;border:1px solid #ffc107;font-size:0.85rem;color:#856404;"> <p class="dev-notice">
<i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden. <i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
</p> </p>
<p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p> <div class="modal-actions"> <p>Zum Hinzufügen von Beiträgen geben Sie bitte zunächst Ihren Namen ein.</p> <div class="modal-actions">
@@ -349,6 +368,33 @@ $news_items = $stmt->fetchAll();
</div> </div>
<!-- ============================================================= -->
<!-- Edit Contribution Modal -->
<!-- ============================================================= -->
<div id="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="edit-title">Titel</label>
<input type="text" id="edit-title" class="form-input">
</div>
<div class="form-group">
<label for="edit-description">Beschreibung</label>
<textarea id="edit-description" class="form-input" rows="4"></textarea>
</div>
<input type="hidden" id="edit-contribution-id">
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeEditModal()">Abbrechen</button>
<button class="btn btn-primary" onclick="submitEdit()">Speichern</button>
</div>
</div>
</div>
<!-- ============================================================= --> <!-- ============================================================= -->
<!-- Loads JavaScript Dependencies --> <!-- Loads JavaScript Dependencies -->
<!-- ============================================================= --> <!-- ============================================================= -->

323
public/js/admin.js
View File

@@ -132,7 +132,7 @@ function loadMapPreview(mapDiv) {
}); });
if (!feature) { if (!feature) {
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>'; mapDiv.innerHTML = '<div class="empty-state">Geometrie nicht gefunden.</div>';
return; return;
} }
@@ -177,7 +177,7 @@ function loadMapPreview(mapDiv) {
mapDiv.dataset.loaded = 'true'; mapDiv.dataset.loaded = 'true';
}) })
.catch(function () { .catch(function () {
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>'; mapDiv.innerHTML = '<div class="empty-state">Karte nicht verfügbar.</div>';
}); });
} }
@@ -275,7 +275,26 @@ function sortCommentRows(sortBy) {
// ===================================================================== // =====================================================================
// Block 7: Helper Functions // Block 7: News Filter and Sorting
// =====================================================================
// Sorts News
function sortNewsRows(sortBy) {
var container = document.getElementById('tab-news');
var rows = Array.from(container.querySelectorAll('.contribution-row'));
rows.sort(function (a, b) {
if (sortBy === 'date-desc') return new Date(b.dataset.date || 0) - new Date(a.dataset.date || 0);
if (sortBy === 'date-asc') return new Date(a.dataset.date || 0) - new Date(b.dataset.date || 0);
return 0;
});
rows.forEach(function (row) { row.parentNode.appendChild(row); });
}
// =====================================================================
// Block 8: Helper Functions
// ===================================================================== // =====================================================================
// Sends a POST request to API // Sends a POST request to API
@@ -300,8 +319,24 @@ function escapeHtml(text) {
return div.innerHTML; 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 8: CRUD Operations for Contributions // Block 9: CRUD Operations for Contributions
// ===================================================================== // =====================================================================
// STATUS: Changes Contribution Status // STATUS: Changes Contribution Status
@@ -335,45 +370,36 @@ function changeStatus(contributionId, newStatus) {
// UPDATE: Edits existing Contributions // UPDATE: Edits existing Contributions
function editContribution(contributionId, currentTitle, currentDescription) { function editContribution(contributionId, currentTitle, currentDescription) {
Swal.fire({ document.getElementById('admin-edit-id').value = contributionId;
title: 'Beitrag bearbeiten', document.getElementById('admin-edit-title').value = currentTitle;
html: document.getElementById('admin-edit-description').value = currentDescription;
'<div style="text-align:left;">' + document.getElementById('admin-edit-modal').style.display = 'flex';
'<div style="margin-bottom:12px;">' + }
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
'<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
'</div>' +
'<div>' +
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Beschreibung</label>' +
'<textarea id="swal-description" class="swal2-textarea" style="margin:0;width:100%;">' + 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;
apiCall({ // Submits Edit from Custom Modal
action: 'update', function submitAdminEdit() {
contribution_id: contributionId, var id = document.getElementById('admin-edit-id').value;
title: result.value.title, var title = document.getElementById('admin-edit-title').value.trim();
description: result.value.description var description = document.getElementById('admin-edit-description').value.trim();
}).then(function (response) {
if (response.error) { if (!title) {
Swal.fire('Fehler', response.error, 'error'); Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
return; return;
} }
Swal.fire('Gespeichert!', 'Beitrag wurde aktualisiert.', 'success')
.then(function () { location.reload(); }); 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(); });
}); });
} }
@@ -387,7 +413,7 @@ function deleteContribution(contributionId) {
showCancelButton: true, showCancelButton: true,
confirmButtonText: 'Beitrag löschen', confirmButtonText: 'Beitrag löschen',
cancelButtonText: 'Abbrechen', cancelButtonText: 'Abbrechen',
confirmButtonColor: '#c62828' customClass: { confirmButton: 'swal-btn-danger' },
}).then(function (result) { }).then(function (result) {
if (!result.isConfirmed) return; if (!result.isConfirmed) return;
@@ -406,7 +432,7 @@ function deleteContribution(contributionId) {
} }
// ===================================================================== // =====================================================================
// Block 9: CRUD Operations for Comments // Block 10: CRUD Operations for Comments
// ===================================================================== // =====================================================================
// STATUS: Changes Comment Status // STATUS: Changes Comment Status
@@ -439,35 +465,33 @@ function changeCommentStatus(commentId, newStatus) {
// UPDATE: Edits existing Comments // UPDATE: Edits existing Comments
function editModComment(commentId, currentContent) { function editModComment(commentId, currentContent) {
Swal.fire({ document.getElementById('admin-comment-id').value = commentId;
title: 'Kommentar bearbeiten', document.getElementById('admin-comment-content').value = currentContent;
html: document.getElementById('admin-comment-modal').style.display = 'flex';
'<div style="text-align:left;">' + }
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
'<textarea id="swal-comment-content" class="swal2-textarea" style="margin:0;width:100%;">' + 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;
apiCall({ // Submits Comment Edit from Custom Modal
action: 'update_comment', function submitAdminComment() {
comment_id: commentId, var id = document.getElementById('admin-comment-id').value;
content: result.value.content var content = document.getElementById('admin-comment-content').value.trim();
}).then(function (response) {
if (response.error) { if (!content) {
Swal.fire('Fehler', response.error, 'error'); Swal.fire('Inhalt fehlt', 'Bitte geben Sie einen Inhalt ein.', 'warning');
return; return;
} }
Swal.fire('Gespeichert!', 'Kommentar wurde aktualisiert.', 'success')
.then(function () { location.reload(); }); 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(); });
}); });
} }
@@ -481,7 +505,7 @@ function deleteModComment(commentId) {
showCancelButton: true, showCancelButton: true,
confirmButtonText: 'Löschen', confirmButtonText: 'Löschen',
cancelButtonText: 'Abbrechen', cancelButtonText: 'Abbrechen',
confirmButtonColor: '#c62828' customClass: { confirmButton: 'swal-btn-danger' },
}).then(function (result) { }).then(function (result) {
if (!result.isConfirmed) return; if (!result.isConfirmed) return;
@@ -501,110 +525,71 @@ function deleteModComment(commentId) {
// ===================================================================== // =====================================================================
// Block 10: CRUD Operations for News // Block 11: CRUD Operations for News
// ===================================================================== // =====================================================================
// CREATE: Submits new News Article // CREATE: Creates News
function createNews() { function createNews() {
Swal.fire({ document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-newspaper"></i> Neuigkeit hinzufügen';
title: 'Neuigkeit hinzufügen', document.getElementById('admin-news-id').value = '';
html: document.getElementById('admin-news-mode').value = 'create';
'<div style="text-align:left;">' + document.getElementById('admin-news-title').value = '';
'<div style="margin-bottom:12px;">' + document.getElementById('admin-news-content').value = '';
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' + document.getElementById('admin-news-author').value = 'Stadtverwaltung';
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' + document.getElementById('admin-news-modal').style.display = 'flex';
'</div>' +
'<div style="margin-bottom:12px;">' +
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
'<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;" placeholder="Neuigkeit verfassen..."></textarea>' +
'</div>' +
'<div>' +
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
'<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" 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(); });
});
});
} }
// UPDATE: Edits existing News // UPDATE: Edits existing News
function editNews(newsId, currentTitle, currentContent, currentAuthor) { function editNews(newsId, currentTitle, currentContent, currentAuthor) {
Swal.fire({ document.getElementById('admin-news-modal-title').innerHTML = '<i class="fa-solid fa-pen"></i> Neuigkeit bearbeiten';
title: 'Neuigkeit bearbeiten', document.getElementById('admin-news-id').value = newsId;
html: document.getElementById('admin-news-mode').value = 'edit';
'<div style="text-align:left;">' + document.getElementById('admin-news-title').value = currentTitle;
'<div style="margin-bottom:12px;">' + document.getElementById('admin-news-content').value = currentContent;
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' + document.getElementById('admin-news-author').value = currentAuthor;
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' + document.getElementById('admin-news-modal').style.display = 'flex';
'</div>' + }
'<div style="margin-bottom:12px;">' +
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Inhalt</label>' +
'<textarea id="swal-news-content" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(currentContent) + '</textarea>' +
'</div>' +
'<div>' +
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Autor</label>' +
'<input id="swal-news-author" class="swal2-input" style="margin:0;width:100%;" 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;
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', action: 'update_news',
news_id: newsId, news_id: document.getElementById('admin-news-id').value,
title: result.value.title, title: title,
content: result.value.content, content: content,
author_name: result.value.author_name author_name: author
}).then(function (response) { };
if (response.error) { }
Swal.fire('Fehler', response.error, 'error');
return; apiCall(data).then(function (response) {
} if (response.error) {
Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success') Swal.fire('Fehler', response.error, 'error');
.then(function () { location.reload(); }); 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(); });
}); });
} }
@@ -618,7 +603,7 @@ function deleteNews(newsId) {
showCancelButton: true, showCancelButton: true,
confirmButtonText: 'Löschen', confirmButtonText: 'Löschen',
cancelButtonText: 'Abbrechen', cancelButtonText: 'Abbrechen',
confirmButtonColor: '#c62828' customClass: { confirmButton: 'swal-btn-danger' },
}).then(function (result) { }).then(function (result) {
if (!result.isConfirmed) return; if (!result.isConfirmed) return;

117
public/js/app.js
View File

@@ -653,58 +653,55 @@ function closeCreateModal() {
} }
// UPDATE: Edits existing Contributions // UPDATE: Edits existing Contributions
// UPDATE: Opens Edit Modal for existing Contributions
function editContribution(contributionId) { function editContribution(contributionId) {
// Finds Contribution in local Data
const contribution = contributionsData.find(function (f) { const contribution = contributionsData.find(function (f) {
return f.properties.contribution_id === contributionId; return f.properties.contribution_id === contributionId;
}); });
if (!contribution) return; if (!contribution) return;
const props = contribution.properties; const props = contribution.properties;
document.getElementById('edit-contribution-id').value = contributionId;
document.getElementById('edit-title').value = props.title;
document.getElementById('edit-description').value = props.description || '';
document.getElementById('edit-modal').style.display = 'flex';
}
Swal.fire({ // Submits Edit from Custom Modal
title: 'Beitrag bearbeiten', function submitEdit() {
html: const contributionId = document.getElementById('edit-contribution-id').value;
'<div style="text-align:left;">' + const title = document.getElementById('edit-title').value.trim();
'<div style="margin-bottom:12px;">' + const description = document.getElementById('edit-description').value.trim();
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
'<input id="swal-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(props.title) + '">' + if (!title) {
'</div>' + Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
'<div>' + return;
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Beschreibung</label>' + }
'<textarea id="swal-description" class="swal2-textarea" style="margin:0;width:100%;">' + escapeHtml(props.description || '') + '</textarea>' +
'</div>' + apiCall({
'</div>', action: 'update',
showCancelButton: true, contribution_id: contributionId,
confirmButtonText: 'Speichern', title: title,
cancelButtonText: 'Abbrechen', description: description
confirmButtonColor: MUNICIPALITY.primaryColor, }, function (response) {
preConfirm: function () { if (response.error) {
return { Swal.fire('Fehler', response.error, 'error');
title: document.getElementById('swal-title').value.trim(), return;
description: document.getElementById('swal-description').value.trim()
};
} }
}).then(function (result) { closeEditModal();
if (!result.isConfirmed) return; Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
loadContributions();
apiCall({
action: 'update',
contribution_id: contributionId,
title: result.value.title,
description: result.value.description
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
loadContributions();
});
}); });
} }
// Closes Edit Modal
function closeEditModal() {
document.getElementById('edit-modal').style.display = 'none';
document.getElementById('edit-contribution-id').value = '';
document.getElementById('edit-title').value = '';
document.getElementById('edit-description').value = '';
}
// DELETE: Deletes existing Contributions // DELETE: Deletes existing Contributions
function deleteContribution(contributionId) { function deleteContribution(contributionId) {
Swal.fire({ Swal.fire({
@@ -714,7 +711,7 @@ function deleteContribution(contributionId) {
showCancelButton: true, showCancelButton: true,
confirmButtonText: 'Löschen', confirmButtonText: 'Löschen',
cancelButtonText: 'Abbrechen', cancelButtonText: 'Abbrechen',
confirmButtonColor: '#c62828' customClass: { confirmButton: 'swal-btn-danger' },
}).then(function (result) { }).then(function (result) {
if (!result.isConfirmed) return; if (!result.isConfirmed) return;
@@ -832,11 +829,25 @@ function updateContributionsList() {
return matchesCategory && matchesSearch; return matchesCategory && matchesSearch;
}); });
// Sorts by Date (newest first) // Sorts by selected Option
var sortBy = document.getElementById('list-sort') ? document.getElementById('list-sort').value : 'date-desc';
filtered.sort(function (a, b) { filtered.sort(function (a, b) {
return new Date(b.properties.created_at) - new Date(a.properties.created_at); if (sortBy === 'date-desc') return new Date(b.properties.created_at) - new Date(a.properties.created_at);
if (sortBy === 'date-asc') return new Date(a.properties.created_at) - new Date(b.properties.created_at);
if (sortBy === 'likes') return b.properties.likes_count - a.properties.likes_count;
if (sortBy === 'comments') return (b.properties.comment_count || 0) - (a.properties.comment_count || 0);
if (sortBy === 'category') {
var catA = (CATEGORIES[a.properties.category] || CATEGORIES.other).label;
var catB = (CATEGORIES[b.properties.category] || CATEGORIES.other).label;
return catA.localeCompare(catB);
}
return 0;
}); });
// Updates Count Display
var countEl = document.getElementById('list-count');
if (countEl) countEl.textContent = filtered.length + ' Beiträge';
// Builds HTML // Builds HTML
if (filtered.length === 0) { if (filtered.length === 0) {
container.innerHTML = '<p class="empty-state">Keine Beiträge gefunden.</p>'; container.innerHTML = '<p class="empty-state">Keine Beiträge gefunden.</p>';
@@ -921,14 +932,14 @@ function buildCategoryFilter() {
const checked = activeFilters.indexOf(key) !== -1 ? 'checked' : ''; const checked = activeFilters.indexOf(key) !== -1 ? 'checked' : '';
const count = counts[key] || 0; const count = counts[key] || 0;
html += '<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;font-size:0.85rem;color:var(--color-text-secondary)">' + html += '<label class="category-filter-label">' +
'<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' + '<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
categoryIcon(cat) + categoryIcon(cat) +
'<span>' + cat.label + ' (' + count + ')</span>' + '<span>' + cat.label + ' (' + count + ')</span>' +
'</label>'; '</label>';
} }
html += '<p style="margin-top:10px;font-size:0.85rem;color:var(--color-text-secondary)"><strong>' + total + '</strong> Beiträge insgesamt</p>'; html += '<p class="category-filter-total"><strong>' + total + '</strong> Beiträge insgesamt</p>';
container.innerHTML = html; container.innerHTML = html;
} }
@@ -1082,6 +1093,7 @@ document.addEventListener('keydown', function (e) {
document.getElementById('welcome-modal').style.display = 'none'; document.getElementById('welcome-modal').style.display = 'none';
document.getElementById('login-modal').style.display = 'none'; document.getElementById('login-modal').style.display = 'none';
document.getElementById('create-modal').style.display = 'none'; document.getElementById('create-modal').style.display = 'none';
document.getElementById('edit-modal').style.display = 'none';
} }
}); });
@@ -1147,6 +1159,21 @@ function filterNews() {
}); });
} }
// Sorts News Items in Sidebar by Date
function sortNews() {
var sortBy = document.getElementById('news-sort').value;
var container = document.getElementById('news-list');
var items = Array.from(container.querySelectorAll('.news-item'));
items.sort(function (a, b) {
if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
if (sortBy === 'date-asc') return new Date(a.dataset.date) - new Date(b.dataset.date);
return 0;
});
items.forEach(function (item) { container.appendChild(item); });
}
// Loads and Displays Comments forContributions in Popups // Loads and Displays Comments forContributions in Popups
function loadComments(contributionId) { function loadComments(contributionId) {
apiCall({ apiCall({

128
public/styles.css
View File

@@ -285,6 +285,61 @@ select.form-input { cursor: pointer; }
z-index: 3000 !important; z-index: 3000 !important;
} }
/* SweetAlert2 Portal Theme */
/* SweetAlert2 Portal Theme — Notifications */
.swal2-popup {
font-family: var(--font-body) !important;
border-radius: var(--radius-lg) !important;
font-size: var(--font-base) !important;
padding: var(--space-xl) !important;
}
.swal2-title {
font-size: var(--font-lg) !important;
color: var(--color-primary) !important;
font-weight: 600 !important;
}
.swal2-html-container {
font-size: var(--font-base) !important;
color: var(--color-text-secondary) !important;
line-height: 1.6 !important;
}
.swal2-actions {
gap: var(--space-sm) !important;
}
.swal2-confirm {
border-radius: var(--radius-md) !important;
font-size: var(--font-sm) !important;
font-weight: 600 !important;
font-family: var(--font-body) !important;
padding: var(--space-sm) var(--space-lg) !important;
min-height: 40px !important;
box-shadow: none !important;
background-color: var(--color-primary) !important;
}
.swal2-cancel,
.swal2-deny {
border-radius: var(--radius-md) !important;
font-size: var(--font-sm) !important;
font-weight: 600 !important;
font-family: var(--font-body) !important;
padding: var(--space-sm) var(--space-lg) !important;
min-height: 40px !important;
background: var(--color-bg) !important;
color: var(--color-text) !important;
border: 1px solid var(--color-border) !important;
box-shadow: none !important;
}
.swal2-cancel:hover,
.swal2-deny:hover {
background: var(--color-border) !important;
}
.swal-label { .swal-label {
display: block; display: block;
font-weight: 600; font-weight: 600;
@@ -292,6 +347,20 @@ select.form-input { cursor: pointer; }
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
.swal-form {
text-align: left;
}
.swal-group {
margin-bottom: var(--space-sm);
}
.swal2-input,
.swal2-textarea {
margin: 0 !important;
width: 100% !important;
}
.detail-block { .detail-block {
padding: var(--space-sm) 0; padding: var(--space-sm) 0;
font-size: var(--font-base); font-size: var(--font-base);
@@ -305,6 +374,10 @@ select.form-input { cursor: pointer; }
color: #999; color: #999;
} }
.swal-btn-danger {
background-color: var(--color-error) !important;
}
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
3.7 Warning Notices 3.7 Warning Notices
@@ -345,6 +418,12 @@ select.form-input { cursor: pointer; }
font-size: var(--font-base); font-size: var(--font-base);
} }
.empty-state i {
font-size: 2rem;
margin-bottom: var(--space-sm);
display: block;
}
/* ================================================================= /* =================================================================
SECTION 4: Portal-specific Styles (index.php) SECTION 4: Portal-specific Styles (index.php)
@@ -578,12 +657,39 @@ select.form-input { cursor: pointer; }
font-size: var(--font-sm); font-size: var(--font-sm);
} }
.leaflet-sidebar-close {
color: white;
font-size: var(--font-lg);
}
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
4.4 Sidebar Contributions List 4.4 Sidebar Contributions List
----------------------------------------------------------------- */ ----------------------------------------------------------------- */
.list-search { margin-bottom: var(--space-md); } .list-search { margin-bottom: var(--space-md); }
.list-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
gap: var(--space-sm);
}
.list-sort-select {
width: auto;
min-width:185px;
padding: 6px var(--space-sm);
font-size: var(--font-sm);
flex-shrink: 0;
}
.list-count {
font-size: var(--font-sm);
color: var(--color-text-secondary);
white-space: nowrap;
}
.contribution-card { .contribution-card {
padding: var(--space-md); padding: var(--space-md);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
@@ -596,7 +702,7 @@ select.form-input { cursor: pointer; }
.contribution-card:hover { .contribution-card:hover {
border-color: var(--color-primary); border-color: var(--color-primary);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-md);
} }
.contribution-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } .contribution-card-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); }
@@ -631,6 +737,10 @@ select.form-input { cursor: pointer; }
color: var(--color-text-secondary); color: var(--color-text-secondary);
} }
.category-filter-label input[type="checkbox"] {
accent-color: var(--color-primary);
}
.category-filter-total { .category-filter-total {
margin-top: 10px; margin-top: 10px;
font-size: var(--font-sm); font-size: var(--font-sm);
@@ -650,6 +760,12 @@ select.form-input { cursor: pointer; }
border-radius: var(--radius-md); border-radius: var(--radius-md);
} }
.news-item:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.news-date { font-size: var(--font-sm); color: var(--color-text-secondary); } .news-date { font-size: var(--font-sm); color: var(--color-text-secondary); }
.news-item h3 { font-size: var(--font-md); margin: var(--space-xs) 0; color: var(--color-text); } .news-item h3 { font-size: var(--font-md); margin: var(--space-xs) 0; color: var(--color-text); }
@@ -700,6 +816,10 @@ select.form-input { cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); } .modal-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-top: var(--space-lg); }
.modal-content .dev-notice {
color: var(--color-badge-pending-text);
}
/* ----------------------------------------------------------------- /* -----------------------------------------------------------------
4.7 Map Popup 4.7 Map Popup
@@ -1304,6 +1424,12 @@ select.form-input { cursor: pointer; }
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
} }
.tab-footer-action {
display: flex;
justify-content: flex-end;
margin-top: var(--space-md);
}
/* News and Comments Tab Headers */ /* News and Comments Tab Headers */
.tab-header { .tab-header {