changement des boutons vu/pas vu

src/AppBundle/Resources/public/assets/suivifilms.js

@@ -20,6 +20,34 @@ function ecouterSuivi(classBouton, texteUn, iconeEtatUn, texteDeux, iconeEtatDeu
                 },
                 complete: function () {
 
+                }
+            })
+        })
+    })
+}
+
+function ecouterVu(classBouton, couleurVu, couleurPasVu, couleurNeutre, chemin) {
+    $('.'+classBouton).each(function() {
+        $(this).click(function() {
+            let $icone = $(this).children();
+            let contenu = $(this).attr('data-content');
+            $.ajax({
+                type: 'POST',
+                url: chemin,
+                data: 'id_film=' + contenu,
+                success: function (data) {
+                    console.log(data);
+                    if ($icone.attr('class') === couleurNeutre) {
+                        $icone.attr('class', couleurPasVu);
+                        $icone.next().attr('class', couleurNeutre);
+                    } else {
+                        $icone.attr('class', couleurNeutre);
+                        $icone.next().attr('class', couleurVu);
+                    }
+                    return;
+                },
+                complete: function () {
+
                 }
             })
         })

src/AppBundle/Resources/views/security/liste.html.twig

@@ -22,8 +22,6 @@
                 <td>
                     {%  if user != app.user %}<a href="{{ path('admin_deluser', {'id': user.id})  }}"><i class="fas fa-trash", style="color:Tomato;"></i></a>{%  endif %}
                     <a href="{{ path('admin_edituser', {'id': user.id})  }}"><i class="fas fa-edit", style="color:DodgerBlue;"></i></a>
-
-
                 </td>
             </tr>
         {% endfor %}

src/AppBundle/Resources/views/videotheque/liste.html.twig

@@ -36,10 +36,15 @@
 			</td>
 			<td>
                 {%  if film.usersWhoSeen.contains(app.user) %}
-					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>
+					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i></a>
+					{#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>#}
                 {%  else %}
-					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>
+					<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i></a>
+                    {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>#}
                 {%  endif %}
+					{#<a href="#" class="boutonTest" data-content="{{ film.id }}"><li class="badge badge-secondary">Pas vu</li><li class="badge badge-success">Vu</li></a>#}
+
+
 			</td>
 			<td>{%  if film.authered is defined %}{{ film.authered.username }}{% endif %}</td>
 			<td><a href="{{ path('videotheque_voirfilm', {'id': film.id}) }}">{{ film.titre }}</a></td>
@@ -68,7 +73,8 @@
 	<script>
         $(document).ready(function() {
                 ecouterSuivi('boutonVoir', '', 'fas fa-star', '', 'far fa-star', '{{ path('maliste_modifier_a_voir') }}');
-                ecouterSuivi('boutonVu'	 , 'Vu', 'badge badge-success' , 'Pas vu', 'badge badge-secondary' , '{{ path('maliste_modifier_vus') }}');
+                //ecouterSuivi('boutonVu'	 , 'Vu', 'badge badge-success' , 'Pas vu', 'badge badge-secondary' , '{{ path('maliste_modifier_vus') }}');
+                ecouterVu('boutonVu', 'badge badge-success', 'badge badge-danger', 'badge badge-secondary' ,'{{ path('maliste_modifier_vus') }}');
         });
 	</script>
 {%  endblock %}

src/AppBundle/Resources/views/videotheque/voirfilm.html.twig

@@ -9,10 +9,12 @@
     {%  endif %}
     {{ film.titre }}
     {% if film.usersWhoSeen.contains(app.user) %}
-        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>
-    {% else %}
-        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>
-    {% endif %}
+        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i></a>
+        {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-success">Vu</i></a>#}
+    {%  else %}
+        <a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i></a>
+        {#<a href="#" class="boutonVu" data-content="{{ film.id }}"><i class="badge badge-secondary">Pas vu</i></a>#}
+    {%  endif %}
 {% endblock %}
 
 {%  block body %}
@@ -76,7 +78,9 @@
     <script>
         $(document).ready(function() {
             ecouterSuivi('boutonVoir', '', 'fas fa-star', '', 'far fa-star', '{{ path('maliste_modifier_a_voir') }}');
-            ecouterSuivi('boutonVu'	 , 'Vu', 'badge badge-success' , 'Pas vu', 'badge badge-secondary' , '{{ path('maliste_modifier_vus') }}');
+            //ecouterSuivi('boutonVu'	 , 'Vu', 'badge badge-success' , 'Pas vu', 'badge badge-secondary' , '{{ path('maliste_modifier_vus') }}');
+            ecouterVu('boutonVu', 'badge badge-success', 'badge badge-danger', 'badge badge-secondary' ,'{{ path('maliste_modifier_vus') }}');
+
         });
     </script>
 {%  endblock %}