templates/pages/partials/flight.html.twig line 1

Open in your IDE?
  1. <script id="flightTemplate" type="text/x-jsrender">
  2.      <div data-id="<%:tripId%>" class="flight">
  3.         <div class="row">
  4.             <div class="col-12 col-lg-10">
  5.                 <div class="row is-margin-bottom-25">
  6.                     <div class="col d-md-none">
  7.                         <div class="text-uppercase is-margin-bottom-15 font-weight-bold">Heenvlucht</div>
  8.                         <div class="flight-details">
  9.                             <span class="flight-time"><%:~toHuman(outbound.depart.Time)%></span>
  10.                             <span class="flight-steps">
  11.                                 <%if outbound.legs.length > 1 %>
  12.                                   <%= outbound.legs.length %>x overstap
  13.                                 <%else%>
  14.                                     Direct
  15.                                 <%/if%>
  16.                             </span>
  17.                             <span class="flight-carrier"><%:outbound.carrier.Name%></span>
  18.                         </div>
  19.                         <div class="flight-airports">
  20.                             <span class="flight-airport-departure"><%:outbound.depart.Airport.Name%></span>
  21.                             <span class="flight-airport-dash"> - </span>
  22.                             <span class="flight-airport-arrival"><%:outbound.arrive.Airport.Name%></span>
  23.                         </div>
  24.                     </div>
  25.                     <div class="col d-none d-md-block">
  26.                         <div class="text-uppercase is-margin-bottom-10 font-weight-bold">Heenvlucht (<%:outbound.flightNumber%> | <%:outbound.carrier.Name%> | <%if outbound.legs.length > 1 %><%= outbound.legs.length %>x overstap<%else%>Directe vlucht<%/if%>)</div>
  27.                         <p class="flight-details">
  28.                             <span class="flight-date">
  29.                                 (<%:~moment(outbound.depart.Date, 'YYYY-MM-DD').format('ddd').toLowerCase()%>)
  30.                                 <%:~moment(outbound.depart.Date, 'YYYY-MM-DD').format('L')%>
  31.                             </span>
  32.                             <span class="flight-time"><%:~toHuman(outbound.depart.Time)%></span>
  33.                             <span class="flight-airport"><%:outbound.depart.Airport.Name%></span>
  34.                             <span class="flight-dash"> — </span>
  35.                             <span class="flight-time"><%:~toHuman(outbound.arrive.Time)%></span>
  36.                             <span class="flight-airport"><%:outbound.arrive.Airport.Name%></span>
  38.                         </p>
  39.                         <p>
  40.                         </p>
  41.                     </div>
  42.                 </div>
  43.                 <div class="row is-margin-bottom-25">
  44.                     <div class="col d-md-none">
  45.                         <div class="text-uppercase is-margin-bottom-15 font-weight-bold">Terugvlucht</div>
  46.                         <div class="flight-details">
  47.                             <span class="flight-time"><%:~toHuman(inbound.depart.Time)%></span>
  48.                             <span class="flight-steps">
  49.                                 <%if inbound.legs.length > 1 %>
  50.                                   <%= inbound.legs.length %>x overstap
  51.                                 <%else%>
  52.                                     Direct
  53.                                 <%/if%>
  54.                             </span>
  55.                             <span class="flight-carrier"><%:inbound.carrier.Name%></span>
  56.                         </div>
  57.                         <div class="flight-airports">
  58.                             <span class="flight-airport-departure"><%:inbound.depart.Airport.Name%></span>
  59.                             <span class="flight-airport-dash"> - </span>
  60.                             <span class="flight-airport-arrival"><%:inbound.arrive.Airport.Name%></span>
  61.                         </div>
  62.                     </div>
  63.                     <div class="col d-none d-md-block">
  64.                         <div class="text-uppercase is-margin-bottom-10 font-weight-bold">Terugvlucht (<%:inbound.flightNumber%> | <%:inbound.carrier.Name%> | <%if outbound.legs.length > 1 %><%= inbound.legs.length %>x overstap<%else%>Directe vlucht<%/if%>)</div>
  65.                         <p class="flight-details">
  66.                             <span class="flight-date">
  67.                                 (<%:~moment(inbound.depart.Date, 'YYYY-MM-DD').format('ddd').toLowerCase()%>)
  68.                                 <%:~moment(inbound.depart.Date, 'YYYY-MM-DD').format('L')%>
  69.                             </span>
  70.                             <span class="flight-time"><%:~toHuman(inbound.depart.Time)%></span>
  71.                             <span class="flight-airport"><%:inbound.depart.Airport.Name%></span>
  72.                             <span class="flight-dash"> — </span>
  73.                             <span class="flight-time"><%:~toHuman(inbound.arrive.Time)%></span>
  74.                             <span class="flight-airport"><%:inbound.arrive.Airport.Name%></span>
  75.                         </p>
  76.                         <p>
  77.                         </p>
  78.                     </div>
  79.                 </div>
  80.             </div>
  81.             <div class="col-12 col-lg-2 d-flex is-justify-content-right is-align-items-center">
  82.                 <div class="price align-self-center vr-radio">
  83.                     <div class="vr-radio-default">
  84.                         <input type="radio" name="flight" data-action="select-flight"
  85.                                value="<%:tripId%>"
  86.                                id="<%:tripId%>">
  87.                         <label class="is-font-size-mobile-14 is-margin-bottom-0 text-nowrap" for="<%:tripId%>">+ <%:price%> p.p.</label>
  88.                     </div>
  89.                 </div>
  90.             </div>
  91.         </div>
  92.     </div>
  94. </script>
  96. <div class="component checkout-step-panel" data-type="flight-list" id="flightScroll" data-checkout-step="flightScroll"
  97.      {% if basket.flightList is empty %}style="display:none;"{% endif %}>
  98.     <form action="">
  99.         <div class="whitebox">
  100.             <div class="row">
  101.                 <div class="col-12">
  102.                     <h3 class="text-center strike">
  103.                         <span>Jouw <span>vlucht</span></span>
  104.                     </h3>
  105.                     <h4 class="pb-3 is-line-height-mobile-15 mb-4 mb-md-0">
  106.                         Kies je vlucht uit de beschikbare vluchten op jouw reisdata
  107.                     </h4>
  108.                     <div class="alert alert-info checkout-info-panel" role="alert">
  109.                         <p class="flight-helptext text-center mb-0 checkout-info-panel-text"><i class="fas fa-info-circle" aria-hidden="true"></i><strong>Geen vluchten gevonden? Selecteer een alternatief vliegveld.</strong></p>
  110.                     </div>
  111.                     <div class="alert alert-secondary checkout-offerte-alert mt-3" role="alert">
  112.                         Liever volledig ontzorgt? Vraag een <a href="/offerteaanvraag" class="alert-link">offerte aan</a>
  113.                     </div>
  114.                 </div>
  115.             </div>
  116.             <div class="row">
  117.                 <div class="form-group col-12 col-sm-6 select-airport">
  118.                     <div class="flex-even">
  119.                         <label>Vertrek</label>
  120.                         <select class="select-select2" name="airport">
  121.                             {% set countries = {'Nederland': 'NL', 'Duitsland': 'DE', 'België': 'BE'} %}
  122.                             {% for country, code in countries %}
  123.                                 <optgroup label="{{ country }}">
  124.                                     <option label="{{ country }}" value="{{ code }}">Alle vliegvelden
  125.                                         in {{ country }}</option>
  126.                                     {% for airport in airports if airport.airportCountryCode == code %}
  127.                                         <option label="{{ airport.airportName }}" value="{{ airport.airportId }}">
  128.                                             {{ airport.airportName }} ({{ airport.airportCode }})
  129.                                         </option>
  130.                                     {% endfor %}
  131.                                 </optgroup>
  132.                             {% endfor %}
  133.                         </select>
  134.                     </div>
  135.                 </div>
  136.                 <div class="form-group col-12 col-sm-6 select-airport">
  137.                     <div class="flex-even">
  138.                         <label>Aankomst</label>
  139.                         <select class="select-select2 select-airport" id="arriveAirportSelect" name="arrive_airport">
  140.                             {% for id,airport in arriveAirports %}
  141.                                 <option label="{{ airport.name }}"
  142.                                         value="{{ id }}" {{ basket.airport == id ? 'selected="selected"' : '' }}>
  143.                                     {{ airport.name }} ({{ airport.code }})
  144.                                 </option>
  145.                             {% endfor %}
  146.                         </select>
  147.                     </div>
  148.                 </div>
  149.             </div>
  150.             <div class="row">
  151.                 <div class="col-12">
  152.                     <div class="alert alert-success is-padding-20 is-margin-bottom-30 text-justify">
  153.                         <p class="is-margin-bottom-0"><strong>Tip!</strong> Indien de prijzen van de beschikbare
  154.                             vluchten op jouw reisdata hoog uitvallen of als je geen vlucht kunt vinden op een tijdstip
  155.                             dat je wenst, mogelijk is een vertrek vanaf een alternatieve luchthaven of op een andere
  156.                             datum dan een betere optie? Voor iedere keuze kun je 'live' de beschikbare opties en prijzen
  157.                             bekijken.</p>
  158.                     </div>
  159.                     <div style="display:none;" data-type="noFlight"
  160.                          class="alert alert-warning is-padding-20 is-rounded-5 is-margin-bottom-30 is-padding-left-50"
  161.                          role="alert">
  162.                         <p><i class="fas fa-exclamation-triangle icon-before"></i> <strong>Geen vluchten
  163.                                 gevonden.</strong></p>
  164.                         <p>Helaas zijn er geen vluchten beschikbaar die overeenkomen met je zoekcriteria.</p>
  165.                         <p>Dit kan ook komen doordat de verwachte aankomsttijd van de beschikbare heenvlucht(en) te kort
  166.                             op het (actuele) aanvangstijdstip van de wedstrijd ligt.
  167.                             Om te voorkomen dat je de aftrap zou missen tonen we in ons aanbod geen vluchten waarbij je
  168.                             korter dan 6 uur voor de aftrap pas in de speelstad aankomt.</p>
  169.                         <p class="mb-0">Wijzig je reisroute en/of je reisdata en probeer het opnieuw. Hulp nodig? Wij
  170.                             staan voor je klaar!</p>
  171.                     </div>
  172.                 </div>
  173.                 <div class="col-12">
  174.                     <div class="flightlist" data-list="flights">
  175.                         {% for trip in basket.flightListNormalized %}
  176.                             <div class="flight">
  177.                                 <div class="row">
  178.                                     <div class="col-12 col-lg-10">
  179.                                         <div class="row is-margin-bottom-25">
  180.                                             <div class="col d-md-none">
  181.                                                 <div class="text-uppercase is-margin-bottom-15 font-weight-bold">
  182.                                                     Heenvlucht
  183.                                                 </div>
  184.                                                 <div class="flight-details">
  185.                                                     <span class="flight-time">{{ trip.outbound.depart.Time|humanTime }}</span>
  186.                                                     <span class="flight-steps">
  187.                                                         {% if trip.outbound.legs|length > 1 %}
  188.                                                             {{ trip.outbound.legs|length }}x overstap
  189.                                                         {% else %}
  190.                                                             Direct
  191.                                                         {% endif %}
  192.                                                     </span>
  193.                                                     <span class="flight-carrier">{{ trip.outbound.carrier.name }}</span>
  194.                                                 </div>
  195.                                                 <div class="flight-airports">
  196.                                                     <span class="flight-airport-departure">{{ trip.outbound.depart.Airport.Name }}</span>
  197.                                                     <span class="flight-airport-dash"> - </span>
  198.                                                     <span class="flight-airport-arrival">{{ trip.outbound.arrive.Airport.Name }}</span>
  199.                                                 </div>
  200.                                             </div>
  201.                                             <div class="col d-none d-md-block">
  202.                                                 <div class="text-uppercase is-margin-bottom-10 font-weight-bold">
  203.                                                     Heenvlucht ({{ trip.outbound.flightNumber }}
  204.                                                     | {{ trip.outbound.carrier.name }} |
  205.                                                     {% if trip.outbound.legs|length > 1 %}{{ trip.outbound.legs|length }}x overstap{% else %}Directe vlucht{% endif %})
  206.                                                 </div>
  207.                                                 <p class="flight-details">
  208.                                                     <span class="flight-date">{{ trip.outbound.depart.Date|localizeddate('none', 'none', app.request.locale, null, '(eeeeee) dd-MM-YYYY') }}</span>
  209.                                                     <span class="flight-time">{{ trip.outbound.depart.Time|humanTime }}</span>
  210.                                                     <span class="flight-airport">{{ trip.outbound.depart.Airport.Name }}</span>
  211.                                                     <span class="flight-dash"> — </span>
  212.                                                     <span class="flight-time">{{ trip.outbound.arrive.Time|humanTime }}</span>
  213.                                                     <span class="flight-airport">{{ trip.outbound.arrive.Airport.Name }}</span>
  214.                                                     {#                                                    <span class="flight-number">{{ trip.outbound.flightNumber }}</span> #}
  215.                                                     {#                                                    <span class="flight-carrier">{{ trip.outbound.carrier.name }}</span> #}
  217.                                                 </p>
  218.                                             </div>
  219.                                         </div>
  220.                                         <div class="row is-margin-bottom-25">
  221.                                             <div class="col d-md-none">
  222.                                                 <div class="text-uppercase is-margin-bottom-15 font-weight-bold">
  223.                                                     Terugvlucht
  224.                                                 </div>
  225.                                                 <div class="flight-details">
  226.                                                     <span class="flight-time">{{ trip.inbound.depart.Time|humanTime }}</span>
  227.                                                     <span class="flight-steps">
  228.                                                         {% if trip.inbound.legs|length > 1 %}
  229.                                                             {{ trip.inbound.legs|length }}x overstap
  230.                                                         {% else %}
  231.                                                             Direct
  232.                                                         {% endif %}
  233.                                                     </span>
  234.                                                     <span class="flight-carrier">{{ trip.inbound.carrier.name }}</span>
  235.                                                 </div>
  236.                                                 <div class="flight-airports">
  237.                                                     <span class="flight-airport-departure">{{ trip.inbound.depart.Airport.Name }}</span>
  238.                                                     <span class="flight-airport-dash"> - </span>
  239.                                                     <span class="flight-airport-arrival">{{ trip.inbound.arrive.Airport.Name }}</span>
  240.                                                 </div>
  241.                                             </div>
  242.                                             <div class="col d-none d-md-block">
  243.                                                 <div class="text-uppercase is-margin-bottom-10 font-weight-bold">
  244.                                                     Terugvlucht ({{ trip.inbound.flightNumber }}
  245.                                                     | {{ trip.inbound.carrier.name }} | {% if trip.inbound.legs|length > 1 %}{{ trip.inbound.legs|length }}x overstap{% else %}Directe vlucht{% endif %})
  246.                                                 </div>
  247.                                                 <p class="flight-details">
  248.                                                     <span class="flight-date">{{ trip.inbound.depart.Date|localizeddate('none', 'none', app.request.locale, null, '(eeeeee) dd-MM-YYYY') }}</span>
  249.                                                     <span class="flight-time">{{ trip.inbound.depart.Time|humanTime }}</span>
  250.                                                     <span class="flight-airport">{{ trip.inbound.depart.Airport.Name }}</span>
  251.                                                     <span class="flight-dash"> — </span>
  252.                                                     <span class="flight-time">{{ trip.inbound.arrive.Time|humanTime }}</span>
  253.                                                     <span class="flight-airport">{{ trip.inbound.arrive.Airport.Name }}</span>
  254.                                                     {#                                                    <span class="flight-number">{{ trip.inbound.flightNumber }}</span> #}
  255.                                                     {#                                                    <span class="flight-carrier">{{ trip.inbound.carrier.name }}</span> #}
  256.                                                                                                     </p>
  257.                                             </div>
  258.                                         </div>
  259.                                     </div>
  260.                                     <div class="col-12 col-lg-2 d-flex is-justify-content-right is-align-items-center">
  261.                                         <div class="price align-self-center vr-radio">
  262.                                             <div class="vr-radio-default">
  263.                                                 <input type="radio" name="flight" data-action="select-flight"
  264.                                                        value="{{ trip.tripId }}"
  265.                                                        id="{{ trip.tripId }}" {{ basket.flight == trip.tripId ? 'checked' : '' }}>
  266.                                                 <label class="is-margin-bottom-0 text-nowrap"
  267.                                                        for="{{ trip.tripId }}">+ {{ trip.price }} p.p.</label>
  268.                                             </div>
  269.                                         </div>
  270.                                     </div>
  271.                                 </div>
  272.                             </div>
  273.                         {% endfor %}
  274.                     </div>
  275.                 </div>
  276.             </div>
  278.             <div class="row messageShowFlightpriceInformation"
  279.                  {% if basket.flightListNormalized %}style="display: block;"
  280.                  {% else %}style="display: none;"{% endif %}>
  281.                 <div class="col-12 text-center">
  282.                     <p><br/>Getoonde vluchtprijzen zijn vanaf-prijzen op retourbasis en per persoon.<br/>
  283.                         <br/>
  284.                         Prijzen kunnen nog wijzigen afhankelijk van beschikbaarheid op het moment van boeken.
  285.                     </p>
  287.                     <div class="d-flex align-items-center justify-content-center flex-wrap flight-buttons checkout-step-actions">
  288.                         <button type="button" class="is-btn mr-3 checkout-prev-step" data-scroll="roomsScroll">
  289.                             <span>Vorige</span> stap
  290.                         </button>
  291.                         <a class="is-btn is-background-color-base stroke-alt"
  292.                            href="{{ path('checkout', {'id': match.id}) }}?step=2">
  293.                             Vul <span>reizigersgegevens</span> in
  294.                         </a>
  295.                     </div>
  296.                 </div>
  297.             </div>
  299.         </div>
  300.     </form>
  301. </div>