mainDisplay.html.twig 3.91 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% extends "@Techno/layout.html.twig" %}

{% block title %}
    Image.API en AJAX
{% endblock %}

{% block sidebar %}

    <h3>IMAGE</h3>

    <a href="javascript: void(0);" class="btn btn-create">
        <i class="fas fa-plus fa-fw"></i> Nouvelle image
    </a><br>
    <a href="javascript: void(0);" class="btn btn-reload">
        <i class="fas fa-sync-alt fa-fw"></i> Rafraichir
    </a>

    <div class="hidden" style="margin-top: 1em;">
19
20
21
22
        {{ form_start(formImage) }}
        {{ form_errors(formImage) }}
        {{ form_rest(formImage) }}
        {{ form_end(formImage) }}
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    </div>

    <h3>AUTEURS</h3>

    <a href="{{ path('techno_owner_main_display') }}">
        <i class="fas fa-table fa-fw"></i> Table des auteurs
    </a>



    <h3>Liens</h3>
    <ul>
        <li>
            <a href="https://gist.github.com/EtienneR/2f3ab345df502bd3d13e" target="_blank">
            <i class="fas fa-link fa-fw"></i> Ajax RESTful Mémo</a>
        </li>
        <li>
            <a href="https://www.getpostman.com/">
            <i class="fas fa-link fa-fw"></i> Postman</a>
        </li>
        <li>
            <a href="https://github.com/FriendsOfSymfony/FOSJsRoutingBundle">
            <i class="fas fa-link fa-fw"></i> FOSjsRouting</a>
        </li>
    </ul>

{% endblock %}

{% block content %}
    {{ block('breadcrumb') }}

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

    <p>
        <i>Formulaire et table en AJAX, requêtes vers APIBundle</i>
    </p>

60
61
    <div id="grid-images">
    </div>
62
63
64
65
66
67

{% endblock %}

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

68
69
70
    let grid = document.querySelector('div#grid-images');
    let imagesURL = Routing.generate('api_image_read');

71
72
73
74
    function reloadGridImage()
    {
    grid.innerHTML = null;

75
76
77
78
79
80
81
82
83
84
85
86
87
88
    AJAX('GET', imagesURL, function(request)
    {
        let json = JSON.parse(request.responseText);
        for (let i = 0; i < json.length; i++)
        {
            let div = document.createElement('div');
            div.classList.add('image');

            let img = document.createElement('img');
            img.setAttribute('src', json[i].path);
            img.setAttribute('title', json[i].name);
            img.setAttribute('alt', json[i].name);
            div.appendChild(img);

89
90
91
92
93
94
95
96
            let modify = document.createElement('div');
            modify.classList.add('modify');

            let owner = document.createElement('div');
            owner.classList.add('owner');
            owner.innerHTML = json[i].owner.firstname + ' ' + json[i].owner.lastname;
            div.appendChild(owner);

97

98
            /*
99
100
             *  Editer une ligne du tableau (update),
             *  charge les données dans le formulaire
101
             */
102

103
104
105
106
107
108
109
110
111
112
            let editBtn = document.createElement('button');
            editBtn.classList.add('btn', 'btn-primary');
            editBtn.dataset.imageId = json[i].id;
            editBtn.innerHTML = '<i class="fas fa-edit fa-fw"></i> Editer';
            editBtn.addEventListener('click', function(e)
            {

            });
            modify.appendChild(editBtn);

113

114
            /*
115
             *  Effacer une ligne du tableau (delete)
116
             */
117

118
119
120
121
122
123
124
125
126
127
128
            let deleteBtn = document.createElement('button');
            deleteBtn.classList.add('btn', 'btn-danger');
            deleteBtn.dataset.imageId = json[i].id;
            deleteBtn.innerHTML = '<i class="fas fa-trash fa-fw"></i> Supprimer';
            deleteBtn.addEventListener('click', function(e)
            {

            });
            modify.appendChild(deleteBtn);

            div.appendChild(modify);
129
130
131
            grid.appendChild(div);
        }
    });
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
    }

    reloadGridImage();


    /*
     *  Recharge le tableau (read)
     */

    let reloadBtns = document.querySelectorAll('a.btn-reload');
    reloadBtns.forEach(function(reloadBtn)
    {
        reloadBtn.addEventListener('dblclick', function(e)
        {
            reloadGridImage();
        });
    });
149

150
151
152

</script>
{% endblock %}