Async request

This commit is contained in:
Matthis FAUVET 2024-06-21 01:26:39 +02:00
parent 40043f0293
commit 667e57b80e
5 changed files with 50 additions and 11 deletions

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

12
.idea/SAE_RIOT_2024.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/SAE_RIOT_2024.iml" filepath="$PROJECT_DIR$/.idea/SAE_RIOT_2024.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
</component>
</project>

View File

@ -1,9 +1,9 @@
<onzer> <onzer>
<div class="px-12"> <div class="px-12">
<div class="flex-row"> <div class="flex-row mb-2">
<input type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/> <input id="album" type="button" onclick={ click } value="Albums" class="mr-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
<input type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/> <input id="artist" type="button" onclick={ click } value="Artists" class="mx-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
<input type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 mb-4 h-14 w-40 mt-2"/> <input id="song" type="button" onclick={ click } value="Songs" class="ml-2 border-solid bg-emerald-100 border rounded-lg border-emerald-300 h-14 w-40 mt-2"/>
</div> </div>
<form onsubmit={ add }> <form onsubmit={ add }>
<div class="flex flex-row items-baseline"> <div class="flex flex-row items-baseline">
@ -17,27 +17,35 @@
<script> <script>
export default { export default {
async onBeforeMount(props){ async onBeforeMount(props){
const response = await fetch('https://dwarves.iut-fbleau.fr/~fauvet/api/songs'); this.state.placeholder = 'Rechercher dans les albums';
console.log(response);
this.state.placeholder = "Rechercher dans les albums";
console.log(this.state.items);
}, },
edit(e) { edit(e) {
}, },
click(e) { click(e) {
e.preventDefault(); e.preventDefault();
document.getElementById("song").style.backgroundColor = "#D1FAE5";
document.getElementById("song").style.borderColor = "#6EE7B7";
document.getElementById("album").style.backgroundColor = "#D1FAE5";
document.getElementById("album").style.borderColor = "#6EE7B7";
document.getElementById("artist").style.backgroundColor = "#D1FAE5";
document.getElementById("artist").style.borderColor = "#6EE7B7";
switch (e.target.attributes.value.value) { switch (e.target.attributes.value.value) {
case 'Songs': case 'Songs':
this.state.placeholder = "Rechercher dans les songs"; this.state.placeholder = "Rechercher dans les songs"
document.getElementById("song").style.backgroundColor = "#6EE7B7";
document.getElementById("song").style.borderColor = "#059669";
break; break;
case 'Artists': case 'Artists':
this.state.placeholder = "Rechercher dans les artists"; this.state.placeholder = "Rechercher dans les artists";
document.getElementById("artist").style.backgroundColor = "#6EE7B7";
document.getElementById("artist").style.borderColor = "#059669";
break; break;
default: default:
this.state.placeholder = "Rechercher dans les albums"; this.state.placeholder = "Rechercher dans les albums";
document.getElementById("album").style.backgroundColor = "#6EE7B7";
document.getElementById("album").style.borderColor = "#059669";
}; };
this.update(); this.update();
} }