SAE_PHP_2024/CodeIgniter-3.1.13/application/views/albums_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; 
    }
</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> 
<?php $page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
if($page[count($page)-2] != 'viewAlbum'){ ?>
<h5>Filter Albums</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>
        </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>

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

<h5>Sort Albums</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>
<?php } ?>

<h5>Albums list</h5>
<section class="list">
<?php
$page = preg_split('/[\/]/',$_SERVER['REQUEST_URI']);
$long_page = count($page)-1;
$url = $page[$long_page];
while ($page[$long_page] != 'albums'){
    $long_page = $long_page - 1;
    $url = $page[$long_page] . '/' . $url;
}

foreach($albums as $album){
	
	echo "<div><article>";
	echo "<header class='short-text'>";
	echo anchor("albums/viewMusique/{$album->albumId}","{$album->name}");
    if($this->session->userdata('logged_in')){
        echo anchor("albums/addAlbumtoPlaylist/{$album->albumId}?page={$url}","<i class='fa fa-plus'></i>");
    }
	echo "</header>";
	echo '<img src="data:image/jpeg;base64,'.base64_encode($album->jpeg).'" />';
	echo "<nav class='short-text'>Genre: {$album->genreName}</nav>";
	echo "<footer class='short-text'>{$album->year} - {$album->artistName}</footer>
	  </article></div>";
}
?>
</section>