fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fais de ta vie un rêve, et d'un rêve, une réalité.

Browse Source
This commit is contained in:
Matthis FAUVET 2024-06-21 13:36:40 +02:00
parent 8662895cff
commit b26d9f1bf8
1 changed files with 72 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
onzer.riot
View File

@ -1,77 +1,104 @@
<onzer> <onzer>
<div class="px-12"> <div class="px-12">
<div class="flex-row mb-2"> <div class="flex-row mb-2">
<input id="album" type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/> <input id="album" type="button" onclick={click} value="Albums"
<input id="artist" type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/> class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
<input id="song" type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/> <input id="artist" type="button" onclick={click} value="Artists"
class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {artist_style}"/>
<input id="song" type="button" onclick={click} value="Songs"
class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
</div> </div>
<form onsubmit={ add }> <form onsubmit={ add }>
<div class="flex flex-row items-baseline"> <div class="flex flex-row items-baseline">
<input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-14 pl-6 grow" <input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 border h-20 pl-6 grow"
placeholder={ this.state.placeholder } onkeyup={ edit } /> placeholder={ this.state.placeholder } onkeyup={ edit } />
<input type="button" value="Playlists" class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-14 w-40 mt-2"/> <input type="button" value="Playlists"
class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2"/>
</div> </div>
</form> </form>
</div> </div>
<div class="flex flex-wrap px-12 justify-between mt-8">
<div each={ album in state.items.results }
class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
<div>
<p> { album.name } </p>
</div>
</div>
</div>
<script> <script>
export default { export default {
onBeforeMount(props){ onBeforeMount(props){
this.state.placeholder = 'Rechercher dans les albums'; this.state = {
placeholder: "Rechercher dans les albums",
this.test(); search: "albums"
};
console.log(this.state);
this.paintButton();
this.album_style = "isActivate";
}, },
onMounted(){ onMounted(){
document.getElementById("album").style.backgroundColor = "#6EE7B7";
document.getElementById("album").style.borderColor = "#059669";
this.update(); this.update();
}, },
edit(e) { edit(e) {
}, },
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
this.clearButton(); this.paintButton();
switch (e.target.attributes.value.value) { const old_search = this.state.search;
case 'Songs': switch(e.target.value){
this.state.placeholder = "Rechercher dans les songs" case "Albums":
document.getElementById("song").style.backgroundColor = "#6EE7B7"; this.state.placeholder = "Rechercher dans les albums";
document.getElementById("song").style.borderColor = "#059669"; this.album_style = "isActivate";
break; this.state.search = "albums";
case 'Artists': break;
this.state.placeholder = "Rechercher dans les artists"; case "Artists":
document.getElementById("artist").style.backgroundColor = "#6EE7B7"; this.state.placeholder = "Rechercher dans les artists";
document.getElementById("artist").style.borderColor = "#059669"; this.artist_style = "isActivate";
break; this.state.search = "artists";
default: break;
this.state.placeholder = "Rechercher dans les albums"; default:
document.getElementById("album").style.backgroundColor = "#6EE7B7"; this.placeholder = "Rechercher dans les songs";
document.getElementById("album").style.borderColor = "#059669"; this.song_style = "isActivate";
}; this.state.search = "songs";
}
if(old_search != this.state.search){this.list();}
this.update(); this.update();
}, },
clearButton() { async list(){
document.getElementById("song").style.backgroundColor = "#D1FAE5";
document.getElementById("song").style.borderColor = "#6EE7B7";
document.getElementById("album").style.backgroundColor = "#D1FAE5";
document.getElementById("album").style.borderColor = "#6EE7B7";
document.getElementById("artist").style.backgroundColor = "#D1FAE5";
document.getElementById("artist").style.borderColor = "#6EE7B7";
},
async test(){
this.state = { this.state = {
placeholder: "caca", placeholder: "Rechercher dans les songs",
items: await this.fetchSong() items: await this.fetchData()
}; };
console.log(this.state); this.update();
}, },
fetchSong(){ fetchData(){
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => { return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search+"").then(response => {
return response.json(); return response.json();
}); });
}, },
paintButton(){
this.album_style = "isDeactivate";
this.artist_style = "isDeactivate";
this.song_style = "isDeactivate";
}
} }
</script> </script>
</onzer> <style>
.isActivate{
background-color: #6EE7B7;
border-color: #059669;
}
.isDeactivate {
background-color: #D1FAE5;
border-color: #6EE7B7;
}
.item {
background-color: #ECFDF5;
border-color: #6EE7B7;
width: 32%;
}
</style>
</onzer>