104 lines
3.5 KiB
Plaintext
104 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-4 border-solid border rounded-lg h-20 w-64 mt-2 {album_style}"/>
|
|
<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>
|
|
<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-20 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-20 w-48 mt-2"/>
|
|
</div>
|
|
</form>
|
|
</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>
|
|
export default {
|
|
onBeforeMount(props){
|
|
this.state = {
|
|
placeholder: "Rechercher dans les albums",
|
|
search: "albums"
|
|
};
|
|
this.paintButton();
|
|
this.album_style = "isActivate";
|
|
},
|
|
onMounted(){
|
|
this.update();
|
|
},
|
|
edit(e) {
|
|
|
|
},
|
|
click(e) {
|
|
e.preventDefault();
|
|
this.paintButton();
|
|
const old_search = this.state.search;
|
|
switch(e.target.value){
|
|
case "Albums":
|
|
this.state.placeholder = "Rechercher dans les albums";
|
|
this.album_style = "isActivate";
|
|
this.state.search = "albums";
|
|
break;
|
|
case "Artists":
|
|
this.state.placeholder = "Rechercher dans les artists";
|
|
this.artist_style = "isActivate";
|
|
this.state.search = "artists";
|
|
break;
|
|
default:
|
|
this.placeholder = "Rechercher dans les songs";
|
|
this.song_style = "isActivate";
|
|
this.state.search = "songs";
|
|
}
|
|
if(old_search != this.state.search){this.list();}
|
|
this.update();
|
|
},
|
|
async list(){
|
|
this.state = {
|
|
placeholder: "Rechercher dans les songs",
|
|
items: await this.fetchData()
|
|
};
|
|
this.update();
|
|
},
|
|
fetchData(){
|
|
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search+"").then(response => {
|
|
return response.json();
|
|
});
|
|
},
|
|
paintButton(){
|
|
this.album_style = "isDeactivate";
|
|
this.artist_style = "isDeactivate";
|
|
this.song_style = "isDeactivate";
|
|
}
|
|
}
|
|
</script>
|
|
<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>
|