create a page for edit lineup based on teamsnap models

teamsnap/templates/teamsnap/lineup.html

@@ -0,0 +1,165 @@
+{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}{% load static %}
+
+{% block content %}
+    <div class="w-100 text-center mx-auto text-center">
+        <h1 class="display-5 fw">{{ event.formatted_title }}</h1>
+        <div class="lead">
+            <p class="">{{ event.start_date|date:"l, F j, Y g:i A" }}<br>{{ event.location.name }}</p>
+        </div>
+    </div>
+    <div class="container">
+        <form action="{%  url 'teamsnap edit lineup' event_id=event.id%}" method="post">
+            {% csrf_token %}
+            {{ formset.management_form }}
+            <div class="row">
+
+                    <div class="col-md-6">
+                    <div class="card my-1">
+                        <div class="card-header"><h5>Lineup<input type="submit" value="Submit" class="btn btn-sm btn-success mx-3 my-0"></h5></div>
+                        <div class="card-body p-0">
+                            <table class="table">
+                                {% include 'teamsnap/player-table-header.html' %}
+                                <tbody id="lineup">
+                                {% for form in formset %}
+                                    {% if form.instance.sequence or form.instance.label == "P" %}
+                                        {% include 'teamsnap/player-table-row.html' with form=form available_display="none" sequence_display="table-cell" %}
+                                    {% endif %}
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                            <div class="justify-content-md-end d-md-flex p-2"><input type="submit" value="Submit" class="btn btn-primary"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-md-6">
+                    <div class="card my-1">
+                        <div class="card-header"><h5>Bench</h5></div>
+                        <div class="card-body p-0">
+                            <table class="table">
+                                {% include 'teamsnap/player-table-header.html' %}
+                                <tbody id="bench">
+                                {% for form in formset %}
+                            {% if not form.instance.member.is_non_player %}
+                                {% if not form.instance.sequence and not form.instance.label == "P"  %}
+                                    {% include 'teamsnap/player-table-row.html' with form=form available_display="table-cell" sequence_display="none" %}
+                                {% endif %}
+                            {% endif %}
+                        {% endfor %}
+                                </tbody>
+                            </table>
+
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </form>
+    </div>
+    <script src="{% static 'Sortable.js' %}"></script>
+    <script id="sortable">
+        function refresh_lineup_sequence (){
+            var member_rows = document.getElementById('lineup').querySelectorAll('tr')
+            var has_dh = false
+
+            for (let i = 0; i < member_rows.length; i++) {
+                if (member_rows[i].dataset.sequence == 0) {
+                    has_dh = true
+                    continue
+                }
+                if (has_dh) {
+                    member_rows[i].dataset.sequence = i
+                }
+                else {
+                    member_rows[i].dataset.sequence = i+1
+                }
+                var member_sequence = member_rows[i].querySelector('[id^="member-sequence-button"]')
+                var form_element_sequence = member_rows[i].querySelector('[id$="sequence"]')
+                member_sequence.innerText = parseInt(member_rows[i].dataset.sequence)
+                form_element_sequence.value = parseInt(member_rows[i].dataset.sequence)
+            }
+        }
+        var lineup = new Sortable.create(
+            document.getElementById('lineup'), {
+                animation: 150,
+                ghostClass:"ghost",
+                {#handle: ".bars-move",#}
+                group:{
+                    put:true,
+                    pull:true
+                },
+                onAdd: function (/**Event*/evt) {
+                    // Add to Lineup
+                    var itemEl = evt.item;  // dragged HTMLElement
+                    var member_id = itemEl.dataset.memberId
+                    console.log(itemEl)
+                    var form_element_sequence =itemEl.querySelector('[id$="sequence"]')
+                    var member_sequence = itemEl.querySelector('[id^="member-sequence"]')
+                    var member_available =itemEl.querySelector('[id^="member-available"]')
+                    var member_sequence_button =itemEl.querySelector('[id^="member-sequence-button"]')
+                    console.log(member_sequence.parentElement.dataset)
+                    toggle_in_lineup(member_sequence_button)
+                    member_sequence.parentElement.dataset.sequence = evt.newIndex
+                    refresh_lineup_sequence()
+                    member_available.parentElement.style.display="none"
+                    member_sequence.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_sequence()
+                },
+            });
+        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_sequence =itemEl.querySelector('[id$="sequence"]')
+                    var member_sequence = itemEl.querySelector('[id^="member-sequence"]')
+                    var member_available =itemEl.querySelector('[id^="member-available"]')
+                    member_available.parentElement.style.display="table-cell"
+                    form_element_sequence.value = 0
+                    member_sequence.innerHTML = 1
+                    member_sequence.style.display="none"
+                    var member_id = itemEl.dataset.memberId
+                    refresh_lineup_sequence()
+                }
+            });
+        function toggle_in_lineup(sequence_button){
+            var member_row = sequence_button.parentNode.parentNode
+            if (member_row.dataset.sequence == 0) {
+                sequence_button.innerText = "1"
+                sequence_button.classList.add("btn-light")
+                sequence_button.classList.remove("btn-dark")
+                member_row.dataset.sequence = 1
+            }
+            else {
+                sequence_button.innerText = "D"
+                sequence_button.classList.remove("btn-light")
+                sequence_button.classList.add("btn-dark")
+                member_row.dataset.sequence = 0
+            }
+            refresh_lineup_sequence()
+                              }
+
+    </script>
+
+{% endblock %}

teamsnap/templates/teamsnap/player-table-header.html

@@ -0,0 +1,8 @@
+<thead>
+<tr class="border border-light">
+{#    <th scope="col" style="display: none"></th>#}
+{#    <th scope="col" class="border border-light"></th>#}
+{#    <th scope="col">Name</th>#}
+{#    <th scope="col">Pos</th>#}
+</tr>
+</thead>

teamsnap/templates/teamsnap/player-table-row.html

@@ -0,0 +1,72 @@
+<tr data-member-id="{{ form.instance.member.id }}"
+    data-position="{{ form.instance.position }}"
+    data-sequence="{{ form.instance.sequence }}">
+    {{ form.id.as_hidden }}
+    {{ form.event.as_hidden }}
+    {{ form.sequence.as_hidden }}
+    {{ form.member.as_hidden }}
+    {{ form.teamsnap_id.as_hidden }}
+    <td id="member-availability-{{ form.instance.member.id }}"
+        style="display:{{ available_display }};"
+    >
+        {% if form.availability.status_code == 2 %}
+            <button class="btn btn-light bg-info p-1"
+                 id="member-available-{{ form.instance.member.id }}"
+            >
+            <span style="visibility: hidden">2</span>
+            <span class="visually-hidden">Maybe</span>
+            </button>
+        {% elif form.availability.status_code == 1%}
+            <button class="btn btn-light bg-success p-1"
+                 id="member-available-{{ form.instance.member.id }}"
+            >
+            <span style="visibility: hidden">1</span>
+            </button>
+            <span class="visually-hidden">Maybe</span>
+        {% elif form.availability.status_code == 0%}
+            <button class="btn btn-light bg-danger p-1"
+                 id="member-available-{{ form.instance.member.id }}"
+            >
+            <span style="visibility: hidden">0</span>
+            </button>
+            <span class="visually-hidden">No</span>
+        {% else %}
+            <button class="btn btn-light bg-secondary p-1"
+                 id="member-available-{{ form.instance.member.id }}"
+            >
+            <span style="visibility: hidden">X</span>
+            </button>
+            <span class="visually-hidden">Unknown</span>
+        {% endif %}
+    </td>
+    <th scope="row"
+        id="member-sequence-{{ form.instance.member.id }}"
+        style="display:{{ sequence_display }};">
+        {% if form.sequence.value %}
+            <button type="button"
+                    class="btn btn-light p-1"
+                    id="member-sequence-button-{{ form.instance.member.id }}"
+                    onclick="toggle_in_lineup(this)"
+            >
+                {{ form.sequence.value }}
+            </button>
+        {% elif  form.sequence.value == 0 %}
+            <button type="button"
+                    class="btn btn-dark p-1"s
+                    id="member-sequence-button-{{ form.instance.member.id }}"
+                    onclick="toggle_in_lineup(this)"
+            >
+                D
+            </button>
+        {% endif %}
+    </th>
+    <th>
+        {{ form.instance.member.first_name }}&nbsp;{{ form.instance.member.last_name }}&nbsp;
+        <small class="text-muted fw-light">#{{ form.instance.member.jersey_number }}</small>
+{#        <br><code><small>{{ form.statline }}</small></code>#}
+    </th>
+    <td>
+        {{ form.label }}
+    </td>
+    {#                                    <td>{{ form.instance.position }}</td>#}
+</tr>

teamsnap/urls.py

@@ -7,5 +7,6 @@ from . import views
 
 urlpatterns = [
     path('events', views.EventsListView.as_view(), name="teamsnap list events"),
-    path('edit/event/<int:id>', views.edit_event, name='teamsnap edit event')
+    path('edit/event/<int:id>', views.edit_event, name='teamsnap edit event'),
+    path('edit/lineup/<int:event_id>', views.edit_lineup, name='teamsnap edit lineup')
 ]