From 6c88ac15fe3c3ed500828e09b561d5118c16856c Mon Sep 17 00:00:00 2001
From: Cerys <cerysamberlewis@gmail.com>
Date: Tue, 28 Jan 2025 15:51:47 +0000
Subject: [PATCH] made a start on tune sets in the ui

---
 Localisation/en-GB.yaml                 |   1 +
 Pages/tune-set/uuid.php                 |  48 ++++++++++
 Pages/tune/uuid.php                     |  46 ++--------
 Routing/Router.php                      |  14 ++-
 Templates/Pages/profile.html.twig       |  57 ++++++++++++
 Templates/Pages/tune-set/uuid.html.twig | 117 ++++++++++++++++++++++++
 Templates/Pages/tune/uuid.html.twig     |  10 ++
 7 files changed, 254 insertions(+), 39 deletions(-)
 create mode 100644 Pages/tune-set/uuid.php
 create mode 100644 Templates/Pages/tune-set/uuid.html.twig

diff --git a/Localisation/en-GB.yaml b/Localisation/en-GB.yaml
index ac2f575..04cd07a 100644
--- a/Localisation/en-GB.yaml
+++ b/Localisation/en-GB.yaml
@@ -133,6 +133,7 @@ Password: Password
 ##################################################
 # S
 ##################################################
+Sets this tune is in: Sets this tune is in
 Suggest another: Suggest another
 Summary: Summary
 
diff --git a/Pages/tune-set/uuid.php b/Pages/tune-set/uuid.php
new file mode 100644
index 0000000..1787c76
--- /dev/null
+++ b/Pages/tune-set/uuid.php
@@ -0,0 +1,48 @@
+<?php
+
+use App\Enumerators\SessionElement;
+use App\Wrappers\DatabaseInteractions;
+use App\Wrappers\SessionWrapper;
+use App\Wrappers\SQLQueryBuilderWrapper;
+use App\Wrappers\TwigWrapper;
+
+require_once __DIR__ . "/../../vendor/autoload.php";
+
+$db = new DatabaseInteractions();
+
+
+$tuneSetDetails = $db->RunOneSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
+        table: 'TuneSets',
+        id: $_GET["tune-set-id"]
+    )
+);
+
+$tunesInSet = $db->RunSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT(
+        table: 'TuneSetTunes'
+    )
+        ->cols(cols: [
+            'T_T.ID AS TuneID',
+            'T_T.CreatedAt AS TuneCreatedAT',
+            'T_T.CreatedBy AS TuneCreatedBy',
+            'T_T.Title AS TuneTitle',
+            'T_T.Copyright AS TuneCopyright',
+        ])
+        ->join(
+            join: 'INNER',
+            spec: 'Tunes AS T_T',
+            cond: 'T.TuneID=T_T.ID',
+        )
+        ->orderBy(spec: [
+            'T.Order ASC',
+        ])
+);
+
+TwigWrapper::RenderTwig(
+    target: "Pages/tune-set/uuid.html.twig",
+    arguments: [
+        "TuneSetDetails"=>$tuneSetDetails,
+        "TunesInSet"=>$tunesInSet,
+    ]
+);
diff --git a/Pages/tune/uuid.php b/Pages/tune/uuid.php
index 427eba0..7560278 100644
--- a/Pages/tune/uuid.php
+++ b/Pages/tune/uuid.php
@@ -26,54 +26,26 @@ $tuneDetails = $db->RunOneSelect(
         )
 );
 
-
-
-$dances = $db->RunSelect(
+$setsThisTuneIsIn = $db->RunSelect(
     queryBuilder: SQLQueryBuilderWrapper::SELECT(
-        table: 'Dances',
+        table: 'TuneSetTunes'
     )
         ->cols(cols: [
-            "CONCAT('[', GROUP_CONCAT(
-                CONCAT(
-                    '{\"ID\":', JSON_QUOTE(T_DS.ID), ',',
-                    '\"CreatedAt\":', JSON_QUOTE(T_DS.CreatedAt), ',',
-                    '\"DanceID\":', JSON_QUOTE(T_DS.DanceID), ',',
-                    '\"BarCountAtStart\":', T_DS.BarCountAtStart, ',',
-                    '\"BarCountAtEnd\":', T_DS.BarCountAtEnd, ',',
-                    '\"Description\":', JSON_QUOTE(T_DS.Description), '}'
-                )
-            ), ']') AS Steps"
+            'T_TS.ID AS TuneSetID',
+            'T_TS.Description AS TuneSetName',
         ])
         ->join(
             join: 'INNER',
-            spec: 'DanceSteps AS T_DS',
-            cond: 'T.ID=T_DS.DanceID'
+            spec: 'TuneSets AS T_TS',
+            cond: 'T.TuneSetID=T_TS.ID',
         )
-        ->join(
-            join: 'INNER',
-            spec: '_Junction_Tunes_Dances AS _J_T_D',
-            cond: 'T.ID=_J_T_D.DanceID'
-        )
-        ->where(cond: '_J_T_D.TuneID=:__tune_id__')
+        ->where(cond: 'T.TuneID LIKE :__tune_id__')
         ->bindValue(name: '__tune_id__', value: $_GET["tune-id"])
         ->groupBy(spec: [
-            'T.ID',
-            'T.CreatedAt',
-            'T.Title',
-            '_J_T_D.ID',
-            '_J_T_D.CreatedAt',
-            '_J_T_D.TuneID',
-            '_J_T_D.DanceID',
+            'T.TuneSetID',
         ])
 );
 
-for ($i = 0; $i < count($dances); $i++)
-    $dances[$i]['Steps'] = json_decode(
-        $dances[$i]['Steps'],
-        true,
-        JSON_THROW_ON_ERROR
-    );
-
 $myVote = 0;
 if(SessionWrapper::Get(SessionElement::IS_LOGGED_IN))
 {
@@ -102,7 +74,7 @@ TwigWrapper::RenderTwig(
     target: "Pages/tune/uuid.html.twig",
     arguments: [
         "TuneDetails"=>$tuneDetails,
-        "Dances"=>$dances,
+        "SetsThisTuneIsIn" => $setsThisTuneIsIn,
         "MyVote"=>$myVote,
     ]
 );
diff --git a/Routing/Router.php b/Routing/Router.php
index 3ee6425..ccc6dcc 100644
--- a/Routing/Router.php
+++ b/Routing/Router.php
@@ -57,10 +57,20 @@ if ($requestElements[0] === "tune" && isset($requestElements[1]))
         require_once __DIR__ . '/../Pages/tune/uuid.php';
         return true;
     }
+}
+elseif ($requestElements[0] === "tune-set" && isset($requestElements[1]))
+{
+    $_GET['tune-set-id'] = $requestElements[1];
+
+    if (count($requestElements) === 2)
+    {
+        require_once __DIR__ . '/../Pages/tune-set/uuid.php';
+        return true;
+    }
 
     $tuneSubRoutes = [
-        "suggest-variant"   => '/../Pages/tune/uuid/suggest-variant.php',
-        "suggest-dance"     => '/../Pages/tune/uuid/suggest-dance.php',
+        "suggest-variant"   => '/../Pages/tune-set/uuid/suggest-variant.php',
+        "suggest-dance"     => '/../Pages/tune-set/uuid/suggest-dance.php',
     ];
 
     if (isset($tuneSubRoutes[$requestElements[2]])) {
diff --git a/Templates/Pages/profile.html.twig b/Templates/Pages/profile.html.twig
index b0e2ed8..b9da783 100644
--- a/Templates/Pages/profile.html.twig
+++ b/Templates/Pages/profile.html.twig
@@ -20,6 +20,8 @@
 
         <div class="Tab">
             <button id="DefaultOpenTab" class="TabLink" onclick="openTuneTab(event, 'MyUploadedTunes')">{{ "My Uploaded Tunes"|translate }}</button>
+            <button class="TabLink" onclick="openTuneTab(event, 'MyTuneSets')">{{ "My Tune Sets"|translate }}</button>
+            <button class="TabLink" onclick="openTuneTab(event, 'MyBookmarkedTunes')">{{ "My Bookmarked 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>
@@ -46,6 +48,61 @@
             </table>
         </div>
 
+        <div id="MyTuneSets" class="TabContent">
+            <h2>{{ "My Tune Sets"|translate }}</h2>
+            <table>
+                <thead>
+                <tr>
+                    <th>{{ "Title"|translate }}</th>
+                    <th>{{ "Created At"|translate }}</th>
+                    <th>{{ "Tunes In Set"|translate }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for tuneSetDetails in YourTuneSets %}
+                    <tr>
+                        <td><a href="/tune-set/{{ tuneSetDetails.ID }}">{{ tuneSetDetails.Description }}</a></td>
+                        <td>{{ tuneSetDetails.CreatedAt }}</td>
+                        <td>
+                            <table>
+                                <tbody>
+                                {% for tuneDetails in tuneSetDetails.TunesInSet %}
+                                    <tr>
+                                        <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
+                                        <td>{{ tuneDetails.TimesThrough }}</td>
+                                    </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                        </td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
+
+        <div id="MyBookmarkedTunes" class="TabContent">
+            <h2>{{ "My Bookmarked 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 YourBookmarkedTunes %}
+                    <tr>
+                        <td><a href="/tune/{{ tuneDetails.TuneID }}">{{ 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>
diff --git a/Templates/Pages/tune-set/uuid.html.twig b/Templates/Pages/tune-set/uuid.html.twig
new file mode 100644
index 0000000..5ff6c10
--- /dev/null
+++ b/Templates/Pages/tune-set/uuid.html.twig
@@ -0,0 +1,117 @@
+{% extends "/Bases/StandardWebPage.html.twig" %}
+
+{% block content %}
+
+
+    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
+    <!--<script src="/Static/JS/ThirdParty/abcjs-plugin-min.js"></script>-->
+    <link rel="stylesheet" href="/Static/CSS/ThirdParty/abcjs-audio.css">
+
+
+    <div class="InnerContent">
+        <div>
+            <div class="container">
+                <div class="left">
+                    <div class="DLContainer">
+                        <h2>{{ "Tune Set Overview"|translate }}</h2>
+                        <dl>
+                            <dt>{{ "Description"|translate }}</dt>
+                            <dd>{{ TuneSetDetails.Description }}</dd>
+                        </dl>
+                    </div>
+                    <div id="RatingContainer">
+                        <h2>{{ "Rating"|translate }}</h2>
+                        <div class="RatingButtons">
+                            {% if _SESSION_.IS_LOGGED_IN %}
+                                <button id="DislikeButton" onclick="VoteOnTune('DISLIKE');" {% if MyVote == -1 %}class="active"{% endif %}>👎</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">{{ TuneSetDetails.Dislikes }}</span></span>
+                            |
+                            <span>👍 <span id="LikeCount">{{ TuneSetDetails.Likes }}</span></span>
+                            |
+                            <span>⭐ <span id="BookmarkCount">{{ TuneSetDetails.Bookmarks }}</span></span>
+                            |
+                        </div>
+                    </div>
+                </div>
+                <div class="center">
+                    <div>
+                        {% for tune in TunesInSet %}
+                            <pre id="NotationContainer--{{ tune.TuneID }}"></pre>
+                        {% endfor %}
+                    </div>
+                </div>
+                <div class="right">
+                    <h2>{{ "Audio"|translate }}</h2>
+                    <div id="MIDI--{{ TuneSetDetails.ID }}"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        if (!window.ABCJS) {
+            console.error("ABCJS library failed to load.");
+        }
+    </script>
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            function populateABC(targetTuneID)
+            {
+                API_GET_TEXT("/V1/GetABCFile.php?tune-variant-id=" + targetTuneID)
+                    .then(payload => {
+                        // Ensure required DOM elements exist
+                        const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
+
+                        if (!notationContainer) {
+                            console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
+                            return;
+                        }
+
+                        console.log(window.ABCJS);
+
+                        // Render the ABC notation
+                        const tunes = window.ABCJS.renderAbc(
+                            notationContainer.id,
+                            payload,
+                            {
+                                add_classes: true,
+                                format: {
+                                    gchordfont: "Atkinson Hyperlegible",
+                                    annotationfont: "Atkinson Hyperlegible",
+                                    headerfont: "Atkinson Hyperlegible",
+                                    infofont: "Atkinson Hyperlegible",
+                                    repeatfont: "Atkinson Hyperlegible",
+                                    tempofont: "Atkinson Hyperlegible",
+                                    titlefont: "Atkinson Hyperlegible",
+                                    voicefont: "Atkinson Hyperlegible",
+                                    wordsfont: "Atkinson Hyperlegible",
+                                },
+                            }
+                        );
+
+                        // Display raw ABC notation
+                        rawABCContainer.innerHTML = payload;
+
+
+
+                        window.ABCJS.startAnimation(notationContainer.id, tunes[0], {
+                            showCursor: true,
+                        });
+                    })
+                    .catch(error => {
+                        console.error("Error fetching ABC data:", error);
+                    });
+            }
+            {% for tune in TunesInSet %}
+            populateABC('{{ tune.TuneID }}');
+            {% endfor %}
+        });
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/Templates/Pages/tune/uuid.html.twig b/Templates/Pages/tune/uuid.html.twig
index 4781652..ccfdf0b 100644
--- a/Templates/Pages/tune/uuid.html.twig
+++ b/Templates/Pages/tune/uuid.html.twig
@@ -82,6 +82,16 @@
                     <h2>{{ "Audio"|translate }}</h2>
                     <div id="MIDI--{{ TuneDetails.ID }}"></div>
 
+                    <div id="TuneSetContainer">
+                        <h2>{{ "Sets this tune is in"|translate }}</h2>
+                        <ul>
+                            {% for tuneSet in SetsThisTuneIsIn %}
+                                <li>
+                                    <a href="/tune-set/{{ tuneSet.TuneSetID }}">{{ tuneSet.TuneSetName }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>