Sulley
/
Ultron
1
0
Fork 0
Code Issues 15 Pull Requests 1 Projects Releases Wiki Activity

Add average chrono detail template

This commit is contained in:
Gregory Trullemans 2022-10-04 19:47:30 +02:00
parent bbced92248
commit 59d3e07ecb
2 changed files with 191 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
templates/followup/chronos/details.html Normal file
View File

@ -0,0 +1,79 @@
{% extends "base.html" %}
{% block content %}
<div class="card mb-0">
<div class="card-header">
<h3 class="mb-0"><a href="{% url 'gymnast_details_tab' chrono.gymnast.id 'scores' %}">{{ chrono.gymnast }}</a></h3>
<h4 class="card-title"> Chrono of {{ chrono.date | date:'d N Y' }}</h4>
</div>
<div class="card-body pb-0 mb-0">
<div class="row mr-1 ml-1 pb-0 mb-0">
<div class="col-md-2 offset-md-1">
<table class="table tablesorter table-striped" data-sort="table" id="chrono_values_table">
{% for detail in chrono.details.all %}
<tr>
<td>{{ detail.order }}</td>
<td class="text-right">{{ detail.value }}</td>
</tr>
{% endfor %}
<tr>
<td></td>
<td class="text-right"><b>{{ chrono.score }}</b></td>
</tr>
</table>
</div>
<div class="col-md-8 offset-md-1 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0 pb-0 pl-1 pr-1">
<canvas id="chartjs_chrono_details" class="chartjs" width="800" height="400"></canvas>
</div>
</div>
</div>
</div>
{% endblock %}
{% block footerscript %}
<script type="text/javascript">
var ctx = document.getElementById("chartjs_chrono_details").getContext("2d");
var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
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)');
new Chart(document.getElementById("chartjs_chrono_details"), {
type: 'line',
data: {
labels: [
{% for detail in chrono.details.all %}
{{ detail.order }},
{% endfor %}
],
datasets: [{
backgroundColor: gradient_stroke_1,
borderColor: 'rgb(255, 99, 132)',
pointBackgroundColor: 'rgb(255, 99, 132)',
fill: true,
data: [
{% for detail in chrono.details.all %}
{{ detail.value }},
{% endfor %}
],
}]
},
options: {
scales: {
yAxes: [{
ticks: {
suggestedMin: {{ min_value }},
suggestedMax: {{ max_value }},
}
}]
},
legend: {
display: false,
}
},
});
</script>
{% endblock %}

112
templates/followup/chronos/list_details.html Normal file
View File

@ -0,0 +1,112 @@
{% 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 from {{ date_begin | date:'d N Y' }} to {{ date_end | date:'d N Y' }}
</div>
<div class="card-body pb-0 mb-0">
<div class="row pb-0 mb-0">
{% if chronolist %}
<div class="col-md-5">
<table class="table table-condensed" id="chrono_values_table">
{% for chrono in chrono_list %}
<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>
{% 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-5">
No chrono with the selected criteria.
<br />
<br />
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}
{% block footerscript %}
<script type="text/javascript">
// $('#chrono_values_table').DataTable({
// paging: false,
// searching: false,
// ordering: false,
// "bInfo" : false,
// });
var ctx = document.getElementById("chartjs_chrono").getContext("2d");
var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
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)');
new Chart(document.getElementById("chartjs_chrono"), {
type: 'line',
data: {
labels: [
{% for value in stat_values %}
{{ value.avg_score | floatformat:3 }},
{% endfor %}
],
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,
fill: true,
}]
},
options: {
// scales: {
// yAxes: [{
// ticks: {
// suggestedMin: {{ min_value }},
// suggestedMax: {{ max_value }},
// }
// }]
// },
legend: {
display: false,
}
},
});
</script>
{% endblock %}