templates/home/pagemateriel.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ materiel.nom }}{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  7.     <link rel="stylesheet" href="{{ asset('assets/front/swiper.css') }}" />
  8.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />  
  9.     <link rel="stylesheet" href="{{ asset('assets/front/protocole.css') }}" />
  10.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  11. {% endblock %}
  13. {% block body %}
  15.     <div class="breadcrumb"><div class="container">
  16.         <a href="{{ path('home_page') }}">Accueil</a>&nbsp;        
  17.         {% if urls|length >0 %}
  18.             {% for url in urls %}
  19.                 {% set nom = "'" ~ url|lower ~ "'" %}
  20.                 /&nbsp;<a href="{{ path('categoriefiltrenom_page', {'type': 2, 'nom': nom }) }}">{{ url|capitalize  }}</a>&nbsp;
  21.             {% endfor %}
  22.         {% else %}
  23.             /&nbsp;<a href="{{ path('categoriefiltre_page', {'type': 2}) }}">Materiels</a>&nbsp;
  24.         {% endif %}
  25.         /&nbsp;<a href="{{ path('materiel_page', { 'id' : materiel.id }) }}">{{ materiel.nom }}</a></div>
  26.     </div>
  28.     <div class="container-main pagemateriel">
  30.         {# Titre #}
  31.         {% if materiel.codeSC == 'S' %}
  32.             <h1>Instrument : {{ materiel.nom }}</h1> 
  33.         {% elseif materiel.codeSC == 'C' %}
  34.                 <h1>Consommable : {{ materiel.nom }}</h1> 
  35.          {% elseif materiel.codeSC == 'E' %}
  36.                 <h1>Equipement : {{ materiel.nom }}</h1> 
  37.         {% else %}
  38.             <h1>{{ materiel.nom }}</h1> 
  39.         {% endif %}
  40.         <br/>
  42.         <div class="materiel">
  43.             {# image à gauche ou en haut #}
  44.             <div class="images">
  45.                 <div class="container-image">
  46.                     <div>
  47.                         <img id="laphoto" onclick="clickImage()" 
  48.                             {% if materielphotos|length > 0 %} src="{{ asset('download/') }}{{ materielphotos[0].image.urlfichier }}"
  49.                             {% else %} src="{{ asset('assets/img/materiel.jpg') }}" {% endif %} />   
  50.                     </div>
  51.                 </div>
  52.                 {% if materielphotos|length > 1 %} 
  53.                 <div class="btn-images">                    
  54.                     {% for photo in materielphotos %}          
  55.                         <div><img src="{{ asset('download/') }}{{ photo.image.urlfichier }}" onclick="affichephoto(this)" /> </div>
  56.                     {% endfor %}                     
  57.                 </div>
  58.                 {% endif %}
  59.             </div>
  61.             <div class="materiel-description flex-vertical-spac-ebetween">
  62.                 <div class="text-normal">
  63.                     {# <h2 class="materiel-h2">{{ materiel.nom }}</h2> #}
  64.                     {{ materiel.description|raw }}   
  66.                     {# kit ? #}
  67.                     {% if materiel.kitmateriels|length >0 %} 
  68.                     <h4 class="text-left margin-left-30">Contenu du kit</h4>
  69.                     <ul class="kitLarge">
  70.                         {% for kit in materiel.kitmateriels %}
  71.                         <li><a href="{{ path('materiel_page', { 'id' : kit.id }) }}"><i class="fas fa-chevron-right"></i>&nbsp;{{ kit.nom }}</a></li>
  72.                         {% endfor %} 
  73.                     </ul>
  74.                     {% endif %}
  75.                 </div>
  76.                 
  77.                 <div class="materiel-categories">
  78.                     <span class="gray-light  text-big">Catégories:</span>
  79.                     <span class="gray-medium text-big">                        
  80.                     {% for child in materiel.categories %}    
  81.                         <a href="{{ path('categoriefiltre_page', {'type': 2, 'code': child.id}) }}">{{ child.titre }}</a>{% if loop.last %}{% else %}, {% endif %}
  82.                     {% endfor %}   
  83.                 </div>        
  85.                 {# {% if materiel.protocoles|length > 0%}
  86.                     <div class="materiel-categories">
  87.                     <span class="gray-light  text-big">Protocoles associées:</span>
  88.                     <span class="gray-medium text-big">                        
  89.                     {% for child in materiel.protocoles %}    
  90.                         <a href="{{ path('protocole_page', {'id': child.id}) }}">{{ child.titre }}</a>{% if loop.last %}{% else %}, {% endif %}
  91.                     {% endfor %}    
  92.                     </span>
  93.                     </div>  
  94.                 {% endif %}                                          #}
  96.                 {% if is_granted('ROLE_USER') %} 
  97.                 <div class="btnFavori" >
  98.                     {% if isFavori == true %}
  99.                         <form id="formMateriels" action="{{ path('removeusermateriel_ajax', {'id': materiel.id }) }}" method="post">
  100.                         <button class="clair small" id="addFavori">Retirer de mes favoris <i class="fas fa-star" style="color:#FDD46A"></i></button>
  101.                         </form>
  102.                         <i style="font-size:12px">Les favoris sont accessibles depuis la page de <a href="{{ path('infoscompte_page') }}" style="font-size:12px">votre compte</a></i>
  103.                     {% else %}
  104.                         <form id="formMateriels" action="{{ path('addusermateriel', {'id': materiel.id }) }}" method="post">
  105.                         <button class="clair small" id="addFavori" >Ajouter à mes favoris <i class="far fa-star"></i></button>
  106.                         </form>
  107.                     {% endif %}
  108.                 </div> 
  109.                 {% endif %}                       
  110.             </div>
  111.         </div>        
  113.         {# Onglets #}
  114.         <br/>
  115.         <div class="tabs">
  116.             <div class="tab">
  117.                 <button class="tablinks active" onclick="openTab(event, 'description')">Conditionnement</button>
  118.                 <button class="tablinks" onclick="openTab(event, 'tarif')">Tarifs</button>
  119.                  <button class="tablinks" onclick="openTab(event, 'protos')">Protocoles</button>
  120.             </div>
  121.             <div class="tabcontents pagemateriel">
  122.                 <div id="description" class="tabcontent active">
  123.                     <h3 style="margin-top:10px;">Conditionnement</h3>
  124.                     {{ materiel.presentation|raw }}     
  125.                 </div>
  127.                  <div id="protos" class="tabcontent">
  128.                     <h3 style="margin-top:10px;">Protocoles associés</h3>
  129.                      <div class="vignette">   
  130.                         {% for child in materiel.protocoles %}    
  131.                             {# <a href="{{ path('protocole_page', {'id': child.id}) }}">{{ child.titre }}</a><br/> #}                                        
  132.                             <a href="{{ path('protocole_page', {'id': child.id, 'nom': child.titre}) }}"> 
  133.                                 {% if child.protocolephotos is null or child.protocolephotos|length <1 %}
  134.                                     <img src="{{ asset('assets/img/protocole.jpg') }}" />                                    
  135.                                 {% else %}
  137.                                     <img src="{{ asset('download/') }}{{ child.PhotoDefault }}" />
  138.                                 {% endif %}    
  139.                                 <h3>{{ child.titre }}</h3> 
  140.                             </a>                       
  141.                         {% endfor %} 
  142.                      </div>
  143.                 </div>   
  145.                 <div id="tarif" class="tabcontent">
  146.                     <h3 style="margin-top:10px;">Tarifs</h3>
  147.                     {{ materiel.tarif }}
  148.                 </div> 
  149.             </div>                  
  150.         </div>
  152.         {# Produits associés #}
  153.         <br/><br/>
  154.         {% include 'home/prodassocies.html.twig' %}        
  155.     </div>
  157.     <!-- Commentaire -->
  158.     <section class="commentaires" style="background-image: url('{{ asset('assets/img/comments-cover.jpg') }}');">  
  159.     <div class="container">
  160.             <h2>Commentaires</h2>
  162.             {% for commentaire in commentaires %}
  163.                 <div class="commentaire">
  164.                     <p class="dateuser">Le {{ commentaire.datepubli|date('d/m/Y') }} par {{ commentaire.auteur.prenom }} {{ commentaire.auteur.nom }}</p>
  165.                     <p class="comment">{{ commentaire.comment }}</p>
  166.                 </div>
  167.             {% else %}
  168.                 <p class="nocomment">Aucun commentaire</p>
  169.             {% endfor %}
  171.             {% if is_granted('ROLE_USER') and app.user.isVerified %} 
  172.                 <div class="newcommentaire">
  173.                 {{ form_start(form) }}
  174.                     {{ form_widget(form) }}
  175.                     <button class="btn-send">{{ button_label|default('Envoyer') }}</button>
  176.                 {{ form_end(form) }}
  177.                 </div>
  178.             {% endif %}
  179.         </div>
  180.     </section>
  182.     <!-- la fenêtre popup modale -->
  183.     <div id="myModal" class="modal">
  184.     <div class="modal-content">
  185.         <span class="close" id="modalClose">&times;</span>
  186.         <img id="bigimage" />
  187.     </div>
  188.     </div>
  190. {% endblock %}
  192. {% block javascripts %}
  193.     <script>
  195.     function openTab(evt, cityName) {
  197.         let i, tabcontent, tablinks;
  198.         tabcontent = document.getElementsByClassName("tabcontent");
  199.         for (i = 0; i < tabcontent.length; i++) {
  200.             tabcontent[i].className = tabcontent[i].className.replace(" active", "");
  201.         }
  202.         tablinks = document.getElementsByClassName("tablinks");
  203.         for (i = 0; i < tablinks.length; i++) {
  204.             tablinks[i].className = tablinks[i].className.replace(" active", "");
  205.             
  206.         }
  207.         document.getElementById(cityName).className += " active";
  208.         evt.currentTarget.className += " active";
  209.     }
  211.     //affichage de l'image dans le carré de sélection
  212.     function affichephoto(img) {
  213.         document.getElementById("laphoto").src = img.src;
  214.     }
  215.     
  216.     //ouverture de la fenetre modale sur clic de l'image
  217.     let modal = document.getElementById("myModal");
  219.     function clickImage() { 
  220.         //recup de l'image mis en data
  221.         let image = document.getElementById('laphoto').src;  
  222.         document.getElementById('bigimage').src = image;             
  223.         modal.style.display = "block";
  224.     }
  226.     // Fermeture de la fenêtre modale
  227.     document.getElementById('modalClose').onclick = function() {
  228.         modal.style.display = "none";
  229.     }
  230.     window.onclick = function(event) {
  231.         if (event.target == modal) {
  232.             modal.style.display = "none";
  233.         }
  234.     }
  235.     </script> 
  238.     <!-- Swiper JS -->
  239.     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  241.     <!-- Initialize Swiper du slider -->
  242.     <script>
  243.         var swiper = new Swiper(".mySwiper", {
  244.         speed: 600,
  245.         slidesPerView: 4,
  246.         parallax: true,
  247.         autoplay: {
  248.             delay: 2500,
  249.             disableOnInteraction: false,
  250.         },
  251.         pagination: {
  252.             el: ".swiper-pagination",
  253.             clickable: true,
  254.         },
  255.         navigation: {
  256.             nextEl: ".swiper-button-next",
  257.             prevEl: ".swiper-button-prev",
  258.         },
  259.         });
  260.     </script>
  262.     {# <!-- Initialize Swiper des protocoles -->
  263.     <script>
  264.       var swiper = new Swiper('.swiper', {
  265.         slidesPerView: 6,
  266.         spaceBetween: 10,
  267.         direction: 'horizontal',
  268.         navigation: {
  269.           nextEl: '.swiper-button-next',
  270.           prevEl: '.swiper-button-prev',
  271.         },
  272.         breakpoints: {
  273.            1300: {
  274.             slidesPerView: 6,
  275.             spaceBetween: 10,
  276.           },
  277.           1024: {
  278.             slidesPerView: 5,
  279.           },
  280.            768: {
  281.             slidesPerView: 4,
  282.           },
  283.           640: {
  284.             slidesPerView: 3,
  285.           },
  286.           480: {
  287.             slidesPerView: 2,
  288.             spaceBetween: 20,
  289.           },
  290.           100: {
  291.             slidesPerView: 1,
  292.             spaceBetween: 20, 
  293.           }, 
  294.         },
  295.       }); #}
  297.       /* function getDirection() {
  298.         var windowWidth = window.innerWidth;
  299.         var direction = window.innerWidth <= 760 ? 'vertical' : 'horizontal';
  301.         return direction;
  302.       } */
  303.     </script>
  305.  {% endblock %}