modified code
This commit is contained in:
parent
b26d9f1bf8
commit
7e2bb9a22e
12
index.html
12
index.html
@ -4,7 +4,6 @@
|
||||
<meta charset="utf-8">
|
||||
<title>Riot App</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script type="javascript" src="model.js"></script>
|
||||
</head>
|
||||
<body class="bg-neutral-50">
|
||||
|
||||
@ -17,8 +16,17 @@
|
||||
<script type="javascript" src="./onzer.riot"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
async function fetch_data(){
|
||||
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
|
||||
return response.json();
|
||||
} )
|
||||
}
|
||||
|
||||
riot.compile().then(() => {
|
||||
riot.mount('onzer');
|
||||
riot.mount('onzer', {
|
||||
items : await fetch_data()
|
||||
}
|
||||
);
|
||||
})
|
||||
</script>
|
||||
|
||||
|
5
model.js
5
model.js
@ -1,5 +0,0 @@
|
||||
function getSongs(){
|
||||
return fetch(`https://dwarves.iut-fbleau.fr/~fauvet/api/songs`).then(response => {
|
||||
return response;
|
||||
})
|
||||
}
|
65
onzer.riot
65
onzer.riot
@ -30,13 +30,12 @@
|
||||
<script>
|
||||
export default {
|
||||
onBeforeMount(props){
|
||||
this.state = {
|
||||
placeholder: "Rechercher dans les albums",
|
||||
search: "albums"
|
||||
};
|
||||
|
||||
this.paintButton();
|
||||
this.album_style = "isActivate";
|
||||
this.state = {
|
||||
placeholder: "Rechercher dans les albums",
|
||||
search: "albums"
|
||||
};
|
||||
this.paintButton();
|
||||
this.album_style = "isActivate";
|
||||
},
|
||||
onMounted(){
|
||||
this.update();
|
||||
@ -46,44 +45,44 @@
|
||||
},
|
||||
click(e) {
|
||||
e.preventDefault();
|
||||
this.paintButton();
|
||||
const old_search = this.state.search;
|
||||
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.placeholder = "Rechercher dans les songs";
|
||||
this.song_style = "isActivate";
|
||||
this.state.search = "songs";
|
||||
}
|
||||
if(old_search != this.state.search){this.list();}
|
||||
this.update();
|
||||
this.paintButton();
|
||||
const old_search = this.state.search;
|
||||
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.placeholder = "Rechercher dans les songs";
|
||||
this.song_style = "isActivate";
|
||||
this.state.search = "songs";
|
||||
}
|
||||
if(old_search != this.state.search){this.list();}
|
||||
this.update();
|
||||
},
|
||||
async list(){
|
||||
this.state = {
|
||||
placeholder: "Rechercher dans les songs",
|
||||
items: await this.fetchData()
|
||||
};
|
||||
this.update();
|
||||
this.update();
|
||||
},
|
||||
fetchData(){
|
||||
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search+"").then(response => {
|
||||
return response.json();
|
||||
});
|
||||
},
|
||||
paintButton(){
|
||||
this.album_style = "isDeactivate";
|
||||
this.artist_style = "isDeactivate";
|
||||
this.song_style = "isDeactivate";
|
||||
}
|
||||
paintButton(){
|
||||
this.album_style = "isDeactivate";
|
||||
this.artist_style = "isDeactivate";
|
||||
this.song_style = "isDeactivate";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
Loading…
Reference in New Issue
Block a user