now dynamically generates the ABC files from db

Public/API/V1/GetABCFile.php

@@ -7,21 +7,29 @@ $tuneDir = __DIR__ . '/../../../LocalStorage/Tunes';
 $targetTuneID = $_GET['tune-id'];
 
 
-$data = (new DatabaseInteractions())->RunOneSelect(
+$result = (new DatabaseInteractions())->RunOneSelect(
     queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
         table: 'Tunes',
         id: $targetTuneID
     )
     ->cols(cols: [
-        'T.ABC',
+        'T.*',
     ])
 );
 
+$temp = new \App\Dataclasses\ABCWrapper($result);
+
+/*
+header(header: "Content-type: text/text");
+echo($temp->Build());
+die();
+*/
+
 /*
 $filePath = "$tuneDir/$targetTuneID/primary.abc";
 $temp = file_get_contents(filename: $filePath);
 */
 
 header(header: "Content-type: text/xml");
-echo $data['ABC'];
+echo $temp->Build();
 die();

Public/Static/CSS/Elements/Columns.css

@@ -0,0 +1,14 @@
+
+.container {
+    display: flex;
+    width: 100%;
+}
+
+.left, .right {
+    width: 25%;
+}
+
+.center {
+    width: 50%;
+}
+

Public/Static/CSS/Elements/DescriptionLists.css

@@ -0,0 +1,85 @@
+
+dl {
+    display: inline-block;
+    margin: 0 0 1rem 0;
+    width: 100%;
+    position: relative;
+}
+dt {
+    font-weight: normal;
+    margin: 0 0 0 0;
+}
+dd {
+    font-weight: normal;
+    margin: 0 0 1em 0;
+}
+
+@media only screen and (min-width: 200mm) {
+    dt {
+        display: inline-block;
+        vertical-align: text-top;
+        width: 10rem;
+        margin-top: 0;
+        margin-bottom: 0.5em;
+    }
+    dd {
+        display: inline-block;
+        width: 100%;
+        vertical-align: text-top;
+        padding-left: 5mm;
+        padding-right: 11rem;
+        box-sizing: border-box;
+        margin-top: 0;
+        margin-left: 0;
+        margin-bottom: 0.5em;
+        margin-right: -11rem;
+    }
+}
+
+.DLContainer {
+    margin-bottom: 2rem;
+}
+
+.DLContainer > dl {
+    padding: 0.1rem 0 0.1rem 1rem;
+    margin: 0 0 2.2rem 0;
+    border-width: var(--outline-width);
+    border-style: none none none solid;
+    border-color: var(--foreground-color);
+    overflow: visible;
+}
+@media only screen and (max-width: 180mm) {
+    .DLContainer > dl {
+        padding: 0.1rem 0 0.1rem 0.6rem;
+        margin: 0 0 2.2rem -0.5rem;
+        width: 100%;
+        box-sizing: content-box;
+        border-width: 0.15rem;
+        border-style: none none none solid;
+        border-color: var(--foreground-color);
+        overflow: visible;
+    }
+}
+.DLContainer > *:first-child, .DLContainer > a:first-child > * {
+    margin-top: 0;
+    margin-bottom: 0.5em;
+}
+.DLContainer > h2:first-child, .DLContainer > h3:first-child, .DLContainer > a:first-child > h2, .DLContainer > a:first-child > h3 {
+    margin-top: -0.3em;
+    display: inline-block;
+}
+.DLContainer > *:last-child {
+    margin-bottom: 0;
+}
+.DLContainer > .button-box:last-child {
+    margin: 0 -1rem -1rem 0;
+    padding: 0 0 0 0;
+}
+
+.DLContainer > .heading-of-hideable-content {
+    margin-bottom: -0.3em;
+}
+
+.DLContainer > .heading-of-hideable-content + div {
+    margin-top: 1.5rem;
+}

Public/Static/CSS/Elements/HomePage.css

@@ -3,7 +3,6 @@
 
 .InnerContent {
     margin: 0 auto;
-    text-align: center;
 }
 
 input[type="text"] {

Public/Static/CSS/Elements/NavBar.css

@@ -0,0 +1,29 @@
+
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+nav li {
+    float: left;
+}
+
+nav li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+nav li a:hover:not(.active) {
+    background-color: #111;
+}
+
+nav .active {
+    background-color: #04AA6D;
+}

Public/Static/JS/General/ABCWrapper.js

@@ -4,7 +4,7 @@ function RenderABC(containerID, targetTuneID)
 
     API_GET("/V1/GetABCFile.php?tune-id=" + targetTuneID).then(payload => {
 
-        ABCJS.renderAbc(
+        const tunes = ABCJS.renderAbc(
             containerID,
             payload,
             {
@@ -19,11 +19,10 @@ function RenderABC(containerID, targetTuneID)
                     titlefont: "Atkinson Hyperlegible",
                     voicefont: "Atkinson Hyperlegible",
                     wordsfont: "Atkinson Hyperlegible",
-                }
+                },
             }
             );
-
+        document.getElementById('RawABCReadout').innerHTML = payload;
-
 
     })
         .catch(error => {

Templates/Pages/index.html.twig

@@ -8,7 +8,6 @@
     </div>
 
     <script>
-        // Event listener for real-time search
         document.getElementById("SearchInput").addEventListener("input", (event) => {
             const query = event.target.value;
             if (query.trim().length > 0) {

Templates/Pages/tune/uuid.html.twig

@@ -2,10 +2,44 @@
 
 {% block content %}
 
-    <h1>{{ TuneDetails.Title }}</h1>
+    <div class="InnerContent">
-    <div id="music-container"></div>
+        <div class="container">
+            <div class="left">
+                <div class="DLContainer">
+                    <h1>{{ TuneDetails.Title }}</h1>
+                    <dl>
+                        <dt>Time Signature</dt>
+                        <dd>{{ TuneDetails.TimeSignature }}</dd>
+
+                        <dt>Key Signature</dt>
+                        <dd>{{ TuneDetails.KeySignature }}</dd>
+
+                        <dt>Copyright</dt>
+                        <dd>{{ TuneDetails.Copyright }}</dd>
+
+                        <dt>Number of Parts</dt>
+                        <dd>{{ TuneDetails.Parts|json_decode|length }}</dd>
+                    </dl>
+                </div>
+            </div>
+            <div class="center">
+                <div id="music-container"></div>
+                <div>
+                    <h2>ABC Notation</h2>
+                    <pre id="RawABCReadout">
+
+                    </pre>
+                </div>
+            </div>
+            <div class="right">
+                <h2>Audio</h2>
+                <audio id="midiPlayer" controls></audio>
+
+            </div>
+        </div>
+    </div>
 
     <script>
-        RenderABC("music-container", '45e8cdc9-da6f-11ef-985c-00bf21dc3191');
+        RenderABC("music-container", '{{ TuneDetails.ID }}');
     </script>
 {% endblock %}