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..23fc56cb43c4f653d8c24f170cf570e1008817b3 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,24 +1,38 @@
<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>
+<label for="Action">{{ }}</label>
</div>
<br>
+</li>
</div>
</template>
<script>
-
+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.fetchMovies();
+ 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 10eb82a0339a71021f1dff932cb137db05eeeaad..4048d8a55f736b0657b7105e6a3a6a7195d1aae7 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,44 +1,41 @@
<template>
<div class="home">
- <div class="carousel">
- <carousel :items-to-show="5.5" autoplay="1300">
- <slide
- v-for="movie in movies"
- :key="movie.id"
- autoplay="True"
- transition="100"
- >
- <img
- :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
- withd="100"
- height="300"
- />
- </slide>
- <template #addons>
- <navigation />
- <pagination />
- </template>
- </carousel>
- </div>
+ <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 />
+ <pagination />
+ </template>
+ </carousel>
+ </div>
<br />
- <div class="corps">
- <div class="type">
- <MovieType />
- </div>
- <div>
- <li v-for="movie in movies" :key="movie.id">
- <p class="movie-title">
- {{ movie.title }}
- </p>
- <p class="film">
- <img
- :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
- withd="100"
- height="300"
- />
- </p>
- </li>
- </div>
+ <div class="corps">
+ <div class="type">
+ <MovieType />
+ </div>
+ <div class="movie-affichage">
+ <li v-for="movie in movies" :key="movie.id">
+ <p class="name">
+ <h5> {{ movie.title }}</h5>
+ </p>
+ <p class="film">
+ <img
+ :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+ withd="100"
+ height="300"
+ />
+ </p>
+ </li>
+ </div>
</div>
</div>
</template>
@@ -48,6 +45,8 @@ import axios from "axios";
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",
@@ -69,10 +68,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.";
@@ -114,6 +113,12 @@ li {
display: flex;
align-self: center;
}
+.name {
+ max-width: 200px;
+ justify-content: center;
+ align-items: center;
+ background-color: #eaf2ef;
+}
.corps {
display: flex;
}