Filtres par selecteurs + champs lus dans la BDD

modules/velos_a_vendre/index.html

@@ -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>
+		<legend>Filtrer les vélos</legend>
-		<input type="checkbox" id="check-type-course" name="course" checked /><label for="course">Course</label>
+		<dl>
-		<input type="checkbox" id="check-type-mi-course" name="mi-course" checked /><label for="mi-course">Mi-course</label>	
+		    {{:input name="type" type="select" label="Type de vélo" options=$types}}
-		<input type="checkbox" id="check-type-randonneuse" name="randonneuse" checked /><label for="randonneuse">Randonneuse</label>	
+		</dl>
-		<input type="checkbox" id="check-type-mini" name="mini" checked /><label for="mini">Mini</label>	
+		<dl>
-		<input type="checkbox" id="check-type-pliant" name="pliant" checked /><label for="pliant">Pliant</label>	
+		    {{:input name="genre" type="select" label="Genre de cadre" options=$genres}}
-		<input type="checkbox" id="check-type-ville" name="ville" checked /><label for="ville">Ville</label>	
+		</dl>
-		<input type="checkbox" id="check-type-vtc" name="vtc" checked /><label for="vtc">VTC</label>	
+		<dl>
-		<input type="checkbox" id="check-type-vtt" name="vtt" checked /><label for="vtt">VTT</label>	
+		    {{:input name="roues" type="select" label="Taille de roue" options=$roues}}
-		<input type="checkbox" id="check-type-bmx" name="bmx" checked /><label for="bmx">BMX</label>	
+		</dl>
-		<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>
 	</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) {
+	function set_toggle_hide(input_id) {
-	  document.getElementById(id).addEventListener('change', function() {
+	console.log(input_id); 
-	    const bikes = document.querySelectorAll(selector);
+	document.getElementById(input_id).addEventListener('change', function() {
-	    bikes.forEach(div => {
+	v_type = document.getElementById('f_type').value
-	        div.style.display = this.checked ? 'block' : 'none';
+	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_hide('f_type')
-	set_toggle('check-type-mi-course','[type="Mi-course"]')
+	set_toggle_hide('f_genre')
-	set_toggle('check-type-randonneuse','[type="Randonneuse"]')
+	set_toggle_hide('f_roues')
-	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"]')
 
 </script>

modules/velos_a_vendre/style.css

@@ -1,21 +1,12 @@
 .filters {
     
     fieldset {
-    	position: relative;
+    	display:flex;
-    	min-width: 200px;
+        dl {
-        label {
             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;
-}
+}