71 lines
3.5 KiB
Plaintext
71 lines
3.5 KiB
Plaintext
<onzer>
|
|
<div class="px-12">
|
|
<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"/>
|
|
</div>
|
|
<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"
|
|
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"/>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
async onBeforeMount(props){
|
|
document.getElementById("album").style.backgroundColor = "#6EE7B7";
|
|
document.getElementById("album").style.borderColor = "#059669";
|
|
|
|
this.state.placeholder = 'Rechercher dans les albums';
|
|
this.state = {
|
|
placeholder: "caca",
|
|
items: await this.fetchSong()
|
|
};
|
|
|
|
console.log(this.state);
|
|
},
|
|
edit(e) {
|
|
|
|
},
|
|
click(e) {
|
|
e.preventDefault();
|
|
this.clearButton();
|
|
switch (e.target.attributes.value.value) {
|
|
case 'Songs':
|
|
this.state.placeholder = "Rechercher dans les songs"
|
|
document.getElementById("song").style.backgroundColor = "#6EE7B7";
|
|
document.getElementById("song").style.borderColor = "#059669";
|
|
break;
|
|
case 'Artists':
|
|
this.state.placeholder = "Rechercher dans les artists";
|
|
document.getElementById("artist").style.backgroundColor = "#6EE7B7";
|
|
document.getElementById("artist").style.borderColor = "#059669";
|
|
break;
|
|
default:
|
|
this.state.placeholder = "Rechercher dans les albums";
|
|
document.getElementById("album").style.backgroundColor = "#6EE7B7";
|
|
document.getElementById("album").style.borderColor = "#059669";
|
|
};
|
|
this.update();
|
|
},
|
|
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";
|
|
},
|
|
async fetchSong(){
|
|
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => {
|
|
return response.json();
|
|
});
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</onzer> |