templates/editer_session/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Editer session{% endblock %}
  5. {% block body %}
  6. <body id="kt_app_body" data-kt-app-layout="dark-sidebar" data-kt-app-header-fixed="true" data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true" data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true" data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">
  7. <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
  8.             <!--begin::Page-->
  9.     <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
  10.             <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
  11.                 <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
  12.                 
  13.                         <div class="d-flex flex-column flex-column-fluid">
  14.                             <!--begin::Toolbar-->
  15.                             <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
  16.                                 <!--begin::Toolbar container-->
  17.                                 <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
  18.                                     <!--begin::Page title-->
  19.                                     <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
  20.                                         <!--begin::Title-->
  21.                                         <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">Interface de gestion d'une session</h1>
  22.                                         
  23.                                             </br>
  24.                                         <div class="card mb-5 mb-xxl-8">
  25.                                             <div class="card-body pt-9 pb-0">
  26.                                                 <div class="d-flex flex-wrap flex-sm-nowrap "style="min-width: 980px;">
  27.                                                     
  28.                                                     <div class="flex-grow-1">
  29.                                                         <div class="d-flex justify-content-between align-items-start flex-wrap mb-2">
  30.                                                             <div class="d-flex flex-column">
  31.                                                                 <div class="d-flex align-items-center mb-2">
  32.                                                                     <a href="#" class="text-gray-900 text-hover-primary fs-2 fw-bold me-1">{{session.nom}}</a>
  33.                                                                     
  34.                                                                 </div>
  35.                                                                 <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
  36.                                                                     <a href="#" class="d-flex align-items-center text-gray-600 text-hover-primary me-5 mb-2">
  37.                                                                     <span class="svg-icon svg-icon-4 me-1">
  38.                                                                         <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
  39.                                                                             <path d="M9 1.5C4.875 1.5 1.5 4.875 1.5 9C1.5 13.125 4.875 16.5 9 16.5C13.125 16.5 16.5 13.125 16.5 9C16.5 4.875 13.125 1.5 9 1.5ZM9 14.625C5.625 14.625 3 11.925 3 9C3 6.075 5.625 3.375 9 3.375C12.375 3.375 15 6.075 15 9C15 11.925 12.375 14.625 9 14.625Z" fill="currentColor"/>
  40.                                                                             <rect x="6" y="5.25" width="6" height="1.5" fill="currentColor"/>
  41.                                                                             <rect x="6" y="8.25" width="6" height="1.5" fill="currentColor"/>
  42.                                                                             <rect x="6" y="11.25" width="6" height="1.5" fill="currentColor"/>
  43.                                                                         </svg>
  44.                                                                     </span>
  45.                                                                     Session</a>
  46.                                                                 </div>
  47.                                                                 
  48.             
  49.                                                                 
  50.                                                                 <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
  51.                                                                     <a href="#" class="d-flex align-items-center text-gray-600 text-hover-primary me-5  mb-2">
  52.                                                                     <span class="svg-icon svg-icon-4 me-1">
  53.                                                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  54.                                                                             <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2" fill="none" />
  55.                                                                             <circle cx="8" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  56.                                                                             <circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  57.                                                                             <circle cx="16" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  58.                                                                         </svg>
  59.                                                                     </span> <span class="text-gray-900"> Nom du programme : </span> {{session.programme.nom}}</a>
  60.                                                                 </div>
  62.                                                                 <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2">
  63.                                                                     <a href="#" class="d-flex align-items-center text-gray-600 text-hover-primary me-5  mb-2">
  64.                                                                     <span class="svg-icon svg-icon-4 me-1">
  65.                                                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  66.                                                                         <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="2" fill="none" />
  67.                                                                         <circle cx="8" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  68.                                                                         <circle cx="12" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  69.                                                                         <circle cx="16" cy="12" r="2" stroke="currentColor" stroke-width="2" fill="none" />
  70.                                                                         </svg>
  71.                                                                     </span> <span class="text-gray-900"> Description : </span>{{session.description}}</a>
  72.                                                                 </div>
  74.                                                                 
  75.                                                             </div>
  76.                                                             {% if is_granted('ROLE_ADMIN') %}                                        
  77.                                                             <div class="d-flex my-4">
  78.                                                                 <a href="#" class="btn btn-sm btn-light btn-danger me-2" data-bs-toggle="modal" data-bs-target="#kt_modal_1">
  79.                                                                         Supprimer
  80.                                                                 </a>
  81.                                                                 {# Code du modal pour le bouton supprimer #}
  82.                                                                 <div class="modal fade" tabindex="-1" id="kt_modal_1">
  83.                                                                     <div class="modal-dialog">
  84.                                                                         <div class="modal-content">
  85.                                                                             <div class="modal-header">
  86.                                                                                 <h3 class="modal-title">Supprimer une session</h3>
  88.                                                                                 <!--begin::Close-->
  89.                                                                                 <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
  90.                                                                                     <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
  91.                                                                                 </div>
  92.                                                                                 <!--end::Close-->
  93.                                                                             </div>
  95.                                                                             <div class="modal-body">
  96.                                                                                 <p>Êtes-vous sûr(e) de vouloir supprimer la session: <strong> {{session.nom}} </strong></p>
  97.                                                                             </div>
  99.                                                                             <div class="modal-footer">
  100.                                                                                 <button type="button" class="btn btn-light" data-bs-dismiss="modal">Annuler</button>
  101.                                                                                 <a href="{{ path('delete-session', {id:session.id}) }}" class="btn btn-primary">Valider</a>
  102.                                                                             </div>
  103.                                                                         </div>
  104.                                                                     </div>
  105.                                                                 </div>
  106.                                                                 
  107.                                                             </div>
  108.                                                             {% endif %}
  109.                                                         </div>
  110.                                                         
  111.                                                     </div>
  112.                                                     <!--end::Info-->
  113.                                                 </div>
  114.                                                 </br>
  115.                                                 <ul class="nav nav-custom nav-tabs nav-line-tabs nav-line-tabs-2x border-0 fs-4 fw-semibold mb-8">
  116.                                                     <!--begin:::Tab item-->
  117.                                                     <li class="nav-item">
  118.                                                         <a class="nav-link text-active-primary pb-4 active" data-bs-toggle="tab" href="#session">Informations de la session</a>
  119.                                                     </li>
  120.                                                     <li class="nav-item">
  121.                                                         <a class="nav-link text-active-primary pb-4 " data-kt-countup-tabs="true" data-bs-toggle="tab" href="#participants">Liste des participants</a>
  122.                                                     </li>
  123.                                                     <li class="nav-item">
  124.                                                         <a class="nav-link text-active-primary pb-4" data-bs-toggle="tab" href="#seances">Liste des séances</a>
  125.                                                     </li>
  126.                                                     
  127.                                                 </ul>
  128.                                             </div>
  129.                                         </div>
  132.                                 
  133.                                     </div>    
  134.                                     </div>
  135.                                     
  136.                                 </div>
  137.                             </div>
  138.                             <div id="kt_app_content" class="app-content flex-column-fluid">
  139.                                 <!--begin::Content container-->
  140.                                 <div id="kt_app_content_container" class="app-container container-xxl">
  141.                                     <!--begin::Layout-->
  142.                                     <div class="d-flex flex-column flex-lg-row">
  143.                                         <div class="flex-lg-row-fluid ms-lg-15">
  144.                                             <div class="tab-content" id="myTabContent">
  145.                                                 <div class="tab-pane fade show active" id="session" role="tabpanel">
  146.                                                 {{ form_start(form) }}
  147.                                                     <div class="card card-flush mb-6 mb-xl-9">
  148.                                                         <div class="card-header border-0">
  149.                                                             <div class="modal-body py-10 px-lg-17">
  150.                                                                 <h3 class="fw-bold">Informations de la session</h3></br></br>
  151.                                         
  152.                                                                     <div class="d-flex flex-column flex-md-row gap-5">
  153.                                                                         <div class="flex-row-fluid">
  154.                                                                         {{ form_row(form.nom) }}
  155.                                                                         </div>
  156.                                                                         <div class="flex-row-fluid">
  157.                                                                         {{ form_row(form.programme) }}
  158.                                                                         </div>
  159.                                                                     </div>
  160.                                                                     </br>
  161.                                                                     </br>
  162.                                                                     <div class="d-flex flex-column flex-md-row gap-5">
  163.     
  164.                                                                         <div class="flex-row-fluid">
  165.                                                                             {{ form_row(form.datedebut) }}
  166.                                                                         </div>
  167.                                                                         <div class="flex-row-fluid">
  168.                                                                             {{ form_row(form.datefin) }}
  169.                                                                         </div>
  170.                                                                         <div class="flex-row-fluid">
  171.                                                                             {{ form_row(form.nbrmaxparticipants) }}
  172.                                                                         </div>
  173.                                                                     </div>
  174.                                             
  175.                                             
  176.                                                                     </br>
  177.                                                                      </br>
  178.                                                                     <div class="d-flex flex-column flex-md-row gap-5">
  179.                                                                         <div class="flex-row-fluid">
  180.                                                
  181.                                                                              {{ form_row(form.description) }}
  183.                                                                         </div>
  184.                                                                     </div>
  185.                                                                     </br>
  186.                                                                     </br>
  188.                                         
  189.                                                             </div>
  190.                                                         </div>
  191.                                                         
  192.                                                 </br>
  194.                                                 <div class="modal-footer flex-center">
  195.                                                     {{ form_row(form.Enregistrer) }}
  196.                                                 </div>
  197.                                                 </br>
  198.                                             
  199.                                                     
  200.     
  201.                                             </form>    
  202.                                             {{ form_end(form) }}
  203.                                         
  205.                                         </div>    
  206.                             </div>
  207.                         </div>
  208.                     
  209.                     
  210.                                                 <div class="tab-content" id="myTabContent">
  211.                                                     <div class="tab-pane fade" id="participants" role="tabpanel">
  212.                                                     
  213.                                                         <div class="card pt-4 mb-6 mb-xl-9">
  214.                                                             <div class="card-header border-0">
  215.                                                                 <div class="card-title">
  216.                                                                     <h2>Liste des participants</h2>
  217.                                                                 </div>
  218.                                                                 
  219.                                                             </div>
  220.                                                             <div class="card-body pt-0 pb-5">
  221.                                                                 <div class="table-responsive">
  222.                                                                     <table class="table align-middle table-row-dashed gy-5" id="kt_table_users_login_session">
  223.                                                                         <!--begin::Table head-->
  224.                                                                         <thead class="border-bottom border-gray-200 fs-7 fw-bold">
  225.                                                                             <!--begin::Table row-->
  226.                                                                             <tr class="text-start text-muted text-uppercase gs-0">
  227.                                                                                 <th class="min-w-100px">Nom et prénom</th>
  228.                                                                                 <th>Sexe</th>
  229.                                                                                 <th>Date de naissance</th>
  230.                                                                                 <th>Type</th>
  231.                                                                             </tr>
  232.                                                                         </thead>
  233.                                                                         <tbody class="fs-6 fw-semibold text-gray-600">
  234.                                                                         {% for particpant in particpants %}
  235.                                                                             <tr>
  236.                                                                                 <!--begin::Invoice=-->
  237.                                                                                 <td>{{particpant.membre.nom}} {{particpant.membre.prenom}}</td>
  238.                                                                                 
  239.                                                                                 <td>{{particpant.membre.sexe}}</td>
  240.                                                                             
  241.                                                                                 <td>{{particpant.membre.datenaissance.format('Y-m-d')}}</td>
  243.                                                                                 <td>{{particpant.membre.type}}</td>
  245.                                                                             </tr>
  246.                                                                         {% endfor %}
  247.                                                                     
  248.                                                                             
  249.                                                                             
  250.                                                                         </tbody>
  251.                                                                         <!--end::Table body-->
  252.                                                                     </table>
  253.                                                                     <!--end::Table-->
  254.                                                                 </div>
  255.                                                                 <!--end::Table wrapper-->
  256.                                                             </div>
  257.                                                         
  258.                                                         </div>
  259.                                                     
  260.                                                     </div>
  261.                                                     
  262.                                                 </div>
  264.                                                
  265.                                                 <div class="tab-content" id="myTabContent">
  266.                                                      <div class="tab-pane fade" id="seances" role="tabpanel">
  267.                                                     
  268.                                                         <div class="card pt-4 mb-6 mb-xl-9">
  269.                                                             <div class="card-header border-0">
  270.                                                             
  271.                                                                 <div class="card-title">
  272.                                                                     <h2>Liste des séances</h2>
  273.                                                                 </div>
  274.                                                             
  275.                                                                 <div class="card-toolbar">
  276.                                                                 
  277.                                                                     <a href="{{ path ('app_ajouter_seance')}}">
  278.                                                                         <button type="button" class="btn btn-primary" data-bs-toggle="modal">
  279.                                                                             <span class="svg-icon svg-icon-2">
  280.                                                                             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  281.                                                                             <rect opacity="0.5" x="11.364" y="20.364" width="16" height="2" rx="1" transform="rotate(-90 11.364 20.364)" fill="currentColor" />
  282.                                                                             <rect x="4.36396" y="11.364" width="16" height="2" rx="1" fill="currentColor" />
  283.                                                                             </svg>
  284.                                                                             </span>
  285.                                                                         Ajouter une séance</button></a>
  286.                                                                     <!--end::Filter-->
  287.                                                                 </div>
  288.                                                             
  289.                                                             </div>
  290.                                                         
  291.                                                             <div class="card-body pt-0 pb-5">
  292.                                                                 <!--begin::Table wrapper-->
  293.                                                                 <div class="table-responsive">
  294.                                                                     <!--begin::Table-->
  295.                                                                     <table class="table align-middle table-row-dashed gy-5" id="kt_table_users_login_session">
  296.                                                                         <!--begin::Table head-->
  297.                                                                         <thead class="border-bottom border-gray-200 fs-7 fw-bold">
  298.                                                                             <!--begin::Table row-->
  299.                                                                             <tr class="text-start text-muted text-uppercase gs-0">
  300.                                                                                 <th class="min-w-100px">Nom de la séance</th>
  301.                                                                                 {% if session.programme.nom is same as('NDPS') %}
  302.                                                                                     <th>Jours</th>
  303.                                                                                 {% else %}
  304.                                                                                     <th>Jour</th>
  305.                                                                                 {% endif %}
  306.                                                                                 <th>Heure de début</th>
  307.                                                                                 <th>Heure de fin</th>
  308.                                                                                 <th>Type</th>
  309.                                                                                 <th>Actions</th>
  310.                                                                                 
  311.                                                                 
  312.                                                                             </tr>
  313.                                                                             <!--end::Table row-->
  314.                                                                         </thead>
  315.                                                                         <!--end::Table head-->
  316.                                                                         <!--begin::Table body-->
  317.                                                                         <tbody class="fs-6 fw-semibold text-gray-600">
  318.                                                                         {% for seance in seances %}
  319.                                                                             <tr>
  320.                                                                                 <td>{{seance.nom}}</td>
  321.                                                                                 {% if session.programme.nom is same as('NDPS')  %}
  322.                                                                                     {% set jours = seance.semainendps %}
  323.                                                                                         <td>{{ jours|join(', ') }}</td>
  324.                                                                                 {% else %}
  325.                                                                                     <td>{{seance.jour}}</td>
  326.                                                                                 {% endif %}
  327.                                                                                 
  328.                                                                                 <td>{{seance.heuredebut.format('H:i:s')}}</td>
  329.                                                                                 <td>{{seance.heurefin.format('H:i:s')}}</td>
  330.                                                                                 <td>{{seance.typeseance}}</td>
  331.                                                                                 <td>
  332.                                                                                     <a href="{{path('app_editer_seance',{id:seance.id})}}" class="bi bi-pencil-fill fs-5" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
  333.                                                                                     </a>
  334.                                                                                 </td>
  335.                                                                                 
  336.                                                                             </tr>
  337.                                                                             {% endfor %}
  338.                                                                             
  339.                                                                             
  340.                                                                         </tbody>
  341.                                                                         <!--end::Table body-->
  342.                                                                     </table>
  343.                                                                     <!--end::Table-->
  344.                                                                 </div>
  345.                                                                 <!--end::Table wrapper-->
  346.                                                             </div>
  347.                                                         <!--end::Card body-->
  348.                                                         </div>
  349.                                                     
  350.                                                     </div>
  351.                                             
  352.                                           
  353.                                                 </div>
  354.                                     </div>
  355.                                 </div>
  356.                             </div>
  357.                             </div>
  358.                         
  359.                         <div id="kt_app_footer" class="app-footer">
  360.                             <!--begin::Footer container-->
  361.                             <div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
  362.                                 <!--begin::Copyright-->
  363.                                 <div class="text-dark order-2 order-md-1">
  364.                                     <span class="text-muted fw-semibold me-1">2023&copy;</span>
  365.                                     <a href="https://smartegy.ca/" target="_blank" class="text-gray-800 text-hover-primary">Made with <3 by smartegy</a>
  366.                                 </div>
  367.                                 
  368.                             </div>
  369.                         </div>
  370.                     </div>
  371.                 </div>
  372.             </div>
  373.         </div>
  374. <script>
  375. document.addEventListener('DOMContentLoaded', function() {
  376.     // Sélectionne le formulaire par son nom ou autre méthode
  377.     const form = document.querySelector('form[name="session"]'); // Changez "programme" selon le nom de votre formulaire
  378.     const saveButton = document.getElementById('session_Enregistrer'); // Assurez-vous que l'ID correspond à votre bouton
  380.     // Vérifie si le bouton existe
  381.     if (!saveButton) {
  382.         console.error('Button with id "session_Enregistrer" not found.');
  383.         return;
  384.     }
  386.     // Sélectionne les champs requis
  387.     const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');
  389.     // Fonction pour vérifier si tous les champs requis sont remplis
  390.     function validateForm() {
  391.         let allFilled = true;
  393.         requiredFields.forEach(field => {
  394.             if (!field.value.trim()) {
  395.                 allFilled = false;
  396.             }
  397.         });
  399.         // Activer/désactiver le bouton en fonction des champs requis
  400.         saveButton.disabled = !allFilled;
  401.     }
  403.     // Ajouter des écouteurs d'événements pour chaque champ requis
  404.     requiredFields.forEach(field => {
  405.         field.addEventListener('input', validateForm);
  406.     });
  408.     // Initialiser l'état du bouton lors du chargement de la page
  409.     validateForm();
  410. });
  411. </script>
  416. {% endblock %}
  418.