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>
|
||||
Reference in New Issue
Block a user