147 lines
2.9 KiB
Plaintext
147 lines
2.9 KiB
Plaintext
<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> |