SAE_RIOT_2024/onzer.riot
2024-06-29 02:41:21 +02:00

174 lines
6.6 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={ 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 if={ state.items && state.items.length > 0 } class="flex flex-wrap px-12 justify-between mt-8">
<div each={ item in state.items.slice((state.page - 1) * 9, state.page * 9) } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center"
style={ state.search === 'songs' ? 'width: 100%;' : '' }>
<div class="text-center">
<p>{ item.name }</p>
</div>
</div>
</div>
<div if={ !state.items || state.items.length === 0 } class="no-results">
<p>Aucun résultat trouvé.</p>
</div>
<div class="pagination">
<button onclick={prevPage} disabled={state.page === 1}>Previous</button>
<span>Page {state.page} of {state.totalPages}</span>
<button onclick={nextPage} disabled={state.page === state.totalPages}>Next</button>
</div>
<script>
export default {
async onBeforeMount(props) {
let data = await props.items;
this.state = {
placeholder: "Rechercher dans les albums",
items: data.results || [],
search: "albums",
filter: undefined,
id: undefined,
page: 1,
totalPages: Math.ceil((data.results || []).length / 9),
showModal: false,
};
this.paintButton();
this.album_style = "isActivate";
this.update();
},
edit(e) {
this.state.filter = e.target.value;
this.state.page = 1;
this.fetchData();
this.update();
},
click(e) {
e.preventDefault();
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:
this.state.placeholder = "Rechercher dans les songs";
this.song_style = "isActivate";
this.state.search = "songs";
}
this.state.page = 1;
this.fetchData();
this.update();
},
async fetchData(){
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.state.items = data.results || [];
this.state.totalPages = Math.ceil((data.results || []).length / 9);
this.update();
},
paintButton(){
this.album_style = "isDeactivate";
this.artist_style = "isDeactivate";
this.song_style = "isDeactivate";
},
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;
break;
default :
computeHttpRequest = baseHttpRequest + table + "?name=" + filter;
}
} else if(id !== undefined) {
computeHttpRequest = baseHttpRequest + table + "/" + id;
} else {
computeHttpRequest = baseHttpRequest + table;
}
return fetch(computeHttpRequest).then(response => response.json());
},
prevPage() {
if (this.state.page > 1) {
this.state.page -= 1;
this.update();
}
},
nextPage() {
if (this.state.page < this.state.totalPages) {
this.state.page += 1;
this.update();
}
}
}
</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%;
}
.item[song] {
width: 100%;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 16px;
}
.pagination button {
background-color: #6EE7B7;
border: none;
border-radius: 4px;
padding: 8px 16px;
margin: 0 8px;
cursor: pointer;
}
.pagination button:disabled {
background-color: #D1FAE5;
cursor: not-allowed;
}
.no-results {
text-align: center;
margin-top: 16px;
font-size: 18px;
color: #6B7280;
}
</style>
</onzer>