cinema/tout.riot

<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>