Jarvis/jarvis/people/templates/gymnasts/tabs/tab_routines_and_routine_st...

435 lines
16 KiB
HTML

{% load has_group %}
{% load is_user_equal_to_gymnast %}
<div class="row justify-content-center ml-1">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Intensity statistics</h4>
</div>
<div class="card-body pt-0 pb-0 pr-0 pl-0">
{% if intensity_list %}
<div><canvas id="chart_intensity" class="chartjs" width="400" height="200"></canvas></div>
{% else %}
<p class="pl-3 text-muted">No intensity recorded for this gymnast.</p>
{% endif %}
</div>
<div class="card-footer text-right text-muted pt-0">
{% if intensity_list %}
<a href="{% url 'intensity_list_for_gymnast' gymnast_id %}">
<button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
<i class="fal fa-analytics"></i> <!-- Routines -->
</button>
</a>
{% endif %}
{% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
<a href="{% url 'intensity_create_for_gymnast' gymnast_id %}">
<button type="submit" value="add" class="btn btn-icon btn-warning ">
<i class="fas fa-plus"></i>
</button>
</a>
{% endif %}
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h4>Routine's statistics</h4>
</div>
<div class="card-body pt-0 pb-0 pr-0 pl-0">
{% if routine_one_done_list or routine_two_done_list %}
<div><canvas id="chart_routine_done" class="chartjs" width="400" height="200"></canvas></div>
{% else %}
<p class="pl-3 text-muted">There are no routine's statistics associated to this gymnast.</p>
{% endif %}
</div>
<div class="card-footer pt-0 row">
{% if ghr_list %}
<div class="col-md-6 text-muted pt-0">
{% if has_routine_1 %}
<a href="#">
<button type="submit" value="list" class="btn btn-icon btn-success mr-2 action-button"
data-routine_type="1" data-success="1">
+R1
</button>
</a>
{% endif %}
{% if has_routine_2 %}
<a href="#">
<button type="submit" value="list" class="btn btn-icon btn-success mr-4 action-button"
data-routine_type="2" data-success="1">
+R2
</button>
</a>
{% endif %}
&nbsp;&nbsp;
{% if has_routine_1 %}
<a href="#">
<button type="submit" value="list" class="btn btn-icon btn-danger mr-2 action-button"
data-routine_type="1" data-success="0">
+R1
</button>
</a>
{% endif %}
{% if has_routine_2 %}
<a href="#">
<button type="submit" value="list" class="btn btn-icon btn-danger action-button"
data-routine_type="2" data-success="0">
+R2
</button>
</a>
{% endif %}
</div>
{% endif %}
<div class="col-md-6 {% if not ghr_list %}offset-md-6{% endif %} text-right text-muted pt-0">
{% if routine_one_done_list or routine_two_done_list %}
<a href="{% url 'routinedone_list_for_gymnast' gymnast_id %}">
<button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
<i class="far fa-chart-bar"></i>
</button>
</a>
{% endif %}
{% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
<a href="{% url 'routinedone_create_for_gymnast' gymnast_id %}">
<button type="submit" value="add" class="btn btn-icon btn-warning ">
<i class="fas fa-plus"></i>
</button>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h4>Active routines</h4>
</div>
<div class="card-body pt-0 pb-0 pr-0 pl-0">
{% if ghr_list %}
<div class="pr-1 pl-1">
<table class="table tablesorter table-striped table-condensed" data-sort="table" id="routine_table">
<thead>
<tr>
<th style="width: 8%" class="header text-left">Type</th>
<th style="width: 30%" class="header text-left">Label</th>
<th style="width: 15%" class="header text-left">From</th>
<th style="width: 10%" class="header text-center">Diff.</th>
<th style="width: 10%" class="header text-center">Level</th>
<th style="width: 10%" class="header text-center">Rank</th>
</tr>
</thead>
<tbody>
{% for ghr in ghr_list %}
<tr>
<td class="text-center">{{ ghr.get_routine_type_display }}</td>
<td class="text-left"><a href="{% url 'routine_details' ghr.routine.id %}">{{ ghr.routine.short_label }}</a></td>
<td class="text-center">{{ ghr.date_begin | date:"d-m-Y"}}</td>
<!-- <td class="text-center">{% if ghr.date_end %}{{ ghr.date_end | date:"d F Y" }}{% else %}… to now.{% endif %}</td> -->
<td class="text-center"><b>{{ ghr.routine.difficulty }}</b></td>
<td class="text-center">{{ ghr.routine.level }}</td>
<td class="text-center">{{ ghr.routine.rank }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<p class="pl-3 text-muted">There are no routines associated to this gymnast.</p>
{% endif %}
</div>
<div class="card-footer text-right text-muted pt-0">
{% if ghr_list %}
<a href="{% url 'routine_list_for_gymnast' gymnast_id %}">
<button type="submit" value="list" class="btn btn-icon btn-warning mr-2">
<i class="tim-icons icon-components"></i> <!-- Routines -->
</button>
</a>
{% endif %}
{% if request.user|has_group:"trainer" or request.user|is_user_equal_to_gymnast:gymnast_id %}
<a href="{% url 'link_routine_to_gymnast' gymnast_id %}">
<button type="submit" value="add" class="btn btn-icon btn-warning ">
<i class="fas fa-plus"></i>
</button>
</a>
{% endif %}
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#routine_table').tablesorter({
// headers: {
// 0: { sorter: false }, // disable first column
// },
dateFormat: "uk",
sortList: [[0, 0],]
})
$('#stats_table').tablesorter({
// headers: {
// 0: { sorter: false }, // disable first column
// },
dateFormat: "uk",
sortList: [[0, 1],]
})
$('.action-button').click(function () {
$.ajax({
url: "{% url 'increment_routinedone' %}",
method: "POST",
data: {
gymnast_id: {{ gymnast_id }},
success: $(this).data("success"),
routine_type: $(this).data("routine_type"),
csrfmiddlewaretoken: '{{ csrf_token }}'
},
}).done(function () {
//
// RELOAD DE L'ONGLET
//
//
location.reload(); // recharge TOUTE la page... Overkill !
// tab_url = {% url 'gymnast_details_tab' gymnast_id 'routine' %};
// tab_div = '#routine';
// $.ajax({
// url: tab_url,
// dataType: "html",
// success: function(data) {
// $(tab_div).replaceWith($(tab_div).html(data));
// },
// error: function (exception) {
// console.log(exception);
// }
// });
});
});
});
var timeFormat = 'DD-MM-YYYY';
{% if intensity_list %}
var ctx = document.getElementById('chart_intensity').getContext('2d');
var mean_difficulty_by_passe = [
{% for score in intensity_list %}
{
x: '{{ score.date | date:"d-m-Y" }}',
y: '{{ score.mean_difficulty_by_passe }}'
},
{% endfor %}
];
var mean_quantity_of_skill = [
{% for score in intensity_list %}
{
x: '{{ score.date | date:"d-m-Y" }}',
y: '{{ score.mean_quantity_of_skill }}'
},
{% endfor %}
];
var quantity_of_skill_by_passe = [
{% for score in intensity_list %}
{
x: '{{ score.date | date:"d-m-Y" }}',
y: '{{ score.quantity_of_skill_by_passe }}'
},
{% endfor %}
];
var mean_difficulty_by_skill = [
{% for score in intensity_list %}
{
x: '{{ score.date | date:"d-m-Y" }}',
y: '{{ score.mean_difficulty_by_skill }}'
},
{% endfor %}
];
var score_values = {
datasets: [
{
label: 'diff/pass',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(75, 192, 192)',
pointBackgroundColor: 'rgb(75, 192, 192)',
data: mean_difficulty_by_passe
},
{
label: '# skills',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
data: mean_quantity_of_skill
},
{
label: '# skill/pass',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(255, 159, 64)',
pointBackgroundColor: 'rgb(255, 159, 64)',
data: quantity_of_skill_by_passe
},
{
label: 'diff/skill',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
data: mean_difficulty_by_skill
},
],
}
new Chart(ctx, {
type: 'line',
data: score_values,
options: {
scales: {
x: {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date',
ticks: {
autoSkip: true,
source: 'data',
},
},
time: {
parser: timeFormat,
tooltipFormat: 'LL',
round: 'day',
},
},
},
plugins: {
legend: {
display: true,
position: 'bottom',
}
}
},
});
{% endif %}
{% if routine_one_done_list or routine_two_done_list %}
var ctx = document.getElementById('chart_routine_done').getContext('2d');
{% if routine_one_done_list %}
var routine_one_try = [
{% for routine_done in routine_one_done_list %}
{
x: '{{ routine_done.date | date:"d-m-Y" }}',
y: '{{ routine_done.number_of_try }}'
},
{% endfor %}
];
var routine_one_success = [
{% for routine_done in routine_one_done_list %}
{
x: '{{ routine_done.date | date:"d-m-Y" }}',
y: '{{ routine_done.number_of_successes }}'
},
{% endfor %}
];
{% endif %}
{% if routine_two_done_list %}
var routine_two_done = [
{% for routine_done in routine_two_done_list %}
{
x: '{{ routine_done.date | date:"d-m-Y" }}',
y: '{{ routine_done.number_of_try }}'
},
{% endfor %}
];
var routine_two_success = [
{% for routine_done in routine_two_done_list %}
{
x: '{{ routine_done.date | date:"d-m-Y" }}',
y: '{{ routine_done.number_of_successes }}'
},
{% endfor %}
];
{% endif %}
var score_values = {
datasets: [
{% if routine_one_done_list %}
{
label: 'Q1R1 Try',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(75, 192, 192)',
pointBackgroundColor: 'rgb(75, 192, 192)',
data: routine_one_try,
},
{
label: 'Q1R1 success',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(255, 159, 64)',
pointBackgroundColor: 'rgb(255, 159, 64)',
data: routine_one_success,
},
{% endif %}
{% if routine_two_done_list %}
{
label: 'Q1R2 Try',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
data: routine_two_done,
},
{
label: 'Q1R2 Success',
cubicInterpolationMode: 'monotone',
borderColor: 'rgb(54, 162, 235)',
pointBackgroundColor: 'rgb(54, 162, 235)',
data: routine_two_success,
},
{% endif %}
],
}
new Chart(ctx, {
type: 'line',
data: score_values,
options: {
scales: {
x: {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date',
ticks: {
autoSkip: true,
source: 'data',
},
},
time: {
parser: timeFormat,
tooltipFormat: 'LL',
round: 'day',
},
},
},
plugins: {
legend: {
display: true,
position: 'bottom',
}
}
},
});
{% endif %}
</script>