fauvet/SAE_RIOT_2024
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: fauvet:master
Branches Tags
fauvet:master
fauvet:master2
...
pull from: fauvet:master2
Branches Tags
fauvet:master
fauvet:master2

6 Commits
master ... master2

Author SHA1 Message Date
Matthis FAUVET
8c03a9c241 test route 2024-06-29 01:12:09 +02:00
Matthis FAUVET
07963bbe5d test route 2024-06-29 00:52:54 +02:00
Matthis FAUVET
216b0658b8 test route 2024-06-29 00:45:19 +02:00
Matthis FAUVET
b0b2b8020a test route 2024-06-29 00:04:13 +02:00
Matthis FAUVET
86d1984095 test route 2024-06-28 23:59:56 +02:00
Matthis FAUVET
4c9af83342 create new branch 2024-06-25 00:14:10 +02:00
3 changed files with 96 additions and 95 deletions
Show Stats Expand all files Collapse all files

1
.idea/vcs.xml generated
View File

@ -2,5 +2,6 @@
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="" vcs="Git" />
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

40
index.html
View File

@ -1,31 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Riot App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<head>
<meta charset="utf-8">
<title>Riot App</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-neutral-50">
<onzer></onzer>
<onzer></onzer>
<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/animore/animore.js"></script>
<script src="https://unpkg.com/riot@9/riot+compiler.min.js"></script>
<script type="riot" src="./onzer.riot"></script>
<script type="javascript" src="./onzer.riot"></script>
<script type="riot" src="./onzer.riot"></script>
<script type="text/javascript">
function fetch_data(){
return fetch("https://dwarves.iut-fbleau.fr/~fauvet/api/albums").then(response => {
return response.json();
} )
}
<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', {items: fetch_data()});
})
</script>
riot.compile().then(async () => {
const data = await fetch_data();
riot.mount('onzer', { items: data });
});
</script>
</body>
</html>

150
onzer.riot
View File

@ -1,109 +1,109 @@
<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}"/>
<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 }>
<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 border 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"/>
<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" onclick={navigateToPlaylists}
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 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 {
async onBeforeMount(props){
let data = await props.items;
this.state = {
placeholder: "Rechercher dans les albums",
items: data.results,
search: "albums",
filter: undefined,
id: undefined
};
this.paintButton();
this.album_style = "isActivate";
this.update();
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.state.filter = e.target.value;
console.log(this.state.filter);
this.update({
state: {
...this.state,
filter: e.target.value
}
});
this.fetchData();
this.update();
},
click(e) {
e.preventDefault();
this.paintButton();
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.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);
const newState = {
...this.state,
placeholder: `Rechercher dans les ${e.target.value.toLowerCase()}`,
search: e.target.value.toLowerCase(),
filter: undefined
};
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(){
this.album_style = "isDeactivate";
this.artist_style = "isDeactivate";
this.song_style = "isDeactivate";
},
execQuery(table, filter = undefined, id = undefined){
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;
async fetchData() {
const data = await this.execQuery(this.state.search, this.state.filter, this.state.id);
this.update({
state: {
...this.state,
items: data.results
}
} 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>
<style>
.isActivate{
.isActivate {
background-color: #6EE7B7;
border-color: #059669;
}