This commit is contained in:
2024-06-19 14:08:59 +02:00
parent 9436fd05cc
commit 6bfbf46dcc
21 changed files with 854 additions and 236 deletions

View File

@@ -22,12 +22,20 @@
<thead>
<tr>
<th>Titre</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($songs as $song): ?>
<tr>
<td><?= anchor("music/view/{$song->trackId}", $song->trackName) ?></td>
<td>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
<input type="hidden" name="itemId" value="<?= $song->trackId ?>">
<input type="hidden" name="itemType" value="song">
<button type="submit" class="button is-link">Ajouter à la playlist</button>
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>

View File

@@ -5,14 +5,17 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liste des Albums - Dix heures</title>
<link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title is-4 has-text-dark">Liste des Albums</h1>
<div class="columns is-multiline is-centered">
<h1 class="title">Liste des Albums</h1>
<!-- Liste des albums -->
<div class="columns is-multiline">
<?php foreach ($albums as $album): ?>
<div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
@@ -22,13 +25,13 @@
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4 album-title"><?= anchor("albums/view/{$album->id}", $album->name) ?></p>
<p class="subtitle is-6"><?= "{$album->year} - {$album->artistName}" ?></p>
<?php if (isset($is_logged_in) && $is_logged_in): ?>
<p class="title is-4"><?= anchor("albums/view/{$album->id}", $album->name) ?></p>
<p class="subtitle is-6"><?= $album->artistName ?> - <?= $album->year ?></p>
<?php if ($is_logged_in): ?>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
<input type="hidden" name="itemId" value="<?= $album->id ?>">
<input type="hidden" name="itemType" value="album">
<button type="submit" class="button is-link is-fullwidth">Ajouter à la playlist</button>
<button type="submit" class="button is-link">Ajouter à la playlist</button>
</form>
<?php endif; ?>
</div>
@@ -38,7 +41,64 @@
</div>
<?php endforeach; ?>
</div>
<!-- Pagination -->
<nav class="pagination" role="navigation" aria-label="pagination">
<?= $pagination ?>
</nav>
</div>
</section>
</body>
</html>
<style>
.card {
display: flex;
flex-direction: column;
height: 100%;
}
.card-image {
flex-shrink: 0;
}
.card-content {
flex-grow: 1;
}
.card-footer {
flex-shrink: 0;
}
.album-title, .artist-title, .music-title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* Limite à 2 lignes */
overflow: hidden;
text-overflow: ellipsis;
height: 3em; /* Ajuste en fonction de la taille de la police */
}
.pagination a, .pagination span {
padding: 8px 12px;
margin: 0 2px;
border-radius: 4px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.pagination a:hover {
background-color: #f0f0f0;
border-color: #bbb;
}
.pagination .is-current {
background-color: #3273dc;
border-color: #3273dc;
color: #fff;
}
</style>

View File

@@ -19,11 +19,30 @@
<p><strong>Genre:</strong> <?= $album->genreName ?></p>
<p><strong>Year:</strong> <?= $album->year ?></p>
<h4 class="title is-6">Songs</h4>
<ul>
<?php foreach ($album->songs as $song): ?>
<li><?= anchor("music/view/{$song->trackId}", $song->songName) ?></li>
<?php endforeach; ?>
</ul>
<div class="table-container">
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th>Titre</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($album->songs as $song): ?>
<tr>
<td><?= anchor("music/view/{$song->trackId}", $song->songName) ?></td>
<td>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>" style="display:inline;">
<input type="hidden" name="itemId" value="<?= $song->trackId ?>">
<input type="hidden" name="itemType" value="song">
<button type="submit" class="button is-link is-small">Ajouter à la playlist</button>
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>

View File

@@ -1,27 +1,51 @@
<section class="section">
<div class="container">
<h1 class="title is-4">Liste des Artistes</h1>
<h1 class="title">Artistes</h1>
<div class="columns is-multiline">
<?php foreach ($artists as $artist): ?>
<div class="column is-one-quarter-desktop is-half-tablet is-full-mobile">
<div class="card artist-card">
<div class="column is-one-quarter">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4 artist-title"><?= anchor("artistes/view/{$artist->artistId}", $artist->artistName) ?></p>
<?php if (isset($is_logged_in) && $is_logged_in): ?>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
<input type="hidden" name="itemId" value="<?= $artist->artistId ?>">
<input type="hidden" name="itemType" value="artist">
<button type="submit" class="button is-link">Ajouter à la playlist</button>
</form>
<?php endif; ?>
</div>
<div class="content">
<a href="<?= site_url('artistes/view/'.$artist->artistId) ?>"><?= $artist->artistName ?></a>
<?php if ($is_logged_in): ?>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
<input type="hidden" name="itemId" value="<?= $artist->artistId ?>">
<input type="hidden" name="itemType" value="artist">
<button type="submit" class="button is-link">Ajouter à la playlist</button>
</form>
<?php endif; ?>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Pagination -->
<nav class="pagination" role="navigation" aria-label="pagination">
<?= $pagination ?>
</nav>
</div>
</section>
<style>
.pagination a, .pagination span {
padding: 8px 12px;
margin: 0 2px;
border-radius: 4px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.pagination a:hover {
background-color: #f0f0f0;
border-color: #bbb;
}
.pagination .is-current {
background-color: #3273dc;
border-color: #3273dc;
color: #fff;
}
</style>

View File

@@ -1,7 +1,6 @@
<div class="box">
<div class="field">
<!-- Champ de recherche -->
<form method="GET" action="">
<form method="GET" action="<?= site_url($this->uri->segment(1) . '/index') ?>">
<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">
@@ -9,24 +8,21 @@
</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="">
<form method="GET" action="<?= site_url($this->uri->segment(1) . '/index') ?>">
<input type="hidden" name="query" value="<?= isset($_GET['query']) ? $_GET['query'] : '' ?>">
<?php if ($this->uri->segment(1) != 'artistes'): ?>
<!-- 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 foreach($artists as $artist): ?>
<option value="<?= $artist->name ?>" <?= isset($_GET['artist']) && $_GET['artist'] == $artist->name ? 'selected' : '' ?>><?= $artist->name ?></option>
<?php endforeach; ?>
</select>
</div>
@@ -34,7 +30,6 @@
</div>
<?php endif; ?>
<!-- Filtre par genre -->
<div class="field">
<label class="label" for="genre">Genre</label>
<div class="control">
@@ -49,7 +44,6 @@
</div>
</div>
<!-- Filtre par ordre -->
<div class="field">
<label class="label" for="order">Ordre</label>
<div class="control">
@@ -67,7 +61,6 @@
</div>
<script>
// Fonction pour afficher/masquer les filtres
function toggleFilters() {
var filters = document.getElementById('filters');
if (filters.style.display === 'none') {

View File

@@ -9,7 +9,7 @@
<link rel="stylesheet" href="<?= base_url('assets/style.css') ?>">
</head>
<body>
<nav class="navbar">
<nav class="navbar is-fixed-top">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="#">
@@ -45,4 +45,24 @@
</div>
</div>
</nav>
<main class="container" style="padding-top: 90px;"> <!-- Ajout de padding-top pour éviter que la navbar ne masque le contenu -->
<main class="container" style="padding-top: 90px;">
<script>
document.addEventListener('DOMContentLoaded', () => {
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
const target = el.dataset.target;
const $target = document.getElementById(target);
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
</body>
</html>

View File

@@ -29,5 +29,36 @@
</div>
<?php endforeach; ?>
</div>
<!-- Pagination -->
<nav class="pagination" role="navigation" aria-label="pagination">
<?= $pagination ?>
</nav>
</div>
</section>
<style>
.pagination a, .pagination span {
padding: 8px 12px;
margin: 0 2px;
border-radius: 4px;
border: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.pagination a:hover {
background-color: #f0f0f0;
border-color: #bbb;
}
.pagination .is-current {
background-color: #3273dc;
border-color: #3273dc;
color: #fff;
}
</style>

View File

@@ -3,6 +3,7 @@
<h1 class="title">Détails de la Playlist</h1>
<?php if ($items): ?>
<p><strong>Nombre de chansons:</strong> <?= $itemCount ?></p>
<div class="table-container" style="max-height: 400px; overflow-y: auto;">
<table class="table is-fullwidth is-striped">
<thead>
@@ -35,4 +36,4 @@
<a href="<?= site_url('playlist') ?>" class="button is-link">Retour aux playlists</a>
</div>
</section>
</section>

View File

@@ -17,18 +17,18 @@
<div class="media">
<div class="media-content">
<p class="title is-4"><?= anchor("playlist/view/{$playlist->id}", $playlist->name) ?></p>
</div>
<div class="media-right buttons-right">
<?= form_open('playlist/duplicate/'.$playlist->id, ['style' => 'display:inline;']) ?>
<button type="submit" class="button is-info is-small">Dupliquer</button>
<?= form_close() ?>
<button class="button is-warning is-small" onclick="showRenameModal('<?= $playlist->id ?>', '<?= $playlist->name ?>')">Renommer</button>
<div class="buttons">
<?= form_open('playlist/duplicate/'.$playlist->id, ['style' => 'display:inline;']) ?>
<button type="submit" class="button button-duplicate is-small">Dupliquer</button>
<?= form_close() ?>
<button class="button button-rename is-small" onclick="showRenameModal('<?= $playlist->id ?>', '<?= $playlist->name ?>')">Renommer</button>
</div>
</div>
</div>
</div>
<footer class="card-footer">
<?= form_open('playlist/delete/'.$playlist->id, ['class' => 'card-footer-item']) ?>
<button type="submit" class="button is-danger is-small">Supprimer</button>
<button type="submit" class="button button-delete is-small">Supprimer</button>
<?= form_close() ?>
</footer>
</div>
@@ -52,7 +52,7 @@
<div class="control">
<div class="select">
<select name="type" id="playlistType" onchange="toggleRandomOptions()">
<option value="empty">Vide</option>
<option value="empty" selected>Vide</option>
<option value="random">Aléatoire</option>
</select>
</div>
@@ -63,20 +63,7 @@
<div class="field">
<label class="label">Nombre de chansons</label>
<div class="control">
<input type="number" name="numSongs" class="input" placeholder="Nombre de chansons">
</div>
</div>
<div class="field">
<label class="label">Artiste</label>
<div class="control">
<div class="select">
<select name="artist">
<option value="">Tous</option>
<?php foreach($artists as $artist): ?>
<option value="<?= $artist->name ?>"><?= $artist->name ?></option>
<?php endforeach; ?>
</select>
</div>
<input type="number" name="numSongs" class="input" placeholder="Nombre de chansons" min="1">
</div>
</div>
<div class="field">
@@ -132,6 +119,10 @@
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
toggleRandomOptions();
});
function toggleRandomOptions() {
var playlistType = document.getElementById('playlistType').value;
var randomOptions = document.getElementById('randomOptions');
@@ -152,3 +143,38 @@
document.getElementById('renameModal').classList.remove('is-active');
}
</script>
<style>
.button-rename {
background-color: #D17B8F; /* Rose */
border-color: #D17B8F;
color: #FFF;
}
.button-rename:hover {
background-color: #B5697D; /* Rose plus foncé */
border-color: #B5697D;
}
.button-duplicate {
background-color: #A569BD; /* Violet */
border-color: #A569BD;
color: #FFF;
}
.button-duplicate:hover {
background-color: #8E57A8; /* Violet plus foncé */
border-color: #8E57A8;
}
.button-delete {
background-color: #C3423F; /* Rougeâtre */
border-color: #C3423F;
color: #FFF;
}
.button-delete:hover {
background-color: #A83835; /* Rougeâtre plus foncé */
border-color: #A83835;
}
</style>

View File

@@ -1,31 +1,37 @@
<section class="section">
<div class="container">
<h1 class="title is-4">Sélectionner une playlist</h1>
<h1 class="title">Sélectionnez une Playlist</h1>
<?php if ($playlists): ?>
<form method="post" action="<?= site_url('playlist/addItems') ?>">
<input type="hidden" name="itemId" value="<?= $itemId ?>">
<input type="hidden" name="itemType" value="<?= $itemType ?>">
<div class="field">
<label class="label">Choisir une playlist</label>
<div class="control">
<div class="select is-dark">
<select name="playlistId">
<?php foreach ($playlists as $playlist): ?>
<option value="<?= $playlist->id ?>"><?= $playlist->name ?></option>
<?php endforeach; ?>
</select>
<?php if ($is_logged_in): ?>
<?php if ($playlists): ?>
<div class="columns is-multiline">
<?php foreach ($playlists as $playlist): ?>
<div class="column is-one-third">
<div class="card">
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="title is-4"><?= $playlist->name ?></p>
</div>
</div>
</div>
<footer class="card-footer">
<?= form_open('playlist/addItems') ?>
<input type="hidden" name="playlistId" value="<?= $playlist->id ?>">
<input type="hidden" name="itemId" value="<?= $itemId ?>">
<input type="hidden" name="itemType" value="<?= $itemType ?>">
<button type="submit" class="button is-link card-footer-item">Ajouter</button>
<?= form_close() ?>
</footer>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="field">
<div class="control">
<button type="submit" class="button is-link">Ajouter</button>
</div>
</div>
</form>
<?php else: ?>
<p>Vous n'avez pas encore de playlists.</p>
<?php endif; ?>
<?php else: ?>
<p>Vous n'avez pas encore de playlists. Veuillez en créer une.</p>
<p>Vous devez être connecté pour ajouter des éléments à une playlist.</p>
<?php endif; ?>
</div>
</section>

View File

@@ -1,3 +1,11 @@
<?php
function format_duration($seconds) {
$minutes = floor($seconds / 60);
$seconds = $seconds % 60;
return sprintf("%02d:%02d", $minutes, $seconds);
}
?>
<!DOCTYPE html>
<html>
<body>
@@ -15,11 +23,37 @@
</figure>
</div>
<div class="column">
<p><strong>Album:</strong> <?= anchor("albums/view/{$song['albumId']}", $song['albumName']) ?> (<?= $song['year'] ?>)</p>
<p><strong>Artist:</strong> <?= $song['artistName'] ?></p>
<p><strong>Disk Number:</strong> <?= $song['diskNumber'] ?></p>
<p><strong>Track Number:</strong> <?= $song['number'] ?></p>
<p><strong>Duration:</strong> <?= $song['duration'] ?> seconds</p>
<div class="table-container">
<table class="table is-striped is-fullwidth">
<tbody>
<tr>
<th>Album</th>
<td><?= anchor("albums/view/{$song['albumId']}", $song['albumName']) ?> (<?= $song['year'] ?>)</td>
</tr>
<tr>
<th>Artist</th>
<td><?= $song['artistName'] ?></td>
</tr>
<tr>
<th>Disk Number</th>
<td><?= $song['diskNumber'] ?></td>
</tr>
<tr>
<th>Track Number</th>
<td><?= $song['number'] ?></td>
</tr>
<tr>
<th>Duration</th>
<td><?= format_duration($song['duration']) ?></td>
</tr>
</tbody>
</table>
</div>
<form method="post" action="<?= site_url('playlist/selectPlaylist') ?>">
<input type="hidden" name="itemId" value="<?= $song['songId'] ?>">
<input type="hidden" name="itemType" value="song">
<button type="submit" class="button is-link">Ajouter à la playlist</button>
</form>
</div>
</div>
</div>