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

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

{% block content %}
    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
    <script>

        let partCounter = 0; // Track part count
        let partLetters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // Allowed letters for parts
        let barCounters = {}; // Bar counters per part

        function getPartLetter(index) {
            return partLetters[index] || `X${index}`; // Prevent overflow
        }

        function generateABC() {
            let builder = "";

            builder += "T: " + document.getElementById("TuneTitle").value + "\n";
            builder += "S: " + document.getElementById("TuneCopyright").value + "\n";

            for (let i = 0; i < partCounter; i++) {
                let partLetter = getPartLetter(i);
                let partTextarea = document.getElementById(`TextArea-Part${partLetter}`);
                let timeSigInput = document.getElementById(`PartTimeSignature-Part${partLetter}`);
                let keySigInput = document.getElementById(`PartKeySignature-Part${partLetter}`);

                if (partTextarea) {
                    builder += `P: Part ${partLetter}\n`;

                    if (timeSigInput && timeSigInput.value.trim() !== "") {
                        builder += `M: ${timeSigInput.value}\n`;
                    }

                    if (keySigInput && keySigInput.value.trim() !== "") {
                        builder += `K: ${keySigInput.value}\n`;
                    }

                    builder += partTextarea.value + "\n";
                }
            }

            renderABC(builder);
        }


        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() {
            if (partCounter >= partLetters.length) {
                alert("Maximum parts reached");
                return;
            }

            let partLetter = getPartLetter(partCounter);
            partCounter++;

            const container = document.getElementById('PartsWrapper');
            const newPartDiv = document.createElement('div');
            newPartDiv.id = `Part_${partLetter}`;
            newPartDiv.classList.add('part');

            newPartDiv.innerHTML = `
        <h3>Part ${partLetter}</h3>
        <a class="delete-part-btn" href="javascript:deletePart('${partLetter}')">{{ "Delete Part"|translate }}</a>
        <br>
        <label for="PartTimeSignature-Part${partLetter}">{{ "Time Signature"|translate }}</label><br>
        <input id="PartTimeSignature-Part${partLetter}" name="PartTimeSignature-Part${partLetter}" type="text" onchange="generateABC()">
        <br>
        <label for="PartKeySignature-Part${partLetter}">{{ "Key Signature"|translate }}</label><br>
        <input id="PartKeySignature-Part${partLetter}" name="PartKeySignature-Part${partLetter}" type="text" onchange="generateABC()">
        <br>
        <textarea id="TextArea-Part${partLetter}" name="TextArea-Part${partLetter}" style="width: 100%; height: 5rem;" onchange="generateABC()"></textarea>
    `;

            container.appendChild(newPartDiv);
        }


        function deletePart(partLetter) {
            const partDiv = document.getElementById(`Part_${partLetter}`);
            if (partDiv) {
                partDiv.remove();
            }
        }
    </script>

    <style>
        .part {
            border: 1px solid #ddd;
            margin: 1rem 0;
            padding: 1rem;
            border-radius: 5px;
            background: #f9f9f9;
        }
    </style>

    <div class="InnerContent">
        <h1>{{ "Tune Creator"|translate }}</h1>

        <div class="container">
            <div class="left-main">
                <form action="/FormHandling/NewTune.php" method="POST">
                    <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>
                        <a href="javascript:createNewPart()">{{ "Create New Part"|translate }}</a>
                        <div id="PartsWrapper"></div>
                    </div>

                    <input type="submit">
                </form>
            </div>
            <div class="right">
                <textarea id="ABCReadout" style="width: 100%; height: 25rem;" readonly></textarea>
            </div>
        </div>

        <div id="NotationContainer"></div>
    </div>
{% endblock %}