templates/content/consultant/consultant_page.html.twig line 1

Open in your IDE?
  1. <section class="d-sm-none d-block" style="height: 80px;">
  3. </section>
  4. <section class="d-none d-sm-block">
  5.     {% for message in app.flashes("NeedCredit")%}
  6.     <div class="alert alert-danger alert-icon col-9 mx-auto border border-danger" role=" alert">
  7.         <div class="card col mx-auto card-icon ">
  8.             <button class="btn-close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
  9.             <div class="row no-gutters">
  10.                 <div class="col-auto card-icon-aside bg-danger">
  11.                    <i class="fas fa-euro-sign fa-2x text-white"></i>
  12.                 </div>
  13.                 <div class="col">
  14.                     <div class="card-body py-5">
  15.                         <h5 class="card-title">Credit Insufissant</h5>
  16.                         <p class="card-text">{{message}}<a href="https://demo.media-technologies.fr/tarifs">ici</a></p>
  17.                     </div>
  18.                 </div>
  19.             </div>
  20.         </div>
  21.     </div>
  22.     {% endfor %}
  24.     <h1 class="text-center text-uppercase mt-5 mb-3 ">Comment Contacter {{conseiller[0].userPseudo}} pour une
  25.         consultation de voyance ?</h1>
  28.     {% if app.user %}
  29.     <div class="col-lg-8 mx-auto mb-5 text-center">
  30.         <h4> Pour consulter {{conseiller[0].userPseudo}} penser à créditer votre compte</h4>
  31.         <br> <a href="{{path('app_tarifs')}}"> <button class="btn btn-primary mt-2"> Créditer votre compte </button>
  33.     </div>
  34.     {% else %}
  35.     <div class="col-lg-8 mx-auto mb-5 text-center">
  36.         <h4>Créer votre compte client dès maintenant, c'est gratuit et sans engagement.
  37.             Pour se faire, rien de plus simple, vous n'avez qu'a remplir le formulaire suivant. </h4>
  38.         <br> <a href="{{path('app_register')}}"> <button class="btn btn-primary mt-2"> Créer votre compte</button>
  40.     </div>
  41.     {% endif %}
  42.     <div class="container-xl col-sm-10  row mx-auto mt-4 mb-4">
  43.         <div class="col-sm-3 ">
  44.             <div class="card shadow">
  45.                 <h5 class="card-title text-center">{{conseiller[0].userPseudo}} - {{conseiller[0].userExtensionCode}}
  46.                 </h5>
  47.                 <img src="{{conseiller[0].photo}}" class="card-img-top" alt="...">
  49.                 <div class="card-body">
  50.                     {% if conseiller[0].note == 0 %}
  51.                     <p class="text-center  text-dark small ">Avis des membres
  52.                         <i class="bi bi-star"></i>
  53.                         <i class="bi bi-star"></i>
  54.                         <i class="bi bi-star"></i>
  55.                         <i class="bi bi-star"></i>
  56.                         <i class="bi bi-star"></i>
  57.                     </p>
  58.                     {% elseif conseiller[0].note == 0.5 %}
  59.                     <p class="text-center text-dark  small ">Avis des membres
  60.                         <i class="bi bi-star-half" style="color: #d78316;"></i>
  61.                         <i class="bi bi-star"></i>
  62.                         <i class="bi bi-star"></i>
  63.                         <i class="bi bi-star"></i>
  64.                         <i class="bi bi-star"></i>
  65.                     </p>
  66.                     {% elseif conseiller[0].note == 1 %}
  67.                     <p class="text-center text-dark  small ">Avis des membres
  68.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  69.                         <i class="bi bi-star"></i>
  70.                         <i class="bi bi-star"></i>
  71.                         <i class="bi bi-star"></i>
  72.                         <i class="bi bi-star"></i>
  73.                     </p>
  74.                     {% elseif conseiller[0].note == 1.5 %}
  75.                     <p class="text-center text-dark  small ">Avis des membres
  76.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  77.                         <i class="bi bi-star-half" style="color: #d78316;"></i>
  78.                         <i class="bi bi-star"></i>
  79.                         <i class="bi bi-star"></i>
  80.                         <i class="bi bi-star"></i>
  81.                     </p>
  82.                     {% elseif conseiller[0].note == 2 %}
  83.                     <p class="text-center text-dark  small ">Avis des membres
  84.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  85.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  86.                         <i class="bi bi-star"></i>
  87.                         <i class="bi bi-star"></i>
  88.                         <i class="bi bi-star"></i>
  89.                     </p>
  90.                     {% elseif conseiller[0].note == 2.5 %}
  91.                     <p class="text-center  text-dark small ">Avis des membres
  92.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  93.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  94.                         <i class="bi bi-star-half" style="color: #d78316;"></i>
  95.                         <i class="bi bi-star"></i>
  96.                         <i class="bi bi-star"></i>
  97.                     </p>
  98.                     {% elseif conseiller[0].note == 3 %}
  99.                     <p class="text-center  text-dark small ">Avis des membres
  100.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  101.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  102.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  103.                         <i class="bi bi-star"></i>
  104.                         <i class="bi bi-star"></i>
  105.                     </p>
  106.                     {% elseif conseiller[0].note == 3.5 %}
  107.                     <p class="text-center text-dark  small ">Avis des membres
  108.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  109.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  110.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  111.                         <i class="bi bi-star-half" style="color: #d78316;"></i>
  112.                         <i class="bi bi-star"></i>
  113.                     </p>
  114.                     {% elseif conseiller[0].note == 4 %}
  115.                     <p class="text-center  text-dark small ">Avis des membres
  116.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  117.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  118.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  119.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  120.                         <i class="bi bi-star"></i>
  121.                     </p>
  122.                     {% elseif conseiller[0].note == 4.5 %}
  123.                     <p class="text-center text-dark  small ">Avis des membres
  124.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  125.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  126.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  127.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  128.                         <i class="bi bi-star-half" style="color: #d78316;"></i>
  129.                     </p>
  130.                     {% elseif conseiller[0].note == 5 %}
  131.                     <p class="text-center  text-dark small ">Avis des membres
  132.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  133.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  134.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  135.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  136.                         <i class="bi bi-star-fill" style="color: #d78316;"></i>
  137.                     </p>
  138.                     {% endif %}
  140.                     {% if app.user %}
  141.                     <ul class="list-group list-group-flush">
  145.                         <button class="btn btn-primary shadow  mt-2"> <a href="{{path('app_userComment')}}"
  146.                                 class="text-white"><i class="bi bi-eye"></i> Voir mon avis</button></a>
  147.                         {% if conseiller[0].userChatOnline %}
  148.                         <button class="btn btn-primary shadow  mt-2"> <a
  149.                                 href="{{path('app_chat', {userId: conseiller[0].userId, userPseudoId: conseiller[0].userPseudoId })}}"
  150.                                 class="text-white"><i class="bi bi-chat-fill col-12"></i> Chat</button></a>
  151.                         {%else%}
  152.                         <button class="btn btn-dark shadow  mt-2"> <a href="#" class="text-white"><i
  153.                                     class="bi bi-chat-fill col-12"></i> Chat</button></a>
  154.                         {% endif %}
  156.                         <!-- <button class="btn btn-primary shadow  mt-2"> <i class="bi bi-camera-video-fill"></i>
  157.                             Visio</button> -->
  160.                         <button class="btn btn-primary shadow  mt-2"> <a
  161.                                 href="{{path('question_mail',  {id : conseiller[0].complementId})}}"
  162.                                 class="text-white"><i class="bi bi-envelope-fill col-12"></i> Question Mail </a>
  163.                         </button>
  164.                         <button class="btn btn-primary shadow mt-2"> <i class="bi bi-heart-fill"></i> Ajouter aux
  165.                             Favoris</button>
  166.                     </ul>
  167.                     {% else %}
  168.                     <ul class="list-group list-group-flush">
  169.                         <button class="btn btn-primary shadow  mt-2">
  170.                             <a href="{{path('app_login')}}" class="text-white">
  171.                                 <i class="bi bi-box-arrow-in-right"></i> connexion </a>
  172.                         </button>
  173.                         <button class="btn btn-primary shadow  mt-2">
  174.                             <a href="{{path('app_register')}}" class="text-white">
  175.                                 <i class="bi bi-book"></i> Inscription </a>
  176.                         </button>
  177.                     </ul>
  178.                     {% endif %}
  179.                 </div>
  181.             </div>
  182.         </div>
  183.         <div class="card col-lg-9 ">
  184.             <div class="card-header border-bottom ">
  185.                 <!-- Wizard navigation-->
  186.                 <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard " id="cardTab"
  187.                     role="tablist">
  188.                     <!-- Wizard navigation item 1-->
  189.                     <a class="nav-item nav-link active" id="profil-tab" href="#profil" data-bs-toggle="tab" role="tab"
  190.                         aria-controls="profil" aria-selected="true">
  191.                         <div class="wizard-step-icon"><i class="bi bi-person"></i></div>
  192.                         <div class="wizard-step-text">
  193.                             <div class="wizard-step-text-name">Profil</div>
  194.                         </div>
  195.                     </a>
  197.                     <!-- Wizard navigation item 2-->
  198.                     <a class="nav-item nav-link" id="avis-tab" href="#avis" data-bs-toggle="tab" role="tab"
  199.                         aria-controls="avis" aria-selected="true">
  200.                         <div class="wizard-step-icon"><i class="bi bi-book"></i></div>
  201.                         <div class="wizard-step-text">
  202.                             <div class="wizard-step-text-name">Appréciations</div>
  203.                         </div>
  204.                     </a>
  206.                     {% if app.user %}
  207.                     <!-- Wizard navigation item 3-->
  208.                     <a class="nav-item nav-link" id="eval-tab" href="#eval" data-bs-toggle="tab" role="tab"
  209.                         aria-controls="eval" aria-selected="true">
  210.                         <div class="wizard-step-icon"><i class="bi bi-pen-fill"></i></div>
  211.                         <div class="wizard-step-text ">
  212.                             <div class="wizard-step-text-name "> Laissez un avis</div>
  213.                         </div>
  214.                     </a>
  216.                     {% endif %}
  217.                 </div>
  218.             </div>
  219.             <div class="card-body ">
  220.                 <div class="tab-content" id="cardTabContent">
  221.                     <!-- Wizard tab pane item 1-->
  222.                     <div class="tab-pane  fade show active" id="profil" role="tabpanel" aria-labelledby="profil-tab">
  223.                         <div class="row justify-content-center ">
  224.                             {% if conseiller[0].prixParMinute == 0%}
  225.                             {%else%}
  226.                             <strong class="text-warning text-center mt-n-5">--* Consultation CB à
  227.                                 {{conseiller[0].prixParMinute}} €/mn *--</strong>
  228.                             {%endif%}
  229.                             <h2 class=" text-center">{{conseiller[0].titrePage}}</h2>
  230.                             <h4 class=" text-center">{{conseiller[0].metaDescription}}</h4>
  231.                             <p>{{conseiller[0].descriptionLongue|raw}}</p>
  232.                         </div>
  233.                     </div>
  234.                     <!-- Wizard tab pane item 2-->
  235.                     <div class="tab-pane py-5 py-xl-10 fade text-white" id="avis" role="tabpanel"
  236.                         aria-labelledby="avis-tab">
  237.                         {% for avis in conseillerAvis %}
  238.                         {% if avis is empty %}
  239.                         <div class="card shadow border-white bg-primary px-3 py-3 mt-2">
  240.                             <p>Ce conseiller n'a pas encore reçu d'appréciation</p>
  241.                         </div>
  242.                         {% else %}
  244.                         {% endif %}
  245.                         {% endfor %}
  246.                     </div>
  248.                     {% if app.user %}
  249.                     <div class="tab-pane py-5 py-xl-10 fade" id="eval" role="tabpanel" aria-labelledby="eval-tab">
  250.                         <div class="row justify-content-center text-white">
  251.                             <h4 class="">Soumission d'une appréciation client</h4>
  252.                             {{ form_start(avisForm) }}
  253.                             <div class="mb-3">
  254.                                 <!-- <label for="exampleFormControlTextarea1">Commentaire</label>
  255.                                 <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> -->
  256.                                 {{ form_row(avisForm.message , {
  257.                                     label: 'Commentaire'
  258.                                 }) }}
  259.                             </div>
  260.                             <div class="mb-3">
  261.                                 {{ form_row(avisForm.note , {
  262.                                     label: 'Note'
  263.                                 }) }}
  264.                             </div>
  265.                             <div>
  266.                                 {{ form_row(avisForm.envoyer , {
  267.                                     label: 'Evaluer'
  268.                                 }) }}
  269.                               
  270.                             </div>
  271.                             {{ form_end(avisForm) }}
  272.                         </div>
  273.                     </div>
  274.                     {% endif %}
  275.                 </div>
  276.             </div>
  277.         </div>
  279.     </div>
  281.     <div class="container-xl px-4 mt-4">
  282.         <div class="card mb-4">
  283.             <div class="card-header">Planning</div>
  284.             <div class="card-body">
  285.                 <div class="table-responsive h-100 ">
  287.                     <!-- <div class="container-fluid row mx-auto">
  288.                         <p class="col-6">Disponible <i class="bi bi-square-fill" style="color: #198754;"></i> </p>
  289.                         <p class="col-6">Indisponible : <i class="bi bi-square-fill" style="color: #6c757d;"></i></p>
  290.                     </div> -->
  291.                     <div id="{{planningFormat}}">
  292.                        
  293.                     </div>
  294.                     <!-- <table class="calendar table table-bordered centered  h-100">
  295.                         <thead class="table-light">
  296.                             <tr>
  297.                                 <th scope="col"></th>
  298.                                 {% for day in weekdaysShort %}
  299.                                 <th scope="col" class='text-small text-center'>{{day}}</th>
  300.                                 {% endfor %}
  301.                             </tr>
  302.                         </thead>
  303.                         <tbody>
  305.                             {% for i in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]%}
  306.                             <tr>
  307.                                 <th class="text-center text-small" scope="row">{{i}}:00</th>
  309.                                 {% for val in daysHoursShort[i] %}
  310.                                 </p>
  311.                                 {% if val == false %}
  312.                                 <td class="bg-gray-600"></td>
  314.                                 {% else %}
  315.                                 <td class="bg-green text-white text-small text-center"></td>
  317.                                 {% endif %}
  318.                                 {% endfor %}
  319.                             </tr>
  320.                             {% endfor %}
  321.                     </table> -->
  322.                 </div>
  324.             </div>
  325.         </div>
  327.     </div>
  328. </section>
  330. <section class="d-sm-none d-block">
  331.     <div class="col-12 ">
  332.         <div class="team-member ">
  334.             <div class=""> <img class="mx-auto rounded-circle mt-2 " src="{{conseiller[0].photo}}" alt="..."
  335.                     style="width: 150px; height: 150px;" /></div>
  336.             {% if conseiller[0].note == 0 %}
  337.             <p class="text-center  text-dark small ">Avis des membres
  338.                 <i class="bi bi-star"></i>
  339.                 <i class="bi bi-star"></i>
  340.                 <i class="bi bi-star"></i>
  341.                 <i class="bi bi-star"></i>
  342.                 <i class="bi bi-star"></i>
  343.             </p>
  344.             {% elseif conseiller[0].note == 0.5 %}
  345.             <p class="text-center text-dark  small ">Avis des membres
  346.                 <i class="bi bi-star-half" style="color: #d78316;"></i>
  347.                 <i class="bi bi-star"></i>
  348.                 <i class="bi bi-star"></i>
  349.                 <i class="bi bi-star"></i>
  350.                 <i class="bi bi-star"></i>
  351.             </p>
  352.             {% elseif conseiller[0].note == 1 %}
  353.             <p class="text-center text-dark  small ">Avis des membres
  354.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  355.                 <i class="bi bi-star"></i>
  356.                 <i class="bi bi-star"></i>
  357.                 <i class="bi bi-star"></i>
  358.                 <i class="bi bi-star"></i>
  359.             </p>
  360.             {% elseif conseiller[0].note == 1.5 %}
  361.             <p class="text-center text-dark  small ">Avis des membres
  362.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  363.                 <i class="bi bi-star-half" style="color: #d78316;"></i>
  364.                 <i class="bi bi-star"></i>
  365.                 <i class="bi bi-star"></i>
  366.                 <i class="bi bi-star"></i>
  367.             </p>
  368.             {% elseif conseiller[0].note == 2 %}
  369.             <p class="text-center text-dark  small ">Avis des membres
  370.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  371.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  372.                 <i class="bi bi-star"></i>
  373.                 <i class="bi bi-star"></i>
  374.                 <i class="bi bi-star"></i>
  375.             </p>
  376.             {% elseif conseiller[0].note == 2.5 %}
  377.             <p class="text-center  text-dark small ">Avis des membres
  378.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  379.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  380.                 <i class="bi bi-star-half" style="color: #d78316;"></i>
  381.                 <i class="bi bi-star"></i>
  382.                 <i class="bi bi-star"></i>
  383.             </p>
  384.             {% elseif conseiller[0].note == 3 %}
  385.             <p class="text-center  text-dark small ">Avis des membres
  386.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  387.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  388.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  389.                 <i class="bi bi-star"></i>
  390.                 <i class="bi bi-star"></i>
  391.             </p>
  392.             {% elseif conseiller[0].note == 3.5 %}
  393.             <p class="text-center text-dark  small ">Avis des membres
  394.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  395.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  396.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  397.                 <i class="bi bi-star-half" style="color: #d78316;"></i>
  398.                 <i class="bi bi-star"></i>
  399.             </p>
  400.             {% elseif conseiller[0].note == 4 %}
  401.             <p class="text-center  text-dark small ">Avis des membres
  402.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  403.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  404.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  405.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  406.                 <i class="bi bi-star"></i>
  407.             </p>
  408.             {% elseif conseiller[0].note == 4.5 %}
  409.             <p class="text-center text-dark  small ">Avis des membres
  410.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  411.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  412.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  413.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  414.                 <i class="bi bi-star-half" style="color: #d78316;"></i>
  415.             </p>
  416.             {% elseif conseiller[0].note == 5 %}
  417.             <p class="text-center  text-dark small ">Avis des membres
  418.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  419.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  420.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  421.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  422.                 <i class="bi bi-star-fill" style="color: #d78316;"></i>
  423.             </p>
  424.             {% endif %}
  426.             <h4>{{conseiller[0].userPseudo}}</h4>
  427.             <p class="text-muted"> {{conseiller[0].userExtensionCode}}</p>
  428.             {% if app.user %}
  429.             <a href="tel:01 72 89 19 56">
  430.                 <div class=" btn-primary btn-social mx-2 " href="#"><i class="bi bi-telephone-fill "></i>
  431.                 </div>
  432.             </a>
  433.             <a href="{{path('question_mail',  {id : conseiller[0].complementId})}}">
  434.                 <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-envelope-fill "></i></div>
  435.             </a>
  436.             {% if conseiller[0].userMailing %}
  437.             <a href="{{path('app_chat', {userId: conseiller[0].userId, userPseudoId: conseiller[0].userPseudoId })}}">
  438.                 <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-chat-fill "></i>
  439.                 </div>
  440.             </a>
  441.             {% endif %}
  443.             {% if conseiller[0].userMailing %}
  444.             <a href="{{path('app_login')}}">
  445.                 <div class=" btn-primary btn-social mx-2" href="#!"><i class="bi bi-camera-video-fill"></i></div>
  446.             </a>
  447.             {% endif %}
  448.             {% else %}
  449.             <a href="{{path('app_login')}}">
  450.                 <button class="btn btn-primary "><i class="bi bi-box-arrow-in-right"></i> &nbsp; connexion</button>
  451.             </a>
  452.             <a href="{{path('app_register')}}">
  453.                 <button class="btn btn-primary "><i class="bi bi-book"></i> &nbsp; Inscription</button>
  454.             </a>
  455.         </div>
  458.         {% endif %}
  460.     </div>
  461.     </div>
  462.     <div class="accordion accordion-flush mt-3" id="serviceFlush">
  463.         <div class="accordion-item">
  464.             <h2 class="accordion-header" id="flush-headingOne">
  465.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  466.                     data-bs-target="#serviceOne" aria-expanded="false" aria-controls="flush-collapseOne">
  467.                     <i class="bi bi-person"></i> &nbsp; Profil
  468.                 </button>
  469.             </h2>
  470.             <div id="serviceOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
  471.                 data-bs-parent="#serviceFlush">
  472.                 <div class="accordion-body text-center">
  473.                     <strong class="text-warning text-center mt-n-5">--* Consultation CB à
  474.                         {{conseiller[0].prixParMinute}} €/mn *--</strong>
  475.                     <h3 class=" text-center">{{conseiller[0].titrePage}}</h3>
  476.                     <h4 class=" text-center">{{conseiller[0].metaDescription}}</h4>
  477.                     <p>{{conseiller[0].descriptionLongue|raw}}</p>
  478.                 </div>
  479.             </div>
  480.         </div>
  482.         <div class="accordion-item mt-2">
  483.             <h2 class="accordion-header" id="flush-headingTwo">
  484.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  485.                     data-bs-target="#serviceTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
  486.                     <i class="bi bi-book"></i> &nbsp; Appréciations
  487.                 </button>
  488.             </h2>
  489.             <div id="serviceTwo" class="accordion-collapse collapse " aria-labelledby="flush-headingTwo"
  490.                 data-bs-parent="#serviceFlush">
  491.                 <div class="accordion-body">
  492.                     {% for avis in conseillerAvis %}
  493.                     {% if avis is empty %}
  494.                     <div class="card shadow border-primary  ">
  495.                         <p>Ce conseiller n'a pas encore reçu d'appréciation</p>
  496.                     </div>
  497.                     {% else %}
  499.                     {% endif %}
  500.                     {% endfor %}
  501.                 </div>
  502.             </div>
  503.         </div>
  504.         {% if app.user%}
  505.         <div class="accordion-item mt-2">
  506.             <h2 class="accordion-header" id="flush-headingThree">
  507.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  508.                     data-bs-target="#serviceThree" aria-expanded="false" aria-controls="flush-collapseTwo">
  509.                     <i class="bi bi-pen-fill"></i> &nbsp; Laissez un avis
  511.                 </button>
  512.             </h2>
  513.             <div id="serviceThree" class="accordion-collapse collapse " aria-labelledby="flush-headingThree"
  514.                 data-bs-parent="#serviceFlush">
  515.                 <div class="accordion-body text-center">
  516.                     <div class="row justify-content-center ">
  517.                         <h4 class="">Soumission d'une appréciation client</h4>
  518.                         {{ form_start(avisFormMobile) }}
  519.                         <div class="mb-3">
  520.                             <!-- <label for="exampleFormControlTextarea1">Commentaire</label>
  521.                             <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea> -->
  522.                             {{ form_row(avisFormMobile.message , {
  523.                                 label: 'Commentaire'
  524.                             }) }}
  525.                         </div>
  526.                         <div class="mb-3">
  527.                             {{ form_row(avisFormMobile.note , {
  528.                                 label: 'Note'
  529.                             }) }}
  530.                         </div>
  531.                         <div>
  532.                             {{ form_row(avisFormMobile.envoyer , {
  533.                                 label: 'Evaluer'
  534.                             }) }}
  535.                           
  536.                         </div>
  537.                         {{ form_end(avisFormMobile) }}
  538.                     </div>
  539.                 </div>
  540.             </div>
  541.         </div>
  542.         {% endif %}
  543.         <div class="accordion-item mt-2">
  544.             <h2 class="accordion-header" id="flush-headingFour">
  545.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  546.                     data-bs-target="#serviceFour" aria-expanded="false" aria-controls="flush-collapseTwo">
  548.                     <i class="bi bi-calendar"></i> &nbsp; Planning
  550.                 </button>
  551.             </h2>
  552.             <div id="serviceFour" class="accordion-collapse collapse " aria-labelledby="flush-headingFour"
  553.                 data-bs-parent="#serviceFlush">
  554.                 <div class="accordion-body text-center">
  555.                     <div class="table-responsive h-100">
  557.                         <div class="container-fluid row mx-auto">
  558.                             <p class="col-6">Disponible <i class="bi bi-square-fill" style="color: #198754;"></i> </p>
  559.                             <p class="col-6">Indisponible : <i class="bi bi-square-fill" style="color: #6c757d;"></i>
  560.                             </p>
  561.                         </div>
  562.                         <!-- 
  563.                         <div id="{{planningFormat}}">
  564.                         </div>
  565.                         -->
  567.                         <table class="calendar table table-bordered centered  h-100">
  568.                             <thead class="table-light">
  569.                                 <tr>
  570.                                     <th scope="col"></th>
  571.                                     {% for day in weekdaysShort %}
  572.                                     <th scope="col" class='text-small text-center'>{{day}}</th>
  573.                                     {% endfor %}
  574.                                 </tr>
  575.                             </thead>
  576.                            
  577.                             <tbody>
  579.                                 {% for i in [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23]%}
  580.                                 <tr>
  581.                                     <th class="text-center text-small bg-white" scope="row">{{i}}:00</th>
  583.                                     {% for val in daysHoursShort[i] %}
  584.                                     </p>
  585.                                     {% if val == false %}
  586.                                     <td class="bg-gray-600"></td>
  588.                                     {% else %}
  589.                                     <td class="bg-green text-white text-small text-center"></td>
  591.                                     {% endif %}
  592.                                     {% endfor %}
  593.                                 </tr>
  594.                                 {% endfor %}
  595.                         </table>
  596.                     </div>
  597.                 </div>
  598.             </div>
  599.         </div>
  601.     </div>
  602. </section>
  603. <script type="text/javascript" nonce="{{ csp_nonce('script') }}">
  604.     function selectAll(ch) {
  605.         var tab = document.getElementsByTagName("input");
  606.         for (var i = 0; i < tab.length; i++) {
  607.             if (tab[i].type == "checkbox")
  608.                 tab[i].checked = ch.checked;
  609.         }
  610.     }
  612. </script>
  613. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  614. <script nonce="{{ csp_nonce('script') }}">
  615.     window.onload = () => {
  617.         let calendarEl2 = document.querySelector('#{{planningFormat}}');
  619.         if (('#{{planningFormat}}' == '#HebdomadaireUtilisateur') || ('#{{planningFormat}}' == '#HebdomadaireSimple') || ('#{{planningFormat}}' == '#JournalierSimple') || ('#{{planningFormat}}' == '#HoraireSimple')) {
  621.             let calendar2 = new FullCalendar.Calendar(calendarEl2, {
  623.                 schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  624.                 initialView: 'timeGridWeek',
  625.                 locale: 'fr',
  626.                 timeZone: 'Europe/Paris',
  627.                 nowIndicator: true,
  628.                 themeSystem: 'bootstrap5',
  629.                 firstDay: 1,
  630.                 navLinks: false,
  631.                 editable: false,
  632.                 eventResizableFromStart: false,
  633.                 slotEventOverlap: false,
  634.                 allDaySlot: false,
  635.                 selectable: false,
  636.                 selectMirror: true,
  637.                 dayMaxEvents: true,
  638.                 aspectRatio: 1,
  640.                 // eventOrderStrict: true,
  641.                 headerToolbar: {
  642.                     start: '',
  643.                     center: '',
  644.                     end: '',
  645.                 },
  647.                 buttonText:
  648.                 {
  649.                     today: "Aujourd'hui",
  650.                     month: 'Mois',
  651.                     week: 'Semaine',
  652.                     day: 'Jour',
  653.                     resourceTimeline: 'Jour',
  654.                     list: 'Liste'
  655.                 },
  657.                 events: JSON.parse('{{ data|raw }}'),
  658.                 eventColor: '#00ac69',
  659.                 eventClick: function (info) {
  661.                     var hoursBegin = info.event.start.getHours() - 2;
  662.                     var minutesBegin = info.event.start.getMinutes();
  664.                     var hoursEnd = info.event.end.getHours() - 2;
  665.                     var minutesEnd = info.event.end.getMinutes();
  666.                     var id = info.event.id;
  667.                     var planningEventId = "{{planningEventId}}"
  669.                     var urlToDelete = "/deletePlanning/" + planningEventId + "/" + id;
  670.                     var urlToModify = "/modifyPlannig/" + planningEventId + "/" + id;
  672.                     $('#EventId').val(id);
  673.                     $('#modifyPlanningListId').attr("href", urlToModify);
  674.                     $('#planningListId').attr("href", urlToDelete);
  675.                     $('#showEventCalendarConseiller').html(info.event.title);
  676.                     $('#hoursBegin').val(hoursBegin);
  677.                     $('#minutesBegin').val(minutesBegin);
  678.                     $('#hoursEnd').val(hoursEnd);
  679.                     $('#minutesEnd').val(minutesEnd);
  681.                     var newHours = $('#hoursBegin').val();
  684.                     var modal = $("#showEventCalendar");
  685.                     modal.modal('show');
  687.                 },
  689.                 resourceAreaHeaderContent: 'Conseillers',
  690.                 resources: JSON.parse('{{ ressources|raw }}'),
  691.                 resourceAreaWidth: " 10%",
  692.                 eventOrder: "-userId",
  694.             });
  696.             calendar2.on('eventChange', (e) => {
  698.                 let url = `/gestionPlanning/{{planningEventId}}/edit`
  699.                 let donnees = {
  700.                     "id": e.event.id,
  701.                     "title": e.event.title,
  702.                     "daysOfWeek": e.event.extendedProps.weekDayNum,
  703.                     "startTime": e.event.start,
  704.                     "endTime": e.event.end
  705.                 }
  707.                 let xhr = new XMLHttpRequest
  708.                 xhr.open("POST", url)
  709.                 xhr.setRequestHeader("Content-Type", "application/json")
  710.                 xhr.send(JSON.stringify(donnees))
  711.             })
  712.             calendar2.render()
  713.         } else if (('#{{planningFormat}}' == '#HoraireMultiple')) {
  715.             let calendar2 = new FullCalendar.Calendar(calendarEl2, {
  717.                 schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  718.                 initialView: 'resourceTimeline',
  719.                 locale: 'fr',
  720.                 timeZone: 'Europe/Paris',
  721.                 nowIndicator: true,
  722.                 themeSystem: 'bootstrap5',
  723.                 firstDay: 1,
  724.                 navLinks: true,
  725.                 editable: true,
  726.                 eventResizableFromStart: true,
  728.                 selectable: true,
  729.                 selectMirror: true,
  730.                 dayMaxEvents: true,
  731.                 // eventOrderStrict: true,
  732.                 headerToolbar: {
  733.                     start: 'prev,next today',
  734.                     center: 'title',
  735.                     end: 'timeGridWeek,resourceTimeline',
  736.                 },
  738.                 buttonText:
  739.                 {
  740.                     today: "Aujourd'hui",
  741.                     month: 'Mois',
  742.                     week: 'Semaine',
  743.                     day: 'Jour',
  744.                     resourceTimeline: 'Jour',
  745.                     list: 'Liste'
  746.                 },
  748.                 events: JSON.parse('{{ data|raw }}'),
  749.                 dayClick: function (date, allDay, jsEvent, view) {
  750.                     if (allDay) {
  751.                         alert('Clicked on the entire day: ' + date);
  752.                     } else {
  753.                         alert('Clicked on the slot: ' + date);
  754.                     }
  755.                     alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
  756.                     alert('Current view: ' + view.name);
  758.                     // change the day's background color just for fun
  759.                     $(this).css('background-color', 'red');
  761.                 },
  762.                 eventClick: function (info) {
  763.                     var hoursBegin = info.event.start.getHours() - 2;
  764.                     var minutesBegin = info.event.start.getMinutes();
  766.                     var hoursEnd = info.event.end.getHours() - 2;
  767.                     var minutesEnd = info.event.end.getMinutes();
  769.                     var param = "?hoursBegin=" + hoursBegin + "&minutesBegin=" + minutesBegin + "&hoursEnd=" + hoursEnd + "&minutesEnd=" + minutesEnd;
  771.                     var id = info.event.id;
  772.                     var planningEventId = "{{planningEventId}}"
  774.                     var urlToDelete = "/deletePlanning/" + planningEventId + "/" + id;
  775.                     var urlToModify = "/modifyPlannig/" + planningEventId + "/" + id + param;
  777.                     console.log(urlToModify);
  778.                     EventId
  779.                     $('#EventId').val(id);
  780.                     $('#modifyPlanningListId').attr("href", urlToModify);
  781.                     $('#planningListId').attr("href", urlToDelete);
  782.                     $('#showEventCalendarConseiller').html(info.event.title);
  783.                     $('#hoursBegin').val(hoursBegin);
  784.                     $('#minutesBegin').val(minutesBegin);
  785.                     $('#hoursEnd').val(hoursEnd);
  786.                     $('#minutesEnd').val(minutesEnd);
  788.                     var modal = $("#showEventCalendar");
  789.                     modal.modal('show');
  790.                     info.el.style.borderColor = 'red';
  791.                 },
  793.                 slotEventOverlap: false,
  794.                 resourceAreaHeaderContent: 'Touches',
  795.                 resources: JSON.parse('{{ ressources|raw }}'),
  796.                 resourceAreaWidth: " 10%",
  797.                 eventOrder: "-keypad",
  798.             });
  800.             calendar2.on('eventChange', (e) => {
  801.                 let url = `/gestionPlanning/{{planningEventId}}/edit`
  802.                 let donnees = {
  803.                     "id": e.event.id,
  804.                     "title": e.event.title,
  805.                     "daysOfWeek": e.event.daysOfWeek,
  806.                     "startTime": e.event.start,
  807.                     "endTime": e.event.end,
  808.                     "backgroundColor": e.event.backgroundColor,
  809.                 }
  810.                 console.log(donnees);
  811.                 let xhr = new XMLHttpRequest()
  812.                 xhr.open("POST", url)
  813.                 xhr.setRequestHeader("Content-Type", "application/json")
  814.                 xhr.send(JSON.stringify(donnees))
  815.             })
  816.             calendar2.render()
  817.         } else if (('#{{planningFormat}}' == '#JournalierMultiple')) {
  818.             let calendar2 = new FullCalendar.Calendar(calendarEl2, {
  819.                 schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  820.                 initialView: 'resourceTimeGridDay',
  821.                 locale: 'fr',
  822.                 timeZone: 'Europe/Paris',
  823.                 nowIndicator: true,
  824.                 themeSystem: 'bootstrap5',
  825.                 firstDay: 1,
  826.                 navLinks: true,
  827.                 editable: true,
  828.                 initialDate: '{{date}}',
  829.                 eventResizableFromStart: true,
  830.                 slotEventOverlap: false,
  831.                 allDaySlot: false,
  832.                 selectable: true,
  833.                 selectMirror: true,
  834.                 dayMaxEvents: true,
  835.                 viewRender: function (view, element) {
  836.                     console.log(element);
  837.                 },
  838.                 // eventOrderStrict: true,
  839.                 headerToolbar: {
  840.                     start: 'today',
  841.                     center: 'title',
  842.                     end: 'resourceTimeGridDay',
  843.                 },
  844.                 resourceTimeline: {
  845.                     aspectRatio: 2.5,
  846.                 },
  847.                 buttonText:
  848.                 {
  849.                     today: "Aujourd'hui",
  850.                     month: 'Mois',
  851.                     week: 'Semaine',
  852.                     day: 'Jour',
  853.                     resourceTimeline: 'Jour',
  854.                     list: 'Liste',
  856.                 },
  857.                 events: JSON.parse('{{ data|raw }}'),
  858.                 eventClick: function (info) {
  860.                     var hoursBegin = info.event.start.getHours() - 2;
  861.                     var minutesBegin = info.event.start.getMinutes();
  863.                     var hoursEnd = info.event.end.getHours() - 2;
  864.                     var minutesEnd = info.event.end.getMinutes();
  865.                     var id = info.event.id;
  866.                     var planningEventId = "{{planningEventId}}"
  868.                     var urlToDelete = "/deletePlanning/" + planningEventId + "/" + id;
  869.                     var urlToModify = "/modifyPlannig/" + planningEventId + "/" + id;
  871.                     $('#EventId').val(id);
  872.                     $('#modifyPlanningListId').attr("href", urlToModify);
  873.                     $('#planningListId').attr("href", urlToDelete);
  874.                     $('#showEventCalendarConseiller').html(info.event.title);
  875.                     $('#hoursBegin').val(hoursBegin);
  876.                     $('#minutesBegin').val(minutesBegin);
  877.                     $('#hoursEnd').val(hoursEnd);
  878.                     $('#minutesEnd').val(minutesEnd);
  880.                     var newHours = $('#hoursBegin').val();
  881.                     console.log(id);
  882.                     var modal = $("#showEventCalendar");
  883.                     modal.modal('show');
  885.                 },
  887.                 resourceAreaHeaderContent: 'Conseillers',
  888.                 resources: JSON.parse('{{ ressources|raw }}'),
  889.                 resourceAreaWidth: " 10%",
  890.                 eventOrder: "-userId",
  891.             });
  892.             calendar2.on('eventChange', (e) => {
  893.                 let url = `/gestionPlanning/{{planningEventId}}/edit`
  894.                 let donnees = {
  895.                     "id": e.event.id,
  896.                     "title": e.event.title,
  897.                     "daysOfWeek": e.event.extendedProps.weekDayNum,
  898.                     "startTime": e.event.start,
  899.                     "endTime": e.event.end
  900.                 }
  902.                 let xhr = new XMLHttpRequest
  903.                 xhr.open("POST", url)
  904.                 xhr.setRequestHeader("Content-Type", "application/json")
  905.                 xhr.send(JSON.stringify(donnees))
  906.             })
  907.             calendar2.render()
  909.         } else if (('#{{planningFormat}}' == '#PresenceUtilisateur')) {
  910.             let calendar2 = new FullCalendar.Calendar(calendarEl2, {
  912.                 schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
  913.                 initialView: 'timeGrid',
  914.                 locale: 'fr',
  915.                 timeZone: 'Europe/Paris',
  916.                 nowIndicator: true,
  917.                 themeSystem: 'bootstrap5',
  918.                 firstDay: 1,
  919.                 navLinks: true,
  920.                 editable: true,
  921.                 dayCount: 2,
  923.                 initialDate: '{{date}}',
  924.                 eventResizableFromStart: true,
  925.                 slotEventOverlap: false,
  926.                 allDaySlot: false,
  927.                 selectable: true,
  928.                 selectMirror: true,
  929.                 dayMaxEvents: true,
  930.                 viewRender: function (view, element) {
  931.                     console.log(element);
  932.                 },
  933.                 // eventOrderStrict: true,
  934.                 headerToolbar: {
  935.                     start: 'today',
  936.                     center: 'title',
  937.                     end: 'timeGridDay',
  938.                 },
  940.                 resourceTimeline: {
  941.                     aspectRatio: 2.5,
  942.                 },
  943.                 buttonText:
  944.                 {
  945.                     today: "Aujourd'hui",
  946.                     month: 'Mois',
  947.                     week: 'Semaine',
  948.                     day: 'Jour',
  949.                     resourceTimeline: 'Jour',
  950.                     list: 'Liste',
  951.                     timeGrid: '2 Jours'
  952.                 },
  953.                 events: JSON.parse('{{ data|raw }}'),
  954.                 eventClick: function (info) {
  956.                     var hoursBegin = info.event.start.getHours() - 2;
  957.                     var minutesBegin = info.event.start.getMinutes();
  959.                     var hoursEnd = info.event.end.getHours() - 2;
  960.                     var minutesEnd = info.event.end.getMinutes();
  961.                     var id = info.event.id;
  962.                     var planningEventId = "{{planningEventId}}"
  964.                     var urlToDelete = "/deletePlanning/" + planningEventId + "/" + id;
  965.                     var urlToModify = "/modifyPlannig/" + planningEventId + "/" + id;
  967.                     $('#EventId').val(id);
  968.                     $('#modifyPlanningListId').attr("href", urlToModify);
  969.                     $('#planningListId').attr("href", urlToDelete);
  970.                     $('#showEventCalendarConseiller').html(info.event.title);
  971.                     $('#hoursBegin').val(hoursBegin);
  972.                     $('#minutesBegin').val(minutesBegin);
  973.                     $('#hoursEnd').val(hoursEnd);
  974.                     $('#minutesEnd').val(minutesEnd);
  976.                     var newHours = $('#hoursBegin').val();
  977.                     console.log(id);
  978.                     var modal = $("#showEventCalendar");
  979.                     modal.modal('show');
  981.                 },
  983.                 resourceAreaHeaderContent: 'Conseillers',
  984.                 resources: JSON.parse('{{ ressources|raw }}'),
  985.                 resourceAreaWidth: " 10%",
  986.                 eventOrder: "-userId",
  988.             });
  990.             calendar2.on('eventChange', (e) => {
  992.                 let url = `/gestionPlanning/{{planningEventId}}/edit`
  993.                 let donnees = {
  994.                     "id": e.event.id,
  995.                     "title": e.event.title,
  996.                     "daysOfWeek": e.event.extendedProps.weekDayNum,
  997.                     "startTime": e.event.start,
  998.                     "endTime": e.event.end
  999.                 }
  1001.                 let xhr = new XMLHttpRequest
  1002.                 xhr.open("POST", url)
  1003.                 xhr.setRequestHeader("Content-Type", "application/json")
  1004.                 xhr.send(JSON.stringify(donnees))
  1005.             })
  1007.             calendar2.render()
  1008.         };
  1011.     }
  1012. </script>