advancement

frontend/src/components/MovieInfos.vue

@@ -3,11 +3,14 @@
     <div class="child">
       <h1>{{ movieTitle }}</h1>
       <div class="mark">
-        <h2>{{ movieVoteAverage }} ★</h2>
+        <h2>{{ movieVoteAverage * 0.5 }} ★</h2>
       </div>
     </div>
     <h4>Genres : {{ genreArray.join(", ") }}</h4>
     <h4>{{ movieOverview }}</h4>
+    <div class="like_button" v-on:click="handleLike">
+      <h2>{{ liking }}</h2>
+    </div>
   </div>
 </template>
 
@@ -19,9 +22,12 @@ export default {
   data: function () {
     return {
       genreArray: [],
+      liking: "Unlike",
+      userId: "toto",
     };
   },
   props: {
+    movieId: Number,
     movieTitle: String,
     movieDate: String,
     movieGenres: Array,
@@ -48,11 +54,20 @@ export default {
         console.log(error);
       }
     },
+    handleLike: async function () {
+      console.log("clic");
+      await axios.put(backendURL + "/users/like/", {
+        userId: this.userId,
+        movieId: this.movieId,
+      });
+    },
   },
   created() {
     this.developGenres(this.movieGenres).then((results) => {
       this.genreArray = results;
     });
+    this.userId = this.$route.query.uid;
+    console.log(this.userId);
   },
 };
 </script>
@@ -76,4 +91,16 @@ export default {
   border-radius: 25%;
   margin-left: auto;
 }
+.like_button {
+  text-align: center;
+  vertical-align: center;
+  background-color: #912f56;
+  border-radius: 2%;
+  width: 90%;
+  margin-top: auto;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: auto;
+  cursor: pointer;
+}
 </style>

frontend/src/views/MoviePage.vue

@@ -4,6 +4,7 @@
       <MoviePoster class="child" :posterPath="moviesInfos.poster_path" />
       <MovieInfos
         class="child"
+        :movieId="moviesInfos.id"
         :movieTitle="moviesInfos.title"
         :movieDate="moviesInfos.release_date"
         :movieGenres="moviesInfos.genre_ids"