Voici votre URL de partage https://sharemycode.io/c/c215b1f (Cliquer pour copier) (Copié)

{% extends 'base.html.twig' %}
{% block title %}Réservation{% endblock %}

{% block body %}

<div class="container">
    <div class="row">
        <h1 class="mt-5 mb-5">Réservation</h1>
        <h2 class="mt-5 mb-5">Choisissez la préstation que vous voulez faire</h2>
        <div class="col-12">
            <nav>
                <a class="nav-link dropdown-toggle fs-2 text-md-center" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Categorie de Préstation</a>
                <ul class="dropdown-menu text-center col-12"> 
                    <div id="myBtnContainer">
                        <li ><a class="menu-tab dropdown-item fs-4" href="{{ path('app_session')}}">All</a></li> 
                        {% for category in categorys %}
                            <li ><a class="menu-tab dropdown-item fs-4" data-tab="{{category.id}}">{{category}}</a></li> 
                        {% endfor %}
                    </div>  
                </ul>
            </nav>  
        </div>
    </div>

    <div class="row d-flex justify-content-around">
        <div class="col-8 d-flex justify-content-around mt-5 mb-5">
            {# si idCategory est defini et que idcategory n'est pas vide #}
            {% if idCategory is defined and idCategory is not empty %}
                {# pour chaque benefit #}
                {% for benefit in benefits %}
                    {# si idcategory == id de la catégorie appartenant au benefit on affiche les bouttons avec la class show en plus  #}
                    {% if idCategory == benefit.category.id %}
                        <button class="active benefit-btn {{benefit.category.id}} show btn btn-res" data-category="{{benefit.category.id}}"><a href="{{ path('app_session', {'benefit': benefit.id, 'category': benefit.category.id  }) }} " value="{{benefit}}">{{benefit}}</a>
                    {#sinon pas !  #}
                    {% else %}
                        <button class="benefit-btn {{benefit.category.id}} btn btn-res" data-category="{{benefit.category.id}}"><a href="{{ path('app_session', {'benefit': benefit.id, 'category': benefit.category.id  }) }} " value="{{benefit}}">{{benefit}}</a>
                    {% endif %}
                {% endfor %}
            {% else %}
                {% for benefit in benefits %}
                    <button class="active benefit-btn {{benefit.category.id}} btn btn-res" data-category="{{benefit.category.id}}"><a href="{{ path('app_session', {'benefit': benefit.id , 'category': benefit.category.id}) }} " value="{{benefit}}">{{benefit}}</a>
                {% endfor %}
            {% endif %}
        </div>
    </div>
    <div class="container">
        <h5 class="text-end mb-5"><i class="fa-solid fa-circle color-green"></i>DISPONILBE /<i class="fa-solid fa-circle color-red"></i> PLEIN </h5>
        <div class="row col-12 justify-content-center">
            <div class="col-sm-8"> 
                {# si on a un id d'une categorie et d'une préstation précise #}
                {% if idCategory is defined and idCategory is not empty %}
                    {% set dateNow = date() %}
                        {% for session in sessionsById  %}
                            {% if dateNow > session.startTime  %}
                                <div class="card fs-5 mb-3 shadow datepasser" >
                                    <div class="card-body">
                                        <strong>{{ session.benefit }} le {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} </strong>
                                        <p> place {{ session.nbPlaceReserved  }}/{{ session.nbPlaceMax }} place restante {{ session.remainingPlaces }}</p>
                                        <p class="text-end fs-2">Date passer</p>
                                    </div>
                                </div>
                            {% elseif  dateNow < session.startTime  %}
                                <div class="card fs-5 mb-3 shadow" >
                                    <div class="card-body">
                                        {% if  session.remainingPlaces <= 0  %}<i class="fa-solid fa-circle color-red"></i>{% else %}<i class="fa-solid fa-circle color-green"></i> {% endif %}
                                            <strong>{{ session.benefit }} le {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} </strong>
                                                   <!-- Button trigger modal -->
                                                   <a class="btn btn-primary btn-res" data-bs-toggle="modal" href="#exampleModalToggle{{session.id }}" role="button">réserver</a>
                                                   {# MODAL 1 #}
                                                   <div class="modal fade" id="exampleModalToggle{{session.id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                                                       <div class="modal-dialog modal-dialog-centered">
                                                           <div class="modal-content">
                                                               <div class="modal-header">
                                                                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                               </div>
                                                               <div class="card" style="width: auto;">
                                                                   <img src="/{{session.benefit.img}}" class="card-img-top" alt="..."> 
                                                                   <div class="card-body">
                                                                       <h5 class="modal-title" id="exampleModalToggleLabel">{{session.benefit.title}}</h5>     
                                                                       <hr>
                                                                       <p class="card-text">horaire : {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} </p> {# #}
                                                                       <hr>
                                                                       <p class="card-text">prix : {{session.benefit.price}}€</p>  
                                                                       <p class="card-text">A regler sur  place</p> 
                                                                   </div>
                                                               </div>
                                                               <div class="modal-footer">
                                                                   <button type="button" class="btn-res btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                                                   <button class=" btn-res btn btn-primary" data-bs-target="#exampleModalToggle2{{session.id }}" data-bs-toggle="modal" data-bs-dismiss="modal">Suivant</button>
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </div>
                                                   {# MODAL 2 #}
                                                   <div class="modal fade" id="exampleModalToggle2{{session.id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
                                                       <div class="modal-dialog modal-dialog-centered">
                                                           <div class="modal-content">
                                                               <div class="modal-header">
                                                                   <h5 class="modal-title" id="exampleModalToggleLabel2">Vous aller valider la réservation</h5>
                                                                   <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                               </div>
                                                               <div class="modal-body">
                                                                    Si l'horaire  du  {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} et le prix de {{ session.benefit.price }}vous convient
                                                                       vous pouvez valider.                                                                
                                                                   vous pouvez annuler 24h avant la date prévue a tout moment dans l'onglet "user" de la barre de navigation selectionner"gestion des reservation"                                    
                                                               </div>
                                                               <div class="modal-footer">
                                                                   <button type="button" class=" btn-res btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                                                   <button class=" btn-res btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Revenir en arrière</button>  
                                                                   {% if app.user == null  %}
                                                                       <button type="button" class="btn-res btn btn-primary"><a href="{{ path('app_login')}} " >Valider réservation</a></button>
                                                                   {% else %}
                                                                       <button type="button" class="btn-res btn btn-primary"><a href="{{ path('app_reservation', {'idUser': session.id , 'idSession': app.user.id  }) }} " >Valider réservation</a></button>
                                                                   {% endif %}                                                                                                                                                        
                                                               </div>
                                                           </div>
                                                       </div>
                                                   </div>
                                               {% endif %}
                                               <p> place {{ session.nbPlaceReserved  }}/{{ session.nbPlaceMax }} place restante {{ session.remainingPlaces }}</p>
                                           </div>
                                       </div>  
                        {% endfor %}
                {% else %}
                {# sinon on a toutes les sessions et on affiche tout  #}
                    {% for session in sessions  %}
                        {% set dateNow = date() %}
                            {% if dateNow > session.startTime  %}
                                <div class="card fs-5 mb-3 shadow datepasser">
                            {% else %}
                                <div class="card fs-5 mb-3 shadow">
                            {% endif %}
                                    <div class="card-body">
                                        {% if  session.remainingPlaces <= 0  %}
                                            <i class="fa-solid fa-circle color-red"></i>
                                        {% else %}
                                            <i class="fa-solid fa-circle color-green"></i>
                                        {% endif %}
                                        <strong>{{ session.benefit }} le {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} </strong>
                                        {% if dateNow > session.startTime  %}
                                            <p class="text-end fs-2">Date passer</p>
                                        {% else %}
                                            <!-- Button trigger modal -->
                                            <a class="btn btn-primary btn-res" data-bs-toggle="modal" href="#exampleModalToggle{{session.id }}" role="button">réserver</a>
                                            {# MODAL 1 #}
                                            <div class="modal fade" id="exampleModalToggle{{session.id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="card" style="width: auto;">
                                                            <img src="/{{session.benefit.img}}" class="card-img-top" alt="..."> 
                                                            <div class="card-body">
                                                                <h5 class="modal-title" id="exampleModalToggleLabel">{{session.benefit.title}}</h5>     
                                                                <hr>
                                                                <p class="card-text">horaire : {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} </p> {# #}
                                                                <hr>
                                                                <p class="card-text">prix : {{session.benefit.price}}€</p>  
                                                                <p class="card-text">A regler sur  place</p> 
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn-res btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                                            <button class=" btn-res btn btn-primary" data-bs-target="#exampleModalToggle2{{session.id }}" data-bs-toggle="modal" data-bs-dismiss="modal">Suivant</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {# MODAL 2 #}
                                            <div class="modal fade" id="exampleModalToggle2{{session.id }}" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalToggleLabel2">Vous aller valider la réservation</h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            {% if  session.remainingPlaces == 1 %}
                                                            <form action="" method="post">
                                                                <label for="session_nbPlaceMax" class="required"><strong>choissisez le nombre de place que vous voulez réserver pour cet séance</strong></label>
                                                                <input type="number" id="session_nbPlaceMax" name="nbPlaceMax" required="required" min="1" max="1" placeholder="1" class="form-control">     
                                                            </form>
                                                            {% else %} 
                                                            <form action="" method="post">
                                                                <label for="session_nbPlaceMax" class="required">choissisez </label>
                                                                <input type="number" id-input="session_nbPlaceMax" name="nbPlaceMax"  required="required" min="1" max="{{session.remainingPlaces}}" required="required" class="form-control">                                   
                                                            </form>
                                                            {% endif %}                                                         
                                                            {# Si l'horaire  du  {{ session.startTime | date('d/m/Y') }} De {{ session.startTime | date('H:i') }} à {{ session.endTime | date('H:i') }} et le prix de {{ session.benefit.price }}vous convient
                                                                vous pouvez valider.#}
                                                            vous pouvez annuler 24h avant la date prévue a tout moment dans l'onglet "user" de la barre de navigation selectionner"gestion des reservation"                                    
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class=" btn-res btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                                                            <button class=" btn-res btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Revenir en arrière</button>  
                                                            {% if app.user == null  %}
                                                                <button type="button" class="btn-res btn btn-primary"><a href="{{ path('app_login')}} " >Valider réservation</a></button>
                                                            {% else %}
                                                                <button type="button" class="btn-res btn btn-primary"><a href="{{ path('app_reservation', {'idUser': session.id , 'idSession': app.user.id }) }} " >Valider réservation</a></button>
                                                            {% endif %}                                                                                                                                                        
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% endif %}
                                        <p> place {{ session.nbPlaceReserved  }}/{{ session.nbPlaceMax }} place restante {{ session.remainingPlaces }}</p>
                                    </div>
                                </div>  
                    {% endfor %}
                {% endif %}
            </div>  
        </div>
    </div>

    <h2>Planning a la semaine</h2>
    <button id="togg1" class="btn">afficher/désactiver planning </button>
    <div class="container mt-5">
        <div id="d1">
            <div id='calendar'></div>
        </div>
    </div>

</div>
    
    <script>
         // on ajoute un evenement d'écoute sur le document charger sur cet page avec une fonction
         document.addEventListener('DOMContentLoaded', function() {
            // on selectionne l'élément qui a pour ID 'calendar'
            let calendarEl = document.getElementById('calendar');
            // calendar = nouveau calendrier et calandarEl seras composer de :
            let calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',    // ou possible de mettre 'listWeek' ou 'dayGridMonth'
                locale: 'fr',   // pour avoir le texte en français
                timeZone: 'Europe/Paris', // time zone de l'europe
                headerToolbar:  {       // modifier la disposition de la toullbar et ajouter des éléments
                    start: 'prev,next today', // preve nexte au début 
                    center: 'title',        //title au milieu
                    end: 'timeGridWeek list'  // a la fin on a choix afficher le mois ou la semaine
                },
                hiddenDays: [ 0, 6 ], // pour masquer dimanche et samedi sur le rendue du calendrier
                nowIndicator: true, // place un trait rouge a l'heure ou l'on se trouve 
                buttonText: {  // permet de redefinir le texte des bouttons 
                    today: "Aujourd'hui",  
                    week: "Semaine",
                    list: "Liste"
                },
                events: {{ datas | raw }},
              //  selectable: true,
              //  selectHelper: true ,
               
            });
            calendar.render();
        });
    </script>
{% endblock %}

Informations

Cet extrait a été créé le 22 sept. 2022 à 15:29:17

Cet extrait expire le 22 oct. 2022 à 15:29:17

Langage : twig

Logo twig

Link

Voici votre URL de partage : https://sharemycode.io/c/c215b1f Copié

Demander la suppression