Merge branch 'end-front' into 'master'

front, genre etc

See merge request !21

.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

.vscode/settings.json

@@ -10,5 +10,8 @@
   },
   "[javascript][vue]": {
     "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

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 {

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 {

frontend/src/components/MovieType.vue

 <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>

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({

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 />
@@ -20,27 +22,33 @@
   <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;
 }
@@ -108,4 +115,13 @@ li {
   display: flex;
   align-self: center;
 }
+.name {
+  max-width: 200px;
+  justify-content: center;
+  align-items: center;
+  background-color: #eaf2ef;
+}
+.corps {
+  display: flex;
+}
 </style>