diff --git a/assets/script.js b/assets/script.js index 7f3155d..3cc421f 100644 --- a/assets/script.js +++ b/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){ diff --git a/assets/style.css b/assets/style.css index fc47e4f..2ff5b9f 100644 --- a/assets/style.css +++ b/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 { diff --git a/endpoints/meme.php b/endpoints/meme.php index 305e78f..ae3d503 100644 --- a/endpoints/meme.php +++ b/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"], }; diff --git a/lib/meme.php b/lib/meme.php index e356cb8..397868a 100644 --- a/lib/meme.php +++ b/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) ? "" : '', $meme_out); $meme_votes = calculateNetVotes($id); - $meme_upvote = isLoggedIn() ? "" : ''; - $meme_downvote = isLoggedIn() ? "" : ''; + $meme_net_votes = $meme_votes['NetVotes']; - $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() ? "" : ''; + $meme_downvote = isLoggedIn() ? "" : ''; + + $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'] ]; } \ No newline at end of file diff --git a/templates/meme.html b/templates/meme.html index 139e153..39d66d7 100644 --- a/templates/meme.html +++ b/templates/meme.html @@ -4,7 +4,7 @@
__TEMPLATE_MEME_VOTES_NUMBER__
+__TEMPLATE_MEME_VOTES_NUMBER__
__TEMPLATE_MEME_DOWNVOTE__