oca/paheko-module-velos-a-vendre
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: oca:main
Branches Tags
oca:main
..
compare: oca:71c7c95ee844238ffa1d6e9af8efe3227345c44d
Branches Tags
oca:main

1 Commits
main ... 71c7c95ee8

Author SHA1 Message Date
Charlie Mathey
71c7c95ee8 Correction des chemins photos / -> / 2024-12-18 09:43:28 +01:00
4 changed files with 150 additions and 227 deletions
Expand all files Collapse all files

38
README.md
View File

@ -1,41 +1,3 @@
# 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»

146
modules/velos_a_vendre/index.html
View File

@ -4,72 +4,60 @@
{{: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>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>
<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>
</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}}
{{: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="container" type="{{$type}}" genre="{{$genre}}" roues="{{$taille}}">
<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>
<img src="{{$root_url}}{{$path}}?150px" class="image">
{{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>
<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>
{{/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>Cadre : {{$genre}}</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>
</div>
</div>
@ -81,42 +69,36 @@
<script type="text/javascript">
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;
}
`;
}
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';
});
});
}
set_toggle_hide('f_type')
set_toggle_hide('f_genre')
set_toggle_hide('f_roues')
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"]')
</script>

2
modules/velos_a_vendre/module.ini
View File

@ -4,4 +4,4 @@ author = "Charlie, de Mines de Rayons"
author_url = "https://git.minesderayons.fr"
restrict_section = null
restrict_level = "none"
restrict_details = "Ce module affiche une page pour tous les utilisateurs même non loggués, disponible à l'adresse `site/m/velos_a_vendre/`"
web = false

79
modules/velos_a_vendre/style.css
View File

@ -1,30 +1,40 @@
.filters fieldset {
display:flex;
flex-wrap: wrap;
gap: 10px;
}
.filters fieldset dl {
flex: 1 150px;
min-width: 200px;
.filters {
fieldset {
position: relative;
min-width: 200px;
label {
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;
}
}
.container {
position: relative;
flex: 1;
min-width: 200px;
border: solid 1px rgb(var(--gTextColor));
border: solid 1px black;
background-color: transparent;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.properties {
.properties{
margin: 10px;
padding: 10px;
}
.bike-list {
.bike-list{
display: flex;
flex-wrap: wrap;
gap: 10px;
@ -37,26 +47,17 @@
.image {
display: block;
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));
}
max-width:100%;
max-height:150px;
width: auto;
height: auto;
}
.label {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
color: black;
text-align: center;
border-color: black;
@ -64,24 +65,14 @@
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;
}
.properties li{
padding-left:0.5em;
}
.properties li:last-child{
padding-bottom:1em;
}
.properties li.date-entree {
li.date-entree {
display: block;
position: absolute;
bottom: 1.5em;
@ -90,15 +81,3 @@
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;
}