projet
This commit is contained in:
173
components/app.riot
Normal file
173
components/app.riot
Normal 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
33
components/favorites.riot
Normal 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
49
components/login.riot
Normal 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
57
components/register.riot
Normal 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
68
components/release-details.riot
Normal 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
37
index.html
Normal 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
20
services/discogsService.js
Normal 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
84
services/firebaseService.js
Normal 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;
|
||||
Reference in New Issue
Block a user