templates/home.html.twig line 1

Open in your IDE?
  1. {%extends "template.html.twig" %}
  2. {% block stylesheets %}
  3. <style>
  4. section.container-body{
  5.     /*background-color:#F5DB72;*/
  6. }
  7. </style>
  8. {% endblock %}
  9. {% block section %}
  10.     <section class="m-3 p-3" >
  11.         <div class="row container-home">
  12.             <div class="col-sm-6 mb-3">
  13.                 <p class="content-banner ">Vous recherchez un prestataire de service en Guyane ? <span class="answer-banner">Trouver un Jobber </span> </p>
  14.                 <p class="content-banner ">Vous recherchez un complément de revenu en Guyane ? <span class="answer-banner">Devenez Jobber</span></p>
  15.                 <a href="{{path('security.login')}}" class="mt-3 mb-3 btn btn-primary rounded">Créer un compte</a>
  16.             </div>
  17.             <!--<div class="container-home-banner col-sm-6"></div>-->
  18.             <img src="./images/joby-banner.png" class="col-sm-6"></img>
  19.         </div>
  20.     </section>
  21.     <div class="body-landing row " >
  22.         <div class="col-sm-3 desktop-ads">
  23.                 <section class="row sidebar-ads">
  24.                     <h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0 text-light" style="background-color:#305d42">Jobbers à l'honneur</h2>
  25.                     <div class="row  container_new_store_list mx-auto">    
  26.                         <div class=" desktop-jobbers-ads container_store_list_landing_page mx-auto"></div>
  27.                     </div>
  28.             </section>
  29.         </div>
  30.         <div class="container-services col-sm-7">
  31.             <section class="row container-home-user p-0 m-0">
  32.                     <h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0">Les dernières annonces </h2>
  33.                     <div class="row  container_new_offers_list mx-auto">
  34.                         <div class=" latest-offers container_store_list_landing_page mx-auto"></div>
  35.                     </div>
  36.                     <div class="container_spinner">
  37.                         <div class="lds-ripple"><div></div><div></div></div>
  38.                     </div>
  39.             
  40.                         <div id="activation-notification" style="display:none">
  41.                             <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  42.                                 <div class="toast-header">
  43.                                 <img src="{{asset('/images/artisan.png')}}" class="rounded me-2" alt="..." width=60>
  44.                                 <strong class="me-auto">Abonnez-vous à l'offre <span style="color:#f2c202">Jobber⊕</span> pour voir et répondre aux annonces</strong>
  45.                                 </div>
  46.                                 <div class="toast-body">
  47.                                 <p class="abo-plus">Abonnement <span>Jobber</span><span>⊕</span></p>
  48.                                 <strong>Avantages</strong>
  49.                                 <ul class="list-avantages-abo">
  50.                                     <li>Répondre aux annonces.</li>
  51.                                     <li>Être visible dans la liste des Jobbers.</li>
  52.                                     <li>Communiquer avec vos clients.</li>
  53.                                     <li>Recevoir des offres de mission.</li>
  54.                                     <li>Percevoir le paiement de vos prestations.</li>
  55.                                 </ul>
  56.                                 </div>    
  57.                                     <a href="{{path('account.shop.subscription')}}" class="btn col-sm-12 btn-primary text-light text-decoration-none">Activer mon compte</a>    
  58.                                     <a id="account-activate-cancel" class="btn col-sm-12 text-light text-decoration-none">Annuler</a>
  59.                             </div>
  60.                         </div>
  61.                     
  62.             </section>
  63.                 <a href="{{path('offers')}}" class="m-3 btn btn-primary rounded mx-auto show-request col-sm-12" style="display:none">Voir toutes les annonces</a>
  64.         <div class="col-sm-3 mobile-ads">
  65.             <section class="row sidebar-ads d-none">    
  66.                     <h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0">Jobbers à l'honneur</h2>
  67.                     <div class="text-center col-sm-12"><em class="text-center">Sponsorisés</em></div>
  68.                 <div class="row  container_new_offers_list mx-auto">    
  69.                     <div class=" mobile-jobbers-ads container_store_list_landing_page mx-auto"></div>
  70.                 </div>
  71.             </section>
  72.         </div>
  73.             
  74.         </div>
  75.         <div class="col-sm-2 p-3 text-center mx-auto" style="border:3px solid #305d42 !important;border-radius:10px;height:450px;width:350px">
  76.             <h2 class="mx-auto color-primary text-center">
  77.                 Publier une annonce
  78.             </h2>
  79.             <a href="{{path('offers.create')}}" class="m-3 btn btn-primary rounded mx-auto">Poster un Job</a>
  80.             <h2 class="mx-auto color-primary">
  81.                 Proposer vos services
  82.             </h2>
  83.             <p>
  84.             Arrondissez vos fins de mois ou développez votre activité professionnelle, en répondant aux demandes postées autour de chez vous.
  85.             </p>
  86.             <a href="{{path('security.login')}}" class="m-3 btn btn-primary rounded mx-auto">Devenir Jobber</a>
  87.         </div>
  88.         <section class="row container-home-user col-sm-12 mx-auto" >
  89.                     <h2 class="title_h2_center col-sm-12 mx-auto">Les derniers Jobbers réfécencés</h2>
  90.                     <div class="row  container_new_offers_list mx-auto w-100">    
  91.                         <div class=" latest-store container_store_list_landing_page mx-auto"></div>
  92.                     </div>
  93.                     <div class="container_spinner">
  94.                         <div class="lds-ripple"><div></div><div></div></div>
  95.                     </div>
  96.             </section>
  97.                 <a href="{{path('jobbers')}}" class="m-3 btn btn-primary rounded mx-auto show-jobbers col-sm-12" style="display:none">Voir tous les Jobbers</a>
  98.     </div>
  99. </body>
  100.  {% endblock %}
  101.  
  102.  {% block footer %}
  103.  <script>
  104.      function searchComponent(geolocation=false, category=false, filters=false, flag='all'){
  105.         this.container_new_offers_list = document.querySelector('.container_new_offers_list');
  106.         this.loaderLatestStore = true;
  107.         this.category = category;
  108.         this.geolocation = geolocation;
  109.         this.flag = flag;
  110.         // offset to retrieve the stores by position
  111.         //this.offset = 0;
  112.         //this.offsetSearchItem = 0;
  113.         //this.offsetLatestStore = 0;
  114.         spinner = document.querySelectorAll('.spinner');
  115.         context = 'desktop';
  116.     }
  117.     searchComponent.prototype = {
  118.         requestLatestStore :
  119.         {
  120.             ajax : null,
  121.             category : null,
  122.             longitudeUser : null,
  123.             latitudeUser : null,
  124.         init : function(parent,offset=0){
  125.             this.category = (parent.category !== undefined ) ? parent.category : false;
  126.             this.ajax = new XMLHttpRequest();
  127.             this.longitudeUser =  parent.geolocation.longitudeUser;
  128.             this.latitudeUser =  parent.geolocation.latitudeUser;
  129.             this.send(this, offset, this.category);
  130.             },
  131.         send : function(init, offset, flag, category){
  132.             let orderByDistance = false;
  133.             this.ajax.onreadystatechange = function() {
  134.                 if(this.status === 200 && this.readyState === 4)
  135.                 {
  136.                     if(this.responseText !== "")
  137.                     {
  138.                             if(window.innerWidth < 767){
  139.                                 document.querySelectorAll(".container_store_list_landing_page")[2].classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center') ;
  140.                                 document.querySelectorAll(".container_store_list_landing_page")[2].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  141.                             }
  142.                         document.querySelector(".latest-store").innerHTML += '<div class="row d-flex  justify-content-center">'+ this.responseText + '</div>';
  143.                     }
  144.                     else
  145.                     {
  146.                         document.querySelector(".latest-store").innerHTML += "Aucun professionnel trouvé";
  147.                     }
  148.                 }
  149.                 jQuery('.show-jobbers').show();
  150.             offsetLatestStore = offset;
  151.             }
  152.             this.ajax.open("POST", "{{path('distance.store')}}", true);
  153.             this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  154.             this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestAllStore&category="+this.category);
  155.         }
  156.     },
  157. // display offers 
  158.     requestLatestOffers :
  159.         {
  160.             ajax : null,
  161.             category : null,
  162.             longitudeUser : null,
  163.             latitudeUser : null,
  164.         init : function(parent,offset=0){
  165.             jQuery(".container_spinner").show();
  166.             this.category = (parent.category !== undefined ) ? parent.category : false;
  167.             this.ajax = new XMLHttpRequest();
  168.             this.longitudeUser =  parent.geolocation.longitudeUser;
  169.             this.latitudeUser =  parent.geolocation.latitudeUser;
  170.             this.send(this, offset, this.category);
  171.             },
  172.         send : function(init, offset, flag, category){
  173.             let orderByDistance = false;
  174.             this.ajax.onreadystatechange = function() {
  175.                 if(this.status === 200 && this.readyState === 4)
  176.                 {
  177.                     if(this.responseText !== "")
  178.                     {
  179.                             /*if(window.innerWidth < 767){
  180.                                 document.querySelectorAll(".container_offer_list_landing_page")[2].classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center') ;
  181.                                 document.querySelectorAll(".container_offer_list_landing_page")[2].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  182.                             }*/
  183.                         document.querySelector(".latest-offers").innerHTML += '<div class="row d-flex store-row justify-content-center">'+ this.responseText + '</div>';
  184.                     }
  185.                     else
  186.                     {
  187.                         document.querySelector(".latest-offers").innerHTML += "Aucune offre trouvée";
  188.                     }
  189.                 }
  190.             offsetLatestOffer = offset;
  191.                             jQuery(".container_spinner").hide();
  192.                             jQuery(".show-request").show();
  193.             }
  194.             this.ajax.open("POST", "{{path('distance.offers')}}", true);
  195.             this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  196.             this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestLatestOffers&category="+this.category);
  197.         }
  198.     },
  199.     // display ads jobber
  200.     // display offers 
  201.     requestAdsJobbers :
  202.         {
  203.             ajax : null,
  204.             category : null,
  205.             longitudeUser : null,
  206.             latitudeUser : null,
  207.         init : function(parent,offset=0){
  208.             jQuery(".container_spinner").show();
  209.             this.category = (parent.category !== undefined ) ? parent.category : false;
  210.             this.ajax = new XMLHttpRequest();
  211.             this.longitudeUser =  parent.geolocation.longitudeUser;
  212.             this.latitudeUser =  parent.geolocation.latitudeUser;
  213.             this.send(this, offset, this.category);
  214.             },
  215.         send : function(init, offset, flag, category){
  216.             let orderByDistance = false;
  217.             this.ajax.onreadystatechange = function() {
  218.                 if(this.status === 200 && this.readyState === 4)
  219.                 {
  220.                     if(this.responseText !== "")
  221.                     {
  222.                             if(window.innerWidth < 767){
  223.                                 document.querySelector(".desktop-ads").style.display = 'none';
  224.                                 document.querySelector(".mobile-jobbers-ads").classList.add('row', 'd-flex', 'flex-nowrap', 'align-items-center') ;
  225.                                 document.querySelector(".mobile-jobbers-ads").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
  226.                                 document.querySelector(".mobile-jobbers-ads").innerHTML += '<div class="row d-flex flex-nowrap">'+ this.responseText + '</div>';
  227.                             } else {
  228.                                 document.querySelector(".mobile-ads").style.display = 'none';
  229.                                 document.querySelector(".mobile-jobbers-ads").style.display = 'none';
  230.                                 document.querySelector(".desktop-jobbers-ads").innerHTML += '<div class="row d-flex store-row justify-content-center">'+ this.responseText + '</div>';
  231.                             }
  232.                     }
  233.                     else
  234.                     {
  235.                         document.querySelector(".jobbers-ads").innerHTML += "Aucun jobber trouvé";
  236.                     }
  237.                 }
  238.             //offsetLatestOffer = offset;
  239.                             jQuery(".container_spinner").hide();
  240.             }
  241.             this.ajax.open("POST", "{{path('distance.store')}}", true);
  242.             this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  243.             this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestAdsJobber");
  244.         }
  245.     },
  246. }
  247.   
  248.     // instance of the searchComponent by calling the requestLatestStore
  249.     var requestLatestStore = null;
  250.     (function(){
  251.         
  252.         // launch the geolocation 
  253.         navigator.geolocation.getCurrentPosition( function(pos){
  254.             console.log(pos.coords.latitude);
  255.         });
  256.         console.log(navigator.geolocation);
  257.         if (navigator.geolocation !== undefined ) 
  258.             {
  259.                 navigator.geolocation.getCurrentPosition(function(position)
  260.                 {
  261.                     latitudeUser = position.coords.latitude;
  262.                     longitudeUser = position.coords.longitude;
  263.                     //if(latitudeUser !== undefined && longitudeUser !== undefined)
  264.                     //{
  265.                         jQuery('.PopUp-Geo').hide();
  266.                         isGeo = true;
  267.                     //}
  268.                     geolocation = {'latitudeUser':latitudeUser, 'longitudeUser':longitudeUser};
  269.                     requestAllStore = new searchComponent(geolocation, false, false);
  270.                     if(window.innerWidth < 750){
  271.                         document.querySelectorAll(".container_store_list_landing_page").forEach(function(containerStore){containerStore.classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center');containerStore.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}) });
  272.                         document.querySelectorAll(".container_offer_list_landing_page").forEach(function(containerStore){containerStore.classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center');containerStore.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"}) });
  273.                         /*document.querySelector('.prime_container_store_list').style.overflowX = 'auto';
  274.                         document.querySelector('.prime_container_offer_list').style.overflowX = 'auto';
  275.                         document.querySelector('.itemSearched_container_store_list').style.overflowX = 'auto';
  276.                         document.querySelector('.itemSearched_container_offer_list').style.overflowX = 'auto';
  277.                         document.querySelector('.container_new_store_list').style.overflowX = 'auto';
  278.                         document.querySelector('.container_new_offer_list').style.overflowX = 'auto';*/
  279.                     }
  280.                     seeMore = document.querySelector('.seeMore');
  281.                     jQuery('#geoDisabled').hide();
  282.                     requestLatestStore = new searchComponent(geolocation,false,false);
  283.                     requestLatestOffer = new searchComponent(geolocation,false,false);
  284.                     requestAdsJobbers = new searchComponent(geolocation,false,false);
  285.                     requestLatestStore.requestLatestStore.init(requestLatestStore);
  286.                     requestLatestOffer.requestLatestOffers.init(requestLatestOffer);
  287.                     requestAdsJobbers.requestAdsJobbers.init(requestAdsJobbers);
  288.                 
  289.                 })
  290.             } else{
  291.                 jQuery('#geoDisabled').show();
  292.                 geolocation = 'pas de géolocalisation';
  293.             }
  294.             //requestLatestsProducts = new searchComponent(geolocation, false, false);
  295.             //requestLatestsProducts.requestLatestsProducts.init(requestLatestsProducts);
  296.     })();
  297.             jQuery('.container-menu-jobber-plus').click(function(ev){
  298.             ev.preventDefault();
  299.             jQuery('#activation-notification').show();
  300.             jQuery('#activation-notification').css('width','100%');
  301.             jQuery('#activation-notification').css('heigth','100%');
  302.             jQuery('#activation-notification').css('position','fixed');
  303.         })
  304.         jQuery('#account-activate-cancel').click(function(ev){
  305.             ev.preventDefault();
  306.             jQuery('#activation-notification').hide();
  307. })
  308.     
  309.  </script>
  310.  <script src="https://cdn.jsdelivr.net/npm/places.js@1.18.2"></script>
  311.  <script src="{{asset("js/placeId.js")}}"></script>
  312.  <script>
  313.         window.offersStatus = function(event){
  314.             event.preventDefault();
  315.             jQuery('#activation-notification').show();
  316.             jQuery('#activation-notification').css('width','100%');
  317.             jQuery('#activation-notification').css('height','100%');
  318.         }
  319.     </script>
  320.  {% endblock %}