2023-04-25 17:06:14 +02:00
{% extends "listing.html" %}
{% block datacontent %}
< div class = "card mb-0" >
< div class = "card-header" >
< div class = "row" >
< div class = "col-8" >
2024-02-04 08:34:31 +01:00
< h4 class = "" >
2024-04-11 12:18:14 +02:00
{% if gymnast %}
2024-04-19 11:01:23 +02:00
{% if gymnast.id in request.session.available_gymnast or request.user.is_superuser %}
< a href = "{% url 'gymnast_details_tab' gymnast.id 'scores' %}" >
{% endif %}
{{ gymnast }}
{% if gymnast.id in request.session.available_gymnast or request.user.is_superuser %}
< / a >
{% endif %}'s
{% endif %} chronos
2023-04-25 17:06:14 +02:00
< / h4 >
< / div >
< div class = "col-1 ml-auto" >
< div class = "text-right" >
2024-04-19 11:01:23 +02:00
< a href = "{% if gymnast %}{% url 'chrono_create_for_gymnast' gymnast.id %}{% else %}{% url 'chrono_create' %}{% endif %}" >
2023-04-25 17:06:14 +02:00
< button type = "submit" value = "add" class = "btn btn-icon btn-warning " >
< i class = "fas fa-plus" > < / i >
< / button >
< / a >
< / div >
< / div >
< / div >
< / div >
2024-04-20 20:00:53 +02:00
< div class = "card-body pt-0 pb-0" >
2024-04-11 16:29:15 +02:00
{% if gymnast %}
< div class = "row" >
< div class = "col-md-6" >
< table class = "table table-striped tablesorter" id = "chrono_table" >
< thead >
< tr >
< th style = "width: 8%" > < / th >
< th style = "width: 12%" class = "header text-center" > Date< / th >
< th style = "width: 20%" class = "header text-center" > Routine< / th >
< th style = "width: 15%" class = "header text-center" > Type< / th >
< th style = "width: 10%" class = "header text-center" > Score< / th >
< th style = "width: 10%" class = "header text-center" > TOF< / th >
< / tr >
< / thead >
< tbody >
{% for chrono in chrono_list %}
< tr role = "row" class = "{% cycle 'odd' 'even' %}" >
< td >
< a href = "{% url 'chrono_update' chrono.id %}" >
< span class = "tim-icons icon-pencil text-warning" > < / span >
< / a >
< a href = "{% url 'jump_chrono_values_create_or_update' chrono.id %}" >
< span class = "far fa-search-plus text-warning" > < / span >
< / a >
< / td >
< td class = "text-center" >
{% if chrono.details.all %}
< a href = "{% url 'jump_chrono_details' chrono.id %}" >
{% endif %}
{{ chrono.date | date:"j-n-Y" }}
{% if chrono.details.all %}
2024-04-11 12:18:14 +02:00
< / a >
2024-04-11 16:29:15 +02:00
{% endif %}
< / td >
< td class = "text-center" >
{% if chrono.routine %}
{{ chrono.routine.long_label }}
{% else %}
{{ chrono.get_chrono_type_display }}
{% endif %}
< / td >
< td class = "text-center" > {{ chrono.get_score_type_display }}< / td >
< td class = "text-center" > {{ chrono.score }}< / td >
< td class = "text-center" > {{ chrono.tof }}< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >
2024-04-11 12:18:14 +02:00
< / div >
2024-04-17 14:41:05 +02:00
< div class = "col-md-6 pl-0 pr-0 pt-3 row" >
< div class = "col-12" >
2024-04-19 11:01:23 +02:00
< canvas id = "chart_chrono" class = "chartjs" width = "100%" >
Your browser doesn't support canvas
< / canvas >
2024-04-17 14:41:05 +02:00
< / div >
< div class = "col-12 text-center" >
< p > {{ personnal_best.date | date:"l j F Y" }} : < b class = "text-danger" > {{ personnal_best.tof }}< / b > (ToF) | < b > {{ personnal_best.score }}< / b > sec< / p >
< / div >
2024-04-11 16:29:15 +02:00
< / div >
< / div >
{% else %}
{% if chrono_list %}
2024-04-20 20:00:53 +02:00
< div class = "table-responsive pb-0" >
2023-04-25 17:06:14 +02:00
< table class = "table table-striped tablesorter" id = "chrono_table" >
< thead >
< tr >
2024-01-25 16:04:30 +01:00
< th style = "width: 6%" > < / th >
< th style = "width: 12%" class = "header" > Date< / th >
2024-04-11 12:18:14 +02:00
< th style = "width: 25%" class = "header text-left" > Gymnast< / th >
2023-04-25 17:06:14 +02:00
< th style = "width: 25%" class = "header text-left" > Routine< / th >
< th style = "width: 15%" class = "header" > Type< / th >
< th style = "width: 10%" class = "header text-center" > Score< / th >
< th style = "width: 10%" class = "header text-center" > TOF< / th >
< / tr >
< / thead >
< tbody >
{% for chrono in chrono_list %}
< tr role = "row" class = "{% cycle 'odd' 'even' %}" >
< td >
< a href = "{% url 'chrono_update' chrono.id %}" >
< span class = "tim-icons icon-pencil text-warning" > < / span >
< / a >
< a href = "{% url 'jump_chrono_values_create_or_update' chrono.id %}" >
< span class = "far fa-search-plus text-warning" > < / span >
< / a >
< / td >
2024-04-19 11:01:23 +02:00
< td >
{% if chrono.details.all %}
< a href = "{% url 'jump_chrono_details' chrono.id %}" >
{% endif %}
{{ chrono.date | date:"j-n-Y" }}
{% if chrono.details.all %}
< / a >
{% endif %}
< / td >
2024-04-11 12:18:14 +02:00
< td class = "text-left" >
{% if chrono.gymnast.id in request.session.available_gymnast or request.user.is_superuser %}< a href = "{% url 'gymnast_details_tab' chrono.gymnast.id 'scores' %}" > {% endif %}
{{ chrono.gymnast }}
< / a >
< / td >
2023-04-25 17:06:14 +02:00
< td class = "text-left" >
{% if chrono.routine %}
2024-01-25 16:04:30 +01:00
{{ chrono.routine.long_label }}
2023-04-25 17:06:14 +02:00
{% else %}
2024-01-25 16:04:30 +01:00
{{ chrono.get_chrono_type_display }}
2023-04-25 17:06:14 +02:00
{% endif %}
< / td >
< td > {{ chrono.get_score_type_display }}< / td >
< td class = "text-center" > {{ chrono.score }}< / td >
< td class = "text-center" > {{ chrono.tof }}< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >
{% else %}
2024-04-11 12:18:14 +02:00
< p class = "text-muted" > There are no chronos corresponding to your criterias.< / p >
{% endif %}
2023-04-25 17:06:14 +02:00
< / div >
2024-04-11 16:29:15 +02:00
{% endif %}
2023-04-25 17:06:14 +02:00
< / div >
< / div >
{% endblock %}
{% block footerscript %}
< script type = "text/javascript" >
$(document).ready(function () {
$('#chrono_table').tablesorter({
headers: {
0: { sorter: false },
},
dateFormat: "uk",
sortList: [[1, 1], [2, 1]]
});
$('#chrono_table').DataTable({
2024-01-25 16:04:30 +01:00
scrollY: '50vh',
2023-04-25 17:06:14 +02:00
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
2023-10-18 12:53:03 +02:00
"bInfo": false,
2023-04-25 17:06:14 +02:00
});
});
2024-04-11 12:18:14 +02:00
{% if chrono_list %}
var timeFormat = 'DD-MM-YYYY';
var ctx = document.getElementById('chart_chrono').getContext('2d');
2024-04-23 10:15:36 +02:00
var border_color_pink = 'rgb(255, 99, 132)';
var gradient_stroke_pink = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_pink.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
gradient_stroke_pink.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
gradient_stroke_pink.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
gradient_stroke_pink.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
2024-04-11 12:18:14 +02:00
2024-04-23 10:15:36 +02:00
var border_color_orange = 'rgb(255, 159, 64)';
var gradient_stroke_orange = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_orange.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
gradient_stroke_orange.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
gradient_stroke_orange.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
gradient_stroke_orange.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
2024-04-11 12:18:14 +02:00
2024-04-23 10:15:36 +02:00
var border_color_green = 'rgb(75, 192, 192)';
var gradient_stroke_green = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_green.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
gradient_stroke_green.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
gradient_stroke_green.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
gradient_stroke_green.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
2024-04-11 12:18:14 +02:00
2024-04-23 10:15:36 +02:00
var border_color_blue = 'rgb(54, 162, 235)';
var gradient_stroke_blue = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_blue.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
gradient_stroke_blue.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
gradient_stroke_blue.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
gradient_stroke_blue.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
var border_color_yellow = 'rgb(255, 205, 86)';
var gradient_stroke_yellow = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_yellow.addColorStop(1, 'rgba(255, 205, 86, 0.4)');
gradient_stroke_yellow.addColorStop(0.75, 'rgba(255, 205, 86, 0.3)');
gradient_stroke_yellow.addColorStop(0.5, 'rgba(255, 205, 86, 0.2)');
gradient_stroke_yellow.addColorStop(0.25, 'rgba(255, 205, 86, 0)');
2024-04-11 12:18:14 +02:00
var straightjump_values = [
{% for chrono in chrono_10c %}
{
x: '{{ chrono.date | date:"d-m-Y" }}',
y: '{{ chrono.score_avg | floatformat:3 }}'
},
{% endfor %}
];
var compulsory_routine_values = [
{% for chrono in chrono_r1 %}
{
x: '{{ chrono.date | date:"d-m-Y" }}',
y: '{{ chrono.score_avg | floatformat:3 }}'
},
{% endfor %}
];
var volontary_routine_values = [
{% for chrono in chrono_r2 %}
{
x: '{{ chrono.date | date:"d-m-Y" }}',
y: '{{ chrono.score_avg | floatformat:3 }}'
},
{% endfor %}
];
var final_routine_values = [
{% for chrono in chrono_rf %}
{
x: '{{ chrono.date | date:"d-m-Y" }}',
y: '{{ chrono.score_avg | floatformat:3 }}'
},
{% endfor %}
];
var chrono_values = {
datasets: [
{% if chrono_10c %}
{
label: '10 |',
cubicInterpolationMode: 'monotone',
2024-04-23 10:15:36 +02:00
backgroundColor: gradient_stroke_pink,
borderColor: border_color_pink,
pointBackgroundColor: border_color_pink,
2024-04-11 12:18:14 +02:00
fill: true,
data: straightjump_values,
},
{% endif %}
{% if chrono_r1 %}
{
label: 'Q1R1',
cubicInterpolationMode: 'monotone',
2024-04-23 10:15:36 +02:00
backgroundColor: gradient_stroke_orange,
borderColor: border_color_orange,
pointBackgroundColor: border_color_orange,
2024-04-11 12:18:14 +02:00
fill: true,
data: compulsory_routine_values,
},
{% endif %}
{% if chrono_r2 %}
{
label: 'Q1R2',
cubicInterpolationMode: 'monotone',
2024-04-23 10:15:36 +02:00
backgroundColor: gradient_stroke_green,
borderColor: border_color_green,
pointBackgroundColor: border_color_green,
2024-04-11 12:18:14 +02:00
fill: true,
data: volontary_routine_values,
},
{% endif %}
{% if chrono_rf %}
{
label: 'Q2R1',
cubicInterpolationMode: 'monotone',
2024-04-23 10:15:36 +02:00
backgroundColor: gradient_stroke_blue,
borderColor: border_color_blue,
pointBackgroundColor: border_color_blue,
2024-04-11 12:18:14 +02:00
fill: true,
data: final_routine_values,
},
{% endif %}
]
}
new Chart(ctx, {
type: 'line',
data: chrono_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 %}
2023-04-25 17:06:14 +02:00
< / script >
{% endblock %}