2023-07-05 10:51:49 +02:00
{% extends "listing.html" %}
{% load has_group %}
2024-04-10 14:02:46 +02:00
{% load static %}
2023-07-05 10:51:49 +02:00
{% block datacontent %}
< div class = "row justify-content-center" >
< div class = "col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12" >
< div class = "card" >
< div class = "card-header row" >
2024-01-25 10:56:59 +01:00
< div class = "col-10 pr-0" >
2024-02-04 08:34:31 +01:00
< h4 class = "" >
2024-04-10 14:02:46 +02:00
{% if gymnast %}
{% if gymnast.id in request.session.available_gymnast or request.user.is_superuser %}
< a href = "{% url 'gymnast_details_tab' gymnast.id 'physiological' %}" >
{% endif %}
{{ gymnast }}
{% if gymnast.id in request.session.available_gymnast or request.user.is_superuser %}
< / a >
{% endif %}'s
2024-04-19 11:01:23 +02:00
{% endif %} Well beings
2024-02-04 08:34:31 +01:00
< / h4 >
2023-07-05 10:51:49 +02:00
< / div >
2024-01-25 10:56:59 +01:00
< div class = "col-2 ml-auto pl-0" >
2023-07-05 10:51:49 +02:00
< div class = "text-right" >
{% if request.user|has_group:"trainer" %}
< a href = "{% if gymnast %}{% url 'wellbeing_create_for_gymnast' gymnast.id %}{% else %}{% url 'wellbeing_create' %}{% endif %}" >
< button type = "submit" value = "add" class = "btn btn-icon btn-warning " >
< i class = "fas fa-plus" > < / i >
< / button >
< / a >
{% endif %}
< / div >
< / div >
< / div >
2024-04-11 16:46:44 +02:00
< div class = "card-body pt-0" >
2024-04-10 14:02:46 +02:00
{% if gymnast %}
< div class = "row" >
< div class = "col-md-6" >
< table class = "table tablesorter table-striped mb-0" data-sort = "table" id = "mindstate_table" >
< thead >
< tr >
< th > < / th >
< th class = "header text-left" > Date< / th >
< th class = "header text-center" > Mindstate< / th >
< th class = "header text-center" > Sleep< / th >
< th class = "header text-center" > Stress< / th >
< th class = "header text-center" > Fatigue< / th >
< th class = "header text-center" > Muscle soreness< / th >
< / tr >
< / thead >
< tbody >
{% for wellbeing in wellbeing_list %}
< tr >
< td >
< a href = "{% url 'wellbeing_update' wellbeing.id %}" >
< span class = "tim-icons icon-pencil text-warning" > < / span >
< / a >
< / td >
< td class = "text-left" >
{% if wellbeing.gymnast.id in request.session.available_gymnast or request.user.is_superuser %}< a href = "{% url 'wellbeing_details' wellbeing.id %}" > {% endif %}{{ wellbeing.date | date:"j-n-Y" }}< / a >
< / td >
< td class = "text-center" >
{% if wellbeing.mindstate < 5 % } < b > < span class = "text-danger" > {% endif %}
{{ wellbeing.mindstate }}
{% if wellbeing.mindstate < 5 % } < / b > < / span > {% endif %}
< / td >
< td class = "text-center" >
{% if wellbeing.sleep < 5 % } < b > < span class = "text-danger" > {% endif %}
{{ wellbeing.sleep }}
{% if wellbeing.sleep < 5 % } < / b > < / span > {% endif %}
< / td >
< td class = "text-center" >
{% if wellbeing.stress > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.stress }}
{% if wellbeing.stress > 5%}< / b > < / span > {% endif %}
< / td >
< td class = "text-center" >
{% if wellbeing.fatigue > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.fatigue }}
{% if wellbeing.fatigue > 5%}< / b > < / span > {% endif %}
< / td >
< td class = "text-center" >
{% if wellbeing.muscle_soreness > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.muscle_soreness }}
{% if wellbeing.muscle_soreness > 5%}< / b > < / span > {% endif %}
< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >
< / div >
2024-04-11 16:41:15 +02:00
< div class = "col-md-6 pl-0 pr-0 pt-3" >
< canvas id = "chart_wellbeing" class = "chartjs" width = "100%" > Your browser doesn't support canvas< / canvas >
2024-04-10 14:02:46 +02:00
< / div >
< / div >
2023-07-05 10:51:49 +02:00
{% else %}
2024-04-10 14:02:46 +02:00
{% if wellbeing_list %}
< table class = "table tablesorter table-striped mb-0" data-sort = "table" id = "mindstate_table" >
< thead >
< tr >
< th > < / th >
< th class = "header text-left" > Date< / th >
{% if not gymnast %}
< th class = "header text-left" > Gymnast< / th >
{% endif %}
< th class = "header text-center" > Mindstate< / th >
< th class = "header text-center" > Sleep< / th >
< th class = "header text-center" > Stress< / th >
< th class = "header text-center" > Fatigue< / th >
< th class = "header text-center" > Muscle soreness< / th >
< / tr >
< / thead >
< tbody >
{% for wellbeing in wellbeing_list %}
< tr >
< td >
< a href = "{% url 'wellbeing_update' wellbeing.id %}" >
< span class = "tim-icons icon-pencil text-warning" > < / span >
< / a >
< / td >
< td class = "text-left" >
{% if wellbeing.gymnast.id in request.session.available_gymnast or request.user.is_superuser %}< a href = "{% url 'wellbeing_details' wellbeing.id %}" > {% endif %}{{ wellbeing.date | date:"j-n-Y" }}< / a >
< / td >
{% if not gymnast %}
< td class = "text-left" >
{% if wellbeing.gymnast.id in request.session.available_gymnast or request.user.is_superuser %}< a href = "{% url 'gymnast_details_tab' wellbeing.gymnast.id 'physiological' %}" > {% endif %}
{{ wellbeing.gymnast }}
< / a >
< / td >
{% endif %}
< td class = "text-right" >
{% if wellbeing.mindstate < 5 % } < b > < span class = "text-danger" > {% endif %}
{{ wellbeing.mindstate }}
{% if wellbeing.mindstate < 5 % } < / b > < / span > {% endif %}
< / td >
< td class = "text-right" >
{% if wellbeing.sleep < 5 % } < b > < span class = "text-danger" > {% endif %}
{{ wellbeing.sleep }}
{% if wellbeing.sleep < 5 % } < / b > < / span > {% endif %}
< / td >
< td class = "text-right" >
{% if wellbeing.stress > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.stress }}
{% if wellbeing.stress > 5%}< / b > < / span > {% endif %}
< / td >
< td class = "text-right" >
{% if wellbeing.fatigue > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.fatigue }}
{% if wellbeing.fatigue > 5%}< / b > < / span > {% endif %}
< / td >
< td class = "text-right" >
{% if wellbeing.muscle_soreness > 5%}< b > < span class = "text-danger" > {% endif %}
{{ wellbeing.muscle_soreness }}
{% if wellbeing.muscle_soreness > 5%}< / b > < / span > {% endif %}
< / td >
< / tr >
{% endfor %}
< / tbody >
< / table >
{% else %}
< p class = "text-muted" > There are no well being corresponding to your criterias< / p >
{% endif %}
2023-07-05 10:51:49 +02:00
{% endif %}
< / div >
< / div >
< / div >
< / div >
{% endblock %}
{% block footerscript %}
2024-04-10 14:02:46 +02:00
< script src = "{% static " js / template_users / chart_gradient_color . js " % } " > < / script >
2023-07-05 10:51:49 +02:00
< script type = "text/javascript" >
$(document).ready(function () {
$('[data-sort="table"]').tablesorter({
headers: {
0: { sorter: false },
},
dateFormat: "uk",
sortList: [[1, 1]]
});
$('#mindstate_table').DataTable({
2024-01-25 16:04:30 +01:00
scrollY: '50vh',
2023-07-05 10:51:49 +02:00
scrollCollapse: true,
paging: false,
searching: false,
ordering: false,
2023-11-13 15:05:31 +01:00
"bInfo" : false,
2023-07-05 10:51:49 +02:00
});
});
2024-04-10 14:02:46 +02:00
{% if wellbeing_list %}
var timeFormat = 'DD-M-YYYY';
var ctx = document.getElementById("chart_wellbeing").getContext("2d");
var border_color_pink = 'rgb(255, 99, 132)';
var gradient_stroke_pink = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_pink.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
gradient_stroke_pink.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
gradient_stroke_pink.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
gradient_stroke_pink.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
var border_color_orange = 'rgb(255, 159, 64)';
var gradient_stroke_orange = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_orange.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
gradient_stroke_orange.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
gradient_stroke_orange.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
gradient_stroke_orange.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
var border_color_green = 'rgb(75, 192, 192)';
var gradient_stroke_green = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_green.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
gradient_stroke_green.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
gradient_stroke_green.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
gradient_stroke_green.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
var border_color_blue = 'rgb(54, 162, 235)';
var gradient_stroke_blue = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_blue.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
gradient_stroke_blue.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
gradient_stroke_blue.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
gradient_stroke_blue.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
var border_color_yellow = 'rgb(255, 205, 86)';
var gradient_stroke_yellow = ctx.createLinearGradient(0, 230, 0, 50);
gradient_stroke_yellow.addColorStop(1, 'rgba(255, 205, 86, 0.4)');
gradient_stroke_yellow.addColorStop(0.75, 'rgba(255, 205, 86, 0.3)');
gradient_stroke_yellow.addColorStop(0.5, 'rgba(255, 205, 86, 0.2)');
gradient_stroke_yellow.addColorStop(0.25, 'rgba(255, 205, 86, 0)');
var mindstate_values = [
{% for wellbeing in wellbeing_list %}
{
x: '{{ wellbeing.date | date:"d-m-Y" }}',
y: '{{ wellbeing.mindstate }}'
},
{% endfor %}
];
var sleep_values = [
{% for wellbeing in wellbeing_list %}
{
x: '{{ wellbeing.date | date:"d-m-Y" }}',
y: '{{ wellbeing.sleep }}'
},
{% endfor %}
];
var stress_values = [
{% for wellbeing in wellbeing_list %}
{
x: '{{ wellbeing.date | date:"d-m-Y" }}',
y: '{{ wellbeing.stress }}'
},
{% endfor %}
];
var fatigue_values = [
{% for wellbeing in wellbeing_list %}
{
x: '{{ wellbeing.date | date:"d-m-Y" }}',
y: '{{ wellbeing.fatigue }}'
},
{% endfor %}
];
var muscle_soreness_values = [
{% for wellbeing in wellbeing_list %}
{
x: '{{ wellbeing.date | date:"d-m-Y" }}',
y: '{{ wellbeing.muscle_soreness }}'
},
{% endfor %}
];
var wellbeing_data = {
datasets: [
{
label: 'Mindstate',
cubicInterpolationMode: 'monotone',
backgroundColor: gradient_stroke_pink,
borderColor: border_color_pink,
pointBackgroundColor: border_color_pink,
fill: true,
data: mindstate_values,
},
{
label: 'Sleep',
cubicInterpolationMode: 'monotone',
backgroundColor: gradient_stroke_orange,
borderColor: border_color_orange,
pointBackgroundColor: border_color_orange,
fill: true,
data: sleep_values,
},
{
label: 'Stress',
cubicInterpolationMode: 'monotone',
backgroundColor: gradient_stroke_green,
borderColor: border_color_green,
pointBackgroundColor: border_color_green,
fill: true,
data: stress_values,
},
{
label: 'Fatigue',
cubicInterpolationMode: 'monotone',
backgroundColor: gradient_stroke_blue,
borderColor: border_color_blue,
pointBackgroundColor: border_color_blue,
fill: true,
data: fatigue_values,
},
{
label: 'Muscle',
cubicInterpolationMode: 'monotone',
backgroundColor: gradient_stroke_yellow,
borderColor: border_color_yellow,
pointBackgroundColor: border_color_yellow,
fill: true,
data: muscle_soreness_values,
},
],
};
new Chart(ctx, {
type: 'line',
data: wellbeing_data,
options: {
scales: {
x: {
type: 'time',
display: true,
scaleLabel: {
display: true,
labelString: 'Date',
ticks: {
autoSkip: true,
source: 'data',
},
},
time: {
parser: timeFormat,
tooltipFormat: 'LL',
round: 'day',
},
},
},
plugins: {
legend: {
display: true,
position: 'bottom',
}
}
},
});
{% endif %}
2023-07-05 10:51:49 +02:00
< / script >
{% endblock %}