{# component: calendar form: { action {string}: Action du formulaire link: [{ text {string}: Texte du lien to {string}: Lien }] } months: { MONTH/YEAR {string, format: X/XXXX}: Titre du tableau contenant les jours du mois : [{ available {bool}: Indique si le jour est disponible à la réservation price {string}: Prix de la journée date {string, format: DAY/MONTH/YEAR = X/X/XXXX}: date du jour discount: { perc {string}: Promotion de la journée originalPrice {string}: Prix d'origine } specialOffer: { title {string}: Titre de l'offre spéciale description {string}: Description de l'offre originalPrice {string}: Prix d'origine img: { src {string}: source de l'image alt {string}: texte alternatif de l'image (Defaut: 'Image non disponible') size: { width: "180", height: "90" } } } }] }#}{% set props = { form: { action: null, link: { text: null }, }, lang: 'fr'}|merge(props|default({})) %}{% set data = []|merge(data|default({})) %}<div data-component="calendar" class="Calendar-component" data-lang="{{ props.lang }}" data-index="0" data-months="{{ data|json_encode() }}"> <template id='calendarr'> <div class='calendar' v-show="calendarOpen"> <span class="close-calendar" @click='closeCalendar'></span> <div class="calendar-container"> <div class="nav-arrow"> <span class='arrow-next outer-arrow' @click='moveNextMonth'></span> <span class='arrow-prev outer-arrow' @click='movePreviousMonth'></span> </div> <div class='header'> <span class='arrow-prev' @click='movePreviousMonth'></span> <span class='title' @click='moveThisMonth'> {% verbatim %} {{ header.label }} {% endverbatim %} </span> <span class='arrow-next' @click='moveNextMonth'></span> </div> <div class="calendar-content" :class='category'> <div class=' weekdays' v-if="mobile"> <div class="weekday" v-for=' weekday in weekdays'> {% verbatim %} {{ weekday.label_1 }}. {% endverbatim %} </div> </div> <div class='weekdays' v-else> <div class="weekday" v-for='weekday in weekdays'> {% verbatim %} {{ weekday.label }} {% endverbatim %} </div> </div> <div class='week' v-for='week in weeks'> <div class='day' :class='{ discountCanceled: day.discountCanceled, dragFinished: day.dragFinished, hasError: day.hasError || day.errorDiscount || day.tooManyDays, unavailable: !day.isAvailable, discount: (day.informations.discount || day.informations.specialOffer), today: day.isToday, "not-in-month": !day.inMonth, "selected": day.isSelected && !day.dragActive && !day.startsDrag, "dragged": day.isDragged, "end-dragged": day.endsDrag, "end-selected": day.endsSelection && !day.dragActive, "start-selected": (day.startsDrag && day.isDragged) || (day.startsSelection && !day.dragActive) } ' v-for='day in week' @click='$emit("selectDay", day)' @mouseenter='$emit("enterDay", day)'> <span class='day-num'> {% verbatim %} {{ day[dayKey] }} {% endverbatim %} </span> <div class="day-discount" v-if="day[dayInformations].available && !day.hasError && !day.errorDiscount && !day.tooManyDays && day[dayInformations].discount && !day.isDragged && (!day.isSelected || (day.isSelected && day.dragActive))" :class="day[dayInformations].discount ? 'discount' : ''"> <p class="discount-perc" v-if="day[dayInformations].discount"> {% verbatim %} {{ day[dayInformations].discount.perc }} {% endverbatim %} </p> <p v-if="day[dayInformations].discount" class="original-price"> {% verbatim %} {{ day[dayInformations].discount.originalPrice }}€ {% endverbatim %} </p> </div> <div class="day-discount" v-if="day[dayInformations].available && !day.hasError && !day.errorDiscount && !day.tooManyDays && day[dayInformations].specialOffer && !day.isDragged && (!day.isSelected || (day.isSelected && day.dragActive))"> <div class="special-offer"> <p>Offre spéciale</p> <div class="special-offer-svg" @mouseover="$emit('openOffer', day)" @mouseleave="closeOffer"> {% include "component/svg.html.twig" with { props: { name: 'information' } } %} </div> </div> <p class="original-price" v-if="day[dayInformations].specialOffer.originalPrice"> {% verbatim %} {{ day[dayInformations].specialOffer.originalPrice }}€ {% endverbatim %} </p> <div class="offer-msg" v-show="activeDay === day"> <div class="offer-img Image-component"> <img :src="day[dayInformations].specialOffer.img.src" alt="day[dayInformations].specialOffer.img.alt" class="Image-image"/> </div> <p class="offer-title"> {{ 'component.calendar.offreSpeciale'|trans }} <br> {% verbatim %} {{ day[dayInformations].specialOffer.title }} {% endverbatim %} </p> <p class="offer-description"> {% verbatim %} {{ day[dayInformations].specialOffer.description }} {% endverbatim %} </p> </div> </div> <div class="day-price" v-if="day[dayInformations].available && !day.hasError && !day.errorDiscount && !day.tooManyDays && !day.isDragged && (!day.isSelected || (day.isSelected && day.dragActive))"> <p>{{ 'component.calendar.aPartirDe'|trans }}</p> <p :class="day[dayInformations].specialOffer || day[dayInformations].discount ? 'is-discount' : 'price'"> {% verbatim %} {{ day[dayInformations].price }}€ {% endverbatim %} </p> <p v-if="category === 'hotel'">{{ 'component.calendar.laChambre'|trans }}</p> <p v-else>{{ 'component.calendar.parPersonne'|trans }}</p> </div> <div class="day-error" v-if="(day.hasError || day.errorDiscount || day.tooManyDays) && (day.endsDrag || day.endsSelection)"> {% include "component/svg.html.twig" with { props: { name: 'information' } } %} <p> {% verbatim %} {{ errorMsg }} {% endverbatim %} </p> </div> <div class="day-discount total-discount" v-if="((day.startsSelection && !day.dragActive) || day.startsDrag) && day[dayInformations].available && !day.hasError && !day.errorDiscount && !day.tooManyDays && day.hasDiscount && !day.discountCanceled" :class="day[dayInformations].discount ? 'discount' : ''"> <div v-if="totalReducPrice && totalReducPrice > 0"> <p class="discount-perc" v-if="totalPerc"> {% verbatim %} {{ totalPerc }} {% endverbatim %} </p> <p class="original-price" v-if="discountAndFullPrice || day.hasDiscount"> {% verbatim %} {{ totalReducPrice }}€ {% endverbatim %} </p> </div> <div v-else-if="day[dayInformations].discount"> <p class="discount-perc"> {% verbatim %} {{ day[dayInformations].discount.perc }} {% endverbatim %} </p> <p class="original-price" v-if="day[dayInformations].discount.originalPrice"> {% verbatim %} {{ day[dayInformations].discount.originalPrice }}€ {% endverbatim %} </p> </div> <div v-else-if="day[dayInformations].specialOffer"> <p class="original-price" v-if="day[dayInformations].specialOffer.originalPrice"> {% verbatim %} {{ day[dayInformations].specialOffer.originalPrice }}€ {% endverbatim %} </p> </div> </div> <div class="day-price total-price" :class="{isDragged: day.isDragged, endsSelection: day.endsSelection, dragActive: day.dragActive, 'day-discount': day.hasDiscount}" v-if="((day.startsSelection && !day.dragActive) || day.startsDrag) && !day.hasError && !day.errorDiscount && !day.tooManyDays"> <p>{{ 'component.calendar.aPartirDe'|trans }}</p> <p class="price" v-if="totalPrice > 0"> {% verbatim %} {{ totalPrice }}€ {% endverbatim %} </p> <p class="price" v-else> {% verbatim %} {{ day[dayInformations].price }}€ {% endverbatim %} </p> <p v-if="category === 'hotel'">{{ 'component.calendar.laChambre'|trans }}</p> <p v-else>{{ 'component.calendar.parPersonne'|trans }}</p> </div> <div class="day-departure" v-if="((day.endsSelection && !day.dragActive) || (day.endsDrag && !day.startsDrag)) && !day.hasError"> <p>{{ 'component.calendar.departLe'|trans }}</p> <p class="date"> {% verbatim %} {{ day[dayKey] + "/" + day[dayMonth] }} {% endverbatim %} </p> </div> </div> </div> </div> <div class="calendar-mobile"> <div class="sum-up" v-if="totalPrice > 0 && !isCleared"> <div class="final-price" v-if="totalPrice && !errorDay"> <p>{{ 'component.calendar.votreSelection'|trans }} :</p> <p>{{ 'component.calendar.aPartirDe'|trans }}</p> <p class="price"> {% verbatim %} {{ totalPrice }}€ {% endverbatim %} </p> <p v-if="category === 'hotel'">{{ 'component.calendar.laChambre'|trans }}</p> <p v-else>{{ 'component.calendar.parPersonne'|trans }}</p> <p class="date" v-if="departure">{{ 'component.calendar.departLe'|trans }} <span> {% verbatim %} {{ departure }} {% endverbatim %} </span> </p> </div> <div class="sum-up-error" v-if="errorDay"> {% include "component/svg.html.twig" with { props: { name: 'information' } } %} <p class="error-msg"> {% verbatim %} {{ errorMsg }} {% endverbatim %} </p> </div> <div class="calendar-button" @click='sendCalendar' :class="{disabled: hasError || isCleared || !dragFinished }"> {% include "component/form/submit.html.twig" with { props: { text: props.form.link.text } } %} </div> </div> <div class="sum-up-specialOffers" v-if="specialOffers && (totalPrice > 0) && !isCleared "> <p class="offer-intro">{{ 'component.calendar.offresSpecialesIncluses'|trans }} :</p> <div class="offer-msg" v-for="offer in specialOffers"> <div class="offer-img Image-component"> <img :alt="offer.img.alt" :src="offer.img.src" class="Image-image"/> </div> <div class="offer-text"> <p class="offer-title"> {{ 'component.calendar.offreSpeciale'|trans }} <br> {% verbatim %} {{ offer.title }} {% endverbatim %} </p> <p class="offer-description"> {% verbatim %} {{ offer.description }} {% endverbatim %} </p> </div> </div> <div class="calendar-button" @click='sendCalendar' :class="{disabled: hasError || isCleared || !dragFinished }"> {% include "component/form/submit.html.twig" with { props: { text: props.form.link.text } } %} </div> </div> </div> </div> </div> </template> <div id='calendar-app'> <div class="calendar-layout"> <component :is='datePicker' v-model='dateSelection' @drag='dragSelection = $event'></component> </div> </div>{% if props.directementtunnel is not defined or props.directementtunnel == 0 %} {% include "component/calendar_form.html.twig" with { props: props.form } %} {% else %} {% include "component/calendar_form.html.twig" with { form: props.form, id: props.id, directementtunnel: props.directementtunnel, departure: props.departure, arrival: props.arrival, accomodation : props.accomodation, min_days : props.min_days , surtitre: props.surtitre, titre_principal: props.titre_principal, prix_apartir : props.prix_apartir } %}{% endif %} </div>