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