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

create new branch

Browse Source
This commit is contained in:
Matthis FAUVET 2024-06-25 00:14:10 +02:00
parent 9570e3d1ae
commit 4c9af83342
2 changed files with 91 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -13,18 +13,18 @@
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script> <script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
<script type="riot" src="./onzer.riot"></script> <script type="riot" src="./onzer.riot"></script>
<script type="javascript" src="./onzer.riot"></script>
<script type="text/javascript"> <script type="text/javascript">
function fetch_data(){ async function fetch_data() {
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => { return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
return response.json(); return response.json();
} ) });
} }
riot.compile().then(() => { riot.compile().then(async () => {
riot.mount('onzer', {items: fetch_data()}); const data = await fetch_data();
}) riot.mount('onzer', { items: data });
});
</script> </script>
</body> </body>

99
onzer.riot
View File

@ -11,7 +11,7 @@
<form onsubmit={add}> <form onsubmit={add}>
<div class="flex flex-row items-baseline"> <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" <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} /> placeholder={state.placeholder} onkeyup={edit} />
<input type="button" value="Playlists" <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" /> class="ml-2 border-solid bg-emerald-300 border rounded-lg border-emerald-600 mb-4 h-20 w-48 mt-2" />
@ -27,78 +27,75 @@
<script> <script>
export default { export default {
async onBeforeMount(props){ state: {
let data = await props.items;
this.state = {
placeholder: "Rechercher dans les albums", placeholder: "Rechercher dans les albums",
items: data.results, items: [],
search: "albums", search: "albums",
filter: undefined, filter: undefined,
id: undefined id: undefined
}; },
this.paintButton(); onBeforeMount(props) {
this.album_style = "isActivate"; this.loadData(props.items);
this.update(); },
async loadData(items) {
const data = await items;
this.update({
state: {
...this.state,
items: data.results
},
album_style: "isActivate",
artist_style: "isDeactivate",
song_style: "isDeactivate"
});
}, },
edit(e) { edit(e) {
this.state.filter = e.target.value; this.update({
console.log(this.state.filter); state: {
...this.state,
filter: e.target.value
}
});
this.fetchData(); this.fetchData();
this.update();
}, },
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
this.paintButton(); const newState = {
switch(e.target.value){ ...this.state,
case "Albums": placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
this.state.placeholder = "Rechercher dans les albums"; search: e.target.value.toLowerCase(),
this.album_style = "isActivate"; filter: undefined
this.state.search = "albums"; };
break; this.update({
case "Artists": state: newState,
this.state.placeholder = "Rechercher dans les artists"; album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
this.artist_style = "isActivate"; artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
this.state.search = "artists"; song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
break; });
default: this.fetchData();
this.state.placeholder = "Rechercher dans les songs";
this.song_style = "isActivate";
this.state.search = "songs";
}
this.fetchData()
this.update();
}, },
async fetchData() { async fetchData() {
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id); const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.update({ this.update({
state: {
...this.state,
items: data.results items: data.results
}
}); });
}, },
paintButton(){
this.album_style = "isDeactivate";
this.artist_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){ computeHttpRequest = table === "songs" ?
case "songs": `${baseHttpRequest}${table}?title=${filter}` :
computeHttpRequest = baseHttpRequest+table+"?title="+filter; `${baseHttpRequest}${table}?name=${filter}`;
break;
default :
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 => { return fetch(computeHttpRequest).then(response => response.json());
return response.json();
});
} }
} }
</script> </script>