Ajout d'instruction pour l'importation de l'archive

Correction de mise en forme flex
Filtres par selecteurs + champs lus dans la BDD
2025-01-20 13:36:29 +01:00 · 2024-12-23 11:56:32 +01:00 · 2024-12-19 17:29:27 +01:00 · 2024-12-18 12:15:51 +01:00 · 2024-12-18 11:09:47 +01:00 · 2024-12-18 11:09:19 +01:00
4 changed files with 225 additions and 148 deletions
--- a/README.md
+++ b/README.md
@ -1,3 +1,41 @@
 # paheko-module-velos-a-vendre

 Module à utiliser en addition à «Gestion des vélos», qui créé une page publique affichant tous les vélos à vendre.
+
+Améliorations prévues quand j'aurais du temps ou saurai faire :
+* Permettre l'affichage de plusieurs photos par vélo sous la forme d'un diaporama
+* Permettre la modification de certains paramètres de style (couleur d'étiquette...) dans un menu de config
+
+En cas de suggestions ou de proposition d'aide, vous pouvez me contacter à charlie+dev@minesderayons.fr .
+
+# Importer dans Paheko
+
+L'archive fournie par le dépôt n'est pas dans le bon format pour être reconnue par Paheko.
+Il est nécessaire de faire une petite manip avant de l'importer.
+
+Lorsque vous cliquez sur «Code» puis «Télécharger le zip», vous obtiendrez une archive dont l'arborescence est la suivante :
+
+```
+/paheko-module-velos-a-vendre/
+ |- LICENSE
+ |- README.md
+ |- modules
+   |- velos-a-vendre
+     |- tous les fichiers utiles au module
+```
+
+Mais l'archive que vous devez transmettre à Pahéko doit seulement contenir :
+
+```
+/modules
+ |- velos-a-vendre
+   |- tous les fichiers utiles au module
+```
+
+Ainsi, vous devez :
+- Télécharger l'archive .zip
+- L'extraire / la décompresser
+- Aller dans le dossier /paheko-module-velos-a-vendre/
+- Clique droit sur /modules/, puis «créer une archive», ou «ajouter à l'archive», ou autre selon le logiciel que vous utilisez pour les archives.
+- Choisir une archive .zip 
+- Dans Paheko, aller dans Configuration, Extensions, et cliquer sur le bouton «importer une archive»
--- a/modules/velos_a_vendre/index.html
+++ b/modules/velos_a_vendre/index.html
@ -4,60 +4,72 @@
 {{: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 default_empty="Tous les types de vélo"}}
+		</dl>
+		<dl>
+		    {{:input name="genre" type="select" label="Genre de cadre" options=$genres default_empty="Tous les genres de cadre"}}
+		</dl>
+		<dl>
+		    {{:input name="roues" type="select" label="Taille de roue" options=$roues default_empty="Toutes les tailles de roue"}}
+		</dl>
 	</fieldset>
 </div>

+<style id='bike-hide'></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">
            			<img src="{{$root_url}}{{$path}}?150px" class="image">
+					</a>
 				{{else}}
+					<div class="placeholder" style="background-image: url({{$config.files.logo}});">
 						<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 740 512" class="image"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M312 32c-13.3 0-24 10.7-24 24s10.7 24 24 24l25.7 0 34.6 64-149.4 0-27.4-38C191 99.7 183.7 96 176 96l-56 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l43.7 0 22.1 30.7-26.6 53.1c-10-2.5-20.5-3.8-31.2-3.8C57.3 224 0 281.3 0 352s57.3 128 128 128c65.3 0 119.1-48.9 127-112l49 0c8.5 0 16.3-4.5 20.7-11.8l84.8-143.5 21.7 40.1C402.4 276.3 384 312 384 352c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-13.5 0-26.5 2.1-38.7 6L375.4 48.8C369.8 38.4 359 32 347.2 32L312 32zM458.6 303.7l32.3 59.7c6.3 11.7 20.9 16 32.5 9.7s16-20.9 9.7-32.5l-32.3-59.7c3.6-.6 7.4-.9 11.2-.9c39.8 0 72 32.2 72 72s-32.2 72-72 72s-72-32.2-72-72c0-18.6 7-35.5 18.6-48.3zM133.2 368l65 0c-7.3 32.1-36 56-70.2 56c-39.8 0-72-32.2-72-72s32.2-72 72-72c1.7 0 3.4 .1 5.1 .2l-24.2 48.5c-9 18.1 4.1 39.4 24.3 39.4zm33.7-48l50.7-101.3 72.9 101.2-.1 .1-123.5 0zm90.6-128l108.5 0L317 274.8 257.4 192z"/></svg>
+            		</div>
            	{{/select}}                
            </div>
 	    	<span class="label">{{$etiquette}}</span>
 	        <div class="properties">
 	            <ul>	            
+	                <li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
+	                <li class="numero-unique">numéro unique : {{$id|intval}} </li>
+	                
 	                <li>Type : {{$type}}</li>
 	                <li>Taille : {{$roues}}</li>
 	                <li>Cadre : {{$genre}}</li>
 	                <li>Modèle : {{$modele}}</li>

 	                <li>Prix : {{$prix}} €</li>
-	                <li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
 	            </ul>
 	        </div>
 		</div>    
@ -69,36 +81,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>
--- a/modules/velos_a_vendre/module.ini
+++ b/modules/velos_a_vendre/module.ini
@ -4,4 +4,4 @@ author = "Charlie, de Mines de Rayons"
 author_url = "https://git.minesderayons.fr"
 restrict_section = null
 restrict_level = "none"
-web = false
+restrict_details = "Ce module affiche une page pour tous les utilisateurs même non loggués, disponible à l'adresse `site/m/velos_a_vendre/`"
--- a/modules/velos_a_vendre/style.css
+++ b/modules/velos_a_vendre/style.css
@ -1,28 +1,18 @@
-.filters {
-    
-    fieldset {
-    	position: relative;
-    	min-width: 200px;
-        label {
+.filters fieldset {
+    display:flex;
+    flex-wrap: wrap;
+    gap: 10px;    
+}
+.filters fieldset dl {
    flex: 1 150px;
-            min-width: 50px;
-        }
-    }
-    
-    input[type="checkbox"], input[type="radio"] {
-      position: relative;
-      opacity: 0;
-      font-size: 1.2em;
-      left: 1em;
-      top: -0.1em;
-    }
+    min-width: 200px;
 }

 .container {
 	position: relative;
 	flex: 1;
 	min-width: 200px;
-    border: solid 1px black;
+    border: solid 1px rgb(var(--gTextColor));
    background-color: transparent;
    border-radius: 10px;
    overflow: hidden;
@ -47,17 +37,26 @@

 .image {
  display: block;
-  max-width:100%;
-  max-height:150px;
-  width: auto;
-  height: auto;
+  object-fit: cover;
+  width: 100%;
+  height: 125px;
+}
+
+.placeholder {
+    /* background-image: url({{$config.files.logo}});  */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: rgb(127, 127, 127);
+    background-blend-mode: soft-light;
+    svg {
+        fill: rgb(var(--gTextColor));
+    }
 }

 .label {
 	margin-left: auto;
 	margin-right: auto;
-	left: 0;
-	right: 0;
 	color: black;
 	text-align: center;
    border-color: black;
@ -65,14 +64,24 @@
    border-bottom: solid 1px;
    background-color: yellow;
    min-width: 5em;
-    width: 100%;
    min-height: 2ex;
    text-align: center;
    vertical-align: middle;
    z-index: 1;
+    position: absolute;
+    top: 0.75em;
+    left: -1.25em;
+    transform: rotate(-45deg);
+    font-weight: bold;
 }

-li.date-entree {
+.properties li{
+    padding-left:0.5em;    
+}
+.properties li:last-child{
+    padding-bottom:1em;    
+}
+.properties li.date-entree {
    display: block;
    position: absolute;
    bottom: 1.5em;
@ -81,3 +90,15 @@ li.date-entree {
    font-size: x-small;
    color: gray;
 }
+li.numero-unique {    
+    display: block;
+    position: absolute;
+    padding-left:0px;
+    margin-bottom: -10px;
+    left: 10px;
+    font-size: x-small;
+    color: gray;
+    transform: rotate(90deg);
+    top: 125px;
+    transform-origin: left;
+}
Author	SHA1	Message	Date
Charlie Mathey	22de6a24af	Ajout d'instruction pour l'importation de l'archive	2025-01-20 13:36:29 +01:00
oca	0ffea56aaa	Correction de mise en forme flex	2024-12-23 11:56:32 +01:00
Charlie Mathey	46de36182b	Filtres par selecteurs + champs lus dans la BDD	2024-12-19 17:29:27 +01:00
Charlie Mathey	b84f334ade	Ajout du logo de l'asso en arrière plan des placeholders	2024-12-18 12:15:51 +01:00
Charlie Mathey	839fb65aa9	Ajout des prochaines améliorations éventuelles	2024-12-18 11:09:47 +01:00
Charlie Mathey	402998b15a	Lien vers les photos pleine page en cliquant dessus	2024-12-18 11:09:19 +01:00
Charlie Mathey	87e5d229c5	Force la taille des images dans les vignettes pour avoir un rendu homogène	2024-12-18 10:57:46 +01:00