MonScoDocEssai/app/templates/entreprises/form_envoi_offre.j2

{# -*- mode: jinja-html -*- #}
{% extends 'base.j2' %}
{% import 'wtf.j2' 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 }}
            {% for error in form.responsables.errors %}
            <p class="help-block form-error">{{ error }}</p>
            {% endfor %}
            {{ form.responsables }}
            <div style="margin-bottom: 10px;">
                <button class="btn btn-default" id="add-responsable-field">Ajouter un responsable</button>
                {{ form.submit(class_="btn btn-default") }}
                {{ form.cancel(class_="btn btn-default") }}
            </div>
        </form>
    </div>
</div>

<script>
    let allResponsablesFieldWrapper = document.getElementById('responsables');
    let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('li');
    for (let i = 0; i < allResponsablesField.length; i++) {
        let form_id = allResponsablesField[i].getElementsByTagName('input')[0].id
        if (form_id.split('-')[1] != 0)
            allResponsablesField[i].insertAdjacentHTML('beforeend', `<div class="btn btn-default btn-remove" onclick="deleteForm('${form_id}')">Retirer</div>`)
    }

    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);
        }

        let addResponsableFieldBtn = document.getElementById('add-responsable-field');
        addResponsableFieldBtn.addEventListener('click', function (e) {
            e.preventDefault();
            let allResponsablesFieldWrapper = document.getElementById('responsables');
            let allResponsablesField = allResponsablesFieldWrapper.getElementsByTagName('input');
            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">
                    <div class="btn btn-default btn-remove" onclick="deleteForm('${newFieldName}')">Retirer</div>
                </li>
                `);
            var as_r = new bsn.AutoSuggest(newFieldName, responsables_options);
        });
    }

    function deleteForm(x) {
        var li_form = document.querySelector(`label[for=${x}]`).closest('li');
        if (li_form) {
            li_form.remove()
        }
    }
</script>
{% endblock %}