grib/cinema
Template
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Upload files to ''

Browse Source
This commit is contained in:
grib 2022-04-01 23:57:59 +02:00
parent b203615c94
commit 932f4b6313
5 changed files with 151 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
film.riot Normal file
View File

@ -0,0 +1,21 @@
<film>
<div each="{movie in this.props.movies}">
<h1>{movie.title}</h1>
<img src="https://www.themoviedb.org/t/p/w600_and_h900_bestv2{movie.poster_path}" if="{this.getPoster(movie.poster_path)}">
<h4>Popularité : {movie.popularity}</h4>
<h3>{movie.vote_average}/10 sur {movie.vote_count} avis.</h3>
<h2>Genre(s) : {movie.genre_ids}</h2>
</div>
<script>
export default {
getPoster(path){
if(path == null){
return false;
} else {
return true;
}
}
}
</script>
</film>

20
filter.riot Normal file
View File

@ -0,0 +1,20 @@
<sorting>
<form onsubmit="{filteing}">
<button onclick={filteing} value=""&sort_by="vote_average.desc">Mieux notés</button>
<button onclick={filteing}>Plus populaires</button>
</form>
<script>
export default
{
async filteing(e)
{
let data = await this.sa.sorting(e.target.value)
this.props.updateListFilm(data.results)
//console.log(data)
}
}
</script>
</sorting>

83
index.html Normal file
View File

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<script src="main.riot" type="riot"></script>
<script src="search.riot" type="riot"></script>
<script src="film.riot" type="riot"></script>
<script src="sorting.riot" type="riot"></script>
<script src="kind.riot" type="riot"></script>
<script src="detail.riot" type="riot"></script>
<script src="service.js"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
font-size: 35px;
}
/* Container for flexboxes */
.row {
display: -webkit-flex;
display: flex;
}
/* Create three equal columns that sits next to each other */
.column {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Style the footer */
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.row {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<main title="CINEMAMA"></main>
</body>
<script>
(async () => {
await riot.compile().then(()=>{
riot.install(function(component){
component.sa = sa
})
let sa = makeServiceajax();
console.log(sa);
console.log(riot.mount('main'));
});
})()
</script>
</html>

24
kind.riot Normal file
View File

@ -0,0 +1,24 @@
<kind>
<select onchange="{ select }" name="genre-names" value="1">
<option each={genre in this.state.genreList} value="{this.genreList.name}"> {this.genreList.name}</option>
</select>
<button onclick="{ obetirgenre }" > Ajouter </button>
<script>
export default{
onBeforeMount (props,state) {
this.state = {
genreList : []
}
},
async obetirgenre() {
let genres = await this.sa.getGenres()
this.update({genreList : genre})
console.log(genreList)
}
}
</script>
</kind>

3
listFilms.riot Normal file
View File

@ -0,0 +1,3 @@
<listFilms>
<h2 each="{movie in this.props.movies">{movie.title}</h2>
</listFilms>