khana/templates/gymnast_statistics.html

211 lines
11 KiB
HTML

<div class="row justify-content-center ml-3 pr-0">
<div class="col-md-12 pr-0">
<div class="card">
<div class="card-body">
<ul class="nav nav-pills nav-pills-warning nav-pills-icons justify-content-center">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#skillbyrank">
By rank ({{ skillByRank|length }})
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#skillbylevel">
By level ({{ skillByLevel|length }})
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#skillbyage">
By Age ({{ skillByAge|length }})
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#newunknownskill">
All skill
</a>
</li>
</ul>
<div class="tab-content tab-space tab-subcategories pt-0 pb-0">
<div class="tab-pane active" id="skillbyrank">
{% if skillByRank %}
<table class="table table-striped table-condensed tablesorter" id="table-by-rank">
<thead>
<tr>
<th style="width: 4%"></th>
<th class="header text-left" style="width: 55%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th style="width: 10%">Notation</th>
</tr>
</thead>
<tbody>
{% for skill in skillByRank %}
<tr>
<td>
<button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill" data-gymnastid="{{ gymnast.id }}" data-skillid="{{ skill.id }}">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.longLabel }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td>{{ skill.notation }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
No skill to propose.
{% endif %}
</div>
<div class="tab-pane" id="skillbylevel">
{% if skillByLevel %}
<table class="table table-striped table-condensed tablesorter" id="table-by-level">
<thead>
<tr>
<th style="width: 4%"></th>
<th class="header text-left" style="width: 55%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th style="width: 10%">Notation</th>
</tr>
</thead>
<tbody>
{% for skill in skillByLevel %}
<tr>
<td>
<button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill" data-gymnastid="{{ gymnast.id }}" data-skillid="{{ skill.id }}">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.longLabel }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td>{{ skill.notation }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
No skill to propose.
{% endif %}
</div>
<div class="tab-pane" id="skillbyage">
{% if skillByAge %}
<table class="table table-striped table-condensed tablesorter" id="table-by-age">
<thead>
<tr>
<th style="width: 4%"></th>
<th class="header text-left" style="width: 55%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th style="width: 10%">Notation</th>
</tr>
</thead>
<tbody>
{% for skill in skillByAge %}
<tr>
<td>
<button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill" data-gymnastid="{{ gymnast.id }}" data-skillid="{{ skill.id }}">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.longLabel }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td>{{ skill.notation }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
It doesn't work (age) ! There is a bug !
{% endif %}
</div>
<div class="tab-pane" id="newunknownskill">
{% if newUnknownSkill %}
<table class="table table-striped table-condensed tablesorter" id="table-other">
<thead>
<tr>
<th style="width: 4%"></th>
<th class="header text-left" style="width: 64%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th style="width: 10%">Notation</th>
</tr>
</thead>
<tbody>
{% for skill in newUnknownSkill %}
<tr>
<td>
<button type="button" rel="tooltip" class="btn btn-success btn-link btn-sm btn-icon checkUnknownSkill" data-gymnastid="{{ gymnast.id }}" data-skillid="{{ skill.id }}">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.longLabel }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td>{{ skill.notation }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
It doesn't work (new skill) ! There is a bug !
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.checkUnknownSkill').click(function(){
$.ajax({
url: '/skill/insert/',
data: {
gymnastid: $(this).data('gymnastid'),
skillid: $(this).data('skillid'),
},
type: 'POST',
context: $(this),
success: function (response) {
// avec reload (data à jour)
// location.reload();
// sans relaod des datas (data pas totalement à jour)
$(this).closest('tr').fadeTo("slow", 0.0, function(){
$(this).remove();
});
// $(this).closest('tr').slideUp("slow");
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
},
failure: function (jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
$('#table-by-rank, #table-by-level, #table-by-age, #table-other').tablesorter({
headers: {
0: { sorter: false }, // disable first column
5: { sorter: false },
},
// dateFormat: "uk",
sortList: [[4,0], [1,0]]
});
});
</script>