ScoDoc/app/templates/entreprises/envoi_offre_form.html

{# -*- mode: jinja-html -*- #}
{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block styles %}
{{super()}}
<link type="text/css" rel="stylesheet" href="/ScoDoc/static/css/autosuggest_inquisitor.css" />
<script src="/ScoDoc/static/libjs/AutoSuggest.js"></script>
{% endblock %}

{% block app_content %}
    <h1>Envoyer une offre</h1>
    <br>
    <div class="row">
        <div class="col-md-4">
            <p>
                (*) champs requis
            </p>
            <form method="POST" action="" novalidate>
                {{ form.hidden_tag() }}
                {{ form.responsables.label }}<br>
                {% for subfield in form.responsables %}
                    {% if subfield.errors %}
                        {% for error in subfield.errors %}
                            <p class="help-block">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                {% endfor %}
                {{ form.responsables }}
                <button class="btn btn-default" id="add-responsable-field">Ajouter un responsable</button>
                <input class="btn btn-default" type="submit" value="Envoyer">
            </form>
        </div>
    </div>
    
    <script>
        window.onload = function(e) {
            var responsables_options = {
                script: "/ScoDoc/entreprises/responsables?",
                varname: "term",
                json: true,
                noresults: "Valeur invalide !",
                minchars: 2,
                timeout: 60000
            };

            let allResponsablesFieldWrapper = document.getElementById('responsables');
            let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input');
            for(let i = 0; i < allResponsablesField.length; i++) {
                new bsn.AutoSuggest(allResponsablesField[i].id, responsables_options);
                document.getElementById(allResponsablesField[i].id).classList.add("form-control");
            }

            let addResponsableFieldBtn = document.getElementById('add-responsable-field');
            addResponsableFieldBtn.addEventListener('click', function(e){
                e.preventDefault();
                let allResponsablesFieldWrapper = document.getElementById('responsables');
                let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input');
                if(allResponsablesField.length > 4) {
                    return;
                }
                let responsableInputIds = []
                for(let i = 0; i < allResponsablesField.length; i++) {
                    responsableInputIds.push(parseInt(allResponsablesField[i].name.split('-')[1]));
                }
                let newFieldName = `responsables-${Math.max(...responsableInputIds) + 1}`;
                allResponsablesFieldWrapper.insertAdjacentHTML('beforeend',`
                <li><label for="${newFieldName}">Responsable</label> <input class="form-control" id="${newFieldName}" name="${newFieldName}" type="text" value="" placeholder="Tapez le nom du responsable de formation"></li> 
                `);
                var as_r = new bsn.AutoSuggest(newFieldName, responsables_options);
            });
        }
    </script>
{% endblock %}