felix-vi/SAE_riot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

quasiment fini

Browse Source
This commit is contained in:
Patrick FELIX-VIMALARATNAM
2025-03-31 13:15:47 +02:00
parent b5bed05929
commit eabc11d2cc
7 changed files with 374 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
components/favorites.riot
View File

@@ -1,79 +1,114 @@
<favorites>
<h2>Mes favoris</h2>
<h2>Mes favoris</h2>
<div if={state.favorites.items.length> 0}>
<div class="results-grid">
<div class="card" each={item in state.favorites.items}>
<a href={ "#/release-details/" + item.id}>
<img src={item.thumb} alt="cover" />
<h4>{item.title}</h4>
<div if={item.type !=='artist' }>
<p>{item.year}</p>
<footer>
{item.community?.want} <i class="fa-solid fa-check"></i> {item.community?.have} <i class="fa-regular fa-heart"></i>
</footer>
</div>
</a>
</div>
</div>
<div if={state.loading}>
<p>Chargement des favoris...</p>
</div>
<div if={!state.loading && state.favorites.items.length === 0}>
<p>Aucun favori trouvé.</p>
</div>
<div if={!state.loading && state.favorites.items.length > 0}>
<div class="results-grid">
<div class="card" each={item in state.favorites.items}>
<a onclick={() => removeFavoris(item.id)}>
<button><i class="fa-solid fa-star"></i></button>
</a>
<a href={"#/release-details/" + item.id}>
<h4>{item.title}</h4>
<img src={item.thumb} alt="cover" />
<div if={item.type !== 'artist'}>
<p>{item.year}</p>
<footer>
{item.community?.want} <i class="fa-solid fa-check"></i>
{item.community?.have} <i class="fa-regular fa-heart"></i>
</footer>
</div>
</a>
</div>
</div>
</div>
<p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
<script>
export default {
state: {
favorites: {
items: []
},
loading: true
},
<script>
export default {
state: {
favorites: {
items: []
}
},
async onMounted() {
const ids = await window.getFavorites();
async onMounted() {
const ids = await window.getFavorites();
const items = [];
for (const id of ids) {
const release = await window.getReleaseDetails(id);
items.push(release);
}
const items = [];
for (const id of ids) {
const release = await window.getReleaseDetails(id);
items.push(release);
}
this.state.favorites.items = items;
this.update();
}
}
</script>
this.state.favorites.items = items;
this.state.loading = false;
this.update();
},
<style>
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
.card {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card img {
width: 100%;
height: auto;
border-radius: 4px;
margin-bottom: 10px;
}
.card h4 {
font-size: 1rem;
margin: 5px 0;
}
footer {
display: flex;
justify-content: space-around;
margin-top: 0.5rem;
}
</style>
</favorites>
async removeFavoris(id) {
await window.removeFavorite(id);
this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
this.update();
}
}
</script>
<style>
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
padding: 1rem;
}
.card {
background: white;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
padding: 1rem;
text-align: center;
transition: transform 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
}
.card img {
width: 100%;
border-radius: 6px;
margin-bottom: 0.5rem;
}
.card h4 {
font-size: 1.1rem;
margin: 0.5rem 0;
}
footer {
display: flex;
justify-content: space-around;
font-size: 0.9rem;
color: #666;
}
.card a i.fa-star {
color: #fbc02d;
font-size: 1.3rem;
transition: transform 0.2s ease;
}
.card a i.fa-star:hover {
transform: scale(1.2);
}
</style>
</favorites>