started work on the ability to handle dances too

Pages/tune/uuid.php

@@ -19,15 +19,62 @@ $variants = $db->RunSelect(
     queryBuilder: SQLQueryBuilderWrapper::SELECT(
         table: 'TuneVariants',
     )
-    ->where(cond: 'T.TuneID=:__tune_id__')
+        ->where(cond: 'T.TuneID=:__tune_id__')
-    ->bindValue(name: '__tune_id__', value: $_GET["tune-id"])
+        ->bindValue(name: '__tune_id__', value: $_GET["tune-id"])
 );
 
+$dances = $db->RunSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT(
+        table: 'Dances',
+    )
+        ->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"
+        ])
+        ->join(
+            join: 'INNER',
+            spec: 'DanceSteps AS T_DS',
+            cond: 'T.ID=T_DS.DanceID'
+        )
+        ->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__')
+        ->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',
+        ])
+);
+
+for ($i = 0; $i < count($dances); $i++)
+    $dances[$i]['Steps'] = json_decode(
+        $dances[$i]['Steps'],
+        true,
+        JSON_THROW_ON_ERROR
+    );
+
 TwigWrapper::RenderTwig(
     target: "Pages/tune/uuid.html.twig",
     arguments: [
         "TuneDetails"=>$tuneDetails,
         "TuneVariants"=>$variants,
+        "Dances"=>$dances,
     ]
 );
 

Templates/Pages/tune/uuid.html.twig

@@ -3,43 +3,102 @@
 {% block content %}
 
     <div class="InnerContent">
-        <div class="container">
+        <h1>{{ "Variants of"|translate }} "{{ TuneDetails.Title }}"</h1>
-            <div class="left">
+        {% for x in TuneVariants %}
-                <div class="DLContainer">
+            <div>
-                    <h1>{{ TuneDetails.Title }}</h1>
+                <button class="accordion">{{ "Variant"|translate }} {{ loop.index }}</button>
-                    <dl>
+                <div class="panel">
-                        <dt>Time Signature</dt>
+                    <div class="container">
-                        <dd>{{ TuneDetails.TimeSignature }}</dd>
+                        <div class="left">
-
+                            <div class="DLContainer">
-                        <dt>Key Signature</dt>
+                                <dl>
-                        <dd>{{ TuneDetails.KeySignature }}</dd>
+                                    <dt>{{ "Time Signature"|translate }}</dt>
-
+                                    <dd>{{ x.TimeSignature }}</dd>
-                        <dt>Copyright</dt>
+
-                        <dd>{{ TuneDetails.Copyright }}</dd>
+                                    <dt>{{ "Key Signature"|translate }}</dt>
-
+                                    <dd>{{ x.KeySignature }}</dd>
-                        <dt>Number of Parts</dt>
+
-                        <dd>{{ TuneDetails.Parts|json_decode|length }}</dd>
+                                    <dt>{{ "Copyright"|translate }}</dt>
-                    </dl>
+                                    <dd>{{ TuneDetails.Copyright }}</dd>
-                </div>
+
-            </div>
+                                    <dt>{{ "Number of Parts"|translate }}</dt>
-            <div class="center">
+                                    <dd>{{ TuneDetails.Parts|json_encode }}</dd>
-                <div id="music-container"></div>
+                                </dl>
-                <div>
+                            </div>
-                    <h2>ABC Notation</h2>
+                        </div>
-                    <pre id="RawABCReadout">
+                        <div class="center">
+                            <div id="music-container--{{ x.ID }}"></div>
+                            <div>
+                                <h2>{{ "ABC Notation"|translate }}</h2>
+                                <pre id="RawABCReadout">
 
                     </pre>
+                            </div>
+                        </div>
+                        <div class="right">
+                            <h2>{{ "Audio"|translate }}</h2>
+                            <audio id="midiPlayer" controls></audio>
+
+                        </div>
+                    </div>
                 </div>
             </div>
-            <div class="right">
+        {% endfor %}
-                <h2>Audio</h2>
+    </div>
-                <audio id="midiPlayer" controls></audio>
 
+    <div class="InnerContent">
+        <h1>{{ "Dances for"|translate }} "{{ TuneDetails.Title }}"</h1>
+        {% for x in Dances %}
+            <div>
+                <button class="accordion">{{ x.Title }}</button>
+                <div class="panel">
+                    <h2>Steps</h2>
+                    <table>
+                        <thead>
+                        <tr>
+                            <th colspan="2">{{ "Bars"|translate }}</th>
+                            <th>{{ "Description"|translate }}</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        {% for step in x.Steps %}
+                            <tr>
+                                <th>{{ step.BarCountAtStart }}</th>
+                                <th>{{ step.BarCountAtEnd }}</th>
+                                <td>{{ step.Description }}</td>
+                            </tr>
+                        {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
+        {% endfor %}
     </div>
 
     <script>
-        RenderABC("music-container", '{{ TuneDetails.ID }}');
+        var acc = document.getElementsByClassName("accordion");
+        var i;
+
+        for (i = 0; i < acc.length; i++) {
+            acc[i].addEventListener("click", function() {
+                /* Toggle between adding and removing the "active" class,
+                to highlight the button that controls the panel */
+                this.classList.toggle("active");
+
+                /* Toggle between hiding and showing the active panel */
+                var panel = this.nextElementSibling;
+                if (panel.style.display === "block") {
+                    panel.style.display = "none";
+                } else {
+                    panel.style.display = "block";
+                }
+            });
+        }
+    </script>
+
+    <script>
+        {% for x in TuneVariants %}
+        RenderABC("music-container--{{ x.ID }}", '{{ x.ID }}');
+        {% endfor %}
     </script>
 {% endblock %}