mainDisplay.html.twig 7.39 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 11 12

    <h3>Créer</h3>

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

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

25 26 27 28 29 30 31 32
    <h3>Liens</h3>
    <ul>
        <li>
            <a href="https://gist.github.com/EtienneR/2f3ab345df502bd3d13e" target="_blank">
            Ajax RESTful Mémo</a>
        </li>
    </ul>

Mat's avatar
Mat committed
33 34
{% endblock %}

Mat's avatar
Mat committed
35

Mat's avatar
Mat committed
36
{% block content %}
Mat's avatar
Mat committed
37 38 39 40
    {{ block('breadcrumb') }}

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

Mat's avatar
hop  
Mat committed
41 42 43
    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>
Mat's avatar
Mat committed
44

Mat's avatar
Mat committed
45 46 47
    <table id="table-owners">
        <thead>
            <tr>
48
                <th>#</th>
Mat's avatar
Mat committed
49 50 51 52 53 54 55 56 57
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
58 59 60 61 62
{% endblock %}

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

63 64
    let submitURL = null;

65
    // L'URL de l'API
Mat's avatar
Mat committed
66
    let ownersURL = Routing.generate('api_owner_read');
67 68

    // Le tableau
69 70 71
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

Mat's avatar
Mat committed
72
    // La fonction AJAX qui reload la table
Mat's avatar
Mat committed
73 74
    function reloadTableOwner()
    {
75 76
        tbody.innerHTML = null;

77 78
        getAJAX(ownersURL, function()
        {
Mat's avatar
Mat committed
79 80
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
81

Mat's avatar
Mat committed
82
                // Récupère le json et boucle pour créer le tableau
Mat's avatar
Mat committed
83
                let json = JSON.parse(this.responseText);
84 85
                for (let i = 0; i < json.length; i++)
                {
Mat's avatar
Mat committed
86

87
                    let tr = document.createElement('tr');
88

89 90 91 92
                    let td0 = document.createElement('td');
                    td0.textContent = json[i].id;
                    tr.appendChild(td0);

93
                    let td1 = document.createElement('td');
94
                    td1.textContent = json[i].lastname;
95
                    tr.appendChild(td1);
96

97
                    let td2 = document.createElement('td');
98
                    td2.textContent = json[i].firstname;
99
                    tr.appendChild(td2);
100

101
                    let td3 = document.createElement('td');
102
                    td3.textContent = formatStringDate(json[i].created_at);
103
                    tr.appendChild(td3);
104

105
                    let td4 = document.createElement('td');
Mat's avatar
Mat committed
106

107 108
                    // Boutons edit
                    let editBtn = document.createElement('button');
Mat's avatar
Mat committed
109
                    editBtn.dataset.ownerId = json[i].id;
Mat's avatar
Mat committed
110 111
                    editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
                    editBtn.classList.add('btn', 'btn-primary');
Mat's avatar
Mat committed
112 113
                    editBtn.addEventListener('click', function()
                    {
114
                        let ownerId = this.dataset.ownerId;
115 116 117
                        submitURL = Routing.generate('api_owner_update', {'id': ownerId});
                        getAJAX(submitURL, function()
                        {
118
                            if (this.readyState === 4)
119
                            {
120 121 122 123 124 125 126 127 128 129
                                if (this.status === 200 || this.status === 0)
                                {
                                    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');
                                }
                                else if (this.status === 400) {
                                    console.log('BAD REQUEST. DISPLAY ERRORS');
                                }
130
                            }
131
                        });
Mat's avatar
Mat committed
132 133 134
                    });
                    td4. appendChild(editBtn);

135 136 137 138 139 140 141 142 143 144 145 146 147 148
                    // 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) {
149
                                    if (this.status === 200 || this.status === 0)
150 151 152 153 154 155 156 157 158 159 160
                                    {
                                        reloadTableOwner();
                                    }
                                    else if (this.status === 400) {
                                        console.log('BAD REQUEST. DISPLAY ERRORS');
                                    }
                                }
                            });
                        }
                    });
                    td4. appendChild(deleteBtn);
161

162
                    tr.appendChild(td4);
Mat's avatar
Mat committed
163
                    tbody.appendChild(tr);
164 165
                }

Mat's avatar
Mat committed
166
            }
167
        });
Mat's avatar
Mat committed
168 169 170
    }
    reloadTableOwner();

Mat's avatar
Mat committed
171 172 173 174
    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
175 176

    // Evénements sur les boutons
177
    let createBtns = document.querySelectorAll('.btn-create');
178
    createBtns.forEach(function(currentBtn){     // ou for (let currentBtn of createBtns)
179 180 181
        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
182
            form.parentNode.classList.remove('hidden');
183
            submitURL = Routing.generate('api_owner_create');
184 185
        });
    });
Mat's avatar
Mat committed
186

187 188 189 190 191 192 193
    let reloadBtns = document.querySelectorAll('.btn-reload');
    reloadBtns.forEach(function(reloadBtn) {
        reloadBtn.addEventListener('dblclick', function (e) {
            reloadTableOwner();
        });
    });

194 195 196
    // Soumission du formulaire
    form.addEventListener('submit', function(e)
    {
197 198
        let form = this;

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

202 203
        postAJAX(submitURL, function()
        {
204 205
            if (this.readyState === 4)
            {
206
                if (this.status === 200 || this.status === 0)
207
                {
208 209 210
                    reloadTableOwner();
                    form.parentNode.classList.add('hidden');

211 212 213
                } else if (this.status === 400) {
                    console.log('BAD REQUEST. DISPLAY ERRORS');
                }
214
            }
215

Mat's avatar
Mat committed
216
        }, form);
Mat's avatar
Mat committed
217 218 219

    });

220
</script>
Mat's avatar
Mat committed
221
{% endblock %}