consolidated player-table

to consolidate, had to move the filtering to the context instead of the template (probably the right way to do it anyway)
also switched from using display to using class to hide cells (also probably the more right/consistent way to do this)

teamsnap/templates/teamsnap/lineup.html

@@ -17,28 +17,14 @@
                     <div class="card my-1">
                         <div class="card-header"><h5>Lineup</h5></div>
                         <div class="card-body p-0">
-                            <table class="table">
+                            {% include 'teamsnap/player-table.html' with table_id="lineup" formset=formset_lineup available_class="d-none"%}
-                                {% 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 m-2"><input type="submit" value="Submit" class="btn btn-primary"></div>
                         </div>
                     </div>
                     <div class="card my-1">
-                        <div class="card-header"><h5>Subs</h5></div>
+                        <div class="card-header"><h5>DH'd</h5></div>
                         <div class="card-body p-0">
-                            <table class="table">
+                            {% include 'teamsnap/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" sequence_class="d-none"%}
-                                {% include 'teamsnap/player-table-header.html' %}
-                                <tbody id="planned-subs">
-
-                                </tbody>
-                            </table>
                             <div class="justify-content-md-end d-md-flex m-2"><input type="submit" value="Submit" class="btn btn-primary"></div>
                         </div>
                     </div>
@@ -48,19 +34,7 @@
                     <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.html' with table_id="bench" formset=formset_bench sequence_class="d-none"%}
-                                {% 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>
@@ -68,7 +42,7 @@
             </div>
         </form>
     </div>
-    <script src="{% static 'Sortable.js' %}"></script>
+    <script src="{% static 'js/Sortable.js' %}"></script>
     <script id="sortable">
         function refresh_lineup_sequence (){
             var member_rows = document.getElementById('lineup').querySelectorAll('tr')
@@ -92,12 +66,12 @@
             }
         }
         var lineup = new Sortable.create(
-            document.getElementById('planned-subs'), {
+            document.getElementById('dhd'), {
                 animation: 150,
                 ghostClass: "ghost",
                 {#handle: ".bars-move",#}
                 group: {
-                    put: 'clone',
+                    put: true,
                     pull: true
                 }
             })
@@ -123,16 +97,10 @@
                     toggle_in_lineup(member_sequence_button)
                     member_sequence.parentElement.dataset.sequence = evt.newIndex
                     refresh_lineup_sequence()
-                    member_available.parentElement.style.display="none"
+                    {#member_available.parentElement.style.display="none"#}
-                    member_sequence.style.display="table-cell"
+                    member_available.parentElement.classList.add('d-none')
-                    evt.to;    // target list
+                    {#member_sequence.style.display="table-cell"#}
-                    evt.from;  // previous list
+                    member_sequence.classList.remove('d-none')
-                    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')
@@ -157,10 +125,12 @@
                     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"
+                    {#member_available.parentElement.style.display="table-cell"#}
+                    member_available.parentElement.classList.remove('d-none')
                     form_element_sequence.value = 0
                     member_sequence.innerHTML = 1
-                    member_sequence.style.display="none"
+                    {#member_sequence.style.display="none"#}
+                    member_sequence.classList.add('d-none')
                     var member_id = itemEl.dataset.memberId
                     refresh_lineup_sequence()
                 }

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

@@ -1,8 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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/templates/teamsnap/player-table.html

@@ -0,0 +1,86 @@
+<table class="table">
+    <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>
+    <tbody id={{ table_id }}>
+    {% for form in formset %}
+        <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 }}"
+                class="{{ available_class }}"
+            >
+                {% 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 }}"
+                class="{{ sequence_class }}">
+                {% 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>
+    {% endfor %}
+    </tbody>
+</table>

teamsnap/views.py

@@ -102,7 +102,13 @@ def edit_lineup(request, event_id):
             f.availability = f.instance.member.availability_set.get(event_id=event_id)
             # f.statline = f.instance.member.statline_set.get()
 
+    formset_lineup = [f for f in formset if f.instance.sequence]
+    formset_bench = [f for f in formset if f not in formset_lineup]
+    formset_dhd = [f for f in formset if not f.instance.sequence and f.instance.label]
+
     return render(request, 'teamsnap/lineup.html', {'title': 'Lineup',
                                                    'event': event,
-                                                   'formset': formset,
+                                                   'formset_lineup': formset_lineup,
+                                                    'formset_bench':formset_bench,
+                                                    'formset_dhd':formset_dhd
                                                    })