com.ceilidhkit/Templates/Pages/tune/uuid.html.twig

{% extends "/Bases/StandardWebPage.html.twig" %}

{% block content %}

    <div class="InnerContent">
        <h1>{{ "Variants of"|translate }} "{{ TuneDetails.Title }}"</h1>
        {% for x in TuneVariants %}
            <div>
                <button class="accordion">{{ "Variant"|translate }} {{ loop.index }}</button>
                <div class="panel">
                    <div class="container">
                        <div class="left">
                            <div class="DLContainer">
                                <dl>
                                    <dt>{{ "Time Signature"|translate }}</dt>
                                    <dd>{{ x.TimeSignature }}</dd>

                                    <dt>{{ "Key Signature"|translate }}</dt>
                                    <dd>{{ x.KeySignature }}</dd>

                                    <dt>{{ "Copyright"|translate }}</dt>
                                    <dd>{{ TuneDetails.Copyright }}</dd>

                                    <dt>{{ "Number of Parts"|translate }}</dt>
                                    <dd>{{ TuneDetails.Parts|json_encode }}</dd>
                                </dl>
                            </div>
                        </div>
                        <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>
        {% endfor %}
    </div>

    <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>
        {% endfor %}
    </div>

    <script>
        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 %}