Compare commits
8 Commits
dd15e3468a
...
fa7d83fc36
| Author | SHA1 | Date | |
|---|---|---|---|
| fa7d83fc36 | |||
| a062f08ed7 | |||
| bd576665c8 | |||
| 5bfdda2340 | |||
| acfc50a244 | |||
| b4ee8fa6e0 | |||
| e1cf6f21f5 | |||
| ffc53f23e2 |
663
public/admin.php
663
public/admin.php
@@ -522,657 +522,28 @@ $counts['total'] = count($all_contributions);
|
|||||||
|
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<!-- JavaScript: Leaflet, Interactions, API Calls -->
|
<!-- Loads JavaScript Dependencies -->
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ============================================================= -->
|
||||||
|
<!-- Admin Configuration passed to JavaScript -->
|
||||||
|
<!-- ============================================================= -->
|
||||||
<script>
|
<script>
|
||||||
// Municipality Configuration for Map Previews
|
const ADMIN_CONFIG = {
|
||||||
const MUNICIPALITY_CENTER = [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>];
|
id: <?= $municipality['municipality_id'] ?>,
|
||||||
const MUNICIPALITY_ID = <?= $municipality['municipality_id'] ?>;
|
name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
|
||||||
const API_URL = 'api/contributions.php';
|
slug: "<?= htmlspecialchars($municipality['slug'], ENT_QUOTES) ?>",
|
||||||
const PRIMARY_COLOR = '<?= htmlspecialchars($municipality['primary_color']) ?>';
|
center: [<?= $municipality['center_lat'] ?>, <?= $municipality['center_lng'] ?>],
|
||||||
|
zoom: <?= $municipality['default_zoom'] ?>,
|
||||||
// Current Status Filter
|
primaryColor: "<?= htmlspecialchars($municipality['primary_color'], ENT_QUOTES) ?>"
|
||||||
let currentFilter = 'all';
|
};
|
||||||
|
|
||||||
// Restores active Tab after Page Reload
|
|
||||||
const savedTab = sessionStorage.getItem('admin_active_tab');
|
|
||||||
if (savedTab) {
|
|
||||||
// Delays to ensure DOM is ready
|
|
||||||
setTimeout(function () {
|
|
||||||
const tabBtn = document.querySelector('.page-tab[onclick*="' + savedTab + '"]');
|
|
||||||
if (tabBtn) tabBtn.click();
|
|
||||||
}, 100);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Page Tab Navigation
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function showPageTab(tabName) {
|
|
||||||
// Saves active Tab for Persistence after Reload
|
|
||||||
sessionStorage.setItem('admin_active_tab', tabName);
|
|
||||||
|
|
||||||
document.querySelectorAll('.page-tab-content').forEach(function (el) {
|
|
||||||
el.style.display = 'none';
|
|
||||||
});
|
|
||||||
|
|
||||||
// Deactivates all Tab Buttons
|
|
||||||
document.querySelectorAll('.page-tab').forEach(function (el) {
|
|
||||||
el.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Shows selected Tab and activates Button
|
|
||||||
document.getElementById('tab-' + tabName).style.display = 'block';
|
|
||||||
event.currentTarget.classList.add('active');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Collapsible Rows
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function toggleRow(row) {
|
|
||||||
const wasOpen = row.classList.contains('open');
|
|
||||||
|
|
||||||
// Closes all open Rows
|
|
||||||
document.querySelectorAll('.contribution-row.open').forEach(function (el) {
|
|
||||||
el.classList.remove('open');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Toggles clicked Row
|
|
||||||
if (!wasOpen) {
|
|
||||||
row.classList.add('open');
|
|
||||||
|
|
||||||
// Loads Map Preview if not already loaded
|
|
||||||
const mapDiv = row.querySelector('.detail-map');
|
|
||||||
if (mapDiv && !mapDiv.dataset.loaded) {
|
|
||||||
loadMapPreview(mapDiv);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Detail Slider for Maps and Photos
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function slideDetail(contributionId, direction) {
|
|
||||||
const slider = document.getElementById('slider-' + contributionId);
|
|
||||||
if (!slider) return;
|
|
||||||
|
|
||||||
const slides = slider.querySelectorAll('.detail-slide');
|
|
||||||
let activeIndex = -1;
|
|
||||||
|
|
||||||
// Finds currently active Slide
|
|
||||||
slides.forEach(function (slide, i) {
|
|
||||||
if (slide.style.display !== 'none') activeIndex = i;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Calculates next Slide Index (wraps around)
|
|
||||||
const nextIndex = (activeIndex + direction + slides.length) % slides.length;
|
|
||||||
|
|
||||||
// Switches Slides
|
|
||||||
slides.forEach(function (slide) { slide.style.display = 'none'; });
|
|
||||||
slides[nextIndex].style.display = 'block';
|
|
||||||
|
|
||||||
// Loads Map if switching to Map Slide and not yet loaded
|
|
||||||
if (slides[nextIndex].dataset.slide === 'map') {
|
|
||||||
const mapDiv = slides[nextIndex].querySelector('.detail-map');
|
|
||||||
if (mapDiv && !mapDiv.dataset.loaded) {
|
|
||||||
loadMapPreview(mapDiv);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Map Preview (Leaflet Mini Map per Contribution)
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function loadMapPreview(mapDiv) {
|
|
||||||
const contributionId = mapDiv.dataset.contributionId;
|
|
||||||
|
|
||||||
// Fetches all Contributions to find the Geometry
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('action', 'read');
|
|
||||||
formData.append('municipality_id', MUNICIPALITY_ID);
|
|
||||||
formData.append('status', 'all');
|
|
||||||
|
|
||||||
fetch(API_URL, { method: 'POST', body: formData })
|
|
||||||
.then(function (r) { return r.json(); })
|
|
||||||
.then(function (data) {
|
|
||||||
if (!data.features) return;
|
|
||||||
|
|
||||||
// Finds specific Contribution
|
|
||||||
const feature = data.features.find(function (f) {
|
|
||||||
return f.properties.contribution_id == contributionId;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!feature) {
|
|
||||||
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Creates Leaflet Mini Map
|
|
||||||
const miniMap = L.map(mapDiv, {
|
|
||||||
zoomControl: false,
|
|
||||||
attributionControl: false,
|
|
||||||
dragging: true,
|
|
||||||
scrollWheelZoom: false
|
|
||||||
});
|
|
||||||
|
|
||||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
||||||
maxZoom: 20
|
|
||||||
}).addTo(miniMap);
|
|
||||||
|
|
||||||
// Adds Geometry to Mini Map
|
|
||||||
const geojsonLayer = L.geoJSON(feature, {
|
|
||||||
style: { color: PRIMARY_COLOR, weight: 3, fillOpacity: 0.2 },
|
|
||||||
pointToLayer: function (f, latlng) {
|
|
||||||
return L.circleMarker(latlng, {
|
|
||||||
radius: 8, color: '#ffffff', weight: 2,
|
|
||||||
fillColor: PRIMARY_COLOR, fillOpacity: 0.9
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}).addTo(miniMap);
|
|
||||||
|
|
||||||
// Fits Map to Geometry Bounds
|
|
||||||
const bounds = geojsonLayer.getBounds();
|
|
||||||
if (bounds.isValid()) {
|
|
||||||
miniMap.fitBounds(bounds, { padding: [25, 25], maxZoom: 17 });
|
|
||||||
} else {
|
|
||||||
miniMap.setView(MUNICIPALITY_CENTER, 15);
|
|
||||||
}
|
|
||||||
|
|
||||||
mapDiv.dataset.loaded = 'true';
|
|
||||||
})
|
|
||||||
.catch(function () {
|
|
||||||
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Status Filter
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function filterByStatus(status, tabButton) {
|
|
||||||
currentFilter = status;
|
|
||||||
|
|
||||||
// Updates active Tab
|
|
||||||
document.querySelectorAll('.filter-tab').forEach(function (el) {
|
|
||||||
el.classList.remove('active');
|
|
||||||
});
|
|
||||||
tabButton.classList.add('active');
|
|
||||||
|
|
||||||
// Shows/Hides Contribution Rows
|
|
||||||
let visibleCount = 0;
|
|
||||||
document.querySelectorAll('.contribution-row').forEach(function (row) {
|
|
||||||
if (status === 'all' || row.dataset.status === status) {
|
|
||||||
row.style.display = '';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
row.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Updates Count Display
|
|
||||||
document.getElementById('visible-count').textContent = visibleCount + ' Beiträge';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Sort Contributions
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function sortContributions(sortBy) {
|
|
||||||
const container = document.getElementById('contributions-container');
|
|
||||||
const rows = Array.from(container.querySelectorAll('.contribution-row'));
|
|
||||||
|
|
||||||
rows.sort(function (a, b) {
|
|
||||||
if (sortBy === 'date-desc') {
|
|
||||||
return new Date(b.dataset.date) - new Date(a.dataset.date);
|
|
||||||
} else if (sortBy === 'date-asc') {
|
|
||||||
return new Date(a.dataset.date) - new Date(b.dataset.date);
|
|
||||||
} else if (sortBy === 'category') {
|
|
||||||
return a.dataset.category.localeCompare(b.dataset.category);
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
// Reappends sorted Rows
|
|
||||||
rows.forEach(function (row) {
|
|
||||||
container.appendChild(row);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// API Helper
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function apiCall(data) {
|
|
||||||
const formData = new FormData();
|
|
||||||
for (const key in data) {
|
|
||||||
formData.append(key, data[key]);
|
|
||||||
}
|
|
||||||
return fetch(API_URL, { method: 'POST', body: formData })
|
|
||||||
.then(function (r) { return r.json(); });
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Change Contribution Status
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function changeStatus(contributionId, newStatus) {
|
|
||||||
const labels = { approved: 'freigeben', rejected: 'ablehnen', pending: 'zurücksetzen' };
|
|
||||||
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Beitrag ' + labels[newStatus] + '?',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Ja',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: PRIMARY_COLOR
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
apiCall({
|
|
||||||
action: 'update',
|
|
||||||
contribution_id: contributionId,
|
|
||||||
status: newStatus
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// Reloads Page to reflect Changes
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Edit Contribution
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function editContribution(contributionId, currentTitle, currentDescription) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Beitrag bearbeiten',
|
|
||||||
html:
|
|
||||||
'<div style="text-align:left;">' +
|
|
||||||
'<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="' + 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%;">' + currentDescription + '</textarea>' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Speichern',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: PRIMARY_COLOR,
|
|
||||||
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({
|
|
||||||
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(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Delete Contribution
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function deleteContribution(contributionId) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Beitrag löschen?',
|
|
||||||
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
|
||||||
icon: 'warning',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Beitrag löschen',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: '#c62828'
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
apiCall({
|
|
||||||
action: 'delete',
|
|
||||||
contribution_id: contributionId
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Swal.fire('Gelöscht!', 'Beitrag wurde gelöscht.', 'success')
|
|
||||||
.then(function () { location.reload(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Create News Article
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function createNews() {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Neuigkeit hinzufügen',
|
|
||||||
html:
|
|
||||||
'<div style="text-align:left;">' +
|
|
||||||
'<div style="margin-bottom:12px;">' +
|
|
||||||
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
|
|
||||||
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
|
|
||||||
'</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: PRIMARY_COLOR,
|
|
||||||
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: title, content: content, author_name: author };
|
|
||||||
}
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('action', 'create_news');
|
|
||||||
formData.append('municipality_id', MUNICIPALITY_ID);
|
|
||||||
formData.append('title', result.value.title);
|
|
||||||
formData.append('content', result.value.content);
|
|
||||||
formData.append('author_name', result.value.author_name);
|
|
||||||
|
|
||||||
fetch(API_URL, { method: 'POST', body: formData })
|
|
||||||
.then(function (r) { return r.json(); })
|
|
||||||
.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(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Edit News Article
|
|
||||||
// =============================================================
|
|
||||||
function editNews(newsId, currentTitle, currentContent, currentAuthor) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Neuigkeit bearbeiten',
|
|
||||||
html:
|
|
||||||
'<div style="text-align:left;">' +
|
|
||||||
'<div style="margin-bottom:12px;">' +
|
|
||||||
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
|
|
||||||
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + currentTitle + '">' +
|
|
||||||
'</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%;">' + 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="' + currentAuthor + '">' +
|
|
||||||
'</div>' +
|
|
||||||
'</div>',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Speichern',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: PRIMARY_COLOR,
|
|
||||||
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;
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('action', 'update_news');
|
|
||||||
formData.append('news_id', newsId);
|
|
||||||
formData.append('title', result.value.title);
|
|
||||||
formData.append('content', result.value.content);
|
|
||||||
formData.append('author_name', result.value.author_name);
|
|
||||||
|
|
||||||
fetch(API_URL, { method: 'POST', body: formData })
|
|
||||||
.then(function (r) { return r.json(); })
|
|
||||||
.then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Swal.fire('Gespeichert!', 'Neuigkeit wurde aktualisiert.', 'success')
|
|
||||||
.then(function () { location.reload(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Create News Article
|
|
||||||
// =============================================================
|
|
||||||
function deleteNews(newsId) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Neuigkeit löschen?',
|
|
||||||
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
|
||||||
icon: 'warning',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Löschen',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: '#c62828'
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('action', 'delete_news');
|
|
||||||
formData.append('news_id', newsId);
|
|
||||||
|
|
||||||
fetch(API_URL, { method: 'POST', body: formData })
|
|
||||||
.then(function (r) { return r.json(); })
|
|
||||||
.then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Swal.fire('Gelöscht!', 'Neuigkeit wurde gelöscht.', 'success')
|
|
||||||
.then(function () { location.reload(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Sort Comments
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function sortCommentRows(sortBy) {
|
|
||||||
const container = document.getElementById('comments-mod-container');
|
|
||||||
const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
|
|
||||||
|
|
||||||
rows.sort(function (a, b) {
|
|
||||||
if (sortBy === 'date-desc') {
|
|
||||||
return new Date(b.dataset.date) - new Date(a.dataset.date);
|
|
||||||
} else if (sortBy === 'date-asc') {
|
|
||||||
return new Date(a.dataset.date) - new Date(b.dataset.date);
|
|
||||||
} else if (sortBy === 'contribution') {
|
|
||||||
return a.dataset.contribution.localeCompare(b.dataset.contribution);
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
rows.forEach(function (row) { container.appendChild(row); });
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Delete Comments
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function deleteModComment(commentId) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Kommentar löschen?',
|
|
||||||
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
|
||||||
icon: 'warning',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Löschen',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: '#c62828'
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
apiCall({
|
|
||||||
action: 'delete_comment',
|
|
||||||
comment_id: commentId
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
|
|
||||||
.then(function () { location.reload(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Filter Comments by Status
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function filterCommentsByStatus(status, tabButton) {
|
|
||||||
// Updates active Filter Tab (only within Comments Tab)
|
|
||||||
document.querySelectorAll('#comment-filter-tabs .filter-tab').forEach(function (el) {
|
|
||||||
el.classList.remove('active');
|
|
||||||
});
|
|
||||||
tabButton.classList.add('active');
|
|
||||||
|
|
||||||
// Shows/Hides Comment Rows
|
|
||||||
let visibleCount = 0;
|
|
||||||
document.querySelectorAll('.comment-mod-row').forEach(function (row) {
|
|
||||||
if (status === 'all' || row.dataset.status === status) {
|
|
||||||
row.style.display = '';
|
|
||||||
visibleCount++;
|
|
||||||
} else {
|
|
||||||
row.style.display = 'none';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
document.getElementById('comment-visible-count').textContent = visibleCount + ' Kommentare';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Change Comment Status (approve, reject, reset)
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function changeCommentStatus(commentId, newStatus) {
|
|
||||||
const labels = { approved: 'akzeptieren', rejected: 'ablehnen', pending: 'zurücksetzen' };
|
|
||||||
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Kommentar ' + labels[newStatus] + '?',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Ja',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: PRIMARY_COLOR
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
apiCall({
|
|
||||||
action: 'update_comment',
|
|
||||||
comment_id: commentId,
|
|
||||||
status: newStatus
|
|
||||||
}).then(function (response) {
|
|
||||||
if (response.error) {
|
|
||||||
Swal.fire('Fehler', response.error, 'error');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// =============================================================
|
|
||||||
// Edit Comment Content
|
|
||||||
// =============================================================
|
|
||||||
|
|
||||||
function editModComment(commentId, currentContent) {
|
|
||||||
Swal.fire({
|
|
||||||
title: 'Kommentar bearbeiten',
|
|
||||||
html:
|
|
||||||
'<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%;">' + currentContent + '</textarea>' +
|
|
||||||
'</div>',
|
|
||||||
showCancelButton: true,
|
|
||||||
confirmButtonText: 'Speichern',
|
|
||||||
cancelButtonText: 'Abbrechen',
|
|
||||||
confirmButtonColor: PRIMARY_COLOR,
|
|
||||||
preConfirm: function () {
|
|
||||||
return { content: document.getElementById('swal-comment-content').value.trim() };
|
|
||||||
}
|
|
||||||
}).then(function (result) {
|
|
||||||
if (!result.isConfirmed) return;
|
|
||||||
|
|
||||||
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(); });
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<!-- Application Logic -->
|
||||||
|
<script src="js/admin.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
@@ -1205,7 +576,7 @@ function show_login_page($municipality, $error = null) {
|
|||||||
<input type="password" name="password" placeholder="Passwort" autofocus>
|
<input type="password" name="password" placeholder="Passwort" autofocus>
|
||||||
<button type="submit"><i class="fa-solid fa-right-to-bracket"></i> Anmelden</button>
|
<button type="submit"><i class="fa-solid fa-right-to-bracket"></i> Anmelden</button>
|
||||||
</form>
|
</form>
|
||||||
<div class="back-link"><i class="fa fa-arrow-left"></i></i> <a href="index.php">Zurück zum Bürgerportal</a></div>
|
<div class="back-link"><i class="fa fa-arrow-left"></i> <a href="index.php">Zurück zum Bürgerportal</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -10,8 +10,6 @@ require_once __DIR__ . '/api/auth.php';
|
|||||||
|
|
||||||
// -----------------------------------------------------------------
|
// -----------------------------------------------------------------
|
||||||
// Loads Municipality Configuration
|
// Loads Municipality Configuration
|
||||||
// ToDo's: Dynamic Loading via URL Slug once multi-tenant Routing
|
|
||||||
// is implemented. Hardcoded Slug for now.
|
|
||||||
// -----------------------------------------------------------------
|
// -----------------------------------------------------------------
|
||||||
$pdo = get_db();
|
$pdo = get_db();
|
||||||
$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
|
$stmt = $pdo->prepare("SELECT * FROM municipalities WHERE slug = :slug");
|
||||||
@@ -35,7 +33,7 @@ $news_items = $stmt->fetchAll();
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Bürgerbeteiligungsportal <?= htmlspecialchars($municipality['name']) ?></title>
|
<title>Mitmachkarte <?= htmlspecialchars($municipality['name']) ?></title>
|
||||||
<link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
|
<link rel="icon" href="<?= htmlspecialchars($municipality['logo_path'] ?? 'assets/icon-municipality.png') ?>" type="image/png">
|
||||||
<meta name="description" content="Bürgerbeteiligungsportal. Hinweise und Vorschläge auf der Karte eintragen.">
|
<meta name="description" content="Bürgerbeteiligungsportal. Hinweise und Vorschläge auf der Karte eintragen.">
|
||||||
|
|
||||||
@@ -68,6 +66,10 @@ $news_items = $stmt->fetchAll();
|
|||||||
<!-- Application Styles -->
|
<!-- Application Styles -->
|
||||||
<link rel="stylesheet" href="styles.css">
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
|
||||||
|
<!-- Shepherd.js Onboarding Tour -->
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/css/shepherd.css">
|
||||||
|
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<!-- Municipality Theme loaded from Database -->
|
<!-- Municipality Theme loaded from Database -->
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
@@ -183,17 +185,30 @@ $news_items = $stmt->fetchAll();
|
|||||||
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
|
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="sidebar-body">
|
<div class="sidebar-body">
|
||||||
|
<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>
|
||||||
|
<button class="btn btn-primary" onclick="if(typeof restartOnboarding==='function'){sidebar.close();restartOnboarding()}" style="font-size:0.85rem;">
|
||||||
|
<i class="fa-solid fa-route"></i> Tutorial starten
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
|
||||||
<h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
|
<h3><i class="fa-solid fa-map-location-dot"></i> Karte bedienen</h3>
|
||||||
<p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
|
<p>Verschieben Sie die Karte per Mausklick und Ziehen. Zoomen Sie mit dem Mausrad oder den Zoom-Buttons.</p>
|
||||||
|
|
||||||
<h3><i class="fa-solid fa-plus"></i> Beitrag erstellen</h3>
|
<h3><i class="fa-solid fa-location-dot"></i> Beitrag hinzufügen</h3>
|
||||||
<p>Verwenden Sie die Zeichenwerkzeuge rechts, um Beiträge als Punkte, Linien oder Flächen zu zeichnen. Anschließend können Sie Kategorie und Beschreibung hinzufügen.</p>
|
<p>Verwenden Sie die Zeichenwerkzeuge rechts, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.</p>
|
||||||
|
|
||||||
<h3><i class="fa-solid fa-thumbs-up"></i> Abstimmen</h3>
|
<h3><i class="fa-solid fa-thumbs-up"></i> Bewerten</h3>
|
||||||
<p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Like/Dislike Funktion, um Ihre Meinung kundzugeben.</p>
|
<p>Klicken Sie auf bestehende Beiträge und nutzen Sie die Bewertungsfunktion, um Ihre Meinung zu äußern.</p>
|
||||||
|
|
||||||
|
<h3><i class="fa-solid fa-comments"></i> Kommentieren</h3>
|
||||||
|
<p>Gerne können Sie Ihre Meinung zu bestehenden Beiträgen auch durch die Kommentarfunktion äußern.</p>
|
||||||
|
|
||||||
<h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
|
<h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
|
||||||
<p>Verwenden Sie die Adresssuche rechts, um bestimmte Orte auf der Karte zu finden.</p>
|
<p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -246,7 +261,7 @@ $news_items = $stmt->fetchAll();
|
|||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<footer id="app-footer">
|
<footer id="app-footer">
|
||||||
<span class="dev-warning">
|
<span class="dev-warning">
|
||||||
<i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Absprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
|
<i class="fa-solid fa-triangle-exclamation"></i> Demoversion - nicht in Rücksprache mit der Stadt Lohne entwickelt! Alle Beitrage, Kommentare und Personen sind frei erfunden.
|
||||||
</span>
|
</span>
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
|
<span class="footer-text">© <a href="https://endex-geodaten.de" target="_blank" style="color:inherit;">endex GmbH</a></span>
|
||||||
@@ -267,7 +282,7 @@ $news_items = $stmt->fetchAll();
|
|||||||
<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 style="background:#fff3cd;padding:10px;border-radius:6px;border:1px solid #ffc107;font-size:0.85rem;color:#856404;">
|
||||||
<i class="fa-solid fa-triangle-exclamation"></i> <strong>Hinweis:</strong> Dieses Bürgerbeteiligungsportal befindet sich noch in der Entwicklung und wurde nicht offiziell beauftragt.
|
<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">
|
||||||
<button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
|
<button class="btn btn-primary" onclick="closeWelcomeAndShowLogin()">Loslegen</button>
|
||||||
@@ -342,7 +357,7 @@ $news_items = $stmt->fetchAll();
|
|||||||
|
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<!-- Loads JavaScript Dependencies -->
|
<!-- Loads JavaScript Dependencies -->
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
|
|
||||||
<!-- Leaflet 1.9.4 -->
|
<!-- Leaflet 1.9.4 -->
|
||||||
@@ -366,11 +381,18 @@ $news_items = $stmt->fetchAll();
|
|||||||
<!-- SweetAlert2 -->
|
<!-- SweetAlert2 -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.0/dist/sweetalert2.all.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Shepherd.js Library -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@11.2.0/dist/js/shepherd.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Onboarding Logic -->
|
||||||
|
<script src="js/onboarding.js"></script>
|
||||||
|
|
||||||
|
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<!-- Municipality Configuration passed to JavaScript -->
|
<!-- Municipality Configuration passed to JavaScript -->
|
||||||
<!-- ============================================================= -->
|
<!-- ============================================================= -->
|
||||||
<script>
|
<script>
|
||||||
// Municipality Configuration from Database — used by app.js
|
// Municipality Configuration from Database
|
||||||
const MUNICIPALITY = {
|
const MUNICIPALITY = {
|
||||||
id: <?= $municipality['municipality_id'] ?>,
|
id: <?= $municipality['municipality_id'] ?>,
|
||||||
name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
|
name: "<?= htmlspecialchars($municipality['name'], ENT_QUOTES) ?>",
|
||||||
|
|||||||
637
public/js/admin.js
Normal file
637
public/js/admin.js
Normal file
@@ -0,0 +1,637 @@
|
|||||||
|
// =====================================================================
|
||||||
|
// WebGIS Moderation Portal — Application Logic
|
||||||
|
// Initializes Map Preview, loads Contributions from the API,
|
||||||
|
// handles CRUD Workflow, sorting and filtering for Contributions,
|
||||||
|
// Comments and News, and manages all UI Interactions
|
||||||
|
//
|
||||||
|
// Depends on: ADMIN_CONFIG Object set in Moderation Page
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 0: Configuration and Application State
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// API Endpoint as relative Path
|
||||||
|
const API_URL = 'api/contributions.php';
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 1: Page Tab Navigation
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// Restores active Tab after Page Reload
|
||||||
|
const savedTab = sessionStorage.getItem('admin_active_tab');
|
||||||
|
if (savedTab) {
|
||||||
|
// Delays to ensure DOM is ready
|
||||||
|
setTimeout(function () {
|
||||||
|
const tabBtn = document.querySelector('.page-tab[onclick*="' + savedTab + '"]');
|
||||||
|
if (tabBtn) tabBtn.click();
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Page Tab Navigation
|
||||||
|
function showPageTab(tabName) {
|
||||||
|
// Saves active Tab for Persistence after Reload
|
||||||
|
sessionStorage.setItem('admin_active_tab', tabName);
|
||||||
|
|
||||||
|
document.querySelectorAll('.page-tab-content').forEach(function (el) {
|
||||||
|
el.style.display = 'none';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Deactivates all Tab Buttons
|
||||||
|
document.querySelectorAll('.page-tab').forEach(function (el) {
|
||||||
|
el.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Shows selected Tab and activates Button
|
||||||
|
document.getElementById('tab-' + tabName).style.display = 'block';
|
||||||
|
event.currentTarget.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 2: Collapsible Rows for Contributions and Comments
|
||||||
|
// =====================================================================
|
||||||
|
function toggleRow(row) {
|
||||||
|
const wasOpen = row.classList.contains('open');
|
||||||
|
|
||||||
|
// Closes all open Rows
|
||||||
|
document.querySelectorAll('.contribution-row.open').forEach(function (el) {
|
||||||
|
el.classList.remove('open');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Toggles clicked Row
|
||||||
|
if (!wasOpen) {
|
||||||
|
row.classList.add('open');
|
||||||
|
|
||||||
|
// Loads Map Preview if not already loaded
|
||||||
|
const mapDiv = row.querySelector('.detail-map');
|
||||||
|
if (mapDiv && !mapDiv.dataset.loaded) {
|
||||||
|
loadMapPreview(mapDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 3: Details Slider for Maps and Photos
|
||||||
|
// =====================================================================
|
||||||
|
function slideDetail(contributionId, direction) {
|
||||||
|
const slider = document.getElementById('slider-' + contributionId);
|
||||||
|
if (!slider) return;
|
||||||
|
|
||||||
|
const slides = slider.querySelectorAll('.detail-slide');
|
||||||
|
let activeIndex = -1;
|
||||||
|
|
||||||
|
// Finds active Slide
|
||||||
|
slides.forEach(function (slide, i) {
|
||||||
|
if (slide.style.display !== 'none') activeIndex = i;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculates next Slide Index
|
||||||
|
const nextIndex = (activeIndex + direction + slides.length) % slides.length;
|
||||||
|
|
||||||
|
// Switches Slides
|
||||||
|
slides.forEach(function (slide) { slide.style.display = 'none'; });
|
||||||
|
slides[nextIndex].style.display = 'block';
|
||||||
|
|
||||||
|
// Loads Map if switching to Map Slide
|
||||||
|
if (slides[nextIndex].dataset.slide === 'map') {
|
||||||
|
const mapDiv = slides[nextIndex].querySelector('.detail-map');
|
||||||
|
if (mapDiv && !mapDiv.dataset.loaded) {
|
||||||
|
loadMapPreview(mapDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 4: Map Preview (Leaflet Mini Map per Contribution)
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// Erstellt eine Leaflet-Mini-Map in einem Beitrags-Detail-Container.
|
||||||
|
// Lädt alle Beiträge via API und zeigt die Geometrie des entsprechenden Beitrags.
|
||||||
|
// Markiert die Map als geladen (data-loaded="true"), um doppeltes Laden zu verhindern.
|
||||||
|
function loadMapPreview(mapDiv) {
|
||||||
|
const contributionId = mapDiv.dataset.contributionId;
|
||||||
|
|
||||||
|
// Fetches all Contributions to find the Geometry
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('action', 'read');
|
||||||
|
formData.append('municipality_id', ADMIN_CONFIG.id);
|
||||||
|
formData.append('status', 'all');
|
||||||
|
|
||||||
|
fetch(API_URL, { method: 'POST', body: formData })
|
||||||
|
.then(function (r) { return r.json(); })
|
||||||
|
.then(function (data) {
|
||||||
|
if (!data.features) return;
|
||||||
|
|
||||||
|
// Finds specific Contribution
|
||||||
|
const feature = data.features.find(function (f) {
|
||||||
|
return f.properties.contribution_id == contributionId;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!feature) {
|
||||||
|
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Geometrie nicht gefunden.</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Creates Leaflet Mini Map
|
||||||
|
const miniMap = L.map(mapDiv, {
|
||||||
|
zoomControl: false,
|
||||||
|
attributionControl: false,
|
||||||
|
dragging: true,
|
||||||
|
scrollWheelZoom: false
|
||||||
|
});
|
||||||
|
|
||||||
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
||||||
|
maxZoom: 20
|
||||||
|
}).addTo(miniMap);
|
||||||
|
|
||||||
|
// Adds Geometry to Mini Map
|
||||||
|
const geojsonLayer = L.geoJSON(feature, {
|
||||||
|
style: {
|
||||||
|
color: ADMIN_CONFIG.primaryColor,
|
||||||
|
weight: 3,
|
||||||
|
fillOpacity: 0.2
|
||||||
|
},
|
||||||
|
pointToLayer: function (f, latlng) {
|
||||||
|
return L.circleMarker(latlng, {
|
||||||
|
radius: 8,
|
||||||
|
color: '#ffffff',
|
||||||
|
weight: 2,
|
||||||
|
fillColor: ADMIN_CONFIG.primaryColor,
|
||||||
|
fillOpacity: 0.9
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}).addTo(miniMap);
|
||||||
|
|
||||||
|
// Fits Map to Geometry Bounds
|
||||||
|
const bounds = geojsonLayer.getBounds();
|
||||||
|
if (bounds.isValid()) {
|
||||||
|
miniMap.fitBounds(bounds, { padding: [25, 25], maxZoom: 17 });
|
||||||
|
} else {
|
||||||
|
miniMap.setView(ADMIN_CONFIG.center, 15);
|
||||||
|
}
|
||||||
|
|
||||||
|
mapDiv.dataset.loaded = 'true';
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
mapDiv.innerHTML = '<div style="padding:20px;color:#999;text-align:center;font-size:0.8rem;">Karte nicht verfügbar.</div>';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 5: Contributions Filter and Sorting
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// Filters Contributions
|
||||||
|
let currentFilter = 'all';
|
||||||
|
function filterByStatus(status, tabButton) {
|
||||||
|
currentFilter = status;
|
||||||
|
|
||||||
|
// Updates active Tab
|
||||||
|
document.querySelectorAll('.filter-tab').forEach(function (el) {
|
||||||
|
el.classList.remove('active');
|
||||||
|
});
|
||||||
|
tabButton.classList.add('active');
|
||||||
|
|
||||||
|
// Shows or Hides Contribution Rows
|
||||||
|
let visibleCount = 0;
|
||||||
|
document.querySelectorAll('#contributions-container .contribution-row').forEach(function (row) {
|
||||||
|
if (status === 'all' || row.dataset.status === status) {
|
||||||
|
row.style.display = '';
|
||||||
|
visibleCount++;
|
||||||
|
} else {
|
||||||
|
row.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Updates Count Display
|
||||||
|
document.getElementById('visible-count').textContent = visibleCount + ' Beiträge';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sorts Contributions
|
||||||
|
function sortContributions(sortBy) {
|
||||||
|
const container = document.getElementById('contributions-container');
|
||||||
|
const rows = Array.from(container.querySelectorAll('.contribution-row'));
|
||||||
|
|
||||||
|
rows.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);
|
||||||
|
if (sortBy === 'category') return a.dataset.category.localeCompare(b.dataset.category);
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reappends sorted Rows
|
||||||
|
rows.forEach(function (row) { container.appendChild(row); });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 6: Comments Filter and Sorting
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// Filters Comments
|
||||||
|
function filterCommentsByStatus(status, tabButton) {
|
||||||
|
|
||||||
|
// Updates active Tab
|
||||||
|
document.querySelectorAll('#comment-filter-tabs .filter-tab').forEach(function (el) {
|
||||||
|
el.classList.remove('active');
|
||||||
|
});
|
||||||
|
tabButton.classList.add('active');
|
||||||
|
|
||||||
|
// Shows or Hides Comments Rows
|
||||||
|
let visibleCount = 0;
|
||||||
|
document.querySelectorAll('.comment-mod-row').forEach(function (row) {
|
||||||
|
if (status === 'all' || row.dataset.status === status) {
|
||||||
|
row.style.display = '';
|
||||||
|
visibleCount++;
|
||||||
|
} else {
|
||||||
|
row.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Updates Count Display
|
||||||
|
document.getElementById('comment-visible-count').textContent = visibleCount + ' Kommentare';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Sorts Comments
|
||||||
|
function sortCommentRows(sortBy) {
|
||||||
|
const container = document.getElementById('comments-mod-container');
|
||||||
|
const rows = Array.from(container.querySelectorAll('.comment-mod-row'));
|
||||||
|
|
||||||
|
rows.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);
|
||||||
|
if (sortBy === 'contribution') return a.dataset.contribution.localeCompare(b.dataset.contribution);
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
// Reappends sorted Rows
|
||||||
|
rows.forEach(function (row) { container.appendChild(row); });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 7: Helper Functions
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// Sends a POST request to API
|
||||||
|
// promise-based instead of callback-based
|
||||||
|
function apiCall(data) {
|
||||||
|
const formData = new FormData();
|
||||||
|
for (const key in data) {
|
||||||
|
formData.append(key, data[key]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch(API_URL, { method: 'POST', body: formData })
|
||||||
|
.then(function (r) { return r.json(); });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Escapes HTML to prevent Cross-Site Scripting (XSS) in Popups and Lists
|
||||||
|
function escapeHtml(text) {
|
||||||
|
|
||||||
|
if (!text) return '';
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.appendChild(document.createTextNode(text));
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 8: CRUD Operations for Contributions
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// STATUS: Changes Contribution Status
|
||||||
|
function changeStatus(contributionId, newStatus) {
|
||||||
|
const labels = { approved: 'freigeben', rejected: 'ablehnen', pending: 'zurücksetzen' };
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Beitrag ' + labels[newStatus] + '?',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Ja',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: ADMIN_CONFIG.primaryColor
|
||||||
|
}).then(function (result) {
|
||||||
|
if (!result.isConfirmed) return;
|
||||||
|
|
||||||
|
apiCall({
|
||||||
|
action: 'update',
|
||||||
|
contribution_id: contributionId,
|
||||||
|
status: newStatus
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.error) {
|
||||||
|
Swal.fire('Fehler', response.error, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// Reloads Page to reflect Changes
|
||||||
|
location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// UPDATE: Edits existing Contributions
|
||||||
|
function editContribution(contributionId, currentTitle, currentDescription) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Beitrag bearbeiten',
|
||||||
|
html:
|
||||||
|
'<div style="text-align:left;">' +
|
||||||
|
'<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({
|
||||||
|
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(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// DELETE: Deletes existing Contributions
|
||||||
|
function deleteContribution(contributionId) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Beitrag löschen?',
|
||||||
|
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Beitrag löschen',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: '#c62828'
|
||||||
|
}).then(function (result) {
|
||||||
|
if (!result.isConfirmed) return;
|
||||||
|
|
||||||
|
apiCall({
|
||||||
|
action: 'delete',
|
||||||
|
contribution_id: contributionId
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.error) {
|
||||||
|
Swal.fire('Fehler', response.error, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Swal.fire('Gelöscht!', 'Beitrag wurde gelöscht.', 'success')
|
||||||
|
.then(function () { location.reload(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 9: CRUD Operations for Comments
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// STATUS: Changes Comment Status
|
||||||
|
function changeCommentStatus(commentId, newStatus) {
|
||||||
|
const labels = { approved: 'akzeptieren', rejected: 'ablehnen', pending: 'zurücksetzen' };
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Kommentar ' + labels[newStatus] + '?',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Ja',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: ADMIN_CONFIG.primaryColor
|
||||||
|
}).then(function (result) {
|
||||||
|
if (!result.isConfirmed) return;
|
||||||
|
|
||||||
|
apiCall({
|
||||||
|
action: 'update_comment',
|
||||||
|
comment_id: commentId,
|
||||||
|
status: newStatus
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.error) {
|
||||||
|
Swal.fire('Fehler', response.error, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// UPDATE: Edits existing Comments
|
||||||
|
function editModComment(commentId, currentContent) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Kommentar bearbeiten',
|
||||||
|
html:
|
||||||
|
'<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({
|
||||||
|
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(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// DELETE: Deletes existing Comments
|
||||||
|
function deleteModComment(commentId) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Kommentar löschen?',
|
||||||
|
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Löschen',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: '#c62828'
|
||||||
|
}).then(function (result) {
|
||||||
|
if (!result.isConfirmed) return;
|
||||||
|
|
||||||
|
apiCall({
|
||||||
|
action: 'delete_comment',
|
||||||
|
comment_id: commentId
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.error) {
|
||||||
|
Swal.fire('Fehler', response.error, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Swal.fire('Gelöscht!', 'Kommentar wurde entfernt.', 'success')
|
||||||
|
.then(function () { location.reload(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =====================================================================
|
||||||
|
// Block 10: CRUD Operations for News
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
// CREATE: Submits new News Article
|
||||||
|
function createNews() {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Neuigkeit hinzufügen',
|
||||||
|
html:
|
||||||
|
'<div style="text-align:left;">' +
|
||||||
|
'<div style="margin-bottom:12px;">' +
|
||||||
|
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
|
||||||
|
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" placeholder="Titel der Neuigkeit">' +
|
||||||
|
'</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
|
||||||
|
function editNews(newsId, currentTitle, currentContent, currentAuthor) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Neuigkeit bearbeiten',
|
||||||
|
html:
|
||||||
|
'<div style="text-align:left;">' +
|
||||||
|
'<div style="margin-bottom:12px;">' +
|
||||||
|
'<label style="display:block;font-weight:600;font-size:1.15rem;margin-bottom:4px;">Titel</label>' +
|
||||||
|
'<input id="swal-news-title" class="swal2-input" style="margin:0;width:100%;" value="' + escapeHtml(currentTitle) + '">' +
|
||||||
|
'</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({
|
||||||
|
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(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// DELETE: Deletes existing News
|
||||||
|
function deleteNews(newsId) {
|
||||||
|
Swal.fire({
|
||||||
|
title: 'Neuigkeit löschen?',
|
||||||
|
text: 'Diese Aktion kann nicht rückgängig gemacht werden.',
|
||||||
|
icon: 'warning',
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: 'Löschen',
|
||||||
|
cancelButtonText: 'Abbrechen',
|
||||||
|
confirmButtonColor: '#c62828'
|
||||||
|
}).then(function (result) {
|
||||||
|
if (!result.isConfirmed) return;
|
||||||
|
|
||||||
|
apiCall({
|
||||||
|
action: 'delete_news',
|
||||||
|
news_id: newsId
|
||||||
|
}).then(function (response) {
|
||||||
|
if (response.error) {
|
||||||
|
Swal.fire('Fehler', response.error, 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Swal.fire('Gelöscht!', 'Neuigkeit wurde gelöscht.', 'success')
|
||||||
|
.then(function () { location.reload(); });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
@@ -3,9 +3,7 @@
|
|||||||
// Initializes Leaflet Map, loads Contributions from the API,
|
// Initializes Leaflet Map, loads Contributions from the API,
|
||||||
// handles CRUD Workflow, and manages all UI Interactions.
|
// handles CRUD Workflow, and manages all UI Interactions.
|
||||||
//
|
//
|
||||||
// Depends on: MUNICIPALITY Object set in Main Page, Leaflet, Geoman,
|
// Depends on: MUNICIPALITY Object set in Citizen Portal
|
||||||
// Sidebar, Geocoder, PolylineMeasure, Fullscreen,
|
|
||||||
// and SweetAlert2 Plugins.
|
|
||||||
// =====================================================================
|
// =====================================================================
|
||||||
|
|
||||||
|
|
||||||
@@ -980,7 +978,15 @@ function showInfoModal() {
|
|||||||
'<strong>' + MUNICIPALITY.name + '</strong> mitzuwirken.</p>' +
|
'<strong>' + MUNICIPALITY.name + '</strong> mitzuwirken.</p>' +
|
||||||
'<p style="text-align:left;line-height:1.6;">Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
|
'<p style="text-align:left;line-height:1.6;">Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
|
||||||
'mithilfe der Zeichenwerkzeuge auf der Karte ein.</p>',
|
'mithilfe der Zeichenwerkzeuge auf der Karte ein.</p>',
|
||||||
confirmButtonColor: MUNICIPALITY.primaryColor
|
showDenyButton: true,
|
||||||
|
confirmButtonText: 'Schließen',
|
||||||
|
denyButtonText: '<i class="fa-solid fa-route"></i> Tutorial starten',
|
||||||
|
confirmButtonColor: MUNICIPALITY.primaryColor,
|
||||||
|
denyButtonColor: '#546E7A'
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.isDenied && typeof restartOnboarding === 'function') {
|
||||||
|
restartOnboarding();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
277
public/js/onboarding.js
Normal file
277
public/js/onboarding.js
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
// =====================================================================
|
||||||
|
// WebGIS Citizen Participation Portal — Onboarding Tour
|
||||||
|
// Guides Users through the Participation Portal
|
||||||
|
// =====================================================================
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Block 1: Onboarding Configuration
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
// ONBOARDING_MODE — Controls when the Tutorial is shown:
|
||||||
|
const ONBOARDING_MODE = 'once';
|
||||||
|
// 'once' — Shown on first Visit, stored in localStorage
|
||||||
|
// 'session' — Shown per Browser Session, stored in sessionStorage
|
||||||
|
// 'always' — Shows always, nothing stored
|
||||||
|
|
||||||
|
// Prevents double Initialization
|
||||||
|
let onboardingStarted = false;
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Block 2: Tour Initialization
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
function initOnboardingTour() {
|
||||||
|
|
||||||
|
// Checks if Tutorial should be shown based on Onboarding Mode
|
||||||
|
if (ONBOARDING_MODE === 'once' && localStorage.getItem('webgis_onboarding_done')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (ONBOARDING_MODE === 'session' && sessionStorage.getItem('webgis_onboarding_done')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Waits for Welcome and Login Modals to be closed
|
||||||
|
waitForModalsToClose(function () {
|
||||||
|
setTimeout(startTour, 600);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Block 3: Modal Watcher — Starts Tour other Welcome and Login Modals closed
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
function waitForModalsToClose(callback) {
|
||||||
|
const welcomeModal = document.getElementById('welcome-modal');
|
||||||
|
const loginModal = document.getElementById('login-modal');
|
||||||
|
|
||||||
|
const checkInterval = setInterval(function () {
|
||||||
|
const welcomeHidden = !welcomeModal || welcomeModal.style.display === 'none' || welcomeModal.style.display === '';
|
||||||
|
const loginHidden = !loginModal || loginModal.style.display === 'none' || loginModal.style.display === '';
|
||||||
|
|
||||||
|
if (welcomeHidden && loginHidden) {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
|
||||||
|
// Safety Timeout
|
||||||
|
setTimeout(function () {
|
||||||
|
clearInterval(checkInterval);
|
||||||
|
callback();
|
||||||
|
}, 30000);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Block 4: Tour Definition
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
function startTour() {
|
||||||
|
// Prevents double Start
|
||||||
|
if (onboardingStarted) return;
|
||||||
|
onboardingStarted = true;
|
||||||
|
|
||||||
|
const tour = new Shepherd.Tour({
|
||||||
|
useModalOverlay: true,
|
||||||
|
defaultStepOptions: {
|
||||||
|
cancelIcon: { enabled: true },
|
||||||
|
scrollTo: false,
|
||||||
|
classes: 'onboarding-step',
|
||||||
|
popperOptions: {
|
||||||
|
modifiers: [
|
||||||
|
{ name: 'offset', options: { offset: [0, 14] } }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Step 1: Welcome
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.addStep({
|
||||||
|
id: 'welcome',
|
||||||
|
title: '<i class="fa-solid fa-hand-wave"></i> Wilkommen bei der Mitmachkarte!',
|
||||||
|
text: 'Dieses interaktive Tutorial zeigt Ihnen die Kernfunktionen der Mitmachkarte.' +
|
||||||
|
'<br><br><span style="font-size:0.8rem;color:var(--color-text-secondary);">Sie können das Tutorial jederzeit durch den Hilfe-Tab der Seitenleiste wiederholen.</span>',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Überspringen',
|
||||||
|
action: tour.cancel,
|
||||||
|
classes: 'shepherd-button-secondary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Los geht\'s <i class="fa-solid fa-arrow-right"></i>',
|
||||||
|
action: tour.next,
|
||||||
|
classes: 'shepherd-button-primary'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Step 2: Drawing Tools
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.addStep({
|
||||||
|
id: 'drawing-tools',
|
||||||
|
title: '<i class="fa-solid fa-pencil"></i> Beitrag hinzufügen',
|
||||||
|
text: 'Verwenden Sie die <strong>Zeichenwerkzeuge</strong>, um Hinweise, Anregungen und Vorschläge auf der Mitmachkarte als Punkte, Linien oder Flächen hinzuzufügen.',
|
||||||
|
attachTo: {
|
||||||
|
element: '.leaflet-pm-toolbar',
|
||||||
|
on: 'left'
|
||||||
|
},
|
||||||
|
beforeShowPromise: function () {
|
||||||
|
return new Promise(function (resolve) {
|
||||||
|
sidebar.close();
|
||||||
|
setTimeout(resolve, 300);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
||||||
|
action: tour.back,
|
||||||
|
classes: 'shepherd-button-secondary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
||||||
|
action: tour.next,
|
||||||
|
classes: 'shepherd-button-primary'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Step 3: Address Search
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.addStep({
|
||||||
|
id: 'address-search',
|
||||||
|
title: '<i class="fa-solid fa-magnifying-glass"></i> Adresssuche',
|
||||||
|
text: 'Verwenden Sie die <strong>Adresssuche</strong>, um schnell den richtigen Ort auf der Mitmachkarte zu finden.',
|
||||||
|
attachTo: {
|
||||||
|
element: '.leaflet-control-geocoder',
|
||||||
|
on: 'left'
|
||||||
|
},
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
||||||
|
action: tour.back,
|
||||||
|
classes: 'shepherd-button-secondary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
||||||
|
action: tour.next,
|
||||||
|
classes: 'shepherd-button-primary'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Step 4: Layer Control
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.addStep({
|
||||||
|
id: 'layer-control',
|
||||||
|
title: '<i class="fa-solid fa-layer-group"></i> Kartenansicht',
|
||||||
|
text: 'Wechseln Sie zwischen verschiedenen <strong>Hintergrundkarten</strong> und <strong>Satellitenbildern</strong>.',
|
||||||
|
attachTo: {
|
||||||
|
element: '.leaflet-control-layers',
|
||||||
|
on: 'left'
|
||||||
|
},
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
||||||
|
action: tour.back,
|
||||||
|
classes: 'shepherd-button-secondary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Weiter <i class="fa-solid fa-arrow-right"></i>',
|
||||||
|
action: tour.next,
|
||||||
|
classes: 'shepherd-button-primary'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Step 5: Sidebar
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.addStep({
|
||||||
|
id: 'sidebar',
|
||||||
|
title: '<i class="fa-solid fa-bars"></i> Seitenleiste',
|
||||||
|
text: 'In der Seitenleiste finden Sie <strong>Hilfestellungen</strong>, <strong>Listenansichten</strong> und <strong>Neuigkeiten</strong>.',
|
||||||
|
attachTo: {
|
||||||
|
element: '#sidebar',
|
||||||
|
on: 'right'
|
||||||
|
},
|
||||||
|
beforeShowPromise: function () {
|
||||||
|
return new Promise(function (resolve) {
|
||||||
|
sidebar.open('tab-help');
|
||||||
|
setTimeout(resolve, 400);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: '<i class="fa-solid fa-arrow-left"></i> Zurück',
|
||||||
|
action: tour.back,
|
||||||
|
classes: 'shepherd-button-secondary'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: 'Tutorial abschließen <i class="fa-solid fa-check"></i>',
|
||||||
|
action: tour.next,
|
||||||
|
classes: 'shepherd-button-primary'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
// Completion and Cancellation
|
||||||
|
// -----------------------------------------------------------------
|
||||||
|
tour.on('complete', function () {
|
||||||
|
markOnboardingDone();
|
||||||
|
onboardingStarted = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
tour.on('cancel', function () {
|
||||||
|
markOnboardingDone();
|
||||||
|
onboardingStarted = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
tour.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Marks Onboarding as completed
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
function markOnboardingDone() {
|
||||||
|
if (ONBOARDING_MODE === 'once') {
|
||||||
|
localStorage.setItem('webgis_onboarding_done', 'true');
|
||||||
|
} else if (ONBOARDING_MODE === 'session') {
|
||||||
|
sessionStorage.setItem('webgis_onboarding_done', 'true');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Manual Tour Restart
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
function restartOnboarding() {
|
||||||
|
localStorage.removeItem('webgis_onboarding_done');
|
||||||
|
sessionStorage.removeItem('webgis_onboarding_done');
|
||||||
|
onboardingStarted = false;
|
||||||
|
startTour();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// =================================================================
|
||||||
|
// Auto-Start on Page Load
|
||||||
|
// =================================================================
|
||||||
|
|
||||||
|
initOnboardingTour();
|
||||||
@@ -764,6 +764,123 @@ select.form-input { cursor: pointer; }
|
|||||||
.popup-comment-submit:hover { filter: brightness(1.15); }
|
.popup-comment-submit:hover { filter: brightness(1.15); }
|
||||||
|
|
||||||
|
|
||||||
|
/* -----------------------------------------------------------------
|
||||||
|
4.9 Onboarding Tour (Shepherd.js Overrides)
|
||||||
|
----------------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Step Container */
|
||||||
|
.shepherd-element {
|
||||||
|
max-width: 340px;
|
||||||
|
border-radius: 12px !important;
|
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
|
||||||
|
font-family: var(--font-body) !important;
|
||||||
|
z-index: 2100 !important;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-content {
|
||||||
|
border-radius: 12px !important;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.shepherd-element .shepherd-header {
|
||||||
|
background: var(--color-primary) !important;
|
||||||
|
padding: 14px 20px !important;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-title {
|
||||||
|
color: white !important;
|
||||||
|
font-size: 1rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
font-family: var(--font-body) !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
gap: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-cancel-icon {
|
||||||
|
color: white !important;
|
||||||
|
opacity: 0.7;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-cancel-icon:hover { opacity: 1; }
|
||||||
|
|
||||||
|
/* Body Text */
|
||||||
|
.shepherd-element .shepherd-text {
|
||||||
|
padding: 16px 20px !important;
|
||||||
|
font-size: 0.88rem !important;
|
||||||
|
line-height: 1.6 !important;
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer Buttons */
|
||||||
|
.shepherd-element .shepherd-footer {
|
||||||
|
padding: 0 20px 16px 20px !important;
|
||||||
|
border-top: none !important;
|
||||||
|
display: flex !important;
|
||||||
|
justify-content: flex-end !important;
|
||||||
|
gap: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-button {
|
||||||
|
border: none !important;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
padding: 8px 16px !important;
|
||||||
|
font-size: 0.85rem !important;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
font-family: var(--font-body) !important;
|
||||||
|
cursor: pointer !important;
|
||||||
|
transition: filter 150ms ease !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-element .shepherd-button:hover { filter: brightness(1.1); }
|
||||||
|
|
||||||
|
/* Primary Button */
|
||||||
|
.shepherd-button-primary {
|
||||||
|
background: var(--color-primary) !important;
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Secondary Button */
|
||||||
|
.shepherd-button-secondary {
|
||||||
|
background: var(--color-bg) !important;
|
||||||
|
color: var(--color-text) !important;
|
||||||
|
border: 1px solid var(--color-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shepherd-button-secondary:hover {
|
||||||
|
background: var(--color-border) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal Overlay */
|
||||||
|
.shepherd-modal-overlay-container {
|
||||||
|
z-index: 2050 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Arrow Colors */
|
||||||
|
.shepherd-arrow:before {
|
||||||
|
background: var(--color-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Welcome Step */
|
||||||
|
.shepherd-element:not([data-popper-placement]) {
|
||||||
|
position: fixed !important;
|
||||||
|
top: 50% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mobile */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.shepherd-element { max-width: 300px !important; }
|
||||||
|
.shepherd-element .shepherd-text { font-size: 0.82rem !important; }
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =================================================================
|
/* =================================================================
|
||||||
SECTION 5: Admin-specific Styles (admin.php)
|
SECTION 5: Admin-specific Styles (admin.php)
|
||||||
================================================================= */
|
================================================================= */
|
||||||
|
|||||||
Reference in New Issue
Block a user