257 lines
11 KiB
HTML
257 lines
11 KiB
HTML
{% extends "base.html" %}
|
|
{% load get_value_at_index %}
|
|
|
|
{% block content %}
|
|
<div class="card mb-0">
|
|
<div class="card-header">
|
|
<h3 class="mb-0"><a href="{% url 'gymnast_details_tab' gymnast.id 'scores' %}">{{ gymnast }}</a></h3>
|
|
Chrono for
|
|
<select id="routine_type">
|
|
{% for type in distinct_routine_type_list %}
|
|
<option value="{{ type }}" {% if type == selected_routine_type %}selected{% endif %}>{{ type }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
from {{ current_season }}
|
|
{% if date_begin %}
|
|
<i>{{ date_begin | date:'j M Y' }}</i> to <i>{{ date_end | date:'j M Y' }}</i>
|
|
{% else %}
|
|
<select id="select_season">
|
|
{% for season in distinct_season_list %}
|
|
<option value="{{ season }}" {% if selected_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<span id="week_1_management"> week
|
|
<select id="select_week_number">
|
|
{% for week_number in distinct_week_number_list %}
|
|
<option value="{{ week_number }}" {% if selected_week_number == week_number %}selected{% endif %}>{{ week_number }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</span>
|
|
{% endif %}
|
|
<br />
|
|
{% if chrono_list %}
|
|
<input type="checkbox" id="comparison" name="comparison" /> Compare with: chrono for
|
|
<select id="routine_type_2">
|
|
{% for type in distinct_routine_type_list %}
|
|
<option value="{{ type }}" {% if type == selected_routine_type %}selected{% endif %}>{{ type }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
from {{ current_season }}
|
|
{% if date_begin %}
|
|
<i>{{ date_begin | date:'j M Y' }}</i> to <i>{{ date_end | date:'j M Y' }}</i>
|
|
{% else %}
|
|
<select id="select_season_2">
|
|
{% for season in distinct_season_list %}
|
|
<option value="{{ season }}" {% if selected_season|stringformat:"s" == season %}selected{% endif %}>{{ season }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
<span id="week_2_management"> week
|
|
<select id="select_week_number_2">
|
|
{% for week_number in distinct_week_number_list %}
|
|
<option value="{{ week_number }}" {% if selected_week_number == week_number %}selected{% endif %}>{{ week_number }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="card-body pb-0 mb-0">
|
|
<div class="row pb-0 mb-0">
|
|
{% if chrono_list %}
|
|
<div class="col-md-5">
|
|
<table class="table table-condensed" id="chrono_values_table">
|
|
{% for chrono in chrono_list %}
|
|
{% if chrono.details.all %}
|
|
<tr>
|
|
{% for detail in chrono.details.all %}
|
|
{% with stat_value=stat_values|get_value_at_index:forloop.counter0 %}
|
|
<td class="{% if stat_value.max_score == detail.value %}cell-success{% endif %}{% if stat_value.min_score == detail.value %}cell-danger{% endif %}">{{ detail.value | floatformat:2 }}</td>
|
|
{% endwith %}
|
|
{% endfor %}
|
|
<td class="text-right"><b>{{ chrono.score | floatformat:2 }}</b></td>
|
|
</tr>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<tr>
|
|
{% for value in stat_values %}
|
|
<td><b>{{ value.avg_score | floatformat:2 }}</b></td>
|
|
{% endfor %}
|
|
<td class="text-right"><b></b></td>
|
|
</tr>
|
|
<!-- <tr>
|
|
{% for value in stat_values %}
|
|
<td><b>{{ value.min_score | floatformat:2 }}</b></td>
|
|
{% endfor %}
|
|
<td class="text-right"><b></b></td>
|
|
</tr><tr>
|
|
{% for value in stat_values %}
|
|
<td><b>{{ value.max_score | floatformat:2 }}</b></td>
|
|
{% endfor %}
|
|
<td class="text-right"><b></b></td> -->
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="col-md-7 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %}">
|
|
<canvas id="chartjs_chrono" class="chartjs"></canvas>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-md-12">
|
|
No chrono details with the selected criteria (routine type, season and week).
|
|
<br />
|
|
<br />
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block footerscript %}
|
|
<script type="text/javascript">
|
|
|
|
var ctx = document.getElementById("chartjs_chrono").getContext("2d");
|
|
var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
|
|
var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
|
|
|
|
gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
|
|
gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
|
|
gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
|
|
gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
|
|
|
|
gradient_stroke_2.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
|
|
gradient_stroke_2.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
|
|
gradient_stroke_2.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
|
|
gradient_stroke_2.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
|
|
|
|
var chrono_chart = new Chart(document.getElementById("chartjs_chrono"), {
|
|
type: 'line',
|
|
data: {
|
|
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
|
|
datasets: [{
|
|
data: [
|
|
{% for value in stat_values %}{{ value.avg_score | floatformat:3 }}, {% endfor %}
|
|
],
|
|
pointBackgroundColor: 'rgb(255, 99, 132)',
|
|
borderColor: 'rgb(255, 99, 132)',
|
|
backgroundColor: gradient_stroke_1,
|
|
cubicInterpolationMode: 'monotone',
|
|
fill: true,
|
|
}]
|
|
},
|
|
options: {
|
|
// min/max value ?
|
|
plugins: {
|
|
legend: {
|
|
display: false,
|
|
}
|
|
}
|
|
},
|
|
});
|
|
|
|
$('#select_season').change(function(){
|
|
var tmp_url = "{% url 'get_chrono_detail_distinct_weeknumber_for_season' gymnast.id '_season_label_' %}";
|
|
var season_label = $(this).children("option:selected").val();
|
|
target_url = tmp_url.replace('_season_label_', season_label);
|
|
|
|
$.getJSON(target_url, function(data) {
|
|
if (!$.trim(data))
|
|
$('#week_1_management').hide();
|
|
else
|
|
$('#week_1_management').show();
|
|
|
|
$("#select_week_number option").remove(); // Remove all <option> child tags.
|
|
$.each(data, function(key, value) { // Iterates through a collection
|
|
$("#select_week_number").append( // Append an object to the inside of the select box
|
|
$("<option></option>").text(value).val(value)
|
|
);
|
|
});
|
|
});
|
|
});
|
|
|
|
$('#select_week_number').change(function(){
|
|
var tmp_url = "{% url 'average_jump_chrono_details_for_gymnast_routinetype_season_and_week' gymnast.id '8888' '_season_label_' '9999' %}";
|
|
var routine_type = $('#routine_type').children("option:selected").val();
|
|
var season_label = $('#select_season').children("option:selected").val();
|
|
var week_number = $(this).children("option:selected").val();
|
|
|
|
target_url = tmp_url.replace('8888', routine_type).replace('_season_label_', season_label).replace('9999', week_number);
|
|
|
|
$(location).attr('href', target_url);
|
|
});
|
|
|
|
$('#select_season_2').change(function(){
|
|
var tmp_url = "{% url 'get_chrono_detail_distinct_weeknumber_for_season' gymnast.id '_season_label_' %}";
|
|
var season_label = $(this).children("option:selected").val();
|
|
target_url = tmp_url.replace('_season_label_', season_label);
|
|
|
|
$.getJSON(target_url, function(data) {
|
|
if (!$.trim(data))
|
|
$('#week_2_management').hide();
|
|
else
|
|
$('#week_2_management').show();
|
|
|
|
$("#select_week_number_2 option").remove();
|
|
$.each(data, function(key, value) {
|
|
$("#select_week_number_2").append($("<option></option>").text(value).val(value));
|
|
});
|
|
});
|
|
});
|
|
|
|
function remove_comparison_data() {
|
|
if ((Object.keys(chrono_chart.data.datasets).length) > 1) {
|
|
chrono_chart.data.datasets.pop();
|
|
chrono_chart.update();
|
|
}
|
|
}
|
|
|
|
function load_comparison_data() {
|
|
var tmp_url = "{% url 'get_average_jump_chrono_details_for_season_and_week' gymnast.id '8888' '_season_label_' '9999' %}";
|
|
var routine_type = $('#routine_type_2').children("option:selected").val();
|
|
var season_label = $('#select_season_2').children("option:selected").val();
|
|
var week_number = $('#select_week_number_2').children("option:selected").val();
|
|
|
|
target_url = tmp_url.replace('8888', routine_type).replace('_season_label_', season_label).replace('9999', week_number);
|
|
|
|
$.getJSON(target_url, function(data) {
|
|
if (!$.trim(data))
|
|
// $('#week_2_management').hide();
|
|
alert('No data for comparison.');
|
|
else {
|
|
var new_values = []
|
|
$.each(data, function(key, value) {
|
|
item = JSON.stringify(value);
|
|
new_values.push(parseFloat(value['avg_score']).toFixed(3));
|
|
});
|
|
var new_dataset = {
|
|
pointBackgroundColor: 'rgb(255, 159, 64)',
|
|
borderColor: 'rgb(255, 159, 64)',
|
|
backgroundColor: gradient_stroke_2,
|
|
cubicInterpolationMode: 'monotone',
|
|
fill: true,
|
|
data: new_values,
|
|
}
|
|
chrono_chart.data.datasets.push(new_dataset);
|
|
chrono_chart.update();
|
|
}
|
|
});
|
|
}
|
|
|
|
$('#select_week_number_2').change(function(){
|
|
if ($('#comparison').is(':checked')) {
|
|
remove_comparison_data();
|
|
load_comparison_data();
|
|
}
|
|
});
|
|
|
|
$('#comparison').change(function(){
|
|
if (this.checked) {
|
|
if (($('#select_week_number_2').val() != $('#select_week_number').val()) || ($('#select_season_2').val() != $('#select_season').val()))
|
|
load_comparison_data();
|
|
} else {
|
|
remove_comparison_data();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|