templates/default/_form_contract.html.twig line 1

Open in your IDE?
  1. <div class="row justify-content-center mx-2 mx-md-4 my-4">
  2. <div class="col-md-10 col-lg-8">
  3. <div class="card shadow px-3">
  4. {# <ul class="nav justify-content-center text-uppercase text-muted py-1">
  5. <li class="nav-item">
  6. <a class="nav-link active" id="search-tab1" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">
  7. Achat
  8. </a>
  9. </li>
  10. <li class="nav-item">
  11. <a class="nav-link" id="search-tab2" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">
  12. Location
  13. </a>
  14. </li>
  15. <li class="nav-item">
  16. <a class="nav-link" id="search-tab3" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">
  17. Gestion
  18. </a>
  19. </li>
  20. </ul>#}
  21. <div class="tab-content pt-3 text-center">
  22. {# <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="search-tab1">#}
  23. {{ form_start(form, {'action': path('contracts')}) }}
  25. <div class="row text-left">
  26. <div class="col-md-4 py-1">
  27. {{ form_row(form.category, {'attr': {'class': 'border-primary'}}) }}
  28. </div>
  29. <div class="col-md-4 py-1">
  30. {{ form_row(form.location, {'attr': {'class': 'border-primary'}}) }}
  31. </div>
  32. <div class="col-md-4 py-1 slider-inputs">
  33. <div class="mb-3">
  34. {{ form_label(form.distance, '', {'class': 'mb-3'}) }}
  35. </div>
  36. <div class="px-2">
  37. <div id="slider-range-distance"></div>
  38. {{ form_widget(form.distance) }}
  39. </div>
  40. </div>
  41. </div>
  42. <div class="row text-left">
  43. <div class="col-md-4 py-1">
  44. <a class="f20-no-underline slider-collapse" data-toggle="collapse" href="#collapsePrice" role="button" aria-expanded="false" aria-controls="collapsePrice">
  45. {{ form_label(form.minPrice) }} <span class="fas fa-fw fa-caret-right"></span>
  46. </a>
  47. <div class="collapse" id="collapsePrice">
  48. <div class="px-2">
  49. <div class="row slider-inputs">
  50. <div class="col">{{ form_widget(form.minPrice) }}</div>
  51. <div class="col">{{ form_widget(form.maxPrice) }}</div>
  52. </div>
  53. <div id="slider-range-price"></div>
  54. </div>
  55. </div>
  56. </div>
  57. <div class="col-md-4 py-1">
  58. <a class="f20-no-underline slider-collapse" data-toggle="collapse" href="#collapseSpace" role="button" aria-expanded="false" aria-controls="collapseSpace">
  59. {{ form_label(form.minSpace) }} <span class="fas fa-fw fa-caret-right"></span>
  60. </a>
  61. <div class="collapse" id="collapseSpace">
  62. <div class="px-2">
  63. <div class="row slider-inputs">
  64. <div class="col">{{ form_widget(form.minSpace) }}</div>
  65. <div class="col">{{ form_widget(form.maxSpace) }}</div>
  66. </div>
  67. <div id="slider-range-space"></div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="col-md-4 py-1">
  72. <a class="f20-no-underline slider-collapse" data-toggle="collapse" href="#collapseRooms" role="button" aria-expanded="false" aria-controls="collapseRooms">
  73. {{ form_label(form.minRooms) }} <span class="fas fa-fw fa-caret-right"></span>
  74. </a>
  75. <div class="collapse" id="collapseRooms">
  76. <div class="px-2">
  77. <div class="row slider-inputs">
  78. <div class="col">{{ form_widget(form.minRooms) }}</div>
  79. <div class="col">{{ form_widget(form.maxRooms) }}</div>
  80. </div>
  81. <div id="slider-range-rooms"></div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  87. <button type="submit" class="btn btn-primary text-uppercase p-3">
  88. <span class="fas fa-search text-white"></span> Rechercher
  89. </button>
  91. {{ form_end(form) }}
  92. {# </div>
  93. <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="search-tab2">
  94. FORMULAIRE 2
  95. </div>
  96. <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="search-tab3">
  97. FORMULAIRE 3
  98. </div>#}
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  104. <script>
  105. let $sliderDistance = $('#slider-range-distance');
  106. let $sliderPrice = $('#slider-range-price');
  107. let $sliderSpace = $('#slider-range-space');
  108. let $sliderRooms = $('#slider-range-rooms');
  110. let $fieldDistance = $('#contract_estate_search_distance');
  111. let $fieldMinPrice = $('#contract_estate_search_minPrice');
  112. let $fieldMaxPrice = $('#contract_estate_search_maxPrice');
  113. let $fieldMinSpace = $('#contract_estate_search_minSpace');
  114. let $fieldMaxSpace = $('#contract_estate_search_maxSpace');
  115. let $fieldMinRooms = $('#contract_estate_search_minRooms');
  116. let $fieldMaxRooms = $('#contract_estate_search_maxRooms');
  118. function getSliderFieldVal($field) {
  119. return parseInt($field.val().replace(/[a-z  €²+]*/g, ''));
  120. }
  122. function updateSliderDistance(event, ui) {
  123. $fieldDistance.val(ui.value + ' km');
  124. }
  126. function updateSliderPrice(event, ui) {
  127. $fieldMinPrice.val(new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(ui.values[0]));
  128. $fieldMaxPrice.val(new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(ui.values[1]));
  130. if (ui.values[1] === {{ constant('App\\Repository\\ContractRepository::MAX_PRICE') }}) {
  131. $fieldMaxPrice.val('+ ' + $fieldMaxPrice.val());
  132. }
  133. }
  135. function updateSliderSpace(event, ui) {
  136. $fieldMinSpace.val(ui.values[0] + ' m²');
  137. $fieldMaxSpace.val(ui.values[1] + ' m²');
  139. if (ui.values[1] === {{ constant('App\\Repository\\ContractRepository::MAX_SPACE') }}) {
  140. $fieldMaxSpace.val('+ ' + $fieldMaxSpace.val());
  141. }
  142. }
  144. function updateSliderRooms(event, ui) {
  145. $fieldMinRooms.val(ui.values[0] + ' p');
  146. $fieldMaxRooms.val(ui.values[1] + ' p');
  148. if (ui.values[1] === {{ constant('App\\Repository\\ContractRepository::MAX_ROOMS') }}) {
  149. $fieldMaxRooms.val('+ ' + $fieldMaxRooms.val());
  150. }
  151. }
  153. function initSlider($slider, $minField, $maxField) {
  154. if (($minField.val() !== '' && getSliderFieldVal($minField) != $slider.slider('values', 0))
  155. || ($maxField.val() !== '' && getSliderFieldVal($maxField) != $slider.slider('values', 1))) {
  156. $slider.closest('.collapse').parent().find('label').click();
  157. }
  158. if ($minField.val() === '') {
  159. $minField.val($slider.slider('values', 0));
  160. }
  161. if ($maxField.val() === '') {
  162. $maxField.val($slider.slider('values', 1));
  163. }
  164. $slider.slider('values', [getSliderFieldVal($minField), getSliderFieldVal($maxField)]);
  165. }
  167. $(document).ready(function () {
  168. autocompleteSimple($('#contract_estate_search_location'), '{{ path('xhr_autocomplete_class', {'sClass': 'RefTown', 'sField': 'FullName'}) }}', function (event, ui) {
  169. var aParts = ui.item.value.split(' - ');
  170. var $aCodes = aParts[0].split('-');
  172. $(event.target).val($aCodes[0] + ' - ' + aParts[1]);
  174. return false;
  175. });
  177. $('.slider-collapse').on('click', function () {
  178. $(this).find('svg').toggleClass('fa-caret-down fa-caret-right');
  179. });
  181. $sliderDistance.slider({
  182. range: 'min',
  183. min: 0,
  184. max: {{ constant('App\\Repository\\ContractRepository::MAX_DISTANCE') }},
  185. step: 5,
  186. value: 25,
  187. slide: updateSliderDistance,
  188. change: updateSliderDistance
  189. });
  190. if ($fieldDistance.val() === '') {
  191. $fieldDistance.val($sliderDistance.slider('value'));
  192. }
  193. $sliderDistance.slider('value', getSliderFieldVal($fieldDistance));
  195. $sliderPrice.slider({
  196. range: true,
  197. min: 0,
  198. max: {{ constant('App\\Repository\\ContractRepository::MAX_PRICE') }},
  199. step: 10000,
  200. values: [0, {{ constant('App\\Repository\\ContractRepository::MAX_PRICE') }}],
  201. slide: updateSliderPrice,
  202. change: updateSliderPrice
  203. });
  204. initSlider($sliderPrice, $fieldMinPrice, $fieldMaxPrice);
  206. $sliderSpace.slider({
  207. range: true,
  208. min: 0,
  209. max: {{ constant('App\\Repository\\ContractRepository::MAX_SPACE') }},
  210. step: 10,
  211. values: [0, {{ constant('App\\Repository\\ContractRepository::MAX_SPACE') }}],
  212. slide: updateSliderSpace,
  213. change: updateSliderSpace,
  214. });
  215. initSlider($sliderSpace, $fieldMinSpace, $fieldMaxSpace);
  217. $sliderRooms.slider({
  218. range: true,
  219. min: 1,
  220. max: {{ constant('App\\Repository\\ContractRepository::MAX_ROOMS') }},
  221. step: 1,
  222. values: [0, {{ constant('App\\Repository\\ContractRepository::MAX_ROOMS') }}],
  223. slide: updateSliderRooms,
  224. change: updateSliderRooms,
  225. });
  226. initSlider($sliderRooms, $fieldMinRooms, $fieldMaxRooms);
  227. });
  228. </script>