cinema/tout.riot

147 lines
2.9 KiB
Plaintext
Raw Normal View History

2022-04-01 22:49:14 +02:00
<tout>
<div id="topbar">
<div id="gauche">
<cacher-desc t_setvisi="{setVisibilite}"></cacher-desc>
<genre-selector t_changer="{setGenre}"></genre-selector>
</div>
<div id="droite">
<search></search>
</div>
</div>
<div id="ndbar">
<cat-selector t_changer="{changeAff}"></cat-selector>
</div>
<div id="panneau">
<vue if="{state.films}!=[]" t_data="{state.films}" t_setSetters="{setSetters}" ></vue>
</div>
<script>
const API_KEY="64a9b2af6577bd1f5553143e0eacd4a8";
const R_AFFICHE="https://api.themoviedb.org/3/movie/now_playing?api_key="+API_KEY+"&language=fr&include_adult=true";
const R_POPULAIRE="https://api.themoviedb.org/3/movie/popular?api_key=" + API_KEY+"&language=fr&include_adult=true";
const R_NOTES="https://api.themoviedb.org/3/movie/top_rated?api_key=" + API_KEY + "&language=fr&include_adult=true";
const R_AVENIR="https://api.themoviedb.org/3/movie/upcoming?api_key=" + API_KEY + "&language=fr&include_adult=true";
export default {
state: {
loading: false,
error: null,
films: [],
visible: true,
req: R_AFFICHE,
genre: 666,
v_changeFilm: null,
v_changeVisibilite: null
},
reset() {
this.update({
loading: false,
error: null,
films: [],
visible: true,
req: R_AFFICHE,
genre: 666
})
},
async changeAff(aff){
switch (aff) {
case "aff":
this.state.req=R_AFFICHE;
break;
case "pop":
this.state.req=R_POPULAIRE;
break;
case "not":
this.state.req=R_NOTES;
break;
case "nex":
this.state.req=R_AVENIR;
break;
}
if(this.state.genre != 666){
this.state.req+="&with_genres="+this.state.genre
}
await this.updateFilms();
this.state.v_changeFilm(this.state.films);
},
async updateFilms(){
this.state.films=await fetch(this.state.req)
.then(result => result.json())
.then(data => data);
this.update();
},
onBeforeMount (props,state){
this.updateFilms();
},
setVisibilite(visible){
this.state.visible=!!visible;
this.state.v_changeVisibilite(this.state.visible);
},
setGenre(genre){
this.state.genre=genre;
this.updateFilms();
this.state.v_changeFilm(this.state.films);
this.update();
},
setSetters(films,visibilite){
this.state.v_changeFilm=films;
this.state.v_changeVisibilite=visibilite;
this.state.v_changeVisibilite(this.state.visible);
this.state.v_changeFilm(this.state.films);
}
}
</script>
<style>
#topbar *{
margin:10px;
vertical-align: center;
}
#gauche{
float: left;
}
#droite{
float: right;
}
#droite *{
display: inline-block;
}
#search-but{
margin-left: -20px;
}
#topbar{
height: 100px;
}
#ndbar{
text-align: center;
padding-left: 10%;
}
#ndbar *{
display: inline-block;
margin: 5px;
font-size: 1.2rem;
}
</style>
</tout>