benchcoach-django/lineups/templates/lineups/lineup.html

{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}{% load static %}

{% block content %}
    <h1>{{ title }}</h1>
    {{ event.away_team.name }} vs. {{ event.home_team.name }} <br>
    {{ event.start|date:"l, F j, Y g:i A" }} <br>
    {{ event.venue.name }} <br>
    <div class="container">
        <form action="{%  url 'edit lineup' event_id=event.id%}" method="post">
            {% csrf_token %}
            {{ formset.management_form }}
            <div class="row">
                <div class="col-md-6">
                    <h5>Lineup</h5>
                    <table class="table">
                        {% include 'lineups/player-table-header.html' %}
                        <tbody  id="lineup">
                        {% for form in formset %}
                            {% if form.instance.order or form.instance.position == "P"  %}
                                {% include 'lineups/player-table-row.html' with form=form available_display="none" order_display="table-cell" %}
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table>
                    <input type="submit" value="Submit">
                </div>

                <div class="col-md-6">
                    <h5>Players</h5>
                    <table class="table">
                        {% include 'lineups/player-table-header.html' %}
                        <tbody id="bench">
                        {% for form in formset|dictsortreversed:"availability.available"%}
                            {% if not form.instance.order and not form.instance.position == "P"  %}
                                {% include 'lineups/player-table-row.html' with form=form available_display="table-cell" order_display="none" %}
                            {% endif %}
                        {% endfor %}
                        </tbody>
                    </table >
                </div>

            </div>
        </form>
    </div>
    <script src="{% static 'js/Sortable.js' %}"></script>
    <script id="sortable">
        function refresh_lineup_order (){
            var player_rows = document.getElementById('lineup').querySelectorAll('tr')
            var has_dh = false

            for (let i = 0; i < player_rows.length; i++) {
                if (player_rows[i].dataset.order == 0) {
                    has_dh = true
                    continue
                }
                if (has_dh) {
                    player_rows[i].dataset.order = i
                }
                else {
                    player_rows[i].dataset.order = i+1
                }
                var player_order = player_rows[i].querySelector('[id^="player-order-button"]')
                var form_element_order = player_rows[i].querySelector('[id$="order"]')
                player_order.innerText = parseInt(player_rows[i].dataset.order)
                form_element_order.value = parseInt(player_rows[i].dataset.order)
            }
        }
        var lineup = new Sortable.create(
            document.getElementById('lineup'), {
                animation: 150,
                ghostClass:"ghost",
                {#handle: ".bars-move",#}
                group:{
                    put:true,
                    pull:true
                },
                onAdd: function (/**Event*/evt) {
                    var itemEl = evt.item;  // dragged HTMLElement
                    var player_id = itemEl.dataset.playerId
                    console.log(itemEl)
                    var form_element_order =itemEl.querySelector('[id$="order"]')
                    var player_order = itemEl.querySelector('[id^="player-order"]')
                    var player_available =itemEl.querySelector('[id^="player-available"]')
                    var player_order_button =itemEl.querySelector('[id^="player-order-button"]')
                    console.log(player_order.parentElement.dataset)
                    toggle_in_lineup(player_order_button)
                    player_order.parentElement.dataset.order = evt.newIndex
                    refresh_lineup_order()
                    player_available.parentElement.style.display="none"
                    player_order.style.display="table-cell"
                    evt.to;    // target list
                    evt.from;  // previous list
                    evt.oldIndex;  // element's old index within old parent
                    evt.newIndex;  // element's new index within new parent
                    evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
                    evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
                    evt.clone // the clone element
                    evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
                },
                onUpdate: function (/**Event*/evt) {
                    console.log('update to lineup')
                    var itemEl = evt.item;  // dragged HTMLElement
                    refresh_lineup_order()
                },
            });
        var bench = new Sortable.create(
            document.getElementById('bench'), {
                animation: 150,
                ghostClass:"ghost",
                sort: false,
                {#handle: ".bars-move",#}
                group:{
                    put:true,
                    pull:true
                },
                onAdd: function (/**Event*/evt) {
                    console.log('added to bench')
                    var itemEl = evt.item;  // dragged HTMLElement
                    console.log(itemEl)
                    var form_element_order =itemEl.querySelector('[id$="order"]')
                    var player_order = itemEl.querySelector('[id^="player-order"]')
                    var player_available =itemEl.querySelector('[id^="player-available"]')
                    player_available.parentElement.style.display="table-cell"
                    form_element_order.value = 0
                    player_order.innerHTML = 1
                    player_order.style.display="none"
                    var player_id = itemEl.dataset.playerId
                    refresh_lineup_order()
                }
            });
        function toggle_in_lineup(order_button){
            var player_row = order_button.parentNode.parentNode
            if (player_row.dataset.order == 0) {
                order_button.innerText = "1"
                order_button.classList.add("btn-light")
                order_button.classList.remove("btn-dark")
                player_row.dataset.order = 1
            }
            else {
                order_button.innerText = "D"
                order_button.classList.remove("btn-light")
                order_button.classList.add("btn-dark")
                player_row.dataset.order = 0
            }
            refresh_lineup_order()
                              }

    </script>

{% endblock %}