Filtres par selecteurs + champs lus dans la BDD
This commit is contained in:
Charlie Mathey
parent
b84f334ade
commit
51ec1e752d
@ -4,43 +4,56 @@
|
||||
{{:admin_header title="Vélos à vendre" custom_css=$custom_css current="module_velos_a_vendre"}}
|
||||
|
||||
|
||||
{{#select DISTINCT type FROM plugin_stock_velos ;}}
|
||||
{{:assign var='types.' value=$type}}
|
||||
{{:assign var='index' value=$types|count}}
|
||||
{{:assign var='types_index.%s'|args:$type value='%d-1'|math:$index}}
|
||||
{{/select}}
|
||||
{{#select DISTINCT genre FROM plugin_stock_velos ;}}
|
||||
{{:assign var='genres.' value=$genre}}
|
||||
{{:assign var='index' value=$genres|count}}
|
||||
{{:assign var='genres_index.%s'|args:$genre value='%d-1'|math:$index}}
|
||||
{{/select}}
|
||||
{{#select DISTINCT roues FROM plugin_stock_velos ;}}
|
||||
{{:assign var='rouess.' value=$roues}}
|
||||
{{:assign var='index' value=$rouess|count}}
|
||||
{{:assign var='roues_index.%s'|args:$roues value='%d-1'|math:$index}}
|
||||
{{/select}}
|
||||
{{:assign var='roues' value=$rouess}}
|
||||
|
||||
|
||||
|
||||
<div class="filters">
|
||||
<fieldset>
|
||||
<legend>Type de vélo</legend>
|
||||
<input type="checkbox" id="check-type-course" name="course" checked /><label for="course">Course</label>
|
||||
<input type="checkbox" id="check-type-mi-course" name="mi-course" checked /><label for="mi-course">Mi-course</label>
|
||||
<input type="checkbox" id="check-type-randonneuse" name="randonneuse" checked /><label for="randonneuse">Randonneuse</label>
|
||||
<input type="checkbox" id="check-type-mini" name="mini" checked /><label for="mini">Mini</label>
|
||||
<input type="checkbox" id="check-type-pliant" name="pliant" checked /><label for="pliant">Pliant</label>
|
||||
<input type="checkbox" id="check-type-ville" name="ville" checked /><label for="ville">Ville</label>
|
||||
<input type="checkbox" id="check-type-vtc" name="vtc" checked /><label for="vtc">VTC</label>
|
||||
<input type="checkbox" id="check-type-vtt" name="vtt" checked /><label for="vtt">VTT</label>
|
||||
<input type="checkbox" id="check-type-bmx" name="bmx" checked /><label for="bmx">BMX</label>
|
||||
<input type="checkbox" id="check-type-autre" name="type-autre" checked /><label for="type-autre">Autre</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Genre de cadre</legend>
|
||||
<input type="checkbox" id="check-genre-diamant" name="diamant" checked /><label for="diamant">Diamant</label>
|
||||
<input type="checkbox" id="check-genre-mixte" name="mixte" checked /><label for="mixte">Mixte</label>
|
||||
<input type="checkbox" id="check-genre-enfant-diamant" name="enfant-diamant" checked /><label for="enfant-diamant">Enfant/Diamant</label>
|
||||
<input type="checkbox" id="check-genre-enfant-mixte" name="enfant-mixte" checked /><label for="enfant-mixte">Enfant/Mixte</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Taille des roues</legend>
|
||||
<input type="checkbox" id="check-taille-700" name="700" checked /><label for="700">700C</label>
|
||||
<input type="checkbox" id="check-taille-650" name="650" checked /><label for="650">650B</label>
|
||||
<input type="checkbox" id="check-taille-26" name="26" checked /><label for="26">26"</label>
|
||||
<input type="checkbox" id="check-taille-24" name="24" checked /><label for="24">24"</label>
|
||||
<input type="checkbox" id="check-taille-20" name="20" checked /><label for="20">20"</label>
|
||||
<input type="checkbox" id="check-taille-16" name="16" checked /><label for="16">16"</label>
|
||||
<input type="checkbox" id="check-taille-autre" name="taille-autre" checked /><label for="taille-autre">Autre</label>
|
||||
<legend>Filtrer les vélos</legend>
|
||||
<dl>
|
||||
{{:input name="type" type="select" label="Type de vélo" options=$types}}
|
||||
</dl>
|
||||
<dl>
|
||||
{{:input name="genre" type="select" label="Genre de cadre" options=$genres}}
|
||||
</dl>
|
||||
<dl>
|
||||
{{:input name="roues" type="select" label="Taille de roue" options=$roues}}
|
||||
</dl>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<style id='bike-hide'>
|
||||
p {
|
||||
color: #26b72b;
|
||||
}
|
||||
code {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="bike-list">
|
||||
{{#select id, etiquette, type, genre, roues, couleur, prix, modele, date_entree FROM plugin_stock_velos WHERE raison_sortie IS NULL AND prix > 0 ORDER BY date_entree DESC;}}
|
||||
{{:assign taille=$roues|truncate:2:"":false}}
|
||||
<div class="container" type="{{$type}}" genre="{{$genre}}" roues="{{$taille}}">
|
||||
{{:assign var='bike_type_index' from='types_index.%s'|args:$type}}
|
||||
{{:assign var='bike_genre_index' from='genres_index.%s'|args:$genre}}
|
||||
{{:assign var='bike_roues_index' from='roues_index.%s'|args:$roues}}
|
||||
<div class="container" type="{{$bike_type_index}}" genre="{{$bike_genre_index}}" roues="{{$bike_roues_index}}">
|
||||
<div class="image-wrapper">
|
||||
{{#select name, path FROM files WHERE parent = {"ext/p/stock_velos/public/%s"|args:$id} ;}}
|
||||
<a href="{{$root_url}}{{$path}}" target="_dialog">
|
||||
@ -73,36 +86,42 @@
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function set_toggle(id, selector) {
|
||||
document.getElementById(id).addEventListener('change', function() {
|
||||
const bikes = document.querySelectorAll(selector);
|
||||
bikes.forEach(div => {
|
||||
div.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
function set_toggle_hide(input_id) {
|
||||
console.log(input_id);
|
||||
document.getElementById(input_id).addEventListener('change', function() {
|
||||
v_type = document.getElementById('f_type').value
|
||||
v_genre = document.getElementById('f_genre').value
|
||||
v_roues = document.getElementById('f_roues').value
|
||||
console.log(v_type, v_genre, v_roues);
|
||||
|
||||
|
||||
css = document.getElementById("bike-hide")
|
||||
css.innerHTML = ""
|
||||
if (v_type) {
|
||||
css.innerHTML += `
|
||||
.container:not([type="${v_type}"]){
|
||||
display:none;
|
||||
}
|
||||
`;
|
||||
}
|
||||
if (v_genre) {
|
||||
css.innerHTML += `
|
||||
.container:not([genre="${v_genre}"]){
|
||||
display:none;
|
||||
}
|
||||
`;
|
||||
}
|
||||
if (v_roues) {
|
||||
css.innerHTML += `
|
||||
.container:not([roues="${v_roues}"]){
|
||||
display:none;
|
||||
}
|
||||
`;
|
||||
}
|
||||
});
|
||||
}
|
||||
set_toggle('check-type-course','[type="Course"]')
|
||||
set_toggle('check-type-mi-course','[type="Mi-course"]')
|
||||
set_toggle('check-type-randonneuse','[type="Randonneuse"]')
|
||||
set_toggle('check-type-mini','[type="Mini"]')
|
||||
set_toggle('check-type-pliant','[type="Pliant"]')
|
||||
set_toggle('check-type-ville','[type="Ville"]')
|
||||
set_toggle('check-type-vtc','[type="VTC"]')
|
||||
set_toggle('check-type-vtt','[type="VTT"]')
|
||||
set_toggle('check-type-bmx','[type="BMX"]')
|
||||
set_toggle('check-type-autre','[type="Autre"]')
|
||||
|
||||
set_toggle('check-genre-diamant','[genre="Diamant"]')
|
||||
set_toggle('check-genre-mixte','[genre="Mixte"]')
|
||||
set_toggle('check-genre-enfant-diamant','[genre="Enfant/Diamant"]')
|
||||
set_toggle('check-genre-enfant-mixte','[genre="Enfant/Mixte"]')
|
||||
|
||||
set_toggle('check-taille-700','[roues="70"]')
|
||||
set_toggle('check-taille-650','[roues="65"]')
|
||||
set_toggle('check-taille-26',"[roues='26']")
|
||||
set_toggle('check-taille-24',"[roues='24']")
|
||||
set_toggle('check-taille-20',"[roues='20']")
|
||||
set_toggle('check-taille-16',"[roues='16']")
|
||||
set_toggle('check-taille-autre','[roues="Au"]')
|
||||
set_toggle_hide('f_type')
|
||||
set_toggle_hide('f_genre')
|
||||
set_toggle_hide('f_roues')
|
||||
|
||||
</script>
|
||||
@ -1,21 +1,12 @@
|
||||
.filters {
|
||||
|
||||
fieldset {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
label {
|
||||
display:flex;
|
||||
dl {
|
||||
flex: 1 150px;
|
||||
min-width: 50px;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
font-size: 1.2em;
|
||||
left: 1em;
|
||||
top: -0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -91,4 +82,4 @@ li.date-entree {
|
||||
right: 10px;
|
||||
font-size: x-small;
|
||||
color: gray;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user