Fais de ta vie un rêve, et d'un rêve, une réalité.
This commit is contained in:
parent
8662895cff
commit
b26d9f1bf8
117
onzer.riot
117
onzer.riot
@ -1,77 +1,104 @@
|
||||
<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"/>
|
||||
<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-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 } />
|
||||
<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>
|
||||
</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';
|
||||
|
||||
this.test();
|
||||
|
||||
console.log(this.state);
|
||||
this.state = {
|
||||
placeholder: "Rechercher dans les albums",
|
||||
search: "albums"
|
||||
};
|
||||
|
||||
this.paintButton();
|
||||
this.album_style = "isActivate";
|
||||
},
|
||||
onMounted(){
|
||||
document.getElementById("album").style.backgroundColor = "#6EE7B7";
|
||||
document.getElementById("album").style.borderColor = "#059669";
|
||||
this.update();
|
||||
},
|
||||
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.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();
|
||||
},
|
||||
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 test(){
|
||||
async list(){
|
||||
this.state = {
|
||||
placeholder: "caca",
|
||||
items: await this.fetchSong()
|
||||
placeholder: "Rechercher dans les songs",
|
||||
items: await this.fetchData()
|
||||
};
|
||||
console.log(this.state);
|
||||
this.update();
|
||||
},
|
||||
fetchSong(){
|
||||
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/songs").then(response => {
|
||||
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>
|
||||
</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>
|
||||
|
Loading…
Reference in New Issue
Block a user