142 lines
7.2 KiB
HTML
142 lines
7.2 KiB
HTML
{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}{% load static %}
|
|
|
|
{% block content %}
|
|
<h1>{{ title }}</h1>
|
|
{{ event.away_team.name }} vs. {{ event.home_team.name }} <br>
|
|
{{ event.start|date:"l, F j, Y g:i A" }} <br>
|
|
{{ event.venue.name }} <br>
|
|
<div class="container">
|
|
<form action="{% url 'edit lineup' event_id=event.id%}" method="post">
|
|
{% csrf_token %}
|
|
{{ formset.management_form }}
|
|
<div class="row">
|
|
<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>
|
|
|
|
<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>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<script src="{% static 'Sortable.js' %}"></script>
|
|
<script id="sortable">
|
|
function refresh_lineup_order (){
|
|
var player_rows = document.getElementById('lineup').querySelectorAll('tr')
|
|
for (let i = 0; i < player_rows.length; i++) {
|
|
player_rows[i].dataset.order = i + 1
|
|
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)
|
|
}
|
|
}
|
|
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
|
|
{#itemEl.order.set(99)#}
|
|
{#var statline = document.querySelector('#player-statline-'+player_id);#}
|
|
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"]')
|
|
refresh_lineup_order()
|
|
player_available.parentElement.style.display="none"
|
|
form_element_order.value = evt.newIndex + 1
|
|
player_order.innerHTML = evt.newIndex + 1
|
|
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
|
|
},
|
|
onUpdate: function (/**Event*/evt) {
|
|
console.log('update to lineup')
|
|
var itemEl = evt.item; // dragged HTMLElement
|
|
refresh_lineup_order()
|
|
|
|
{#player_available.parentElement.style.display="none"#}
|
|
{#form_element_order.value = evt.newIndex - 4#}
|
|
{#player_order.innerHTML = evt.newIndex - 4#}
|
|
{#player_order.style.display="block"#}
|
|
},
|
|
});
|
|
var bench = new Sortable.create(
|
|
document.getElementById('bench'), {
|
|
animation: 150,
|
|
ghostClass:"ghost",
|
|
sort: false,
|
|
{#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"
|
|
form_element_order.value = evt.newIndex - 4
|
|
player_order.innerHTML = evt.newIndex - 4
|
|
player_order.style.display="none"
|
|
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);
|
|
refresh_lineup_order()
|
|
{#console.log(itemEl)#}
|
|
{#console.log(player_id)#}
|
|
{#console.log(statline)#}
|
|
{#statline.style.visibility='visible'#}
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
{% endblock %} |