SAE_PHP_2024/CodeIgniter-3.1.13/application/views/chansons_list.php

<style>
        .filter-options {
            display: none;
            margin-top: 10px;
        }
        .filter-buttons {
            display: none;
        }
        .filter-buttons.show {
            display: inline-block;
        }
        .filter-checkboxes {
            display: none;
        }
        .filter-checkboxes.show {
            display: block;
        }
		.sort-buttons {
            display: none; 
        }
        .show-buttons .sort-buttons {
            display: block; / Afficher les boutons de tri lorsque la classe show-buttons est appliquée */
        }
    </style>
    <script>
        var filterOptionsVisible = false;

        function toggleFilterOptions() {
            var filterOptions = document.getElementById('filter-options');
            var filterButtons = document.getElementById('filter-buttons');

            if (!filterOptionsVisible) {
                filterOptions.style.display = 'block';
                filterButtons.classList.add('show');
                filterOptionsVisible = true;
            } else {
                filterOptions.style.display = 'none';
                filterButtons.classList.remove('show');
                hideCheckboxes();
                filterOptionsVisible = false;
            }
        }

        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';
			}
        }

        function hideCheckboxes() {
            var checkboxes = document.querySelectorAll('.filter-checkboxes');
            checkboxes.forEach(function(checkbox) {
                checkbox.classList.remove('show');
            });
        }

		function toggleSortButtons() {
            var sortButtons = document.getElementById('sort-buttons');
            if (sortButtons.style.display === 'none' || sortButtons.style.display === '') {
                sortButtons.style.display = 'block';
            } else {
                sortButtons.style.display = 'none';
            }
        }

		function sortAlbums(column, order) {
            var url = "<?= site_url('albums/index'); ?>";
            url += "?sort=" + column + "&order=" + order;
            window.location.href = url;
        }
    </script> 

<h5>Filter Chansons</h5>
<button type="button" onclick="toggleFilterOptions()">Filter</button>

<div id="filter-options" class="filter-options">
    <form method="get">
        <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>
			<button type="button" onclick="toggleCheckboxes('album')">Albums</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>

		<div id="album-checkboxes" style="display:none;">
            <?php foreach ($albums as $album): ?>
                <label>
                    <input type="checkbox" name="albums[]" value="<?= $album->albumName; ?>">
                    <?= $album->albumName; ?>
                </label><br>
            <?php endforeach; ?>
        </div>

        <button type="submit">Apply Filters</button>
    </form>
</div> 

<h5>Sort Chansons</h5>
<button type="button" onclick="toggleSortButtons()">Sort</button>
<div id="sort-buttons" class="sort-buttons">
	<button onclick="sortAlbums('year', 'asc')">Sort by Year Asc</button>
	<button onclick="sortAlbums('year', 'desc')">Sort by Year Desc</button>
	<button onclick="sortAlbums('artistName', 'asc')">Sort by Artist Asc</button>
	<button onclick="sortAlbums('artistName', 'desc')">Sort by Artist Desc</button>
	<button onclick="sortAlbums('name', 'asc')">Sort by Album Name Asc</button>
	<button onclick="sortAlbums('name', 'desc')">Sort by Album Name Desc</button>
	<button onclick="sortAlbums('genreName', 'asc')">Sort by Genre Asc</button>
	<button onclick="sortAlbums('genreName', 'desc')">Sort by Genre Desc</button>
</div>

<h5>Chansons list</h5>
<section class="list">
<?php
foreach($chansons as $chanson){
	echo "<div><article>";
	echo "<header class='short-text'>";
	echo anchor("chansons/view/{$chanson->id}","{$chanson->name}");
	echo anchor("chansons/addSongtoPlaylist/{$chanson->trackId}","<i class='fa fa-plus'></i>");
	echo "</header>";
    echo "<nav class='short-text'>Nom album: {$chanson->albumName}</nav>";
	echo "<nav class='short-text'>Genre: {$chanson->genreName}</nav>";
	echo "<footer class='short-text'>{$chanson->year} - {$chanson->artistName}</footer>
	  </article></div>";
}
?>
</section>