harmonized by splitting out into player-table-row and player-table-header
still need to fix the DHd situation
This commit is contained in:
3783
benchcoach/static/Sortable.js
Normal file
3783
benchcoach/static/Sortable.js
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,4 @@
|
||||
{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}
|
||||
{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}{% load static %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{ title }}</h1>
|
||||
@@ -6,35 +6,18 @@
|
||||
{{ 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">
|
||||
<div class="row">
|
||||
<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">
|
||||
{% csrf_token %}
|
||||
{{ formset.management_form }}
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Player</th>
|
||||
<th scope="col">Position</th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% include 'lineups/player-table-header.html' %}
|
||||
<tbody id="lineup">
|
||||
{% for form in formset %}
|
||||
{% if form.instance.order or form.instance.position == "P" %}
|
||||
<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 }}
|
||||
<th scope="row" id="player-order-{{ form.instance.player.id }}">{% if form.order.value %}{{ form.order.value }}{% endif %}</th>
|
||||
<th>{{ form.instance.player.first_name }} {{ form.instance.player.last_name }} - # {{ form.instance.player.jersey_number }}</th>
|
||||
<td>{{ form.position }}</td>
|
||||
{# <td>{{ form.instance.position }}</td>#}
|
||||
</tr>
|
||||
{% include 'lineups/player-table-row.html' with form=form available_display="none" order_display="table-cell" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -45,58 +28,31 @@
|
||||
<div class="col-md-6">
|
||||
<h5>Players</h5>
|
||||
<table class="table">
|
||||
<tr>
|
||||
<th scope="col" style="display: none"></th>
|
||||
<th scope="col">Ava.</th>
|
||||
<th scope="col">Name</th>
|
||||
<th scope="col">Pos</th>
|
||||
</tr>
|
||||
{% 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" %}
|
||||
|
||||
<tr data-player-id="{{ pos.player.id }}">
|
||||
{{ form.id.as_hidden }}
|
||||
{{ form.event.as_hidden }}
|
||||
{{ form.order.as_hidden}}
|
||||
{{ form.player.as_hidden }}
|
||||
<th style="display: none" id="player-order-{{ form.instance.player.id }}">{{ form.order.value }}</th>
|
||||
<td>
|
||||
|
||||
{% 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></img>
|
||||
{% 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></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></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></span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<th>{{ form.instance.player.first_name }} {{ form.instance.player.last_name }} # {{ form.instance.player.jersey_number }}</th>
|
||||
<td id="player-position-{{ form.instance.player.id }}">{{ form.position }} </td>
|
||||
{# <td id="player-statline-{{ form.instance.player.player.id }}"><code>{{ form.instance.player.statline}}</code></td>#}
|
||||
</tr>
|
||||
{% include 'lineups/player-table-row.html' with form=form available_display="table-cell" order_display="none" %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table >
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>
|
||||
<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)
|
||||
}
|
||||
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'), {
|
||||
@@ -121,7 +77,7 @@
|
||||
player_available.parentElement.style.display="none"
|
||||
form_element_order.value = evt.newIndex + 1
|
||||
player_order.innerHTML = evt.newIndex + 1
|
||||
player_order.style.display="block"
|
||||
player_order.style.display="table-cell"
|
||||
evt.to; // target list
|
||||
evt.from; // previous list
|
||||
evt.oldIndex; // element's old index within old parent
|
||||
@@ -146,6 +102,7 @@
|
||||
document.getElementById('bench'), {
|
||||
animation: 150,
|
||||
ghostClass:"ghost",
|
||||
sort: false,
|
||||
{#handle: ".bars-move",#}
|
||||
group:{
|
||||
put:true,
|
||||
@@ -158,7 +115,7 @@
|
||||
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="block"
|
||||
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"
|
||||
|
||||
8
lineups/templates/lineups/player-table-header.html
Normal file
8
lineups/templates/lineups/player-table-header.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<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>
|
||||
54
lineups/templates/lineups/player-table-row.html
Normal file
54
lineups/templates/lineups/player-table-row.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<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 %}
|
||||
{{ form.order.value }}
|
||||
{% endif %}
|
||||
</th>
|
||||
<th>
|
||||
{{ form.instance.player.first_name }} {{ form.instance.player.last_name }} - # {{ form.instance.player.jersey_number }}
|
||||
</th>
|
||||
<td>
|
||||
{{ form.position }}
|
||||
</td>
|
||||
{# <td>{{ form.instance.position }}</td>#}
|
||||
</tr>
|
||||
Reference in New Issue
Block a user