fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination faite, j'ai pas séparé le css oupsi

Browse Source
This commit is contained in:
Heloise BOUSSON 2024-06-25 20:26:53 +02:00
parent 9570e3d1ae
commit a0b5103978
1 changed files with 64 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
onzer.riot
View File

@ -1,12 +1,12 @@
<onzer> <onzer>
<div class="px-12"> <div class="px-12">
<div class="flex-row mb-2"> <div class="flex-row mb-2">
<input id="album" type="button" onclick={click} value="Albums" <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}"/> 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" <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}"/> 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" <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}"/> class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}"/>
</div> </div>
<form onsubmit={ add }> <form onsubmit={ add }>
@ -20,21 +20,29 @@
</div> </div>
<div class="flex flex-wrap px-12 justify-between mt-8"> <div class="flex flex-wrap px-12 justify-between mt-8">
<div each={ album in state.items } class="item mb-4 border border-solid rounded-lg h-64 flex justify-center items-center"> <div each={ album 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">
<p> { album.name } </p> <p> { album.name } </p>
</div> </div>
</div> </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> <script>
export default { export default {
async onBeforeMount(props){ async onBeforeMount(props){
let data = await props.items; let data = await props.items;
this.state = { this.state = {
placeholder: "Rechercher dans les albums", placeholder: "Rechercher dans les albums",
items: data.results, items: data.results,
search: "albums", search: "albums",
filter: undefined, filter: undefined,
id: undefined id: undefined,
page: 1,
totalPages: Math.ceil(data.results.length / 9),
}; };
this.paintButton(); this.paintButton();
this.album_style = "isActivate"; this.album_style = "isActivate";
@ -42,16 +50,16 @@
}, },
edit(e) { edit(e) {
this.state.filter = e.target.value; this.state.filter = e.target.value;
console.log(this.state.filter); this.state.page = 1;
this.fetchData(); this.fetchData();
this.update(); this.update();
}, },
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
this.paintButton(); this.paintButton();
switch(e.target.value){ switch(e.target.value){
case "Albums": case "Albums":
this.state.placeholder = "Rechercher dans les albums"; this.state.placeholder = "Rechercher dans les albums";
this.album_style = "isActivate"; this.album_style = "isActivate";
this.state.search = "albums"; this.state.search = "albums";
break; break;
@ -64,15 +72,16 @@
this.state.placeholder = "Rechercher dans les songs"; this.state.placeholder = "Rechercher dans les songs";
this.song_style = "isActivate"; this.song_style = "isActivate";
this.state.search = "songs"; this.state.search = "songs";
} }
this.fetchData() this.state.page = 1;
this.fetchData();
this.update(); this.update();
}, },
async fetchData(){ async fetchData(){
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id); let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.update({ this.state.items = data.results;
items: data.results this.state.totalPages = Math.ceil(data.results.length / 9);
}); this.update();
}, },
paintButton(){ paintButton(){
this.album_style = "isDeactivate"; this.album_style = "isDeactivate";
@ -80,25 +89,34 @@
this.song_style = "isDeactivate"; this.song_style = "isDeactivate";
}, },
execQuery(table, filter = undefined, id = undefined){ execQuery(table, filter = undefined, id = undefined){
console.log("CCACA"); let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
let computeHttpRequest; let computeHttpRequest;
if(filter !== undefined){ if(filter !== undefined){
switch(table){ switch(table){
case "songs": case "songs":
computeHttpRequest = baseHttpRequest+table+"?title="+filter; computeHttpRequest = baseHttpRequest + table + "?title=" + filter;
break; break;
default : default :
computeHttpRequest = baseHttpRequest+table+"?name="+filter; computeHttpRequest = baseHttpRequest + table + "?name=" + filter;
} }
} else if(id !== undefined) { } else if(id !== undefined) {
computeHttpRequest = baseHttpRequest+table+"/"+id; computeHttpRequest = baseHttpRequest + table + "/" + id;
} else { } else {
computeHttpRequest = baseHttpRequest+table; 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();
} }
return fetch(computeHttpRequest).then(response => {
return response.json();
});
} }
} }
</script> </script>
@ -116,5 +134,23 @@
border-color: #6EE7B7; border-color: #6EE7B7;
width: 32%; width: 32%;
} }
.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;
}
</style> </style>
</onzer> </onzer>