lineup enhancements
Simplify the way lineup order is presented (remove buttons) move available icons to column add drag handle cleanup of javascript. i think ordering works.
This commit is contained in:
@@ -36,25 +36,38 @@
|
||||
{# <input type="submit" value="Submit" class="btn btn-sm btn-success mx-3 my-0 my-0">#}
|
||||
<div class="col-md-6">
|
||||
<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 class="card-header d-inline-flex">
|
||||
<div class="d-inline-flex flex-grow-1"><h5>Lineup</h5></div>
|
||||
<div>
|
||||
<input type="submit" value="Submit" class="btn btn-sm btn-outline-success d-xl-flex align-items-xl-center">
|
||||
</div>
|
||||
</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="dhd" formset=formset_dhd available_class="d-none" %}
|
||||
</div>
|
||||
|
||||
{# <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>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card my-1">
|
||||
<div class="card-header"><h5>Bench</h5></div>
|
||||
<div class="card-header d-inline-flex">
|
||||
<div class="d-inline-flex flex-grow-1">
|
||||
<h5>Bench</h5>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-outline-secondary d-xl-flex align-items-xl-center" type="button">
|
||||
<i class="bi bi-arrow-clockwise"></i>TeamSnap
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body p-0">
|
||||
{% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" available_class="d-none"%}
|
||||
{% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,38 +80,57 @@
|
||||
<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 player_order = player_rows[i].querySelector('[id^="player-order"]')
|
||||
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)
|
||||
{#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
|
||||
player_rows[i].dataset.order = i+1
|
||||
form_element_order.value = i+1
|
||||
player_order.innerHTML = i+1
|
||||
}
|
||||
var player_rows = document.getElementById('bench').querySelectorAll('tr')
|
||||
for (let i = 0; i < player_rows.length; i++) {
|
||||
var player_order = player_rows[i].querySelector('[id^="player-order"]')
|
||||
var form_element_order = player_rows[i].querySelector('[id$="order"]')
|
||||
{#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
|
||||
player_rows[i].dataset.order = null
|
||||
form_element_order.value = null
|
||||
player_order.innerHTML = null
|
||||
}
|
||||
var player_rows = document.getElementById('dhd').querySelectorAll('tr')
|
||||
for (let i = 0; i < player_rows.length; i++) {
|
||||
var player_order = player_rows[i].querySelector('[id^="player-order"]')
|
||||
var form_element_order = player_rows[i].querySelector('[id$="order"]')
|
||||
{#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
|
||||
player_rows[i].dataset.order = 0
|
||||
form_element_order.value = 0
|
||||
player_order.innerHTML = null
|
||||
}
|
||||
}
|
||||
var lineup = new Sortable.create(
|
||||
var dhd = new Sortable.create(
|
||||
document.getElementById('dhd'), {
|
||||
animation: 150,
|
||||
ghostClass: "ghost",
|
||||
handle: ".drag-handle",
|
||||
{#handle: ".bars-move",#}
|
||||
group: {
|
||||
put: true,
|
||||
pull: true
|
||||
},
|
||||
onAdd: function (/**Event*/evt){
|
||||
// Add to DH'd
|
||||
var itemEl = evt.item; // dragged HTMLElement
|
||||
var player_order = itemEl.querySelector('[id^="player-order"]')
|
||||
var player_available =itemEl.querySelector('[id^="player-availability"]')
|
||||
refresh_lineup_order()
|
||||
player_order.classList.remove('d-none')
|
||||
player_available.classList.add('d-none')
|
||||
}
|
||||
})
|
||||
var lineup = new Sortable.create(
|
||||
document.getElementById('lineup'), {
|
||||
animation: 150,
|
||||
handle: ".drag-handle",
|
||||
ghostClass:"ghost",
|
||||
{#handle: ".bars-move",#}
|
||||
group:{
|
||||
@@ -108,20 +140,11 @@
|
||||
onAdd: function (/**Event*/evt) {
|
||||
// Add to Lineup
|
||||
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
|
||||
var player_available =itemEl.querySelector('[id^="player-availability"]')
|
||||
refresh_lineup_order()
|
||||
{#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')
|
||||
player_available.classList.add('d-none')
|
||||
},
|
||||
onUpdate: function (/**Event*/evt) {
|
||||
console.log('update to lineup')
|
||||
@@ -134,44 +157,21 @@
|
||||
animation: 150,
|
||||
ghostClass:"ghost",
|
||||
sort: false,
|
||||
handle: ".drag-handle",
|
||||
{#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"#}
|
||||
player_available.parentElement.classList.remove('d-none')
|
||||
form_element_order.value = 0
|
||||
player_order.innerHTML = 1
|
||||
{#player_order.style.display="none"#}
|
||||
player_order.classList.add('d-none')
|
||||
var player_id = itemEl.dataset.playerId
|
||||
var player_available =itemEl.querySelector('[id^="player-availability"]')
|
||||
refresh_lineup_order()
|
||||
player_order.classList.add('d-none')
|
||||
player_available.classList.remove('d-none')
|
||||
}
|
||||
});
|
||||
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>
|
||||
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
<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 }}"
|
||||
@@ -33,21 +25,11 @@
|
||||
{% else %}
|
||||
<i class="bi bi-circle-fill text-secondary"></i>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
</th>
|
||||
|
||||
<th>
|
||||
<span id="player-availability-{{ form.instance.player.id }}" class="mx-1">
|
||||
{% if form.availability.available == 2 %}
|
||||
<i class="bi bi-circle-fill text-success"></i>
|
||||
{% elif form.availability.available == 1 %}
|
||||
<i class="bi bi-circle-fill text-info"></i>
|
||||
{% elif form.availability.available == 0 %}
|
||||
<i class="bi bi-circle-fill text-danger"></i>
|
||||
{% else %}
|
||||
<i class="bi bi-circle-fill text-secondary"></i>
|
||||
{% endif %}
|
||||
</span>
|
||||
|
||||
|
||||
{{ form.instance.player.first_name }} {{ form.instance.player.last_name }}
|
||||
<small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small>
|
||||
@@ -56,6 +38,9 @@
|
||||
<td class="col-2">
|
||||
{{ form.position }}
|
||||
</td>
|
||||
<td class="col-1 drag-handle">
|
||||
<i class="bi bi-grip-vertical text-secondary"></i>
|
||||
</td>
|
||||
{# <td>{{ form.instance.position }}</td>#}
|
||||
</tr>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user