140 lines
3.5 KiB
Plaintext
140 lines
3.5 KiB
Plaintext
<favorites>
|
||
<h2>Mes favoris</h2>
|
||
|
||
<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, item.type)}>
|
||
<button><i class="fa-solid fa-star"></i></button>
|
||
</a>
|
||
<a href={"#/release-details/" + item.type + "/" + item.id}>
|
||
<h4>{item.artists[0].name} – {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>
|
||
<a if={item.type === "release"} href={"#/release-details/master/" + item.master_id}><button>master</button></a>
|
||
<a if={item.type === "master"} href="#"><button onclick={() => this.MainReleaseDetails(item)}>release</button></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
export default {
|
||
state: {
|
||
favorites: {
|
||
items: []
|
||
},
|
||
loading: true
|
||
},
|
||
|
||
async onMounted() {
|
||
const favs = await window.getFavorites();
|
||
|
||
const items = [];
|
||
|
||
for (const fav of favs) {
|
||
let data;
|
||
if (fav.Type === "master") {
|
||
data = await window.getMasterDetails(fav.releaseId);
|
||
} else {
|
||
data = await window.getReleaseDetails(fav.releaseId);
|
||
}
|
||
|
||
items.push({
|
||
...data,
|
||
type: fav.Type
|
||
});
|
||
}
|
||
|
||
this.state.favorites.items = items;
|
||
this.state.loading = false;
|
||
this.update();
|
||
},
|
||
|
||
async removeFavoris(id, type) {
|
||
await window.removeFavorite(id, type);
|
||
this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id);
|
||
this.update();
|
||
},
|
||
|
||
async MainReleaseDetails(item) {
|
||
const res = await fetch(item.resource_url);
|
||
const json = await res.json();
|
||
|
||
const mainUrl = json.main_release_url;
|
||
|
||
const res2 = await fetch(mainUrl);
|
||
const releaseData = await res2.json();
|
||
|
||
console.log(releaseData);
|
||
window.location.hash = `#/release-details/release/${releaseData.id}`;
|
||
}
|
||
}
|
||
</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>
|