Compare commits
6 Commits
Author | SHA1 | Date | |
---|---|---|---|
8c03a9c241 | |||
07963bbe5d | |||
216b0658b8 | |||
b0b2b8020a | |||
86d1984095 | |||
4c9af83342 |
@ -2,5 +2,6 @@
|
|||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="VcsDirectoryMappings">
|
<component name="VcsDirectoryMappings">
|
||||||
<mapping directory="" vcs="Git" />
|
<mapping directory="" vcs="Git" />
|
||||||
|
<mapping directory="$PROJECT_DIR$" vcs="Git" />
|
||||||
</component>
|
</component>
|
||||||
</project>
|
</project>
|
40
index.html
40
index.html
@ -1,31 +1,31 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Riot App</title>
|
<title>Riot App</title>
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-neutral-50">
|
<body class="bg-neutral-50">
|
||||||
|
|
||||||
<onzer></onzer>
|
<onzer></onzer>
|
||||||
|
|
||||||
<script src="https://unpkg.com/animore/animore.js"></script>
|
<script src="https://unpkg.com/animore/animore.js"></script>
|
||||||
<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>
|
||||||
</html>
|
</html>
|
||||||
|
150
onzer.riot
150
onzer.riot
@ -1,109 +1,109 @@
|
|||||||
<onzer>
|
<onzer>
|
||||||
<div class="px-12">
|
<div class="px-12">
|
||||||
<div class="flex-row mb-2">
|
<div class="flex-row mb-2">
|
||||||
<input id="album" type="button" onclick={click} value="Albums"
|
<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}"/>
|
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"
|
<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}"/>
|
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"
|
<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}"/>
|
class="mr-4 border-solid border rounded-lg h-20 w-64 mt-2 {song_style}" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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" onclick={navigateToPlaylists}
|
||||||
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>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-wrap px-12 justify-between mt-8">
|
<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">
|
<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>
|
<p>{album.name}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
async onBeforeMount(props){
|
state: {
|
||||||
let data = await props.items;
|
placeholder: "Rechercher dans les albums",
|
||||||
this.state = {
|
items: [],
|
||||||
placeholder: "Rechercher dans les albums",
|
search: "albums",
|
||||||
items: data.results,
|
filter: undefined,
|
||||||
search: "albums",
|
id: undefined
|
||||||
filter: undefined,
|
},
|
||||||
id: undefined
|
onBeforeMount(props) {
|
||||||
};
|
this.loadData(props.items);
|
||||||
this.paintButton();
|
},
|
||||||
this.album_style = "isActivate";
|
async loadData(items) {
|
||||||
this.update();
|
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;
|
|
||||||
case "Artists":
|
|
||||||
this.state.placeholder = "Rechercher dans les artists";
|
|
||||||
this.artist_style = "isActivate";
|
|
||||||
this.state.search = "artists";
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
this.state.placeholder = "Rechercher dans les songs";
|
|
||||||
this.song_style = "isActivate";
|
|
||||||
this.state.search = "songs";
|
|
||||||
}
|
|
||||||
this.fetchData()
|
|
||||||
this.update();
|
|
||||||
},
|
|
||||||
async fetchData(){
|
|
||||||
let data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
|
||||||
this.update({
|
this.update({
|
||||||
items: data.results
|
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();
|
||||||
},
|
},
|
||||||
paintButton(){
|
async fetchData() {
|
||||||
this.album_style = "isDeactivate";
|
const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
|
||||||
this.artist_style = "isDeactivate";
|
this.update({
|
||||||
this.song_style = "isDeactivate";
|
state: {
|
||||||
},
|
...this.state,
|
||||||
execQuery(table, filter = undefined, id = undefined){
|
items: data.results
|
||||||
console.log("CCACA");
|
|
||||||
let baseHttpRequest = "https://dwarves.iut-fbleau.fr/~fauvet/api/"
|
|
||||||
let computeHttpRequest;
|
|
||||||
if(filter !== undefined){
|
|
||||||
switch(table){
|
|
||||||
case "songs":
|
|
||||||
computeHttpRequest = baseHttpRequest+table+"?title="+filter;
|
|
||||||
break;
|
|
||||||
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();
|
|
||||||
});
|
});
|
||||||
|
},
|
||||||
|
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());
|
||||||
|
},
|
||||||
|
navigateToPlaylists() {
|
||||||
|
route('/playlists');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
.isActivate{
|
.isActivate {
|
||||||
background-color: #6EE7B7;
|
background-color: #6EE7B7;
|
||||||
border-color: #059669;
|
border-color: #059669;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user