Add survey

This commit is contained in:
Bruno Rybársky 2024-05-15 19:18:15 +02:00
parent 455fe2b3ac
commit 9d222c203c
6 changed files with 106 additions and 13 deletions

@ -269,7 +269,7 @@ async function onPageLoad() {
clearInterval(interval); clearInterval(interval);
} }
if (currentSite === "home" && currentPage === "settings") { if (currentSite === "account" && currentPage === "settings") {
if (document.getElementById("user-settings")) { if (document.getElementById("user-settings")) {
await populateUserInfoFields(UserInfo); await populateUserInfoFields(UserInfo);
} }
@ -656,11 +656,9 @@ async function reloadMemeVotes(memeID) {
if (0 < memeVotes) { if (0 < memeVotes) {
memeVoteCounterElement.classList.add("positive"); memeVoteCounterElement.classList.add("positive");
} } else if (0 > memeVotes) {
else if (0 > memeVotes) {
memeVoteCounterElement.classList.add("negative"); memeVoteCounterElement.classList.add("negative");
} } else {
else {
memeVoteCounterElement.classList.add("neutral"); memeVoteCounterElement.classList.add("neutral");
} }
@ -681,18 +679,17 @@ async function reloadMemeVotes(memeID) {
} }
async function voteMeme(memeID, isUpvote){ async function voteMeme(memeID, isUpvote) {
let memeVoteUpvoteElement = document.getElementById(`meme_votes_upvote_${memeID}`); let memeVoteUpvoteElement = document.getElementById(`meme_votes_upvote_${memeID}`);
let memeVoteDownvoteElement = document.getElementById(`meme_votes_downvote_${memeID}`); let memeVoteDownvoteElement = document.getElementById(`meme_votes_downvote_${memeID}`);
let memeVoteDelete = false; let memeVoteDelete = false;
if(isUpvote) { if (isUpvote) {
if(memeVoteUpvoteElement.classList.contains("ri-arrow-up-circle-fill")){ if (memeVoteUpvoteElement.classList.contains("ri-arrow-up-circle-fill")) {
await deleteVoteMeme(memeID); await deleteVoteMeme(memeID);
memeVoteDelete = true; memeVoteDelete = true;
} }
} } else {
else { if (memeVoteDownvoteElement.classList.contains("ri-arrow-down-circle-fill")) {
if(memeVoteDownvoteElement.classList.contains("ri-arrow-down-circle-fill")){
await deleteVoteMeme(memeID); await deleteVoteMeme(memeID);
memeVoteDelete = true; memeVoteDelete = true;
} }
@ -714,3 +711,19 @@ async function deleteVoteMeme(memeId) {
}, "Hlas na meme bol zmazaný", "Nastala chyba pri mazaní hlasu na meme", true); }, "Hlas na meme bol zmazaný", "Nastala chyba pri mazaní hlasu na meme", true);
await reloadMemeVotes(memeId); await reloadMemeVotes(memeId);
} }
async function surveySubmit() {
const satisfaction = document.querySelector('input[name="satisfaction"]:checked').value;
const functionality = document.querySelector('input[name="functionality"]:checked').value;
const content = document.querySelector('input[name="content"]:checked').value;
const comment = document.querySelector('textarea[name="comment"]').value;
if (satisfaction && functionality && content && comment) {
doAction("/survey", {
action: "surveySubmit",
satisfaction: satisfaction,
functionality: functionality,
content: content,
comment: comment
});
}
}

@ -183,7 +183,7 @@ ul.navpage_list {
.navsite_item:hover .navpage_list { .navsite_item:hover .navpage_list {
border: 4px solid var(--pico-primary-hover) !important; border: 4px solid var(--pico-primary-hover) !important;
display: flex !important; display: flex !important;
max-height: 200px; max-height: unset;
width: inherit; width: inherit;
transition: max-height .3s ease, border .325s ease !important; transition: max-height .3s ease, border .325s ease !important;
box-sizing: border-box; box-sizing: border-box;
@ -406,6 +406,9 @@ div#articleslist>article{
@media (max-width: 1050px) { @media (max-width: 1050px) {
.navsite_item .navpage_list {
max-height: unset !important;
}
div#articleslist { div#articleslist {
width: 100vw !important; width: 100vw !important;
left: 0 !important; left: 0 !important;
@ -444,6 +447,7 @@ div#articleslist>article{
width: inherit; width: inherit;
box-sizing: content-box; box-sizing: content-box;
transition-delay: .1s; transition-delay: .1s;
position: unset !important;
} }
.navsite_item:not(:hover) .navpage_list { .navsite_item:not(:hover) .navpage_list {
transition-delay: .1s; transition-delay: .1s;

11
endpoints/survey.php Normal file

@ -0,0 +1,11 @@
<?php
require_once "lib/survey.php";
function endpoint($endpoint_data): array
{
return match ($endpoint_data["action"]) {
"surveySubmit" => submitSurvey($endpoint_data["satisfaction"], $endpoint_data["functionality"], $endpoint_data["content"], $endpoint_data["comment"]),
default => ["Status" => "Fail", "message" => "Invalid action"],
};
}

21
lib/survey.php Normal file

@ -0,0 +1,21 @@
<?php
require_once "lib/account.php";
function submitSurvey(int $satisfaction, int $functionality, int $content, string $comment): array
{
global $mysqli;
$output = ["Status" => "Fail", "Opinion" => "Ignored unsuccessfully!"];
if (isLoggedIn()
&& $satisfaction >= 1 && $satisfaction <= 5
&& $functionality >= 1 && $functionality <= 5
&& $content >= 1 && $content <= 5
&& !empty($comment)) {
$stmtMemeAdd = $mysqli->prepare('INSERT INTO Survey (AuthorID, Satisfaction, Functionality, Content, Comment) VALUES (?, ?, ?, ?, ?)');
$stmtMemeAdd->bind_param('issi', $_SESSION['ID'], $satisfaction, $functionality, $content, htmlspecialchars($comment));
if ($stmtMemeAdd->execute() && $stmtMemeAdd->affected_rows > 0) {
$output["Status"] = "Success";
$output["Opinion"] = "Ignored successfully!";
}
}
return $output;
}

43
pages/account/survey.html Normal file

@ -0,0 +1,43 @@
<!--suppress HtmlUnknownTag, HtmlUnknownTag -->
<page minimal_permission_level="2" secret="yes" page_title="Prieskum"></page>
<form id="surveyForm">
<h3>Spokojnosť so stránkou:</h3>
<input type="radio" name="satisfaction" value="5" id="spokojnost_super">
<label for="spokojnost_super">Super</label>
<input type="radio" name="satisfaction" value="4" id="spokojnost_dobre">
<label for="spokojnost_dobre">Dobre</label>
<input type="radio" name="satisfaction" value="3" id="spokojnost_da_sa">
<label for="spokojnost_da_sa">Dá sa</label>
<input type="radio" name="satisfaction" value="2" id="spokojnost_zle">
<label for="spokojnost_zle">Zle</label>
<input type="radio" name="satisfaction" value="1" id="spokojnost_nanic">
<label for="spokojnost_nanic">Nanič</label>
<br>
<h3>Funkčnosť stránky:</h3>
<input type="radio" name="functionality" value="5" id="funkcnost_super">
<label for="funkcnost_super">Super</label>
<input type="radio" name="functionality" value="4" id="funkcnost_dobre">
<label for="funkcnost_dobre">Dobre</label>
<input type="radio" name="functionality" value="3" id="funkcnost_da_sa">
<label for="funkcnost_da_sa">Dá sa</label>
<input type="radio" name="functionality" value="2" id="funkcnost_zle">
<label for="funkcnost_zle">Zle</label>
<input type="radio" name="functionality" value="1" id="funkcnost_nanic">
<label for="funkcnost_nanic">Nanič</label>
<br>
<h3>Obsah stránky:</h3>
<input type="radio" name="content" value="5" id="content_super">
<label for="content_super">Super</label>
<input type="radio" name="content" value="4" id="content_dobre">
<label for="content_dobre">Dobre</label>
<input type="radio" name="content" value="3" id="content_da_sa">
<label for="content_da_sa">Dá sa</label>
<input type="radio" name="content" value="2" id="content_zle">
<label for="content_zle">Zle</label>
<input type="radio" name="content" value="1" id="content_nanic">
<label for="content_nanic">Nanič</label>
<br>
<textarea name="comment" placeholder="Komentár" cols="80" rows="20" required></textarea>
<br>
<button onclick="surveySubmit()">Odoslať</button>
</form>

@ -18,9 +18,10 @@
</div> </div>
</div> </div>
<div class="meme_body" id="meme_body___TEMPLATE_MEME_ID__"> <div class="meme_body" id="meme_body___TEMPLATE_MEME_ID__">
<a href="__TEMPLATE_MEME_IMAGE__" download>
<img id="meme_image___TEMPLATE_MEME_ID__" src="__TEMPLATE_MEME_IMAGE__" width="__TEMPLATE_MEME_IMAGE_WIDTH__" <img id="meme_image___TEMPLATE_MEME_ID__" src="__TEMPLATE_MEME_IMAGE__" width="__TEMPLATE_MEME_IMAGE_WIDTH__"
height="__TEMPLATE_MEME_IMAGE_HEIGHT__" alt="meme image" height="__TEMPLATE_MEME_IMAGE_HEIGHT__" alt="meme image"
class="meme_image"> class="meme_image"></a>
<p class="meme_text" id="meme_text___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_TEXT__</p> <p class="meme_text" id="meme_text___TEMPLATE_MEME_ID__">__TEMPLATE_MEME_TEXT__</p>
</div> </div>
</article> </article>