asc/benchcoach-django
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added sortable

Browse Source
This commit is contained in:
Anthony Correa
2021-11-17 10:56:11 -06:00
parent 265c160f25
commit 6181982613
1 changed files with 128 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
lineups/templates/lineups/lineup.html
View File

@@ -12,8 +12,8 @@
{# <ul class="list-group">#} {# <ul class="list-group">#}
<form action="{% url 'edit lineup' event_id=event.id%}" method="post"> <form action="{% url 'edit lineup' event_id=event.id%}" method="post">
{# {% csrf_token %}#} {% csrf_token %}
{# {{ positionings_formset.management_form }}#} {{ positionings_formset.management_form }}
{# {% for pos in positionings_formset %}#} {# {% for pos in positionings_formset %}#}
<table class="table"> <table class="table">
<thead> <thead>
@@ -23,6 +23,7 @@
<th scope="col">Position</th> <th scope="col">Position</th>
</tr> </tr>
</thead> </thead>
<tbody id="lineup">
{% for player in positionings_players_initial|dictsort:"positioning.order" %} {% for player in positionings_players_initial|dictsort:"positioning.order" %}
{% if player.positioning %} {% if player.positioning %}
<tr data-player-id="{{ player.id }}", <tr data-player-id="{{ player.id }}",
@@ -38,6 +39,7 @@
</tr> </tr>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody>
</table> </table>
{# {% endfor %}#} {# {% endfor %}#}
<input type="submit" value="Submit"> <input type="submit" value="Submit">
@@ -52,14 +54,12 @@
<th scope="col"></th> <th scope="col"></th>
<th scope="col">Name</th> <th scope="col">Name</th>
<th scope="col">#</th> <th scope="col">#</th>
<th scope="col">Avg</th> <th scope="col">Statline</th>
<th scope="col">Slug</th>
<th scope="col">OBP</th>
</tr> </tr>
<tbody id="bench">
{% for player in players %} {% for player in players %}
{% if not player.positioning %} {% if not player.positioning %}
<tr> <tr data-player-id="{{ player.id }}">
<td> <td>
{% if player.availability.available == 2 %} {% if player.availability.available == 2 %}
<img class="bg-success p-2 rounded-circle" width="5" height="5"><span class="visually-hidden">Yes</span></img> <img class="bg-success p-2 rounded-circle" width="5" height="5"><span class="visually-hidden">Yes</span></img>
@@ -71,17 +71,81 @@
<img class="bg-secondary p-2 rounded-circle" width="5" height="5"><span class="visually-hidden">Unknown</span></span> <img class="bg-secondary p-2 rounded-circle" width="5" height="5"><span class="visually-hidden">Unknown</span></span>
{% endif %} {% endif %}
</td> </td>
<th><span class="d-none d-md-block">{{ player.first_name }}</span> {{ player.last_name }}</th> <th><span class="d-none d-md-block" id="player-name-{{ player.id }}">{{ player.first_name }}</span> {{ player.last_name }}</th>
<td>{{ player.jersey_number }}</td> <td id="player-jersey-number-{{ player.id }}">{{ player.jersey_number }} </td>
<td><code>{{ player.statline.batting_avg|stringformat:".3f"|slice:"1:" }}</code></td> <td id="player-statline-{{ player.id }}"><code>{{ player.statline}}</code></td>
<td><code>{{ player.statline.slugging_pct|stringformat:".3f"|slice:"1:" }}</code></td>
<td><code>{{ player.statline.onbase_pct|stringformat:".3f"|slice:"1:" }}</code></td>
</tr> </tr>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody>
</table > </table >
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
<script id="sortable">
var lineup = new Sortable.create(
document.getElementById('lineup'), {
animation: 150,
ghostClass:"ghost",
{#handle: ".bars-move",#}
group:{
put:true,
pull:true
},
onAdd: function (/**Event*/evt) {
console.log('added to lineup')
var itemEl = evt.item; // dragged HTMLElement
var player_id = itemEl.dataset.playerId
var statline = document.querySelector('#player-statline-'+player_id);
{#console.log(itemEl)#}
{#console.log(player_id)#}
{#console.log(statline)#}
statline.style.visibility='hidden'
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 bench = new Sortable.create(
document.getElementById('bench'), {
animation: 150,
ghostClass:"ghost",
{#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)
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
var player_id = itemEl.dataset.playerId
var statline = document.querySelector('#player-statline-'+player_id);
{#console.log(itemEl)#}
{#console.log(player_id)#}
{#console.log(statline)#}
statline.style.visibility='visible'
}
});
</script>
{% endblock %} {% endblock %}