src/AppBundle/Resources/views/Form/units_filter.html.twig line 1

Open in your IDE?
  1. <form name="units_filter"
  2.       id="units_filter"
  3.       action="{{ url('units_list') }}"
  4. >
  5.   <div class="units_filter__input-row units_filter__input-row--blue">
  6.     <input type="hidden"
  7.            id="units_filter__input__token"
  8.            name="units_filter[_token]"
  9.            value="{{ csrf_token('units_filter') }}"
  10.     >
  11.     {% for filter_name, filter_items in dropdown_filters %}
  12.       <div class="col-xs-12 col-sm-6 col-lg-2 units_filter__col">
  13.         <input type="hidden"
  14.                id="units_filter__input__{{ filter_name }}"
  15.                name="units_filter[{{ filter_name }}]"
  16.           {% if selected_values[filter_name] %}
  17.             value="{{ selected_values[filter_name]['value'] }}"
  18.           {% endif %}
  19.         >
  20.         <div class="units_filter__item">
  21.           <div class="dropdown">
  22.             <div class="units_filter__select-box" data-toggle="dropdown">
  23.               <span class="units_filter__select-box__label">
  24.                 {% if selected_values[filter_name] %}
  25.                   {{ selected_values[filter_name]['name']|raw }}
  26.                 {% else %}
  27.                   {{ filter_name|trans }}
  28.                 {% endif %}
  29.               </span>
  30.               <i class="units_filter__icon-dropdown"></i>
  31.             </div>
  32.             <div class="units_filter__dropdown dropdown-menu">
  33.               <ul class="list-unstyled submit-on-change">
  34.                 {{ filter_items|raw }}
  35.               </ul>
  36.             </div>
  37.           </div>
  38.         </div>
  39.       </div>
  40.     {% endfor %}
  41.     <div class="col-xs-12 col-sm-6 col-lg-2 units_filter__col">
  42.       <label class="check-box__label" for="units_filter__terraceorbalcony">
  43.         <div class="check-box" data-for="units_filter__terraceorbalcony"></div>
  44.         {{ "units_filter_terraceorbalcony"|trans }}
  45.       </label>
  46.       <input type="checkbox" id="units_filter__terraceorbalcony" class="hidden units_filter__checkbox submit-on-change"
  47.              name="units_filter[terraceorbalcony]" {% if terraceorbalcony %}checked{% endif %}/>
  48.     </div>
  49.   </div>
  51.   <div class="units_filter__input-row units_filter__input-row--stack-right">
  52.     {% for filter_name, filter_items in dropdown_sort_and_view_filters %}
  53.       <div class="units_filter__col units_filter__col--sorter">
  54.         <input type="hidden"
  55.                id="units_filter__input__{{ filter_name }}"
  56.                name="units_filter[{{ filter_name }}]"
  57.           {% if selected_sort_and_view_values[filter_name] %}
  58.             value="{{ selected_sort_and_view_values[filter_name]['value'] }}"
  59.           {% endif %}
  60.         >
  61.         {% if filter_name == 'sort' %}
  62.           <input type="hidden"
  63.                  id="units_filter__input__direction"
  64.                  name="units_filter[direction]"
  65.             {% if selected_sort_and_view_values['direction'] %}
  66.               value="{{ selected_sort_and_view_values['direction']['value'] }}"
  67.             {% endif %}
  68.           >
  69.         {% endif %}
  70.         <div class="units_filter__item units_filter__item--bordered float-right">
  71.           <div class="dropdown">
  72.             <div class="units_filter__select-box" data-toggle="dropdown">
  73.                 <span class="units_filter__select-box__label">
  74.                   {% if selected_sort_and_view_values[filter_name] %}
  75.                     {{ selected_sort_and_view_values[filter_name]['name'] }}
  76.                   {% else %}
  77.                     {{ filter_name|trans }}
  78.                   {% endif %}
  79.                 </span>
  80.               <i class="units_filter__icon-dropdown"></i>
  81.             </div>
  82.             <div class="units_filter__dropdown units_filter__dropdown--blue dropdown-menu">
  83.               <ul class="list-unstyled submit-on-change">
  84.                 {{ filter_items|raw }}
  85.               </ul>
  86.             </div>
  87.           </div>
  88.         </div>
  89.       </div>
  90.     {% endfor %}
  91.   </div>
  92. </form>
  94. <script>
  95.   $(document).ready(function () {
  96.     //possibly move to general js
  97.     let boxes = $(".check-box");
  99.     $('input[type=checkbox]').each(function () {
  100.       if (this.checked) {
  101.         let graphic = boxes.filter("[data-for='" + this.id + "']");
  102.         graphic.addClass('check-box--checked');
  103.       }
  104.     });
  106.     $('input[type=checkbox]').on("change", function (el) {
  107.       let graphic = boxes.filter("[data-for='" + el.target.id + "']");
  108.       graphic.toggleClass('check-box--checked');
  109.     });
  111.   });
  112. </script>