templates/commentaires/_form.html.twig line 1

  1. {{ form_start(form) }}
  3. <div class="w-full mt-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
  4.     <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
  5.         <label for="comment" class="sr-only text-left">Votre commentaire</label>
  6.         {{ form_widget(form) }}
  7.     </div>
  8.     <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
  9.         <button type="submit" class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-prim-700 rounded-lg focus:ring-4 focus:ring-prim-200 dark:focus:ring-prim-900 hover:bg-prim-800">
  10.             Poster
  11.         </button>
  12.         <div class="flex items-center space-x-1">
  13.             {% for starValue in 1..5 %}
  14.                 <svg class="w-4 h-4 text-gray-300 star" data-value="{{ starValue }}" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewbox="0 0 22 20">
  15.                     <path d="M20.924 7.625a1.523 1.523 0 0 0-1.238-1.044l-5.051-.734-2.259-4.577a1.534 1.534 0 0 0-2.752 0L7.365 5.847l-5.051.734A1.535 1.535 0 0 0 1.463 9.2l3.656 3.563-.863 5.031a1.532 1.532 0 0 0 2.226 1.616L11 17.033l4.518 2.375a1.534 1.534 0 0 0 2.226-1.617l-.863-5.03L20.537 9.2a1.523 1.523 0 0 0 .387-1.575Z"/>
  16.                 </svg>
  17.             {% endfor %}
  18.         </div>
  19.     </div>
  20. </div>
  22. <input type="hidden" value="" id="rating" name="rating">
  23. {{ form_end(form) }}
  25. <script>
  26.     const stars = document.querySelectorAll('.star');
  27. let selectedStars = 0;
  29. stars.forEach(star => {
  30. star.addEventListener('click', () => {
  31. selectedStars = parseInt(star.getAttribute('data-value'));
  32. updateStars();
  33. });
  34. });
  36. function updateStars() {
  37. stars.forEach((star, index) => {
  38. if (index < selectedStars) {
  39. star.classList.add('text-yellow-300');
  40. star.classList.remove('text-gray-300');
  41. } else {
  42. star.classList.add('text-gray-300');
  43. star.classList.remove('text-yellow-300');
  44. }
  45. });
  46. calculateRating();
  47. }
  49. let nbRating = 0;
  50. const calculateRating = () => {
  51. nbRating = 0;
  52. stars.forEach(star => {
  53. console.log(star.classList.contains('text-yellow-300'));
  55. if (star.classList.contains('text-yellow-300')) {
  56. nbRating++;
  57. }
  58. document.querySelector('#rating').value = nbRating;
  59. })
  61. }
  62. </script>