src/Elements/Bundle/DemiFrontendBundle/Resources/views/Infrastructure/includes/filter-sidebar.html.twig line 1

Open in your IDE?
  1. <div class="col-sm-3 demi-infrastructure-sidebar col">
  2.     <div class="demi-infrastructure-sidebar__hl">
  3.         {{ 'demi.infrastructure.filter-to' | trans }}
  4.     </div>
  5.     <section class="demi-infrastructure-sidebar__box">
  6.         <div class="text-muted sr-only">{{ 'sr.demi.infrastructure.your-choice' | trans }}</div>
  7.         <div class="js-quick-filter-bar"></div>
  8.     </section>
  10.     <div class="demi-infrastructure-sidebar__filters panel-group js-filter-form">
  11.         <form action="" data-action="{{ actionPath }}"
  12.               class="js-demi-ajax-form__form {{ isAjax ? '' :'js-action-changer' }}"
  13.               method="get" id="filter-form">
  15.             {% if not pimcore_relations('regions') is empty and showTownFilter %}
  16.                 <section class="demi-infrastructure-sidebar__box panel">
  17.                     <div class="demi-infrastructure-sidebar__head collapsed" data-toggle="collapse"
  18.                          data-parent="#filter-form" data-target="#filter-region" role="button">
  19.                         <div
  20.                             class="row row-gutter--2 justify-content-center arrange arrange--withGutter-8 arrange--middle">
  21.                             <div class="col arrange-sizeFill">
  22.                                 <div
  23.                                     class="demi-infrastructure-sidebar__title">{{ 'demi.infrastructure.filter.headline.region' | trans }}</div>
  24.                             </div>
  25.                             <div class="col-auto arrange-sizeFit">
  26.                                 <span
  27.                                     class="icon icon-open demi-infrastructure-sidebar__collapse-icon icon-arrow-down"></span>
  28.                             </div>
  29.                         </div>
  30.                     </div>
  32.                     <div id="filter-region" class="collapse">
  33.                         <div class="demi-infrastructure-sidebar__body">
  34.                             <fieldset class="form-group">
  35.                                 {% for region in pimcore_relations('regions') %}
  36.                                     <div class="custom-checkbox form-check">
  37.                                         <label class="d-block">
  38.                                             <input class="custom-checkbox__input form-check-input js-filter-form__input"
  39.                                                    type="checkbox"
  40.                                                    name="region[]"
  41.                                                    id="filter-{{ region.getId() }}"
  42.                                                    value=" {{ region.getId() }}"
  43.                                                 {{ region.getId() in app.getRequest().get('region', []) ? 'checked' : '' }}
  44.                                                    data-label=" {{ region.getName() }}"
  45.                                             >
  47.                                             <span class="custom-checkbox__box icon icon-check"></span>
  49.                                             <span class="custom-checkbox__text form-check-label">
  50.                                             {{ region.getName() }}
  51.                                         </span>
  53.                                             <div class="form-errors invalid-feedback"
  54.                                                  data-stylelab-tooltip="atoms-form-errors"></div>
  55.                                         </label>
  56.                                     </div>
  57.                                 {% endfor %}
  58.                             </fieldset>
  60.                         </div>
  61.                     </div>
  62.                 </section>
  63.             {% endif %}
  65.             {% for category in categoryFilterArray %}
  66.                 <section class="demi-infrastructure-sidebar__box panel">
  67.                     <div class="demi-infrastructure-sidebar__head collapsed" data-toggle="collapse"
  68.                          data-parent="#filter-form" data-target="#category-{{ category.id }}" role="button">
  69.                         <div
  70.                             class="row row-gutter--2 justify-content-center arrange arrange--withGutter-8 arrange--middle">
  71.                             {% if category.teaserIcon is defined %}
  72.                                 <div class="col-auto arrange-sizeFit">
  73.                                 <span
  74.                                     class="icon icon-{{ category.teaserIcon }} demi-infrastructure-sidebar__icon"></span>
  75.                                 </div>
  76.                             {% endif %}
  77.                             <div class="col arrange-sizeFill">
  78.                                 <div class="demi-infrastructure-sidebar__title">{{ category.name }}</div>
  79.                             </div>
  80.                             <div class="col-auto arrange-sizeFit">
  81.                                 <span
  82.                                     class="icon icon-open demi-infrastructure-sidebar__collapse-icon icon-arrow-down"></span>
  83.                             </div>
  84.                         </div>
  85.                     </div>
  87.                     {% if category.topics is defined %}
  88.                         <div id="category-{{ category.id }}" class="collapse">
  89.                             <div class="demi-infrastructure-sidebar__body">
  90.                                 <fieldset class="form-group">
  91.                                     {% for checkbox in category.topics | sort((a,b) => a.name <=> b.name) %}
  92.                                         <div class="custom-checkbox form-check">
  93.                                             <label class="d-block">
  94.                                                 <input
  95.                                                     class="custom-checkbox__input form-check-input js-filter-form__input"
  96.                                                     type="checkbox"
  97.                                                     name="filter[]"
  98.                                                     id="filter-{{ checkbox.id }}"
  99.                                                     value="{{ checkbox.id }}"
  100.                                                     {{ checkbox.id in app.getRequest().get('filter', []) ? 'checked' : '' }}
  101.                                                     data-label="{{ checkbox.name }}"
  102.                                                 >
  104.                                                 <span class="custom-checkbox__box icon icon-check"></span>
  106.                                                 <span class="custom-checkbox__text form-check-label">
  107.                                                 {{ checkbox.name }}
  108.                                             </span>
  110.                                                 <div class="form-errors invalid-feedback"
  111.                                                      data-stylelab-tooltip="atoms-form-errors"></div>
  112.                                             </label>
  113.                                         </div>
  114.                                     {% endfor %}
  115.                                 </fieldset>
  117.                             </div>
  118.                         </div>
  119.                     {% endif %}
  120.                 </section>
  121.             {% endfor %}
  123.             {% if showSchladmingAdditionalServiceFilter|default(false) %}
  124.                 <section class="demi-infrastructure-sidebar__box panel">
  125.                     <div class="demi-infrastructure-sidebar__head collapsed" data-toggle="collapse"
  126.                          data-parent="#filter-form" data-target="#sd-additional" role="button">
  127.                         <div
  128.                             class="row row-gutter--2 justify-content-center arrange arrange--withGutter-8 arrange--middle">
  129.                             <div class="col arrange-sizeFill">
  130.                                 <div class="demi-infrastructure-sidebar__title">{{ 'demi.infrasturcture.filter.headline.sd-additional-service' }}</div>
  131.                             </div>
  132.                             <div class="col-auto arrange-sizeFit">
  133.                                 <span
  134.                                     class="icon icon-open demi-infrastructure-sidebar__collapse-icon icon-arrow-down"></span>
  135.                             </div>
  136.                         </div>
  137.                     </div>
  138.                     {% set sdAdditionalFilter = [
  139.                         {
  140.                             id: 'bad-weather',
  141.                             name: 'demi.infrasturcture.filter.sd-additional-service.bad-weather'|trans
  142.                         },
  143.                         {
  144.                             id: 'accessible',
  145.                             name: 'demi.infrasturcture.filter.sd-additional-service.accessible'|trans
  146.                         },
  147.                         {
  148.                             id: 'allow-dogs',
  149.                             name: 'demi.infrasturcture.filter.sd-additional-service.dogs-allowed'|trans
  150.                         },
  151.                     ] %}
  154.                     <div id="sd-additional" class="collapse">
  155.                         <div class="demi-infrastructure-sidebar__body">
  156.                             <fieldset class="form-group">
  157.                                 {% for filter in sdAdditionalFilter %}
  158.                                     <div class="custom-checkbox form-check">
  159.                                         <label class="d-block">
  160.                                             <input
  161.                                                 class="custom-checkbox__input form-check-input js-filter-form__input"
  162.                                                 type="checkbox"
  163.                                                 name="filter-sd-additional[]"
  164.                                                 id="filter-sd-additional{{ filter.id }}"
  165.                                                 value="{{ filter.id }}"
  166.                                                 {{ filter.id in app.getRequest().get('filter-sd-additional', []) ? 'checked' : '' }}
  167.                                                 data-label="{{ filter.name }}"
  168.                                             >
  169.                                             <span class="custom-checkbox__box icon icon-check"></span>
  170.                                             <span class="custom-checkbox__text form-check-label">
  171.                                             {{ filter.name }}
  172.                                         </span>
  173.                                             <div class="form-errors invalid-feedback"
  174.                                                  data-stylelab-tooltip="atoms-form-errors"></div>
  175.                                         </label>
  176.                                     </div>
  177.                                 {% endfor %}
  178.                             </fieldset>
  180.                         </div>
  181.                     </div>
  182.                 </section>
  183.             {% endif %}
  185.             {% if showDateFilter|default(false) %}
  187.                 <section class="demi-infrastructure-sidebar__box panel">
  188.                     <div class="demi-infrastructure-sidebar__head collapsed" data-toggle="collapse"
  189.                          data-parent="#filter-form" data-target="#filter-dates" role="button">
  190.                         <div
  191.                             class="row row-gutter--2 justify-content-center arrange arrange--withGutter-8 arrange--middle">
  192.                             <div class="col arrange-sizeFill">
  193.                                 <div
  194.                                     class="demi-infrastructure-sidebar__title">{{ 'demi.infrastructure.filter.headline.dates' | trans }}</div>
  195.                             </div>
  196.                             <div class="col-auto arrange-sizeFit">
  197.                                 <span
  198.                                     class="icon icon-open demi-infrastructure-sidebar__collapse-icon icon-arrow-down"></span>
  199.                             </div>
  200.                         </div>
  201.                     </div>
  203.                     <div id="filter-dates" class="collapse">
  204.                         <div class="demi-infrastructure-sidebar__body">
  205.                             <fieldset class="form-group">
  206. {#                                {id: "no-restriction", name: "demi.infrastructure.filter.dates.no-restriction"|trans},#}
  207.                                 {% set dates = [
  208.                                     {id: "today", name: "demi.infrastructure.filter.dates.today"|trans},
  209.                                     {id: "monday", name: "demi.infrastructure.filter.dates.monday"|trans},
  210.                                     {id: "tuesday", name: "demi.infrastructure.filter.dates.tuesday"|trans},
  211.                                     {id: "wednesday", name: "demi.infrastructure.filter.dates.wednesday"|trans},
  212.                                     {id: "thursday", name: "demi.infrastructure.filter.dates.thursday"|trans},
  213.                                     {id: "friday", name: "demi.infrastructure.filter.dates.friday"|trans},
  214.                                     {id: "saturday", name: "demi.infrastructure.filter.dates.saturday"|trans},
  215.                                     {id: "sunday", name: "demi.infrastructure.filter.dates.sunday"|trans},
  216.                                     {id: "periode", name: "demi.infrastructure.filter.dates.periode"|trans, addDatePicker: true},
  217.                                 ] %}
  218.                                 {% for date in dates %}
  219.                                     <div class="custom-checkbox form-check">
  220.                                         <label class="d-block js-period-dates">
  221.                                             <span class="js-period-dates__btn">
  222.                                                  <input class="custom-checkbox__input form-check-input js-filter-form__input"
  223.                                                         type="checkbox"
  224.                                                         name="date[]"
  225.                                                         id="filter-{{ date.id }}"
  226.                                                         value="{{ date.id }}"
  227.                                                         {{ date.id in app.getRequest().get('date') ? 'checked' : '' }}
  228.                                                         data-label=" {{ date.name }}">
  230.                                             <span class="custom-checkbox__box icon icon-check"></span>
  231.                                             <span class="custom-checkbox__text form-check-label">
  232.                                                 {{ date.name }}
  233.                                             </span>
  234.                                             </span>
  235.                                            
  236.                                             {% if date.addDatePicker|default(false) %}
  237.                                                 <div class="{{ date.id in app.getRequest().get('date') ? 'show' : '' }} period-dates__collapse js-period-dates__collapse" >
  238.                                                     <span class="filter-sidebar__datepicker d-block mt-3 js-datepicker-range js-period-dates__datepicker">
  239.                                                     <span class="row row--gutter-width-10">
  240.                                                         <span class="col-6">
  241.                                                             {{ include('@ElementsDemiFrontend/Infrastructure/filter/filter-parts/datepicker.html.twig', {
  242.                                                                 inputname: "openfrom",
  243.                                                                 inputlabel: "demi.infrastructure.filter.dates.openfrom"|trans,
  244.                                                                 styleModifier:"js-datepicker-range__from mb-md-0",
  245.                                                                 value: app.request.get("openfrom")
  246.                                                             }) }}
  247.                                                         </span>
  248.                                                         <span class="col-6">
  249.                                                             {{ include('@ElementsDemiFrontend/Infrastructure/filter/filter-parts/datepicker.html.twig', {
  250.                                                                 inputname: "opento",
  251.                                                                 inputlabel: "demi.infrastructure.filter.dates.opento"|trans,
  252.                                                                 styleModifier:"js-datepicker-range__to mb-md-0",
  253.                                                                 value: app.request.get("opento")
  254.                                                             }) }}
  255.                                                         </span>
  256.                                                     </span>
  257.                                                 </span>
  258.                                                 </div>
  259.                                             {% endif %}
  261.                                             <span class="form-errors invalid-feedback d-block" data-stylelab-tooltip="atoms-form-errors"></span>
  262.                                         </label>
  263.                                     </div>
  264.                                 {% endfor %}
  265.                             </fieldset>
  267.                         </div>
  268.                     </div>
  269.                 </section>
  271.             {% endif %}
  275.             {% if showKeywordFilter %}
  276.                 <div class="form-group form-group--search">
  277.                     <input type="text" id="keyword"
  278.                            class="form-control form-control--input js-filter-form__input js-filter-form__input--no-filter"
  279.                            name="keyword" placeholder="{{ 'demi.infrastructure.filter.label.keyword' | trans }}"
  280.                            value="{{ app.request.get('keyword') | escape('url') }}"/>
  281.                     <label for="keyword" class="sr-only">
  282.                         {{ 'demi.infrastructure.filter.label.keyword' | trans }}
  283.                     </label>
  284.                 </div>
  285.             {% endif %}
  288.             <div class="text-center">
  289.                 <button type="submit"
  290.                         class="btn btn-primary mr-3">{{ 'demi.infrastructure.filter.button.filter-to' | trans }}
  291.                 </button>
  293.                 {{ include('@ElementsDemiFrontend/Infrastructure/filter/filter-parts/reset-filters.html.twig',{
  294.                     'buttonText' : 'demi.infrastructure.filter.button.reset-filters' | trans
  295.                 }) }}
  296.             </div>
  297.         </form>
  298.     </div>
  299. </div>