118 lines
4.5 KiB
Plaintext
118 lines
4.5 KiB
Plaintext
<onzer>
|
|
<div class="px-12">
|
|
<div class="flex-row mb-2">
|
|
<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}" />
|
|
<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}" />
|
|
<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}" />
|
|
</div>
|
|
|
|
<form onsubmit={add}>
|
|
<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 h-20 pl-6 grow"
|
|
placeholder={state.placeholder} onkeyup={edit} />
|
|
<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" />
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<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">
|
|
<p>{album.name}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
state: {
|
|
placeholder: "Rechercher dans les albums",
|
|
items: [],
|
|
search: "albums",
|
|
filter: undefined,
|
|
id: undefined
|
|
},
|
|
onBeforeMount(props) {
|
|
this.loadData(props.items);
|
|
},
|
|
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) {
|
|
this.update({
|
|
state: {
|
|
...this.state,
|
|
filter: e.target.value
|
|
}
|
|
});
|
|
this.fetchData();
|
|
},
|
|
click(e) {
|
|
e.preventDefault();
|
|
const newState = {
|
|
...this.state,
|
|
placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
|
|
search: e.target.value.toLowerCase(),
|
|
filter: undefined
|
|
};
|
|
this.update({
|
|
state: newState,
|
|
album_style: e.target.value === "Albums" ? "isActivate" : "isDeactivate",
|
|
artist_style: e.target.value === "Artists" ? "isActivate" : "isDeactivate",
|
|
song_style: e.target.value === "Songs" ? "isActivate" : "isDeactivate"
|
|
});
|
|
this.fetchData();
|
|
},
|
|
async fetchData() {
|
|
const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
|
this.update({
|
|
state: {
|
|
...this.state,
|
|
items: data.results
|
|
}
|
|
});
|
|
},
|
|
execQuery(table, filter = undefined, id = undefined) {
|
|
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/";
|
|
let computeHttpRequest;
|
|
if (filter !== undefined) {
|
|
computeHttpRequest = table === "songs" ?
|
|
`${baseHttpRequest}${table}?title=${filter}` :
|
|
`${baseHttpRequest}${table}?name=${filter}`;
|
|
} else if (id !== undefined) {
|
|
computeHttpRequest = `${baseHttpRequest}${table}/${id}`;
|
|
} else {
|
|
computeHttpRequest = `${baseHttpRequest}${table}`;
|
|
}
|
|
return fetch(computeHttpRequest).then(response => response.json());
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.isActivate {
|
|
background-color: #6EE7B7;
|
|
border-color: #059669;
|
|
}
|
|
.isDeactivate {
|
|
background-color: #D1FAE5;
|
|
border-color: #6EE7B7;
|
|
}
|
|
.item {
|
|
background-color: #ECFDF5;
|
|
border-color: #6EE7B7;
|
|
width: 32%;
|
|
}
|
|
</style>
|
|
</onzer>
|