Compare commits

..

4 Commits

4 changed files with 214 additions and 144 deletions

View File

@ -7,3 +7,35 @@ Améliorations prévues quand j'aurais du temps ou saurai faire :
* Permettre la modification de certains paramètres de style (couleur d'étiquette...) dans un menu de config * 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 . 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»

View File

@ -4,62 +4,72 @@
{{:admin_header title="Vélos à vendre" custom_css=$custom_css current="module_velos_a_vendre"}} {{: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"> <div class="filters">
<fieldset> <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 default_empty="Tous les types de vélo"}}
<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 default_empty="Tous les genres de cadre"}}
<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 default_empty="Toutes les tailles de roue"}}
<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> </fieldset>
</div> </div>
<style id='bike-hide'></style>
<div class="bike-list"> <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;}} {{#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}} {{: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"> <div class="image-wrapper">
{{#select name, path FROM files WHERE parent = {"ext/p/stock_velos/public/%s"|args:$id} ;}} {{#select name, path FROM files WHERE parent = {"ext/p/stock_velos/public/%s"|args:$id} ;}}
<a href="{{$root_url}}{{$path}}" target="_dialog"> <a href="{{$root_url}}{{$path}}" target="_dialog">
<img src="{{$root_url}}{{$path}}?150px" class="image"> <img src="{{$root_url}}{{$path}}?150px" class="image">
</a> </a>
{{else}} {{else}}
<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 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}} {{/select}}
</div> </div>
<span class="label">{{$etiquette}}</span> <span class="label">{{$etiquette}}</span>
<div class="properties"> <div class="properties">
<ul> <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>Type : {{$type}}</li>
<li>Taille : {{$roues}}</li> <li>Taille : {{$roues}}</li>
<li>Cadre : {{$genre}}</li> <li>Cadre : {{$genre}}</li>
<li>Modèle : {{$modele}}</li> <li>Modèle : {{$modele}}</li>
<li>Prix : {{$prix}} €</li> <li>Prix : {{$prix}} €</li>
<li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
</ul> </ul>
</div> </div>
</div> </div>
@ -71,36 +81,42 @@
<script type="text/javascript"> <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> </script>

View File

@ -4,4 +4,4 @@ author = "Charlie, de Mines de Rayons"
author_url = "https://git.minesderayons.fr" author_url = "https://git.minesderayons.fr"
restrict_section = null restrict_section = null
restrict_level = "none" 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/`"

View File

@ -1,82 +1,104 @@
.filters { .filters fieldset {
display:flex;
fieldset { flex-wrap: wrap;
position: relative; gap: 10px;
min-width: 200px; }
label { .filters fieldset dl {
flex: 1 150px; flex: 1 150px;
min-width: 50px; min-width: 200px;
} }
}
.container {
input[type="checkbox"], input[type="radio"] { position: relative;
position: relative; flex: 1;
opacity: 0; min-width: 200px;
font-size: 1.2em; border: solid 1px rgb(var(--gTextColor));
left: 1em; background-color: transparent;
top: -0.1em; border-radius: 10px;
} overflow: hidden;
} box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.container {
position: relative; .properties {
flex: 1; margin: 10px;
min-width: 200px; padding: 10px;
border: solid 1px black; }
background-color: transparent;
border-radius: 10px; .bike-list {
overflow: hidden; display: flex;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); flex-wrap: wrap;
} gap: 10px;
}
.properties{
margin: 10px; .image-wrapper {
padding: 10px; position: relative;
} }
.bike-list{
display: flex; .image {
flex-wrap: wrap; display: block;
gap: 10px; object-fit: cover;
} width: 100%;
height: 125px;
.image-wrapper { }
position: relative;
} .placeholder {
/* background-image: url({{$config.files.logo}}); */
background-size: cover;
.image { background-position: center;
display: block; background-repeat: no-repeat;
object-fit: cover; background-color: rgb(127, 127, 127);
width: 100%; background-blend-mode: soft-light;
height: 100px; svg {
} fill: rgb(var(--gTextColor));
}
.label { }
margin-left: auto;
margin-right: auto; .label {
left: 0; margin-left: auto;
right: 0; margin-right: auto;
color: black; color: black;
text-align: center; text-align: center;
border-color: black; border-color: black;
border-top: solid 1px; border-top: solid 1px;
border-bottom: solid 1px; border-bottom: solid 1px;
background-color: yellow; background-color: yellow;
min-width: 5em; min-width: 5em;
width: 100%; min-height: 2ex;
min-height: 2ex; text-align: center;
text-align: center; vertical-align: middle;
vertical-align: middle; z-index: 1;
z-index: 1; position: absolute;
} top: 0.75em;
left: -1.25em;
li.date-entree { transform: rotate(-45deg);
display: block; font-weight: bold;
position: absolute; }
bottom: 1.5em;
margin-bottom: -10px; .properties li{
right: 10px; padding-left:0.5em;
font-size: x-small; }
color: gray; .properties li:last-child{
} padding-bottom:1em;
}
.properties li.date-entree {
display: block;
position: absolute;
bottom: 1.5em;
margin-bottom: -10px;
right: 10px;
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;
}