SAE_RIOT_2024/onzer.riot

121 lines
4.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">
2024-06-25 00:14:10 +02:00
<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-24 22:42:19 +02:00
2024-06-25 00:14:10 +02:00
<form onsubmit={add}>
2024-06-21 23:05:26 +02:00
<div class="flex flex-row items-baseline">
2024-06-25 00:14:10 +02:00
<input class="flex-grow-1 border-solid border bg-emerald-100 w-half rounded-lg border-emerald-300 h-20 pl-6 grow"
placeholder={state.placeholder} onkeyup={edit} />
2024-06-28 23:59:56 +02:00
<input type="button" value="Playlists" onclick={navigateToPlaylists}
2024-06-25 00:14:10 +02:00
class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
2024-06-21 23:05:26 +02:00
</div>
</form>
</div>
2024-06-20 15:08:44 +02:00
2024-06-24 22:34:48 +02:00
<div class="flex flex-wrap px-12 justify-between mt-8">
2024-06-25 00:14:10 +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>
2024-06-21 16:07:05 +02:00
</div>
</div>
2024-06-20 15:08:44 +02:00
<script>
export default {
2024-06-25 00:14:10 +02:00
state: {
placeholder: "Rechercher dans les albums",
items: [],
search: "albums",
filter: undefined,
id: undefined
},
onBeforeMount(props) {
this.loadData(props.items);
},
async loadData(items) {
const data = await items;
this.update({
state: {
...this.state,
items: data.results
},
album_style: "isActivate",
artist_style: "isDeactivate",
song_style: "isDeactivate"
});
2024-06-21 19:31:52 +02:00
},
edit(e) {
2024-06-25 00:14:10 +02:00
this.update({
state: {
...this.state,
filter: e.target.value
}
});
2024-06-21 19:42:44 +02:00
this.fetchData();
2024-06-20 15:08:44 +02:00
},
click(e) {
e.preventDefault();
2024-06-25 00:14:10 +02:00
const newState = {
...this.state,
placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
search: e.target.value.toLowerCase(),
filter: undefined
};
2024-06-21 18:37:33 +02:00
this.update({
2024-06-25 00:14:10 +02:00
state: newState,
album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
2024-06-21 18:37:33 +02:00
});
2024-06-25 00:14:10 +02:00
this.fetchData();
2024-06-21 01:59:44 +02:00
},
2024-06-25 00:14:10 +02:00
async fetchData() {
const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.update({
state: {
...this.state,
items: data.results
}
});
2024-06-21 19:35:58 +02:00
},
2024-06-25 00:14:10 +02:00
execQuery(table, filter = undefined, id = undefined) {
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
2024-06-21 19:38:47 +02:00
let computeHttpRequest;
2024-06-25 00:14:10 +02:00
if (filter !== undefined) {
computeHttpRequest = table === "songs" ?
`${baseHttpRequest}${table}?title=${filter}` :
`${baseHttpRequest}${table}?name=${filter}`;
} else if (id !== undefined) {
computeHttpRequest = `${baseHttpRequest}${table}/${id}`;
2024-06-21 19:38:47 +02:00
} else {
2024-06-25 00:14:10 +02:00
computeHttpRequest = `${baseHttpRequest}${table}`;
2024-06-21 19:38:47 +02:00
}
2024-06-25 00:14:10 +02:00
return fetch(computeHttpRequest).then(response => response.json());
2024-06-28 23:59:56 +02:00
},
navigateToPlaylists() {
route('/playlists');
2024-06-21 19:38:47 +02:00
}
2024-06-20 15:08:44 +02:00
}
</script>
<style>
2024-06-25 00:14:10 +02:00
.isActivate {
2024-06-21 16:37:10 +02:00
background-color: #6EE7B7;
border-color: #059669;
}
.isDeactivate {
background-color: #D1FAE5;
border-color: #6EE7B7;
}
.item {
background-color: #ECFDF5;
border-color: #6EE7B7;
width: 32%;
}
</style>
</onzer>