268 lines
12 KiB
HTML
268 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% load format %}
|
|
{% load statistics %}
|
|
|
|
{% block page_title %}{{ gymnast.user.first_name }} {{ gymnast.user.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.firstname }} {{ gymnast.lastname }}</h4>
|
|
</a>
|
|
<!-- <p class="description">
|
|
Ceo/Co-Founder
|
|
</p> -->
|
|
</div>
|
|
</p>
|
|
<div class="card-description">
|
|
{{ gymnast.birthdate | date:"d F Y" }} ({{ gymnast.age }} year - {{ gymnast.actual_year_of_pratice }}) - <span class="text-info"><b>{{ gymnast.get_orientation_display }}</b></span><br/>
|
|
<br \>
|
|
{% if gymnast.address %}
|
|
{{ gymnast.address }} - {{ gymnast.postal }} {{ gymnast.city }}<br \>
|
|
{% endif %}
|
|
|
|
{% if gymnast.gsm %}
|
|
{{ gymnast.gsm|format_number }}{% if gymnast.email %} <a href="mailto:{{ gymnast.email }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}<br \>
|
|
<br \>
|
|
{% endif %}
|
|
|
|
{% if gymnast.gsm_mother or gymnast.email_mother %}
|
|
Mother : {{ gymnast.gsm_mother|format_number }}{% if gymnast.email_mother %} <a href="mailto:{{ gymnast.email_mother }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}
|
|
{% endif %}<br \>
|
|
{% if gymnast.gsm_father or gymnast.email_father %}
|
|
Father : {{ gymnast.gsm_father|format_number }}{% if gymnast.email_father %} <a href="mailto:{{ gymnast.email_father }}"><span class="tim-icons icon-email-85 text-warning"></span></a>{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-4 col-md-4 col-lg-4">
|
|
<canvas id="chartjs_completude" width="300" height="300" style="width: 300px; height: 300px"></canvas>
|
|
<!-- <div class="text-muted"><strong>Completude</strong> ({{ totalSkill }})</div> -->
|
|
</div>
|
|
|
|
<div class="col-12 col-sm-4 col-md-4 card">
|
|
{% display_level gymnast %}
|
|
</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 == '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 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="tim-icons icon-settings"></i> Scores
|
|
</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_accident/" id="display_event">
|
|
<i class="tim-icons icon-calendar-60"></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 == 'program' %}active{% endif %}" id="program"></div>
|
|
|
|
<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 == 'event' %}active{% endif %}" id="event"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
// Chart.pluginService.register({
|
|
// beforeDraw: function (chart) {
|
|
// if (chart.config.options.elements.center) {
|
|
// // Get ctx from string
|
|
// var ctx = chart.chart.ctx;
|
|
|
|
// // Get options from the center object in options
|
|
// var centerConfig = chart.config.options.elements.center;
|
|
// var fontStyle = centerConfig.fontStyle || 'Arial';
|
|
// var txt = centerConfig.text;
|
|
// var color = centerConfig.color || '#000';
|
|
// var sidePadding = centerConfig.sidePadding || 20;
|
|
// var sidePaddingCalculated = (sidePadding/100) * (chart.innerRadius * 2)
|
|
|
|
// // Start with a base font of 30px
|
|
// ctx.font = "30px " + fontStyle;
|
|
|
|
// // Get the width of the string and also the width of the element minus 10 to give it 5px side padding
|
|
// var stringWidth = ctx.measureText(txt).width;
|
|
// var elementWidth = (chart.innerRadius * 2) - sidePaddingCalculated;
|
|
|
|
// // Find out how much the font can grow in width.
|
|
// var widthRatio = elementWidth / stringWidth;
|
|
// var newFontSize = Math.floor(30 * widthRatio);
|
|
// var elementHeight = (chart.innerRadius * 2);
|
|
|
|
// // Pick a new font size so it will not be larger than the height of label.
|
|
// var fontSizeToUse = Math.min(newFontSize, elementHeight);
|
|
|
|
// // Set font settings to draw it correctly.
|
|
// ctx.textAlign = 'center';
|
|
// ctx.textBaseline = 'middle';
|
|
// var centerX = ((chart.chartArea.left + chart.chartArea.right) / 2);
|
|
// var centerY = ((chart.chartArea.top + chart.chartArea.bottom) / 2);
|
|
// ctx.font = fontSizeToUse+"px " + fontStyle;
|
|
// ctx.fillStyle = color;
|
|
|
|
// // Draw text in center
|
|
// ctx.fillText(txt, centerX, centerY);
|
|
// // ctx.fillText('Blah !', centerX, centerY);
|
|
// }
|
|
// }
|
|
// });
|
|
|
|
// canvas.style.width = '300px';
|
|
// canvas.style.height = '300px';
|
|
|
|
new Chart(document.getElementById("chartjs_completude"),{
|
|
// responsive: true,
|
|
// width: 300,
|
|
// height: 300,
|
|
type: "doughnut",
|
|
// aspectRatio:1,
|
|
data: {
|
|
datasets:[
|
|
{
|
|
borderWidth: 1,
|
|
data:[
|
|
{{ totalKnownSkill }},
|
|
{{ totalUnknownSkill }}
|
|
],
|
|
backgroundColor:[
|
|
"#1bc98e", /*"#1ca8dd",*/
|
|
"#FF2F92" /*"#1bc98e"*/
|
|
]
|
|
}
|
|
],
|
|
labels: ['Known Skill ', 'Unknown Skill '],
|
|
},
|
|
options: {
|
|
legend: {
|
|
display: false,
|
|
},
|
|
cutoutPercentage: 55,
|
|
maintainAspectRatio: false,
|
|
},
|
|
});
|
|
// chart.resize(300, 300);
|
|
// chart.resize();
|
|
|
|
// Ceci fonctionne MAIS cela applique l'affichage a TOUS les graphiques présents.
|
|
// TODO : Corriger pour que cela n'affiche QUE sur le graphique voulu.
|
|
// Références :
|
|
// https://stackoverflow.com/questions/37300466/extension-for-chart-js-2-x
|
|
// https://stackoverflow.com/questions/38243032/event-handler-on-center-of-doughnut-chart-using-chart-js
|
|
//
|
|
// Chart.pluginService.register({
|
|
// beforeDraw: function(chart) {
|
|
// var width = chart.chart.width;
|
|
// var height = chart.chart.height;
|
|
// var ctx = chart.chart.ctx;
|
|
|
|
// ctx.restore();
|
|
// var fontSize = (height / 114).toFixed(2);
|
|
// ctx.font = fontSize + "em sans-serif";
|
|
// ctx.textBaseline = "middle";
|
|
// ctx.fillStyle = "#999999";
|
|
|
|
// var text = '75%'; /* valeur à calculer */
|
|
// var textX = Math.round((width - ctx.measureText(text).width) / 2);
|
|
// var textY = height / 2;
|
|
|
|
// ctx.fillText(text, textX, textY);
|
|
// ctx.save();
|
|
// }
|
|
// });
|
|
|
|
$(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_accident/';
|
|
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);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock%}
|