';
layer.bindPopup(html, { maxWidth: 320, minWidth: 240 });
// Tooltip on Hover
layer.bindTooltip(cat.icon + ' ' + escapeHtml(props.title), {
direction: 'top',
offset: [0, -10]
});
}
// =====================================================================
// Block 10: CRUD Operations
// =====================================================================
// CREATE — Submit new Contribution from Modal
function submitCreate() {
var category = document.getElementById('create-category').value;
var title = document.getElementById('create-title').value.trim();
var description = document.getElementById('create-description').value.trim();
var geom = document.getElementById('create-geom').value;
var geomType = document.getElementById('create-geom-type').value;
// Validate
if (!category) {
Swal.fire('Kategorie fehlt', 'Bitte wählen Sie eine Kategorie aus.', 'warning');
return;
}
if (!title) {
Swal.fire('Titel fehlt', 'Bitte geben Sie einen Titel ein.', 'warning');
return;
}
if (!geom) {
Swal.fire('Geometrie fehlt', 'Bitte zeichnen Sie zuerst ein Objekt auf der Karte.', 'warning');
return;
}
apiCall({
action: 'create',
municipality_id: MUNICIPALITY.id,
category: category,
title: title,
description: description,
geom: geom,
geom_type: geomType,
author_name: currentUser
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung veröffentlicht.', 'success');
closeCreateModal();
loadContributions();
});
}
// Cancel Create — close Modal and clear Form
function cancelCreate() {
closeCreateModal();
}
function closeCreateModal() {
document.getElementById('create-modal').style.display = 'none';
document.getElementById('create-category').value = '';
document.getElementById('create-title').value = '';
document.getElementById('create-description').value = '';
document.getElementById('create-geom').value = '';
document.getElementById('create-geom-type').value = '';
drawnGeometry = null;
drawnGeomType = null;
}
// UPDATE — Edit an existing Contribution
function editContribution(contributionId) {
// Find Contribution in local Data
var contribution = contributionsData.find(function (f) {
return f.properties.contribution_id === contributionId;
});
if (!contribution) return;
var props = contribution.properties;
Swal.fire({
title: 'Beitrag bearbeiten',
html:
'
' +
'' +
'' +
'' +
'' +
'
',
showCancelButton: true,
confirmButtonText: 'Speichern',
cancelButtonText: 'Abbrechen',
confirmButtonColor: MUNICIPALITY.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
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
Swal.fire('Gespeichert!', 'Der Beitrag wurde aktualisiert.', 'success');
loadContributions();
});
});
}
// DELETE — Delete a 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: 'Löschen',
cancelButtonText: 'Abbrechen',
confirmButtonColor: '#c62828'
}).then(function (result) {
if (!result.isConfirmed) return;
apiCall({
action: 'delete',
contribution_id: contributionId
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
Swal.fire('Gelöscht!', 'Der Beitrag wurde entfernt.', 'success');
map.closePopup();
loadContributions();
});
});
}
// VOTE — Like or Dislike a Contribution
function voteContribution(contributionId, voteType) {
if (!currentUser) {
Swal.fire('Bitte anmelden', 'Sie müssen sich anmelden, um abzustimmen.', 'info');
showLoginModal();
return;
}
apiCall({
action: 'vote',
contribution_id: contributionId,
voter_name: currentUser,
vote_type: voteType
}, function (response) {
if (response.error) {
Swal.fire('Hinweis', response.error, 'info');
return;
}
// Update Vote Counts in the Popup without reloading everything
loadContributions();
});
}
// =====================================================================
// Block 11: Sidebar — Contributions List
// =====================================================================
function updateContributionsList() {
var container = document.getElementById('contributions-list');
var searchInput = document.getElementById('list-search-input');
var searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
// Filter by active Categories and Search Term
var filtered = contributionsData.filter(function (f) {
var props = f.properties;
var matchesCategory = activeFilters.indexOf(props.category) !== -1;
var matchesSearch = !searchTerm ||
props.title.toLowerCase().indexOf(searchTerm) !== -1 ||
(props.description && props.description.toLowerCase().indexOf(searchTerm) !== -1) ||
props.author_name.toLowerCase().indexOf(searchTerm) !== -1;
return matchesCategory && matchesSearch;
});
// Sort by Date (newest first)
filtered.sort(function (a, b) {
return new Date(b.properties.created_at) - new Date(a.properties.created_at);
});
// Build HTML
if (filtered.length === 0) {
container.innerHTML = '
Keine Beiträge gefunden.
';
return;
}
var html = '';
filtered.forEach(function (f) {
var props = f.properties;
var cat = CATEGORIES[props.category] || CATEGORIES.other;
var date = new Date(props.created_at).toLocaleDateString('de-DE');
html += '' +
'
';
});
container.innerHTML = html;
}
// Fly to a Contribution on the Map and open its Popup
function flyToContribution(contributionId) {
if (!contributionsLayer) return;
contributionsLayer.eachLayer(function (layer) {
if (layer.feature && layer.feature.properties.contribution_id === contributionId) {
// Zoom 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 });
}
// Open Popup
layer.openPopup();
// Close 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
// =====================================================================
// Build Category Filter Checkboxes
function buildCategoryFilter() {
var container = document.getElementById('category-filter');
var html = '';
for (var key in CATEGORIES) {
var cat = CATEGORIES[key];
var checked = activeFilters.indexOf(key) !== -1 ? 'checked' : '';
html += '' +
'';
}
container.innerHTML = html;
}
// Toggle a Category Filter on/off
function toggleCategoryFilter(checkbox) {
var category = checkbox.value;
if (checkbox.checked) {
if (activeFilters.indexOf(category) === -1) {
activeFilters.push(category);
}
} else {
activeFilters = activeFilters.filter(function (c) { return c !== category; });
}
// Re-filter the Map Layer
if (contributionsLayer) {
contributionsLayer.eachLayer(function (layer) {
if (layer.feature) {
var cat = layer.feature.properties.category;
if (activeFilters.indexOf(cat) !== -1) {
layer.setStyle({ opacity: 1, fillOpacity: layer.feature.geometry.type === 'Point' ? 0.9 : 0.25 });
if (layer.setRadius) layer.setRadius(8);
} else {
layer.setStyle({ opacity: 0, fillOpacity: 0 });
if (layer.setRadius) layer.setRadius(0);
}
}
});
}
// Update List
updateContributionsList();
}
// Update Statistics in Home Tab
function updateStatistics() {
var container = document.getElementById('stats-container');
var total = contributionsData.length;
// Count per Category
var counts = {};
contributionsData.forEach(function (f) {
var cat = f.properties.category;
counts[cat] = (counts[cat] || 0) + 1;
});
var html = '
' + total + ' Beiträge insgesamt
';
for (var key in CATEGORIES) {
var cat = CATEGORIES[key];
var count = counts[key] || 0;
if (count > 0) {
html += '
' +
'' +
cat.label + ': ' + count +
'
';
}
}
container.innerHTML = html;
}
// =====================================================================
// Block 13: Modals — Welcome, Login, Info, Privacy, Imprint
// =====================================================================
// Welcome Modal — show on first Visit
function checkWelcomeModal() {
var 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
function showLoginModal() {
document.getElementById('login-modal').style.display = 'flex';
document.getElementById('user-name-input').value = currentUser;
document.getElementById('user-name-input').focus();
}
function submitLogin() {
var 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.getElementById('login-modal').style.display = 'none';
}
function skipLogin() {
document.getElementById('login-modal').style.display = 'none';
}
// Info Modal
function showInfoModal() {
Swal.fire({
title: 'Über das Portal',
html: '
Das Bürgerbeteiligungsportal ermöglicht es ' +
'Bürgerinnen und Bürgern sowie der Stadtverwaltung, gemeinsam an der Gestaltung von ' +
'' + MUNICIPALITY.name + ' mitzuwirken.
' +
'
Tragen Sie Hinweise, Ideen und Verbesserungsvorschläge ' +
'direkt auf der Karte ein.
Dieses Portal speichert die von Ihnen ' +
'eingegebenen Daten (Name, Beiträge, Bewertungen) zur Durchführung der Bürgerbeteiligung.
' +
'
Ihre Daten werden nicht an Dritte weitergegeben. ' +
'Details entnehmen Sie bitte der vollständigen Datenschutzerklärung der Stadt ' +
MUNICIPALITY.name + '.
Die vollständigen Angaben gemäß § 5 TMG ' +
'werden hier ergänzt, sobald das Portal in den Produktivbetrieb geht.
',
confirmButtonColor: MUNICIPALITY.primaryColor
});
}
// =====================================================================
// Block 14: Mobile Navigation
// =====================================================================
function toggleMobileNav() {
var nav = document.querySelector('.header-nav');
nav.classList.toggle('open');
}
// Close Mobile Nav when clicking outside
document.addEventListener('click', function (e) {
var nav = document.querySelector('.header-nav');
var toggle = document.querySelector('.header-menu-toggle');
if (nav.classList.contains('open') && !nav.contains(e.target) && !toggle.contains(e.target)) {
nav.classList.remove('open');
}
});
// Close 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
// =====================================================================
// Escape HTML to prevent XSS in Popups and Lists
function escapeHtml(text) {
if (!text) return '';
var div = document.createElement('div');
div.appendChild(document.createTextNode(text));
return div.innerHTML;
}
// =====================================================================
// Block 16: Application Startup
// =====================================================================
// Initialize Category Filter in Sidebar
buildCategoryFilter();
// Load Contributions from API
loadContributions();
// Show Welcome Modal on first Visit
checkWelcomeModal();