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

replaced category emojis with fontawesome icons

Browse Source
This commit is contained in:
patrickzerhusen
2026-04-21 16:13:56 +02:00
parent 5fe7522f5f
commit 2b3fcb6ebf
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
public/js/app.js
View File

@@ -21,13 +21,13 @@ 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' }
consumption: { label: 'Geschäfte', faIcon: 'fa-cart-shopping', color: '#C00000' },
building: { label: 'Bauen', faIcon: 'fa-building', color: '#E65100' },
energy: { label: 'Energie', faIcon: 'fa-bolt', color: '#FFC000' },
environment: { label: 'Umwelt', faIcon: 'fa-seedling', color: '#92D050' },
mobility: { label: 'Mobilität', faIcon: 'fa-bus', color: '#0070C0' },
industry: { label: 'Industrie', faIcon: 'fa-industry', color: '#7030A0' },
other: { label: 'Sonstiges', faIcon: 'fa-thumbtack', color: '#7F7F7F' }
};
// Application State
@@ -381,7 +381,7 @@ function bindFeaturePopup(feature, layer) {
// Builds Popup on Click
var html = '' +
'<div class="popup-detail">' +
'<span class="popup-detail-category">' + cat.icon + ' ' + cat.label + '</span>' +
'<span class="popup-detail-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
'<div class="popup-detail-title">' + escapeHtml(props.title) + '</div>' +
(props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '') +
'<div class="popup-detail-meta">' +
@@ -406,7 +406,7 @@ function bindFeaturePopup(feature, layer) {
layer.bindPopup(html, { maxWidth: 320, minWidth: 240 });
// Builds Tooltip on Hover
layer.bindTooltip(cat.icon + ' ' + escapeHtml(props.title), {
layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(props.title), {
direction: 'top',
offset: [0, -10]
});
@@ -657,7 +657,7 @@ function updateContributionsList() {
html += '' +
'<div class="contribution-card" onclick="flyToContribution(' + props.contribution_id + ')">' +
'<div class="contribution-card-header">' +
'<span class="contribution-card-category">' + cat.icon + ' ' + cat.label + '</span>' +
'<span class="contribution-card-category">' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
'</div>' +
'<div class="contribution-card-title">' + escapeHtml(props.title) + '</div>' +
'<div class="contribution-card-meta">' +
@@ -720,7 +720,7 @@ function buildCategoryFilter() {
'<label style="display:flex;align-items:center;gap:8px;margin-bottom:6px;cursor:pointer;">' +
'<input type="checkbox" value="' + key + '" ' + checked + ' onchange="toggleCategoryFilter(this)">' +
'<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:' + cat.color + ';"></span>' +
'<span>' + cat.icon + ' ' + cat.label + '</span>' +
'<span>' + categoryIcon(cat) + ' ' + cat.label + '</span>' +
'</label>';
}
@@ -782,7 +782,7 @@ function updateStatistics() {
var count = counts[key] || 0;
if (count > 0) {
html += '<div style="display:flex;align-items:center;gap:8px;margin:4px 0;font-size:0.85rem;">' +
'<span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:' + cat.color + ';"></span>' +
categoryIcon(cat) + ' ' +
cat.label + ': ' + count +
'</div>';
}
@@ -918,6 +918,11 @@ function escapeHtml(text) {
return div.innerHTML;
}
// 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>';
}
// =====================================================================
// Block 16: Application Startup
@@ -930,7 +935,8 @@ function buildCategoryDropdown() {
var cat = CATEGORIES[key];
var option = document.createElement('option');
option.value = key;
option.textContent = cat.icon + ' ' + cat.label;
option.textContent = cat.label;
option.dataset.icon = cat.faIcon;
select.appendChild(option);
}
}