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

ça fonctionne bien maintenant

Browse Source
This commit is contained in:
hammersc 2022-04-03 01:58:58 +02:00
parent 48e3c3d4e0
commit e574ba0917
11 changed files with 283 additions and 6887 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app.riot
View File

@ -1,6 +1,7 @@
<app>
<filters></filters>
<movie-container movieList="{state.currentMovieList.results}"></movie-container>
<filters currentPageNum="{state.currentMovieList.page}" maxPageNum="{state.currentMovieList.total_pages}"
getMovieList="{getMovieList}" updateMovieList="{updateMovieList}"></filters>
<movie-container getGenres="{movieUtils.getGenres()}" movieList="{state.currentMovieList.results}"></movie-container>
<script>
export default {
@ -8,46 +9,64 @@
this.state = {
currentMovieList: [],
}
this.initGenres();
},
onMounted() {
this.updateMovieList();
console.log("helo")
console.log(this.state.currentMovieList.results)
},
async updateMovieList() {
console.log("updating")
currentPage = localStorage.getItem("curr_page");
localStorage.setItem('curr_page', 1);
switch(localStorage.getItem("currfilter")) {
case "popular":
console.log("loading popular")
this.update ({
currentMovieList : await movieUtils.getPopularMovies()
currentMovieList : await movieUtils.getPopularMovies(currentPage)
})
break
case "top_rated":
console.log("loading top_rated")
this.update ({
currentMovieList : await movieUtils.getTopRatedMovies()
currentMovieList : await movieUtils.getTopRatedMovies(currentPage)
})
break
case "coming_soon":
console.log("loading coming_soon")
this.update ({
currentMovieList : await movieUtils.getComingSoonMovies()
currentMovieList : await movieUtils.getComingSoonMovies(currentPage)
})
break
case "new":
console.log("loading new")
this.update ({
currentMovieList : await movieUtils.getNewMovies()
currentMovieList : await movieUtils.getNewMovies(currentPage)
})
break
default:
console.log("loading new")
this.update ({
currentMovieList : await movieUtils.getNewMovies(currentPage)
})
break
}
},
getMovieList() {
this.updateMovieList();
return this.currentMovieList;
},
async initGenres() {
let genres = [];
console.log("genres")
genres = await movieUtils.getGenres().then(data => localStorage.setItem("genres", JSON.stringify(data)));
}
}
</script>
</app>

38
filters.riot
View File

@ -1,21 +1,53 @@
<filters>
<div class="buttons">
<div class="buttons-filters">
<button onclick={setFilter} class="w3-button w3-blue w3-round" id="popular">Populaires</button>
<button onclick={setFilter} class="w3-button w3-blue w3-round" id="top_rated">Mieux notés</button>
<button onclick={setFilter} class="w3-button w3-blue w3-round" id="coming_soon">À venir</button>
<button onclick={setFilter} class="w3-button w3-blue w3-round" id="new">À l'affiche</button>
</div>
<ul class="filters">
<li>
<button onclick={toPreviousPage}><</button>
{this.props.currentPageNum}/{this.props.maxPageNum}
<button onclick={toNextPage}>></button>
</li>
</ul>
<script>
export default {
onBeforeMount (props,state) {
console.log(localStorage.getItem('currfilter'));
console.log(props.getMovieList());
},
setFilter(e) {
localStorage.setItem('currfilter', e.target.id);
console.log("set")
this.update()
this.props.updateMovieList();
},
toPreviousPage() {
if (this.props.currentPageNum > 1) {
localStorage.setItem('curr_page', this.props.currentPageNum-1);
this.props.updateMovieList();
}
else {
localStorage.setItem('curr_page', this.props.maxPageNum);
this.props.updateMovieList();
}
},
toNextPage() {
if (this.props.currentPageNum < this.props.maxPageNum) {
localStorage.setItem('curr_page', this.props.currentPageNum+1);
this.props.updateMovieList();
}
else {
localStorage.setItem('curr_page', 1);
this.props.updateMovieList();
}
},
}
</script>

10
index.html
View File

@ -2,7 +2,7 @@
<html>
<head>
<title>Riot todo</title>
<title>Cinéma HAMMERSCHMIDT</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="app.riot" type="riot"></script>
@ -14,10 +14,6 @@
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<app></app>
<script>
@ -34,5 +30,9 @@
})()
</script>
</head>
<body>
<app></app>
</body>
</html>

5
movie-container.riot
View File

@ -7,7 +7,12 @@
<script>
export default {
onBeforeMount (props,state) {
console.log(props);
},
onMounted() {
console.log(this.props);
}
}
</script>

39
movie-page.html Normal file
View File

@ -0,0 +1,39 @@
<!doctype html>
<html>
<head>
<title>Cinéma HAMMERSCHMIDT</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="movie-page.riot" type="riot"></script>
<link rel="stylesheet" href="movie.css">
<script src="movie.js"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@6.1.2/riot+compiler.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script>
(async () => {
await riot.compile()
movieUtils = getMovieUtils()
riot.install(function(component){
component.movieUtils = movieUtils
})
let url = new URLSearchParams(window.location.search);
let movie_id = url.get('id')
let movie = await movieUtils.getMovieById(movie_id)
//let credits = await movieUtils.getMovieCredits(movie_id)
riot.mount('movie-page', {movie})
})()
</script>
</head>
<body>
<movie-page></movie-page>
</body>
</html>

106
movie-page.riot Normal file
View File

@ -0,0 +1,106 @@
<movie-page>
<div class="movie-page-container">
<div>
<h1 style="font-weight: bold;">{props.movie.title}</h1>
<img src="https://image.tmdb.org/t/p/w500/{props.movie.poster_path}"><img>
</div>
<div class="right-part">
<ul>
<li class="genre" each={genre in state.movie_genres}>{genre}</li>
</ul>
<br>
<p >{props.movie.release_date}</p>
<br>
<ul>
<li class="language" each={language in props.movie.spoken_languages}>{(language.iso_639_1).toUpperCase()}</li>
</ul>
<br>
<p class="overview">{props.movie.overview}</p>
</div>
</div>
<script>
export default {
onBeforeMount(props, state) {
this.state = {
movie_genres: this.getGenresFromIds(),
}
},
getGenresFromIds() {
let ret = []
let genres = []
genres = JSON.parse(localStorage.getItem("genres")).genres;
for(let i = 0; i<genres.length; i++)
{
for(let j = 0; j< this.props.movie.genres.length; j++) {
if(genres[i].id == this.props.movie.genres[j].id) {
ret.push(genres[i].name)
}
}
}
console.log(ret)
return ret
},
}
</script>
<style>
.movie-page-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}
.movie-page-container div {
margin: 20px;
}
.right-part {
padding-top: 3%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
ul {
padding-left: 0px;
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.genre {
font-weight: bold;
padding-right: 14px;
}
.language {
margin-right: 14px;
text-align: center;
list-style: none;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
color: #50713e;
background-color: #daf1e0;
}
.overview {
word-wrap: break-word;
width: 400px;
}
</style>
</movie-page>

21
movie.css
View File

@ -1,3 +1,4 @@
.movie-container {
display: flex;
flex-wrap: wrap;
@ -12,7 +13,25 @@
align-items: center;
}
.buttons {
movie .genre {
text-align: center;
list-style: none;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
color: #50713e;
background-color: #daf1e0;
}
.buttons-filters {
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.filters {
list-style: none;
margin: 10px;
display: flex;
flex-wrap: wrap;

24
movie.js
View File

@ -9,29 +9,31 @@ function getMovieUtils() {
getPopularMovies,
getComingSoonMovies,
getNewMovies,
getCurrentFilter
getCurrentFilter,
getGenres,
getMovieById
};
function getTopRatedMovies(page_index) {
return fetch(url + "movie/top_rated?api_key=" + api_key + "&page=" + page_index)
return fetch(url + "movie/top_rated?api_key=" + api_key + "&page=" + page_index + "&language=fr")
.then(response => response.json())
.then(data => data);
}
function getPopularMovies(page_index) {
return fetch(url + "movie/popular?api_key=" + api_key + "&page=" + page_index)
return fetch(url + "movie/popular?api_key=" + api_key + "&page=" + page_index + "&language=fr")
.then(response => response.json())
.then(data => data);
}
function getComingSoonMovies(page_index) {
return fetch(url + "movie/upcoming?api_key=" + api_key + "&page=" + page_index)
return fetch(url + "movie/upcoming?api_key=" + api_key + "&page=" + page_index + "&language=fr")
.then(response => response.json())
.then(data => data);
}
function getNewMovies(page_index) {
return fetch(url + "movie/now_playing?api_key=" + api_key + "&page=" + page_index)
return fetch(url + "movie/now_playing?api_key=" + api_key + "&page=" + page_index + "&language=fr")
.then(response => response.json())
.then(data => data);
}
@ -40,5 +42,17 @@ function getMovieUtils() {
return localStorage.getItem("currfilter");
}
function getGenres() {
return fetch(url + "genre/movie/list?api_key=" + api_key + "&language=fr")
.then(response => response.json())
.then(data => data)
}
function getMovieById(id) {
return fetch(url + "movie/" + id + "?api_key=" + api_key + "&language=fr")
.then(response => response.json())
.then(data=>data)
}
return utils;
}

40
movie.riot
View File

@ -1,30 +1,42 @@
<movie>
<a href="TODO">{props.movie.title}</a>
<a href="./movie-page.html?id={props.movie.id}">{props.movie.title}</a>
<img src='https://image.tmdb.org/t/p/w300{props.movie.poster_path}'></img>
<label>{props.movie.vote_average}/10</label>
<label>{props.movie.vote_count} votes</label>
<li each={ genre in props.movie.genres_id }>{genre}</li>
<ul class="genres">
<li class="genre" each={ genre in state.movie_genres }>{genre}</li>
</ul>
<script>
export default {
onBeforeMount(props, state) {
console.log(props)
this.state = {
movie_genres: this.getGenresFromIds(),
}
},
edit(e) {
// update only the text state
this.update({
items : [{results: getPopularMovies()}]
//getTopRatedMovies().then(data => items : data);
})
getGenresFromIds() {
let ret = []
let genres = []
genres = JSON.parse(localStorage.getItem("genres")).genres;
this.props.movie.genre_ids.length
for(let i = 0; i<genres.length; i++)
{
for(let j = 0; j< this.props.movie.genre_ids.length; j++) {
if(genres[i].id == this.props.movie.genre_ids[j]) {
ret.push(genres[i].name)
}
}
}
//console.log(ret)
return ret
},
test(item) {
items : [{results: getPopularMovies()}]
console.log(item)
this.update();
}
onBeforeUpdate(props, state) {
this.state.movie_genres = this.getGenresFromIds();
},
}
</script>
</movie>

6849
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -1 +0,0 @@
{"dependencies":{"riot":"^6.1.2"},"name":"cinema","version":"1.0.0","main":"index.js","devDependencies":{"@riotjs/cli":"^6.0.5","@riotjs/compiler":"^6.0.1","chai":"^4.3.4","esm":"^3.2.25","jsdom":"^16.6.0","jsdom-global":"^3.0.2","mocha":"^8.4.0","nyc":"^15.1.0","riot":"^6.0.2"},"scripts":{"test":"npm run build && nyc --require esm --require jsdom-global/register mocha test.js","cov":"nyc report --reporter=text-lcov","cov-html":"nyc report --reporter=html","build":"riot -c riot.config my-component.riot","prepublishOnly":"npm test"},"author":"Adil HAMMERSCHMIDT","license":"ISC","description":""}