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

updatet sidebar styling and texts, included statistics in category-filter

Browse Source
This commit was merged in pull request #15.
This commit is contained in:
patrickzerhusen
2026-05-13 14:21:05 +02:00
parent cc8bdd4ea1
commit ac40c7d949
3 changed files with 60 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
public/index.php
View File

@@ -131,9 +131,9 @@ $news_items = $stmt->fetchAll();
<div class="leaflet-sidebar-tabs">
<ul role="tablist">
<li><a href="#tab-home" role="tab"><i class="fa-solid fa-house"></i></a></li>
<li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
<li><a href="#tab-list" role="tab"><i class="fa-solid fa-list"></i></a></li>
<li><a href="#tab-news" role="tab"><i class="fa-solid fa-newspaper"></i></a></li>
<li><a href="#tab-help" role="tab"><i class="fa-solid fa-circle-question"></i></a></li>
</ul>
</div>
@@ -148,17 +148,12 @@ $news_items = $stmt->fetchAll();
</h2>
<div class="sidebar-body">
<p>Willkommen beim Bürgerbeteiligungsportal <strong><?= htmlspecialchars($municipality['name']) ?></strong>.</p>
<p>Verwenden Sie die Karte, um Hinweise und Aufgaben für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge der Bürgerschaft zu betrachten.</p>
<p>Verwenden Sie die Karte, um Hinweise für die Stadtverwaltung hinzuzufügen oder bestehende Beiträge zu betrachten, zu bewerten und zu kommentieren.</p>
<h3>Kategorien</h3>
<div id="category-filter">
<!-- Category Filter Checkboxes — populated by app.js -->
</div>
<h3>Statistik</h3>
<div id="stats-container">
<!-- Contribution Statistics — populated by app.js -->
</div>
</div>
</div>
@@ -178,6 +173,41 @@ $news_items = $stmt->fetchAll();
</div>
</div>
<!-- News Tab -->
<div class="leaflet-sidebar-pane" id="tab-news">
<h2 class="leaflet-sidebar-header">
Neuigkeiten
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
</h2>
<div class="sidebar-body">
<!-- News Search -->
<div class="list-search">
<input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
</div>
<!-- News Items Container -->
<div id="news-list">
<?php if (empty($news_items)): ?>
<p class="empty-state">Noch keine Neuigkeiten veröffentlicht.</p>
<?php else: ?>
<?php foreach ($news_items as $news): ?>
<div class="news-item"
data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
<h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date">
<?= htmlspecialchars($news['author_name']) ?>
· <?= date('d.m.Y', strtotime($news['published_at'])) ?>
</span>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>
<!-- Help Tab -->
<div class="leaflet-sidebar-pane" id="tab-help">
<h2 class="leaflet-sidebar-header">
@@ -207,43 +237,6 @@ $news_items = $stmt->fetchAll();
<h3><i class="fa-solid fa-magnifying-glass"></i> Suchen</h3>
<p>Verwenden Sie die Adresssuche rechts, um schnell den richtigen Ort auf der Mitmachkarte zu finden.</p>
</div>
</div>
<!-- News Tab -->
<div class="leaflet-sidebar-pane" id="tab-news">
<h2 class="leaflet-sidebar-header">
Neuigkeiten
<span class="leaflet-sidebar-close"><i class="fa-solid fa-xmark"></i></span>
</h2>
<div class="sidebar-body">
<!-- News Search -->
<div class="list-search">
<input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
</div>
<!-- News Items Container -->
<div id="news-list">
<?php if (empty($news_items)): ?>
<p style="text-align:center;color:#999;padding:20px;">Noch keine Neuigkeiten veröffentlicht.</p>
<?php else: ?>
<?php foreach ($news_items as $news): ?>
<div class="news-item"
data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
<h3><?= htmlspecialchars($news['title']) ?></h3>
<p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
<span class="news-date">
<?= htmlspecialchars($news['author_name']) ?>
· <?= date('d.m.Y', strtotime($news['published_at'])) ?>
</span>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
</div>
</div>

53
public/js/app.js
View File

@@ -346,7 +346,7 @@ function loadContributions() {
layerControl.addOverlay(contributionsLayer, '<i class="fa-solid fa-map-pin" style="color:#C00000;"></i> Beiträge');
// Update Sidebar List and Statistics
updateContributionsList();
updateStatistics();
buildCategoryFilter();
});
}
@@ -766,7 +766,7 @@ function updateContributionsList() {
// Builds HTML
if (filtered.length === 0) {
container.innerHTML = '<p style="text-align:center;color:#999;padding:20px;">Keine Beiträge gefunden.</p>';
container.innerHTML = '<p class="empty-state">Keine Beiträge gefunden.</p>';
return;
}
@@ -830,22 +830,33 @@ document.getElementById('list-search-input').addEventListener('input', function
// Block 12: Sidebar Category Filter and Statistics
// =====================================================================
// Builds Category Filter Checkboxes
// 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 += '' +
'<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;">' +
html += '<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;font-size:0.85rem;color:var(--color-text-secondary)">' +
'<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
'<span>' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
categoryIcon(cat) +
'<span>' + cat.label + ' (' + count + ')</span>' +
'</label>';
}
html += '<p style="margin-top:10px;font-size:0.85rem;color:var(--color-text-secondary)"><strong>' + total + '</strong> Beiträge insgesamt</p>';
container.innerHTML = html;
}
@@ -892,34 +903,6 @@ function toggleCategoryFilter(checkbox) {
updateContributionsList();
}
// Updates Statistics in Home Tab
function updateStatistics() {
const container = document.getElementById('stats-container');
const total = contributionsData.length;
// Counts per Category
const counts = {};
contributionsData.forEach(function (f) {
const cat = f.properties.category;
counts[cat] = (counts[cat] || 0) + 1;
});
let html = '<p style="font-size:0.9rem;"><strong>' + total + '</strong> Beiträge insgesamt</p>';
for (const key in CATEGORIES) {
const cat = CATEGORIES[key];
const count = counts[key] || 0;
if (count > 0) {
html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
categoryIcon(cat) + ' ' +
cat.label + ': ' + count +
'</div>';
}
}
container.innerHTML = html;
}
// =====================================================================
// Block 13: Modals — Welcome, Login, Info, Privacy, Imprint
@@ -1034,7 +1017,7 @@ function escapeHtml(text) {
// Returns a colored Font Awesome Icon HTML String for a Category
function categoryIcon(cat) {
return '<i class="fa-solid ' + cat.faIcon + '" style="color:' + cat.color + ';"></i>';
return '<i class="fa-solid ' + cat.faIcon + ' fa-fw" style="color:' + cat.color + ';"></i>';
}
// Reverse Geocodes Coordinates and saves Address to Contribution via API

1
public/styles.css
View File

@@ -464,6 +464,7 @@ select.form-input { cursor: pointer; }
margin-bottom: var(--space-sm);
line-height: 1.5;
color: var(--color-text-secondary);
font-size: 0.85rem;
}