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

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


Mat's avatar
Mat committed
7
{% block body %}
Mat's avatar
Mat committed
8 9 10 11
    {{ block('breadcrumb') }}

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

Mat's avatar
hop  
Mat committed
12 13 14
    <p>
        <i>Remarque: Le tableau qui suit est un fragment AJAX, qui interroge APIBundle</i>
    </p>
Mat's avatar
Mat committed
15

Mat's avatar
Mat committed
16 17 18 19 20 21 22 23 24 25 26 27
    <table id="table-owners">
        <thead>
            <tr>
                <th>Nom</th>
                <th>Prénom</th>
                <th>Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
28 29 30 31 32
{% endblock %}

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

33
    // L'URL de l'API
34
    let ownersURL = '{{ path('api_owner_read') }}';
35 36

    // Le tableau
37 38 39
    let table = document.querySelector("table#table-owners");
    let tbody = table.querySelector("tbody");

40 41
    //console.log(ownersURL);
    //console.log(table);
Mat's avatar
Mat committed
42

43
    // La fonction AJAX
Mat's avatar
Mat committed
44 45 46 47
    function reloadTableOwner()
    {
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
48 49 50

            //console.log(this);

Mat's avatar
Mat committed
51 52
            if (this.readyState === 4
                && (this.status === 200 || this.status === 0)) {
53

Mat's avatar
Mat committed
54
                let json = JSON.parse(this.responseText);
55 56 57 58

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

60 61 62
                    let td1 = document.createElement('td');
                    td1.textContent = json[i].firstname;
                    tr.appendChild(td1);
63

64 65 66
                    let td2 = document.createElement('td');
                    td2.textContent = json[i].lastname;
                    tr.appendChild(td2);
67

68 69 70
                    let td3 = document.createElement('td');
                    td3.textContent = json[i].created_at;
                    tr.appendChild(td3);
71

72
                    let td4 = document.createElement('td');
73 74 75 76
                    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>';

77
                    tr.appendChild(td4);
78 79 80
                    tbody.appendChild(tr);

                    console.log(json[i].firstname);
81 82
                }

Mat's avatar
Mat committed
83
            }
Mat's avatar
Mat committed
84 85 86 87
        };
        xhr.open('GET', ownersURL, true); // les données GET sont dans ownersURL
        xhr.send(null); // les données POST seraient ici
    }
88 89

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

92
</script>
Mat's avatar
Mat committed
93
{% endblock %}