From 1f1e73321488b407eed19f8e4364746b72609655 Mon Sep 17 00:00:00 2001
From: Cerys <cerysamberlewis@gmail.com>
Date: Wed, 19 Feb 2025 10:27:48 +0000
Subject: [PATCH] hgghjfjhgfhgghjjghf

---
 Public/FormHandling/ChangePassword.php        |   2 +
 Public/FormHandling/NewTune.php               |   2 +
 Templates/Pages/create/tune.complex.html.twig | 221 ++++++++++++++++++
 Templates/Pages/dance/uuid.html.twig          |  10 +
 Templates/Pages/profile.html.twig             |   4 +
 5 files changed, 239 insertions(+)
 create mode 100644 Templates/Pages/create/tune.complex.html.twig

diff --git a/Public/FormHandling/ChangePassword.php b/Public/FormHandling/ChangePassword.php
index cab7465..239848b 100644
--- a/Public/FormHandling/ChangePassword.php
+++ b/Public/FormHandling/ChangePassword.php
@@ -9,6 +9,8 @@ use Ramsey\Uuid\Uuid;
 
 require_once __DIR__ . "/../../vendor/autoload.php";
 
+require_once __DIR__ . "/../../vendor/autoload.php";
+
 
 $captchaResponse = $_POST['g-recaptcha-response'];
 CAPTCHAWrapper::HandleCaptchaResponse($captchaResponse);
diff --git a/Public/FormHandling/NewTune.php b/Public/FormHandling/NewTune.php
index 298161b..d95af3e 100644
--- a/Public/FormHandling/NewTune.php
+++ b/Public/FormHandling/NewTune.php
@@ -6,6 +6,8 @@ use App\Wrappers\SessionWrapper;
 use App\Wrappers\SQLQueryBuilderWrapper;
 use Ramsey\Uuid\Uuid;
 
+require_once __DIR__ . "/../../vendor/autoload.php";
+
 $tuneTitle = $_POST['TuneTitle'];
 $tuneCopyright = $_POST['TuneCopyright'];
 
diff --git a/Templates/Pages/create/tune.complex.html.twig b/Templates/Pages/create/tune.complex.html.twig
new file mode 100644
index 0000000..3b7b826
--- /dev/null
+++ b/Templates/Pages/create/tune.complex.html.twig
@@ -0,0 +1,221 @@
+{% extends "/Bases/StandardWebPage.html.twig" %}
+
+{% block content %}
+    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
+    <script>
+
+        let partCounter = 0; // Keeps track of the number of parts
+        let barCounters = {}; // Keeps track of the number of bars in each part
+
+
+
+        function generateABC() {
+            let builder = "";
+
+            // Add the tune metadata
+            builder += "X: 1\n"; // Default index
+            builder += "T: " + document.getElementById("TuneTitle").value + "\n"; // Title
+            builder += "S: " + document.getElementById("TuneCopyright").value + "\n"; // Copyright
+            builder += "M: 4/4\n"; // Default meter
+            builder += "K: C\n"; // Default key
+
+            // Iterate through all parts
+            for (let partId = 1; partId <= partCounter; partId++) {
+                if (document.getElementById(`Part_${partId}`)) {
+                    builder += `P: Part ${partId}\n`; // Part header
+
+                    // Iterate through bars in the part
+                    for (let barId = 1; barId <= barCounters[partId]; barId++) {
+                        const barInput = document.querySelector(`#Part_${partId}_Bar_${barId} .bar-input`);
+                        if (barInput && barInput.value.trim() !== "") {
+                            builder += barInput.value.trim() + " | "; // Append bar content
+                        }
+                    }
+
+                    // Add a line break after each part
+                    builder += "\n";
+                }
+            }
+
+            renderABC(builder); // Render the ABC notation
+        }
+
+        function renderABC(payload)
+        {
+            document.getElementById('ABCReadout').innerHTML = payload;
+            const tunes = window.ABCJS.renderAbc(
+                'NotationContainer',
+                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",
+                    },
+                }
+            );
+        }
+
+
+        function createNewPart() {
+            const container = document.getElementById('PartsWrapper');
+
+            // Increment the part counter
+            partCounter++;
+            barCounters[partCounter] = 8; // Start with 4 bars
+
+            // Create a new part container
+            const newPartDiv = document.createElement('div');
+            newPartDiv.id = `Part_${partCounter}`;
+            newPartDiv.classList.add('part');
+
+            // Add the title and initial bars to the part
+            newPartDiv.innerHTML = `
+            <h3>Part ${partCounter}</h3>
+            <button class="delete-part-btn" onclick="deletePart(${partCounter})">{{ "Delete Part"|translate }}</button>
+            <button class="add-bar-btn" onclick="addBar(${partCounter})">{{ "Add Bar"|translate }}</button>
+            <div class="bars-wrapper" id="BarsWrapper_${partCounter}">
+                ${generateBarsHTML(partCounter, 8)}
+            </div>
+        `;
+
+            container.appendChild(newPartDiv);
+        }
+
+        function addBar(partId) {
+            const barsWrapper = document.getElementById(`BarsWrapper_${partId}`);
+            barCounters[partId]++;
+
+            const barDiv = document.createElement('div');
+            barDiv.classList.add('bar');
+            barDiv.id = `Part_${partId}_Bar_${barCounters[partId]}`;
+            barDiv.innerHTML = `
+            <textarea class="bar-input" placeholder="{{ "Bar"|translate }} ${barCounters[partId]}"></textarea>
+            <button class="bar-btn remove-bar" onclick="removeBar(${partId}, ${barCounters[partId]})">-</button>
+        `;
+            barsWrapper.appendChild(barDiv);
+        }
+
+        function removeBar(partId, barId) {
+            const barDiv = document.getElementById(`Part_${partId}_Bar_${barId}`);
+            if (barDiv) {
+                barDiv.remove();
+            }
+        }
+
+        function deletePart(partId) {
+            const partDiv = document.getElementById(`Part_${partId}`);
+            if (partDiv) {
+                delete barCounters[partId]; // Clean up the bar counters
+                partDiv.remove();
+            }
+        }
+
+        function generateBarsHTML(partId, numBars) {
+            let barsHTML = '';
+            for (let i = 1; i <= numBars; i++) {
+                barsHTML += `
+                <div class="bar" id="Part_${partId}_Bar_${i}">
+                    <input type="text" class="bar-input" placeholder="{{ "Bar"|translate }} ${i}" onchange=generateABC()></textarea>
+                    <button class="bar-btn remove-bar" onclick="removeBar(${partId}, ${i})">-</button>
+                </div>
+            `;
+            }
+            return barsHTML;
+        }
+    </script>
+
+    <style>
+        .part {
+            border: 1px solid #ddd;
+            margin: 1rem 0;
+            padding: 1rem;
+            border-radius: 5px;
+            background: #f9f9f9;
+        }
+
+        .bars-wrapper {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+
+        .bar {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: 0.5rem;
+        }
+
+        .bar textarea {
+            width: 8rem;
+            height: 3rem;
+            resize: none;
+        }
+
+        .bar-btn {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.9rem;
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            background-color: #ff4d4d;
+            color: white;
+        }
+
+        .bar-btn:hover {
+            background-color: #d93636;
+        }
+
+        .delete-part-btn,
+        .add-bar-btn {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 3px;
+            padding: 0.5rem 1rem;
+            cursor: pointer;
+            margin: 0.5rem 0;
+        }
+
+        .delete-part-btn:hover,
+        .add-bar-btn:hover {
+            background-color: #0056b3;
+        }
+    </style>
+
+    <div class="InnerContent">
+        <h1>{{ "Tune Creator"|translate }}</h1>
+
+        <div class="container">
+            <div class="left-main">
+                <div>
+                    <label for="TuneTitle">{{ "Tune Title"|translate }}</label><br>
+                    <input id="TuneTitle" name="TuneTitle" type="text" onchange="generateABC()">
+                    <br><br>
+                    <label for="TuneCopyright">{{ "Copyright"|translate }}</label><br>
+                    <input id="TuneCopyright" name="TuneCopyright" type="text" onchange="generateABC()">
+
+                    <div>
+                        <button onclick="createNewPart()">{{ "Create New Part"|translate }}</button>
+                        <div id="PartsWrapper"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="right">
+                <textarea id="ABCReadout" style="width: 100%; height: 25rem;" readonly></textarea>
+            </div>
+        </div>
+
+        <div id="NotationContainer"></div>
+    </div>
+{% endblock %}
diff --git a/Templates/Pages/dance/uuid.html.twig b/Templates/Pages/dance/uuid.html.twig
index dcf1694..79a1687 100644
--- a/Templates/Pages/dance/uuid.html.twig
+++ b/Templates/Pages/dance/uuid.html.twig
@@ -76,6 +76,16 @@
                     </table>
                 </div>
                 <div class="right">
+                    <div id="TuneSetContainer">
+                        <h2>{{ "Sets this dance is in"|translate }}</h2>
+                        <ul>
+                            {% for tuneSet in SetsThisDanceIsIn %}
+                                <li>
+                                    <a href="/tune-set/{{ tuneSet.TuneSetID }}">{{ tuneSet.TuneSetName }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/Templates/Pages/profile.html.twig b/Templates/Pages/profile.html.twig
index 43e995e..e6a28a6 100644
--- a/Templates/Pages/profile.html.twig
+++ b/Templates/Pages/profile.html.twig
@@ -37,6 +37,7 @@
                     <th>{{ "Title"|translate }}</th>
                     <th>{{ "Created At"|translate }}</th>
                     <th>{{ "Copyright"|translate }}</th>
+                    <th></th>
                 </tr>
                 </thead>
                 <tbody>
@@ -45,6 +46,9 @@
                         <td><a href="/tune/{{ tuneDetails.ID }}">{{ tuneDetails.Title }}</a></td>
                         <td>{{ tuneDetails.CreatedAt }}</td>
                         <td>{{ tuneDetails.Copyright }}</td>
+                        <td>
+                            <a href="">{{ "Delete"|translate }}</a>
+                        </td>
                     </tr>
                 {% endfor %}
                 </tbody>