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)
This commit is contained in:
@@ -33,33 +33,30 @@
|
||||
{% csrf_token %}
|
||||
{{ formset.management_form }}
|
||||
<div class="row">
|
||||
{# <input type="submit" value="Submit" class="btn btn-sm btn-success mx-3 my-0 my-0">#}
|
||||
<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 class="card my-1">
|
||||
<div class="card-header"><h5>DH'd</h5></div>
|
||||
<div class="card-body p-0">
|
||||
{% include 'lineups/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" order_class="d-none"%}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card my-1">
|
||||
<div class="card-header"><h5>Lineup</h5></div>
|
||||
<div class="card-body p-0">
|
||||
{% include 'lineups/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>
|
||||
|
||||
<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 class="card my-1">
|
||||
<div class="card-header"><h5>Bench</h5></div>
|
||||
<div class="card-body p-0">
|
||||
{% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none"%}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -89,6 +86,16 @@
|
||||
form_element_order.value = parseInt(player_rows[i].dataset.order)
|
||||
}
|
||||
}
|
||||
var lineup = new Sortable.create(
|
||||
document.getElementById('dhd'), {
|
||||
animation: 150,
|
||||
ghostClass: "ghost",
|
||||
{#handle: ".bars-move",#}
|
||||
group: {
|
||||
put: true,
|
||||
pull: true
|
||||
}
|
||||
})
|
||||
var lineup = new Sortable.create(
|
||||
document.getElementById('lineup'), {
|
||||
animation: 150,
|
||||
@@ -99,6 +106,7 @@
|
||||
pull:true
|
||||
},
|
||||
onAdd: function (/**Event*/evt) {
|
||||
// Add to Lineup
|
||||
var itemEl = evt.item; // dragged HTMLElement
|
||||
var player_id = itemEl.dataset.playerId
|
||||
console.log(itemEl)
|
||||
@@ -110,16 +118,10 @@
|
||||
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
|
||||
{#player_available.parentElement.style.display="none"#}
|
||||
player_available.parentElement.classList.add('d-none')
|
||||
{#player_order.style.display="table-cell"#}
|
||||
player_order.classList.remove('d-none')
|
||||
},
|
||||
onUpdate: function (/**Event*/evt) {
|
||||
console.log('update to lineup')
|
||||
@@ -144,10 +146,12 @@
|
||||
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"
|
||||
{#player_available.parentElement.style.display="table-cell"#}
|
||||
player_available.parentElement.classList.remove('d-none')
|
||||
form_element_order.value = 0
|
||||
player_order.innerHTML = 1
|
||||
player_order.style.display="none"
|
||||
{#player_order.style.display="none"#}
|
||||
player_order.classList.add('d-none')
|
||||
var player_id = itemEl.dataset.playerId
|
||||
refresh_lineup_order()
|
||||
}
|
||||
@@ -167,7 +171,7 @@
|
||||
player_row.dataset.order = 0
|
||||
}
|
||||
refresh_lineup_order()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col" style="display: none"></th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Pos</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -1,70 +0,0 @@
|
||||
<tr data-player-id="{{ form.instance.player.id }}"
|
||||
data-position="{{ form.instance.position }}"
|
||||
data-order="{{ form.instance.order }}">
|
||||
{{ form.id.as_hidden }}
|
||||
{{ form.event.as_hidden }}
|
||||
{{ form.order.as_hidden }}
|
||||
{{ form.player.as_hidden }}
|
||||
<td id="player-availability-{{ form.instance.player.id }}"
|
||||
style="display:{{ available_display }};"
|
||||
>
|
||||
{% if form.availability.available == 2 %}
|
||||
<img class="bg-success p-2 rounded-circle"
|
||||
width="5"
|
||||
height="5"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span class="visually-hidden">Yes</span>
|
||||
{% elif form.availability.available == 1%}
|
||||
<img class="bg-info p-2 rounded-circle"
|
||||
width="5"
|
||||
height="5"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span class="visually-hidden">Maybe</span>
|
||||
{% elif form.availability.available == 0%}
|
||||
<img class="bg-danger p-2 rounded-circle"
|
||||
width="5" height="5"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span class="visually-hidden">No</span>
|
||||
{% elif form.availability.available == -1%}
|
||||
<img class="bg-secondary p-2 rounded-circle"
|
||||
width="5"
|
||||
height="5"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span class="visually-hidden">Unknown</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<th scope="row"
|
||||
id="player-order-{{ form.instance.player.id }}"
|
||||
style="display:{{ order_display }};">
|
||||
{% if form.order.value %}
|
||||
<button type="button"
|
||||
class="btn btn-light"
|
||||
id="player-order-button-{{ form.instance.player.id }}"
|
||||
onclick="toggle_in_lineup(this)"
|
||||
>
|
||||
{{ form.order.value }}
|
||||
</button>
|
||||
{% elif form.order.value == 0 %}
|
||||
<button type="button"
|
||||
class="btn btn-dark"
|
||||
id="player-order-button-{{ form.instance.player.id }}"
|
||||
onclick="toggle_in_lineup(this)"
|
||||
>
|
||||
D
|
||||
</button>
|
||||
{% endif %}
|
||||
</th>
|
||||
<th>
|
||||
{{ form.instance.player.first_name }} {{ form.instance.player.last_name }}
|
||||
<small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small><br>
|
||||
<code><small>{{ form.statline }}</small></code>
|
||||
</th>
|
||||
<td>
|
||||
{{ form.position }}
|
||||
</td>
|
||||
{# <td>{{ form.instance.position }}</td>#}
|
||||
</tr>
|
||||
86
lineups/templates/lineups/player-table.html
Normal file
86
lineups/templates/lineups/player-table.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<table class="table table-sm">
|
||||
<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-player-id="{{ form.instance.player.id }}"
|
||||
data-position="{{ form.instance.position }}"
|
||||
data-order="{{ form.instance.order }}">
|
||||
{{ form.id.as_hidden }}
|
||||
{{ form.event.as_hidden }}
|
||||
{{ form.order.as_hidden }}
|
||||
{{ form.player.as_hidden }}
|
||||
{{ form.teamsnap_id.as_hidden }}
|
||||
<td id="player-availability-{{ form.instance.player.id }}"
|
||||
class="{{ available_class }}"
|
||||
>
|
||||
{% if form.availability.available == 1 %}
|
||||
<button class="btn btn-light bg-info p-1"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span style="visibility: hidden">2</span>
|
||||
<span class="visually-hidden">Maybe</span>
|
||||
</button>
|
||||
{% elif form.availability.available == 2%}
|
||||
<button class="btn btn-light bg-success p-1"
|
||||
id="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span style="visibility: hidden">1</span>
|
||||
</button>
|
||||
<span class="visually-hidden">Yes</span>
|
||||
{% elif form.availability.available == 0%}
|
||||
<button class="btn btn-light bg-danger p-1"
|
||||
id="player-available-{{ form.instance.player.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="player-available-{{ form.instance.player.id }}"
|
||||
>
|
||||
<span style="visibility: hidden">X</span>
|
||||
</button>
|
||||
<span class="visually-hidden">Unknown</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<th scope="row"
|
||||
id="player-order-{{ form.instance.player.id }}"
|
||||
class="{{ order_class }}">
|
||||
{% if form.order.value %}
|
||||
<button type="button"
|
||||
class="btn btn-light p-1"
|
||||
id="player-order-button-{{ form.instance.player.id }}"
|
||||
onclick="toggle_in_lineup(this)"
|
||||
>
|
||||
{{ form.order.value }}
|
||||
</button>
|
||||
{% elif form.order.value == 0 %}
|
||||
<button type="button"
|
||||
class="btn btn-dark p-1"s
|
||||
id="player-order-button-{{ form.instance.player.id }}"
|
||||
onclick="toggle_in_lineup(this)"
|
||||
>
|
||||
D
|
||||
</button>
|
||||
{% endif %}
|
||||
</th>
|
||||
<th>
|
||||
{{ form.instance.player.first_name }} {{ form.instance.player.last_name }}
|
||||
<small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small>
|
||||
{# <br><code><small>{{ form.statline }}</small></code>#}
|
||||
</th>
|
||||
<td>
|
||||
{{ form.position }}
|
||||
</td>
|
||||
{# <td>{{ form.instance.position }}</td>#}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
Reference in New Issue
Block a user