diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 319a0c339bad46744b094c9831fbed1d5f15923e..2928c35a2e894078e2fd2dda0509a8de9f66b258 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -5,6 +5,7 @@ stages:
.eslint:
image: node:16.14.0-alpine
stage: lint
+ allow_failure: true
script:
- cd $CONTEXT
# install packages
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6378fc8420b6eba9e84163700438decd630d9a47..69538563681f389b3107f724af66bc71d2ed2123 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,5 +10,8 @@
},
"[javascript][vue]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
+ },
+ "[vue]": {
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
diff --git a/backend/routes/genres.js b/backend/routes/genres.js
index 90117dc7095c7daee8965b5340b22f12136b7021..fc1190cc2a4cfb0b531b2b98876a6b50dc69c5ce 100644
--- a/backend/routes/genres.js
+++ b/backend/routes/genres.js
@@ -4,17 +4,14 @@ const router = express.Router();
module.exports = router;
-// router.get("/popular/:number", async function (req, res) {
-// try {
-// const filmNumber = await req.params["number"];
-// const getGenres = await GenreModel.find({})
-// .sort({ popularity: "desc" })
-// .limit(filmNumber);
-// res.send(getGenres);
-// } catch (error) {
-// console.log(error);
-// }
-// });
+router.get("/", async function (req, res) {
+ try {
+ const getGenres = await GenreModel.find({});
+ res.send(getGenres);
+ } catch (error) {
+ console.log(error);
+ }
+});
router.get("/genre/id/:id", async function (req, res) {
try {
diff --git a/backend/routes/movies.js b/backend/routes/movies.js
index 8cac5149fb80843f27b978273be5de5cd39923f5..8a670ea7aec3148d760178abfe75103f42d2652e 100644
--- a/backend/routes/movies.js
+++ b/backend/routes/movies.js
@@ -4,17 +4,18 @@ const router = express.Router();
module.exports = router;
-// router.get("/popular/:number", async function (req, res) {
-// try {
-// const filmNumber = await req.params["number"];
-// const getMovies = await MovieModel.find({})
-// .sort({ popularity: "desc" })
-// .limit(filmNumber);
-// res.send(getMovies);
-// } catch (error) {
-// console.log(error);
-// }
-// });
+router.get("/popular/:number", async function (req, res) {
+ try {
+ console.log('yo')
+ const filmNumber = await req.params["number"];
+ const getMovies = await MovieModel.find({})
+ .sort({ popularity: "desc" })
+ .limit(filmNumber);
+ res.send(getMovies);
+ } catch (error) {
+ console.log(error);
+ }
+});
router.get("/movie/id/:id", async function (req, res) {
try {
diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 9638fad16d3fad66a3c67fd966d48aaffb75d264..21d59ff90fe3268eb98a3afd39e9323d90f10ca0 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,24 +1,40 @@
<template>
<div class="box">
<h1>Genre</h1>
+<li v-for="genre in genres" :key="genre.id">
<div class="check">
-<input type="checkbox" id="action" value="Action" v-model="genre">
-<label for="Action">Action</label>
-</div>
-<div class="check">
-<input type="checkbox" id="horreur" value="Horreur" v-model="genre">
-<label for="horreur">Horreur</label>
-</div>
-<div class="check">
-<input type="checkbox" id="fantastique" value="Fantastique" v-model="genre">
-<label for="fantastique">Fantastique</label>
+<input type="checkbox" id="genre.id" value="genre" >
+<label for="genre">{{ genre.name }}</label>
</div>
<br>
+</li>
</div>
</template>
<script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+export default {
+ methods: {
+ fetchGenres: function () {
+ axios
+ .get(
+ backendURL + "/genres",
+ )
+ .then((response) => {
+ this.genres = response.data;
+ })
+ .catch((error) => {
+ this.genresLoadingError = "An error occured while e ing genres.";
+ console.error(error);
+ });
+ },
+ },
+ created() {
+ this.fetchGenres();
+ },
+};
</script>
<style scoped>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index dfb02bc3c5916c84ededc7ee60098185d76bbcfe..2651045fd702e8a673e435a25ce1aeeee2cf5068 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,6 +3,7 @@ import Home from "../views/Home.vue";
import Connexion from "../views/Connexion.vue";
import Users from "../views/Users.vue";
import AddUser from "../views/AddUsers.vue";
+import MoviePage from "../views/MoviePage.vue";
const routes = [
{
@@ -25,6 +26,11 @@ const routes = [
name: "AddUsers",
component: AddUser,
},
+ {
+ path: "/movie/:id",
+ name: "MoviePage",
+ component: MoviePage,
+ },
];
const router = createRouter({
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index e40d143570fafa7afa4a1209ca01b21e6c976c08..20fad0be82221eedd1b36b1f9d790793de4a48cc 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -3,11 +3,13 @@
<div class="carousel">
<carousel :items-to-show="5.5" autoplay=1300>
<slide v-for="movie in movies" :key="movie.id" autoplay='True' transition="100" >
+ <router-link :to="'/movie/'+ movie.id">
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100"
height="300"
/>
+ </router-link>
</slide>
<template #addons>
<navigation />
@@ -16,31 +18,37 @@
</carousel>
</div>
<br />
- <div class="corps">
+ <div class="corps">
<div class="type">
<MovieType />
</div>
+ <div class="movie-affichage">
<li v-for="movie in movies" :key="movie.id">
- <p class="movie-title">
- {{ movie.title }}
+ <p class="name">
+ <h5> {{ movie.title }}</h5>
</p>
<p class="film">
+ <router-link :to="'/movie/'+ movie.id">
<img
:src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
withd="100"
height="300"
/>
+ </router-link>
</p>
</li>
</div>
+ </div>
</div>
</template>
<script>
import axios from "axios";
-import 'vue3-carousel/dist/carousel.css';
-import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel';
+import "vue3-carousel/dist/carousel.css";
+import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
import MovieType from "../components/MovieType.vue";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+
export default {
name: "Home",
@@ -62,10 +70,10 @@ export default {
fetchMovies: function () {
axios
.get(
- `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+ backendURL + "/movies/popular/20",
)
.then((response) => {
- this.movies = response.data.results;
+ this.movies = response.data;
})
.catch((error) => {
this.moviesLoadingError = "An error occured while e ing movies.";
@@ -81,7 +89,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.logo {
max-width: 100px;
}
@@ -105,7 +112,16 @@ li {
margin-right: 5px;
}
.film {
- display:flex;
+ display: flex;
align-self: center;
}
+.name {
+ max-width: 200px;
+ justify-content: center;
+ align-items: center;
+ background-color: #eaf2ef;
+}
+.corps {
+ display: flex;
+}
</style>