mainDisplay.html.twig 6.85 KB
Newer Older
Mat's avatar
Mat committed
1 2
{% extends "@Techno/layout.html.twig" %}

Mat's avatar
Mat committed
3
{% block title %}
Mat's avatar
Mat committed
4
    Ajax interroge API
Mat's avatar
Mat committed
5 6
{% endblock %}

Mat's avatar
Mat committed
7
{% block sidebar %}
8 9 10

    <h3>Créer</h3>

11

12 13
    <a href="javascript: void(0);" class="btn btn-create">
        <i class="fas fa-plus fa-fw"></i> Nouvel auteur
14 15 16
    </a><br>
    <a href="javascript: void(0);" class="btn btn-reload">
        <i class="fas fa-sync-alt fa-fw"></i> Rafraichir
17 18 19
    </a>

    <div class="hidden" style="margin-top: 1em;">
20 21 22 23
        {{ form_start(formOwner) }}
        {{ form_errors(formOwner) }}
        {{ form_rest(formOwner) }}
        {{ form_end(formOwner) }}
24 25
    </div>

Mat's avatar
Mat committed
26 27
{% endblock %}

Mat's avatar
Mat committed
28

Mat's avatar
Mat committed
29
{% block content %}
Mat's avatar
Mat committed
30 31 32 33
    {{ block('breadcrumb') }}

    <h1>{{ block('title') }}</h1>

Mat's avatar
Mat committed
34 35 36
    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>
Mat's avatar
Mat committed
37

Mat's avatar
Mat committed
38 39 40
    <table id="table-owners">
        <thead>
            <tr>
41
                <th>#</th>
Mat's avatar
Mat committed
42 43 44 45 46 47 48 49 50
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
51 52 53 54 55
{% endblock %}

{% block customJS %}
<script type="text/javascript">

56 57
    let submitURL = null;

58
    // L'URL de l'API
Mat's avatar
Mat committed
59
    let ownersURL = Routing.generate('api_owner_read');
60 61

    // Le tableau
62 63 64
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

Mat's avatar
Mat committed
65
    // La fonction AJAX qui reload la table
66 67
    function reloadTableOwner()
    {
68 69
        tbody.innerHTML = null;

70 71
        getAJAX(ownersURL, function()
        {
Mat's avatar
Mat committed
72 73
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
74

Mat's avatar
Mat committed
75
                // Récupère le json et boucle pour créer le tableau
Mat's avatar
Mat committed
76
                let json = JSON.parse(this.responseText);
77 78
                for (let i = 0; i < json.length; i++)
                {
Mat's avatar
Mat committed
79

80
                    let tr = document.createElement('tr');
81

82 83 84 85
                    let td0 = document.createElement('td');
                    td0.textContent = json[i].id;
                    tr.appendChild(td0);

86
                    let td1 = document.createElement('td');
87
                    td1.textContent = json[i].lastname;
88
                    tr.appendChild(td1);
89

90
                    let td2 = document.createElement('td');
91
                    td2.textContent = json[i].firstname;
92
                    tr.appendChild(td2);
93

94
                    let td3 = document.createElement('td');
95
                    td3.textContent = formatStringDate(json[i].created_at);
96
                    tr.appendChild(td3);
97

98
                    let td4 = document.createElement('td');
Mat's avatar
Mat committed
99

100 101
                    // Boutons edit
                    let editBtn = document.createElement('button');
102
                    editBtn.dataset.ownerId = json[i].id;
Mat's avatar
Mat committed
103 104
                    editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
                    editBtn.classList.add('btn', 'btn-primary');
Mat's avatar
Mat committed
105 106
                    editBtn.addEventListener('click', function()
                    {
107
                        let ownerId = this.dataset.ownerId;
108 109 110
                        submitURL = Routing.generate('api_owner_update', {'id': ownerId});
                        getAJAX(submitURL, function()
                        {
111 112 113 114 115 116 117
                            if (this.readyState === 4 && this.status === 200)
                            {
                                let json = JSON.parse(this.responseText);
                                form.querySelector('#owner_firstname').value = json.firstname;
                                form.querySelector('#owner_lastname').value = json.lastname;
                                form.parentNode.classList.remove('hidden');
                            }
118
                        });
Mat's avatar
Mat committed
119 120 121
                    });
                    td4. appendChild(editBtn);

122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147
                    // Boutons delete
                    let deleteBtn = document.createElement('button');
                    deleteBtn.dataset.ownerId = json[i].id;
                    deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i> Supprimer';
                    deleteBtn.classList.add('btn', 'btn-danger');
                    deleteBtn.addEventListener('click', function()
                    {
                        let ownerId = this.dataset.ownerId;
                        let r = confirm('Are you sure ?');
                        if (r === true) {
                            submitURL = Routing.generate('api_owner_delete_one', {'id': ownerId});
                            deleteAJAX(submitURL, function()
                            {
                                if (this.readyState === 4) {
                                    if (this.status === 200)
                                    {
                                        reloadTableOwner();
                                    }
                                    else if (this.status === 400) {
                                        console.log('BAD REQUEST. DISPLAY ERRORS');
                                    }
                                }
                            });
                        }
                    });
                    td4. appendChild(deleteBtn);
148

149
                    tr.appendChild(td4);
Mat's avatar
Mat committed
150
                    tbody.appendChild(tr);
151 152
                }

Mat's avatar
Mat committed
153
            }
154
        });
155 156 157
    }
    reloadTableOwner();

Mat's avatar
Mat committed
158 159 160 161
    let form = document.querySelector('form[name="owner"]');
        // form[name$="owner"] .. regex, qui finit par owner
        // form[name^="owner"] .. regex, qui commence par owner

Mat's avatar
Mat committed
162 163

    // Evénements sur les boutons
164
    let createBtns = document.querySelectorAll('.btn-create');
165
    createBtns.forEach(function(currentBtn){     // ou for (let currentBtn of createBtns)
166 167 168
        currentBtn.addEventListener('click', function(e) {  // 'e' veut dire 'event'
            form.querySelector('#owner_firstname').value = null;
            form.querySelector('#owner_lastname').value = null;
Mat's avatar
Mat committed
169
            form.parentNode.classList.remove('hidden');
170
            submitURL = Routing.generate('api_owner_create');
171 172
        });
    });
Mat's avatar
Mat committed
173

174 175 176 177 178 179 180
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
        reloadBtn.addEventListener('dblclick', function (e) {
            reloadTableOwner();
        });
    });

181 182 183
    // Soumission du formulaire
    form.addEventListener('submit', function(e)
    {
184 185
        let form = this;

Mat's avatar
Mat committed
186 187 188
        // Annule l'événement, mais préserve la fonction callback
        e.preventDefault();

189 190
        postAJAX(submitURL, function()
        {
191 192 193 194
            if (this.readyState === 4)
            {
                if (this.status === 200)
                {
195 196 197
                    reloadTableOwner();
                    form.parentNode.classList.add('hidden');

198 199 200
                } else if (this.status === 400) {
                    console.log('BAD REQUEST. DISPLAY ERRORS');
                }
201
            }
202

203
        }, form);
Mat's avatar
Mat committed
204 205 206

    });

207
</script>
Mat's avatar
Mat committed
208
{% endblock %}