78 lines
3.4 KiB
PHP
78 lines
3.4 KiB
PHP
<div class="box">
|
|
<div class="field">
|
|
<!-- Champ de recherche -->
|
|
<form method="GET" action="">
|
|
<div class="control has-icons-left">
|
|
<input class="input is-dark" type="text" name="query" placeholder="Rechercher..." value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
|
|
<span class="icon is-left">
|
|
<i class="fa fa-search"></i>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Bouton pour afficher/masquer les filtres -->
|
|
<button class="button is-dark" type="button" onclick="toggleFilters()">Filtrer</button>
|
|
</div>
|
|
|
|
<!-- Div contenant les filtres, cachée par défaut -->
|
|
<div id="filters" style="display: none;">
|
|
<form method="GET" action="">
|
|
<!-- Filtre par artiste -->
|
|
<div class="field">
|
|
<label class="label" for="artist">Artiste</label>
|
|
<div class="control">
|
|
<div class="select is-dark">
|
|
<select name="artist" id="artist" onchange="this.form.submit()">
|
|
<option value=''>Tous</option>
|
|
<?php foreach($artistes as $artiste): ?>
|
|
<option value="<?= $artiste->name ?>" <?= isset($_GET['artist']) && $_GET['artist'] == $artiste->name ? 'selected' : '' ?>><?= $artiste->name ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtre par genre -->
|
|
<div class="field">
|
|
<label class="label" for="genre">Genre</label>
|
|
<div class="control">
|
|
<div class="select is-dark">
|
|
<select name="genre" id="genre" onchange="this.form.submit()">
|
|
<option value=''>Tous</option>
|
|
<?php foreach($genres as $genre): ?>
|
|
<option value="<?= $genre->name ?>" <?= isset($_GET['genre']) && $_GET['genre'] == $genre->name ? 'selected' : '' ?>><?= $genre->name ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filtre par ordre -->
|
|
<div class="field">
|
|
<label class="label" for="order">Ordre</label>
|
|
<div class="control">
|
|
<div class="select is-dark">
|
|
<select name="order" id="order" onchange="this.form.submit()">
|
|
<option value="">Ordre :</option>
|
|
<option value="asc" <?= isset($_GET['order']) && $_GET['order'] == 'asc' ? 'selected' : '' ?>>Croissant</option>
|
|
<option value="desc" <?= isset($_GET['order']) && $_GET['order'] == 'desc' ? 'selected' : '' ?>>Décroissant</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Fonction pour afficher/masquer les filtres
|
|
function toggleFilters() {
|
|
var filters = document.getElementById('filters');
|
|
if (filters.style.display === 'none') {
|
|
filters.style.display = 'block';
|
|
} else {
|
|
filters.style.display = 'none';
|
|
}
|
|
}
|
|
</script>
|