Add survey

assets/script.js

@@ -269,7 +269,7 @@ async function onPageLoad() {
         clearInterval(interval);
     }
 
-    if (currentSite === "home" && currentPage === "settings") {
+    if (currentSite === "account" && currentPage === "settings") {
         if (document.getElementById("user-settings")) {
             await populateUserInfoFields(UserInfo);
         }
@@ -656,11 +656,9 @@ async function reloadMemeVotes(memeID) {
 
     if (0 < memeVotes) {
         memeVoteCounterElement.classList.add("positive");
-    }
+    } else if (0 > memeVotes) {
-    else if (0 > memeVotes) {
         memeVoteCounterElement.classList.add("negative");
-    }
+    } else {
-    else {
         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 memeVoteDownvoteElement = document.getElementById(`meme_votes_downvote_${memeID}`);
     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);
             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);
             memeVoteDelete = true;
         }
@@ -714,3 +711,19 @@ async function deleteVoteMeme(memeId) {
     }, "Hlas na meme bol zmazaný", "Nastala chyba pri mazaní hlasu na meme", true);
     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
+        });
+    }
+}

assets/style.css

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

endpoints/survey.php

@@ -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"],
+    };
+}

lib/survey.php

@@ -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;
+}

pages/account/survey.html

@@ -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>

templates/meme.html

@@ -18,9 +18,10 @@
         </div>
     </div>
     <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__"
              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>
     </div>
 </article>