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 13:53:35 +01:00
commit d2848447b6
8 changed files with 521 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
components/app.riot Normal file
View File

@@ -0,0 +1,173 @@
<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>
</nav>
<router base={base}>
<route path="(#)?">
<form onsubmit="{search}">
<select name="type">
<option value="release">Release</option>
<option value="master">Master</option>
<option value="artist">Artist</option>
</select>
<input type="text" name="query" placeholder="Rechercher..." />
<button type="submit">Rechercher</button>
</form>
<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 href={ "#/release-details/" + item.id}>
{item.title}
<img src="{item.cover_image} " 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>
</route>
<route path="#/release-details/:id">
<release-details releaseid={route.params.id}></release-details>
</route>
<route path="#/favoris">
<favorites></favorites>
</route>
<route path="#/login">
<login></login>
</route>
<route path="#/register">
<register></register>
</route>
</router>
<script>
export default {
base: 'https://dwarves.iut-fbleau.fr/~felix-vi/SAE/',
route: 'search',
authUser: null,
searchs: {
items: [],
pagination: [],
type: 'release',
},
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()
},
onMounted() {
observeAuthState(user => {
this.authUser = user
this.update()
});
},
addFavoris(id) {
window.favorite(id)
}
}
</script>
<style>
#view {
padding: 1rem;
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: transparent;
border: none;
font-weight: bold;
cursor: pointer;
}
button:hover {
text-decoration: underline;
}
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;
}
</style>
</app>

33
components/favorites.riot Normal file
View File

@@ -0,0 +1,33 @@
<favorites>
<h2>Mes favoris</h2>
<ul>
<li each={item in state.favorites}>{item.title}</li>
</ul>
<script>
export default {
state: {
favorites: []
},
async onMounted() {
const favoris = await window.getFavorites();
},
}
</script>
<style>
ul {
list-style: none;
padding: 0;
max-width: 600px;
margin: auto;
}
ul li {
background: white;
margin: 0.5rem;
padding: 0.75rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
</style>
</favorites>

49
components/login.riot Normal file
View File

@@ -0,0 +1,49 @@
<login>
<h2>Connexion</h2>
<form onsubmit={loginUser}>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Mot de passe" required>
<button>Se connecter</button>
</form>
<p><a href="#/register">Pas encore de compte ?</a></p>
<script>
async function loginUser(e) {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
login(email, password);
window.location.href = '#';
}
export default {
loginUser
}
</script>
<style>
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
gap: 10px;
margin-top: 2rem;
}
input,
button {
padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
background-color: #1976d2;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #135ba1;
}
</style>
</login>

57
components/register.riot Normal file
View File

@@ -0,0 +1,57 @@
<register>
<h2>Inscription</h2>
<form onsubmit={registerUser}>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Mot de passe" required>
<button>S'inscrire</button>
</form>
<p><a href="#/login">Déjà un compte ?</a></p>
<script>
export default {
async registerUser(e) {
e.preventDefault();
const email = e.target.email.value;
const password = e.target.password.value;
window.sign(email, password);
window.location.href = '#';
},
onMounted() {
observeAuthState(user => {
if (user) {
console.log("Connecté :", user.email);
} else {
console.log("Déconnecté");
}
});
}
}
</script>
<style>
form {
display: flex;
flex-direction: column;
max-width: 300px;
margin: auto;
gap: 10px;
margin-top: 2rem;
}
input,
button {
padding: 0.5rem;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
background-color: #1976d2;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #135ba1;
}
</style>
</register>

68
components/release-details.riot Normal file
View File

@@ -0,0 +1,68 @@
<release-details>
<div class="details">
<h2>{state.release.title}</h2>
<p if="{state.release.type !== 'artist'}">-{state.release.year}</p>
<div class="release-content">
<img src="{state.release.thumb}" alt="{state.release.title}" />
<div if="{state.release.type !== 'artist'}">
<b>Track list</b>
<ul>
<li each="{track in state.release.tracklist}">
{track.position} - {track.title} - {track.duration}
</li>
</ul>
<div class="genres">
<span each="{genre in state.release.genres}">{genre}</span>
</div>
</div>
<div if="{state.release.type === 'artist'}">
{state.release.profile}
</div>
</div>
</div>
<script>
export default {
props: ["releaseid"],
state: {
release: [],
},
async onMounted() {
const id = this.props.releaseid
this.state.release = await window.getReleaseDetails(id)
console.log("resultat", this.state.release)
this.update()
}
}
</script>
<style>
.release-content {
display: flex;
gap: 20px;
}
ul {
padding-left: 20px;
}
li {
margin-bottom: 5px;
}
.genres span {
display: inline-block;
background: #333;
color: #fff;
padding: 3px 7px;
border-radius: 3px;
margin-right: 5px;
font-size: 0.9em;
}
</style>
</release-details>

37
index.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Music App RiotJS</title>
<script src="https://unpkg.com/riot@9.4.5/riot+compiler.min.js"></script>
<script src="https://unpkg.com/@riotjs/route@9.2.1/index.umd.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
<script src=""></script>
<script src="./components/app.riot" type="riot"></script>
<script src="./components/release-details.riot" type="riot"> </script>
<script src="./components/register.riot" type="riot"> </script>
<script src="./components/favorites.riot" type="riot"> </script>
<script src="./components/login.riot" type="riot"> </script>
<script src="./services/discogsService.js" type="module"> </script>
<script src="./services/firebaseService.js" type="module"> </script>
</head>
<body>
<!-- Mount point Riot -->
<app></app>
<script type="module">
riot.register('router',route.Router); riot.register('route',route.Route); riot.compile().then(() => {riot.mount("app")});
</script>
</body>
</html>

20
services/discogsService.js Normal file
View File

@@ -0,0 +1,20 @@
const baseUrlsearch = 'https://api.discogs.com/database/search';
const baseUrlrelease = 'https://api.discogs.com/releases/';
const key = 'NWmMhlPAbPlVnaDqVGyX';
const secret = 'hZPaoBiGiSwlCjARrbOICOpDuITwyJAm';
const perPage = 100;
export async function discogsearch(query, type) {
const url = `${baseUrlsearch}?q=${query}&type=${type}&per_page=${perPage}&key=${key}&secret=${secret}`;
const response = await fetch(url);
return await response.json();
}
export async function getReleaseDetails(releaseId) {
const response = await fetch(`${baseUrlrelease}${releaseId}`);
return await response.json();
}
window.getReleaseDetails = getReleaseDetails;
window.discogsearch = discogsearch;

84
services/firebaseService.js Normal file
View File

@@ -0,0 +1,84 @@
// Firebase V9 ESM seulement
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.1/firebase-app.js";
import {
getAuth,
createUserWithEmailAndPassword,
signInWithEmailAndPassword,
onAuthStateChanged,
signOut
} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-auth.js";
import {
getFirestore,
collection,
addDoc,
doc,
setDoc
} from "https://www.gstatic.com/firebasejs/9.6.1/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyBXKB6AGbTN95lOLrIVpWrSIK_uL_C6GUA",
authDomain: "music-app-riotjs.firebaseapp.com",
projectId: "music-app-riotjs",
storageBucket: "music-app-riotjs.firebasestorage.app",
messagingSenderId: "483729603961",
appId: "1:483729603961:web:122965ce7dbeb2e85103a8",
measurementId: "G-18P6WCT80"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export async function login(email, password) {
await signInWithEmailAndPassword(auth, email, password);
}
export async function sign(email, password) {
const userCred = await createUserWithEmailAndPassword(auth, email, password);
await adduserdata(userCred.user.email);
}
export async function adduserdata(email_user) {
await addDoc(collection(db, "users"), {
email: email_user
});
}
export async function logout() {
await signOut(auth);
}
window.observeAuthState = function(callback) {
onAuthStateChanged(auth, callback);
};
export async function favorite(releaseId) {
const user = auth.currentUser;
if (!user) return;
await addDoc(collection(db, "users", user.email, "favorites"), {
id: releaseId
});
}
export async function getFavorites() {
const user = auth.currentUser;
if (!user) {
console.warn("Aucun utilisateur connecté.");
return [];
}
const userDocRef = doc(db, "users", user.email);
const favsCollection = collection(userDocRef, "favorites");
const snapshot = await getDocs(favsCollection);
const favorites = snapshot.docs.map(doc => doc.data());
return favorites;
}
window.login = login;
window.sign = sign;
window.logout = logout;
window.favorite = favorite;
window.getFavorites = getFavorites;