Sélectionnez une concession
<div x-data="initConcessionSelectionMap()"
@resize.window="isMobile = window.innerWidth < 768"
class="concession-selection-map h-full flex flex-col"
>
<div class="flex flex-col md:flex-row items-center pt-7 pb-6.25 md:py-3.75 px-6 md:px-7 bg-white">
<div class="font-semibold tracking-tightened text-lg md:text-2xl md:w-1/2 pb-2.5 md:pb-0">Sélectionnez une concession</div>
<div class="w-full md:w-1/2">
<div class="desktop-only">
<div class="form-element form-select w-full"
x-data="selectInput"
:class="{ 'active' : active }"
@click.away="active = false"
>
<input x-ref="input" name="choose_concession" class="" id="choose_concession" type="text" pattern="\S+" x-model="currentValue" @change="setConcessionSelect()">
<div x-ref="display" @click="active = !active" class="form-input select" x-text="currentLabel"></div>
<label @click="active = !active" :class="{ 'moved' : full }" for="choose_concession">Ou choisir une concession</label>
<ul x-ref="options" class="select-options" x-show="active">
<template x-for="concession in concessionsList">
<li><button type="button" @click="setValue(concession.id, concession.name)" x-text="concession.name"></button></li>
</template>
</ul>
</div>
</div>
<div class="md:hidden">
<button class="btn btn-secondary-grey btn-full-width" @click="showMap()">
<span x-show="!isShowingMap">Voir sur la carte</span>
<span x-show="isShowingMap" x-cloak>Revenir à la liste</span>
</button>
</div>
</div>
</div>
<div class="flex flex-1 overflow-hidden relative">
<div x-ref="concessions"
class="md:w-1/2 px-7 md:px-7.5 py-2.75 md:py-7.5 flex md:flex flex-col gap-2.5 px-px overflow-auto"
:class="{
'hidden': isShowingMap,
'flex': !isShowingMap,
'justify-center items-center': !isLoaded
}"
>
<div x-show="!isLoaded" class="loader">
<span></span>
<span></span>
<span></span>
</div>
<template x-show="isLoaded" x-for="concession in concessionsList">
<div x-show="isLoaded" class="form-element form-checkbox-box-white w-full" x-id="['concession-selection']" :data-id="concession.id">
<label :for="$id('concession-selection')">
<input type="radio" :id="$id('concession-selection')" name="concession-selection"
@change="$dispatch('set-concession-by-map', {
id: concession.id,
name: concession.name,
adresse: concession.adresse,
email: concession.email,
telephone: concession.telephone,
latitude: concession.latitude,
longitude: concession.longitude
})"
>
<div class="controller">
<div x-text="concession.name" class="font-bold text-lg md:text-xl tracking-tightened mb-3.75"></div>
<div x-show="concession.adresse" class="flex gap-3 items-start text-sm md:text-smaller text-text-light">
<?= icon('pinpoint', 'w-4 text-primary-accent mt-1 shrink-0'); ?>
<span x-text="concession.adresse"></span>
</div>
<div x-show="concession.telephone || concession.email" class="flex gap-3 items-start text-sm md:text-smaller text-text-light">
<?= icon('phone', 'w-4 text-primary-accent mt-1 shrink-0'); ?>
<div>
<a class="link block" x-show="concession.telephone" x-text="concession.telephone" :href="telHrefFormatting(concession.telephone)"></a>
<a class="link block" x-show="concession.email" x-text="concession.email" :href="mailHrefFormatting(concession.email)"></a>
</div>
</div>
</div>
</label>
</div>
</template>
</div>
<div class="map relative w-full md:w-1/2 md:block"
:class="{
'block': isShowingMap,
'hidden': !isShowingMap
}"
id="map_concession_selection"
>
<?php /* <img src="<?= renderImageUrl('map-view-on.jpg', 'styleguide') ?>" alt="" class="absolute top-0 left-1/2 -translate-x-1/2 h-full w-full object-cover"> */ ?>
</div>
</div>
</div>
<script>
function initConcessionSelectionMap() {
return {
isLoaded: false,
concessionsList: null,
concessionsWrapper: null,
isMobile: window.innerWidth < 768,
isShowingMap: false,
map: null,
init() {
this.getConcessionDatas()
this.initMap()
},
setConcessionSelect() {
this.$nextTick(()=> {
this.concessionsWrapper.querySelector('[data-id="' + this.$event.target.value + '"] input').checked = true;
this.concessionsWrapper.scrollTop = this.concessionsWrapper.querySelector('[data-id="' + this.$event.target.value + '"]').offsetTop - 20;
/* Set Event with ID concession */
let id = Number(this.$event.target.value);
let currentConcession = this.concessionsList[id];
this.$dispatch('set-concession-by-map', currentConcession)
})
},
showMap() {
this.isShowingMap = !this.isShowingMap;
},
initMap() {
this.$nextTick(async () => {
let mapStyle = [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.province","elementType":"labels.text.fill","stylers":[{"hue":"#ff0000"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"weight":"5.55"},{"color":"#0144aa"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#efeff3"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry.fill","stylers":[{"visibility":"simplified"},{"hue":"#ff0000"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#fe8d00"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"visibility":"on"},{"saturation":"0"},{"color":"#ffffff"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#00b7bd"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#397ad6"}]}];
this.map = new google.maps.Map(document.querySelector('#map_concession_selection'), {
zoom: 10,
styles: mapStyle,
disableDefaultUI: false,
streetViewControl:false,
});
this.map.setCenter(new google.maps.LatLng(43, 3));
})
},
telHrefFormatting(tel) {
if(tel) {
let formatted = tel.replace(/\s/g, '');
formatted = formatted.replace(/^0/, "+33");
return 'tel:' + formatted;
}
return null
},
mailHrefFormatting(mail) {
return 'mailto:' + mail;
},
async getConcessionDatas() {
fetch('https://tressol.yeah.agency/api/etablissements')
.then((response) => response.json())
.then((json) => {
this.concessionsList = json;
})
.then(() => {
this.isLoaded = true;
});
}
}
}
</script>