unique git
This commit is contained in:
ledudal
commit
e65bc44fad
45
cacher-desc.riot
Normal file
45
cacher-desc.riot
Normal file
@ -0,0 +1,45 @@
|
||||
<cacher-desc>
|
||||
|
||||
<button id="cacher-desc-but" onclick={toggle}>
|
||||
<i id="logo-cacher-desc-but" class="fa-solid fa-eye"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null,
|
||||
cache: false
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null,
|
||||
cache: false
|
||||
})
|
||||
},
|
||||
async toggle(e) {
|
||||
e.preventDefault();
|
||||
|
||||
this.state.cache=!this.state.cache;
|
||||
if(this.state.cache){
|
||||
document.getElementById("logo-cacher-desc-but").classList="fa-solid fa-eye-slash";
|
||||
} else {
|
||||
document.getElementById("logo-cacher-desc-but").classList="fa-solid fa-eye";
|
||||
}
|
||||
|
||||
this.props.t_setvisi(!this.state.cache);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#cacher-desc-but {
|
||||
width: 50px;
|
||||
padding: -50px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</cacher-desc>
|
||||
47
cat-selector.riot
Normal file
47
cat-selector.riot
Normal file
@ -0,0 +1,47 @@
|
||||
<cat-selector>
|
||||
|
||||
<button id="aff" class="bleu" onclick={change} >A l'affiche</button>
|
||||
<button id="pop" onclick={change} >Populaires</button>
|
||||
<button id="not" onclick={change} >Mieux notés</button>
|
||||
<button id="nex" onclick={change} >A venir</button>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null
|
||||
})
|
||||
},
|
||||
async change(e) {
|
||||
e.preventDefault();
|
||||
|
||||
document.getElementById('pop').classList='gris';
|
||||
document.getElementById('not').classList='gris';
|
||||
document.getElementById('nex').classList='gris';
|
||||
document.getElementById('aff').classList='gris';
|
||||
|
||||
e.target.classList="bleu";
|
||||
this.props.t_changer(e.target.id);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.gris{
|
||||
background: default;
|
||||
}
|
||||
|
||||
.bleu{
|
||||
background: lightblue;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</cat-selector>
|
||||
55
compofilm.riot
Normal file
55
compofilm.riot
Normal file
@ -0,0 +1,55 @@
|
||||
<compofilm>
|
||||
<a if="{state.visible && state.film!=null}" target="blanc" href="https://www.themoviedb.org/movie/{state.film.id}?language=fr">{state.film.title}</a>
|
||||
<img if="{state.film!=null && state.film.poster_path!=null}" src="https://image.tmdb.org/t/p/original{state.film.poster_path}" width="100%"/>
|
||||
<i class="fa-solid fa-star" each={ i in Array(10).keys() } if="{ state.visible && state.film!=null && state.film.vote_average>=i+1 }"></i>
|
||||
<i class="fa-regular fa-star-half-stroke" each={ i in Array(10).keys() } if="{state.visible && state.film!=null && state.film.vote_average>=i+0.5 && state.film.vote_average<i+1}"></i>
|
||||
<i class="fa-regular fa-star tamer" each={ i in Array(10).keys() } if="{state.visible && state.film!=null && state.film.vote_average>=i && state.film.vote_average<i+0.5}"></i>
|
||||
<i class="fa-regular fa-star" each={ i in Array(10).keys() } if="{ state.visible && state.film!=null && state.film.vote_average<i }"></i>
|
||||
<span if="{state.visible && state.film!=null}">{state.film.vote_average}</span>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null,
|
||||
film: null,
|
||||
visible: true
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null,
|
||||
film: null,
|
||||
visible: true
|
||||
})
|
||||
},
|
||||
onBeforeMount (props,state){
|
||||
|
||||
state.film=props.v_film;
|
||||
props.v_setVisiSetter(this.setVisi);
|
||||
props.v_setFilmSetter(this.setFilm);
|
||||
},
|
||||
setVisi(visible){
|
||||
this.state.visible=visible;
|
||||
this.update();
|
||||
},
|
||||
setFilm(film){
|
||||
this.state.film=film;
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
*{
|
||||
display: block;
|
||||
}
|
||||
|
||||
compofilm{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
</compofilm>
|
||||
49
genre-selector.riot
Normal file
49
genre-selector.riot
Normal file
@ -0,0 +1,49 @@
|
||||
<genre-selector>
|
||||
<select id="genre-selector-sel" onchange={choisi}></select>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
const NOTHING = 0;
|
||||
const RECHERCHE = 1;
|
||||
const GET_GENRES = 2;
|
||||
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null,
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null,
|
||||
})
|
||||
},
|
||||
choisi(e){
|
||||
this.props.t_changer(e.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
fetch("https://api.themoviedb.org/3/genre/movie/list?api_key=64a9b2af6577bd1f5553143e0eacd4a8&language=fr")
|
||||
.then(result => result.json())
|
||||
.then( genres => {
|
||||
let selecteur = document.getElementById("genre-selector-sel");
|
||||
|
||||
const tout = document.createElement("option");
|
||||
tout.setAttribute("value", 666);
|
||||
tout.innerHTML = "Tout";
|
||||
selecteur.appendChild(tout);
|
||||
|
||||
for(let i = 0 ; i < genres.genres.length ; i++){
|
||||
const newOption = document.createElement("option");
|
||||
newOption.setAttribute("value", genres.genres[i].id);
|
||||
newOption.innerHTML = genres.genres[i].name;
|
||||
selecteur.appendChild(newOption);
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</genre-selector>
|
||||
30
index.html
Executable file
30
index.html
Executable file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<hmtl>
|
||||
<head>
|
||||
<script src="https://kit.fontawesome.com/3f74e6a305.js" crossorigin="anonymous"></script>
|
||||
<script type="riot" src="./vue.riot"></script>
|
||||
<script type="riot" src="./tout.riot"></script>
|
||||
<script type="riot" src="./search.riot"></script>
|
||||
<script type="riot" src="./compofilm.riot"></script>
|
||||
<script type="riot" src="./cacher-desc.riot"></script>
|
||||
<script type="riot" src="./cat-selector.riot"></script>
|
||||
<script type="riot" src="./genre-selector.riot"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
|
||||
<title>Cinema</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<tout></tout>
|
||||
</body>
|
||||
<script>
|
||||
riot.compile().then(()=>{
|
||||
riot.mount('tout');
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body{
|
||||
background: gray;
|
||||
}
|
||||
</style>
|
||||
</hmtl>
|
||||
85
search.riot
Executable file
85
search.riot
Executable file
@ -0,0 +1,85 @@
|
||||
<search>
|
||||
<label>
|
||||
<form onsubmit={_search}>
|
||||
<input type="input" id="input" placeholder="Recherche">
|
||||
</form>
|
||||
</label>
|
||||
|
||||
<button id="search-but" onclick={ _search }>
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
</button>
|
||||
|
||||
<p if={state.error} class="error">{ state.error }</p>
|
||||
|
||||
<script>
|
||||
|
||||
const NOTHING = 0;
|
||||
const RECHERCHE = 1;
|
||||
const GET_GENRES = 2;
|
||||
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null,
|
||||
results: []
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null,
|
||||
results: [],
|
||||
})
|
||||
},
|
||||
async _search(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if(document.getElementById("input").value == "")
|
||||
return;
|
||||
|
||||
results = await fetch( "https://api.themoviedb.org/3/search/movie?api_key=64a9b2af6577bd1f5553143e0eacd4a8&query="+document.getElementById("input").value+"&language=fr&include_adult=true")
|
||||
.then(result => result.json());
|
||||
this.state.results=results.results;
|
||||
console.log(this.state.results);
|
||||
this.update();
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.loader {
|
||||
margin: 6rem 0 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #AA8222;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 1rem 0 0;
|
||||
font-weight: 300;
|
||||
padding: 0.8rem 1rem;
|
||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
transition: all 0.3s;
|
||||
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
</style>
|
||||
</search>
|
||||
147
tout.riot
Normal file
147
tout.riot
Normal file
@ -0,0 +1,147 @@
|
||||
<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>
|
||||
67
vue.riot
Normal file
67
vue.riot
Normal file
@ -0,0 +1,67 @@
|
||||
<vue>
|
||||
<div id="conteneur" >
|
||||
<compofilm each={ film in state.films.results } v_film="{ film }" v_setVisiSetter="{ addVisibilitySetter }" v_setFilmSetter="{ addSetter }">
|
||||
</compofilm> <!--Refuse de s'update-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
state: {
|
||||
loading: false,
|
||||
error: null,
|
||||
films: [],
|
||||
visible: true,
|
||||
setters: [],
|
||||
film_setters: [],
|
||||
genres_names: [],
|
||||
genres_ids: []
|
||||
},
|
||||
reset() {
|
||||
this.update({
|
||||
loading: false,
|
||||
error: null,
|
||||
films: [],
|
||||
visible: true,
|
||||
setters: [],
|
||||
film_setters: [],
|
||||
genres_names: [],
|
||||
genres_ids: []
|
||||
})
|
||||
},
|
||||
async onBeforeMount(props,state){
|
||||
await new Promise(r => setTimeout(r, 200));
|
||||
|
||||
props.t_setSetters(this.setFilms,this.setVisibilite);
|
||||
|
||||
this.update();
|
||||
},
|
||||
setFilms(data){
|
||||
this.state.films=data;
|
||||
i = 0;
|
||||
for(setter of this.state.film_setters){
|
||||
setter(data.results[i++]);
|
||||
}
|
||||
},
|
||||
setVisibilite(visible){
|
||||
this.state.visible=visible;
|
||||
for(setter of this.state.setters){
|
||||
setter(visible);
|
||||
}
|
||||
},
|
||||
addVisibilitySetter(setter){
|
||||
this.state.setters.push(setter);
|
||||
},
|
||||
addSetter(setter){
|
||||
this.state.film_setters.push(setter);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
compofilm{
|
||||
display: inline-block;
|
||||
width: 22%;
|
||||
margin: 1%;
|
||||
}
|
||||
</style>
|
||||
</vue>
|
||||
Loading…
Reference in New Issue
Block a user