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

photos and comments functionality for contributions, moderation page functionality pending

Browse Source
This commit is contained in:
patrickzerhusen
2026-04-25 14:30:58 +02:00
parent cb8994b493
commit c39667e368
8 changed files with 523 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
public/js/app.js
View File

@@ -388,6 +388,7 @@ function styleLinePolygon(feature) {
// Block 9: Feature Popups for Read, Edit, Delete and Vote
// =====================================================================
// Builds Popup HTML for Features
function buildPopupHtml(feature) {
const props = feature.properties;
const cat = CATEGORIES[props.category] || CATEGORIES.other;
@@ -398,12 +399,20 @@ function buildPopupHtml(feature) {
day: '2-digit', month: '2-digit', year: 'numeric'
});
return '' +
let html = '' +
'<div class="popup-detail">' +
'<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">' +
(props.description ? '<div class="popup-detail-description">' + escapeHtml(props.description) + '</div>' : '');
// Shows Photo if available
if (props.photo_path) {
html += '<div class="popup-detail-photo">' +
'<img src="' + escapeHtml(props.photo_path) + '" alt="Foto" style="max-width:100%;border-radius:6px;margin-bottom:8px;cursor:pointer;" onclick="window.open(\'' + escapeHtml(props.photo_path) + '\', \'_blank\')">' +
'</div>';
}
html += '<div class="popup-detail-meta">' +
'<i class="fa-solid fa-user"></i> ' + escapeHtml(props.author_name) +
' &middot; <i class="fa-solid fa-calendar"></i> ' + dateStr +
'</div>' +
@@ -414,22 +423,52 @@ function buildPopupHtml(feature) {
'<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'dislike' ? ' disliked' : '') + '" id="vote-dislike-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'dislike\')" title="Gefällt mir nicht">' +
'<i class="fa-solid fa-thumbs-down"></i> <span id="dislikes-' + props.contribution_id + '">' + props.dislikes_count + '</span>' +
'</button>' +
'</div>' +
(props.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN) ?
'<div class="popup-detail-actions">' +
'</div>';
// Edit and Delete Buttons for Author or Admin
if (props.browser_id === browserId || (typeof IS_ADMIN !== 'undefined' && IS_ADMIN)) {
html += '<div class="popup-detail-actions">' +
'<button class="btn btn-primary" onclick="editContribution(' + props.contribution_id + ')"><i class="fa-solid fa-pen"></i> Bearbeiten</button>' +
'<button class="btn btn-danger" onclick="deleteContribution(' + props.contribution_id + ')"><i class="fa-solid fa-trash"></i> Löschen</button>' +
'</div>' : '') +
'</div>';
'</div>';
}
// Comments Section
html += '<div class="popup-comments" id="comments-' + props.contribution_id + '">' +
'<div class="popup-comments-header">' +
'<i class="fa-solid fa-comments"></i> Kommentare' +
' <span id="comment-count-' + props.contribution_id + '">...</span>' +
'</div>' +
'<div id="comments-list-' + props.contribution_id + '" class="popup-comments-list"></div>';
// Comment Form only for logged-in Users
if (currentUser) {
html += '<div class="popup-comment-form">' +
'<input type="text" id="comment-input-' + props.contribution_id + '" class="popup-comment-input" placeholder="Kommentar schreiben..." maxlength="1000">' +
'<button class="popup-comment-submit" onclick="submitComment(' + props.contribution_id + ')" title="Senden">' +
'<i class="fa-solid fa-paper-plane"></i>' +
'</button>' +
'</div>';
}
html += '</div></div>';
return html;
}
// Binds Popup and Tooltip to Feature Layer
function bindFeaturePopup(feature, layer) {
const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other;
// Rebuilts if Popup opens
// Dynamic Popup — rebuilt every Time the Popup opens
layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 });
// Loads Comments when Popup opens
layer.on('popupopen', function () {
loadComments(feature.properties.contribution_id);
});
// Tooltip on Hover
layer.bindTooltip(categoryIcon(cat) + ' ' + escapeHtml(feature.properties.title), {
direction: 'top',
@@ -449,8 +488,9 @@ function submitCreate() {
const description = document.getElementById('create-description').value.trim();
const geom = document.getElementById('create-geom').value;
const geomType = document.getElementById('create-geom-type').value;
const photoInput = document.getElementById('create-photo');
// Validates
// Validates required Fields
if (!category) {
Swal.fire('Kategorie fehlt', 'Bitte wählen Sie eine Kategorie aus.', 'warning');
return;
@@ -464,34 +504,48 @@ function submitCreate() {
return;
}
apiCall({
action: 'create',
municipality_id: MUNICIPALITY.id,
category: category,
title: title,
description: description,
geom: geom,
geom_type: geomType,
author_name: currentUser,
browser_id: browserId
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
// Builds FormData manually to include Photo File
const formData = new FormData();
formData.append('action', 'create');
formData.append('municipality_id', MUNICIPALITY.id);
formData.append('category', category);
formData.append('title', title);
formData.append('description', description);
formData.append('geom', geom);
formData.append('geom_type', geomType);
formData.append('author_name', currentUser);
formData.append('browser_id', browserId);
// Triggers Reverse Geocoding in Background
if (response.contribution_id && drawnGeometry) {
const coords = drawnGeomType === 'point' ? drawnGeometry.coordinates :
drawnGeomType === 'line' ? drawnGeometry.coordinates[0] :
drawnGeometry.coordinates[0][0];
reverseGeocode(response.contribution_id, coords[1], coords[0]);
}
// Appends Photo File if selected
if (photoInput.files.length > 0) {
formData.append('photo', photoInput.files[0]);
}
Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.', 'success');
closeCreateModal();
loadContributions();
});
// Sends directly via fetch not through apiCall, because of File Upload
fetch(API_URL, { method: 'POST', body: formData })
.then(function (response) { return response.json(); })
.then(function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
// Triggers Reverse Geocoding in Background
if (response.contribution_id && drawnGeometry) {
const coords = drawnGeomType === 'point' ? drawnGeometry.coordinates :
drawnGeomType === 'line' ? drawnGeometry.coordinates[0] :
drawnGeometry.coordinates[0][0];
reverseGeocode(response.contribution_id, coords[1], coords[0]);
}
Swal.fire('Eingereicht!', 'Ihr Beitrag wurde erfolgreich eingereicht und wird nach Prüfung durch das Moderationsteam veröffentlicht.', 'success');
closeCreateModal();
loadContributions();
})
.catch(function (error) {
console.error('Upload Error:', error);
Swal.fire('Verbindungsfehler', 'Verbindung zum Server fehlgeschlagen.', 'error');
});
}
// Cancels Create, closes Modal and clears Form
@@ -506,6 +560,9 @@ function closeCreateModal() {
document.getElementById('create-description').value = '';
document.getElementById('create-geom').value = '';
document.getElementById('create-geom-type').value = '';
// Resets Photo Upload
document.getElementById('create-photo').value = '';
document.getElementById('photo-preview').style.display = 'none';
drawnGeometry = null;
drawnGeomType = null;
}
@@ -1002,6 +1059,80 @@ function filterNews() {
});
}
// 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 = '<div class="popup-comment-empty">Noch keine Kommentare.</div>';
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 += '<div class="popup-comment">' +
'<div class="popup-comment-meta">' +
'<strong>' + escapeHtml(comment.author_name) + '</strong>' +
' · ' + commentDate +
(canDelete ? ' · <a href="#" onclick="deleteComment(' + comment.comment_id + ', ' + contributionId + ');return false;" class="popup-comment-delete"><i class="fa-solid fa-trash"></i></a>' : '') +
'</div>' +
'<div class="popup-comment-text">' + escapeHtml(comment.content) + '</div>' +
'</div>';
});
listContainer.innerHTML = html;
});
}
// Submits a new Comment on a Contribution
function submitComment(contributionId) {
const input = document.getElementById('comment-input-' + contributionId);
const content = input ? input.value.trim() : '';
if (!content) return;
apiCall({
action: 'create_comment',
contribution_id: contributionId,
author_name: currentUser,
browser_id: browserId,
content: content
}, function (response) {
if (response.error) {
Swal.fire('Fehler', response.error, 'error');
return;
}
// Clears Input and reloads Comments
if (input) input.value = '';
loadComments(contributionId);
});
}
// Deletes a Comment
function deleteComment(commentId, contributionId) {
apiCall({
action: 'delete_comment',
comment_id: commentId
}, function (response) {
if (response.error) return;
// Reloads Comments after Deletion
loadComments(contributionId);
});
}
// =====================================================================
// Block 16: Application Startup
@@ -1020,6 +1151,7 @@ function buildCategoryDropdown() {
}
}
// Populates Category Dropdown
buildCategoryDropdown();
@@ -1030,4 +1162,22 @@ buildCategoryFilter();
loadContributions();
// Shows Welcome Modal on first Visit
checkWelcomeModal();
checkWelcomeModal();
// Photo Preview in Create Modal
document.getElementById('create-photo').addEventListener('change', function () {
const preview = document.getElementById('photo-preview');
const previewImg = document.getElementById('photo-preview-img');
if (this.files && this.files[0]) {
const reader = new FileReader();
reader.onload = function (e) {
previewImg.src = e.target.result;
preview.style.display = 'block';
};
reader.readAsDataURL(this.files[0]);
} else {
preview.style.display = 'none';
}
});