src/Aqarmap/Bundle/ListingBundle/Resources/views/CompoundSearch/compoundSearchForm.html.twig line 1

Open in your IDE?
  1. <div id="searchFormContainer" class="searchFormContainer">
  2.     <div class="filterHeader visible-sm visible-xs">
  3.         <div class="sectionContainer">
  4.             <button type="button" class="btnReset {% if app.request.get('_locale') == 'ar' %}right{% else %}left{% endif %}" id="reset-compound-planner">
  5.                 {{ 'layout.compound_planner.filters'|trans }}
  6.             </button>
  7.             <button class="btnCancel
  8.                                                                                                                     {% if app.request.get('_locale') == 'ar' %}left{% else %}right{% endif %}" onclick="closeCompoundFilter('searchFormContainer')">
  9.                 {{ 'layout.compound_planner.cancel'|trans }}
  10.             </button>
  11.         </div>
  12.     </div>
  13.     <div class="searchBox" ng-cloak ng-controller="compoundPlannerController">
  14.         {% set cachedCompoundsLocations = cachedCompoundsData['cachedCompoundsLocations'] %}
  15.         {% set cachedPropertyTypes = cachedCompoundsData['cachedPropertyTypes'] %}
  17.         {{ form_start(compoundSearchForm, {attr: {'ng-content-loaded': '', 'callback': 'init();setCheckedCompoundLocations('~checkedCompoundLocations | json_encode()~');setCheckedPropertyTypes('~checkedPropertyTypes | json_encode()~'); setCompoundLocations('~cachedCompoundsLocations~');setPropertyTypes('~cachedPropertyTypes~');', 'class': 'compound-planner-form'}}) }}
  19.         {% set compoundLocationFilter = app.request.query.get("compoundLocations") %}
  20.         {% set propertyTypesFilter = app.request.query.get("propertyTypes") %}
  21.         {% set priceLevel = app.request.query.get("priceLevels") %}
  22.         {% set compoundStatus = app.request.query.get("compoundStatus") %}
  23.         {% set keywordFilter = app.request.query.get("keywords") %}
  24.         {% set finishType = app.request.query.get("finishTypes") %}
  25.         {% set paymentMethod = app.request.query.get("paymentMethods") %}
  26.         {% set developerExperience = app.request.query.get("developerExperience") %}
  27.         {% set deliveryYears = app.request.query.get("deliveryYears") %}
  30.         {#Location#}
  31.         <div class="search-form">
  32.             <div class="form-section">
  33.                 <div class="page-header">
  34.                     <div class="panel">
  35.                         <a class="btn-collapse-container {% if compoundLocationFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#LocationsContainer" aria-expanded="true">
  36.                             <label>{{ 'layout.compound_planner.locations'|trans }}</label>
  37.                             <label class="btn_collapse btn_float">
  38.                                 <span class="btn-minus"></span>
  39.                             </label>
  40.                         </a>
  41.                         <div id="LocationsContainer" class="panel-collapse collapse {% if compoundLocationFilter != null%}show{% endif %}" aria-expanded="true">
  42.                             <div class="panel-body marginTop15">
  43.                                 {{ form_widget(compoundSearchForm.compoundLocation, {attr: {'value': 'ng::getCheckedCompoundLocations()::'}}) }}
  44.                                 <tree-view class="w-100" depth="3" model="getCompoundLocations()" key="compoundLocation" callback-fn="toggleTick(item, key)"></tree-view>
  45.                             </div>
  46.                         </div>
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.         </div>
  52.         {#Property Types#}
  53.         <div class="search-form">
  54.             <div class="form-section">
  55.                 <div class="page-header">
  56.                     <div class="panel">
  57.                         <a class="btn-collapse-container {% if propertyTypesFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PropertyTypesContainer" aria-expanded="true">
  58.                             <label>{{ 'layout.compound_planner.property_types'|trans }}</label>
  59.                             <label class="btn_collapse btn_float">
  60.                                 <span class="btn-minus"></span>
  61.                             </label>
  62.                         </a>
  63.                         {% set propertyTypesHideFrom = 5 %}
  64.                         <div id="PropertyTypesContainer" class="panel-collapse collapse {% if propertyTypesFilter != null %}show{% endif %} nestedContainer" data-hidestartfrom="{{ propertyTypesHideFrom }}" aria-expanded="true">
  65.                             <div class="panel-body marginTop15">
  66.                                 {{ form_widget(compoundSearchForm.propertyTypes, {attr: {'value': 'ng::getCheckedPropertyTypes()::'}}) }}
  67.                                 <tree-view class="w-100" depth="3" model="getPropertyTypes()" key="propertyType" callback-fn="toggleTick(item, key)"></tree-view>
  68.                             </div>
  69.                         </div>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.         </div>
  75.         {#Get range sliders values from url#}
  76.         {% set areaRange = app.request.get('areaRange') | default("0,0") | split(',') %}
  77.         {% set areaFrom = areaRange[0] %}
  78.         {% set areaTo = areaRange[1] %}
  80.         {% set priceRange = app.request.get('priceRange') | default("0,0") | split(',') %}
  81.         {% set priceFrom = priceRange[0] %}
  82.         {% set priceTo = priceRange[1] %}
  84.         {% set priceMeterRange = app.request.get('priceMeterRange') | default("0,0") | split(',') %}
  85.         {% set priceMeterFrom = priceMeterRange[0] %}
  86.         {% set priceMeterTo = priceMeterRange[1] %}
  88.         {#price Level#}
  89.         <div class="search-form">
  90.             <div class="form-section">
  91.                 <div class="page-header tab-content">
  92.                     <div class="panel tab-pane active show" id="price_level">
  93.                         <div class="btn-collapse-container {% if priceLevel == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PriceLevelContainer" aria-expanded="true">
  94.                             <label>{{ 'layout.compound_planner.price_level'|trans }}</label>
  95.                             <a class="btn_collapse btn_float">
  96.                                 <span class="btn-minus"></span>
  97.                             </a>
  98.                         </div>
  99.                         <div id="PriceLevelContainer" class="panel-collapse collapse {% if priceLevel != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  100.                             <div class="panel-body marginTop15">
  102.                                 {% set selectedPriceLevels = app.request.get('priceLevels') | json_encode()%}
  104.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('priceLevel', {{selectedPriceLevels}})">
  105.                                     {% for p in compoundSearchForm.priceLevel|keys %}
  107.                                         {% set index = compoundSearchForm.priceLevel.vars.choices[p].value %}
  108.                                         <li>
  110.                                             {{form_widget(attribute(compoundSearchForm.priceLevel,p),
  111.                                                 {attr: {'class': 'styled-checkbox', 'ng-model': 'priceLevel[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.priceLevel[' ~ index ~ '] ? "" : "disabled" '}}
  112.                                             ) }}
  113.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.priceLevel,p)) %}
  114.                                                 {{form_label(attribute(compoundSearchForm.priceLevel,p)) }}
  115.                                                 <span ng-class="filtersFeedback.priceLevel[{{index}}] ? '' : 'disabled'">{{ '(ng::filtersFeedback.priceLevel[' ~ index ~ '] || 0::)' }}</span>
  116.                                             {% endif %}
  117.                                         </li>
  118.                                     {% endfor %}
  119.                                 </ul>
  120.                             </div>
  121.                         </div>
  122.                     </div>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.         {#Status#}
  127.         <div class="search-form moreFilter">
  128.             <div class="form-section">
  129.                 <div class="page-header">
  130.                     <div class="panel">
  131.                         <a class="btn-collapse-container {% if compoundStatus == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#StatusContainer" aria-expanded="true">
  132.                             <label>{{ 'layout.compound_planner.status'|trans }}</label>
  133.                             <label class="btn_collapse btn_float">
  134.                                 <span class="btn-minus"></span>
  135.                             </label>
  136.                         </a>
  137.                         <div id="StatusContainer" class="panel-collapse collapse {% if compoundStatus != null%}show{% endif %}" aria-expanded="true" ng-cloak>
  138.                             <div class="panel-body marginTop15">
  140.                                 {% set selectedCompoundStatus = app.request.get('compoundStatus') | json_encode() %}
  142.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('compoundStatus', {{selectedCompoundStatus}})">
  143.                                     {% for c in compoundSearchForm.compoundStatus|keys %}
  144.                                         {% set index = compoundSearchForm.compoundStatus.vars.choices[c].value %}
  145.                                         <li>
  146.                                             {{form_widget(attribute(compoundSearchForm.compoundStatus,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'compoundStatus[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback()', 'ng-class': 'filtersFeedback.compoundStatus[' ~ index ~ '] ? "" : "disabled" '}}) }}
  147.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.compoundStatus,c)) %}
  148.                                                 {{form_label(attribute(compoundSearchForm.compoundStatus,c)) }}
  149.                                                 <span ng-class="filtersFeedback.compoundStatus[{{index}}] ? '' : 'disabled'">{{ '(ng::filtersFeedback.compoundStatus[' ~ index ~ '] || 0::)' }}</span>
  150.                                             {% endif %}
  151.                                         </li>
  152.                                     {% endfor %}
  153.                                 </ul>
  154.                             </div>
  155.                         </div>
  156.                     </div>
  157.                 </div>
  158.             </div>
  159.         </div>
  160.         {#finish type#}
  161.         <div class="search-form moreFilter">
  162.             <div class="form-section">
  163.                 <div class="page-header">
  164.                     <div class="panel">
  165.                         <a class="btn-collapse-container {% if finishType == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#FinishTypeContainer" aria-expanded="true">
  166.                             <label>{{ 'layout.compound_planner.finish_type'|trans }}</label>
  167.                             <label class="btn_collapse btn_float">
  168.                                 <span class="btn-minus"></span>
  169.                             </label>
  170.                         </a>
  171.                         <div id="FinishTypeContainer" class="panel-collapse collapse {% if finishType != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  172.                             <div class="panel-body marginTop15">
  174.                                 {% set selectedFinishType = app.request.get('finishTypes') | json_encode() %}
  176.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('finishType', {{selectedFinishType}})">
  177.                                     {% for c in compoundSearchForm.finishType|keys %}
  178.                                         {% set index = compoundSearchForm.finishType.vars.choices[c].value %}
  179.                                         <li>
  180.                                             {{form_widget(attribute(compoundSearchForm.finishType,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'finishType.'~index, 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.finishType.' ~ index ~ ' ? "" : "disabled" '}}) }}
  181.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.finishType,c)) %}
  182.                                                 {{form_label(attribute(compoundSearchForm.finishType,c), index|trans) }}
  183.                                                 <span ng-class="filtersFeedback.finishType.{{index}} ? '' : 'disabled'">
  184.                                                     {{ '(ng::filtersFeedback.finishType.' ~ index ~ ' || 0::)' }}
  185.                                                 </span>
  186.                                             {% endif %}
  187.                                         </li>
  188.                                     {% endfor %}
  189.                                 </ul>
  190.                             </div>
  191.                         </div>
  192.                     </div>
  193.                 </div>
  194.             </div>
  195.         </div>
  196.         {#Payment Method#}
  197.         <div class="search-form moreFilter">
  198.             <div class="form-section">
  199.                 <div class="page-header">
  200.                     <div class="panel">
  201.                         <a class="btn-collapse-container {% if paymentMethod == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#PaymentMethodContainer" aria-expanded="true">
  202.                             <label>{{ 'layout.compound_planner.payment_method'|trans }}</label>
  203.                             <label class="btn_collapse btn_float">
  204.                                 <span class="btn-minus"></span>
  205.                             </label>
  206.                         </a>
  207.                         <div id="PaymentMethodContainer" class="panel-collapse collapse {% if paymentMethod != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  208.                             <div class="panel-body marginTop15">
  210.                                 {% set selectedPaymentMethod = app.request.get('paymentMethods') | json_encode() %}
  212.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('paymentMethod', {{selectedPaymentMethod}})">
  214.                                     {% for method in compoundSearchForm.paymentMethod|keys %}
  215.                                         {% set index = compoundSearchForm.paymentMethod.vars.choices[method].value %}
  216.                                         <li>
  217.                                             {{form_widget(attribute(compoundSearchForm.paymentMethod,method), {attr: {'class': 'styled-checkbox', 'ng-model': 'paymentMethod[' ~ index ~ ']', 'ng-true-value': "'" ~ index ~ "'", 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.paymentMethod[' ~ index ~ '] ? "" : "disabled" '}}) }}
  218.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.paymentMethod,method)) %}
  219.                                                 {{form_label(attribute(compoundSearchForm.paymentMethod,method)) }}
  220.                                                 <span ng-class="filtersFeedback.paymentMethod[{{index}}] ? '' : 'disabled'">
  221.                                                     {{ '(ng::filtersFeedback.paymentMethod[' ~ index ~ '] || 0::)' }}
  222.                                                 </span>
  223.                                             {% endif %}
  224.                                         </li>
  225.                                     {% endfor %}
  226.                                 </ul>
  227.                             </div>
  229.                         </div>
  230.                     </div>
  231.                 </div>
  232.             </div>
  233.         </div>
  234.         {# Developer Experience #}
  235.         <div class="search-form moreFilter">
  236.             <div class="form-section">
  237.                 <div class="page-header">
  238.                     <div class="panel">
  239.                         <a class="btn-collapse-container {% if developerExperience == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#DeveloperExperienceContainer" aria-expanded="true">
  240.                             <label>{{ 'layout.compound_planner.developer_experience'|trans }}</label>
  241.                             <label class="btn_collapse btn_float">
  242.                                 <span class="btn-minus"></span>
  243.                             </label>
  244.                         </a>
  245.                         <div id="DeveloperExperienceContainer" class="panel-collapse collapse {% if developerExperience != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  246.                             <div class="panel-body marginTop15">
  247.                                 {% set selectedDeveloperExperience = app.request.get('developerExperience') | json_encode() %}
  248.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('developerExperiences', {{ selectedDeveloperExperience }})">
  249.                                     {% for c in compoundSearchForm.developerExperience|keys %}
  250.                                         {% set index = compoundSearchForm.developerExperience.vars.choices[c].value %}
  251.                                         <li>
  252.                                             {{ form_widget(attribute(compoundSearchForm.developerExperience,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'developerExperiences.'~index, 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.' ~ index ~ ' ? "" : "" '}}) }}
  253.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.developerExperience,c)) %}
  254.                                                 {{ form_label(attribute(compoundSearchForm.developerExperience,c)) }}
  255.                                                 <span ng-class="filtersFeedback.{{ index }} ? '' : 'disabled'">
  256.                                                     {{ '(ng::filtersFeedback.' ~ index ~ ' || 0::)' }}
  257.                                                 </span>
  258.                                             {% endif %}
  259.                                         </li>
  260.                                     {% endfor %}
  261.                                 </ul>
  262.                             </div>
  263.                         </div>
  264.                     </div>
  265.                 </div>
  266.             </div>
  267.         </div>
  269.         {# Deleviery Year Experience #}
  270.         <div class="search-form moreFilter">
  271.             <div class="form-section">
  272.                 <div class="page-header">
  273.                     <div class="panel">
  274.                         <a class="btn-collapse-container {% if deliveryYears == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#deliveryYearContainer" aria-expanded="true">
  275.                             <label>{{ 'layout.compound_planner.delivery_year'|trans }}</label>
  276.                             <label class="btn_collapse btn_float">
  277.                                 <span class="btn-minus"></span>
  278.                             </label>
  279.                         </a>
  280.                         <div id="deliveryYearContainer" class="panel-collapse collapse {% if deliveryYears != null %}show{% endif %}" aria-expanded="true" ng-cloak>
  281.                             <div class="panel-body marginTop15">
  282.                                 {% set selectedDeliveryYears =  deliveryYears| json_encode() %}
  283.                                 <ul class="unstyled padding-0" ng-content-loaded callback="initFilter('deliveryYears', {{ selectedDeliveryYears }})">
  284.                                     {% for c in compoundSearchForm.deliveryYears|keys %}
  285.                                         {% set index = compoundSearchForm.deliveryYears.vars.choices[c].value %}
  286.                                         <li>
  287.                                             {{ form_widget(attribute(compoundSearchForm.deliveryYears,c), {attr: {'class': 'styled-checkbox', 'ng-model': 'deliveryYears['~index~']', 'ng-true-value': "'" ~ index ~ "'" , 'ng-false-value': '0', 'ng-change': 'getCountFeedback();', 'ng-class': 'filtersFeedback.deliveryYears[' ~ index ~ '] ? "" : "" '}}) }}
  288.                                             {% if 'token' not in form_label(attribute(compoundSearchForm.deliveryYears,c)) %}
  289.                                                 {{ form_label(attribute(compoundSearchForm.deliveryYears,c)) }}
  290.                                                 <span ng-class="filtersFeedback.deliveryYears[{{ index }}]? '' : 'disabled'">
  291.                                                     {{ '(ng::filtersFeedback.deliveryYears[' ~ index ~ '] || 0::)' }}
  292.                                                 </span>
  293.                                             {% endif %}
  294.                                         </li>
  295.                                     {% endfor %}
  296.                                 </ul>
  297.                             </div>
  298.                         </div>
  299.                     </div>
  300.                 </div>
  301.             </div>
  302.         </div>
  304.         {#Keywords Search#}
  305.         <div class="search-form moreFilter">
  306.             <div class="form-section">
  307.                 <div class="page-header">
  308.                     <div class="panel">
  309.                         <a id="compoundNameCollapseBtn" class="btn-collapse-container {% if keywordFilter == null %}collapsed{% endif %}" data-toggle="collapse" data-target="#KeywordContainer" aria-expanded="true">
  310.                             <label>
  311.                                 {{ get_setting('general', 'country') == 'SA' ? 'layout.compound_planner.search_for_ksa'|trans : 'layout.compound_planner.search_for'|trans }}
  312.                             </label>
  313.                             <label class="btn_collapse btn_float">
  314.                                 <span class="btn-minus"></span>
  315.                             </label>
  316.                         </a>
  317.                         {% set selectedKeywords = app.request.get('keywords') | json_encode() %}
  318.                         <div id="KeywordContainer" class="panel-collapse collapse {% if keywordFilter != null %}show{% endif %}" aria-expanded="true">
  319.                             <div class="panel-body marginTop15 KeywordContainerContainer">
  320.                                 <div class="mapBin" ng-content-loaded callback="initKeywordFilter({{ selectedKeywords }})">
  321.                                     <i class="fa fa-search location-icon"></i>
  322.                                 </div>
  323.                                 <div class="drop-down-container">
  324.                                     {% set keyword_placeholder = get_setting('general', 'country') == 'SA' ? 'layout.compound_planner.search_for_placeholder_ksa'|trans : 'layout.compound_planner.search_for_placeholder'|trans  %}
  325.                                     {{ form_widget(compoundSearchForm.keyword, {attr: {'class': 'select2-select', 'data-placeholder': keyword_placeholder, 'name': 'filters[]', 'ng-model': 'keyword', 'ng-change': 'getCountFeedback();'}}) }}
  326.                                 </div>
  327.                             </div>
  328.                         </div>
  329.                     </div>
  330.                 </div>
  331.             </div>
  332.         </div>
  334.         <div class="search-form last" ng-content-loaded callback="initFeedback();">
  335.             <div class="form-section">
  336.                 <div class="page-header">
  337.                     <div class="panel">
  338.                         <div class="panel-collapse collapse show" aria-expanded="true" ng-cloak>
  339.                             <div class="panel-body KeywordContainerContainer">
  340.                                 <div class="btnContainer">
  341.                                     <div class="btnlarge">
  342.                                         <button class="btn btn-blue-curved" type="submit">{{ 'layout.compound_planner.search'|trans }}&#160;<span>(ng::totalFeedback::)</span>
  343.                                         </button>
  344.                                     </div>
  345.                                     <div class="btnSmall">
  346.                                         {% if app.request.attributes.get('_route') == 'compound_search' or app.request.attributes.get('_route') == 'compound_search_with_location' %}
  347.                                             <a class="btn btn-white text-blue rounded-pill" id="reset-compound-planner" href="{{ path('compound_search') }}">{{ 'layout.compound_planner.reset'|trans }}</a>
  348.                                         {% else %}
  349.                                             <span class="btn btn-white text-blue rounded-pill reset-compound-planner" ng-click="resetValues();getCountFeedback();">
  350.                                                 {{ 'layout.compound_planner.reset'|trans }}
  351.                                             </span>
  352.                                         {% endif %}
  353.                                     </div>
  354.                                 </div>
  355.                             </div>
  356.                         </div>
  357.                     </div>
  358.                 </div>
  359.             </div>
  360.         </div>
  362.         {{ form_end(compoundSearchForm) }}
  363.     </div>
  364. </div>