From c222e3f987e5de7cc03f8684b55139a451d49761 Mon Sep 17 00:00:00 2001
From: Cerys <cerysamberlewis@gmail.com>
Date: Tue, 28 Jan 2025 12:42:49 +0000
Subject: [PATCH] can now keep track of likes and dislikes

---
 Localisation/en-GB.yaml             |   6 ++
 Pages/profile.php                   |  41 ++++++++++
 Public/Static/CSS/Elements/Tabs.css |  46 ++++++++++++
 Public/Static/CSS/Mapper.css        |   1 +
 Templates/Pages/profile.html.twig   | 112 +++++++++++++++++++++-------
 5 files changed, 179 insertions(+), 27 deletions(-)
 create mode 100644 Public/Static/CSS/Elements/Tabs.css

diff --git a/Localisation/en-GB.yaml b/Localisation/en-GB.yaml
index 794e447..ac2f575 100644
--- a/Localisation/en-GB.yaml
+++ b/Localisation/en-GB.yaml
@@ -23,6 +23,7 @@ Confirm New Password: Confirm New Password
 Confirm Password: Confirm Password
 Copyright: Copyright
 Create an Account: Create an Account
+Created At: Created At
 
 
 
@@ -89,6 +90,10 @@ Logout: Logout
 ##################################################
 # M
 ##################################################
+My Bookmarked Tunes: My Bookmarked Tunes
+My Disliked Tunes: My Disliked Tunes
+My Liked Tunes: My Liked Tunes
+My Uploaded Tunes: My Uploaded Tunes
 
 
 
@@ -137,6 +142,7 @@ Summary: Summary
 # T
 ##################################################
 Time Signature: Time Signature
+Title: Title
 
 
 
diff --git a/Pages/profile.php b/Pages/profile.php
index cf1ad2a..d8ed623 100644
--- a/Pages/profile.php
+++ b/Pages/profile.php
@@ -18,10 +18,51 @@ $yourTunes = $db->RunSelect(
     ->bindValue(name: '__user_id__', value: SessionWrapper::Get(target: SessionElement::USER_ID))
 );
 
+$yourLikedTunes = $db->RunSelect(
+    queryBuilder: \App\Wrappers\SQLQueryBuilderWrapper::SELECT(
+        table: 'TuneRatings'
+    )
+        ->cols(cols: [
+            'T_T.Title',
+            'T_T.CreatedAt',
+            'T_T.Copyright',
+        ])
+        ->join(
+            join: 'INNER',
+            spec: 'Tunes AS T_T',
+            cond: 'T.TuneID=T_T.ID',
+        )
+        ->where(cond: 'T.CreatedBy LIKE :__user_id__')
+        ->where(cond: 'Rating = 1')
+        ->bindValue(name: '__user_id__', value: SessionWrapper::Get(target: SessionElement::USER_ID))
+);
+
+$yourDislikedTunes = $db->RunSelect(
+    queryBuilder: \App\Wrappers\SQLQueryBuilderWrapper::SELECT(
+        table: 'TuneRatings'
+    )
+        ->cols(cols: [
+            'T_T.Title',
+            'T_T.CreatedAt',
+            'T_T.Copyright',
+        ])
+        ->join(
+            join: 'INNER',
+            spec: 'Tunes AS T_T',
+            cond: 'T.TuneID=T_T.ID',
+        )
+        ->where(cond: 'T.CreatedBy LIKE :__user_id__')
+        ->where(cond: 'Rating = 0')
+        ->bindValue(name: '__user_id__', value: SessionWrapper::Get(target: SessionElement::USER_ID))
+);
+
 TwigWrapper::RenderTwig(
     target: "Pages/profile.html.twig",
     arguments: [
         "YourTunes" => $yourTunes,
         "YourDances" => [],
+        "YourLikedTunes"=> $yourLikedTunes,
+        "YourDislikedTunes"=> $yourDislikedTunes,
+        "YourBookmarkedTunes"=> [],
     ],
 );
diff --git a/Public/Static/CSS/Elements/Tabs.css b/Public/Static/CSS/Elements/Tabs.css
new file mode 100644
index 0000000..0470f75
--- /dev/null
+++ b/Public/Static/CSS/Elements/Tabs.css
@@ -0,0 +1,46 @@
+
+.Tab {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+}
+
+.Tab button {
+    background-color: inherit;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    transition: 0.3s;
+    font-size: 17px;
+}
+
+.Tab button:hover {
+    background-color: #ddd;
+}
+
+.Tab button.active {
+    background-color: #ccc;
+}
+
+.TabLink {
+
+}
+
+.TabContent {
+    display: none;
+    padding: 6px 12px;
+    -webkit-animation: fadeEffect 1s;
+    animation: TabContentFadeEffect 1s;
+}
+
+@-webkit-keyframes TabContentFadeEffect {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
+
+@keyframes TabContentFadeEffect {
+    from {opacity: 0;}
+    to {opacity: 1;}
+}
diff --git a/Public/Static/CSS/Mapper.css b/Public/Static/CSS/Mapper.css
index df35171..77ae77f 100644
--- a/Public/Static/CSS/Mapper.css
+++ b/Public/Static/CSS/Mapper.css
@@ -14,4 +14,5 @@
 @import "/Static/CSS/Elements/HomePage.css";
 @import "/Static/CSS/Elements/NavBar.css";
 @import "/Static/CSS/Elements/Rating.css";
+@import "/Static/CSS/Elements/Tabs.css";
 
diff --git a/Templates/Pages/profile.html.twig b/Templates/Pages/profile.html.twig
index 5fa1694..65d0041 100644
--- a/Templates/Pages/profile.html.twig
+++ b/Templates/Pages/profile.html.twig
@@ -18,34 +18,92 @@
             </dl>
         </div>
 
-        <h2>{{ "Your Tunes"|translate }}</h2>
-        <table>
-            <thead>
-            <tr>
-                <th>{{ "Title"|translate }}</th>
-                <th>{{ "Created At"|translate }}</th>
-                <th>{{ "Copyright"|translate }}</th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for tuneDetails in YourTunes %}
+        <div class="Tab">
+            <button id="DefaultOpenTab" class="TabLink" onclick="openTuneTab(event, 'MyUploadedTunes')">{{ "My Uploaded Tunes"|translate }}</button>
+            <button class="TabLink" onclick="openTuneTab(event, 'MyLikedTunes')">{{ "My Liked Tunes"|translate }}</button>
+            <button class="TabLink" onclick="openTuneTab(event, 'MyDislikedTunes')">{{ "My Disliked Tunes"|translate }}</button>
+        </div>
+
+        <div id="MyUploadedTunes" class="TabContent">
+            <h2>{{ "My Uploaded Tunes"|translate }}</h2>
+            <table>
+                <thead>
+                <tr>
+                    <th>{{ "Title"|translate }}</th>
+                    <th>{{ "Created At"|translate }}</th>
+                    <th>{{ "Copyright"|translate }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for tuneDetails in YourTunes %}
+                    <tr>
+                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
+                        <td>{{ tuneDetails.CreatedAt }}</td>
+                        <td>{{ tuneDetails.Copyright }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        <div id="MyLikedTunes" class="TabContent">
+            <h2>{{ "My Liked Tunes"|translate }}</h2>
+            <table>
+                <thead>
                 <tr>
-                    <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
-                    <td>{{ tuneDetails.CreatedAt }}</td>
-                    <td>{{ tuneDetails.Copyright }}</td>
+                    <th>{{ "Title"|translate }}</th>
+                    <th>{{ "Created At"|translate }}</th>
+                    <th>{{ "Copyright"|translate }}</th>
                 </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-
-        <h2>{{ "Your Dances"|translate }}</h2>
-        <table>
-            <thead>
-            <tr>
-                <th>{{ "Title"|translate }}</th>
-                <th>{{ "Created At"|translate }}</th>
-            </tr>
-            </thead>
-        </table>
+                </thead>
+                <tbody>
+                {% for tuneDetails in YourLikedTunes %}
+                    <tr>
+                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
+                        <td>{{ tuneDetails.CreatedAt }}</td>
+                        <td>{{ tuneDetails.Copyright }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        <div id="MyDislikedTunes" class="TabContent">
+            <h2>{{ "My Disliked Tunes"|translate }}</h2>
+            <table>
+                <thead>
+                <tr>
+                    <th>{{ "Title"|translate }}</th>
+                    <th>{{ "Created At"|translate }}</th>
+                    <th>{{ "Copyright"|translate }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for tuneDetails in YourDislikedTunes %}
+                    <tr>
+                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
+                        <td>{{ tuneDetails.CreatedAt }}</td>
+                        <td>{{ tuneDetails.Copyright }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
+    <script>
+        document.getElementById("DefaultOpenTab").click();
+        function openTuneTab(evt, cityName) {
+            var i, tabcontent, tablinks;
+            tabcontent = document.getElementsByClassName("TabContent");
+            for (i = 0; i < tabcontent.length; i++) {
+                tabcontent[i].style.display = "none";
+            }
+            tablinks = document.getElementsByClassName("TabLink");
+            for (i = 0; i < tablinks.length; i++) {
+                tablinks[i].className = tablinks[i].className.replace(" active", "");
+            }
+            document.getElementById(cityName).style.display = "block";
+            evt.currentTarget.className += " active";
+        }
+    </script>
 {% endblock %}