SAE_RIOT_2024/onzer.riot

121 lines
4.7 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-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}"/>
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-20 pl-6 grow"
2024-06-21 19:31:52 +02:00
placeholder={ 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"/>
2024-06-20 16:46:54 +02:00
</div>
</form>
2024-06-20 15:08:44 +02:00
</div>
2024-06-21 21:30:35 +02:00
<div class="flex flex-wrap px-12 justify-between mt-8">
2024-06-21 16:07:05 +02:00
<div each={ album in state.items } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center">
<p> { album.name } </p>
</div>
</div>
2024-06-20 15:08:44 +02:00
<script>
export default {
2024-06-21 15:16:40 +02:00
async onBeforeMount(props){
2024-06-21 16:22:31 +02:00
let data = await props.items;
2024-06-21 14:48:38 +02:00
this.state = {
placeholder: "Rechercher dans les albums",
2024-06-21 16:22:31 +02:00
items: data.results,
2024-06-21 19:31:52 +02:00
search: "albums",
filter: undefined,
id: undefined
2024-06-21 14:48:38 +02:00
};
2024-06-21 15:34:27 +02:00
this.paintButton();
2024-06-21 16:37:10 +02:00
this.album_style = "isActivate";
2024-06-21 02:01:15 +02:00
this.update();
2024-06-21 19:31:52 +02:00
},
edit(e) {
2024-06-21 19:42:44 +02:00
this.state.filter = e.target.value;
2024-06-21 19:44:55 +02:00
console.log(this.state.filter);
2024-06-21 19:42:44 +02:00
this.fetchData();
this.update();
2024-06-20 15:08:44 +02:00
},
click(e) {
e.preventDefault();
2024-06-21 14:32:31 +02:00
this.paintButton();
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:
2024-06-21 17:59:14 +02:00
this.state.placeholder = "Rechercher dans les songs";
2024-06-21 14:32:31 +02:00
this.song_style = "isActivate";
this.state.search = "songs";
}
2024-06-21 18:37:33 +02:00
this.fetchData()
2024-06-21 16:41:31 +02:00
this.update();
2024-06-21 01:28:13 +02:00
},
2024-06-21 18:37:33 +02:00
async fetchData(){
2024-06-21 19:44:55 +02:00
console.log(this.state.filter);
2024-06-21 19:35:58 +02:00
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
2024-06-21 18:37:33 +02:00
this.update({
2024-06-21 16:38:05 +02:00
items: data.results
2024-06-21 18:37:33 +02:00
});
2024-06-21 01:59:44 +02:00
},
2024-06-21 14:32:31 +02:00
paintButton(){
this.album_style = "isDeactivate";
this.artist_style = "isDeactivate";
this.song_style = "isDeactivate";
2024-06-21 19:35:58 +02:00
},
2024-06-21 19:38:47 +02:00
execQuery(table, filter = undefined, id = undefined){
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
let computeHttpRequest;
if(filter !== undefined){
switch(table){
case "songs":
computeHttpRequest = baseHttpRequest+table+"?title="+filter;
2024-06-21 19:48:06 +02:00
break;
2024-06-21 19:38:47 +02:00
default :
computeHttpRequest = baseHttpRequest+table+"?name="+filter;
}
} else if(id !== undefined) {
computeHttpRequest = baseHttpRequest+table+"/"+id;
} else {
computeHttpRequest = baseHttpRequest+table;
}
2024-06-21 19:44:55 +02:00
console.log(computeHttpRequest);
2024-06-21 19:38:47 +02:00
return fetch(computeHttpRequest).then(response => {
return response.json();
});
}
2024-06-20 15:08:44 +02:00
}
</script>
<style>
2024-06-21 16:37:10 +02:00
.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>