From 1d893a1d973965da56d2017cd0d406f0ff22f7fd Mon Sep 17 00:00:00 2001
From: Tony <anthony@correa.co>
Date: Fri, 10 Dec 2021 10:18:48 -0600
Subject: [PATCH] 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       | 60 ++++---------
 .../teamsnap/player-table-header.html         |  8 --
 .../templates/teamsnap/player-table-row.html  | 72 ----------------
 teamsnap/templates/teamsnap/player-table.html | 86 +++++++++++++++++++
 teamsnap/views.py                             |  8 +-
 5 files changed, 108 insertions(+), 126 deletions(-)
 delete mode 100644 teamsnap/templates/teamsnap/player-table-header.html
 delete mode 100644 teamsnap/templates/teamsnap/player-table-row.html
 create mode 100644 teamsnap/templates/teamsnap/player-table.html

diff --git a/teamsnap/templates/teamsnap/lineup.html b/teamsnap/templates/teamsnap/lineup.html
index 5337426..14d0dd1 100644
--- a/teamsnap/templates/teamsnap/lineup.html
+++ b/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-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>
+                            {% include 'teamsnap/player-table.html' with table_id="lineup" formset=formset_lineup available_class="d-none"%}
                             <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-header.html' %}
-                                <tbody id="planned-subs">
-
-                                </tbody>
-                            </table>
+                            {% include 'teamsnap/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" sequence_class="d-none"%}
                             <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-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>
-
+                            {% include 'teamsnap/player-table.html' with table_id="bench" formset=formset_bench sequence_class="d-none"%}
                         </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_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
+                    {#member_available.parentElement.style.display="none"#}
+                    member_available.parentElement.classList.add('d-none')
+                    {#member_sequence.style.display="table-cell"#}
+                    member_sequence.classList.remove('d-none')
                 },
                 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()
                 }
diff --git a/teamsnap/templates/teamsnap/player-table-header.html b/teamsnap/templates/teamsnap/player-table-header.html
deleted file mode 100644
index ccebfeb..0000000
--- a/teamsnap/templates/teamsnap/player-table-header.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/teamsnap/templates/teamsnap/player-table-row.html b/teamsnap/templates/teamsnap/player-table-row.html
deleted file mode 100644
index 14f9b9c..0000000
--- a/teamsnap/templates/teamsnap/player-table-row.html
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/teamsnap/templates/teamsnap/player-table.html b/teamsnap/templates/teamsnap/player-table.html
new file mode 100644
index 0000000..e56044b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/teamsnap/views.py b/teamsnap/views.py
index 9702667..c083154 100644
--- a/teamsnap/views.py
+++ b/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
                                                    })
\ No newline at end of file