mainDisplay.html.twig 2.36 KB
Newer Older
Mat's avatar
Mat committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
{% extends "@Techno/layout.html.twig" %}

{% block body %}
    <table id="table-owners">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
16 17 18 19 20
{% endblock %}

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

21
    // L'URL de l'API
22
    let ownersURL = '{{ path('api_owner_read') }}';
23 24

    // Le tableau
25 26 27
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

28 29
    //console.log(ownersURL);
    //console.log(table);
Mat's avatar
Mat committed
30

31
    // La fonction AJAX
Mat's avatar
Mat committed
32 33 34 35
    function reloadTableOwner()
    {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
36 37 38

            //console.log(this);

Mat's avatar
Mat committed
39 40
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
41

Mat's avatar
Mat committed
42
                let json = JSON.parse(this.responseText);
43 44 45 46

                for (let i = 0; i < json.length; i++)
                {
                    let tr = document.createElement('tr');
47

48 49 50
                    let td1 = document.createElement('td');
                    td1.textContent = json[i].firstname;
                    tr.appendChild(td1);
51

52 53 54
                    let td2 = document.createElement('td');
                    td2.textContent = json[i].lastname;
                    tr.appendChild(td2);
55

56 57 58
                    let td3 = document.createElement('td');
                    td3.textContent = json[i].created_at;
                    tr.appendChild(td3);
59

60
                    let td4 = document.createElement('td');
61 62 63 64
                    td4.innerHTML =
                          '<a class="btn btn-primary" href="#"><i class="fas fa-edit fa-fw"></i> Editer</a>'
                        + '<a class="btn btn-danger" href="#"><i class="fas fa-trash fa-fw"></i> Supprimer</a>';

65
                    tr.appendChild(td4);
66 67 68
                    tbody.appendChild(tr);

                    console.log(json[i].firstname);
69 70
                }

Mat's avatar
Mat committed
71
            }
Mat's avatar
Mat committed
72 73 74 75
        };
        xhr.open('GET', ownersURL, true); // les données GET sont dans ownersURL
        xhr.send(null); // les données POST seraient ici
    }
76 77

    // dans la console JS, recharger la fonction suivante pour voir apparaitre le debug Ajax de Symfony
Mat's avatar
Mat committed
78 79
    reloadTableOwner();

80
</script>
Mat's avatar
Mat committed
81
{% endblock %}