SAE_RIOT_2024/onzer.riot

76 lines
3.6 KiB
Plaintext
Raw Normal View History

2024-06-20 15:08:44 +02:00
<onzer>
2024-06-20 16:46:54 +02:00
<div class="px-12">
2024-06-21 01:26:39 +02:00
<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="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"/>
<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"/>
2024-06-20 15:08:44 +02:00
</div>
2024-06-20 16:46:54 +02:00
<form onsubmit={ add }>
<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"
2024-06-20 15:08:44 +02:00
placeholder={ this.state.placeholder } onkeyup={ edit } />
2024-06-20 16:46:54 +02:00
<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"/>
</div>
</form>
2024-06-20 15:08:44 +02:00
</div>
<script>
export default {
2024-06-21 01:59:44 +02:00
onBeforeMount(props){
2024-06-21 01:26:39 +02:00
this.state.placeholder = 'Rechercher dans les albums';
2024-06-21 01:56:44 +02:00
2024-06-21 02:01:15 +02:00
this.test();
2024-06-21 01:45:49 +02:00
console.log(this.state);
2024-06-20 15:08:44 +02:00
},
2024-06-21 02:01:15 +02:00
onMounted(){
document.getElementById("album").style.backgroundColor = "#6EE7B7";
document.getElementById("album").style.borderColor = "#059669";
this.update();
},
2024-06-20 15:08:44 +02:00
edit(e) {
2024-06-21 00:21:46 +02:00
2024-06-20 15:08:44 +02:00
},
click(e) {
e.preventDefault();
2024-06-21 01:28:13 +02:00
this.clearButton();
2024-06-20 16:46:54 +02:00
switch (e.target.attributes.value.value) {
case 'Songs':
2024-06-21 01:26:39 +02:00
this.state.placeholder = "Rechercher dans les songs"
document.getElementById("song").style.backgroundColor = "#6EE7B7";
document.getElementById("song").style.borderColor = "#059669";
2024-06-20 16:46:54 +02:00
break;
case 'Artists':
this.state.placeholder = "Rechercher dans les artists";
2024-06-21 01:26:39 +02:00
document.getElementById("artist").style.backgroundColor = "#6EE7B7";
document.getElementById("artist").style.borderColor = "#059669";
2024-06-20 16:46:54 +02:00
break;
default:
this.state.placeholder = "Rechercher dans les albums";
2024-06-21 01:26:39 +02:00
document.getElementById("album").style.backgroundColor = "#6EE7B7";
document.getElementById("album").style.borderColor = "#059669";
2024-06-20 16:46:54 +02:00
};
this.update();
2024-06-21 01:28:13 +02:00
},
clearButton() {
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";
2024-06-21 01:35:24 +02:00
},
2024-06-21 01:59:44 +02:00
async test(){
this.state = {
placeholder: "caca",
items: await this.fetchSong()
};
},
fetchSong(){
2024-06-21 01:35:24 +02:00
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => {
2024-06-21 01:44:45 +02:00
return response.json();
2024-06-21 01:35:24 +02:00
});
2024-06-21 01:59:44 +02:00
},
2024-06-20 15:08:44 +02:00
}
</script>
</onzer>