ucef/as-talange
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: show dynamic labels for all equipments based on gender and playing style

Browse Source
This commit is contained in:
Youssef
2026-05-20 21:44:34 +02:00
parent cac229486a
commit dd31d73fed
1 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
as-talange-web/src/main/resources/templates/adherents/form.html
+40 -3
View File
@@ -255,13 +255,21 @@
th:text="${dot.equipement.obligatoire ? 'Obligatoire' : 'Facultatif'}">Obligatoire</span> th:text="${dot.equipement.obligatoire ? 'Obligatoire' : 'Facultatif'}">Obligatoire</span>
</div> </div>
<div class="text-[10px] text-gray-400 mb-2 truncate" th:title="${dot.equipement.description}" th:text="${dot.equipement.description != null and !dot.equipement.description.isEmpty() ? dot.equipement.description : 'Pas de description'}">Description</div> <div class="text-[10px] text-gray-400 mb-2 truncate" th:title="${dot.equipement.description}" th:text="${dot.equipement.description != null and !dot.equipement.description.isEmpty() ? dot.equipement.description : 'Pas de description'}">Description</div>
<!-- Special dynamic label for Jersey type --> <!-- Special dynamic label for equipment style -->
<div class="mb-2" th:if="${dot.equipement.nom == 'Maillot'}"> <div class="mb-2" th:if="${dot.equipement.nom == 'Maillot' or dot.equipement.nom == 'Short' or dot.equipement.nom == 'Chaussettes'}">
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border border-blue-100" <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-700 border border-blue-100 dotation-style-label"
th:data-equipement="${dot.equipement.nom}"
th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'} + ' - ' + ${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}"> th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'} + ' - ' + ${adherent.typeMaillot == 'GARDIEN' ? 'Gardien' : 'Joueur'}">
Modèle Homme - Joueur Modèle Homme - Joueur
</span> </span>
</div> </div>
<div class="mb-2" th:if="${dot.equipement.nom == 'Survêtement'}">
<span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold bg-indigo-50 text-indigo-700 border border-indigo-100 dotation-style-label"
th:data-equipement="${dot.equipement.nom}"
th:text="${adherent.sexe == 'FEMININ' ? 'Modèle Femme' : 'Modèle Homme'}">
Modèle Homme
</span>
</div>
</div> </div>
<!-- Form inputs for bulk updating --> <!-- Form inputs for bulk updating -->
@@ -487,6 +495,35 @@
}); });
}); });
} }
// Update equipment style labels dynamically when Sexe or Type de Maillot (Poste) changes
const sexeSelect = document.getElementById('sexe');
const typeMaillotSelect = document.getElementById('typeMaillot');
function updateEquipmentStyleLabels() {
if (!sexeSelect || !typeMaillotSelect) return;
const sexe = sexeSelect.value;
const typeMaillot = typeMaillotSelect.value;
const sexeText = (sexe === 'FEMININ') ? 'Modèle Femme' : 'Modèle Homme';
const typeText = (typeMaillot === 'GARDIEN') ? 'Gardien' : 'Joueur';
document.querySelectorAll('.dotation-style-label').forEach(label => {
const equip = label.getAttribute('data-equipement');
if (equip === 'Maillot' || equip === 'Short' || equip === 'Chaussettes') {
label.textContent = `${sexeText} - ${typeText}`;
} else if (equip === 'Survêtement') {
label.textContent = sexeText;
}
});
}
if (sexeSelect) {
sexeSelect.addEventListener('change', updateEquipmentStyleLabels);
}
if (typeMaillotSelect) {
typeMaillotSelect.addEventListener('change', updateEquipmentStyleLabels);
}
}); });
</script> </script>
</body> </body>