templates/website/workshop/ateliers.html.twig line 1

Open in your IDE?
  1. {% extends "website/base.html.twig" %}
  3. {% block title %}Ateliers{% endblock %}
  7. {% block body %}
  9. <div class="container workregister">
  10.     <div class="row">
  11.         <div class="col">
  12.             <div class="workregister__inner">
  13.                 <h2>Comment m'inscrire ?</h2>
  14.                 <p>Si vous souhaitez vous inscrire à l’un de nos ateliers, vous pouvez nous contacter par :</p>
  15.                 <ul>
  16.                     <li><img src="website/Assets/dot-li.svg" alt="Point de liste"><a href="{{ path('contact')}}">Via notre formulaire de contact</a></li>
  17.                     <li><img src="website/Assets/dot-li.svg" alt="Point de liste">Mail : contact@lamargueriteasso.fr</li>
  18.                     <li><img src="website/Assets/dot-li.svg" alt="Point de liste">Tel : 05 55 01 35 94</li>
  19.                 </ul>
  20.                 <p>Vous pouvez également <a href="/contact">demander un entretien individuel santé.</a></p>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </div>
  27. <div class="container searchwork">
  28.     <div class="row">
  29.         <div class="col">
  30.             <div class="searchwork__inner">
  31.                 <select name="category" id="searchwork_cat">
  32.                     <option value="" disabled selected hidden>Choisir une catégorie</option>
  33.                     {% for cat in workshopCat %}
  34.                     <option value="{{cat.id}}">{{cat.name}}</option>
  35.                     {% endfor %}
  37.                 </select>
  38.                 <section>
  39.                     <input type="text" id="searchwork_bar" placeholder="Rechercher un atelier">
  40.                     <button><img src="website/Assets/loupe.svg" alt="icone de loupe"></button>
  41.                 </section>
  43.                 <button><a {{latestFilename}}>Télécharger le calendrier</a></button>
  46.                 {# TODO problème, c'est pas bon car l'heure actuelle n'égale pas l'heure du dernier fichier #}
  47.             </div>
  48.         </div>
  49.     </div>
  50. </div>
  53. <div class="container workcontainer">
  54.     <div class="row">
  56.         {% for work in workshop %}
  59.         <div class="col-12 col-lg-12 col-xl-4">
  60.             <div data-w-color="{{work.workshopCategory.color}}" class="workcard">
  61.                 <section class="workcard__header">
  63.                     {# Affichage de l'image de l'atelier s'il y en a une, sinon affichage de la photo de profil du premier animateur #}
  65.                     {% if work.image is not empty %}
  66.                         <img class="BORDER_color_change" src="/assets/images/{{work.image.id}}.{{work.image.extension}}" alt="Photo de profil">
  67.                     {% else %}
  68.                         {% if work.contributors is not empty %}
  69.                             {% set firstContributor = work.contributors|first %}
  70.                             {% if firstContributor.profilePic is null %}
  71.                                 <div class="BG_color_change BORDER_color_change"></div>
  72.                             {% else %}
  73.                                 <img class="BORDER_color_change" src="/assets/images/{{firstContributor.profilePic.id}}.{{firstContributor.profilePic.extension}}" alt="Photo de profil">
  74.                             {% endif %}
  75.                         {% endif %}
  76.                     {% endif %}
  77.                     <ul>
  78.                         <li><h2 class="TEXT_color_change">{{work.name}}</h2></li>
  82.                         {% if work.contributors is not empty %}
  84.                             {# Pour chaque animateur de l'événement : 
  85.                                 - S'il ne possède pas de structure, on affiche son nom
  86.                                 - S'il possède une structure :
  87.                                     - Si l'animateur est en showOrganisation, on affiche la structure
  88.                                     - Sinon, on affiche la structure et le nom de l'animateur
  89.                             #}
  91.                             {% for cont in work.contributors %}
  92.                                 {% if cont.organisation is null %}
  93.                                     <li><h2>{{ cont.firstname }} {{ cont.lastname }}</h2></li>
  94.                                 {% else %}
  95.                                     
  96.                                         {% if cont.showOrganisation == true %}
  97.                                             <li><h2>{{ cont.organisation }}</h2></li>
  98.                                         {% else %}
  99.                                             <li>
  100.                                                 <h2>{{ cont.organisation }}</h2>
  101.                                                 <h3 class="workcard__header__names">{{ cont.firstname }} {{ cont.lastname }}</h3>
  102.                                             </li>
  103.                                         {% endif %}
  104.                                     
  105.                                 {% endif %}
  106.                             {% endfor %}
  107.                         {% endif %}
  108.                     </ul>
  109.                     <h3 class="BG_color_change workcard__header__tag">{{work.workshopCategory.name}}</h3>
  110.                 </section>
  111.         
  112.                 <section class="workcard__activity BORDER_color_change">
  113.                     <h3 class="TEXT_color_change">{{work.name}} ?</h3>
  114.                     <p>{{work.infoWorkshop}}</p>
  115.                 </section>
  116.         
  117.                 <section class="workcard__content">
  118.                     <h3 class="TEXT_color_change">Activités des scéances :</h3>
  119.                     <p>{{work.activityWorkshop}}</p>
  120.                 </section>
  121.         
  122.                 <section class="workcard__info BG_color_change">
  123.                     <h3>Lieux, Jours & Heures</h3>
  124.                     <p>{{work.place}} <br> {{work.day}} <br> {{work.hours}} </p>
  125.                 </section>
  126.             </div>
  127.         </div>
  129.         {% endfor %}
  131.     </div>
  132. </div>
  136. {{ include("website/workshop/workshop_card_template.html.twig") }}
  142. {% endblock %}
  147. {% block javascripts %}
  148. <script>
  149. $(document).ready(function() {
  152.     // Change the color of the workshop card depending on the category
  154.     function colorWorkshopCard() {
  155.         $('.workcard').each(function() {
  157.             // Get the color
  158.             var color = $(this).data('w-color');
  160.             // For each element in the card, change the color
  161.             $(this).find('.BG_color_change').css('background-color', color);
  162.             $(this).find('.TEXT_color_change').css('color', color);
  163.             $(this).find('.BORDER_color_change').css('border-color', color);
  164.         });
  165.     }
  167.     colorWorkshopCard();
  170.     $('#searchwork_cat').change(function() {
  172.         // Get the id of the category
  173.         var category = $(this).val();
  175.         $.ajax({
  176.             url: '/api/search/workshop/category?id=' + category, 
  177.             method: 'GET',
  178.             success: function(data) {
  180.                 // Replace the cards and color them
  181.                 replaceWorkshopCards(data);
  182.                 colorWorkshopCard();
  183.             }
  184.         });
  185.     });
  187.     
  188.     $('#searchwork_bar').next('button').click(function(e) {
  189.         e.preventDefault();
  191.         // Get the value of the searchbar
  192.         var searchTerm = $('#searchwork_bar').val();
  194.         $.ajax({
  195.             url: '/api/search/workshop/content?value=' + searchTerm, 
  196.             method: 'GET',
  197.             success: function(data) {
  199.                 // Replace the cards and color them
  200.                 replaceWorkshopCards(data);
  201.                 colorWorkshopCard();
  202.             }
  203.         });
  204.     });
  206.     $('#searchwork_bar').keypress(function(e) {
  208.         if(e.which == 13) {
  209.             // If enter key is pressed
  210.             e.preventDefault();
  212.             // Get the value of the searchbar
  213.             var searchTerm = $('#searchwork_bar').val();
  215.             $.ajax({
  216.                 url: '/search/workshop/content?value=' + searchTerm, 
  217.                 method: 'GET',
  218.                 success: function(data) {
  220.                     // Replace the cards and color them
  221.                     replaceWorkshopCards(data);
  222.                     colorWorkshopCard();
  223.                 }
  224.             });
  225.         }
  226.     });
  228. });
  231. // Create a list of all the Workshop cards
  233. function replaceWorkshopCards(workshops) {
  234.     
  236.     let listHTML = "";
  238.     // For each table of data, create a card and add it to the list
  239.     workshops.forEach(workshop => {
  240.         listHTML +=createWorkshopCard(workshop);
  241.     });
  243.     // Replace the container content with all the cards created
  244.     $('.workcontainer .row').html(listHTML);
  245. }
  248. // Create a card using the workshop data
  249.     function createWorkshopCard(workshop) {
  250.         // Get the template
  251.         var template_workshop_card = $('#workshop_card_template').html();
  253.         // Get the first contributor's image
  254.         var firstContributorImage = workshop.contributors.length > 0 ? workshop.contributors[0].image : null;
  256.         // Build the list of contributors
  257.         var contributorsList = workshop.contributors.map(contributor => {
  258.             if (contributor.organisation == null) {
  259.                 return `<h2>${contributor.firstname} ${contributor.lastname}</h2>`;
  260.             } else {
  261.                 if (contributor.showOrganisation) {
  262.                     console.log(1);
  263.                     return `<h2>${contributor.organisation}</h2>`;
  264.                 }
  265.                 else {
  266.                     console.log(2);
  268.                     return `<h2>${contributor.organisation}</h2> <h3 class="workcard__header__names">${contributor.firstname} ${contributor.lastname}</h3>`;
  269.                 }
  270.                 
  271.                 return null;
  272.             }
  273.         }).filter(contributor => contributor !== null).join(', ');
  275.         // Replace the placeholders with the data
  276.         var listHTML = template_workshop_card
  277.             .replace(/%name%/g, workshop.name)
  278.             .replace(/%contributors%/g, contributorsList)
  279.             .replace(/%cont_image%/g, firstContributorImage ? `${firstContributorImage}` : 'default-image-path.jpg')
  280.             .replace(/%cat_name%/g, workshop.cat_name)
  281.             .replace(/%cat_color%/g, workshop.cat_color)
  282.             .replace(/%info%/g, workshop.info)
  283.             .replace(/%activity%/g, workshop.activity)
  284.             .replace(/%place%/g, workshop.place)
  285.             .replace(/%day%/g, workshop.day)
  286.             .replace(/%hours%/g, workshop.hours);
  288.         return listHTML;
  289.     }
  290. </script>
  291. {% endblock %}