{% extends 'base.html.twig' %}{% block title %}TripUp{% endblock %}{% block stylesheets %} <!-- <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> --> <link rel="stylesheet" type="text/css" charset="UTF-8" href="{{ asset('css/slick.min.css') }}" /> <!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" /> --><link rel="stylesheet" type="text/css" href="{{ asset('css/slick-theme.min.css') }}" /> <link rel="stylesheet" href="{{ asset('css/multirange.css') }}"> <link rel="stylesheet" href="{{ asset('css/default.css') }}"> <link rel="stylesheet" href="{{ asset('css/styles.css') }}"> <link rel="manifest" href="{{ asset('build/manifest.json') }}"> <link rel="manifest" href="{{ asset('build/entrypoints.json') }}"> {% endblock %}{% block body %}<div id="infomodal"> <div class="infos"> <span class="buttclose">X</span> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/triporteur.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_triporteur">Triporteurs chargement avant </h4> <p>il s’agit de tricycles, avec une caisse devant et dans laquelle on peut transporter des marchandises, mais aussi présenter des produits…La plupart de nos triporteurs sont équipés de tonnelles. On peut aussi écrire tri-porteurs </p></div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/chariot.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_chariot">Chariot</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/triporteurar.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_Cargo">Triporteurs cargo </h4> <p>il s’agit de tricycles, avec une caisse à l’arrière, et dans laquelle on peut transporter des marchandises, mais aussi présenter des produits… </p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/remorque.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_Remorque">Remorque publicitaires</h4> <p>il s’agit de remorques publicitaires</p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/rosalie.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_Rosalies">Rosalie</h4> <p>Il s’agit de tricycles ou quadricycles dont les passagers peuvent pédaler cotes à côtes. Nous en avons pouvant contenir 2 adultes et 2 enfants et d’autres de 4 adultes et 2 enfants. </p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/velotaxi.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_VeloTaxi">Vélos-taxis</h4> <p>Il s’agit d’un tricycle dont la cabine est généralement à l’arrière, et pouvant transporter, généralement, 2 adultes et 1 enfant</p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/velo.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_Velo">Vélos 2 roues</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/quadriporteur.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_quadriporteur">Quadriporteurs</h4> <p>Il s’agit d’un quadricycle pouvant transporter, à l’avant, ou à l’arrière, une caisse</p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/triporteurcollecte.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_triporteurcollecte">Triporteurs collecte de déchets</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/triporteurenfant.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_triporteurenfant">Triporteurs enfants/animaux</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/tandem.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_tandems">Tandems</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/velocaleche.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_velocaleche">Vélos-caleches</h4> <p></p> </div> </div> <div class="sepa" > <div class="image" ><img class="lazy" data-src="{{ asset('img/velovoiture.jpg') }}" alt="" /></div> <div class="texte" > <h4 id="info_velovoiture">Vélos-voitures</h4> <p></p> </div> </div> </div></div> <div id="divfilter" class="filterside"><div id="filtres"> <div id="validfilter" onClick="showfiltre()">Valider</div> <div class="bloctop2"> <img class="lazy" data-src="{{ asset('/img/filtre.png') }}" onclick="afffiltre()" alt="afficher les filtres"> </div> <div id="filtresel"> <div class="bloctop"> <label id="remfiltre" onClick="showfiltre()" for="masquerfiltre">Masquer les filtres</label> </div> <div id="filtresel1" class="blocfiltre"> <!-- <div id="gestmodal" onClick="showfiltre()"> <span>Filtres</span> <svg id="afffiltre" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M 25 7 C 23.148438 7 21.59375 8.285156 21.144531 10 L 3 10 C 2.640625 9.996094 2.304688 10.183594 2.121094 10.496094 C 1.941406 10.808594 1.941406 11.191406 2.121094 11.503906 C 2.304688 11.816406 2.640625 12.003906 3 12 L 21.144531 12 C 21.59375 13.714844 23.148438 15 25 15 C 26.851563 15 28.40625 13.714844 28.855469 12 L 47 12 C 47.359375 12.003906 47.695313 11.816406 47.878906 11.503906 C 48.058594 11.191406 48.058594 10.808594 47.878906 10.496094 C 47.695313 10.183594 47.359375 9.996094 47 10 L 28.855469 10 C 28.40625 8.285156 26.851563 7 25 7 Z M 25 9 C 26.085938 9 26.941406 9.835938 26.988281 10.910156 C 26.984375 10.96875 26.984375 11.03125 26.988281 11.09375 C 26.941406 12.164063 26.085938 13 25 13 C 23.914063 13 23.058594 12.164063 23.011719 11.089844 C 23.015625 11.03125 23.015625 10.96875 23.011719 10.90625 C 23.058594 9.835938 23.914063 9 25 9 Z M 39 21 C 37.148438 21 35.59375 22.285156 35.144531 24 L 3 24 C 2.640625 23.996094 2.304688 24.183594 2.121094 24.496094 C 1.941406 24.808594 1.941406 25.191406 2.121094 25.503906 C 2.304688 25.816406 2.640625 26.003906 3 26 L 35.144531 26 C 35.59375 27.714844 37.148438 29 39 29 C 40.851563 29 42.40625 27.714844 42.855469 26 L 47 26 C 47.359375 26.003906 47.695313 25.816406 47.878906 25.503906 C 48.058594 25.191406 48.058594 24.808594 47.878906 24.496094 C 47.695313 24.183594 47.359375 23.996094 47 24 L 42.855469 24 C 42.40625 22.285156 40.851563 21 39 21 Z M 39 23 C 40.085938 23 40.941406 23.835938 40.988281 24.910156 C 40.984375 24.96875 40.984375 25.03125 40.988281 25.09375 C 40.941406 26.164063 40.085938 27 39 27 C 37.914063 27 37.058594 26.164063 37.011719 25.089844 C 37.015625 25.03125 37.015625 24.96875 37.011719 24.90625 C 37.058594 23.835938 37.914063 23 39 23 Z M 14 35 C 12.148438 35 10.59375 36.285156 10.144531 38 L 3 38 C 2.640625 37.996094 2.304688 38.183594 2.121094 38.496094 C 1.941406 38.808594 1.941406 39.191406 2.121094 39.503906 C 2.304688 39.816406 2.640625 40.003906 3 40 L 10.144531 40 C 10.59375 41.714844 12.148438 43 14 43 C 15.851563 43 17.40625 41.714844 17.855469 40 L 47 40 C 47.359375 40.003906 47.695313 39.816406 47.878906 39.503906 C 48.058594 39.191406 48.058594 38.808594 47.878906 38.496094 C 47.695313 38.183594 47.359375 37.996094 47 38 L 17.855469 38 C 17.40625 36.285156 15.851563 35 14 35 Z M 14 37 C 15.085938 37 15.941406 37.835938 15.988281 38.910156 C 15.984375 38.96875 15.984375 39.03125 15.988281 39.09375 C 15.941406 40.164063 15.085938 41 14 41 C 12.914063 41 12.058594 40.164063 12.011719 39.089844 C 12.015625 39.03125 12.015625 38.96875 12.011719 38.90625 C 12.058594 37.835938 12.914063 37 14 37 Z"></path></svg> </div> --> <h3 onclick="sfil(1)">Service</h3> <div id="isfilter1" class=""> <input type="radio" class="hide" name="filtre_location" id="filtre_location" value="Location" checked="checked"/><label class="servbutton filtre_location" for="filtre_location">Location</label> <input type="radio" class="hide" name="filtre_location" id="filtre_achat"value="Achat"/><label class="servbutton filtre_achat" for="filtre_achat">Achat</label> </div> </div> <div id="filtresel5" class="blocfiltre" style="text-align: center;"> <h3 onclick="sfil(2)">Catégorie</h3> <div id="isfilter2" class=""> <input type="checkbox" class="hide" name="filtre_neuf" id="filtre_neuf" value="Neuf" checked="checked"/><label class="servbutton filtre_neuf" for="filtre_neuf">Neuf</label> <input type="checkbox" class="hide" name="filtre_occasion" id="filtre_occasion"value="Achat" checked="checked"/><label class="servbutton filtre_occasion" for="filtre_occasion" >Occasion</label> </div> </div> <div id="filtresel4" class="blocfiltre" style="text-align: center;"> <h3 onclick="sfil(3)">Trier par prix</h3> <div id="isfilter3" class=""> <label class="filtre_location" for="prix_min">Prix min</label> <input type="number" class="prixmod" name="prix_min" id="prix_min"value=""/>€<br /><br /> <label class="filtre_location" for="prix_max">Prix max</label> <input type="number" class="prixmod" name="prix_max" id="prix_max"value=""/>€<br /> </div> </div> <div class="blocfiltre" > <h3 onclick="sfil(4)">Agences</h3> <div id="isfilter4" class=""> <div class="aligncenter"> <select id="filtre_vehicule_partout" name="" class="intext"> {% for Agence in Agences %} <option value="{{Agence.id}}" {% if Agence.id == 1 %} selected="selected" {% endif %} >{{Agence.Nom}}</option> {% endfor %} </select> </div> <br /> <span>Nous pouvons louer partout, cependant la distance entre le lieu de votre évènement et nos centres de stockage est susceptible d'engendrer des coûts supplémentaires.</span> </div> </div> <div class="blocfiltre" > <h3 onclick="sfil(10)">Dates ou Nb jours</h3> <div id="isfilter10" class="demiflex"> <div class="demiflexl"> <label>Date de début</label> <label>Date de fin</label> <br /> <label>Nombre de jours </label> </div> <div class="demiflexd"> <input type="date" id="datedebut" value=""/> <br /> <input type="date" id="datefin" value=""/> <br /> <br /> <input type="number" id="nbjourssel" min="1" value=""/> <br /> </div> <br /> </div> </div> <div class="blocfiltre" > <h3 onclick="sfil(14)">Réduction</h3> <div id="isfilter14" class=""> <div class="alileft"> {% set nbred = 0 %} {% for Reduction in Reductions %} {% set nbred = nbred + 1 %} {% if Reduction.type == "Réducmax"%} {% set detail = Reduction.detail | json_decode %} <input type="hidden" id="reducmax" val="{{detail.reduc}}" /> {% endif %} {% if Reduction.type == "Sélection"%} <div class="blocradio radioelem"> {% set detail = Reduction.detail | json_decode %} {% set nbopt = 0 %} {% for det in detail %}<input type="radio" data-inf="{{Reduction.id}}" data-applicable="{{Reduction.applicable}}" data-nom="{{det.nom}}" class="radioactif2 radio_reduc" name="reduc_{{nbred}}" id="reduc_{{nbred}}_{{nbopt}}" /><label for="reduc_{{nbred}}_{{nbopt}}">{{det.nom}} ({{det.reduc}}{{det.type}})</label> <br />{% set nbopt = nbopt + 1 %} {% endfor %} </div> {% endif %} {% if Reduction.type == "Unique"%} {% set detail = Reduction.detail | json_decode %} <div class="bloccheck nomarg"> <input type="radio" class="radioactif2 radio_reduc" data-applicable="{{Reduction.applicable}}" data-inf="{{Reduction.id}}" data-nom="" name="reduc_{{nbred}}" id="reduc_{{nbred}}" /><label for="reduc_{{nbred}}">{{detail.nom}} ({{detail.reduc}}{{detail.type}})</label> </div> {% endif %} {% endfor %} </div> <br /> <span id="recapremise"> </span> </div> </div> <div class="blocfiltre aligncenter" > <h3 onclick="sfil(5)">Véhicules</h3> <div id="isfilter5" class=""> <div id="filtresel2" class="aligncenter"> <div id="div_vehicule_tous" class="blocradio aligncenter "> <input type="checkbox" name="filtre_vehicule_tous" id="filtre_vehicule_tous" checked="checked"/><label id="filtre_tousveh" for="filtre_vehicule_tous">Tous les véhicules</label><br /> </div> <div id="div_vehicule_triporteur" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_triporteur" id="filtre_vehicule_triporteur" checked="checked"/><label id="filtre_Triporteur" for="filtre_vehicule_triporteur" class="stylebutton">Triporteurs chargement avant <span id="infnb_triporteur"></span><span id="minfo_triporteur" class="hovertxt"></span></label> </div> <div id="div_vehicule_chariot" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_chariot" id="filtre_vehicule_chariot" checked="checked"/><label id="filtre_Chariot" for="filtre_vehicule_chariot" class="stylebutton">Chariots <span id="infnb_chariot"></span><span id="minfo_chariot" class="hovertxt"></span></label> </div> <div id="div_vehicule_cargo" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_cargo" id="filtre_vehicule_cargo" checked="checked"/><label id="filtre_Cargo" for="filtre_vehicule_cargo" class="stylebutton">Triporteurs cargo <span id="infnb_cargo"></span><span id="minfo_cargo" class="hovertxt"></span></label> </div> <div id="div_vehicule_remorque" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_remorque" id="filtre_vehicule_remorque" checked="checked"/><label id="filtre_Remorque" for="filtre_vehicule_remorque" class="stylebutton">Remorques publicitaires <span id="infnb_remorque"></span><span id="minfo_remorque" class="hovertxt"></span></label> </div> <div id="div_vehicule_rosalie" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_rosalie" id="filtre_vehicule_rosalie" checked="checked"/><label id="filtre_Rosalie" for="filtre_vehicule_rosalie" class="stylebutton">Rosalies <span id="infnb_rosalie"></span><span id="minfo_rosalie" class="hovertxt"></span></label> </div> <div id="div_vehicule_velotaxi" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_velotaxi" id="filtre_vehicule_velotaxi" checked="checked"/><label id="filtre_VeloTaxi" for="filtre_vehicule_velotaxi" class="stylebutton">Vélos-taxis<span id="infnb_velotaxi"></span><span id="minfo_velotaxi" class="hovertxt"></span></label> </div> <div id="div_vehicule_velo" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_velo" id="filtre_vehicule_velo" checked="checked"/><label id="filtre_Velo" for="filtre_vehicule_velo" class="stylebutton">Vélos 2 roues<span id="infnb_velo"></span><span id="minfo_velo" class="hovertxt"></span></label> </div> <div id="div_vehicule_quadriporteur" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_quadriporteur" id="filtre_vehicule_quadriporteur" checked="checked"/><label id="filtre_quadriporteur" for="filtre_vehicule_quadriporteur" class="stylebutton">Quadriporteurs <span id="infnb_quadriporteur"></span><span id="minfo_quadriporteur" class="hovertxt"></span></label> </div> <div id="div_vehicule_triporteurcollecte" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_triporteurcollecte" id="filtre_vehicule_triporteurcollecte" checked="checked"/><label id="filtre_triporteurcollecte" for="filtre_vehicule_triporteurcollecte" class="stylebutton">Triporteurs collecte de déchets <span id="infnb_triporteurcollecte"></span><span id="minfo_triporteurcollecte" class="hovertxt"></span></label> </div> <div id="div_vehicule_triporteurenfant" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_triporteurenfant" id="filtre_vehicule_triporteurenfant" checked="checked"/><label id="filtre_triporteurenfant" for="filtre_vehicule_triporteurenfant" class="stylebutton">Triporteurs enfants/animaux <span id="infnb_triporteurenfant"></span><span id="minfo_triporteurenfant" class="hovertxt"></span></label> </div> <div id="div_vehicule_tandems" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_tandems" id="filtre_vehicule_tandems" checked="checked"/><label id="filtre_tandems" for="filtre_vehicule_tandems" class="stylebutton">Tandems<span id="infnb_tandems"></span><span id="minfo_tandems" class="hovertxt"></span></label> </div> <div id="div_vehicule_velocaleche" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_velocaleche" id="filtre_vehicule_velocaleche" checked="checked"/><label id="filtre_velocaleche" for="filtre_vehicule_velocaleche" class="stylebutton">Vélos-calèches <span id="infnb_velocaleche"></span><span id="minfo_velocaleche" class="hovertxt"></span></label> </div> <div id="div_vehicule_velovoiture" class="typevehicule"> <input type="checkbox" class="hide" name="filtre_vehicule_velovoiture" id="filtre_vehicule_velovoiture" checked="checked"/><label id="filtre_velovoiture" for="filtre_vehicule_velovoiture" class="stylebutton">Vélos-voitures <span id="infnb_velovoiture"></span><span id="minfo_velovoiture" class="hovertxt"></span></label> </div> </div> <br /> <button id="infovehicules" class="buttinfo">> Liste de tous nos véhicules avec quantités </button> </div> </div> <div class="blocfiltre" style="display:none;"> <h3 onclick="sfil(6)">Disponibilités</h3> <div id="isfilter6" class="isfilter"> <p>Période de location</p> <div class="aligncenter"> <input type="date" name="filtre_date_debut" id="filtre_date_debut" class="datediplay"/> <input type="date" name="filtre_date_fin" id="filtre_date_fin" class="datediplay"/> </div> <p>Nombre de véhicule identiques :</p> <div class="aligncenter"> <input type="text" name="filtre_nb_vehicule" id="filtre_nb_vehicule" class="nbjours"/> </div> <p>Tarif selon la durée et la quantité</p> <input type="range" onchange="affiche()" name="filtre_prix" id="filtre_prix" multiple value="10,80" /> <script> function affiche(){ var range = document.getElementById("filtre_prix").value; console.log(range) } </script></div> </div> <div id="filtresel3" class="blocfiltre"> <h3 onclick="sfil(7)">Caractéristiques</h3> <div id="isfilter7" class=""> <p class="pbold">Assistance électrique</p> <div class="blocradio radioelem"> <input type="radio" class="radioactif" name="filtre_assistance_elect" id="filtre_assistance_elect_sans"/><label id="0#assistElect" for="filtre_assistance_elect_sans">Sans</label> <input type="radio" class="radioactif" name="filtre_assistance_elect" id="filtre_assistance_elect_avec"/><label id="1#assistElect" for="filtre_assistance_elect_avec">Avec</label> </div> <p class="pbold">Coque protectrice du conducteur</p> <div class="blocradio radioelem"> <input type="radio" class="radioactif" name="filtre_coqueprotect" id="filtre_coqueprotect_sans"/><label id="0#coque" for="filtre_coqueprotect_sans">Sans</label> <input type="radio" class="radioactif" name="filtre_coqueprotect" id="filtre_coqueprotect_avec"/><label id="1#coque" for="filtre_coqueprotect_avec">Avec</label> </div> <p class="pbold">Couleur cadre</p> <div class="floatleft"> {% for Couleur in CouleursRep %} <div id="Cadre_par_{{Couleur.id}}" class="bloccheck demi"> <input type="checkbox" class="radioactif3 colorcadresel" name="filtre_cadre_{{Couleur.id}}" id="filtre_cadre_{{Couleur.id}}" data-color="{{Couleur.id}}" /><label class="colordisplay" id="Cadre_{{Couleur.id}}" for="filtre_cadre_{{Couleur.id}}"><span class="roundel" style="background-color:{{Couleur.Hexa}}"></span><span id="Cadre_span_{{Couleur.id}}" >{{Couleur.Nom}}</span></label> </div> {% endfor %} </div> <p class="pbold">Couleur caisse</p> <div class="floatleft"> {% for Couleur in CouleursRep %} <div id="Couleur_par_{{Couleur.id}}" class="bloccheck demi"> <input type="checkbox" class="radioactif3 colorsel" name="filtre_couleur_{{Couleur.id}}" id="filtre_couleur_{{Couleur.id}}" data-color="{{Couleur.id}}" /><label class="colordisplay" id="Couleur_{{Couleur.id}}" for="filtre_couleur_{{Couleur.id}}"><span class="roundel" style="background-color:{{Couleur.Hexa}}"></span><span id="Couleur_span_{{Couleur.id}}" >{{Couleur.Nom}}</span></label> </div> {% endfor %} </div> <p class="pbold">Conservation</p> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_iso" id="filtre_conservation_iso"/><label id="1#Isotherme" for="filtre_conservation_iso">Véhicules isothermes</label> </div> <div class="bloccheck" style="display:none;"> <input type="radio" class="radioactif" name="filtre_conservation_deuxcompartiments" id="filtre_conservation_deuxcompartiments"/><label id="1#compartimentposinega" for="filtre_conservation_deuxcompartiments">1 compartiment en froid positif + 1 autre en froid négatif</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_froid_iso" id="filtre_conservation_froid_iso"/><label id="1#compartimentisotherme" for="filtre_conservation_froid_iso">A double compartiment : 1 réfrigéré + <span class="nowrap">1 isotherme</span></label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_froid_positif" id="filtre_conservation_froid_positif"/><label id="1#froidPositif" class="asinbul" for="filtre_conservation_froid_positif">Réfrigérés à froid positif</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_froid_negatif" id="filtre_conservation_froid_negatif"/><label id="1#froidNegatif" class="asinbul" for="filtre_conservation_froid_negatif">Réfrigérés à froid négatif</label> </div> <div class="bloclabel"> <label>Véhicules pouvant contenir :</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_avec_frigo" id="filtre_conservation_avec_frigo"/><label id="1#frigo40l" for="filtre_conservation_avec_frigo">1 réfrigérateur (de -18 à +3 °C) de 40L</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_avec_frigo_70" id="filtre_conservation_avec_frigo_70"/><label id="1#frigo70l" for="filtre_conservation_avec_frigo_70">1 réfrigérateur (de -18 à +3 °C) de 70L</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_avec_frigo_105" id="filtre_conservation_avec_frigo_105"/><label id="1#frigo105l" for="filtre_conservation_avec_frigo_105">1 réfrigérateur (de -18 à +3 °C) de 105L</label> </div> <div class="bloccheck"> <input type="radio" class="radioactif" name="filtre_conservation_iso_60" id="filtre_conservation_iso_60"/><label id="1#iso60l" for="filtre_conservation_iso_60">1 caisse isotherme de 60L</label> </div> <div class="bloccheck nomarg"> <input type="radio" class="radioactif" name="filtre_conservation_avec_glace_77" id="filtre_conservation_avec_glace_77"/><label id="1#iso77l" for="filtre_conservation_avec_glace_77">1 caisse isotherme de 77L</label> </div> <p class="pbold">Les usages</p> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_spe" id="filtre_conservation_spe_mariage"/><label id="1#mariage" for="filtre_conservation_spe_mariage">Spécial mariage</label> </div> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_tournage" id="filtre_conservation_spe_tournage"/><label id="1#tournage" for="filtre_conservation_spe_tournage">Spécial tournage de films</label> </div> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_mobilitereduite" id="filtre_mobilitereduite"/><label id="1#mobilitereduite" for="filtre_mobilitereduite">Adapté pour les personnes à mobilité réduite</label> </div> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_comptoir" id="filtre_comptoir"/><label id="1#Comptoir" for="filtre_comptoir">Possède un comptoir amovible</label> </div> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_CompatibleRemorque" id="filtre_CompatibleRemorque"/><label id="1#CompatibleRemorque" for="filtre_CompatibleRemorque">Véhicule compatible avec les remorques</label> </div> <div class="blocradio"> <input type="radio" class="radioactif" name="filtre_Ptspe" id="filtre_Ptspe"/><label id="1#Ptspe" for="filtre_Ptspe">Spécial grand plan de travail</label> </div> <p class="pbold">Surface d'espace pub du véhicule</p> <div id="div_filtre_surface"> <input type="range" onmousemove="filtre_surface()" name="filtre_surface" id="filtre_surface" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowsurval"></span> et <span id="higsurval"></span> m²</p> <input type="hidden" name="filtre_surface_min" id="filtre_surface_min" value="0"> <input type="hidden" name="filtre_surface_max" id="filtre_surface_max" value="100"> </div> <p class="pbold">Volume de la caisse du véhicule</p> <div id="div_filtre_volume"> <input type="range" onmousemove="filtre_volume()" name="filtre_volume" id="filtre_volume" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowval"></span> et <span id="higval"></span> L</p> <input type="hidden" name="filtre_volume_min" id="filtre_volume_min" value="0"> <input type="hidden" name="filtre_volume_max" id="filtre_volume_max" value="100"> </div> <p class="pbold">Largeur du véhicule</p> <div id="div_filtre_largeur"> <input type="range" onmousemove="filtre_largeur()" name="filtre_largeur" id="filtre_largeur" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowvalar"></span> et <span id="higvalar"></span> cm</p> <input type="hidden" name="filtre_largeur_min" id="filtre_largeur_min" value="0"> <input type="hidden" name="filtre_largeur_max" id="filtre_largeur_max" value="100"> </div> <p class="pbold">Longueur du véhicule</p> <div id="div_filtre_longueur"> <input type="range" onmousemove="filtre_longueur()" name="filtre_longueur" id="filtre_longueur" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowvalong"></span> et <span id="higvalong"></span> cm</p> <input type="hidden" name="filtre_longueur_min" id="filtre_longueur_min" value="0"> <input type="hidden" name="filtre_longueur_max" id="filtre_longueur_max" value="100"> </div> <p class="pbold">Hauteur du véhicule</p> <div id="div_filtre_hauteur"> <input type="range" onmousemove="filtre_hauteur()" name="filtre_hauteur" id="filtre_hauteur" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowvalhau"></span> et <span id="higvalhau"></span> cm</p> <input type="hidden" name="filtre_hauteur_min" id="filtre_hauteur_min" value="0"> <input type="hidden" name="filtre_hauteur_max" id="filtre_hauteur_max" value="100"> </div> <p class="pbold">Surface plan de travail</p> <div id="div_filtre_Surfacept"> <input type="range" onmousemove="filtre_Surfacept()" name="filtre_Surfacept" id="filtre_Surfacept" multiple value="0,100" /> <p class="pcolor">Entre <span id="lowvalSurfacept"></span> et <span id="higvalSurfacept"></span> m²</p> <input type="hidden" name="filtre_Surfacept_min" id="filtre_Surfacept_min" value="0"> <input type="hidden" name="filtre_Surfacept_max" id="filtre_Surfacept_max" value="100"> </div></div> </div> </div> </div></div><div id="formulaire"></div> {% endblock %} {% block javascripts %} <script src="{{ asset('js/multirange.js') }}"></script> <script src="//d2wy8f7a9ursnm.cloudfront.net/v7/bugsnag.min.js"></script> {{ encore_entry_script_tags('app') }} {{ encore_entry_script_tags('formulaire') }} <!-- <script src="{{ asset('build/runtime.js') }}"></script> <script src="{{ asset('build/vendors~app~formulaire~tinyapp.js') }}"></script> <script src="{{ asset('build/vendors~app~formulaire.js') }}"></script> <script src="{{ asset('build/vendors~formulaire~tinyapp.js') }}"></script> <script src="{{ asset('build/vendors~formulaire.js') }}"></script> <script src="{{ asset('build/formulaire.js') }}"></script> --><script >document.getElementById('datedebut').min = new Date().toISOString().split("T")[0];document.getElementById('datefin').min = new Date().toISOString().split("T")[0];function sfil(trg){ let targ = document.getElementById('isfilter'+trg) if( targ.classList.contains('isfilter') ){ targ.classList.remove('isfilter') }else{ targ.classList.add('isfilter') }}async function filtre_volume(){ let valmax = 3000 let range = document.getElementById("filtre_volume").value; let lowval = document.getElementById("lowval") let higval = document.getElementById("higval") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 100 ) * splitrange[0] ) } let maxval = Math.floor( ( valmax / 100 ) * splitrange[1] ) lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_volume_min").value = minval document.getElementById("filtre_volume_max").value = maxval }async function filtre_largeur(){ let valmax = 300 let range = document.getElementById("filtre_largeur").value; let lowval = document.getElementById("lowvalar") let higval = document.getElementById("higvalar") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 100 ) * splitrange[0] ) } let maxval = Math.floor( ( valmax / 100 ) * splitrange[1] ) lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_largeur_min").value = minval document.getElementById("filtre_largeur_max").value = maxval }async function filtre_longueur(){ let valmax = 400 let range = document.getElementById("filtre_longueur").value; let lowval = document.getElementById("lowvalong") let higval = document.getElementById("higvalong") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 100 ) * splitrange[0] ) } let maxval = Math.floor( ( valmax / 100 ) * splitrange[1] ) lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_longueur_min").value = minval document.getElementById("filtre_longueur_max").value = maxval }async function filtre_hauteur(){ let valmax = 300 let range = document.getElementById("filtre_hauteur").value; let lowval = document.getElementById("lowvalhau") let higval = document.getElementById("higvalhau") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 100 ) * splitrange[0] ) } let maxval = Math.floor( ( valmax / 100 ) * splitrange[1] ) lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_hauteur_min").value = minval document.getElementById("filtre_hauteur_max").value = maxval }async function filtre_Surfacept(){ let valmax = 3 let range = document.getElementById("filtre_Surfacept").value; let lowval = document.getElementById("lowvalSurfacept") let higval = document.getElementById("higvalSurfacept") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 10 ) * splitrange[0] ) / 10 } let maxval = Math.floor( ( valmax / 10 ) * splitrange[1] ) / 10 lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_Surfacept_min").value = minval document.getElementById("filtre_Surfacept_max").value = maxval }async function filtre_surface(){ let valmax = 20 let range = document.getElementById("filtre_surface").value; let lowval = document.getElementById("lowsurval") let higval = document.getElementById("higsurval") let splitrange = range.split(',') let minval = 0 if( splitrange[0] == '0.1'){ minval = 0 }else{ minval = Math.floor( ( valmax / 100 ) * splitrange[0] ) } let maxval = Math.floor( ( valmax / 100 ) * splitrange[1] ) lowval.innerText = minval higval.innerText = maxval document.getElementById("filtre_surface_min").value = minval document.getElementById("filtre_surface_max").value = maxval }function afffiltre(){ let filtres = document.getElementById("divfilter") filtres.classList.remove('showoff') document.getElementById("validfilter").style.position = "fixed" document.getElementById("validfilter").style.display = "block" document.getElementById("formulaire").classList.remove('grandwidth')}function showfiltre(){ let filtres = document.getElementById("divfilter") if( filtres.classList.contains('showoff') ){ filtres.classList.remove('showoff') document.getElementById("validfilter").style.position = "fixed" document.getElementById("validfilter").style.display = "block" document.getElementById("formulaire").classList.remove('grandwidth') }else{ filtres.classList.add('showoff') document.getElementById("validfilter").style.position = "absolute" document.getElementById("validfilter").style.display = "none" document.getElementById("formulaire").classList.add('grandwidth') document.getElementById("formulaire").scrollIntoView({block: "start", behavior: "smooth"}); }}function reordervéhic(){ listel = document.getElementById('filtresel2') fetch (location.protocol +'//'+window.location.host +`/api/guide`, { method: 'GET', credentials: 'include' }) .then (res => res.json()) .then (json =>{ let obj = json obj.forEach(element => { if( element.NumQ == 9999 ){ const sortOrder = []; element.Reponse.forEach(rep => { if(rep.Filtres){ let filt = Object.values(rep.Filtres) filt.forEach(ilt => { if( ilt.Nomfiltre ){ let nomfiltre = 'div_' + ilt.Nomfiltre sortOrder.push( nomfiltre ) } }); } }) const parent = document.getElementById('filtresel2') const children = Array.from(parent.children); // Définir la liste de valeurs pour le tri // Créer une fonction de tri personnalisée function customSort(a, b) { const aValue = a.id; const bValue = b.id; const aIndex = sortOrder.indexOf(aValue); const bIndex = sortOrder.indexOf(bValue); return aIndex - bIndex; } // Trier les éléments enfants en utilisant la fonction de tri personnalisée children.sort(customSort); // Réinsérer les éléments triés dans le document children.forEach(child => { parent.appendChild(child); }); } }); }) }document.addEventListener("DOMContentLoaded", function(event) { // Your code to run since DOM is loaded and ready seltyp() filtre_longueur() filtre_volume() filtre_hauteur() filtre_largeur() filtre_surface() filtre_Surfacept() let gesmodal = document.getElementById("gestmodal") if( window.innerWidth <= 992){ let filtres = document.getElementById("divfilter") filtres.classList.add('showoff') } myScript() document.getElementById("filtre_location").addEventListener("change", myScript); document.getElementById("filtre_achat").addEventListener("change", myScript); if( window.innerWidth >= 768){ setTimeout(() => { if(document.documentElement.scrollTop > document.getElementById("formulaire").offsetTop){ divfilter.style.top = '0px'; // gesmodal.style.top = '60px'; }else{ divfilter.style.top = (document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop) + 'px'; let heiggest = document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop + 60 // gesmodal.style.top = heiggest + 'px'; } }, 200); setTimeout(() => { if(document.documentElement.scrollTop > document.getElementById("formulaire").offsetTop){ divfilter.style.top = '0px'; // gesmodal.style.top = '60px'; }else{ divfilter.style.top = (document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop) + 'px'; let heiggest = document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop + 60 // gesmodal.style.top = heiggest + 'px'; } }, 800); setTimeout(() => { if(document.documentElement.scrollTop > document.getElementById("formulaire").offsetTop){ divfilter.style.top = '0px'; // gesmodal.style.top = '60px'; }else{ divfilter.style.top = (document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop) + 'px'; let heiggest = document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop + 60 // gesmodal.style.top = heiggest + 'px'; } }, 1600); window.onscroll = function () { if(document.documentElement.scrollTop > document.getElementById("formulaire").offsetTop){ divfilter.style.top = '0px'; // gesmodal.style.top = '60px'; }else{ divfilter.style.top = (document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop) + 'px'; let heiggest = document.getElementById("formulaire").offsetTop - document.documentElement.scrollTop + 60 // gesmodal.style.top = heiggest + 'px'; }}; }else{ divfilter.style.top = '0px'; // gesmodal.style.top = '60px'; } reordervéhic() }); document.getElementById("afffiltre").addEventListener("click", function (){ let filtres = document.getElementById("divfilter") if( filtres.classList.contains('showoff') == true ){ filtres.classList.add('showoff') document.getElementById("validfilter").style.position = "absolute" document.getElementById("validfilter").style.display = "none" document.getElementById("formulaire").classList.add('grandwidth') document.getElementById("formulaire").scrollIntoView({block: "start", behavior: "smooth"}); }else{ filtres.classList.remove('showoff') document.getElementById("validfilter").style.position = "fixed" document.getElementById("validfilter").style.display = "block" document.getElementById("formulaire").classList.remove('grandwidth') } } );function myScript(){ let filtre_location = document.getElementById("filtre_location") let filtre_achat = document.getElementById("filtre_achat") if( filtre_achat.checked == true){ document.getElementById("filtresel4").style.display = 'block' document.getElementById("filtresel5").style.display = 'block' }else{ document.getElementById("filtresel4").style.display = 'none' document.getElementById("filtresel5").style.display = 'none' }}let doc = document;let filter = document.getElementById('filtres') function getScrollPosition(){ return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);}let hauteur = window.innerHeight;doc.onscroll = function(){ var s = getScrollPosition(); let scrollnav = s[1] if( scrollnav >= filter.offsetTop ){ // filter.style.position = 'fixed' }else{ // filter.style.position = 'relative' }} </script> {% endblock %}