polyphonic/app/library/templates/library/item_list.html

{% extends "interface/project_base.html" %}

{% block admin %}
<a class="button is-link" href="{% url 'item_list_manage' project.pk %}">
    <span class="icon"><i class="fas fa-list"></i></span>
    <span>Change items</span>
</a>
{% endblock %}

{% block page %}
<form action="" method="post" target="_blank">
{% csrf_token %}
<div>
    <div class="field is-grouped is-grouped-centered">
        <div class="field has-addons control">
            
            <span class="control">
                <a class="button is-static">Your Instrument</a>
            </span>

            <span class="control">
                <input type="text" class="input" list="instrument-list" id="instrument-name" onchange="updateParts()"/>
                <datalist id="instrument-list">
                    {% for inst in instruments %}
                    <option value="{{inst.1}}"/>
                    {% endfor %}
                </datalist>
            </span>
            <span class="control">
                <span class="select" onchange="updateParts()">
                <select id="part-preference">
                    <option value="0">Any</option>
                    <option value="1">1st</option>
                    <option value="2">2nd</option>
                    <option value="3">3rd</option>
                    <option value="4">4th</option>
                </select>
                </span>
            </span>
        </div>
        <span class="control">
            <button type="submit" class="button is-primary">
                <span class="icon"><i class="fas fa-copy"></i></span>
                <span>Get My Parts!</span>
            </button>
        </span>
    </div>
</div>

<table class="table is-striped is-fullwidth">
    <thead>
        <tr>
            <th/>
            <th>Piece</th>
            <th>Running time</th>
            <th>Part</th>
            <th/>
        </tr>
    </thead>
    <tbody>
        {% for item in object_list %}
            <tr>
                <td>{{ forloop.counter }}.</td>
                <td>
                    {% if request.is_admin %}
                    <a href="{% url 'work_detail' item.work.pk %}">{{ item.work.name }}</a>
                    {% else %}
                    {{ item.work.name }}
                    {% endif %}
                </td>
                <td>{% firstof item.work.running_time "------" %}</td>
                <td class="select-cell">
                    <input type="hidden" name="works" value="{{ item.work.pk }}"/>
                    <span class="select is-small">
                    <select name="instruments">
                        <option value='-'>None</option>
                        {% for part in item.work.digital_parts %}
                        <option value='{{ part.tag }}'>{{ part.instrument }}</option>
                        {% endfor %}
                    </select>
                    </span>
                </td>
                <td>
                    <a href=""><i class="fas fa-download"></i></a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    <tfoot>
        <tr>
            <td/>
            <td/>
            <td>{{ running_time }}</td>
            <td/>
            <td>
                <button class="button is-link is-small" type="submit"><span class="icon"><i class="fas fa-copy"></i></span><span>Single combined PDF</span></button>
                <a class="button is-link is-small"><span class="icon"><i class="fas fa-archive"></i></span><span>Individual files (zipped)</span></a>
            </td>
        </tr>
    </tfoot>
</table>
</form>

<p class="content">
    This page lets you download a complete set of music for your part by selecting your instrument
    and optionally a part (e.g. Flute 1 or 2).<br/>
    You can also tweak which parts you get for each piece, or click on a piece for more download options.
</p>
{% endblock %}

{% block scripts %}
{{ instruments|json_script:'instruments' }}
<script type="text/javascript">

const INSTRUMENTS = JSON.parse(document.getElementById('instruments').innerText);

function updateParts() {
    var inst = document.getElementById("instrument-name").value;
    window.localStorage.setItem('instrument-name', inst);

    for (let i of INSTRUMENTS) {
        if (i[1] === inst) inst = i[0];
    }


    let part = document.getElementById("part-preference").value;
    window.localStorage.setItem('part-preference', part);


    selectParts(inst, part);
    
}

function selectParts(inst, part) {

    let prefix = inst + "-" + part;

    let instruments = document.getElementsByName("instruments");
    for(let i=0; i<instruments.length; i++) {
        var result = "-"
        let options = instruments[i].children;
        for(let j=0; j<options.length; j++) {
            let value = options[j].value;
            if (value.startsWith(prefix)) {
                result = value;
                break;
            }
            if (result==="-" && value.startsWith(inst)) {
                result = value;
            }
        }
        instruments[i].value = result;
    }

}

document.getElementById("instrument-name").value = localStorage.getItem('instrument-name', 'All');
document.getElementById("part-preference").value = localStorage.getItem('part-preference', 'Any');
updateParts();


</script>
{% endblock %}