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

harmonized by splitting out into player-table-row and player-table-header

Browse Source 
still need to fix the DHd situation
This commit is contained in:
Anthony Correa
2021-11-19 17:05:02 -06:00
parent 0dc6694891
commit 62a5459a93
4 changed files with 3867 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3783
benchcoach/static/Sortable.js Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -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 %} {% block content %}
<h1>{{ title }}</h1> <h1>{{ title }}</h1>
@@ -6,35 +6,18 @@
{{ event.start|date:"l, F j, Y g:i A" }} <br> {{ event.start|date:"l, F j, Y g:i A" }} <br>
{{ event.venue.name }} <br> {{ event.venue.name }} <br>
<div class="container"> <div class="container">
<form action="{% url 'edit lineup' event_id=event.id%}" method="post"> <form action="{% url 'edit lineup' event_id=event.id%}" method="post">
<div class="row"> {% csrf_token %}
{{ formset.management_form }}
<div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h5>Lineup</h5> <h5>Lineup</h5>
<table class="table"> <table class="table">
{% csrf_token %} {% include 'lineups/player-table-header.html' %}
{{ formset.management_form }}
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Player</th>
<th scope="col">Position</th>
</tr>
</thead>
<tbody id="lineup"> <tbody id="lineup">
{% for form in formset %} {% for form in formset %}
{% if form.instance.order or form.instance.position == "P" %} {% if form.instance.order or form.instance.position == "P" %}
<tr data-player-id="{{ form.instance.player.id }}" {% include 'lineups/player-table-row.html' with form=form available_display="none" order_display="table-cell" %}
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>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody> </tbody>
@@ -45,58 +28,31 @@
<div class="col-md-6"> <div class="col-md-6">
<h5>Players</h5> <h5>Players</h5>
<table class="table"> <table class="table">
<tr> {% include 'lineups/player-table-header.html' %}
<th scope="col" style="display: none"></th>
<th scope="col">Ava.</th>
<th scope="col">Name</th>
<th scope="col">Pos</th>
</tr>
<tbody id="bench"> <tbody id="bench">
{% for form in formset|dictsortreversed:"availability.available"%} {% for form in formset|dictsortreversed:"availability.available"%}
{% if not form.instance.order and not form.instance.position == "P" %} {% 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" %}
<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>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</tbody> </tbody>
</table > </table >
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script> <script src="{% static 'Sortable.js' %}"></script>
<script id="sortable"> <script id="sortable">
function refresh_lineup_order (){ function refresh_lineup_order (){
var player_rows = document.getElementById('lineup').querySelectorAll('tr') var player_rows = document.getElementById('lineup').querySelectorAll('tr')
for (let i = 0; i < player_rows.length; i++) { for (let i = 0; i < player_rows.length; i++) {
player_rows[i].dataset.order = i + 1 player_rows[i].dataset.order = i + 1
var player_order = player_rows[i].querySelector('[id^="player-order"]') var player_order = player_rows[i].querySelector('[id^="player-order"]')
var form_element_order = player_rows[i].querySelector('[id$="order"]') var form_element_order = player_rows[i].querySelector('[id$="order"]')
player_order.innerText = parseInt(player_rows[i].dataset.order) player_order.innerText = parseInt(player_rows[i].dataset.order)
form_element_order.value = parseInt(player_rows[i].dataset.order) form_element_order.value = parseInt(player_rows[i].dataset.order)
} }
} }
var lineup = new Sortable.create( var lineup = new Sortable.create(
document.getElementById('lineup'), { document.getElementById('lineup'), {
@@ -121,7 +77,7 @@
player_available.parentElement.style.display="none" player_available.parentElement.style.display="none"
form_element_order.value = evt.newIndex + 1 form_element_order.value = evt.newIndex + 1
player_order.innerHTML = 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.to; // target list
evt.from; // previous list evt.from; // previous list
evt.oldIndex; // element's old index within old parent evt.oldIndex; // element's old index within old parent
@@ -146,6 +102,7 @@
document.getElementById('bench'), { document.getElementById('bench'), {
animation: 150, animation: 150,
ghostClass:"ghost", ghostClass:"ghost",
sort: false,
{#handle: ".bars-move",#} {#handle: ".bars-move",#}
group:{ group:{
put:true, put:true,
@@ -158,7 +115,7 @@
var form_element_order =itemEl.querySelector('[id$="order"]') var form_element_order =itemEl.querySelector('[id$="order"]')
var player_order = itemEl.querySelector('[id^="player-order"]') var player_order = itemEl.querySelector('[id^="player-order"]')
var player_available =itemEl.querySelector('[id^="player-available"]') 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 form_element_order.value = evt.newIndex - 4
player_order.innerHTML = evt.newIndex - 4 player_order.innerHTML = evt.newIndex - 4
player_order.style.display="none" player_order.style.display="none"

8
lineups/templates/lineups/player-table-header.html Normal file
View 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
View 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>