diff --git a/public/js/app.js b/public/js/app.js
new file mode 100644
index 0000000..6dcb3a5
--- /dev/null
+++ b/public/js/app.js
@@ -0,0 +1,890 @@
+// =====================================================================
+// WebGIS Citizen Participation Portal — Application Logic
+// Initializes the Leaflet Map, loads Contributions from the API,
+// handles the CRUD Workflow, and manages all UI Interactions.
+//
+// Depends on: MUNICIPALITY Object (set in index.php), Leaflet, Geoman,
+// Sidebar v2, Geocoder, PolylineMeasure, Fullscreen, SweetAlert2
+// =====================================================================
+
+
+// =====================================================================
+// Block 1: Configuration and Application State
+// =====================================================================
+
+// API Endpoint — relative Path from public/ to api/
+var API_URL = '../api/contributions.php';
+
+// Current User Name — set via Login Modal, stored in sessionStorage
+var currentUser = sessionStorage.getItem('webgis_user') || '';
+
+// Category Definitions with Labels, Icons, and Colors
+var CATEGORIES = {
+ mobility: { label: 'Mobilität', icon: '🚲', color: '#1565C0', faIcon: 'fa-bicycle' },
+ building: { label: 'Bauen', icon: '🏗️', color: '#E65100', faIcon: 'fa-helmet-safety' },
+ energy: { label: 'Energie', icon: '⚡', color: '#F9A825', faIcon: 'fa-bolt' },
+ environment: { label: 'Umwelt', icon: '🌳', color: '#2E7D32', faIcon: 'fa-tree' },
+ industry: { label: 'Industrie', icon: '🏭', color: '#6A1B9A', faIcon: 'fa-industry' },
+ consumption: { label: 'Konsum', icon: '🛒', color: '#AD1457', faIcon: 'fa-cart-shopping' },
+ other: { label: 'Sonstiges', icon: '📌', color: '#546E7A', faIcon: 'fa-map-pin' }
+};
+
+// Application State
+var map; // Leaflet Map Instance
+var sidebar; // Sidebar Instance
+var contributionsLayer; // GeoJSON Layer holding all Contributions
+var contributionsData = []; // Raw Contribution Data Array
+var activeFilters = Object.keys(CATEGORIES); // Active Category Filters (all enabled by Default)
+var drawnGeometry = null; // Temporary Storage for Geometry drawn with Geoman
+var drawnGeomType = null; // Temporary Storage for Geometry Type
+
+
+// =====================================================================
+// Block 2: Map Initialization
+// =====================================================================
+
+map = L.map('map', {
+ center: MUNICIPALITY.center,
+ zoom: MUNICIPALITY.zoom,
+ zoomControl: false, // Added manually in Block 3 for Position Control
+ attributionControl: true
+});
+
+
+// =====================================================================
+// Block 3: Basemaps and Layer Control
+// =====================================================================
+
+// Basemap Tile Layers
+var basemapOSM = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+ attribution: '© OpenStreetMap ',
+ maxZoom: 20
+});
+
+var basemapCartoDB = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
+ attribution: '© CARTO ',
+ maxZoom: 20
+});
+
+var basemapSatellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+ attribution: '© Esri ',
+ maxZoom: 20
+});
+
+var basemapTopo = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
+ attribution: '© OpenTopoMap ',
+ maxZoom: 18
+});
+
+// Set Default Basemap
+basemapCartoDB.addTo(map);
+
+// Layer Control
+var basemaps = {
+ 'OpenStreetMap': basemapOSM,
+ 'CartoDB (hell)': basemapCartoDB,
+ 'Satellit (Esri)': basemapSatellite,
+ 'Topographisch': basemapTopo
+};
+
+var overlays = {}; // Populated later with Contribution Layer
+
+var layerControl = L.control.layers(basemaps, overlays, {
+ position: 'topright',
+ collapsed: true
+}).addTo(map);
+
+
+// =====================================================================
+// Block 4: Map Controls
+// =====================================================================
+
+// Zoom Control (top right)
+L.control.zoom({
+ position: 'topright'
+}).addTo(map);
+
+// Scale Bar (bottom right)
+L.control.scale({
+ position: 'bottomright',
+ maxWidth: 200,
+ imperial: false
+}).addTo(map);
+
+// Fullscreen Button
+L.control.fullscreen({
+ position: 'topright',
+ title: 'Vollbild',
+ titleCancel: 'Vollbild beenden'
+}).addTo(map);
+
+// Address Search (Geocoder with Nominatim)
+L.Control.geocoder({
+ position: 'topright',
+ placeholder: 'Adresse suchen...',
+ defaultMarkGeocode: true,
+ geocoder: L.Control.Geocoder.nominatim({
+ geocodingQueryParams: {
+ countrycodes: 'de',
+ viewbox: '8.0,52.5,8.5,52.8',
+ bounded: 1
+ }
+ })
+}).addTo(map);
+
+// Polyline Measure Tool
+L.control.polylineMeasure({
+ position: 'topright',
+ unit: 'metres',
+ showBearings: false,
+ clearMeasurementsOnStop: false,
+ showClearControl: true
+}).addTo(map);
+
+// Mouse Position Display
+var MousePositionControl = L.Control.extend({
+ options: { position: 'bottomright' },
+
+ onAdd: function () {
+ var container = L.DomUtil.create('div', 'mouse-position-display');
+ container.style.background = 'rgba(255,255,255,0.85)';
+ container.style.padding = '2px 8px';
+ container.style.fontSize = '12px';
+ container.style.borderRadius = '4px';
+ container.style.fontFamily = 'monospace';
+ container.innerHTML = 'Lat: — | Lng: —';
+
+ map.on('mousemove', function (e) {
+ container.innerHTML = 'Lat: ' + e.latlng.lat.toFixed(5) + ' | Lng: ' + e.latlng.lng.toFixed(5);
+ });
+
+ return container;
+ }
+});
+
+new MousePositionControl().addTo(map);
+
+// GPS Location Button
+var GpsControl = L.Control.extend({
+ options: { position: 'topright' },
+
+ onAdd: function () {
+ var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
+ var button = L.DomUtil.create('a', '', container);
+ button.href = '#';
+ button.title = 'Mein Standort';
+ button.innerHTML = '' +
+ 'Titel ' +
+ 'Beschreibung ' +
+ '' +
+ '
',
+ 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 += '' +
+ '' +
+ '' +
+ '
' + escapeHtml(props.title) + '
' +
+ '
' +
+ '' + escapeHtml(props.author_name) + ' · ' + date + ' ' +
+ '' +
+ ' ' +
+ '
' +
+ '
' +
+ '' + cat.icon + ' ' + cat.label + ' ' +
+ ' ';
+ }
+
+ 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 += '' +
+ '
';
+ }
+ }
+
+ 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.
',
+ confirmButtonColor: MUNICIPALITY.primaryColor
+ });
+}
+
+// Privacy Modal
+function showPrivacyModal() {
+ Swal.fire({
+ title: 'Datenschutz',
+ html: '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 + '.
',
+ confirmButtonColor: MUNICIPALITY.primaryColor
+ });
+}
+
+// Imprint Modal
+function showImprintModal() {
+ Swal.fire({
+ title: 'Impressum',
+ html: '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();
\ No newline at end of file