mainDisplay.html.twig 4.89 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 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
{% 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>
            <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>

            <hr>
            <li>
                <span class="fa-li"><i class="fas fa-plus"></i></span>
                <a href="javascript: void(0);" class="btn-create">Ajouter un nouveau membre</a>
            </li>
            <li>
                <span class="fa-li"><i class="fas fa-sync-alt"></i></span>
                <a href="javascript: void(0);" class="btn-reload">Rafraichir la liste</a>
            </li>
        </ul>
    </div>
    <div class="col-6">
        <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 %}

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

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

{% 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
85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
            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');
110 111 112 113 114 115 116 117 118 119 120 121 122 123

                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)
                {
                    console.log('edit');
                });
                td6.appendChild(editBtn);




Mat's avatar
Mat committed
124 125 126 127 128
                tr.appendChild(td6);

                tbody.appendChild(tr);
            }

129 130 131 132
        });
    }
    reloadTableMembre();

133 134
    let form = document.querySelector('form[name=membre]');

135 136 137 138 139 140 141 142
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
        reloadBtn.addEventListener('dblclick', function(e) {
            console.log('refresh');
            reloadTableMembre();
        });
    });

143 144 145 146 147 148 149
    let createBtns = document.querySelectorAll('.btn-create');
    createBtns.forEach(function(createBtn) {
        createBtn.addEventListener('click', function(e) {
            form.parentNode.classList.remove('hidden');
        });
    });

150 151 152

</script>
{% endblock %}