Ajout du bouton de suivi dans la vue film

src/AppBundle/Form/CommentaireType.php

@@ -26,7 +26,9 @@ class CommentaireType extends AbstractType
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
 	    $builder
-            ->add('contenu', TextareaType::class)
+            ->add('contenu', TextareaType::class, array(
+                'label' => false
+            ))
 
             /*->add('note', RangeType::class, array (
                 'required'  => false,
@@ -35,7 +37,11 @@ class CommentaireType extends AbstractType
                     'max'   => 5
                 )
             ))*/
-		    ->add('save', SubmitType::class, array('label' => 'Enregistrer'));
+		    ->add('save', SubmitType::class, array(
+		        'label' => 'Enregistrer',
+                'attr'=>array(
+                    'class'  =>  'btn-primary'
+                )));
     }
     
     /**

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

@@ -0,0 +1,26 @@
+
+function ecouterSuivi(chemin) {
+    $('.boutonVoir').each(function() {
+        $(this).click(function() {
+            let $icone = $(this).children('i');
+            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') === "fas fa-star") {
+                        $icone.attr('class', "far fa-star");
+                    } else {
+                        $icone.attr('class', "fas fa-star");
+                    }
+                    return;
+                },
+                complete: function () {
+
+                }
+            })
+        })
+    })
+}

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

@@ -39,8 +39,6 @@
 			{% endif %}
 			</td>
 			<td>{{ film.annee | date('Y') }}</td>
-			{#<td>{{ film.commentaire }}</td>"#}
-			{#<td>{{ film.note }}</td>#}
 			<td>
 				{% if is_granted('ROLE_ADMIN') %}<a href="{{ path('videotheque_supprimer', {'id': film.id})  }}"><i class="fas fa-trash", style="color:Tomato;"></i></a>{% endif %}
 				<a href="{{ path('videotheque_modifier', {'id': film.id})  }}"><i class="fas fa-edit", style="color:DodgerBlue;"></i></a>
@@ -52,31 +50,8 @@
 {% endblock %}
 
 {% block javascripts %}
+	<script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
 	<script>
-		$(document).ready(function () {
-			$('.boutonVoir').each(function() {
-			    $(this).click(function() {
-			        let $icone = $(this).children('i');
-                    let contenu = $(this).attr('data-content');
-                    $.ajax({
-                        type: 'POST',
-                        url: "{{ path('maliste_modifier') }}",
-                        data: 'id_film=' + contenu,
-                        success: function (data) {
-                            console.log(data);
-                            if ($icone.attr('class') === "fas fa-star") {
-                                $icone.attr('class', "far fa-star");
-							} else {
-                                $icone.attr('class', "fas fa-star");
-							}
-                            return;
-                        },
-                        complete: function () {
-
-                        }
-                    })
-                })
-			})
-        })
+        $(document).ready(ecouterSuivi('{{ path('maliste_modifier') }}'));
 	</script>
 {%  endblock %}

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

@@ -1,18 +1,37 @@
 {% extends "@App/videotheque/base.html.twig" %}
 
 {% block title %}Fiche film{% endblock %}
-{% block titre %}{{ film.titre }}{% endblock %}
+{% block titre %}
+    {%  if film.usersWantToView.contains(app.user) %}
+        <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="fas fa-star"></i></a>
+    {%  else %}
+        <a href="#" class="boutonVoir" data-content="{{ film.id }}"><i class="far fa-star"></i></a>
+    {%  endif %}
+    {{ film.titre }}
+{% endblock %}
 
 {%  block body %}
     <div class="row">
         <div class="col">
-            <p><strong>Année</strong> : {{ film.annee | date('Y') }}</p>
-            <p><strong>Réalisateur(s)</strong></p>
-            <ul>
-            {% for realisateur in film.realisateurs %}
-                <li>{{ realisateur.nomComplet }}</li>
-            {% endfor %}
-            </ul>
+            <div class="card">
+                <div class="card-body">
+                    <div class="container-fluid">
+                        <div class="row">
+                            <div class="col">
+                                <p><strong>Réalisateur(s)</strong></p>
+                                <ul class="list-group">
+                                {% for realisateur in film.realisateurs %}
+                                    <li class="list-group-item">{{ realisateur.nomComplet }}</li>
+                                {% endfor %}
+                                </ul>
+                            </div>
+                            <div class="col">
+                                <p><strong>Année</strong> : {{ film.annee | date('Y') }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <p><strong>Suivi par</strong></p>
             <ul>
                 {% for user in film.usersWantToView %}
@@ -24,11 +43,20 @@
         </div>
         <div class="col">
             <h2>Commentaires</h2>
-            {% for commentaire in commentaires %}
-                <p><strong>Posté par {{ commentaire.user.username }}</strong></p>
-                <p>{{ commentaire.contenu }}</p>
-                <hr />
-            {% endfor %}
+            <div class="list-group">
+                {% for commentaire in commentaires %}
+                    <div class="list-group-item">
+                        <h5 class="mb-1"><strong>Posté par {{ commentaire.user.username }}</strong></h5>
+                        <p class="mb-1">{{ commentaire.contenu }}</p>
+                    </div>
+                {% endfor %}
+            </div>
         </div>
     </div>
+{% endblock %}
+{% block javascripts %}
+    <script src="{{ asset('bundles/app/assets/suivifilms.js') }}"></script>
+    <script>
+        $(document).ready(ecouterSuivi('{{ path('maliste_modifier') }}'));
+    </script>
 {% endblock %}