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

Open in your IDE?
  1. <script id="roomsLayout" type="text/x-jsrender">
  2.       <div class="col-12 col-md-6 col-lg-4 " id="room-<%:key %>">
  3.         <div class="form-group">
  4.             <label class="d-block">Aantal personen in Kamer <%:key%></label>
  5.               <select name="personsInRoom<%:key%>" class="select-select2-hide-search ml-0 mr-3 roomlayout" style="width:250px; height: 50px; padding: 5px; text-align: left;">
  6.                 <option value="1" <%if chosenunit["numberpersons"] == 1 %> selected="selected" <%/if%>>1</option>
  7.                 <option value="2" <%if chosenunit["numberpersons"] == 2 %> selected="selected" <%/if%>>2</option>
  8.                 <option value="3" <%if chosenunit["numberpersons"] == 3 %> selected="selected" <%/if%>>3</option>
  9.                 <option value="4" <%if chosenunit["numberpersons"] == 4 %> selected="selected" <%/if%>>4</option>
  10.             </select>
  11.         </div>
  12.       </div>
  14.         <div class="col-12 col-md-6 col-lg-4 rooms-amount-wrapper is-margin-bottom-15">
  15.             <div class="form-group rooms-amount">
  16.                 <label></label>
  17.                 <a href="#" data-scroll="matchComposer" class="small is-color-blue">Aantal kamers wijzigen</a>
  18.             </div>
  19.         </div>
  20. </script>
  21. <script id="roomsTemplate" type="text/x-jsrender">
  22.     <div class="room-option" id="room-<%:key%>">
  23.         <div class="col-12 d-flex rooms-table-header">
  24.             <div class="descr"><strong>Kamer <%:key%></strong></div>
  25.             <div class="boards pl-4"><strong>Verzorging</strong></div>
  26.             <div class="price"><strong>Meerprijs</strong></div>
  27.         </div>
  28.         <div class="col-12 rooms">
  29.             <%for units %>
  30.                 <%if Occupancy.Maximal >= #parent.parent.data.chosenunit["numberpersons"] %>
  31.                     <div class="roomline d-flex flex-wrap" data-maxoccupation="<%: Occupancy.Maximal %>" data-boards="<%for Boards%><%:Name%><%/for%>">
  32.                         <div class="vr-radio">
  33.                             <div class="input form-check pl-0 vr-radio-default hover-color">
  34.                                 <input type="radio" id="" name="room<%:#parent.parent.parent.data.key%>" id="" value="<%:~stripspaces(Description) %><%:~stripspaces(Type) %><%for Boards%><%:~stripspaces(Name)%><%/for%>" class="roomSelection form-check-input" <%if #parent.parent.parent.data.chosenunit["roomtype"] == gnid %> checked="checked" <%/if%>>
  35.                                 <label for="" class="form-check-label vr-stadion-check d-flex">
  36.                                     <span class="room-descr"><%:~stripspaces(Description) %></span>
  37.                                     <span class="room-boards"><%for Boards%><%:Name%><%/for%></span>
  38.                                     <span class="price">
  39.                                         <%for Prices%>
  40.                                             <%:~formatPriceDifference7(Price.Value,#parent.parent.parent.parent.parent.data.chosenunit["numberpersons"],#parent.parent.parent.parent.parent.data.chosenunit["original"])%>,-
  41.                                         <%/for%>
  42.                                          p.p.</span>
  43.                                     </span>
  44.                                 </label>
  45.                             </div>
  46.                         </div>
  47.                     </div>
  48.                 <%/if%>
  49.             <%/for %>
  50.         </div>
  51.     </div>
  52.     <div class="col-12 mb-5">
  53.         <a data-toggle="modal" data-target="#room-info" href="#"><i class="fas fa-info-circle blue mr-2"></i>Uitleg kamertypes</a>
  54.     </div>
  56. </script>
  58. <div style="display:none;" data-type="noRooms"
  59.      class="alert alert-warning is-padding-20 is-rounded-5 is-margin-bottom-30 is-padding-left-50" role="alert">
  60.     <i class="fas fa-exclamation-triangle icon-before"></i> Er konden helaas geen kamers gevonden worden.
  61. </div>
  63. <div class="component checkout-step-panel" data-type="rooms" id="roomsScroll" data-checkout-step="roomsScroll"
  64.      {% if accommodation is empty %}style="display:none;"{% endif %}>
  65.     <div class="whitebox">
  66.         <div class="row">
  67.             <div class="col-12">
  68.                 <h3 class="text-center strike">
  69.                     <span>Jouw <span>kamer(s)</span></span>
  70.                 </h3>
  71.                 <h4 class="is-line-height-mobile-15" data-list="hotelroomname">
  72.                     {% if accommodation is empty %}
  73.                         Selecteer eerst je hotel
  74.                     {% else %}
  75.                         Kies je kamerindeling in {{ accommodation.Name }}
  76.                     {% endif %}
  77.                 </h4>
  78.                 <div class="alert alert-info checkout-info-panel" role="alert">
  79.                     <p class="rooms-helptext text-left mb-0 checkout-info-panel-text"><i class="fas fa-info-circle" aria-hidden="true"></i>Meerdere personen? Kies meerdere kamers om beschikbaarheid te zien.</p>
  80.                 </div>
  81.                 <div class="alert alert-secondary checkout-offerte-alert mt-3" role="alert">
  82.                     Liever volledig ontzorgt? Vraag een <a href="/offerteaanvraag" class="alert-link">offerte aan</a>
  83.                 </div>
  84.             </div>
  85.         </div>
  86.         <div class="row roomslist" data-list="rooms-layout">
  87.             {% for i in range(1,basket.rooms) %}
  88.                 {% if chosenUnits and chosenUnits[i] is defined %}
  89.                     <div class="col-12 col-md-6 col-lg-4" id="room-{{ i }}">
  90.                         <div class="form-group">
  91.                             <label class="d-block">Aantal personen in Kamer {{ i }}</label>
  92.                             <select name="personsInRoom{{ i }}" class="select-select2-hide-search ml-0 mr-3 roomlayout">
  93.                                 <option value="1"
  94.                                         {% if chosenUnits[i]['numberpersons'] == 1 %}selected="selected"{% endif %}>1
  95.                                 </option>
  96.                                 <option value="2"
  97.                                         {% if chosenUnits[i]['numberpersons'] == 2 %}selected="selected"{% endif %}>2
  98.                                 </option>
  99.                                 <option value="3"
  100.                                         {% if chosenUnits[i]['numberpersons'] == 3 %}selected="selected"{% endif %}>3
  101.                                 </option>
  102.                                 <option value="4"
  103.                                         {% if chosenUnits[i]['numberpersons'] == 4 %}selected="selected"{% endif %}>4
  104.                                 </option>
  105.                             </select>
  106.                         </div>
  107.                     </div>
  108.                 {% endif %}
  109.             {% endfor %}
  110.             <div class="col-12 col-md-6 col-lg-4 is-margin-bottom-15">
  111.                 <div class="form-group rooms-amount">
  112.                     <a href="#" data-scroll="matchComposer" class="small is-color-blue">Aantal kamers wijzigen</a>
  113.                 </div>
  114.             </div>
  115.         </div>
  116.         <div class="row roomresetbutton">
  117.             <div class="col-12 mb-5">
  118.                 <button class="is-btn mr-3 reset-room-layout small is-background-color-base stroke">
  119.                     Kamerindeling <span>wijzigen</span>
  120.                 </button>
  121.             </div>
  122.         </div>
  123.         <div class="row roomslist boardtype roomboardstype hide-on-room-change">
  124.             <div class="col-12">
  125.                 <h4 class="is-margin-bottom-10 is-line-height-mobile-15">Kies je type verzorging en kamer</h4>
  126.             </div>
  127.             <div class="col-12 col-md-6 col-lg-4 mb-5">
  128.                 <div class="form-group">
  129.                     <label class="d-block">Verzorging</label>
  130.                     <select name="boardtype" class="select-select2-hide-search boardtype">
  131.                         {% set boards = [] %}
  132.                         {% if accommodation is not empty %}
  133.                             {% for room in accommodation.Units %}
  134.                                 {% if room.Boards.0.Name not in boards  %}
  135.                                     <option value="{{ room.Boards.0.Name }}">{{ room.Boards.0.Name }}</option>
  136.                                     {% set boards = boards|merge([room.Boards.0.Name]) %}
  137.                                 {%  endif %}
  138.                             {% endfor %}
  139.                         {% endif %}
  140.                     </select>
  141.                 </div>
  142.             </div>
  143.         </div>
  144.         <div class="row roomslist hide-on-room-change" data-list="rooms">
  145.             {% for i in range(1,basket.rooms) %}
  146.                 {% if chosenUnits and chosenUnits[i] is defined %}
  147.                     <div class="room-option" id="room-{{ loop.index }}">
  148.                         <div class="col-12 d-flex rooms-table-header">
  149.                             <div class="descr"><strong>Kamer {{ i }}</strong></div>
  150.                             <div class="boards pl-4"><strong>Verzorging</strong></div>
  151.                             <div class="price"><strong>Meerprijs</strong></div>
  152.                         </div>
  153.                         <div class="col-12 rooms">
  154.                             {% if accommodation is not empty %}
  155.                                 {% for room in accommodation.Units %}
  156.                                     {% if room.Occupancy.Maximal >= chosenUnits[i]['numberpersons'] %}
  157.                                         <div class="roomline d-flex flex-wrap"
  158.                                              data-maxoccupation="{{ room.Occupancy.Maximal }}" data-boards="{{ room.Boards.0.Name }}">
  159.                                             <div class="vr-radio">
  160.                                                 <div class="input form-check pl-0 vr-radio-default hover-color">
  161.                                                     <input type="radio" id="" name="room{{ i }}" id=""
  162.                                                            value="{{ room.Description }}{{ room.Type }}{{ room.Boards.0.Name }}"
  163.                                                            class="roomSelection form-check-input"
  164.                                                            {% if chosenUnits[i]['roomtype'] == room.gnid %}checked="checked"{% endif %}>
  165.                                                     <label for="" class="form-check-label vr-stadion-check d-flex">
  166.                                                         <span class="room-descr">{{ room.Description }}</span>
  167.                                                         <span class="room-boards">{{ room.Boards.0.Name }}</span>
  168.                                                         <span class="price">
  169.                                                         {{ (((room.Prices.0.Price.Value/chosenUnits[i]['numberpersons'])-chosenUnits[i]['original'])/100)|round(0, 'ceil') < 0 ? '-' : '+' }} {{ (((room.Prices.0.Price.Value/chosenUnits[i]['numberpersons'])-chosenUnits[i]['original'])/100)|round(0, 'ceil')|replace({'-': ""}) }},- p.p.
  170.                                                     </span>
  171.                                                     </label>
  172.                                                 </div>
  173.                                             </div>
  174.                                         </div>
  175.                                     {% endif %}
  176.                                 {% endfor %}
  177.                             {% endif %}
  178.                         </div>
  179.                     </div>
  180.                 {% endif %}
  181.             {% endfor %}
  182.             <div class="col-12 mb-5">
  183.                 <a data-toggle="modal" data-target="#room-info" href="#" class="room-info-link"><i
  184.                             class="fas fa-info-circle mr-2"></i>Uitleg kamertypes</a>
  185.             </div>
  186.         </div>
  187.         <button class="is-btn mr-3 is-margin-bottom-45 small save-rooms hide-on-room-change is-background-color-base stroke">
  188.             Kamerselectie <span>opslaan</span>
  189.         </button>
  190.         <br>
  191.         <div class="alert alert-success is-padding-20 is-rounded-5 is-margin-bottom-30 is-padding-left-50 mt-0 alert-succes-room"
  192.              role="alert">
  193.             {% if match.hasFlight == 0 %}
  194.                 <p><i class="fas fa-check-circle icon-before"></i> <strong>Gelukt! Je kamerselectie is succesvol
  195.                         opgeslagen.</strong></p>
  196.                 <p>Je hebt je reis nu op maat samengesteld en kunt verder gaan met invullen van de
  197.                     reizigersgegevens.</p>
  198.                 <p>Boek je reis direct om beschikbaarheid te garanderen en prijswijzigingen te voorkomen.</p>
  199.             {% else %}
  200.                 <p><i class="fas fa-check-circle icon-before "></i> <strong>Gelukt! Je kamerselectie is succesvol
  201.                         opgeslagen.</strong></p>
  202.                 <p>Je hebt je reis nu op maat samengesteld en kunt verder gaan met invullen van de
  203.                     reizigersgegevens.</p>
  204.                 <p>Wil je ook direct je vlucht via ons bijboeken? Klik dan op <strong>Vlucht bijboeken</strong> en wij
  205.                     tonen je de actuele beschikbaarheid en prijzen van vluchten vanuit Nederland, België en Duitsland
  206.                     naar jouw bestemming.</p>
  207.                 <p>Boek je reis direct om beschikbaarheid te garanderen en prijswijzigingen te voorkomen.</p>
  208.             {% endif %}
  209.         </div>
  210.         <div class="alert alert-danger is-padding-20 is-rounded-5 is-margin-bottom-30 is-padding-left-50 mt-0 alert-danger-room"
  211.              role="alert">
  212.             <p><i class="fas fa-times-circle"></i> <strong>Mislukt! Deze kamerindeling is niet beschikbaar in dit
  213.                     hotel.</strong></p>
  214.             <p>Helaas is deze kamerindeling in het geselecteerde hotel niet mogelijk en zijn er geen kamers (meer)
  215.                 beschikbaar voor
  216.                 deze kamerindeling. Wellicht dat een andere verdeling van het aantal personen over de beschikbare kamers
  217.                 wel nog
  218.                 mogelijk is in dit hotel? Pas hiervoor het aantal personen in een kamer aan.</p>
  219.             <p>Kies voor een andere kamerindeling of selecteer een ander hotel en probeer het opnieuw.</p>
  220.         </div>
  221.         <div class="row mt-0">
  222.             <div class="col-12 d-flex flex-column flex-sm-row flex-wrap justify-content-center align-items-center hotel-button-wrapper checkout-step-actions">
  223.                 <button type="button" class="is-btn checkout-prev-step mr-3" data-scroll="stadiumCategories">
  224.                     <span>Vorige</span> stap
  225.                 </button>
  226.                 <!--(begin) Zichtbaar maken wanneer reis met vlucht beschikbaar is (backend optie vlucht aan/uit). -->
  227.                 {% if match.hasFlight == 1 %}
  228.                     <button class="select-flight is-btn hide-on-room-change is-background-color-black stroke-alt"
  229.                             data-scroll="flightScroll">
  230.                         <span>Vlucht</span> bijboeken
  231.                         <i class="fas fa-plane-departure icon-right"></i>
  232.                     </button>
  233.                 {% endif %}
  234.                 <!-- (eind) zichtbaar maken wanneer reis met vlucht beschikbaar is (backend optie vlucht aan/uit) -->
  236.                 <!-- Bij deze knop class ml-5 weghalen als er geen vlucht optie is -->
  237.                 <a class="is-btn next-step hide-on-room-change is-background-color-base stroke"
  238.                    href="{{ path('checkout', {'id': match.id}) }}?step=2">
  239.                     Vul <span>reizigersgegevens</span> in</i>
  240.                 </a>
  241.             </div>
  242.         </div>
  243.     </div>
  244. </div>
  246. <div class="modal fade" id="room-info" tabindex="-1" role="dialog" aria-hidden="true">
  247.     <div class="modal-dialog modal-lg" role="document">
  248.         <div class="modal-content">
  249.             <div class="modal-header">
  250.                 <h5 class="modal-title">
  251.                     Uitleg kamertypes
  252.                 </h5>
  253.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  254.                     <span aria-hidden="true">&times;</span>
  255.                 </button>
  256.             </div>
  257.             <div class="modal-body text-justify">
  258.                 <p>De beschikbare kamertypes kunnen op verschillende manieren in deze lijst worden weergegeven.</p>
  259.                 <p>Middels deze uitleg geven we je graag meer informatie over de verschillende type kamers die er
  260.                     zijn.</p>
  263.                 <p><strong>Kamertype op basis van KAMERINDELING</strong>
  265.                 <p>Het kamertype op basis van kamerindeling zegt iets over de hoeveelheid ruimte en de faciliteiten van
  266.                     de kamer. De volgende kamertypes op basis van kamerindeling komen het meeste voor:</p>
  268.                 <p><strong>Budget of economy room:</strong> Dit zijn de voordeligste kamers in een hotel. De
  269.                     voorzieningen en faciliteiten in een economy kamer zijn vaak eenvoudiger dan bij een standaard of
  270.                     luxueuzere kamer. Venzelfsprekend verschillen de exacte kenmerken van een economy kamer per hotel.
  271.                 </p>
  273.                 <p><strong>Standard room:</strong> Het kamertype waar er wereldwijd het meest van zijn in een hotel.
  274.                     Vaak een één- of tweepersoonskamer met een tweepersoonsbed of twee aparte eenpersoonsbedden en
  275.                     standaard faciliteiten op de kamer.</p>
  277.                 <p><strong>Comfort room:</strong> Dit kamertype biedt dezelfde faciliteiten als de standard room, maar
  278.                     is groter qua oppervlakte.</p>
  280.                 <p><strong>Deluxe of superior room:</strong> De luxere versie van de standaard kamer. Dit kamertype is
  281.                     vaak wat ruimer en heeft bijvoorbeeld een zithoek, een ruimere badkamer of mooier uitzicht. Het
  282.                     verschil tussen deluxe of superior is het bedtype. Superior gaat vaak gepaard met een queen-bed,
  283.                     deluxe met een king-bed.</p>
  285.                 <p><strong>Studio:</strong> Een studio is een accommodatietype dat doorgaans bestaat uit een
  286.                     eenkamerverblijf met een bed, woonkamergedeelte, keukengedeelte, badkamer en toilet.</p>
  288.                 <p><strong>Suite:</strong> Het kenmerk van een suite is dat deze bestaat uit meerdere verblijfsruimtes,
  289.                     meestal met een aparte slaap- en leefruimte. De exacte voorzieningen hangen af van het betreffende
  290.                     hotel. Een suite is altijd luxueuzer dan de andere (standaard) hotelkamers.</p>
  292.                 <p><strong>Apartment / Aparthotel:</strong> Een appartement functioneert als een volledig zelfstandige
  293.                     woning en gaat vaak gepaard met een kitchenette of zelfs een volledige keuken. In een aparthotel
  294.                     zijn de kamers vaak groter, deze kamers lijken op een appartement, met veelal de hiervoor genoemde
  295.                     voorzieningen op de kamer. Het ontbijt dient meestal zelf verzorgd te worden.</p>
  297.                 <p><strong>Kamertype op basis van BEZETTING</strong>
  299.                 <p>Het kamertype op basis van bezetting geeft aan voor hoeveel personen de kamer ruimte biedt.</p>
  301.                 <p><strong>Eenpersoonskamer (Single-room):</strong> Een hotelkamer met een eenpersoonsbed, geschikt voor
  302.                     één persoon. Afhankelijk van de standaard van het hotel kan de kamergrootte variëren van 8 tot 14
  303.                     m². Een eenpersoonskamer kan een kwalitatief minder en/of minder gunstig gelegen kamer zijn dan
  304.                     bijvoorbeeld een tweepersoonskamer in dezelfde accommodatie.</p>
  306.                 <p><strong>Tweepersoonskamer voor alleengebruik (Double room for single use):</strong> Een standaard
  307.                     tweepersoonskamer voor één persoon. Deze kamers zijn ruimer dan de single-room en de prijs van de
  308.                     kamer is gebaseerd op gebruik door slechts één persoon. In de kamer kan een tweepersoonsbed of twee
  309.                     aparte bedden staan. </p>
  311.                 <p><strong>Tweepersoonskamer met 2 aparte bedden (Twin-room):</strong> Een standaard tweepersoonskamer
  312.                     waarin twee eenpersoonsbedden staan. </p>
  314.                 <p><strong>Tweepersoonskamer (Double-room):</strong> Een standaard tweepersoonskamer, maar dan met één
  315.                     tweepersoonsbed op de kamer. Dit kamertype komt wereldwijd het vaakst voor in de hotels. </p>
  317.                 <p><strong>Driepersoonskamer (Triple room):</strong> Een kamer voor drie personen, in veel gevallen een
  318.                     tweepersoonskamer met een extra eenpersoonsbed of slaapbank op de kamer.</p>
  320.                 <p><strong>Vierpersoonskamer (Quad room):</strong> Een kamer voor vier personen, waarin twee
  321.                     tweepersoonsbedden, een tweepersoonsbed en twee losse bedden, vier losse bedden of een
  322.                     tweepersoonsbed en een slaapbank kunnen staan.</p>
  324.                 <p><strong>Familiekamer:</strong> Een kamer voor maximaal twee volwassenen en twee kinderen. Afhankelijk
  325.                     van de accommodatie kan dit ook een twee- of driepersoonskamer zijn waar een extra eenpersoonsbed,
  326.                     bedbank, opklapbed of stapelbed voor de 3e en/of 4e persoon wordt bijgeplaatst.</p>
  328.                 <p><strong>Kamertype op basis van BEDTYPE</strong></p>
  330.                 <p>Een kamer op basis van bedtype omschrijft welk soort bed je kunt aantreffen in de hotelkamer.
  331.                     De meest voorkomende bedtypes voor hotelkamers zijn:</p>
  333.                 <p><strong>Single:</strong> Een kamer met een eenpersoonsbed</p>
  335.                 <p><strong>Twin:</strong> Een kamer met twee eenpersoonsbedden</p>
  337.                 <p><strong>Double:</strong> Een kamer met een tweepersoonsbed</p>
  339.                 <p><strong>Queen:</strong> Een kamer met een queen-size bed (groot tweepersoonsbed met een matrasmaat
  340.                     van ongeveer 153-160 x 203 cm)</p>
  342.                 <p><strong>King:</strong> Een kamer met een king-size bed (groot tweepersoonsbed, groter dan een
  343.                     queensize bed, met een matras van ongeveer 200-203 x 210 cm)</p>
  345.                 <p><i><strong>Belangrijk!</strong> Heb je een speciaal verzoek ten aanzien van je kamerreservering neem
  346.                         dan voorafgaand aan je vertrek zelf (telefonisch of per e-mail) contact op met het
  347.                         desbetreffende hotel om jouw verzoek door hen te laten bevestigen. Kamervoorkeuren, bijv. voor
  348.                         een bepaald bedtype (tweepersoonsbed / twee aparte bedden op de kamer), dienen ondanks de keuze
  349.                         die je in onze lijst met beschikbare kamertypes maakt door het hotel bevestigd te worden. Vele
  350.                         hotels hanteren namelijk het beleid dat een kamervoorkeur voor een bepaald bedtype niet 100% kan
  351.                         worden gegarandeerd en onderhevig is aan beschikbaarheid bij het inchecken in het hotel. Dit
  352.                         geldt ook voor eventuele andere speciale verzoeken die je zou kunnen hebben zoals vroege / late
  353.                         in- en/of uitcheck, rokers- / niet-rokerskamer, zeezicht, ligging kamer et cetera. Eventuele
  354.                         toeslagen kunnen van toepassing zijn.</i></p>
  357.             </div>
  358.             <div class="modal-footer">
  359.                 <button type="button" class="is-btn is-background-color-black stroke is-margin-bottom-15"
  360.                         data-dismiss="modal">Sluiten
  361.                 </button>
  362.             </div>
  363.         </div>
  364.     </div>
  365. </div>