changement d'icone vu/pas vu

assets/js/app.js

@@ -22,7 +22,7 @@ $(document).ready(function() {
 
         $('.add-another-collection-widget').addCollection();
 
-        $('[data-fonction="follow"]').follow();
+        $('[data-fonction="switch"]').switchEtat();
         $('[data-fonction="seen"]').seen();
 
         $('[data-toggle="notify"]').each(function() {

assets/js/suivifilms2.js

@@ -1,12 +1,12 @@
 (function ($) {
-    $.fn.follow = function () {
+    $.fn.switchEtat = function () {
         this.each(function() {
             $(this).click(function(e) {
                 e.preventDefault();
                 let $icone = $(this).children('i');
                 let contenu = $(this).data('content');
-                let iconeEtatUn = $(this).data('icactif');
-                let iconeEtatDeux = $(this).data('icinactif');
+                let iconeEtatUn = $(this).data('icone-actif');
+                let iconeEtatDeux = $(this).data('icone-inactif');
                 let chemin = $(this).data('path');
                 $.ajax({
                     type: 'POST',
@@ -23,40 +23,6 @@
                     },
                     complete: function () {
 
-                    }
-                })
-            })
-        })
-    }
-})(jQuery);
-
-(function ($) {
-    $.fn.seen = function () {
-        this.each(function() {
-            $(this).click(function(e) {
-                e.preventDefault();
-                let $icone = $(this).children('i');
-                let contenu = $(this).data('content');
-                let couleurNeutre = $(this).data('neutre');
-                let couleurVu = $(this).data('vu');
-                let couleurPasVu = $(this).data('pasvu');
-                let chemin = $(this).data('path');
-                $.ajax({
-                    type: 'POST',
-                    url: chemin,
-                    data: 'id_film=' + contenu,
-                    success: function (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 () {
-
                     }
                 })
             })

templates/videotheque/liste.html.twig

@@ -37,9 +37,9 @@
 					{% set follow_icone = "fa fa-star-o fa-lg" %}
 					{% set follow_texte = "Ajouter ce film à votre liste à voir" %}
 				{% endif %}
-				<a href="#" data-fonction="follow"
-							data-icactif="fa fa-star fa-lg"
-							data-icinactif="fa fa-star-o fa-lg"
+				<a href="#" data-fonction="switch"
+							data-icone-actif="fa fa-star fa-lg"
+							data-icone-inactif="fa fa-star-o fa-lg"
 							data-path="{{ path('maliste_modifier_a_voir') }}"
 							data-toggle="tooltip"
 							title="{{ follow_texte }}"
@@ -49,16 +49,15 @@
 			</td>
 			<td>
                 {%  if app.user.haveSeen(film) %}
-					{% set vu_icone = '<i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i>' %}
+					{% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
 				{% else %}
-					{% set vu_icone = '<i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i>' %}
+					{% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-danger"></i>' %}
 				{% endif %}				
-				<a href="#" data-fonction="seen"
+				<a href="#" data-fonction="switch"
 							data-path="{{ path('maliste_modifier_vus') }}"
 							data-content="{{ film.id }}"
-							data-neutre = "badge badge-secondary"
-							data-vu = "badge badge-success"
-							data-pasvu = "badge badge-danger">
+							data-icone-actif = "fa fa-eye fa-lg text-success"
+							data-icone-inactif = "fa fa-eye-slash fa-lg text-danger">
 					{{ vu_icone | raw }}
 				</a>
 			</td>

templates/videotheque/voirfilm.html.twig

@@ -19,16 +19,15 @@
         <i class="{{ follow_icone }}"></i></a>
     {{ film.titre }}
     {% if film.usersWhoSeen.contains(app.user) %}
-        {% set vu_icone = '<i class="badge badge-secondary">Pas vu</i><i class="badge badge-success">Vu</i>' %}
+        {% set vu_icone = '<i class="fa fa-eye fa-lg text-success"></i>' %}
     {% else %}
-        {% set vu_icone = '<i class="badge badge-danger">Pas vu</i><i class="badge badge-secondary">Vu</i>' %}
+        {% set vu_icone = '<i class="fa fa-eye-slash fa-lg text-danger"></i>' %}
     {% endif %}				
-    <a href="#" data-fonction="seen"
+    <a href="#" data-fonction="switch"
                 data-path="{{ path('maliste_modifier_vus') }}"
                 data-content="{{ film.id }}"
-                data-neutre = "badge badge-secondary"
-                data-vu = "badge badge-success"
-                data-pasvu = "badge badge-danger">
+                data-icone-actif = "fa fa-eye fa-lg text-success"
+                data-icone-inactif = "fa fa-eye-slash fa-lg text-danger">
         {{ vu_icone | raw }}
     </a>