76 lines
2.6 KiB
PHP
76 lines
2.6 KiB
PHP
|
|
||
|
|
<style>
|
||
|
|
.filter-buttons {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.filter-buttons.show {
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.filter-checkboxes {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.filter-checkboxes.show {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.show-buttons .sort-buttons {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
function toggleCheckboxes(filterType) {
|
||
|
|
var checkboxes = document.getElementById(filterType + '-checkboxes');
|
||
|
|
if (checkboxes.style.display === 'none' || checkboxes.style.display === '') {
|
||
|
|
checkboxes.style.display = 'block';
|
||
|
|
} else {
|
||
|
|
checkboxes.style.display = 'none';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<h5>Différents critères</h5>
|
||
|
|
|
||
|
|
<form method="post">
|
||
|
|
<div id="filter-buttons" class="filter-buttons">
|
||
|
|
<button type="button" onclick="toggleCheckboxes('genre')">Genres</button>
|
||
|
|
<button type="button" onclick="toggleCheckboxes('artist')">Artists</button>
|
||
|
|
<button type="button" onclick="toggleCheckboxes('year')">Years</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="genre-checkboxes" style="display:none;">
|
||
|
|
<?php foreach ($genres as $genre): ?>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="genre[]" value="<?= $genre->genreName; ?>">
|
||
|
|
<?= $genre->genreName; ?>
|
||
|
|
</label><br>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="artist-checkboxes" style="display:none;">
|
||
|
|
<?php foreach ($artists as $artist): ?>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="artist[]" value="<?= $artist->artistName; ?>">
|
||
|
|
<?= $artist->artistName; ?>
|
||
|
|
</label><br>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="year-checkboxes" style="display:none;">
|
||
|
|
<?php foreach ($years as $year): ?>
|
||
|
|
<label>
|
||
|
|
<input type="checkbox" name="year[]" value="<?= $year->year; ?>">
|
||
|
|
<?= $year->year; ?>
|
||
|
|
</label><br>
|
||
|
|
<?php endforeach; ?>
|
||
|
|
</div>
|
||
|
|
<label for="num_tracks">Nombre de musiques</label>
|
||
|
|
<input type="number" id="num_tracks" name="num_tracks" min="1" placeholder="Nombre de musiques" required><br>
|
||
|
|
<label for="name">Nom de la playlist</label>
|
||
|
|
<input type="text" id="name" name="name" placeholder="name" required>
|
||
|
|
<div class="grid">
|
||
|
|
<label for="text">Déscription
|
||
|
|
<input type="text" id="Description" name="Description" placeholder="Description" >
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
<!-- Button -->
|
||
|
|
<button type="submit">Submit</button>
|
||
|
|
</form>
|