mainDisplay.html.twig 7.03 KB
Newer Older
1 2 3 4 5 6
{% extends "@Asso/layout.html.twig" %}

{% block title %}
    Liste des membres (Ajax)
{% endblock %}

7 8 9 10 11 12
{% block menu %}
<div class="row">
    <div class="col-6" style="margin-bottom: 3em;">
        <h3>Menu</h3>
        <ul class="fa-ul">
            <li><span class="fa-li"><i class="fas fa-arrow-left"></i></span><a href="{{ path('techno_homepage') }}">Accueil</a></li>
Mat's avatar
hop  
Mat committed
13 14
            <li><span class="fa-li"><i class="fas fa-arrow-right"></i></span><a href="{{ path('asso_membre_main_display') }}">Asso Ajax</a></li>

15 16 17
            <li><span class="fa-li"><i class="fas fa-th-list"></i></span><a href="{{ path('asso_association_read') }}">Les associations</a></li>
            <li><span class="fa-li"><i class="fas fa-th-list"></i></span><a href="{{ path('asso_membre_read') }}">Les membres</a></li>
        </ul>
Mat's avatar
hop  
Mat committed
18 19 20 21 22 23 24 25 26
        <hr>
        <a href="javascript: void(0);" class="btn btn-outline-dark btn-create">
            <i class="fas fa-plus"></i>
            Ajouter un nouveau membre
        </a>
        <a href="javascript: void(0);" class="btn btn-outline-dark btn-reload">
            <i class="fas fa-sync-alt"></i>
            Rafraichir la liste
        </a>
27
    </div>
Mat's avatar
hop  
Mat committed
28
    <div class="col-5">
29 30 31 32 33 34 35 36 37 38 39
        <a id="form-membre"></a>
        <div class="hidden" style="margin: -3em 0;">
            {{ form_start(formMembre) }}
            {{ form_errors(formMembre) }}
            {{ form_rest(formMembre) }}
            {{ form_end(formMembre) }}
        </div>
    </div>
</div>
{% endblock %}

40 41 42
{% block body %}
    <h2>{{ block('title') }}</h2>
    <table id="maintab" class="table membres">
43 44 45 46 47 48
        <thead>
            <tr>
                <th scope="col">
                    <a href="javascript: void(0);" class="btn-sort">#</a>
                </th>
                <th scope="col">
Mat's avatar
Mat committed
49
                    <a href="javascript: void(0);" class="btn-sort">Prénom</a>
50 51
                </th>
                <th scope="col">
Mat's avatar
Mat committed
52
                    <a href="javascript: void(0);" class="btn-sort">Nom</a>
53 54 55 56 57 58 59 60 61 62 63 64 65
                </th>
                <th scope="col">
                    <a href="javascript: void(0);" class="btn-sort">Email</a>
                </th>
                <th scope="col">
                    <a href="javascript: void(0);" class="btn-sort">Association</a>
                </th>
                <th scope="col">
                    <a href="javascript: void(0);" class="btn-sort">Action</a>
                </th>
            </tr>
        </thead>
        <tbody>
66

67
        </tbody>
68 69
    </table>
{% endblock %}
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85

{% block customJS %}
<script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
<script type="text/javascript">

    let submitURL = null;

    let table = document.querySelector('table#maintab.membres');
    let tbody = table.querySelector('tbody');

    let membreURL = Routing.generate('api_membre_read_paginate');
    function reloadTableMembre() {

        tbody.innerHTML = null;
        AJAX('GET', membreURL, function(request)
        {
Mat's avatar
Mat committed
86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
            let json = JSON.parse(request.responseText);
            for (var i = 0; i < json.length; i++) {
                tr = document.createElement('tr');

                td1 = document.createElement('td');
                td1.textContent = json[i].id;
                tr.appendChild(td1);

                td2 = document.createElement('td');
                td2.textContent = json[i].prenom;
                tr.appendChild(td2);

                td3 = document.createElement('td');
                td3.textContent = json[i].nom;
                tr.appendChild(td3);

                td4 = document.createElement('td');
                td4.textContent = json[i].email;
                tr.appendChild(td4);

                td5 = document.createElement('td');
                td5.textContent = json[i].association.nom;
                tr.appendChild(td5);

                td6 = document.createElement('td');
111 112 113 114 115 116 117

                let editBtn = document.createElement('button');
                editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
                editBtn.classList.add('btn', 'btn-primary', 'btn-sm');
                editBtn.dataset.membreId = json[i].id;
                editBtn.addEventListener('click', function(e)
                {
118 119 120 121 122 123 124 125 126 127 128 129 130
                    let membreId = this.dataset.membreId;
                    submitURL = Routing.generate('api_membre_update', {'id': membreId});
                    AJAX('GET', submitURL, function(request)
                    {
                        let json = JSON.parse(request.responseText);

                        form.querySelector('#membre_nom').value = json.nom;
                        form.querySelector('#membre_prenom').value = json.prenom;
                        form.querySelector('#membre_email').value = json.email;
                        form.querySelector('#membre_association').value = json.association.id;

                        form.parentNode.classList.remove('hidden');
                    });
131 132 133
                });
                td6.appendChild(editBtn);

134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
                let deleteBtn = document.createElement('button');
                deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i> Supprimer';
                deleteBtn.classList.add('btn', 'btn-danger', 'btn-sm');
                deleteBtn.dataset.membreId = json[i].id;
                deleteBtn.addEventListener('click', function(e)
                {
                    let membreId = this.dataset.membreId;
                    let r = confirm('Are you sure ?');
                    if (r === true) {
                        submitURL = Routing.generate('api_membre_delete', {'id': membreId });
                        AJAX('DELETE', submitURL, function()
                        {
                            reloadTableMembre();
                        });
                    }
                });
                td6.appendChild(deleteBtn);
151

Mat's avatar
Mat committed
152 153 154 155
                tr.appendChild(td6);
                tbody.appendChild(tr);
            }

156 157 158 159
        });
    }
    reloadTableMembre();

160 161
    let form = document.querySelector('form[name=membre]');

162 163
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
164 165
        reloadBtn.addEventListener('dblclick', function(e)
        {
166 167 168 169
            reloadTableMembre();
        });
    });

170 171
    let createBtns = document.querySelectorAll('.btn-create');
    createBtns.forEach(function(createBtn) {
172 173 174 175 176 177 178
        createBtn.addEventListener('click', function(e)
        {
            form.querySelector('#membre_nom').value = null;
            form.querySelector('#membre_prenom').value = null;
            form.querySelector('#membre_email').value = null;
            form.querySelector('#membre_association').value = null;

179
            form.parentNode.classList.remove('hidden');
180
            submitURL = Routing.generate('api_membre_create');
181 182 183
        });
    });

184 185 186
    form.addEventListener('submit', function(e)
    {
        let form = this;
Mat's avatar
Mat committed
187
        e.preventDefault();
188 189 190 191 192 193 194 195
        AJAX('POST', submitURL, function()
        {
            reloadTableMembre();
            form.parentNode.classList.add('hidden');
        },
        form);
    });

196 197 198

</script>
{% endblock %}