Update meme voting

assets/script.js

@@ -625,13 +625,45 @@ async function getMemeImages() {
 
 async function reloadMemeVotes(memeID) {
     let memeVoteCounterElement = document.getElementById(`meme_votes_counter_${memeID}`);
+    let memeVoteUpvoteElement = document.getElementById(`meme_votes_upvote_${memeID}`);
+    let memeVoteDownvoteElement = document.getElementById(`meme_votes_downvote_${memeID}`);
 
     let memeVoteResponse = await doAction('/meme', {
         action: "getMemeVotes",
         meme_id: memeID
     }, "Počet hlasov k meme-u bol stiahnutý", "Nastala chyba pri sťahovaní počtu hlasov k meme-u", true);
 
-    memeVoteCounterElement.innerText = memeVoteResponse.NetVotes;
+    let memeVotes = memeVoteResponse.NetVotes;
+    let userVote = memeVoteResponse.UserVote;
+    memeVoteCounterElement.innerText = memeVotes;
+    memeVoteCounterElement.classList.remove("positive", "negative", "neutral");
+
+    if (memeVotes > 0) {
+        memeVoteCounterElement.classList.add("positive");
+    }
+    else if (memeVotes < 0) {
+        memeVoteCounterElement.classList.add("negative");
+    }
+    else {
+        memeVoteCounterElement.classList.add("neutral");
+    }
+
+    if (userVote > 0) {
+        memeUpvoteVariant = "fill";
+        memeDownvoteVariant = "line";
+    }
+    else if (userVote < 0) {
+        memeUpvoteVariant = "line";
+        memeDownvoteVariant = "fill";
+    }
+    else {
+        memeUpvoteVariant = "line";
+        memeDownvoteVariant = "line";
+    }
+
+    memeVoteUpvoteElement.classList = [`ri-arrow-up-circle-${memeUpvoteVariant}`];
+    memeVoteDownvoteElement.classList = [`ri-arrow-up-circle-${memeDownvoteVariant}`];
+
 }
 
 async function voteMeme(memeID, isUpvote){

assets/style.css

@@ -351,7 +351,7 @@ div#articleslist>article{
 
 .meme_image {
     max-width: 500px;
-    max-height: 500px;
+    max-height: 300px;
     width: auto;
     height: auto;
 }
@@ -371,6 +371,18 @@ div#articleslist>article{
     flex-direction: column;
 }
 
+.positive {
+    color: green;
+}
+
+.negative {
+    color: red;
+}
+
+.neutral {
+    color: var(--pico-color);
+}
+
 @media (max-width: 1050px) {
 
     div#articleslist {

endpoints/meme.php

@@ -10,6 +10,7 @@ function endpoint($endpoint_data): array
         "renderGallery" => renderMemeGallery(),
         "deleteMeme" => deleteMeme($endpoint_data['meme_id']),
         "getMemeVotes" => getMemeVotes($endpoint_data['meme_id']),
+        "deleteVoteMeme" => deleteVoteMeme($endpoint_data['meme_id']),
         "voteMeme" => voteMeme($endpoint_data['meme_id'], $endpoint_data['is_upvote']),
         default => ["Status" => "Fail", "Message" => "Invalid action"],
     };

lib/meme.php

@@ -28,13 +28,31 @@ function renderMeme(int $id, int $authorId, string $title, string $textContent,
     $meme_out = str_replace('__TEMPLATE_MEME_DELETE_BUTTON__', (isModerator() || $_SESSION['ID'] == $authorId) ? "<button onclick=\"deleteMeme($id);\"><i class='ri-delete-bin-line'></i></button>" : '', $meme_out);
 
     $meme_votes = calculateNetVotes($id);
-    $meme_upvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 1);\"> <i class=\"ri-arrow-up-line\"></i></button>" : '';
+    $meme_net_votes = $meme_votes['NetVotes'];
-    $meme_downvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 0);\"> <i class=\"ri-arrow-down-line\"></i></button>" : '';
 
-    $meme_out = str_replace('__TEMPLATE_MEME_VOTES_NUMBER__', $meme_votes, $meme_out);
+    if ($meme_votes['UserVote'] > 0){
+        $meme_upvote_active = 'fill';
+        $meme_downvote_active = 'line';
+        $meme_vote_counter_class = 'positive';
+    }
+    elseif (($meme_votes['UserVote'] < 0)) {
+        $meme_upvote_active = 'line';
+        $meme_downvote_active = 'fill';
+        $meme_vote_counter_class = 'negative';
+    }
+    else {
+        $meme_downvote_active = 'line';
+        $meme_upvote_active = 'line';
+        $meme_vote_counter_class = 'neutral';
+    }
+    $meme_upvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 1);\"> <i id='meme_votes_upvote_$id' class=\"ri-arrow-up-circle-$meme_upvote_active\"></i></button>" : '';
+    $meme_downvote = isLoggedIn() ? "<button onclick=\"voteMeme($id, 0);\"> <i id='meme_votes_downvote_$id' class=\"ri-arrow-down-circle-$meme_downvote_active\"></i></button>" : '';
+
+    $meme_out = str_replace('__TEMPLATE_MEME_VOTES_NUMBER__', $meme_net_votes, $meme_out);
     $meme_out = str_replace('__TEMPLATE_MEME_UPVOTE__', $meme_upvote, $meme_out);
     $meme_out = str_replace('__TEMPLATE_MEME_DOWNVOTE__', $meme_downvote, $meme_out);
     $meme_out = str_replace('__TEMPLATE_MEME_ID__', $id, $meme_out);
+    $meme_out = str_replace('__TEMPLATE_MEME_VOTE_COUNTER_CLASS__', $meme_vote_counter_class, $meme_out);
 
     return str_replace('__TEMPLATE_MEME_TEXT__', htmlspecialchars($textContent), $meme_out);
 }
@@ -116,30 +134,54 @@ function voteMeme(int $memeID, int $isUpvote): array
     return $out;
 }
 
-function calculateNetVotes(int $memeID): int
+function deleteVoteMeme(int $memeID): array
+{
+    global $mysqli;
+    $out = ["Status" => "Fail"];
+    $memeVoteConn = $mysqli->prepare('DELETE FROM MemeVotes WHERE MemeID = ? AND UserID = ?');
+    $memeVoteConn->bind_param('ii', $memeID, $_SESSION['ID']);
+    $memeVoteConn->execute();
+    if ($memeVoteConn->affected_rows > 0) {
+        $out['Status'] = 'Success';
+    }
+    $memeVoteConn->close();
+    return $out;
+}
+
+function calculateNetVotes(int $memeID): array
 {
     global $mysqli;
 
-    $query = 'SELECT isUpvote FROM MemeVotes WHERE MemeID = ?';
+    $query = 'SELECT isUpvote, UserID FROM MemeVotes WHERE MemeID = ?';
     $stmt = $mysqli->prepare($query);
     $stmt->bind_param('i', $memeID);
     $stmt->execute();
     $result = $stmt->get_result();
 
     $netVotes = 0;
+    $userVote = 0;
     while ($row = $result->fetch_assoc()) {
-        $netVotes += ($row['isUpvote'] == 1) ? 1 : -1;
+        $vote = ($row['isUpvote'] == 1) ? 1 : -1;
+        $netVotes += $vote;
+        if ($row['UserID'] == $_SESSION['ID']) {
+            $userVote = $vote;
+        }
     }
 
     $stmt->close();
 
-    return $netVotes;
+    return [
+        "NetVotes" => $netVotes,
+        "UserVote" => $userVote
+    ];
 }
 
 function getMemeVotes(int $memeID): array
 {
+    $voteData = calculateNetVotes($memeID);
     return [
         "Status" => "Success",
-        "NetVotes" => calculateNetVotes($memeID)
+        "NetVotes" => $voteData['NetVotes'],
+        "UserVote" => $voteData['UserVote']
     ];
 }

templates/meme.html

@@ -4,7 +4,7 @@
         <div class="meme_info" id="meme_info___TEMPLATE_MEME_ID__">
             <div class="meme_voting" id="meme_voting___TEMPLATE_MEME_ID__">
             __TEMPLATE_MEME_UPVOTE__
-            <p class="votes_counter" id="meme_votes_counter___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_VOTES_NUMBER__</p>
+            <p class="votes_counter __TEMPLATE_MEME_VOTE_COUNTER_CLASS__" id="meme_votes_counter___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_VOTES_NUMBER__</p>
             __TEMPLATE_MEME_DOWNVOTE__
             </div>
             <p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__</p>