initial
This commit is contained in:
commit
48e3c3d4e0
62
.gitignore
vendored
Normal file
62
.gitignore
vendored
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
# --------------------
|
||||||
|
# OSX Files
|
||||||
|
# --------------------
|
||||||
|
.DS_Store
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
|
Icon
|
||||||
|
._*
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
|
||||||
|
# --------------------
|
||||||
|
# Windows Files
|
||||||
|
# --------------------
|
||||||
|
Thumbs.db
|
||||||
|
ehthumbs.db
|
||||||
|
Desktop.ini
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
*.cab
|
||||||
|
*.msi
|
||||||
|
*.msm
|
||||||
|
*.msp
|
||||||
|
*.lnk
|
||||||
|
|
||||||
|
# --------------------
|
||||||
|
# Sublime Text Files
|
||||||
|
# --------------------
|
||||||
|
*.sublime-project
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# --------------------
|
||||||
|
# IntelliJ Files
|
||||||
|
# --------------------
|
||||||
|
*.iml
|
||||||
|
*.ipr
|
||||||
|
*.iws
|
||||||
|
.idea/
|
||||||
|
out/
|
||||||
|
|
||||||
|
# --------------------
|
||||||
|
# Eclipse Files
|
||||||
|
# --------------------
|
||||||
|
.project
|
||||||
|
.metadata
|
||||||
|
*.bak
|
||||||
|
.classpath
|
||||||
|
.settings/
|
||||||
|
|
||||||
|
# --------------------
|
||||||
|
# App Files
|
||||||
|
# --------------------
|
||||||
|
node_modules
|
||||||
|
npm-debug.log
|
||||||
|
.nyc_output
|
||||||
|
coverage
|
||||||
|
generated
|
||||||
|
|
||||||
|
# these files are generated anyway
|
||||||
|
.nycrc
|
||||||
|
index.js
|
||||||
|
!.gitmodules
|
||||||
|
!.travis.yml
|
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020 Riot.js
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
53
app.riot
Normal file
53
app.riot
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<app>
|
||||||
|
<filters></filters>
|
||||||
|
<movie-container movieList="{state.currentMovieList.results}"></movie-container>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
onBeforeMount(props, state) {
|
||||||
|
this.state = {
|
||||||
|
currentMovieList: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onMounted() {
|
||||||
|
this.updateMovieList();
|
||||||
|
console.log("helo")
|
||||||
|
console.log(this.state.currentMovieList.results)
|
||||||
|
},
|
||||||
|
|
||||||
|
async updateMovieList() {
|
||||||
|
console.log("updating")
|
||||||
|
switch(localStorage.getItem("currfilter")) {
|
||||||
|
case "popular":
|
||||||
|
console.log("loading popular")
|
||||||
|
this.update ({
|
||||||
|
currentMovieList : await movieUtils.getPopularMovies()
|
||||||
|
})
|
||||||
|
break
|
||||||
|
|
||||||
|
case "top_rated":
|
||||||
|
console.log("loading top_rated")
|
||||||
|
this.update ({
|
||||||
|
currentMovieList : await movieUtils.getTopRatedMovies()
|
||||||
|
})
|
||||||
|
break
|
||||||
|
|
||||||
|
case "coming_soon":
|
||||||
|
console.log("loading coming_soon")
|
||||||
|
this.update ({
|
||||||
|
currentMovieList : await movieUtils.getComingSoonMovies()
|
||||||
|
})
|
||||||
|
break
|
||||||
|
|
||||||
|
case "new":
|
||||||
|
console.log("loading new")
|
||||||
|
this.update ({
|
||||||
|
currentMovieList : await movieUtils.getNewMovies()
|
||||||
|
})
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</app>
|
22
filters.riot
Normal file
22
filters.riot
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<filters>
|
||||||
|
<div class="buttons">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onBeforeMount (props,state) {
|
||||||
|
console.log(localStorage.getItem('currfilter'));
|
||||||
|
},
|
||||||
|
|
||||||
|
setFilter(e) {
|
||||||
|
localStorage.setItem('currfilter', e.target.id);
|
||||||
|
console.log("set")
|
||||||
|
this.update()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</filters>
|
38
index.html
Normal file
38
index.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Riot todo</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<script src="app.riot" type="riot"></script>
|
||||||
|
<script src="filters.riot" type="riot"></script>
|
||||||
|
<script src="movie.riot" type="riot"></script>
|
||||||
|
<script src="movie-container.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">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<app></app>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/* Compile and Mount riot tag */
|
||||||
|
(async () => {
|
||||||
|
await riot.compile()
|
||||||
|
movieUtils = getMovieUtils()
|
||||||
|
|
||||||
|
riot.install(function(component){
|
||||||
|
component.movieUtils = movieUtils
|
||||||
|
})
|
||||||
|
|
||||||
|
riot.mount('app')
|
||||||
|
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
15
movie-container.riot
Normal file
15
movie-container.riot
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<movie-container>
|
||||||
|
|
||||||
|
<div class="movie-container">
|
||||||
|
<movie each={ movie in props.movieList } class="movie-block" movie={movie}></movie>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
onBeforeMount (props,state) {
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</movie-container>
|
20
movie.css
Normal file
20
movie.css
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
.movie-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.movie-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 1%;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons {
|
||||||
|
margin: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
44
movie.js
Normal file
44
movie.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
function getMovieUtils() {
|
||||||
|
let currentMovieList;
|
||||||
|
let currentFilter = 1337;
|
||||||
|
let url = "https://api.themoviedb.org/3/";
|
||||||
|
let api_key = "6c6af57a7dd83a4c720a50bb8f21853c";
|
||||||
|
|
||||||
|
let utils = {
|
||||||
|
getTopRatedMovies,
|
||||||
|
getPopularMovies,
|
||||||
|
getComingSoonMovies,
|
||||||
|
getNewMovies,
|
||||||
|
getCurrentFilter
|
||||||
|
};
|
||||||
|
|
||||||
|
function getTopRatedMovies(page_index) {
|
||||||
|
return fetch(url + "movie/top_rated?api_key=" + api_key + "&page=" + page_index)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPopularMovies(page_index) {
|
||||||
|
return fetch(url + "movie/popular?api_key=" + api_key + "&page=" + page_index)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getComingSoonMovies(page_index) {
|
||||||
|
return fetch(url + "movie/upcoming?api_key=" + api_key + "&page=" + page_index)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNewMovies(page_index) {
|
||||||
|
return fetch(url + "movie/now_playing?api_key=" + api_key + "&page=" + page_index)
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCurrentFilter() {
|
||||||
|
return localStorage.getItem("currfilter");
|
||||||
|
}
|
||||||
|
|
||||||
|
return utils;
|
||||||
|
}
|
30
movie.riot
Normal file
30
movie.riot
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<movie>
|
||||||
|
<a href="TODO">{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>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
onBeforeMount(props, state) {
|
||||||
|
console.log(props)
|
||||||
|
},
|
||||||
|
|
||||||
|
edit(e) {
|
||||||
|
// update only the text state
|
||||||
|
this.update({
|
||||||
|
items : [{results: getPopularMovies()}]
|
||||||
|
//getTopRatedMovies().then(data => items : data);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
test(item) {
|
||||||
|
items : [{results: getPopularMovies()}]
|
||||||
|
console.log(item)
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</movie>
|
6849
package-lock.json
generated
Normal file
6849
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
1
package.json
Normal file
1
package.json
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"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":""}
|
Loading…
Reference in New Issue
Block a user