';
});
container.innerHTML = html;
}
// Flies to a Contribution on the Map and open Popup
function flyToContribution(contributionId) {
if (!contributionsLayer) return;
contributionsLayer.eachLayer(function (layer) {
if (layer.feature && layer.feature.properties.contribution_id === contributionId) {
// Zooms to Feature
if (layer.getLatLng) {
// Point Feature
map.flyTo(layer.getLatLng(), 17);
} else if (layer.getBounds) {
// Line or Polygon Feature
map.flyToBounds(layer.getBounds(), { maxZoom: 17 });
}
// Opens Popup
layer.openPopup();
// Closes Sidebar on Mobile
if (window.innerWidth < 769) {
sidebar.close();
}
}
});
}
// Search Input Event Listener
document.getElementById('list-search-input').addEventListener('input', function () {
updateContributionsList();
});
// =====================================================================
// Block 12: Sidebar Category Filter and Statistics
// =====================================================================
// Builds Category Filter Checkboxes with Counts
function buildCategoryFilter() {
const container = document.getElementById('category-filter');
const counts = {};
contributionsData.forEach(function (f) {
const cat = f.properties.category;
counts[cat] = (counts[cat] || 0) + 1;
});
const total = contributionsData.length;
let html = '';
for (const key in CATEGORIES) {
const cat = CATEGORIES[key];
const checked = activeFilters.indexOf(key) !== -1 ? 'checked' : '';
const count = counts[key] || 0;
html += '';
}
html += '
' + total + ' Beiträge insgesamt
';
container.innerHTML = html;
}
// Toggles a Category Filter on or off
function toggleCategoryFilter(checkbox) {
const category = checkbox.value;
if (checkbox.checked) {
if (activeFilters.indexOf(category) === -1) {
activeFilters.push(category);
}
} else {
activeFilters = activeFilters.filter(function (c) { return c !== category; });
}
// Refilters Map Layer
if (contributionsLayer) {
contributionsLayer.eachLayer(function (layer) {
if (layer.feature) {
const cat = layer.feature.properties.category;
if (activeFilters.indexOf(cat) !== -1) {
const catDef = CATEGORIES[cat] || CATEGORIES.other;
layer.setStyle({
color: catDef.color,
weight: 3,
opacity: 0.8,
fillColor: catDef.color,
fillOpacity: 0.25
});
if (layer.setRadius) layer.setRadius(8);
layer.options.interactive = true;
} else {
layer.setStyle({ opacity: 0, fillOpacity: 0 });
if (layer.setRadius) layer.setRadius(0);
layer.options.interactive = false;
layer.closePopup();
layer.closeTooltip();
}
}
});
}
// Updates List
updateContributionsList();
}
// =====================================================================
// Block 13: Modals — Welcome, Login, Info, Privacy, Imprint
// =====================================================================
// Welcome Modal shows on new Visits
function checkWelcomeModal() {
const hasVisited = localStorage.getItem('webgis_welcomed');
if (!hasVisited) {
document.getElementById('welcome-modal').style.display = 'flex';
}
}
function closeWelcomeAndShowLogin() {
localStorage.setItem('webgis_welcomed', 'true');
document.getElementById('welcome-modal').style.display = 'none';
showLoginModal();
}
// Login Modal shows new Session
function showLoginModal() {
document.getElementById('login-modal').style.display = 'flex';
document.getElementById('user-name-input').value = currentUser;
document.getElementById('user-name-input').focus();
}
function submitLogin() {
const name = document.getElementById('user-name-input').value.trim();
if (!name) {
Swal.fire('Name eingeben', 'Bitte geben Sie Ihren Namen ein.', 'warning');
return;
}
currentUser = name;
sessionStorage.setItem('webgis_user', currentUser);
document.cookie = 'webgis_user=' + encodeURIComponent(name) + ';path=/;max-age=31536000;SameSite=Lax';
document.getElementById('login-modal').style.display = 'none';
// Open Create Modal if Geometry is pending
if (drawnGeometry) {
document.getElementById('create-geom').value = JSON.stringify(drawnGeometry);
document.getElementById('create-geom-type').value = drawnGeomType;
document.getElementById('create-modal').style.display = 'flex';
}
}
function skipLogin() {
document.getElementById('login-modal').style.display = 'none';
}
// Info Modal
function showInfoModal() {
Swal.fire({
title: 'Informationen',
html: '
Das Bürgerbeteiligungsportal gestattet ' +
'Bürgerinnen und Bürgern sowie der Stadtverwaltung, gemeinsam an der Gestaltung von ' +
'' + MUNICIPALITY.name + ' mitzuwirken.
' +
'
Bitte tragen Sie Hinweise, Anregungen und Vorschläge ' +
'mithilfe der Zeichenwerkzeuge auf der Karte ein.
',
showDenyButton: true,
confirmButtonText: 'Schließen',
denyButtonText: ' Tutorial starten',
confirmButtonColor: MUNICIPALITY.primaryColor,
denyButtonColor: '#546E7A'
}).then(function (result) {
if (result.isDenied && typeof restartOnboarding === 'function') {
restartOnboarding();
}
});
}
// =====================================================================
// Block 14: Mobile Navigation
// =====================================================================
function toggleMobileNav() {
const nav = document.querySelector('.header-nav');
nav.classList.toggle('open');
}
// Closes Mobile Nav when clicking outside
document.addEventListener('click', function (e) {
const nav = document.querySelector('.header-nav');
const toggle = document.querySelector('.header-menu-toggle');
if (nav.classList.contains('open') && !nav.contains(e.target) && !toggle.contains(e.target)) {
nav.classList.remove('open');
}
});
// Closes Modals on Escape Key
document.addEventListener('keydown', function (e) {
if (e.key === 'Escape') {
document.getElementById('welcome-modal').style.display = 'none';
document.getElementById('login-modal').style.display = 'none';
document.getElementById('create-modal').style.display = 'none';
}
});
// =====================================================================
// Block 15: Utility Functions
// =====================================================================
// 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;
}
// Returns a colored Font Awesome Icon HTML String for a Category
function categoryIcon(cat) {
return '';
}
// Reverse Geocodes Coordinates and saves Address to Contribution via API
function reverseGeocode(contributionId, lat, lng) {
fetch('https://nominatim.openstreetmap.org/reverse?format=json&lat=' + lat + '&lon=' + lng + '&zoom=18&addressdetails=1', {
headers: { 'Accept-Language': 'de' }
})
.then(function (r) { return r.json(); })
.then(function (data) {
if (data.display_name) {
const addr = data.address || {};
const parts = [];
if (addr.road) parts.push(addr.road + (addr.house_number ? ' ' + addr.house_number : ''));
if (addr.city || addr.town || addr.village) parts.push(addr.city || addr.town || addr.village);
const shortAddress = parts.length > 0 ? parts.join(', ') : data.display_name.split(',').slice(0, 2).join(',');
// Saves Address to Database via API
apiCall({
action: 'update',
contribution_id: contributionId,
address: shortAddress
}, function () {});
}
})
.catch(function () {});
}
// Filters News Items in Sidebar by Search Term
function filterNews() {
const searchTerm = document.getElementById('news-search-input').value.toLowerCase();
const newsItems = document.querySelectorAll('#news-list .news-item');
newsItems.forEach(function (item) {
const title = item.dataset.title || '';
const content = item.dataset.content || '';
const author = item.dataset.author || '';
// Shows Item if Search Term matches Title, Content or Author
if (!searchTerm || title.indexOf(searchTerm) !== -1 || content.indexOf(searchTerm) !== -1 || author.indexOf(searchTerm) !== -1) {
item.style.display = '';
} else {
item.style.display = 'none';
}
});
}
// Loads and Displays Comments forContributions in Popups
function loadComments(contributionId) {
apiCall({
action: 'read_comments',
contribution_id: contributionId
}, function (response) {
const listContainer = document.getElementById('comments-list-' + contributionId);
const countSpan = document.getElementById('comment-count-' + contributionId);
if (!listContainer) return;
if (response.error || !response.comments || response.comments.length === 0) {
listContainer.innerHTML = '
Noch keine Kommentare.
';
if (countSpan) countSpan.textContent = '(0)';
return;
}
if (countSpan) countSpan.textContent = '(' + response.count + ')';
let html = '';
response.comments.forEach(function (comment) {
const commentDate = new Date(comment.created_at).toLocaleDateString('de-DE');
const canDelete = comment.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN);
html += '