templates/scroll/liste.html.twig line 1

Open in your IDE?
  1.  
  6.  
  8. {% extends 'base.html.twig' %}
  9. {% block title %} Sugsestion de logement à {{ ville }} {% endblock %}
  11.  
  17. {% block stylesheets %}
  18.  
  19. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
  20. <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
  21.   
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  24. <style>
  25.     /* Popup container */
  26.   .popup {
  27.     position: relative;
  28.     display: inline-block;
  29.     cursor: pointer;
  30.   }
  31.   
  32.   /* The actual popup (appears on top) */
  33.   .popup .popuptext {
  34.     visibility: hidden;
  35.     width: 160px;
  36.     background-color: #fff;
  37.     color: #fff;
  38.     text-align: center;
  39.     border-radius: 6px;
  40.     padding: 8px 0;
  41.     position: absolute;
  42.     z-index: 1;
  43.     bottom: 125%;
  44.     left: 50%;
  45.     margin-left: -80px;
  46.   }
  47.   
  48.   /* Popup arrow */
  49.   .popup .popuptext::after {
  50.     content: "";
  51.     position: absolute;
  52.     top: 100%;
  53.     left: 50%;
  54.     margin-left: -5px;
  55.     border-width: 5px;
  56.     border-style: solid;
  57.     border-color: #fff transparent transparent transparent;
  58.   }
  59.   
  60.   /* Toggle this class when clicking on the popup container (hide and show the popup) */
  61.   .popup .show {
  62.     visibility: visible;
  63.     -webkit-animation: fadeIn 1s;
  64.     animation: fadeIn 1s
  65.   }
  66.   
  67.   /* Add animation (fade in the popup) */
  68.   @-webkit-keyframes fadeIn {
  69.     from {opacity: 0;}
  70.     to {opacity: 1;}
  71.   }
  72.   
  73.   @keyframes fadeIn {
  74.     from {opacity: 0;}
  75.     to {opacity:1 ;}
  76.   } 
  79.   body {
  80.           background: #fff;
  81.           color: #fff;
  82.           font-family: sans-serif;
  83.           margin: 0;
  84.           text-align: center;
  85.           -webkit-font-smoothing: antialiased;
  86.           -moz-osx-font-smoothing: grayscale;
  87.         }
  88.         
  89.         .twitter-share {
  90.           background: #fff;
  91.           color:  #00acee;
  92.           cursor: pointer;
  93.           display: inline-block;
  94.           -webkit-border-radius: 6px;
  95.           border-radius: 6px;
  96.         }
  97.         .twitter-share:hover {
  98.           position: relative;
  99.           top: -1px;
  100.         }
  102.          .facebook-share {
  103.           background: #fff;
  104.           color:  #3b5998;
  105.           cursor: pointer;
  106.           display: inline-block;
  107.           -webkit-border-radius: 6px;
  108.           border-radius: 6px;
  109.         }
  110.         .facebook-share:hover {
  111.           position: relative;
  112.           top: -1px;
  113.         }
  115.         .linkedin-share {
  116.           background: #fff;
  117.           color:  #0e76a8;
  118.           cursor: pointer;
  119.           display: inline-block;
  120.           -webkit-border-radius: 6px;
  121.           border-radius: 6px;
  122.         }
  123.         .linkedin-share:hover {
  124.           position: relative;
  125.           top: -1px;
  126.         }
  129.           </style>
  133. {% endblock %}
  140. {% block nav %}
  141.     <header class="header-nav menu_style_home_one style2 navbar-scrolltofixed stricky main-menu">
  142.  
  143. {% endblock %}
  144.   {% block logo %}
  145.          {{ include('include/logopage.html.twig') }}     
  146.             
  147. {% endblock %}
  149.  
  150. {% block body %}
  165. <section class="our-listing bgc-f7 pb30-991">
  166.         <div class="container">
  167.             <div class="row">
  168.                 <div class="col-lg-12">
  169.                     <div class="listing_sidebar dn db-991">
  170.                         <div class="sidebar_content_details style3">
  171.                             <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
  172.                             <div class="sidebar_listing_list style2 mobile_sytle_sidebar mb0">
  173.                                 <div class="sidebar_advanced_search_widget">
  174.                                     <h4 class="mb25">Advanced Search <a class="filter_closed_btn float-right" href="#"><small>Hide Filter</small> <span class="flaticon-close"></span></a></h4>
  175.                                     <ul class="sasw_list style2 mb0">
  176.                                         <li class="search_area">
  177.                                             <div class="form-group">
  178.                                                 <input type="text" class="form-control" id="exampleInputName1" placeholder="keyword">
  179.                                                 <label for="exampleInputEmail"><span class="flaticon-magnifying-glass"></span></label>
  180.                                             </div>
  181.                                         </li>
  182.                                         <li class="search_area">
  183.                                             <div class="form-group">
  184.                                                 <input type="text" class="form-control" id="exampleInputEmail" placeholder="Location">
  185.                                                 <label for="exampleInputEmail"><span class="flaticon-maps-and-flags"></span></label>
  186.                                             </div>
  187.                                         </li>
  188.                                         <li>
  189.                                             <div class="search_option_two">
  190.                                                 <div class="candidate_revew_select">
  191.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  192.                                                         <option>Status</option>
  193.                                                         <option>Apartment</option>
  194.                                                         <option>Bungalow</option>
  195.                                                         <option>Condo</option>
  196.                                                         <option>House</option>
  197.                                                         <option>Land</option>
  198.                                                         <option>Single Family</option>
  199.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Status"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Status</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  200.                                                 </div>
  201.                                             </div>
  202.                                         </li>
  203.                                         <li>
  204.                                             <div class="search_option_two">
  205.                                                 <div class="candidate_revew_select">
  206.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  207.                                                         <option>Property Type</option>
  208.                                                         <option>Apartment</option>
  209.                                                         <option>Bungalow</option>
  210.                                                         <option>Condo</option>
  211.                                                         <option>House</option>
  212.                                                         <option>Land</option>
  213.                                                         <option>Single Family</option>
  214.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Property Type"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Property Type</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  215.                                                 </div>
  216.                                             </div>
  217.                                         </li>
  218.                                         <li>
  219.                                             <div class="small_dropdown2">
  220.                                                 <div id="prncgs" class="btn dd_btn">
  221.                                                     <span>Price</span>
  222.                                                     <label for="exampleInputEmail2"><span class="fa fa-angle-down"></span></label>
  223.                                                 </div>
  224.                                                   <div class="dd_content2">
  225.                                                     <div class="pricing_acontent">
  226.                                                         <span id="slider-range-value1">$52,000</span>
  227.                                                         <span class="mt0" id="slider-range-value2">$98,000</span>
  228.                                                         <div id="slider" class="noUi-target noUi-ltr noUi-horizontal noUi-background"><div class="noUi-base"><div class="noUi-origin noUi-connect" style="left: 0%;"><div class="noUi-handle noUi-handle-lower"></div></div><div class="noUi-origin noUi-background" style="left: 58.9744%;"><div class="noUi-handle noUi-handle-upper"></div></div></div></div>
  229.                                                         <!-- <input type="text" class="amount" placeholder="$52,239"> 
  230.                                                         <input type="text" class="amount2" placeholder="$985,14">
  231.                                                         <div class="slider-range"></div> -->
  232.                                                     </div>
  233.                                                   </div>
  234.                                             </div>
  235.                                         </li>
  236.                                         <li>
  237.                                             <div class="search_option_two">
  238.                                                 <div class="candidate_revew_select">
  239.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  240.                                                         <option>Bathrooms</option>
  241.                                                         <option>1</option>
  242.                                                         <option>2</option>
  243.                                                         <option>3</option>
  244.                                                         <option>4</option>
  245.                                                         <option>5</option>
  246.                                                         <option>6</option>
  247.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Bathrooms"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bathrooms</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  248.                                                 </div>
  249.                                             </div>
  250.                                         </li>
  251.                                         <li>
  252.                                             <div class="search_option_two">
  253.                                                 <div class="candidate_revew_select">
  254.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  255.                                                         <option>Bedrooms</option>
  256.                                                         <option>1</option>
  257.                                                         <option>2</option>
  258.                                                         <option>3</option>
  259.                                                         <option>4</option>
  260.                                                         <option>5</option>
  261.                                                         <option>6</option>
  262.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Bedrooms"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Bedrooms</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  263.                                                 </div>
  264.                                             </div>
  265.                                         </li>
  266.                                         <li>
  267.                                             <div class="search_option_two">
  268.                                                 <div class="candidate_revew_select">
  269.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  270.                                                         <option>Garages</option>
  271.                                                         <option>Yes</option>
  272.                                                         <option>No</option>
  273.                                                         <option>Others</option>
  274.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Garages"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Garages</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  275.                                                 </div>
  276.                                             </div>
  277.                                         </li>
  278.                                         <li>
  279.                                             <div class="search_option_two">
  280.                                                 <div class="candidate_revew_select">
  281.                                                     <div class="dropdown bootstrap-select w100 show-tick"><select class="selectpicker w100 show-tick" tabindex="-98">
  282.                                                         <option>Year built</option>
  283.                                                         <option>2013</option>
  284.                                                         <option>2014</option>
  285.                                                         <option>2015</option>
  286.                                                         <option>2016</option>
  287.                                                         <option>2017</option>
  288.                                                         <option>2018</option>
  289.                                                         <option>2019</option>
  290.                                                         <option>2020</option>
  291.                                                     </select><button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" title="Year built"><div class="filter-option"><div class="filter-option-inner"><div class="filter-option-inner-inner">Year built</div></div> </div></button><div class="dropdown-menu " role="combobox"><div class="inner show" role="listbox" aria-expanded="false" tabindex="-1"><ul class="dropdown-menu inner show"></ul></div></div></div>
  292.                                                 </div>
  293.                                             </div>
  294.                                         </li>
  295.                                         <li class="min_area style2 list-inline-item">
  296.                                             <div class="form-group">
  297.                                                 <input type="text" class="form-control" id="exampleInputName2" placeholder="Min Area">
  298.                                             </div>
  299.                                         </li>
  300.                                         <li class="max_area list-inline-item">
  301.                                             <div class="form-group">
  302.                                                 <input type="text" class="form-control" id="exampleInputName3" placeholder="Max Area">
  303.                                             </div>
  304.                                         </li>
  305.                                         <li>
  306.                                               <div id="accordion" class="panel-group">
  307.                                                 <div class="panel">
  308.                                                       <div class="panel-heading">
  309.                                                           <h4 class="panel-title">
  310.                                                             <a href="#panelBodyRating" class="accordion-toggle link" data-toggle="collapse" data-parent="#accordion"><i class="flaticon-more"></i> Advanced features</a>
  311.                                                         </h4>
  312.                                                       </div>
  313.                                                     <div id="panelBodyRating" class="panel-collapse collapse">
  314.                                                         <div class="panel-body row">
  315.                                                               <div class="col-lg-12">
  316.                                                                 <ul class="ui_kit_checkbox selectable-list float-left fn-400">
  317.                                                                     <li>
  318.                                                                         <div class="custom-control custom-checkbox">
  319.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck1">
  320.                                                                             <label class="custom-control-label" for="customCheck1">Air Conditioning</label>
  321.                                                                         </div>
  322.                                                                     </li>
  323.                                                                     <li>
  324.                                                                         <div class="custom-control custom-checkbox">
  325.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck4">
  326.                                                                             <label class="custom-control-label" for="customCheck4">Barbeque</label>
  327.                                                                         </div>
  328.                                                                     </li>
  329.                                                                     <li>
  330.                                                                         <div class="custom-control custom-checkbox">
  331.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck10">
  332.                                                                             <label class="custom-control-label" for="customCheck10">Gym</label>
  333.                                                                         </div>
  334.                                                                     </li>
  335.                                                                     <li>
  336.                                                                         <div class="custom-control custom-checkbox">
  337.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck5">
  338.                                                                             <label class="custom-control-label" for="customCheck5">Microwave</label>
  339.                                                                         </div>
  340.                                                                     </li>
  341.                                                                     <li>
  342.                                                                         <div class="custom-control custom-checkbox">
  343.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck6">
  344.                                                                             <label class="custom-control-label" for="customCheck6">TV Cable</label>
  345.                                                                         </div>
  346.                                                                     </li>
  347.                                                                     <li>
  348.                                                                         <div class="custom-control custom-checkbox">
  349.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck2">
  350.                                                                             <label class="custom-control-label" for="customCheck2">Lawn</label>
  351.                                                                         </div>
  352.                                                                     </li>
  353.                                                                     <li>
  354.                                                                         <div class="custom-control custom-checkbox">
  355.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck11">
  356.                                                                             <label class="custom-control-label" for="customCheck11">Refrigerator</label>
  357.                                                                         </div>
  358.                                                                     </li>
  359.                                                                     <li>
  360.                                                                         <div class="custom-control custom-checkbox">
  361.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck3">
  362.                                                                             <label class="custom-control-label" for="customCheck3">Swimming Pool</label>
  363.                                                                         </div>
  364.                                                                     </li>
  365.                                                                 </ul>
  366.                                                                 <ul class="ui_kit_checkbox selectable-list float-right fn-400">
  367.                                                                     <li>
  368.                                                                         <div class="custom-control custom-checkbox">
  369.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck12">
  370.                                                                             <label class="custom-control-label" for="customCheck12">WiFi</label>
  371.                                                                         </div>
  372.                                                                     </li>
  373.                                                                     <li>
  374.                                                                         <div class="custom-control custom-checkbox">
  375.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck14">
  376.                                                                             <label class="custom-control-label" for="customCheck14">Sauna</label>
  377.                                                                         </div>
  378.                                                                     </li>
  379.                                                                     <li>
  380.                                                                         <div class="custom-control custom-checkbox">
  381.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck7">
  382.                                                                             <label class="custom-control-label" for="customCheck7">Dryer</label>
  383.                                                                         </div>
  384.                                                                     </li>
  385.                                                                     <li>
  386.                                                                         <div class="custom-control custom-checkbox">
  387.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck9">
  388.                                                                             <label class="custom-control-label" for="customCheck9">Washer</label>
  389.                                                                         </div>
  390.                                                                     </li>
  391.                                                                     <li>
  392.                                                                         <div class="custom-control custom-checkbox">
  393.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck13">
  394.                                                                             <label class="custom-control-label" for="customCheck13">Laundry</label>
  395.                                                                         </div>
  396.                                                                     </li>
  397.                                                                     <li>
  398.                                                                         <div class="custom-control custom-checkbox">
  399.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck8">
  400.                                                                             <label class="custom-control-label" for="customCheck8">Outdoor Shower</label>
  401.                                                                         </div>
  402.                                                                     </li>
  403.                                                                     <li>
  404.                                                                         <div class="custom-control custom-checkbox">
  405.                                                                             <input type="checkbox" class="custom-control-input" id="customCheck15">
  406.                                                                             <label class="custom-control-label" for="customCheck15">Window Coverings</label>
  407.                                                                         </div>
  408.                                                                     </li>
  409.                                                                 </ul>
  410.                                                             </div>
  411.                                                         </div>
  412.                                                     </div>
  413.                                                 </div>
  414.                                             </div>
  415.                                         </li>
  416.                                         <li>
  417.                                             <div class="search_option_button">
  418.                                                 <button type="submit" class="btn btn-block btn-thm">Search</button>
  419.                                             </div>
  420.                                         </li>
  421.                                     </ul>
  422.                                 </div>
  423.                             </div>
  424.                         </div>
  425.                     </div>
  426.                 </div>
  427.             </div>
  428.             <div class="row">
  429.                 <div class="col-lg-6">
  430.                     <div class="breadcrumb_content style2 mb0-991">
  431.                         <ol class="breadcrumb">
  432.                             <li class="breadcrumb-item"><a href="#">Home</a></li>
  433.                             <li class="breadcrumb-item active text-thm" aria-current="page">Simple Listing – List View</li>
  434.                         </ol>
  435.                         <h2 class="breadcrumb_title">Simple Listing – List View</h2>
  436.                     </div>
  437.                 </div>
  438.                 <div class="col-lg-6">
  439.                     <div class="listing_list_style mb20-xsd tal-991">
  440.                         <ul class="mb0">
  441.                             <li class="list-inline-item"><a href="#"><span class="fa fa-th-large"></span></a></li>
  442.                             <li class="list-inline-item"><a href="#"><span class="fa fa-th-list"></span></a></li>
  443.                         </ul>
  444.                     </div>
  445.                     <div class="dn db-991 mt30 mb0">
  446.                         <div id="main2">
  447.                             <span id="open2" class="flaticon-filter-results-button filter_open_btn style2"> Show Filter</span>
  448.                         </div>
  449.                     </div>
  450.                 </div>
  451.             </div>
  455.             <div class="row">
  456.                 <div class="col-lg-4 col-xl-4">
  457.                     <div class="sidebar_listing_grid1 dn-991">
  458.                         
  459.                         
  460.    {{ include('recherche/form.html.twig') }}  
  461.     {{ include('widget/propositionliste.html.twig') }} 
  468.                         <div class="terms_condition_widget">
  469.                             <h4 class="title">Categories Property</h4>
  470.                             <div class="widget_list">
  471.                                 <ul class="list_details">
  472.                                     <li><a href="#"><i class="fa fa-caret-right mr10"></i>Apartment <span class="float-right">6 properties</span></a></li>
  473.                                     <li><a href="#"><i class="fa fa-caret-right mr10"></i>Condo <span class="float-right">12 properties</span></a></li>
  474.                                     <li><a href="#"><i class="fa fa-caret-right mr10"></i>Family House <span class="float-right">8 properties</span></a></li>
  475.                                     <li><a href="#"><i class="fa fa-caret-right mr10"></i>Modern Villa <span class="float-right">26 properties</span></a></li>
  476.                                     <li><a href="#"><i class="fa fa-caret-right mr10"></i>Town House <span class="float-right">89 properties</span></a></li>
  477.                                 </ul>
  478.                             </div>
  479.                         </div>
  480.                         <div class="sidebar_feature_listing">
  481.                             <h4 class="title">Recently Viewed</h4>
  482.                             <div class="media">
  483.                                 <img class="align-self-start mr-3" src="images/blog/fls1.jpg" alt="fls1.jpg">
  484.                                 <div class="media-body">
  485.                                     <h5 class="mt-0 post_title">Nice Room With View</h5>
  486.                                     <a href="#">$13,000/<small>/mo</small></a>
  487.                                     <ul class="mb0">
  488.                                         <li class="list-inline-item">Beds: 4</li>
  489.                                         <li class="list-inline-item">Baths: 2</li>
  490.                                         <li class="list-inline-item">Sq Ft: 5280</li>
  491.                                     </ul>
  492.                                 </div>
  493.                             </div>
  494.                             <div class="media">
  495.                                 <img class="align-self-start mr-3" src="images/blog/fls2.jpg" alt="fls2.jpg">
  496.                                 <div class="media-body">
  497.                                     <h5 class="mt-0 post_title">Villa called Archangel</h5>
  498.                                     <a href="#">$13,000<small>/mo</small></a>
  499.                                     <ul class="mb0">
  500.                                         <li class="list-inline-item">Beds: 4</li>
  501.                                         <li class="list-inline-item">Baths: 2</li>
  502.                                         <li class="list-inline-item">Sq Ft: 5280</li>
  503.                                     </ul>
  504.                                 </div>
  505.                             </div>
  506.                             <div class="media">
  507.                                 <img class="align-self-start mr-3" src="images/blog/fls3.jpg" alt="fls3.jpg">
  508.                                 <div class="media-body">
  509.                                     <h5 class="mt-0 post_title">Sunset Studio</h5>
  510.                                     <a href="#">$13,000<small>/mo</small></a>
  511.                                     <ul class="mb0">
  512.                                         <li class="list-inline-item">Beds: 4</li>
  513.                                         <li class="list-inline-item">Baths: 2</li>
  514.                                         <li class="list-inline-item">Sq Ft: 5280</li>
  515.                                     </ul>
  516.                                 </div>
  517.                             </div>
  518.                         </div>
  519.                     </div>
  520.                 </div>
  521.                 <div class="col-md-12 col-lg-8">
  522.                     <div class="row">
  523.                         <div class="grid_list_search_result">
  524.                             <div class="col-sm-12 col-md-4 col-lg-4 col-xl-5">
  525.                                 <div class="left_area tac-xsd">
  526.                                     <p> {% for message in app.flashes('success') %}
  527.                                                         {{ message| raw  }}  
  528.                                             {% endfor %}</p>
  529.                                 </div>
  530.                             </div>
  531.                              
  532.                         </div>
  533.                     </div>
  546.  <!DOCTYPE html>
  547. <html dir="ltr" lang="en">
  548. <head>
  549.  
  550. <!-- css file -->
  551. <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
  552. <link rel="stylesheet" href="{{ asset('css/style.css') }}">
  553.  
  555.  
  556. </head>
  557. <body>
  558.   
  559.     <div id="results"></div>
  560.             <div id="loader_image"><img src="{{ asset('images/loader.gif') }}" alt="" width="24" height="24"> Loading...please wait</div>
  561.             <div class="margin10"></div>
  562.             <div id="loader_message"></div>
  563.                
  564.      
  566.                 </div>
  567.             </div>
  568.         </div>
  569.     </section>
  574.  
  575.  
  576. <!-- Wrapper End -->
  577. <script type="text/javascript" src="{{ asset('js/jquery-3.3.1.js') }}"></script>
  578.  
  579.  
  580. <script type="text/javascript" src="{{ asset('js/bootstrap.min.js') }}"></script>
  581.  
  582.  
  583.  
  584. <!-- Custom script for all pages --> 
  585. <script type="text/javascript" src="{{ asset('js/script.js') }}"></script>
  587.     
  588.  <!-- Wrapper End -->
  589. <script type="text/javascript" src="{{ asset('js/progressbar.js') }}"></script>
  591. <script>
  593.  
  594.  
  595.  
  597.     function onClickBtnLike(event) {
  598.     event.preventDefault();
  600.     const url = this.href;
  601.     const spanCount = this.querySelector('span.js-likes');
  602.     const icone = this.querySelector('i');
  604.     axios.get(url).then(function (response) {
  605.         spanCount.textContent = response.data.likes;
  608. if (response.status === 200){
  609.                if (icone.classList.contains('fas')) {
  610.             icone.classList.replace('fas','far');
  611.         }
  612.         else {
  613.             icone.classList.replace('far', 'fas');
  614.         }
  615.         
  616.         }
  617.  
  618.  
  620.     }).catch(function (error) {
  621.          
  622.     });
  623. }
  624. document.querySelectorAll('a.js-like').forEach(function (link){
  625.     link.addEventListener('click', onClickBtnLike)
  626. })
  628.         </script>
  630.   
  631.  {% if  type ==  1 %}
  632.   
  637. <script type="text/javascript">
  638.       var limit = 10
  639.       var offset = 0;
  640.  
  642.       function displayRecords(lim, off) {
  643.         $.ajax({
  644.           type: "GET",
  645.           async: false,
  646.           url: "/getrecords/{{ ville }}",
  647.           data: "limit=" + lim + "&offset=" + off,
  648.           cache: false,
  649.           beforeSend: function() {
  650.             $("#loader_message").html("").hide();
  651.             $('#loader_image').show();
  652.           },
  653.           success: function(html) {
  654.             $('#loader_image').hide();
  655.             $("#results").append(html);
  657.             if (html == "") {
  658.               $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">Fin des résultas.</button>').show()
  659.             } else {
  660.               $("#loader_message").html('<button class="btn btn-default" type="button">Charger plus de données</button>').show();
  661.             }
  664.           }
  665.         });
  666.       }
  668.       $(document).ready(function() {
  669.         // start to load the first set of data
  670.         displayRecords(limit, offset);
  672.         $('#loader_message').click(function() {
  674.           // if it has no more records no need to fire ajax request
  675.           var d = $('#loader_message').find("button").attr("data-atr");
  676.           if (d != "nodata") {
  677.             offset = limit + offset;
  678.             displayRecords(limit, offset);
  679.           }
  680.         });
  682.       });
  684.     </script>
  686. {% else %}
  688. <script type="text/javascript">
  689. var busy = false;
  690. var limit = 15
  691. var offset = 0;
  693. function displayRecords(lim, off) {
  694.   $.ajax({
  695.     type: "GET",
  696.     async: false,
  697.     url: "/getrecords/{{ ville }}",
  698.     data: "limit=" + lim + "&offset=" + off,
  699.     cache: false,
  700.     beforeSend: function() {
  701.       $("#loader_message").html("").hide();
  702.       $('#loader_image').show();
  703.     },
  704.     success: function(html) {
  705.       $("#results").append(html);
  706.       $('#loader_image').hide();
  707.       if (html == "") {
  708.         $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">Fin des résultas.</button>').show()
  709.       } else {
  710.         $("#loader_message").html('<button class="btn btn-default" type="button">Charger plus de données</button>').show();
  711.       }
  712.       window.busy = false;
  715.     }
  716.   });
  717. }
  719. $(document).ready(function() {
  720.   // start to load the first set of data
  721.   if (busy == false) {
  722.     busy = true;
  723.     // start to load the first set of data
  724.     displayRecords(limit, offset);
  725.   }
  728.   $(window).scroll(function() {
  729.     // make sure u give the container id of the data to be loaded in.
  730.     if ($(window).scrollTop() + $(window).height() > $("#results").height() && !busy) {
  731.       busy = true;
  732.       offset = limit + offset;
  734.       // this is optional just to delay the loading of data
  735.       setTimeout(function() { displayRecords(limit, offset); }, 500);
  737.       // you can remove the above code and can use directly this function
  738.       // displayRecords(limit, offset);
  740.     }
  741.   });
  743. });
  745. </script>
  747.  
  748.  
  750.  
  751. {% endif %}  
  754.  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  756. <script>
  758.  
  759.  
  760. var chaine = '<div class="alert alert-primary alert-dismissible fade show" role="alert">Vous avez rajouter cette annonce à vos favories.<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>';
  764.     function onClickBtnLike(event) {
  765.     event.preventDefault();
  767.     const url = this.href;
  768.     const spanCount = this.querySelector('span.js-likes');
  769.     const icone = this.querySelector('i');
  771.     axios.get(url).then(function (response) {
  772.         spanCount.textContent = response.data.likes;
  775. if (response.status === 200){
  776.                if (icone.classList.contains('fas')) {
  777.             icone.classList.replace('fas','far');
  778.         }
  779.         else {
  780.             icone.classList.replace('far', 'fas');
  781.         }
  782.         
  783.         }
  784.  
  785.  
  787.     }).catch(function (error) {
  788.          
  789.     });
  790. }
  791. document.querySelectorAll('a.js-like').forEach(function (link){
  792.     link.addEventListener('click', onClickBtnLike)
  793. })
  795.         </script>
  797.    <script src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>
  800. </body>
  801. </html>
  807.  
  808. {% endblock %}
  810.  
  812. {% block javascripts %}
  813.  
  815.   {{ include('recherche/js.html.twig') }}  
  817.  
  818. {% endblock %}