389 lines
14 KiB
HTML
389 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block page_title %}{{ gymnast.first_name }} {{ gymnast.last_name }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-12 col-sm-4 col-md-4 col-lg-4 m-b-md">
|
|
<div class="card card-user">
|
|
<div class="card-body">
|
|
<div class="author">
|
|
<div class="block block-one"></div>
|
|
<div class="block block-two"></div>
|
|
<div class="block block-three"></div>
|
|
<div class="block block-four"></div>
|
|
<a href="javascript:void(0)">
|
|
{% if gymnast.picture %}
|
|
<img src="{{ gymnast.picture.url }}" alt="{{ gymnast }}" class="avatar">
|
|
{% endif %}
|
|
<h4 class="title">{{ gymnast.first_name }} {{ gymnast.last_name }}</h4>
|
|
</a>
|
|
<p class="description">
|
|
{{ gymnast.club.name }}
|
|
</p>
|
|
</div>
|
|
<div class="card-description">
|
|
<b>{{ gymnast.age }} years</b> ({{ gymnast.birthdate | date:"d F Y" }})<span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br />
|
|
{% if height_weight %}
|
|
<b>{{ height_weight.0.height }}cm - {{ height_weight.0.weight }}kg</b> ({{ height_weight.0.date | date:"d-m-Y" }})<br />
|
|
{% endif %}
|
|
<b>{{ gymnast.trainings_by_week }} training/week</b> for <b>{{ gymnast.hours_by_week }} hours/week</b><br />
|
|
<br />
|
|
<b><u>Bests Scores</u></b>
|
|
<ul>
|
|
{% if best_straightjump %}
|
|
<li><b>Straight jump</b> : <b>{{ best_straightjump.0.tof }}</b> ({{ best_straightjump.0.date | date:"d-m-Y" }})</li>
|
|
{% endif %}
|
|
|
|
<li><b>Routine</b> : {% if best_routine %}<b>{{ best_routine.0.tof }}</b> ({{ best_routine.0.date | date:"d-m-Y" }}){% else %} (no information){% endif %}</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
|
|
<canvas id="chartjs_completude" width="225" height="225" style="width: 225px; height: 225px"></canvas>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-4 col-md-4 card mb-3">
|
|
<h4 class="d-flex align-items-end flex-column">
|
|
Estimated level : {% if gymnast_nb_known_skills %}{{ evaluated_level }}{% else %}0{% endif %}
|
|
</h4>
|
|
<div class="progress-container progress-primary">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage_known_skill }}%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- {{ nb_known_skill }} known skills on {{ nb_skill }} skills. -->
|
|
{% if gymnast_nb_known_skills %}
|
|
{% for level in percentages %}
|
|
{% if level.2 > 0 %}
|
|
<div class="progress-container progress-warning mt-2">
|
|
<div class="progress" style="height: 10px;">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {% widthratio level.2 level.1 100 %}%;"> Level {{ level.0 }}</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
No information.
|
|
{% endif %}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-1 col-md-1 col-lg-1 col-xl-1">
|
|
<!--
|
|
color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
|
|
-->
|
|
<ul class="nav nav-pills nav-pills-primary nav-pills-icons flex-column">
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link get-info{% if tab is None or tab == 'level' %} active{% endif %}" data-toggle="tab" href="#statistics" data-ref="#statistics" data-url="statistics/" id="display_statistics">
|
|
<i class="tim-icons icon-sound-wave"></i> <!-- Level -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link get-info{% if tab == 'routine' %} active{% endif %}" data-toggle="tab" href="#routine" data-ref="#routine" data-url="routine/" id="display_routines">
|
|
<i class="tim-icons icon-components"></i> <!-- Routines -->
|
|
</a>
|
|
</li>
|
|
|
|
<li class="nav-item">
|
|
<a class="nav-link get-info{% if tab == 'scores' %} active{% endif %}" data-toggle="tab" href="#scores" data-ref="#scores" data-url="scores_chrono/" id="display_scores_chrono">
|
|
<i class="fal fa-crosshairs"></i> <!-- Scores -->
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link get-info{% if tab == 'physiological' %} active{% endif %}" data-toggle="tab" href="#physiological" data-ref="#physiological" data-url="physiological/" id="display_physiological">
|
|
<i class="fal fa-stethoscope"></i> <!-- Physical -->
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link get-info{% if tab == 'event' %} active{% endif %}" data-toggle="tab" href="#event" data-ref="#event" data-url="event/" id="display_event">
|
|
<i class="fal fa-calendar-day"></i> <!-- Events -->
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 col-sm-10 col-md-10 col-lg-11">
|
|
<div class="tab-content">
|
|
<div class="tab-pane{% if tab is None or tab == 'level' %} active{% endif %}" id="statistics"></div>
|
|
|
|
<div class="tab-pane{% if tab == 'routine' %} active{% endif %}" id="routine"></div>
|
|
|
|
<div class="tab-pane{% if tab == 'scores' %} active{% endif %}" id="scores"></div>
|
|
|
|
<div class="tab-pane{% if tab == 'physiological' %} active{% endif %}" id="physiological"></div>
|
|
|
|
<div class="tab-pane{% if tab == 'event' %} active{% endif %}" id="event"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
|
|
$(document).ready(function() {
|
|
var default_url = '/gymnast/' + {{ gymnast.id }} + '/';
|
|
|
|
{% if tab is None or tab == 'level' %}
|
|
tab_url = default_url + 'statistics/';
|
|
var tab_div = '#statistics';
|
|
{% elif tab == 'routine' %}
|
|
tab_url = default_url + 'routine/';
|
|
var tab_div = '#routine';
|
|
{% elif tab == 'scores' %}
|
|
tab_url = default_url + 'scores_chrono/';
|
|
var tab_div = '#scores';
|
|
{% elif tab == 'event' %}
|
|
tab_url = default_url + 'event/';
|
|
var tab_div = '#event';
|
|
{% endif %}
|
|
|
|
$.ajax({
|
|
url: tab_url,
|
|
dataType: "html",
|
|
success: function(data) {
|
|
$(tab_div).replaceWith($(tab_div).html(data));
|
|
},
|
|
error: function (exception) {
|
|
console.log(exception);
|
|
}
|
|
});
|
|
|
|
$('.get-info').click(function(){
|
|
$.ajax({
|
|
url: default_url + $(this).data("url"),
|
|
dataType: "html",
|
|
context: $(this),
|
|
success: function(data) {
|
|
$($(this).data("ref")).replaceWith($($(this).data("ref")).html(data));
|
|
},
|
|
error: function (exception) {
|
|
console.log(exception);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
$(function(){
|
|
$('#skilltable').tablesorter({
|
|
dateFormat: "uk",
|
|
})
|
|
|
|
$('#chronotable').tablesorter({
|
|
dateFormat: "uk",
|
|
})
|
|
});
|
|
|
|
new Chart(document.getElementById("chartjs_completude"),{
|
|
// responsive: true,
|
|
// width: 300,
|
|
// height: 300,
|
|
type: "doughnut",
|
|
// aspectRatio:1,
|
|
data: {
|
|
datasets:[
|
|
{
|
|
borderWidth: 1,
|
|
data:[
|
|
{{ nb_skill_chained }},
|
|
{{ nb_skill_not_chained }},
|
|
{{ nb_skill_whith_help }},
|
|
{{ nb_unknown_skill }}
|
|
],
|
|
backgroundColor:[
|
|
"#1bc98e", /*"#1ca8dd",*/
|
|
"#FEFB01",
|
|
"#FF9300",
|
|
"#FF2F92", /*"#1bc98e"*/
|
|
"#1ca8dd",
|
|
"#1bc98e"
|
|
]
|
|
}
|
|
],
|
|
labels: ['Chained skills ', 'Unchained Skills ', ' Helped Skills', 'Unknown Skills'],
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
cutoutPercentage: 55,
|
|
maintainAspectRatio: false,
|
|
},
|
|
});
|
|
|
|
new Chart(document.getElementById("chartjs_chrono"),{
|
|
type: 'line',
|
|
data:{
|
|
datasets:[
|
|
{% if straightjump_score %}
|
|
{
|
|
label: 'Straightjump',
|
|
backgroundColor: 'rgb(255, 99, 132, 0.25)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
fill: true,
|
|
data: [
|
|
{% for chrono in straightjump_score %}
|
|
{
|
|
x: '{{ chrono.date | date:"d-m-Y" }}',
|
|
y: '{{ chrono.tof }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
{% if routine_score %}
|
|
{
|
|
label: 'Routine',
|
|
backgroundColor: 'rgb(255, 159, 64, 0.25)',
|
|
borderColor: 'rgb(255, 159, 64)',
|
|
fill: true,
|
|
data: [
|
|
{% for chrono in routine_score %}
|
|
{
|
|
x: '{{ chrono.date | date:"d-m-Y" }}',
|
|
y: '{{ chrono.tof }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: "time",
|
|
time: {
|
|
unit: 'day',
|
|
format: 'DD-MM-YYYY'
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
}
|
|
}, ],
|
|
yAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
}
|
|
},
|
|
});
|
|
|
|
new Chart(document.getElementById("chartjs_routine"),{
|
|
type: 'line',
|
|
data:{
|
|
datasets:[
|
|
|
|
{% if points_list %}
|
|
{
|
|
label: 'Execution',
|
|
backgroundColor: 'rgb(255, 99, 132, 0.25)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
fill: true,
|
|
data: [
|
|
{% for point in points_list %}
|
|
{
|
|
x: '{{ point.event.datebegin | date:"d-m-Y" }}',
|
|
y: '{{ point.point_execution }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
|
|
{% if points_list %}
|
|
{
|
|
label: 'Difficulty',
|
|
backgroundColor: 'rgb(255, 159, 64, 0.25)',
|
|
borderColor: 'rgb(255, 159, 64)',
|
|
fill: true,
|
|
data: [
|
|
{% for point in points_list %}
|
|
{
|
|
x: '{{ point.event.datebegin | date:"d-m-Y" }}',
|
|
y: '{{ point.point_difficulty }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
|
|
{% if points_list %}
|
|
{
|
|
label: 'ToF',
|
|
backgroundColor: 'rgb(0, 250, 147, 0.25)',
|
|
borderColor: 'rgb(0, 250, 147)',
|
|
fill: true,
|
|
data: [
|
|
{% for point in points_list %}
|
|
{
|
|
x: '{{ point.event.datebegin | date:"d-m-Y" }}',
|
|
y: '{{ point.point_time_of_flight }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
|
|
{% if points_list %}
|
|
{
|
|
label: 'HD',
|
|
backgroundColor: 'rgb(0, 151, 255, 0.25)',
|
|
borderColor: 'rgb(0, 151, 255)',
|
|
fill: true,
|
|
data: [
|
|
{% for point in points_list %}
|
|
{
|
|
x: '{{ point.event.datebegin | date:"d-m-Y" }}',
|
|
y: '{{ point.point_horizontal_displacement }}'
|
|
},
|
|
{% endfor %}
|
|
]
|
|
},
|
|
{% endif %}
|
|
],
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: "time",
|
|
time: {
|
|
unit: 'day',
|
|
format: 'DD-MM-YYYY'
|
|
},
|
|
scaleLabel: {
|
|
display: true,
|
|
}
|
|
}, ],
|
|
yAxes: [{
|
|
scaleLabel: {
|
|
display: true,
|
|
}
|
|
}]
|
|
},
|
|
legend: {
|
|
display: true,
|
|
position: 'bottom',
|
|
}
|
|
},
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|