templates/home/pageprotocole.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ protocole.titre }}{% endblock %}
  5. {% block stylesheets %}
  6.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
  7.     <link rel="stylesheet" href="{{ asset('assets/front/protocole.css') }}" />
  8. {% endblock %}
  10. {% block body %}
  12.     <div class="breadcrumb"><div class="container">
  13.         <a href="{{ path('home_page') }}">Accueil</a>&nbsp;        
  14.         {% if urls|length >0 %}
  15.             {% for url in urls %}
  16.                 {# {% set nom = "'" ~ url|lower ~ "'" %} #}
  17.                 {% set nom = url|lower %}
  18.                 /&nbsp;<a href="{{ path('categoriefiltrenom_page', {'type': 1, 'nom': nom }) }}">{{ url|capitalize  }}</a>&nbsp;
  19.             {% endfor %}
  20.         {% else %}
  21.             /&nbsp;<a href="{{ path('categoriefiltre_page', {'type': 1}) }}">Protocoles</a>&nbsp;
  22.         {% endif %}
  23.         /&nbsp;<a href="{{ path('protocole_page', { 'id' : protocole.id, 'nom': protocole.titre }) }}">{{ protocole.titre }}</a></div>
  24.     </div>
  26.     <div class="container-main pageprotocole">
  27.         <h1 class="titrevert-color margin-bottom-30">Protocole : {{ protocole.titre }}</h1> 
  28.         <br/>
  29.         <div class="protocole">
  31.             {# instruments #}  
  32.             <div>
  33.                 {% if protocole.urlvideo is not empty %}        
  34.                     <!-- https://www.youtube.com/watch?v=04JhVF_LLMY  width="560" height="315"   -->
  35.                     <!-- https://jsfiddle.net/thelevicole/5g6dbpx3/2/ https://www.youtube.com/watch?v=04JhVF_LLMY -->
  36.                     <div class="videocenter">           
  37.                         {% if 'youtube' in protocole.urlvideo %}  
  38.                             <iframe width="360px" height="259px" src="{{ protocole.urlvideo }}" frameborder="0" ></iframe>
  39.                         {% else %}
  40.                             <video width="360px" height="259px" src="{{ protocole.urlvideo }}" controls></video>
  41.                         {% endif %}
  42.                     </div>
  43.                 {% endif %}
  45.                 <form id="formMateriels" action="{{ path('addusermateriel_ajax', { 'id':0}) }}">
  46.                 <div class="instruments">
  47.                     <h2>Instruments nécessaires</h2>
  49.                     {% if protocole.materiels|length > 0 %}  
  50.                     
  51.                         {# Comptes des codes #}
  52.                         {% set nbP = 0 %}  
  53.                         {% set nbA = 0 %}  
  54.                         {% set nbM = 0 %} 
  55.                         {% for child in protocole.materiels|sort((a, b) => a.nom <=> b.nom)  %}
  56.                             {% if (child.codePA=='P' or child.codePA=='2') and child.archive==0 %}
  57.                                 {% set nbP = nbP+1 %}  
  58.                             {% elseif (child.codePA=='A' or child.codePA=='2') and child.archive==0 %}
  59.                                 {% set nbA = nbA+1 %}  
  60.                             {% elseif child.codePA=='M' and child.archive==0 %}
  61.                                 {% set nbM = nbM+1 %} 
  62.                             {% endif %}
  63.                         {% endfor %}    
  65.                         {# Plateau Praticien #}
  66.                         {% if nbP > 0 %}  
  67.                         <h3>Plateau praticien</h3>
  68.                         <ul>
  69.                             {% for child in protocole.materiels|sort((a, b) => a.nom <=> b.nom) %}
  70.                                 {% if (child.codePA=='P' or child.codePA=='2') and child.archive==0 %}
  71.                                     <li>
  72.                                         <input type="checkbox" class="choix matos" data-id="{{ child.id }}" 
  73.                                         {% if child.id in usermateriels %} checked {% endif %}
  74.                                         />
  75.                                         <a href="{{ path('materiel_page', {'id': child.id}) }}" target="_blank">{{ child.nom }}</a>
  76.                                         {% if child.kitmateriels|length >0 %} 
  77.                                         <ul class="kit">
  78.                                             {% for kit in child.kitmateriels|sort((a, b) => a.nom <=> b.nom)  %}
  79.                                             <li><i class="fas fa-chevron-right"></i>&nbsp;{{ kit.nom }}</li>
  80.                                             {% endfor %} 
  81.                                         </ul>
  82.                                         {% endif %}
  83.                                     </li>
  84.                                 {% endif %}
  85.                             {% endfor %}                
  86.                         </ul>
  87.                         <hr/>
  88.                         {% endif %}
  89.                         
  90.                         
  91.                         {# Plateau Assistante #}
  92.                         {% if nbA > 0 %}  
  93.                         <h3>Plateau assistante</h3>
  94.                         <ul>
  95.                             {% for child in protocole.materiels|sort((a, b) => a.nom <=> b.nom)  %}
  96.                                 {% if (child.codePA=='A' or child.codePA=='2') and child.archive==0 %}
  97.                                     <li>
  98.                                         <input type="checkbox" class="choix matos" data-id="{{ child.id }}" 
  99.                                         {% if child.id in usermateriels %} checked {% endif %}
  100.                                         />
  101.                                         <a href="{{ path('materiel_page', {'id': child.id}) }}" target="_blank">{{ child.nom }}</a>
  102.                                         {% if child.kitmateriels|length >0 %} 
  103.                                         <ul class="kit">
  104.                                             {% for kit in child.kitmateriels|sort((a, b) => a.nom <=> b.nom)  %}
  105.                                             <li><i class="fas fa-chevron-right"></i>&nbsp;{{ kit.nom }}</li>
  106.                                             {% endfor %} 
  107.                                         </ul>
  108.                                         {% endif %}
  109.                                     </li>
  110.                                 {% endif %}
  111.                             {% endfor %}                
  112.                         </ul>
  113.                         <hr/>
  114.                         {% endif %}
  115.                         
  117.                         {# Equipement #}
  118.                         {% if nbM > 0 %}  
  119.                         <h3>Equipement</h3>
  120.                         <ul>
  121.                             {% for child in protocole.materiels|sort((a, b) => a.nom <=> b.nom)  %}
  122.                                 {% if child.codePA=='M' and child.archive==0 %}
  123.                                     <input type="checkbox" class="choix matos" data-id="{{ child.id }}" 
  124.                                     {% if child.id in usermateriels %} checked {% endif %}
  125.                                     />
  126.                                     <li><a href="{{ path('materiel_page', {'id': child.id}) }}" target="_blank">{{ child.nom }}</a></li>
  127.                                 {% endif %}
  128.                             {% endfor %}                
  129.                         </ul>
  130.                         <hr/>
  131.                         {% endif %}
  132.                         
  134.                         {% if protocole.materiels|length > 0 %}  
  135.                             <div class="text-center">
  136.                             <button class="bleuclair" >Ajouter à ma sélection</button>   
  137.                             <p style="font-size:12px; font-style:italic; margin-top:10px;">
  138.                             Les instruments sélectionnés sont accessibles <br/>
  139.                             depuis la page de <a href="{{ path('infoscompte_page') }}" style="font-size:12px">votre compte</a>
  140.                             </p>         
  141.                             </div>                    
  142.                         {% endif %}
  144.                     {% else %} 
  145.                     <p><i>Pas d'instrument</i></p>
  146.                     {% endif %} 
  147.                 </div>
  148.                 </form>
  150.                 {% if protocole.protocoleinstrimgs|length > 0 %}   
  151.                 {% set indeximg = 1 %}
  152.                 <div class="btn-images">                    
  153.                     {% for instrimg in protocole.protocoleinstrimgs %}       
  154.                         {% if indeximg < 10  %}   
  155.                             <div><img src="{{ asset('download/') }}{{ instrimg.image.urlfichier }}" title="{{ instrimg.image.legende }}"
  156.                                     id="img{{ instrimg.image.id }}" onclick="clickImage( {{ instrimg.image.id }}, false)" /> </div>
  157.                             {% set indeximg = indeximg +1 %}
  158.                         {% endif %}
  159.                     {% endfor %}                     
  160.                 </div>
  161.                 {% endif %}
  162.             </div>
  164.             {# protocole #}
  165.             <div class="deroule">
  166.                 {# <h2>{{ protocole.titre }}</h2> #}
  167.                 <div class="grid">   
  168.                  {# photos #}
  169.                     {% if protocolephotos|length > 0 %}  
  170.                     <div class="photos">
  172.                         {% for child in protocolephotos %}
  173.                             <div><img src="{{ asset('download/') }}{{ child.image.urlfichier }}" id="img{{ child.image.id }}" onclick="clickImage({{ child.image.id }})" /></div>
  174.                             <p class="legend" id="legend{{ child.image.id }}" >{{ child.image.legende }}</p>
  175.                         {% endfor %}
  176.                     
  177.                     </div>
  178.                     {% endif %}
  179.                     {# deroulé  #}
  180.                     <div class="deroule-protocole">
  181.                         <h2>Le protocole</h2>
  182.                         {{ protocole.protocole|raw }}
  184.                         {% if is_granted('ROLE_USER') %} 
  185.                         {% if isFavori == true %}
  186.                             <form id="formMateriels" action="{{ path('removeuserprotocole_ajax', {'id': protocole.id }) }}" method="post">
  187.                             <button class="clair small" id="addFavori">Retirer de mes favoris <i class="fas fa-star" style="color:#FDD46A"></i></button>
  188.                             </form>
  189.                             <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>
  190.                         {% else %}
  191.                             <form id="formMateriels" action="{{ path('adduserprotocole_ajax', {'id': protocole.id }) }}" method="post">
  192.                             <button class="clair small" id="addFavori" >Ajouter à mes favoris <i class="far fa-star"></i></button>
  193.                             </form>
  194.                         {% endif %}
  195.                         {% endif %}
  196.                     </div>     
  197.                 </div>
  198.             </div>
  199.         
  200.         </div>
  201.     </div>
  203.     {# actes associés, administration et information  #} 
  204.     <section class="sectiononglets">       
  205.     <div class="container pageprotocole">
  206.         <div class="onglets">
  207.             <div class="ongletsbuttons">
  208.                 <button class="btnlinks active" onclick="openOnglet(event, 'administration')">Astuces</button>
  209.                 <button class="btnlinks" onclick="openOnglet(event, 'actesassocies')">Actes associés</button>
  210.                 <button class="btnlinks" onclick="openOnglet(event, 'information')">Informations</button>
  211.             </div>
  212.             <div>
  213.             <div id="administration" class="ongletcontent active">
  214.                     <div>
  215.                         <div class="padding-30">{{ protocole.administration|raw }}</div>
  216.                     </div>                   
  217.                 </div> 
  219.                 <div id="actesassocies" class="ongletcontent ">
  220.                     <div>
  221.                        <div class="padding-0-30"> 
  222.                        {% if protocole.categoriesassocies|length > 0 %}  
  223.                         <h3 class="text-left margin-bottom-0 padding-0 margin-top-30">Catégories associées</h3>
  224.                         <ul>
  225.                             {% for child in protocole.categoriesassocies %}
  226.                                 <li>
  227.                                     <a href="{{ path('categoriefiltre_page', {'type': 1, 'code':child.id}) }}">{{ child.titre }}</a>
  228.                                   
  229.                                 </li>
  230.                             {% endfor %}                
  231.                         </ul>
  232.                         {% endif %}
  233.                         {% if protocole.actesassocies|length > 0 %}  
  234.                         <h3 class="text-left margin-bottom-0 padding-0 margin-top-30">Protocoles associés</h3>
  235.                         <ul>
  236.                             {% for child in protocole.actesassocies %}
  237.                                 <li>
  238.                                     <a href="{{ path('protocole_page', {'id':child.id, 'nom':child.titre}) }}">{{ child.titre }}</a>
  239.                                     {% if child.resume|length >0 %} <p>{{ child.resume }}</p>{% endif %}
  240.                                 </li>
  241.                             {% endfor %}                
  242.                         </ul>
  243.                         {% endif %}
  244.                        </div>
  245.                        <br/>
  246.                     </div>                    
  247.                 </div>              
  249.                 <div id="information" class="ongletcontent">
  250.                     <div>
  251.                         <div class="padding-30">{{ protocole.information|raw }}</div>
  252.                     </div>                    
  253.                 </div>   
  254.             </div>                  
  255.         </div>
  256.     </div>
  257.     </section>
  259.     <!-- Commentaire -->
  260.     <section class="commentaires" style="background-image: url('{{ asset('assets/img/comments-cover.jpg') }}');">  
  261.         <div class="container">
  262.             <h2>Commentaires</h2>
  264.             {% for commentaire in commentaires %}
  265.                 <div class="commentaire">
  266.                     <p class="dateuser">Le {{ commentaire.datepubli|date('d/m/Y') }} par {{ commentaire.auteur.prenom }} {{ commentaire.auteur.nom }}</p>
  267.                     <p class="comment">{{ commentaire.comment }}</p>
  268.                 </div>
  269.             {% else %}
  270.                 <p class="nocomment">Aucun commentaire</p>
  271.             {% endfor %}
  273.             {% if is_granted('ROLE_USER') and app.user.isVerified %} 
  274.                 <div class="newcommentaire">
  275.                 {{ form_start(form) }}
  276.                     {{ form_widget(form) }}
  277.                     <button class="btn-send">{{ button_label|default('Envoyer') }}</button>
  278.                 {{ form_end(form) }}
  279.                 </div>
  280.             {% endif %}
  281.         </div>
  282.     </section>
  284.     <!-- la fenêtre popup modale -->
  285.     <div id="myModal" class="modal">
  286.     <div class="modal-content">
  287.         <span class="close" id="modalClose">&times;</span>
  288.         <img id="bigimage" />
  289.         <p id="biglegend"></p>
  290.     </div>
  291.     </div>
  292.    
  293. {% endblock %}
  295. {% block javascripts %}
  296.     <script>
  298.         //gestion des onglets
  299.         function openOnglet(evt, cityName) {
  301.             let i, tabcontent, tablinks;
  302.             tabcontent = document.getElementsByClassName("ongletcontent");
  303.             for (i = 0; i < tabcontent.length; i++) {
  304.                 tabcontent[i].className = tabcontent[i].className.replace(" active", "");
  305.             }
  306.             tablinks = document.getElementsByClassName("btnlinks");
  307.             for (i = 0; i < tablinks.length; i++) {
  308.                 tablinks[i].className = tablinks[i].className.replace(" active", "");
  309.                 
  310.             }
  311.             document.getElementById(cityName).className += " active";
  312.             evt.currentTarget.className += " active";
  313.         }
  315.         //ajout des matériel en favori
  316.         let formMateriels = document.getElementById("formMateriels");
  317.         formMateriels.addEventListener("submit", function(e) {
  318.             e.preventDefault(); 
  320.             //url d'ajout du materiel
  321.             let url=formMateriels.action;  //console.log(url );
  322.             
  323.             //parcourt la liste des materiels
  324.             let inputs = formMateriels.getElementsByClassName("matos");
  325.             for(let i = 0; i < inputs.length; i++) {
  326.                 if(inputs[i].checked == true) {
  327.                     
  328.                     console.log(url + inputs[i].dataset.id );
  329.                     fetch( url + inputs[i].dataset.id );
  331.                 }
  332.             }
  333.         });
  336.         //ouverture de la fenetre modale sur clic de l'image
  337.         let modal = document.getElementById("myModal");
  339.         function clickImage(id, aveclegend=true) { 
  340.             //recup de l'image mis en data
  341.             let image = document.getElementById('img'+id).src;  
  342.             let legend = "";
  343.             if(aveclegend) {
  344.                 legend = document.getElementById('legend'+id).textContent; 
  345.             }
  346.             else {
  347.                 legend = document.getElementById('img'+id).title; 
  348.             }
  349.             document.getElementById('bigimage').src = image;           
  350.             document.getElementById('biglegend').textContent = legend;  
  351.             modal.style.display = "block";
  352.         }
  355.         // Fermeture de la fenêtre modale
  356.         document.getElementById('modalClose').onclick = function() {
  357.             modal.style.display = "none";
  358.         }
  359.         window.onclick = function(event) {
  360.             if (event.target == modal) {
  361.                 modal.style.display = "none";
  362.             }
  363.         }
  364.     
  365.     </script> 
  366. {% endblock %}