Ultron/templates/peoples/gymnasts/physiological_followup.html

<div class="row justify-content-center ml-3 pr-0">
    <div class="col-md-12 pr-0">
        <div class="card">
            <div class="card-header">
                <h4>Height/Weight</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if height_weight_list %}
                <div>
                    <canvas id="chartjs_height_weight_state" class="chartjs" width="400" height="200"></canvas>
                </div>

                <div class="row">
                    <div class="col-md-8 col-l-6 col-xl-4 offset-xl-4">
                        <table class="table tablesorter table-striped table-condensed" id="height_weight_table">
                            <thead>
                                <tr>
                                    <th style="width: 5%"></th>
                                    <th style="width: 25%" class="header text-center">Date</th>
                                    <th style="width: 35%" class="header text-center">Height</th>
                                    <th style="width: 35%" class="header text-center">weight</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for height_weight in height_weight_list %}
                                <tr>
                                    <td>
                                        <!-- <a href="{% url 'score_update' height_weight.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-link btn-sm btn-icon">
                                                <span class="tim-icons icon-pencil text-warning"></span>
                                            </button>
                                        </a> -->
                                    </td>
                                    <td class="text-right">{{ height_weight.date | date:"d-m-Y" }}</td>
                                    <td class="text-right">{{ height_weight.height }}&nbsp;</td>
                                    <td class="text-right">{{ height_weight.weight }}&nbsp;</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#height_weight_table').tablesorter({
                            headers: {
                                0: { sorter: false },
                            },
                            dateFormat: "uk",
                            sortList: [[1,0],]
                        });

                    });
                </script>
            {% else %}
                <p>No height/weight recorded for this gymnast.</p>
            {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                <!-- <a href="{% url 'mindstate_create_for_gymnast' gymnastid %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-simple-add"></i>
                    </button>
                </a> -->
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h4>Mindstates</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if mindstate_list %}
                <div>
                    <canvas id="chartjs_mindstate" class="chartjs" width="400" height="200"></canvas>
                </div>

                <div class="row">
                    <div class="col-md-8 col-l-6 col-xl-4 offset-xl-4 offset-l-3">
                        <table class="table tablesorter table-striped table-condensed" id="mindstate_table">
                            <thead>
                                <tr>
                                    <th style="width: 4%"></th>
                                    <th style="width: 48%" class="header text-center">Date</th>
                                    <th style="width: 48%" class="header text-center">Score</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for state in mindstate_list %}
                                <tr class="routine_{{ score.routine_type }}">
                                    <td>
                                        <a href="{% url 'score_update' state.id %}">
                                            <button type="button" rel="tooltip" class="btn btn-link btn-sm btn-icon">
                                                <span class="tim-icons icon-pencil text-warning"></span>
                                            </button>
                                        </a>
                                    </td>
                                    <td class="text-right">{{ state.date | date:"d-m-Y" }}</td>
                                    <td class="text-right">{{ state.score }}&nbsp;</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <script type="text/javascript">
                    $(document).ready(function() {
                        $('#mindstate_table').tablesorter({
                            headers: {
                                0: { sorter: false },
                            },
                            dateFormat: "uk",
                            sortList: [[1,0],]
                        });

                    });
                </script>
            {% else %}
                <p>No mindstate recorded for this gymnast.</p>
            {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                <a href="{% url 'mindstate_create_for_gymnast' gymnastid %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-simple-add"></i>
                    </button>
                </a>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h4>Accidents</h4>
            </div>
            <div class="card-body pt-0 pb-0">
                {% if accident_list %}
                    <div class="card-body pl-0 pt-0 pr-0">
                        <table class="table table-striped table-condensed tablesorter mb-1">
                            <thead>
                                <tr>
                                    <th style="width: 3%"></th>
                                    <th class="header text-center" style="width: 10%">Date</th>
                                    <th class="header text-left" style="width: 50%">Skill</th>
                                    <th class="header text-left" style="width: 40%"># Week Off</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for accident in accident_list %}
                                <tr>
                                    <td class="text-left">
                                        <a href="{% url 'accident_update' accident.id %}">
                                            &nbsp;<span class="tim-icons icon-pencil text-warning"></span>
                                        </a>
                                    </td>
                                    <td class="text-center"><a href="{% url 'accident_details' accident.id %}">{{ accident.date | date:"d-m-Y" }}</a></td>
                                    <td class="text-left">{% if accident.skill %}<a href="{% url 'skill_details' accident.skill.id %}">{{ accident.skill }}</a>{% else %}-{% endif %}</td>
                                    <td class="text-left">{{ accident.nb_week_off }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p>No accident known for this gymnast.</p>
                {% endif %}
            </div>
            <div class="card-footer text-right text-muted pt-0">
                <a href="{% url 'accident_create_for_gymnast' gymnastid %}">
                    <button type="submit" value="add" class="btn btn-icon btn-warning ">
                        <i class="tim-icons icon-simple-add"></i>
                    </button>
                </a>
            </div> 
        </div>
    </div>
</div>

<script type="text/javascript">
    new Chart(document.getElementById("chartjs_height_weight_state"),{
        type: 'line',
        data:{
            datasets:[
                {% if height_weight_list %}
                {
                    label: 'Weight',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for height in height_weight_list %}
                            {
                                x: '{{ height.date | date:"d-m-Y" }}',
                                y: '{{ height.weight }}'
                            },
                        {% endfor%}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: 'DD-MM-YYYY',
                        round: 'day'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }, ],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                    },
                    // ticks: {
                    //     beginAtZero: true,
                    //     max: 10
                    // }
                }]
            },
            legend: {
                display: false,
            }
        },
    });

    new Chart(document.getElementById("chartjs_mindstate"),{
        type: 'line',
        data:{
            datasets:[
                {% if mindstate_list %}
                {
                    label: 'L1',
                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
                    borderColor: 'rgb(255, 99, 132)',
                    fill: true,
                    data: [
                        {% for state in mindstate_list %}
                            {
                                x: '{{ state.date | date:"d-m-Y" }}',
                                y: '{{ state.score }}'
                            },
                        {% endfor%}
                    ]
                },
                {% endif %}
            ],
        },
        options: {
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        format: 'DD-MM-YYYY',
                        round: 'day'
                    },
                    scaleLabel: {
                        display: true,
                    }
                }, ],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                    },
                    ticks: {
                        beginAtZero: true,
                        max: 10
                    }
                }]
            },
            legend: {
                display: false,
            }
        },
    });
</script>