{%extends "template.html.twig" %}
{% block stylesheets %}
<style>
section.container-body{
/*background-color:#F5DB72;*/
}
</style>
{% endblock %}
{% block section %}
<section class="m-3 p-3" >
<div class="row container-home">
<div class="col-sm-6 mb-3">
<p class="content-banner ">Vous recherchez un prestataire de service en Guyane ? <span class="answer-banner">Trouver un Jobber </span> </p>
<p class="content-banner ">Vous recherchez un complément de revenu en Guyane ? <span class="answer-banner">Devenez Jobber</span></p>
<a href="{{path('security.login')}}" class="mt-3 mb-3 btn btn-primary rounded">Créer un compte</a>
</div>
<!--<div class="container-home-banner col-sm-6"></div>-->
<img src="./images/joby-banner.png" class="col-sm-6"></img>
</div>
</section>
<div class="body-landing row " >
<div class="col-sm-3 desktop-ads">
<section class="row sidebar-ads">
<h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0 text-light" style="background-color:#305d42">Jobbers à l'honneur</h2>
<div class="row container_new_store_list mx-auto">
<div class=" desktop-jobbers-ads container_store_list_landing_page mx-auto"></div>
</div>
</section>
</div>
<div class="container-services col-sm-7">
<section class="row container-home-user p-0 m-0">
<h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0">Les dernières annonces </h2>
<div class="row container_new_offers_list mx-auto">
<div class=" latest-offers container_store_list_landing_page mx-auto"></div>
</div>
<div class="container_spinner">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div id="activation-notification" style="display:none">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="{{asset('/images/artisan.png')}}" class="rounded me-2" alt="..." width=60>
<strong class="me-auto">Abonnez-vous à l'offre <span style="color:#f2c202">Jobber⊕</span> pour voir et répondre aux annonces</strong>
</div>
<div class="toast-body">
<p class="abo-plus">Abonnement <span>Jobber</span><span>⊕</span></p>
<strong>Avantages</strong>
<ul class="list-avantages-abo">
<li>Répondre aux annonces.</li>
<li>Être visible dans la liste des Jobbers.</li>
<li>Communiquer avec vos clients.</li>
<li>Recevoir des offres de mission.</li>
<li>Percevoir le paiement de vos prestations.</li>
</ul>
</div>
<a href="{{path('account.shop.subscription')}}" class="btn col-sm-12 btn-primary text-light text-decoration-none">Activer mon compte</a>
<a id="account-activate-cancel" class="btn col-sm-12 text-light text-decoration-none">Annuler</a>
</div>
</div>
</section>
<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>
<div class="col-sm-3 mobile-ads">
<section class="row sidebar-ads d-none">
<h2 class="title_h2_center col-sm-12 mx-auto p-0 m-0">Jobbers à l'honneur</h2>
<div class="text-center col-sm-12"><em class="text-center">Sponsorisés</em></div>
<div class="row container_new_offers_list mx-auto">
<div class=" mobile-jobbers-ads container_store_list_landing_page mx-auto"></div>
</div>
</section>
</div>
</div>
<div class="col-sm-2 p-3 text-center mx-auto" style="border:3px solid #305d42 !important;border-radius:10px;height:450px;width:350px">
<h2 class="mx-auto color-primary text-center">
Publier une annonce
</h2>
<a href="{{path('offers.create')}}" class="m-3 btn btn-primary rounded mx-auto">Poster un Job</a>
<h2 class="mx-auto color-primary">
Proposer vos services
</h2>
<p>
Arrondissez vos fins de mois ou développez votre activité professionnelle, en répondant aux demandes postées autour de chez vous.
</p>
<a href="{{path('security.login')}}" class="m-3 btn btn-primary rounded mx-auto">Devenir Jobber</a>
</div>
<section class="row container-home-user col-sm-12 mx-auto" >
<h2 class="title_h2_center col-sm-12 mx-auto">Les derniers Jobbers réfécencés</h2>
<div class="row container_new_offers_list mx-auto w-100">
<div class=" latest-store container_store_list_landing_page mx-auto"></div>
</div>
<div class="container_spinner">
<div class="lds-ripple"><div></div><div></div></div>
</div>
</section>
<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>
</div>
</body>
{% endblock %}
{% block footer %}
<script>
function searchComponent(geolocation=false, category=false, filters=false, flag='all'){
this.container_new_offers_list = document.querySelector('.container_new_offers_list');
this.loaderLatestStore = true;
this.category = category;
this.geolocation = geolocation;
this.flag = flag;
// offset to retrieve the stores by position
//this.offset = 0;
//this.offsetSearchItem = 0;
//this.offsetLatestStore = 0;
spinner = document.querySelectorAll('.spinner');
context = 'desktop';
}
searchComponent.prototype = {
requestLatestStore :
{
ajax : null,
category : null,
longitudeUser : null,
latitudeUser : null,
init : function(parent,offset=0){
this.category = (parent.category !== undefined ) ? parent.category : false;
this.ajax = new XMLHttpRequest();
this.longitudeUser = parent.geolocation.longitudeUser;
this.latitudeUser = parent.geolocation.latitudeUser;
this.send(this, offset, this.category);
},
send : function(init, offset, flag, category){
let orderByDistance = false;
this.ajax.onreadystatechange = function() {
if(this.status === 200 && this.readyState === 4)
{
if(this.responseText !== "")
{
if(window.innerWidth < 767){
document.querySelectorAll(".container_store_list_landing_page")[2].classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center') ;
document.querySelectorAll(".container_store_list_landing_page")[2].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
document.querySelector(".latest-store").innerHTML += '<div class="row d-flex justify-content-center">'+ this.responseText + '</div>';
}
else
{
document.querySelector(".latest-store").innerHTML += "Aucun professionnel trouvé";
}
}
jQuery('.show-jobbers').show();
offsetLatestStore = offset;
}
this.ajax.open("POST", "{{path('distance.store')}}", true);
this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestAllStore&category="+this.category);
}
},
// display offers
requestLatestOffers :
{
ajax : null,
category : null,
longitudeUser : null,
latitudeUser : null,
init : function(parent,offset=0){
jQuery(".container_spinner").show();
this.category = (parent.category !== undefined ) ? parent.category : false;
this.ajax = new XMLHttpRequest();
this.longitudeUser = parent.geolocation.longitudeUser;
this.latitudeUser = parent.geolocation.latitudeUser;
this.send(this, offset, this.category);
},
send : function(init, offset, flag, category){
let orderByDistance = false;
this.ajax.onreadystatechange = function() {
if(this.status === 200 && this.readyState === 4)
{
if(this.responseText !== "")
{
/*if(window.innerWidth < 767){
document.querySelectorAll(".container_offer_list_landing_page")[2].classList.add('row', 'd-flex', 'flex-nowrap', 'store-row', 'align-items-center') ;
document.querySelectorAll(".container_offer_list_landing_page")[2].scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}*/
document.querySelector(".latest-offers").innerHTML += '<div class="row d-flex store-row justify-content-center">'+ this.responseText + '</div>';
}
else
{
document.querySelector(".latest-offers").innerHTML += "Aucune offre trouvée";
}
}
offsetLatestOffer = offset;
jQuery(".container_spinner").hide();
jQuery(".show-request").show();
}
this.ajax.open("POST", "{{path('distance.offers')}}", true);
this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestLatestOffers&category="+this.category);
}
},
// display ads jobber
// display offers
requestAdsJobbers :
{
ajax : null,
category : null,
longitudeUser : null,
latitudeUser : null,
init : function(parent,offset=0){
jQuery(".container_spinner").show();
this.category = (parent.category !== undefined ) ? parent.category : false;
this.ajax = new XMLHttpRequest();
this.longitudeUser = parent.geolocation.longitudeUser;
this.latitudeUser = parent.geolocation.latitudeUser;
this.send(this, offset, this.category);
},
send : function(init, offset, flag, category){
let orderByDistance = false;
this.ajax.onreadystatechange = function() {
if(this.status === 200 && this.readyState === 4)
{
if(this.responseText !== "")
{
if(window.innerWidth < 767){
document.querySelector(".desktop-ads").style.display = 'none';
document.querySelector(".mobile-jobbers-ads").classList.add('row', 'd-flex', 'flex-nowrap', 'align-items-center') ;
document.querySelector(".mobile-jobbers-ads").scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
document.querySelector(".mobile-jobbers-ads").innerHTML += '<div class="row d-flex flex-nowrap">'+ this.responseText + '</div>';
} else {
document.querySelector(".mobile-ads").style.display = 'none';
document.querySelector(".mobile-jobbers-ads").style.display = 'none';
document.querySelector(".desktop-jobbers-ads").innerHTML += '<div class="row d-flex store-row justify-content-center">'+ this.responseText + '</div>';
}
}
else
{
document.querySelector(".jobbers-ads").innerHTML += "Aucun jobber trouvé";
}
}
//offsetLatestOffer = offset;
jQuery(".container_spinner").hide();
}
this.ajax.open("POST", "{{path('distance.store')}}", true);
this.ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.ajax.send("latitudeUser="+this.latitudeUser+"&longitudeUser="+this.longitudeUser+"&offset="+offset+"&orderByDistance="+orderByDistance+"&flag=requestAdsJobber");
}
},
}
// instance of the searchComponent by calling the requestLatestStore
var requestLatestStore = null;
(function(){
// launch the geolocation
navigator.geolocation.getCurrentPosition( function(pos){
console.log(pos.coords.latitude);
});
console.log(navigator.geolocation);
if (navigator.geolocation !== undefined )
{
navigator.geolocation.getCurrentPosition(function(position)
{
latitudeUser = position.coords.latitude;
longitudeUser = position.coords.longitude;
//if(latitudeUser !== undefined && longitudeUser !== undefined)
//{
jQuery('.PopUp-Geo').hide();
isGeo = true;
//}
geolocation = {'latitudeUser':latitudeUser, 'longitudeUser':longitudeUser};
requestAllStore = new searchComponent(geolocation, false, false);
if(window.innerWidth < 750){
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"}) });
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"}) });
/*document.querySelector('.prime_container_store_list').style.overflowX = 'auto';
document.querySelector('.prime_container_offer_list').style.overflowX = 'auto';
document.querySelector('.itemSearched_container_store_list').style.overflowX = 'auto';
document.querySelector('.itemSearched_container_offer_list').style.overflowX = 'auto';
document.querySelector('.container_new_store_list').style.overflowX = 'auto';
document.querySelector('.container_new_offer_list').style.overflowX = 'auto';*/
}
seeMore = document.querySelector('.seeMore');
jQuery('#geoDisabled').hide();
requestLatestStore = new searchComponent(geolocation,false,false);
requestLatestOffer = new searchComponent(geolocation,false,false);
requestAdsJobbers = new searchComponent(geolocation,false,false);
requestLatestStore.requestLatestStore.init(requestLatestStore);
requestLatestOffer.requestLatestOffers.init(requestLatestOffer);
requestAdsJobbers.requestAdsJobbers.init(requestAdsJobbers);
})
} else{
jQuery('#geoDisabled').show();
geolocation = 'pas de géolocalisation';
}
//requestLatestsProducts = new searchComponent(geolocation, false, false);
//requestLatestsProducts.requestLatestsProducts.init(requestLatestsProducts);
})();
jQuery('.container-menu-jobber-plus').click(function(ev){
ev.preventDefault();
jQuery('#activation-notification').show();
jQuery('#activation-notification').css('width','100%');
jQuery('#activation-notification').css('heigth','100%');
jQuery('#activation-notification').css('position','fixed');
})
jQuery('#account-activate-cancel').click(function(ev){
ev.preventDefault();
jQuery('#activation-notification').hide();
})
</script>
<script src="https://cdn.jsdelivr.net/npm/places.js@1.18.2"></script>
<script src="{{asset("js/placeId.js")}}"></script>
<script>
window.offersStatus = function(event){
event.preventDefault();
jQuery('#activation-notification').show();
jQuery('#activation-notification').css('width','100%');
jQuery('#activation-notification').css('height','100%');
}
</script>
{% endblock %}