Update meme voting
This commit is contained in:
parent
f251d18bcb
commit
7b5f418344
@ -625,13 +625,45 @@ async function getMemeImages() {
|
|||||||
|
|
||||||
async function reloadMemeVotes(memeID) {
|
async function reloadMemeVotes(memeID) {
|
||||||
let memeVoteCounterElement = document.getElementById(`meme_votes_counter_${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', {
|
let memeVoteResponse = await doAction('/meme', {
|
||||||
action: "getMemeVotes",
|
action: "getMemeVotes",
|
||||||
meme_id: memeID
|
meme_id: memeID
|
||||||
}, "Počet hlasov k meme-u bol stiahnutý", "Nastala chyba pri sťahovaní počtu hlasov k meme-u", true);
|
}, "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){
|
async function voteMeme(memeID, isUpvote){
|
||||||
|
@ -351,7 +351,7 @@ div#articleslist>article{
|
|||||||
|
|
||||||
.meme_image {
|
.meme_image {
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
max-height: 500px;
|
max-height: 300px;
|
||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
@ -371,6 +371,18 @@ div#articleslist>article{
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.positive {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
|
||||||
|
.negative {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.neutral {
|
||||||
|
color: var(--pico-color);
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: 1050px) {
|
@media (max-width: 1050px) {
|
||||||
|
|
||||||
div#articleslist {
|
div#articleslist {
|
||||||
|
@ -10,6 +10,7 @@ function endpoint($endpoint_data): array
|
|||||||
"renderGallery" => renderMemeGallery(),
|
"renderGallery" => renderMemeGallery(),
|
||||||
"deleteMeme" => deleteMeme($endpoint_data['meme_id']),
|
"deleteMeme" => deleteMeme($endpoint_data['meme_id']),
|
||||||
"getMemeVotes" => getMemeVotes($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']),
|
"voteMeme" => voteMeme($endpoint_data['meme_id'], $endpoint_data['is_upvote']),
|
||||||
default => ["Status" => "Fail", "Message" => "Invalid action"],
|
default => ["Status" => "Fail", "Message" => "Invalid action"],
|
||||||
};
|
};
|
||||||
|
58
lib/meme.php
58
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_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_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_UPVOTE__', $meme_upvote, $meme_out);
|
||||||
$meme_out = str_replace('__TEMPLATE_MEME_DOWNVOTE__', $meme_downvote, $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_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);
|
return str_replace('__TEMPLATE_MEME_TEXT__', htmlspecialchars($textContent), $meme_out);
|
||||||
}
|
}
|
||||||
@ -116,30 +134,54 @@ function voteMeme(int $memeID, int $isUpvote): array
|
|||||||
return $out;
|
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;
|
global $mysqli;
|
||||||
|
|
||||||
$query = 'SELECT isUpvote FROM MemeVotes WHERE MemeID = ?';
|
$query = 'SELECT isUpvote, UserID FROM MemeVotes WHERE MemeID = ?';
|
||||||
$stmt = $mysqli->prepare($query);
|
$stmt = $mysqli->prepare($query);
|
||||||
$stmt->bind_param('i', $memeID);
|
$stmt->bind_param('i', $memeID);
|
||||||
$stmt->execute();
|
$stmt->execute();
|
||||||
$result = $stmt->get_result();
|
$result = $stmt->get_result();
|
||||||
|
|
||||||
$netVotes = 0;
|
$netVotes = 0;
|
||||||
|
$userVote = 0;
|
||||||
while ($row = $result->fetch_assoc()) {
|
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();
|
$stmt->close();
|
||||||
|
|
||||||
return $netVotes;
|
return [
|
||||||
|
"NetVotes" => $netVotes,
|
||||||
|
"UserVote" => $userVote
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
function getMemeVotes(int $memeID): array
|
function getMemeVotes(int $memeID): array
|
||||||
{
|
{
|
||||||
|
$voteData = calculateNetVotes($memeID);
|
||||||
return [
|
return [
|
||||||
"Status" => "Success",
|
"Status" => "Success",
|
||||||
"NetVotes" => calculateNetVotes($memeID)
|
"NetVotes" => $voteData['NetVotes'],
|
||||||
|
"UserVote" => $voteData['UserVote']
|
||||||
];
|
];
|
||||||
}
|
}
|
@ -4,7 +4,7 @@
|
|||||||
<div class="meme_info" id="meme_info___TEMPLATE_MEME_ID__">
|
<div class="meme_info" id="meme_info___TEMPLATE_MEME_ID__">
|
||||||
<div class="meme_voting" id="meme_voting___TEMPLATE_MEME_ID__">
|
<div class="meme_voting" id="meme_voting___TEMPLATE_MEME_ID__">
|
||||||
__TEMPLATE_MEME_UPVOTE__
|
__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__
|
__TEMPLATE_MEME_DOWNVOTE__
|
||||||
</div>
|
</div>
|
||||||
<p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__</p>
|
<p class='meme_author' id="meme_author___TEMPLATE_MEME_ID__"><i class="ri-user-line"></i>__TEMPLATE_MEME_AUTHOR__</p>
|
||||||
|
Loading…
Reference in New Issue
Block a user