added possibility to filter datas
This commit is contained in:
parent
6a306b263b
commit
19e6dbd052
19
model.js
Normal file
19
model.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
function execQuery(table, filter = "all", id = -1){
|
||||||
|
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
|
||||||
|
let computeHttpRequest;
|
||||||
|
if(filter !== undefined){
|
||||||
|
switch(table){
|
||||||
|
case "songs":
|
||||||
|
computeHttpRequest = baseHttpRequest+table+"?title="+filter;
|
||||||
|
default :
|
||||||
|
computeHttpRequest = baseHttpRequest+table+"?name="+filter;
|
||||||
|
}
|
||||||
|
} else if(id !== undefined) {
|
||||||
|
computeHttpRequest = baseHttpRequest+table+"/"+id;
|
||||||
|
} else {
|
||||||
|
computeHttpRequest = baseHttpRequest+table;
|
||||||
|
}
|
||||||
|
return fetch(computeHttpRequest).then(response => {
|
||||||
|
return response.json();
|
||||||
|
});
|
||||||
|
};
|
18
onzer.riot
18
onzer.riot
@ -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 border h-20 pl-6 grow"
|
||||||
placeholder={ state.placeholder }/>
|
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"/>
|
||||||
</div>
|
</div>
|
||||||
@ -25,17 +25,24 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import "./model";
|
||||||
|
|
||||||
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,
|
||||||
|
id: undefined
|
||||||
};
|
};
|
||||||
this.paintButton();
|
this.paintButton();
|
||||||
this.album_style = "isActivate";
|
this.album_style = "isActivate";
|
||||||
this.update();
|
this.update();
|
||||||
|
},
|
||||||
|
edit(e) {
|
||||||
|
|
||||||
},
|
},
|
||||||
click(e) {
|
click(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -60,16 +67,11 @@
|
|||||||
this.update();
|
this.update();
|
||||||
},
|
},
|
||||||
async fetchData(){
|
async fetchData(){
|
||||||
let data = await this.execQuery();
|
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
||||||
this.update({
|
this.update({
|
||||||
items: data.results
|
items: data.results
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
execQuery(){
|
|
||||||
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/"+this.state.search).then(response => {
|
|
||||||
return response.json();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
paintButton(){
|
paintButton(){
|
||||||
this.album_style = "isDeactivate";
|
this.album_style = "isDeactivate";
|
||||||
this.artist_style = "isDeactivate";
|
this.artist_style = "isDeactivate";
|
||||||
|
Loading…
Reference in New Issue
Block a user