Add advice and finish size filter

This commit is contained in:
2025-11-15 18:48:11 +01:00
parent 08be6a2455
commit a4fdd6e965
5 changed files with 56 additions and 29 deletions

View File

@@ -1,6 +1,6 @@
{% extends 'base.html' %}
{% block title %}Tableau de bord{% endblock %}
{% block title %}Les films de Lulu{% endblock %}
{% block matrix %}
<canvas id="matrix"></canvas>
@@ -12,21 +12,31 @@
<!-- Colonne principale des filtres -->
<div style="display: flex; flex-direction: column; gap: 10px;">
<div style="display: flex; flex-direction: column;">
<p class="user-info" style="text-align: center;">
Conseils de recherche 😊
</p>
<p class="user-info">
- Préciser une catégorie<br>
- Essayer les titres en anglais<br>
- Ajuster la taille maximale
</p>
</div>
<!-- Ligne 1 : Catégorie et Recherche -->
<div style="display: flex; gap: 10px; align-items: flex-start">
<div style="display: flex; flex-direction: column;">
<label class="bold-label">Catégorie</label>
<select name="category_id">
<select name="category_id" id="category_id">
<option value="">Tout</option>
<optgroup label="🎬 Film / Vidéo">
<option value="2183" selected>Film/Vidéo : Film</option>
<option value="2184">Film/Vidéo : Série TV</option>
<option value="2178">Film/Vidéo : Animation</option>
<option value="2179">Film/Vidéo : Animation Série</option>
<option value="2180">Film/Vidéo : Concert</option>
<option value="2181">Film/Vidéo : Documentaire</option>
<option value="2182">Film/Vidéo : Émission TV</option>
<option value="2183">Film/Vidéo : Film</option>
<option value="2184">Film/Vidéo : Série TV</option>
<option value="2180">Film/Vidéo : Concert</option>
<option value="2185">Film/Vidéo : Spectacle</option>
<option value="2186">Film/Vidéo : Sport</option>
<option value="2187">Film/Vidéo : Vidéo-clips</option>
@@ -91,12 +101,12 @@
<div style="display: flex; flex-direction: column;">
<label class="bold-label">Taille max (Go)</label>
<input type="number" name="max_size" min="1" step="1" value="15">
<input type="number" name="max_size" min="1" step="1" value="5">
</div>
</div>
<!-- Ligne 3 : Série -->
<div style="display: flex; flex-direction: column; gap: 5px;">
<div id="serie-section" style="display: none; flex-direction: column; gap: 5px;">
<label class="bold-label">Série</label>
<div style="display: flex; gap: 10px;">
<label><input type="radio" name="serie_type" value="all" checked> Tout</label>
@@ -104,7 +114,6 @@
<label><input type="radio" name="serie_type" value="episode"> Épisode précis</label>
</div>
<!-- Champs conditionnels -->
<div id="season-field" style="display: none; margin-top: 5px;">
<label>Saison</label>
<input type="number" name="season" min="1" step="1" placeholder="1">
@@ -112,10 +121,10 @@
<div id="episode-field" style="display: none; margin-top: 5px;">
<label>Épisode</label>
<input type="number" name="episode_number" min="1" step="1" placeholder="1">
<input type="number" name="episode" min="1" step="1" placeholder="1">
</div>
</div>
<!-- Bouton Recherche sur le côté -->
<div style="display: flex; justify-content: center;">
<button type="submit" style="padding: 5px 30px;">Rechercher</button>
</div>
@@ -131,7 +140,10 @@
const radioButtons = document.querySelectorAll('input[name="serie_type"]');
const seasonField = document.getElementById('season-field');
const episodeField = document.getElementById('episode-field');
const serieSection = document.getElementById('serie-section');
const categorySelect = document.getElementById('category_id');
// Gestion des radio boutons (saison/épisode)
radioButtons.forEach(radio => {
radio.addEventListener('change', () => {
if (radio.value === 'all') {
@@ -146,5 +158,19 @@ radioButtons.forEach(radio => {
}
});
});
// Affiche la section Série uniquement si la catégorie correspond à une série
function updateSerieVisibility() {
const selected = categorySelect.value;
if (selected === "2184" || selected === "2179" || selected === "2182") {
serieSection.style.display = "flex";
} else {
serieSection.style.display = "none";
}
}
// Exécute au chargement et lors dun changement de catégorie
categorySelect.addEventListener('change', updateSerieVisibility);
updateSerieVisibility();
</script>
{% endblock %}