From 94d4308d3f70f5631f82dded895cd766764307f1 Mon Sep 17 00:00:00 2001
From: patrickzerhusen <patrick.zerhusen@endex-geodaten.de>
Date: Mon, 20 Apr 2026 15:19:56 +0200
Subject: [PATCH] added visual vote deefback without sweet alert

---
 public/js/app.js | 57 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 44 insertions(+), 13 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 4b26310..0b2f91d 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -38,7 +38,7 @@ var contributionsData = [];                   // Raw Contribution Data Array
 var activeFilters = Object.keys(CATEGORIES);  // Active Category Filters
 var drawnGeometry = null;                     // Temporary Storage for Geometry drawn with Geoman
 var drawnGeomType = null;                     // Temporary Storage for Geometry Type
-
+var userVotes = {};                           // Tracks User Votes
 
 // =====================================================================
 // Block 2: Map Initialization
@@ -389,10 +389,10 @@ function bindFeaturePopup(feature, layer) {
                 ' &middot; <i class="fa-solid fa-calendar"></i> ' + dateStr +
             '</div>' +
             '<div class="popup-detail-votes">' +
-                '<button class="popup-vote-btn" onclick="voteContribution(' + props.contribution_id + ', \'like\')" title="Gefällt mir">' +
+                '<button class="popup-vote-btn' + (userVotes[props.contribution_id] === 'like' ? ' liked' : '') + '" id="vote-like-' + props.contribution_id + '" onclick="voteContribution(' + props.contribution_id + ', \'like\')" title="Gefällt mir">' +
                     '<i class="fa-solid fa-thumbs-up"></i> <span id="likes-' + props.contribution_id + '">' + props.likes_count + '</span>' +
                 '</button>' +
-                '<button class="popup-vote-btn" onclick="voteContribution(' + props.contribution_id + ', \'dislike\')" title="Gefällt mir nicht">' +
+                '<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>' +
@@ -553,10 +553,10 @@ function deleteContribution(contributionId) {
     });
 }
 
+// VOTE: Like or Dislike existing Contributions
 // VOTE: Like or Dislike existing Contributions
 function voteContribution(contributionId, voteType) {
     if (!currentUser) {
-        Swal.fire('Bitte anmelden', 'Sie sollten sich anmelden, um abzustimmen.', 'info');
         showLoginModal();
         return;
     }
@@ -568,19 +568,50 @@ function voteContribution(contributionId, voteType) {
         vote_type: voteType
     }, function (response) {
         if (response.error) {
-            Swal.fire('Hinweis', response.error, 'info');
             return;
         }
 
-        // Show Feedback based on Vote Action
-        if (response.action === 'removed') {
-            Swal.fire({ title: 'Bewertung zurückgenommen', icon: 'info', timer: 1500, showConfirmButton: false });
-        } else if (response.action === 'changed') {
-            Swal.fire({ title: 'Bewertung verändert', icon: 'success', timer: 1500, showConfirmButton: false });
-        }
+        // Update local Vote State
+        var likeBtn = document.getElementById('vote-like-' + contributionId);
+        var dislikeBtn = document.getElementById('vote-dislike-' + contributionId);
+        var likesSpan = document.getElementById('likes-' + contributionId);
+        var dislikesSpan = document.getElementById('dislikes-' + contributionId);
 
-        // Updates Vote Counts in the Popup without reloading everything
-        loadContributions();
+        if (response.action === 'created') {
+            // New Vote — highlight the Button, update Count
+            userVotes[contributionId] = voteType;
+            if (voteType === 'like') {
+                likeBtn.classList.add('liked');
+                likesSpan.textContent = parseInt(likesSpan.textContent) + 1;
+            } else {
+                dislikeBtn.classList.add('disliked');
+                dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1;
+            }
+        } else if (response.action === 'removed') {
+            // Vote removed (Toggle off) — remove Highlight, update Count
+            delete userVotes[contributionId];
+            if (voteType === 'like') {
+                likeBtn.classList.remove('liked');
+                likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1);
+            } else {
+                dislikeBtn.classList.remove('disliked');
+                dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1);
+            }
+        } else if (response.action === 'changed') {
+            // Vote changed (e.g. Like → Dislike) — switch Highlights, update both Counts
+            userVotes[contributionId] = voteType;
+            if (voteType === 'like') {
+                likeBtn.classList.add('liked');
+                dislikeBtn.classList.remove('disliked');
+                likesSpan.textContent = parseInt(likesSpan.textContent) + 1;
+                dislikesSpan.textContent = Math.max(0, parseInt(dislikesSpan.textContent) - 1);
+            } else {
+                dislikeBtn.classList.add('disliked');
+                likeBtn.classList.remove('liked');
+                dislikesSpan.textContent = parseInt(dislikesSpan.textContent) + 1;
+                likesSpan.textContent = Math.max(0, parseInt(likesSpan.textContent) - 1);
+            }
+        }
     });
 }