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

projet

Browse Source
This commit is contained in:
Patrick FELIX-VIMALARATNAM
2025-03-28 16:27:07 +01:00
parent d2848447b6
commit 6d33ec5727
7 changed files with 216 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
components/app.riot
View File

@@ -1,8 +1,9 @@
<app>
<nav>
<a href="#"><i class="fa-solid fa-house"></i></a>
<a href="#/favoris/">Favoris</a>
<a href="#/login/"><i class="fa-solid fa-user"></i></a>
<a if={authUser} href="#/favoris/">Favoris</a>
<a if={!authUser} href="#/login/"><i class="fa-solid fa-user"></i></a>
<a if={authUser} href="#" onclick={() => Logout()}><i class="fa-solid fa-right-from-bracket"></i></a>
</nav>
<router base={base}>
@@ -17,11 +18,28 @@
<button type="submit">Rechercher</button>
</form>
<!-- Pagination -->
<div class="pagination" if={searchs.pagination && searchs.pagination.pages > 1}>
<button
onclick={() => this.changePage(searchs.pagination.page - 1)}
disabled={searchs.pagination.page === 1}>
◀ Précédent
</button>
<span>Page {searchs.pagination.page} / {searchs.pagination.pages}</span>
<button
onclick={() => this.changePage(searchs.pagination.page + 1)}
disabled={searchs.pagination.page === searchs.pagination.pages}>
Suivant ▶
</button>
</div>
<div if="{searchs.items.length > 0}">
<h3>Résultats ({searchs.pagination.items.total} résultats trouvés)</h3>
<div class="results-grid">
<div class="card" each="{item in searchs.items}">
<div if="{authUser}"><button onclick={addFavoris(item.id)}><i class="fa-regular fa-star"></i></button></div>
<a if={authUser} onclick={() => addFavoris(item.id)}><i class={item.isFavorite ? "fa-solid fa-star" : "fa-regular fa-star"}></i></a>
<a href={ "#/release-details/" + item.id}>
{item.title}
<img src="{item.cover_image} " alt="cover " />
@@ -55,33 +73,53 @@
base: 'https://dwarves.iut-fbleau.fr/~felix-vi/SAE/',
route: 'search',
authUser: null,
favoritesIds: [],
searchs: {
items: [],
pagination: [],
type: 'release',
type: null,
},
async search(e) {
e.preventDefault()
const type = e.target.type.value
const query = e.target.query.value
if (!query) return
const result = await window.discogsearch(query, type)
this.searchs.items = result.results
this.searchs.pagination = result.pagination
this.searchs.type = type
this.update()
async search(e, page = 1) {
if (e) e.preventDefault();
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);
const enrichedItems = [];
for (const item of result.results) {
const isFav = await window.isFavorite(item.id);
enrichedItems.push({ ...item, isFavorite: isFav }); // évite de muter directement item
}
this.searchs.items = enrichedItems;
this.searchs.pagination = result.pagination;
this.searchs.query = query;
this.searchs.type = type;
this.update();
},
changePage(page) {
this.search(null, page);
},
onMounted() {
observeAuthState(user => {
this.authUser = user
this.update()
async onMounted() {
observeAuthState(async user => {
this.authUser = user;
this.update();
});
},
addFavoris(id) {
window.favorite(id)
},
Logout(){
window.logout()
}
}
</script>
@@ -145,14 +183,19 @@
button {
color: white;
background: transparent;
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;
}
button:hover {
text-decoration: underline;
background-color: #1769aa;
text-decoration: none;
}
nav {
@@ -163,6 +206,14 @@
justify-content: space-between;
align-items: center;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
nav a {
margin: 0 10px;

78
components/favorites.riot
View File

@@ -1,33 +1,79 @@
<favorites>
<h2>Mes favoris</h2>
<ul>
<li each={item in state.favorites}>{item.title}</li>
</ul>
<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>
<p if={state.favorites.items.length===0 }>Aucun favori trouvé.</p>
<script>
export default {
state: {
favorites: []
favorites: {
items: []
}
},
async onMounted() {
const favoris = await window.getFavorites();
},
const ids = await window.getFavorites();
const items = [];
for (const id of ids) {
const release = await window.getReleaseDetails(id);
items.push(release);
}
this.state.favorites.items = items;
this.update();
}
}
</script>
<style>
ul {
list-style: none;
padding: 0;
max-width: 600px;
margin: auto;
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
ul li {
background: white;
margin: 0.5rem;
padding: 0.75rem;
.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);
border-radius: 5px;
}
.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>

2
components/login.riot
View File

@@ -11,7 +11,7 @@
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
login(email, password);
await login(email, password);
window.location.href = '#';
}
export default {

2
components/register.riot
View File

@@ -12,7 +12,7 @@
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
window.sign(email, password);
await window.sign(email, password);
window.location.href = '#';
},
onMounted() {

3
components/release-details.riot
View File

@@ -1,7 +1,8 @@
<release-details>
<div class="details">
<h2>{state.release.title}</h2>
<p if="{state.release.type !== 'artist'}">-{state.release.year}</p>
<p if="{state.release.type !== 'artist'}">{state.release.formats?.[0]?.name}-{state.release.year}</p>
<p if="{state.release.type !== 'artist'}">{state.release.community?.rating?.average}({state.release.community?.rating?.count}vote)</p>
<div class="release-content">
<img src="{state.release.thumb}" alt="{state.release.title}" />