Ultron/templates/peoples/gymnasts/details.html

414 lines
16 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">
<p class="card-text">
<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>
</div>
</p>
<div class="card-description">
{{ gymnast.age }} years ({{ gymnast.birthdate | date:"d F Y" }})<span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br />
{{ gymnast.club.name }} - {{ gymnast.club.place.city }}<br />
{{ gymnast.trainings_by_week }} training/week - {{ gymnast.hours_by_week }} hours/week<br />
<br />
{% if best_routine or best_straightjump %}
<h5><u>Bests Scores</u></h5>
<ul>
{% if best_straightjump %}
<li><b>Straight</b> : {{ best_straightjump.0.date | date:"d-m-Y" }} - <b>{{ best_straightjump.0.tof }}</b></li>
{% endif %}
{% if best_routine %}
<li><b>Routine</b> : {{ best_routine.0.date | date:"d-m-Y" }} - <b>{{ best_routine.0.tof }}</b></li>
{% endif %}
</ul>
{% endif %}
{{ known_skill }} known skill on {{ nb_skill }} skills.
</div>
<div class="row">
<div class="col-3">
<a href="{% url 'chrono_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="far fa-stopwatch"></i></a>
</div>
<!-- <div class="col-2">
<a href="{% url 'learnedskill_create' gymnast.id %}" class="nav-item dropdown-item">New <i class="tim-icons icon-molecule-40"></i></a>
</div> -->
<div class="col-3">
<a href="{% url 'score_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-crosshairs"></i></a>
</div>
<div class="col-3">
<a href="{% url 'mindstate_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-file-medical-alt"></i></a>
</div>
<div class="col-3">
<a href="{% url 'accident_create_for_gymnast' gymnast.id %}" class="nav-item dropdown-item">New <i class="fal fa-comment-alt-medical"></i></a>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
<div class="table-responsive pb-0"></div>
{% if learnedskills_list %}
<table class="table tablesorter table-striped table-condensed" data-sort="table" id="skilltable">
<thead>
<tr>
<th class="header text-left" style="width: 25%">Date</th>
<th class="header text-left" style="width: 50%">Skill</th>
<th class="header text-left" style="width: 30%">Type</th>
</tr>
</thead>
<tbody>
{% for learnedskill in learnedskills_list %}
<tr>
<td class="text-left">{{ learnedskill.date | date:"d-m-Y" }}</a></td>
<td class="text-left"><a href="{% url 'skill_details' learnedskill.skill.id %}">{{ learnedskill.skill.short_label }}</a></td>
<td class="text-left">{{ learnedskill.get_cando_display }}</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<table class="table">
<tr>
<td>No information found</td>
</tr>
</table>
{% endif %}
</div>
<div class="col-12 col-sm-4 col-md-4 card">
<div class="table-responsive pb-0">
{% if chronos_list %}
<table class="table tablesorter table-striped table-condensed" data-sort="table" id="chronotable">
<thead>
<tr>
<th class="header text-left" style="width: 35%">Date</th>
<th class="header text-left" style="width: 35%">Type</th>
<th class="header text-left" style="width: 30%">Tof</th>
</tr>
</thead>
<tbody>
{% for chrono in chronos_list %}
<tr>
<td class="text-left">{{ chrono.date | date:"d-m-Y" }}</a></td>
<td class="text-left">{{ chrono.get_type_display }}</a></td>
<td class="text-right">{{ chrono.tof }}</a></td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<table class="table">
<tr>
<td>No information found</td>
</tr>
</table>
{% endif %}
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-2 col-md-2 col-lg-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 == '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 == 'mindstate' %}active{% endif %}" data-toggle="tab" href="#mindstate" data-ref="#mindstate" data-url="mindstate/" id="display_mindstate">
<i class="fal fa-file-medical-alt"></i> Mindstates
</a>
</li>
<li class="nav-item">
<a class="nav-link get-info {% if tab == 'scores' %}active{% endif %}" data-toggle="tab" href="#accident" data-ref="#accident" data-url="accident/" id="display_accident">
<i class="fal fa-comment-alt-medical"></i> Accidents
</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link get-info {% if tab == 'program' %}active{% endif %}" data-toggle="tab" href="#program" data-ref="#program" data-url="program/" id="display_program">
<i class="tim-icons icon-calendar-60"></i> Program
</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 == '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 == 'program' %}active{% endif %}" id="program"></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 == 'mindstate' %}active{% endif %}" id="mindstate"></div>
<div class="tab-pane {% if tab == 'accident' %}active{% endif %}" id="accident"></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 == 'program' %}
tab_url = default_url + 'program/';
var tab_div = '#program';
{% 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_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 %}