design updates for the voting system

Pages/tune/uuid.php

@@ -1,6 +1,8 @@
 <?php
 
+use App\Enumerators\SessionElement;
 use App\Wrappers\DatabaseInteractions;
+use App\Wrappers\SessionWrapper;
 use App\Wrappers\SQLQueryBuilderWrapper;
 use App\Wrappers\TwigWrapper;
 
@@ -72,11 +74,33 @@ for ($i = 0; $i < count($dances); $i++)
         JSON_THROW_ON_ERROR
     );
 
+
+$myVote = $db->RunSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT(
+        table: 'TuneRatings',
+    )
+        ->cols(cols: [
+            'Rating'
+        ])
+        ->where(cond: 'CreatedBy=:__user_id__')
+        ->where(cond: 'TuneID=:__tune_id__')
+        ->bindValue(name: '__user_id__', value: SessionWrapper::Get(SessionElement::USER_ID))
+        ->bindValue(name: '__tune_id__', value: $_GET["tune-id"])
+);
+if($myVote == [])
+    $myVote = 0;
+else
+{
+    $myVote = $myVote[0]['Rating'];
+}
+
+
 TwigWrapper::RenderTwig(
     target: "Pages/tune/uuid.html.twig",
     arguments: [
         "TuneDetails"=>$tuneDetails,
         "Dances"=>$dances,
+        "MyVote"=>$myVote,
     ]
 );
 

Public/API/V1/RateTune.php

@@ -81,6 +81,7 @@ $tuneRatings = $db->RunSelect(
 );
 
 echo json_encode([
+    "NewVoteValue" => intval($ratingValue),
     "LikeCount" => intval($tuneRatings[0]["Likes"]),
     "DislikeCount" => intval($tuneRatings[0]["Dislikes"]),
 ]);

Public/Static/CSS/Elements/Rating.css

@@ -1,29 +1,49 @@
-
+#RatingContainer {
+    text-align: center;
+    margin-top: 2rem;
+    font-family: Arial, sans-serif;
+}
 
 .RatingButtons {
     display: flex;
-    gap: 1rem;
     justify-content: center;
+    gap: 1.5rem;
     margin-top: 1rem;
 }
+
 #RatingContainer button {
-    background: none;
+    background-color: transparent;
     border: none;
     cursor: pointer;
     font-size: 2rem;
-    transition: transform 0.2s, color 0.2s;
+    padding: 0.5rem;
+    transition: transform 0.2s, color 0.2s, background-color 0.2s;
+    border-radius: 50%;
 }
+
 #RatingContainer button:hover {
-    transform: scale(1.2);
+    transform: scale(1.3);
-}
+    background-color: #f0f0f0;
-#ThumbUp {
-    color: green;
 }
-#ThumbDown {
+
-    color: red;
+#RatingContainer button.active {
+    transform: scale(1.3);
+    color: #0073e6;
+    background-color: #e0f7ff;
 }
+
 .Counts {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
     margin-top: 1rem;
     font-size: 1.2rem;
+    color: #555;
 }
 
+.count-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    font-weight: bold;
+}

Templates/Pages/tune/uuid.html.twig

@@ -15,6 +15,16 @@
             API_GET('/V1/RateTune.php?tune-id={{ TuneDetails.ID }}&type='+type)
                 .then(payload => {
                     console.log(payload);
+                    if(payload['NewVoteValue'] === -1)
+                    {
+                        document.getElementById('LikeButton').classList.remove('active');
+                        document.getElementById('DislikeButton').classList.add('active');
+                    }
+                    else if(payload['NewVoteValue'] === 1)
+                    {
+                        document.getElementById('LikeButton').classList.add('active');
+                        document.getElementById('DislikeButton').classList.remove('active');
+                    }
                     document.getElementById('LikeCount').innerHTML = payload['LikeCount'];
                     document.getElementById('DislikeCount').innerHTML = payload['DislikeCount'];
                 })
@@ -24,6 +34,8 @@
         }
     </script>
 
+    {{ MyVote|json_encode }}
+
 
     <div class="InnerContent">
         <div>
@@ -49,17 +61,19 @@
                         <h2>{{ "Rating"|translate }}</h2>
                         <div class="RatingButtons">
                             {% if _SESSION_.IS_LOGGED_IN %}
-                                <button id="ThumbUp" onclick="VoteOnTune('LIKE');">👍</button>
+                                <button id="DislikeButton" onclick="VoteOnTune('DISLIKE');" {% if MyVote == -1 %}class="active"{% endif %}>👎</button>
-                                <button id="ThumbDown" onclick="VoteOnTune('DISLIKE');">👎</button>
+                                <button id="LikeButton" onclick="VoteOnTune('LIKE');" {% if MyVote == 1 %}class="active"{% endif %}>👍</button>
                             {% else %}
                                 <em>{{ "Log in to vote"|translate }}</em>
                             {% endif %}
                         </div>
                         <div class="Counts">
+                            |
+                            <span>👎 <span id="DislikeCount">{{ TuneDetails.Dislikes }}</span></span>
                             |
                             <span>👍 <span id="LikeCount">{{ TuneDetails.Likes }}</span></span>
                             |
-                            <span>👎 <span id="DislikeCount">{{ TuneDetails.Dislikes }}</span></span>
+                            <span>⭐ <span id="BookmarkCount">{{ TuneDetails.Bookmarks }}</span></span>
                             |
                         </div>
                     </div>