Jarvis/jarvis/followup/templates/intensities/create.html

{% extends "base.html" %}
{% load static %}
{% load has_group %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-sm-12 col-md-8 col-lg-6 col-xl-6">
        <div class="card">
            <div class="card-header">
                <h4 class="">{% if intensity_id %}Edit{% else %}Add{% endif %} intensity</h4>
            </div>
            <div class="card-body">
                <form
                    action="{% if intensity_id %}{% url 'intensity_update' intensity_id %}{% else %}{% url 'intensity_create' %}{% endif %}"
                    method="post" class="form-horizontal" id="formulaire" name="formulaire">
                    {% csrf_token %}
                    <div class="form-group row ">
                        <label for="id_date" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0">Gymnast <span class="text-danger"><b>*</b></span></label>
                        <div class="col-8 col-sm-9 col-md-9 col-lg-9 col-lg-8 col-xl-8 {% if form.gymnast.errors %}has-danger{% endif %}">
                            {{ form.gymnast }}
                            {{ form.gymnast_related }}
                            {% if form.gymnast.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.gymnast.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>
                    <div class="form-group row ">
                        <label for="id_date" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0">Date <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-3 col-md-4 col-lg-4 col-xl-3 {% if form.date.errors %}has-danger{% endif %}">
                            {{ form.date }}
                            {% if form.date.errors %}<span class="btn btn-sm">{% for error in form.date.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group row ">
                        <label for="id_time" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0">Time <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.time.errors %}has-danger{% endif %}">
                            {{ form.time }}
                            {% if form.time.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.time.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                        <label for="id_theorical_time" class="col-4 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0">Theorical time <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.theorical_time.errors %}has-danger{% endif %}">
                            {{ form.theorical_time }}
                            {% if form.theorical_time.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.theorical_time.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group row ">
                        <label for="id_difficulty" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0">Difficulty <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.difficulty.errors %}has-danger{% endif %}">
                            {{ form.difficulty }}
                            {% if form.difficulty.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.difficulty.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                        <label for="id_difficulty_asked" class="col-4 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0">Difficulty asked <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.difficulty_asked.errors %}has-danger{% endif %}">
                            {{ form.difficulty_asked }}
                            {% if form.difficulty_asked.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.difficulty_asked.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group row ">
                        <label for="id_quantity_of_skill" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0"># skill <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.quantity_of_skill.errors %}has-danger{% endif %}">
                            {{ form.quantity_of_skill }}
                            {% if form.quantity_of_skill.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.quantity_of_skill.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>

                        <label for="id_quantity_of_skill_asked" class="col-4 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0"># skill asked <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.quantity_of_skill_asked.errors %}has-danger{% endif %}">
                            {{ form.quantity_of_skill_asked }}
                            {% if form.quantity_of_skill_asked.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.quantity_of_skill_asked.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group row ">
                        <label for="id_number_of_passes" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0"># passes <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.number_of_passes.errors %}has-danger{% endif %}">
                            {{ form.number_of_passes }}
                            {% if form.number_of_passes.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.number_of_passes.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>

                        <label for="id_number_of_passes_asked" class="col-4 col-sm-3 col-md-3 col-lg-3 col-xl-3 col-form-label pl-0 pr-0"># passes asked <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.number_of_passes_asked.errors %}has-danger{% endif %}">
                            {{ form.number_of_passes_asked }}
                            {% if form.number_of_passes_asked.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.number_of_passes_asked.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group row ">
                        <label for="id_number_of_gymnast" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label pr-0"># gymnast <span class="text-danger"><b>*</b></span></label>
                        <div class="col-5 col-sm-2 col-md-3 col-lg-3 {% if form.number_of_gymnast.errors %}has-danger{% endif %}">
                            {{ form.number_of_gymnast }}
                            {% if form.number_of_gymnast.errors %}&nbsp;<span class="btn btn-sm">{% for error in form.number_of_gymnast.errors %}{{ error }}{% endfor %}</span>{% endif %}
                        </div>
                    </div>

                    <div class="form-group text-center" id="informations_needed">
                        <p class="text-danger">Details required because at least one quality is  above/under the limits.</p>
                    </div>

                    <div class="form-group row ">
                        <label for="id_information" class="col-4 col-sm-2 col-md-3 col-lg-3 col-xl-3 col-form-label">Informations <span id="informations_star" class="text-danger"><b>*</b></span></label>
                    </div>
                    <div class="form-group row">
                        <div class="col-12 {% if form.id_informations.errors %}has-danger{% endif %}">
                            {{ form.informations }}
                        </div>
                    </div>

                    <div class="form-group text-center" id="div_submit">
                        <input type="submit" value="{% if intensity_id %}Update{% else %}Add{% endif %}"
                            class="btn btn-warning" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block footerscript %}
<script type="text/javascript">
    $(function () {
        $('#informations_star').hide();
        $("#informations_needed").hide();
        blackDashboard.initDateTimePicker();

        function is_lower_than(number, limit) {
            if(number < limit)
                return true;

            return false;
        }

        function is_greater_than(number, limit) {
            if(number >= limit)
                return true;

            return false;
        }

        function is_informations_needed() {
            var time_quality = $('#id_theorical_time').val() / $('#id_time').val();
            var diff_quality = $('#id_difficulty_asked').val() / $('#id_difficulty').val();
            var skill_quality = $('#id_quantity_of_skill_asked').val() / $('#id_quantity_of_skils').val();
            var passe_quality = $('#id_number_of_passes_asked').val() / $('#id_number_of_passes').val();

            var limit = 0.7;
            var test = is_lower_than(time_quality, limit);
            test = test || is_lower_than(diff_quality, limit);
            test = test || is_lower_than(skill_quality, limit);
            test = test || is_lower_than(passe_quality, limit);

            var limit = 1.1;
            test = test || is_greater_than(time_quality, limit);
            test = test || is_greater_than(diff_quality, limit);
            test = test || is_greater_than(skill_quality, limit);
            test = test || is_greater_than(passe_quality, limit);

            var average_quality = (time_quality + (skill_quality * 2) + (passe_quality * 3) + (diff_quality * 4)) / 10;
            test = test || is_lower_than(average_quality, 0.85);
            test = test || is_greater_than(average_quality, 1.05);

            return test
        }

        function is_information_field_too_short() {
            information_length = $('#id_informations').val().length
            if(isNaN(information_length) || information_length < 15)
                return true;
            else
                return false;
        };

        $('#id_time, #id_theorical_time, #id_difficulty, #id_difficulty_asked, #id_quantity_of_skill, #id_quantity_of_skill_asked, #id_number_of_passes, #id_number_of_passes_asked').keyup(function(){
            if(is_informations_needed() && is_information_field_too_short()) {
                $("#informations_needed").show();
                $('#informations_star').show();
                $("#div_submit").hide();
            } else {
                $("#informations_needed").hide();
                $('#informations_star').hide();
                $("#div_submit").show();
            }
        });

        $('#id_informations').on('keyup', function(){
            if(is_informations_needed() && is_information_field_too_short()) {
                $("#informations_needed").show();
                $("#div_submit").hide();
            } else {
                $("#informations_needed").hide();
                $("#div_submit").show();
            }
        });

        const csrf_token = "{{ csrf_token|escapejs }}";
        const gymnast_lookup = "{% url 'gymnast_lookup' %}";

        $('#id_club_related').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: club_lookup,
                    method: "POST",
                    data: {
                        pattern: $('#id_club_related').val(),
                        csrfmiddlewaretoken: csrf_token
                    },
                    dataType: "json",
                    success: function(data) {
                        if(data.length != 0) {
                            response($.map(data, function(item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    clubid: item.ID
                                }
                            }))
                        } else {
                            response([{ label: 'No result found.', value: '' }]);
                        };
                    },

                    error: function (exception) {
                        console.log(exception);
                    }
                });
            },
            minLength: 3,
            select: function (event, ui) {
                $($(this).data('ref')).val(ui.item.clubid);
            },
            {% if request.session.template == 0 %}
            classes: {
                "ui-widget-content": "custom_autocomplete_ul",
                "ui-autocomplete": "custom_autocomplete_ul",
                "ui-menu-item-wrapper": "custom_autocomplete_li",
                "ui-menu-item": "custom_autocomplete_li",
            },
            {% endif %}
        });
    });
</script>
<script src="{% static "js/template_users/datepicker_maxdate_today.js" %}"></script>
{% if request.session.template == 0 %}
    <script src="{% static "js/template_users/gymnast_autocomplete_black.js" %}"></script>
    <script src="{% static "js/template_users/skill_autocomplete_black.js" %}"></script>
{% else %}
    <script src="{% static "js/template_users/gymnast_autocomplete.js" %}"></script>
    <script src="{% static "js/template_users/skill_autocomplete.js" %}"></script>
{% endif %}
{% endblock %}