From eabc11d2cc772dc21283645972130375e1630d03 Mon Sep 17 00:00:00 2001 From: Felix-Vimalaratnam Date: Mon, 31 Mar 2025 13:15:47 +0200 Subject: [PATCH] quasiment fini --- components/app.riot | 174 ++++++++++++++++++------------- components/favorites.riot | 177 +++++++++++++++++++------------- components/login.riot | 34 ++++-- components/register.riot | 43 ++++---- components/release-details.riot | 131 ++++++++++++++++++----- index.html | 3 +- services/discogsService.js | 14 +++ 7 files changed, 374 insertions(+), 202 deletions(-) diff --git a/components/app.riot b/components/app.riot index f2b243f..24b425e 100644 --- a/components/app.riot +++ b/components/app.riot @@ -40,10 +40,10 @@
- item.isFavorite ? this.removeFavoris(item.id) : this.addFavoris(item.id)}> + item.isFavorite ? this.removeFavoris(item.id) : this.addFavoris(item.id)}> - + {item.title} cover
@@ -51,13 +51,14 @@
{item.community.want} {item.community.have}
 +
- - + + @@ -80,7 +81,8 @@ searchs: { items: [], pagination: [], - type: null, + type: "release", + query: "" }, async search(e, page = 1) { @@ -88,7 +90,6 @@ const type = e?.target?.type?.value || this.searchs.type; const query = e?.target?.query?.value || this.searchs.query; - if (!query) return; const result = await window.discogsearch(query, type, page); console.log(result); @@ -119,6 +120,8 @@ this.authUser = user; this.update(); }); + this.search(null, 1); + this.update(); }, addFavoris(id) { @@ -153,81 +156,84 @@ max-width: 1200px; margin: auto; } - + form { display: flex; gap: 10px; margin-bottom: 20px; - } - - .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); - } - - footer { - justify-content: space-between; - align-items: center; - } - - img { - width: 100%; - height: auto; - border-radius: 4px; - margin-bottom: 10px; - } - - h4 { - font-size: 1rem; - margin: 5px 0; - } - - a { - text-decoration: none; - color: #007bff; - } - - nav { - display: flex; - justify-content: space-around; - background: #1976d2; - padding: 1rem; - } - - button { - color: white; - background-color: #2196f3; - border: none; - font-weight: bold; - cursor: pointer; - padding: 0.5em 1em; - border-radius: 5px; - margin: 0.5em; - transition: background-color 0.3s ease; + flex-wrap: wrap; } - button:hover { - background-color: #1769aa; - text-decoration: none; + form select, + form input { + padding: 0.6rem; + border: 1px solid #ccc; + border-radius: 6px; + font-size: 1rem; } - - nav { + + form button { background-color: #1976d2; - padding: 1rem; color: white; + padding: 0.6rem 1.2rem; + border: none; + border-radius: 6px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s; + } + + form button:hover { + background-color: #125aa3; + } + + .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-between; - align-items: center; + justify-content: space-around; + font-size: 0.9rem; + color: #666; + margin-top: 0.5rem; + } + + .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); } .pagination { @@ -237,11 +243,35 @@ gap: 1rem; margin-bottom: 2rem; } - + + .pagination button { + background-color: #1976d2; + color: white; + padding: 0.5rem 1rem; + border: none; + border-radius: 6px; + cursor: pointer; + transition: background-color 0.3s; + } + + .pagination button:hover { + background-color: #125aa3; + } + + nav { + background-color: #1976d2; + padding: 1rem; + color: white; + display: flex; + justify-content: space-between; + align-items: center; + } + nav a { margin: 0 10px; color: white; text-decoration: none; } + \ No newline at end of file diff --git a/components/favorites.riot b/components/favorites.riot index 38b0542..8c96b8e 100644 --- a/components/favorites.riot +++ b/components/favorites.riot @@ -1,79 +1,114 @@ -

Mes favoris

+

Mes favoris

-
0}> -
-
- - cover -

{item.title}

-
-

{item.year}

-
- {item.community?.want} {item.community?.have} -
-
- -
-
+
+

Chargement des favoris...

+
+ +
+

Aucun favori trouvé.

+
+ + -

Aucun favori trouvé.

+ + this.state.favorites.items = items; + this.state.loading = false; + this.update(); + }, - - \ No newline at end of file + async removeFavoris(id) { + await window.removeFavorite(id); + this.state.favorites.items = this.state.favorites.items.filter(item => item.id !== id); + this.update(); + } + } + + + + diff --git a/components/login.riot b/components/login.riot index fdbaaf3..71e2a15 100644 --- a/components/login.riot +++ b/components/login.riot @@ -22,28 +22,40 @@ form { display: flex; flex-direction: column; - max-width: 300px; + gap: 1rem; + max-width: 400px; margin: auto; - gap: 10px; - margin-top: 2rem; + background: white; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); } - - input, - button { - padding: 0.5rem; - border-radius: 4px; + + input { + padding: 0.75rem; border: 1px solid #ccc; + border-radius: 6px; + font-size: 1rem; } - + button { background-color: #1976d2; color: white; + padding: 0.75rem; border: none; + border-radius: 6px; + font-weight: bold; cursor: pointer; + transition: background-color 0.3s ease; } - + button:hover { - background-color: #135ba1; + background-color: #125aa3; + } + + p { + text-align: center; + margin-top: 1rem; } \ No newline at end of file diff --git a/components/register.riot b/components/register.riot index f0fb337..b7a5c16 100644 --- a/components/register.riot +++ b/components/register.riot @@ -14,15 +14,6 @@ const password = e.target.password.value; await window.sign(email, password); window.location.href = '#'; - }, - onMounted() { - observeAuthState(user => { - if (user) { - console.log("Connecté :", user.email); - } else { - console.log("Déconnecté"); - } - }); } } @@ -30,28 +21,40 @@ form { display: flex; flex-direction: column; - max-width: 300px; + gap: 1rem; + max-width: 400px; margin: auto; - gap: 10px; - margin-top: 2rem; + background: white; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.08); } - - input, - button { - padding: 0.5rem; - border-radius: 4px; + + input { + padding: 0.75rem; border: 1px solid #ccc; + border-radius: 6px; + font-size: 1rem; } - + button { background-color: #1976d2; color: white; + padding: 0.75rem; border: none; + border-radius: 6px; + font-weight: bold; cursor: pointer; + transition: background-color 0.3s ease; } - + button:hover { - background-color: #135ba1; + background-color: #125aa3; + } + + p { + text-align: center; + margin-top: 1rem; } \ No newline at end of file diff --git a/components/release-details.riot b/components/release-details.riot index a9ed9fd..76a30b5 100644 --- a/components/release-details.riot +++ b/components/release-details.riot @@ -1,12 +1,17 @@

{state.release.title}

-

{state.release.formats?.[0]?.name}-{state.release.year}

-

{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)

+

{state.release.formats?.[0]?.name}-{state.release.year}

+

{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)

-
- {state.release.title} -
+

{state.release.year}

+ +

{state.release.name}

+ +
+ {state.release.title} + {state.release.title} +
Track list
  • @@ -15,10 +20,10 @@
- {genre} + {genre}
-
+
{state.release.profile}
@@ -26,15 +31,25 @@ \ No newline at end of file diff --git a/index.html b/index.html index 9ce9b93..ecaf430 100644 --- a/index.html +++ b/index.html @@ -5,12 +5,11 @@ Music App RiotJS - + - diff --git a/services/discogsService.js b/services/discogsService.js index 09480cf..b062cca 100644 --- a/services/discogsService.js +++ b/services/discogsService.js @@ -1,5 +1,7 @@ const baseUrlsearch = 'https://api.discogs.com/database/search'; const baseUrlrelease = 'https://api.discogs.com/releases/'; +const baseUrlmaster = 'https://api.discogs.com/masters/'; +const baseUrlartist = 'https://api.discogs.com/artists/'; const key = 'NWmMhlPAbPlVnaDqVGyX'; const secret = 'hZPaoBiGiSwlCjARrbOICOpDuITwyJAm'; const perPage = 100; @@ -16,5 +18,17 @@ export async function getReleaseDetails(releaseId) { return await response.json(); } +export async function getMasterDetails(masterId) { + const response = await fetch(`${baseUrlmaster}${masterId}`); + return await response.json(); +} + +export async function getArtistDetails(artistId) { + const response = await fetch(`${baseUrlartist}${artistId}`); + return await response.json(); +} + window.getReleaseDetails = getReleaseDetails; +window.getMasterDetails = getMasterDetails; +window.getArtistDetails = getArtistDetails; window.discogsearch = discogsearch; \ No newline at end of file