templates/website/news/actualites.html.twig line 1

Open in your IDE?
  1. {% extends "website/base.html.twig" %}
  3. {% block title %}Actualités{% endblock %}
  7. {% block body %}
  9.     
  10. <div class="container searchnews">
  11.     <div class="row">
  12.         <div class="col">
  13.             <div class="searchnews__inner">
  14.                 <input type="text" id="searchnews_bar" placeholder="Recherchez une actualité">
  15.                 <button id="searchnews_btn"><img src="website/Assets/loupe.svg" alt="icone de loupe"></button>
  16.             </div>
  17.         </div>
  18.     </div>
  19. </div>
  21. <div id="searchnews_container">
  22.     {% for new in news %}
  25.         <div class="container news">
  26.             <div class="row">
  27.                 <div class="col">
  28.                     <figure class="news__inner">
  29.                         <h3>{{ new.eventDate|date('d/m/Y') }}</h3>
  30.                         <section class="news__img">
  31.                             
  32.                             {% for img in new.images %}
  33.                                 <img src="/assets/images/{{img.id}}.{{img.extension}}" alt="image d'actualité">
  34.                             {% endfor %}
  35.                         </section>
  36.                         <figcaption>
  37.                             <img src="website/Assets/logo.png" alt="Logo de La Marguerite">
  38.                             <div class="news__content">
  39.                                 <h2>{{ new.title }}</h2>
  40.                                 <div>{{ new.body | raw}}</div>
  41.                             </div>
  42.                         </figcaption>
  43.                     </figure>
  44.                 </div>
  45.             </div>
  46.         </div>
  48.     {% endfor %}
  49. </div>
  53. {{ include("website/news/article_card_template.html.twig") }}
  56. {% endblock %}
  60. {% block javascripts %}
  61. <script>
  62.     
  63.     $('#searchnews_bar').next('button').click(function(e) {
  64.         e.preventDefault();
  67.         // Get the value of the searchbar
  68.         var searchTerm = $('#searchnews_bar').val();
  70.         $.ajax({
  71.             url: '/api/search/article/content?value=' + searchTerm, 
  72.             method: 'GET',
  73.             success: function(data) {
  75.                 // Replace the container with the new articles
  76.                 replaceArticleCards(data);
  77.             }
  78.         });
  79.     });
  81.     $('#searchnews_bar').keypress(function(e) {
  83.         if(e.which == 13) {
  84.             // If enter key is pressed
  85.             e.preventDefault();
  88.             // Get the value of the searchbar
  89.             var searchTerm = $('#searchnews_bar').val();
  91.             $.ajax({
  92.                 url: '/search/article/content?value=' + searchTerm, 
  93.                 method: 'GET',
  94.                 success: function(data) {
  96.                     // Replace the container with the new articles
  97.                     replaceArticleCards(data);
  98.                 }
  99.             });
  100.         }
  101.     });
  103.     function replaceArticleCards(articles) {
  104.         let listHTML = "";
  106.         // For each table of data, create a card and add it to the list
  107.         articles.forEach(article => {
  108.             listHTML +=createArticleCard(article);
  109.         });
  111.         // Replace the container content with all the cards created
  112.         $('#searchnews_container').html(listHTML);
  113.     }
  116.     function createArticleCard(article) {
  118.         // Get the templates of the card and the images
  119.         var template_article_card = $('#article_card_template').html();
  120.         var template_article_card_image = $('#article_card_image_template').html();
  122.         // Template the images
  123.         var imageHTML = "";
  124.         article.image.forEach(image => {
  125.             imageHTML += template_article_card_image.replace(/%image%/g, image.image);
  126.         });
  128.         // Format the date
  129.         var date = new Date(article.date.date);
  130.         var formattedDate = date.getDate().toString().padStart(2, '0') + '/' + (date.getMonth()+1).toString().padStart(2, '0') + '/' + date.getFullYear();
  132.         // Template the card
  133.         var listHTML=template_article_card.replace(/%title%/g, article.title).replace(/%body%/g, article.body).replace(/%date%/g, formattedDate).replace(/%image%/g, imageHTML);
  134.         return listHTML;
  136.     }
  137.     
  138. </script>
  139. {% endblock %}