templates/home/index.html.twig line 1

Open in your IDE?
  1. {# templates/blog/index.html.twig #}
  2. {% extends "base.html.twig" %}
  4. {% block stylesheets %}
  5.     {{ encore_entry_link_tags('app') }}
  6. {% endblock %}
  8. {% block title %}Accueil |
  9.     {{ parent() }}
  10. {% endblock %}
  13. {% block content %}
  14.     <div class="screen">
  16.         <div class="entete">
  17.             <div class="text">
  18.                 <h1>LUNE</h1>
  19.                 <h3>portaiL des Usages du Numérique Éducatif</h3>
  20.                 <p class="accroche">LUNE est un portail qui intègre de l'intelligence artificielle
  21.                  pour faciliter l'accès au personnel de l'éducation nationale à
  22.                  des ressources pédagogiques. Grâce à LUNE, trouvez depuis
  23.                  un seul endroit vos ressources pédagogiques pour les usages du 
  24.                  numérique.</p>
  25.             </div>
  26.             <div class="img_logo">
  27.                 <img class="img_text" src="{{ asset('build/images/ICONE-Turquoise.png') }}"/>
  28.             </div>
  29.         </div>
  30.     
  32.         <!--Telescope-->
  34.         <div class="telescope">
  35.             <h2><img class="img_titre" src="{{ asset('build/images/TELESCOPE_blue.png') }}"/>Le téléscope</h2>
  36.             <p>Vous cherchez quelque chose ? Le télécsope est là pour vous aider ! Pensez, écrivez et laissez le chercher! Le téléscope vous emmènera découvrir de nombreuses
  37.             ressources issues de sites internets d'intérêts. Vous pouvez également vous laisser guider dans votre recherhe en sélectionnant des thématiques.</p>
  38.         
  40.             <div class="ContainerTelescope">
  41.                 <div class="SousTitre-Telescope">Je recherche:</div>
  43.                 <div class="ChoixContainer">
  44.                     {% set i = 1 %}
  45.                     {% for chx in choix %}
  46.                         <button class="Btn_second ChoixTelescope" onclick="rechercheGuideeChx('{{i}}')">{{chx.nom}}</button>
  47.                         {% set i = i + 1 %}
  48.                     {% endfor %}
  49.                 </div>
  51.                 {% set j = 2 %}
  52.                 <div class="RequeteContainer">
  53.                     {% for chx in choix %}
  54.                         <div style="inline" class='Requete'>
  55.                             {% for req in requete %}
  56.                                 {% if req.choix == chx %}
  57.                                     <button class="Btn_second RequeteTelescope" onclick="rechercheGuideeReq('{{req.nom}}', '{{j}}')">{{req.nom}}</button>
  58.                                 {% endif %}
  59.                             {% endfor %}
  60.                         </div>
  61.                         {% set j = j + 1 %}
  62.                     {% endfor %}
  63.                 </div>
  65.                 <form method="get" action="/search">
  66.                     <div class="RechercheContainer">
  67.                         <input class="form-control je-recherche-une-sq" id="searchbar" type="text" style="" placeholder="Recherche" name="q" required>
  68.                     </div>
  69.                     <div class="BtnRechercheContainer">
  70.                         <button class="Btn_primary BtnRecherche" type="submit">Lancer la Recherche</button>
  71.                     </div>
  72.                 </form>
  73.             </div>
  74.         </div>
  76.             
  78.         <div class="recommandationContainer">
  79.             <h2 class="parcours-recommand h2"><img class="img_titre" src="{{ asset('build/images/TRAJECTOIRE_blue.png') }}"/>Trajectoires recommandées!</h2>
  80.             <p class="lorem-ipsum-dolor-si">
  81.                 Ces parcours de navigation vous sont proposés sur la base de votre utilisation de LUNE. N'hésitez pas à les suivres. Ils pourraient vous intéresser! Ils se construisent 
  82.                 au fur et à mesure de vos recherches et de votre navigation. Grâce à ces trajectoires, visitez des ressources auxquelles nous n'auriez pas pensés !
  83.             </p>
  84.             {{ render(controller('App\\Controller\\RecoController::index')) }}
  85.         </div>
  88.         <h2>Les dernières découvertes!</h2>
  89.         <p>
  90.             Toutes les nouvelles ressources sont disponibles ici ! Voyagez à travers ces découvertes pour découvertes pour découvrir des nouveautés !
  91.         </p>
  92.         <div id="newArticlesContainer"></div>
  94.         {% if is_mobile() %}
  95.             <div style="display: flex; justify-content: center; margin-top: 1em">
  96.                 <a class="prev" onclick="plusArticle(-1)">&#10094;</a>
  97.                 <a class="next" onclick="plusArticle(1)">&#10095;</a>
  98.             </div>
  99.         {% endif %}
  101.         <div id="verif_container" class="popup">
  102.             <div class="popup-box">
  103.                 <h5 class="popup-title">Voulez-vous vraiment supprimer ?</h5>
  104.                 <p class="popup-content">Il ne sera pas possible de revenir en arrière.</p>
  105.                 <!--initialisation du bouton supprimer et retour pour annuler l'opération-->
  106.                 <div class="popup-bottom">
  107.                     <button id="supr" type="button" class="popup-button">
  108.                         <strong>Supprimer</strong>
  109.                     </button>
  110.                     <button id="retour" type="button" class="popup-button" data-bs-dismiss="modal">retour</button>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </div>
  115.     {% include "footer/index.html.twig" %}
  117.     {% include "includes/volet.html.twig" %}
  119.     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  120.     <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  121.     <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  122. <script>
  123.     let articleIndex = 0;
  125.     function plusArticle(n) {
  126.         showArticle(articleIndex += n);
  127.     }
  129.     function showArticle(n) {
  130.         let articles = $('#newArticlesContainer .article');
  131.         if (n >= articles.length) {
  132.             articleIndex = 0
  133.         }
  134.         if (n < 0) {
  135.             articleIndex = articles.length - 1
  136.         }
  137.         for (i = 0; i < articles.length; i ++) {
  138.             articles[i].style.display = "none";
  139.         }
  140.         articles[articleIndex].style.display = "block";
  141.     }
  142. </script>
  144. <script type="module">
  145.     import ui_article from "/assets/js/ui/ui_article.js";
  146.     import gestionVue from "/assets/js/gestionVue.js";
  147.     import gestionSignal from "/assets/js/gestionSignal.js";
  148.     import gestionIndicateur from "/assets/js/gestion_indicateurs.js";
  149.     import article from "/assets/js/article.js";
  150.     import favoris from "/assets/js/favoris.js";
  151.     import affichage from "/assets/js/affichage.js";
  153.     $(document).ready(function () {
  154.     loadNewArticles();
  156.     // ------------ Functions
  159.     function loadNewArticles() {
  161.         $('#newArticlesContainer').append(affichage.preloader())
  163.         $.ajax({
  164.             url: '/search/ajaxNews',
  165.             type: 'POST',
  166.             dataType: 'json',
  167.             async: true,
  169.             success: function (data, status) {
  170.                 showNewArticles(data);
  171.             },
  172.             error: function (xhr, textStatus, errorThrown) {
  173.                 showErrorMessage();
  174.             }
  175.         });
  176.     }
  178.     function showNewArticles(data) {
  179.     let articlesContainer = $('#newArticlesContainer');
  180.     let string = '';
  181.     let connecte = false 
  182.     {% if app.user != null %}
  183.     connecte = true
  184.     {% endif %}
  185.     let favs = {{ favs|serialize(format='json') }}
  186.     {% if is_mobile() %}
  187.     for (let i = 0; i < 3; i++) {
  188.     if (i > 0) {
  189.     string += '<div id="new-article" class="article" style="display: none">';
  190.     } else {
  191.     string += '<div id="new-article" class="article">';
  192.     } data[i]['date'] = data[i]['date']['date'];
  193.     string += ui_article.creerCarteArticle(data[i], connecte, favs);
  194.     string += '</div>'
  195.     }
  196.     {% else %}
  197.     for (let i = 0; i < 3; i++) {
  198.     data[i]['date'] = data[i]['date']['date'];
  199.     string += '<div class="article">';
  200.     string += ui_article.creerCarteArticle(data[i], connecte, favs);
  201.     string += '</div>'
  202.     }
  203.     {% endif %}
  205.     // remove loading
  206.     $('#loading').remove();
  208.     // add articles
  209.     articlesContainer.append(string);
  211.     article.init();
  212.     favoris.initAddFavoriteEvents();
  213.     gestionVue.initialisation();
  214.     gestionSignal.initialisation();
  215.     gestionIndicateur.initialisation();
  216.     }
  218.     function showErrorMessage() {
  219.     $('#loading').remove();
  221.     $('#newArticlesContainer').append(`<div class="center-align" id="loading" style="margin-bottom: 1.5em">
  222.                                     Erreur lors du chargement
  223.                                     <br/>
  224.                                     <a class="btn" style="margin-top: 0.5em">Réessayer</a>
  225.                                 </div>`);
  226.     $('#loading').on('click', event => {
  227.     $('#loading').remove();
  228.     loadNewArticles();
  229.     })
  230.     }
  233.     });
  234. </script>
  236. <script>
  238.     function CacherRequete(cls) {
  239.         let block = document.getElementsByClassName(cls);
  240.         let i = 0;
  241.         for (requete in block) {
  242.             if (block[i] != undefined) {
  243.                 block[i].style.display = "none";
  244.             }
  245.             i = i + 1;
  246.         }
  247.     }
  249.     function AfficherRequete(cls, id) {
  250.         let block = document.getElementsByClassName(cls);
  251.         let i = id;
  252.         i=i-1;
  253.         if (block[i] != undefined) {
  254.             block[i].style.display = "inline";
  255.         }
  256.     }
  258.     function rechercheGuideeChx(id1) {
  259.         CacherRequete('Requete');
  260.         AfficherRequete('Requete',id1);
  261.     }
  263.     function rechercheGuideeReq(msg, id1) {
  264.         document.getElementById("searchbar").value = document.getElementById("searchbar").value + " " + msg;
  265.         CacherRequete('Requete');
  266.         AfficherRequete('Requete',id1);
  267.     }
  269.     function reinitRechercheGuidee() {
  270.         document.getElementById("searchbar").value = "";
  271.         CacherRequete('Requete');
  272.         AfficherRequete('Requete', '1');
  273.     } 
  274.     </script>
  275. {% endblock %}