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/backend/routes/users.js b/backend/routes/users.js
index 58475b8f2603a2b3dbcfc8b6c231a0da226f7f5f..63976df41ff6922b9dae70c09bb006ae997104be 100644
--- a/backend/routes/users.js
+++ b/backend/routes/users.js
@@ -9,6 +9,18 @@ router.get("/", function (req, res) {
});
});
+router.get("/isliked/:movieId/:userId", async function (req, res) {
+ const userId = await req.params["userId"];
+ console.log(userId);
+ const movieId = await req.params["movieId"];
+ const user = await UserModel.findById(userId);
+ const movieOid = await MovieModel.findOne({ id: movieId });
+ const likedMovies = user.liked_movies;
+ const myIndex = likedMovies.indexOf(movieOid._id) + 1;
+ console.log(Boolean(myIndex));
+ res.send(Boolean(myIndex));
+});
+
router.post("/new", function (req, res) {
const newUser = new UserModel({
email: req.body.email,
@@ -39,11 +51,22 @@ router.put("/like", async function (req, res) {
const movieId = await req.body.movieId;
const movieOid = await MovieModel.findOne({ id: movieId });
const user = await UserModel.findById(userId);
- const likedMovies = user.liked_movies.concat([movieOid._id]);
- await UserModel.findByIdAndUpdate(userId, {
- liked_movies: likedMovies,
- });
- res.send("Done");
+ const likedMovies = user.liked_movies;
+ const myIndex = likedMovies.indexOf(movieOid._id);
+ if (myIndex == -1) {
+ likedMovies.splice(myIndex, 1);
+ await UserModel.findByIdAndUpdate(userId, {
+ liked_movies: likedMovies.concat([movieOid._id]),
+ });
+ console.log(movieOid.title);
+ console.log(movieOid._id);
+ res.send("Done");
+ } else {
+ console.log(movieOid.title);
+ console.log(movieOid._id);
+ console.log("This movie is already liked");
+ res.send("This movie is already liked");
+ }
} catch (error) {
console.log(error);
res.send("Internal problem");
@@ -64,8 +87,13 @@ router.put("/unlike", async function (req, res) {
liked_movies: likedMovies,
});
res.send("Done");
+ console.log(movieOid.title);
+ console.log(movieOid._id);
} else {
res.send("This movie wasn't liked");
+ console.log(movieOid.title);
+ console.log(movieOid._id);
+ console.log("This movie wasn't liked");
}
} catch (error) {
console.log(error);
diff --git a/frontend/src/components/MovieInfos.vue b/frontend/src/components/MovieInfos.vue
index f06c80d7ceca468438e299e6005ed462da22fafe..1de16e5f91636d110be15e1753134d40d4690927 100644
--- a/frontend/src/components/MovieInfos.vue
+++ b/frontend/src/components/MovieInfos.vue
@@ -22,7 +22,7 @@ export default {
data: function () {
return {
genreArray: [],
- liking: "Unlike",
+ liking: true,
userId: "toto",
};
},
@@ -55,11 +55,45 @@ export default {
}
},
handleLike: async function () {
- console.log("clic");
- await axios.put(backendURL + "/users/like/", {
- userId: this.userId,
- movieId: this.movieId,
- });
+ if (this.liking == "Unlike") {
+ console.log("clic");
+ await axios.put(backendURL + "/users/unlike/", {
+ userId: this.userId,
+ movieId: this.movieId,
+ });
+ this.getLiking().then((results) => {
+ console.log(results);
+ if (results) {
+ this.liking = "Unlike";
+ } else {
+ this.liking = "Like";
+ }
+ });
+ } else {
+ console.log("clic");
+ await axios.put(backendURL + "/users/like/", {
+ userId: this.userId,
+ movieId: this.movieId,
+ });
+ this.getLiking().then((results) => {
+ console.log(results);
+ if (results) {
+ this.liking = "Unlike";
+ } else {
+ this.liking = "Like";
+ }
+ });
+ }
+ },
+ getLiking: async function () {
+ try {
+ const likingValue = await axios.get(
+ backendURL + "/users/isliked/" + this.movieId + "/" + this.userId
+ );
+ return likingValue.data;
+ } catch (error) {
+ console.log(error);
+ }
},
},
created() {
@@ -67,6 +101,14 @@ export default {
this.genreArray = results;
});
this.userId = this.$route.query.uid;
+ this.getLiking().then((results) => {
+ console.log(results);
+ if (results) {
+ this.liking = "Unlike";
+ } else {
+ this.liking = "Like";
+ }
+ });
console.log(this.userId);
},
};
@@ -85,11 +127,12 @@ export default {
.mark {
text-align: center;
vertical-align: center;
- width: 10%;
+ width: 15%;
height: auto;
background-color: #912f56;
border-radius: 25%;
margin-left: auto;
+ color: #eaf2ef;
}
.like_button {
text-align: center;
@@ -102,5 +145,6 @@ export default {
margin-right: auto;
margin-bottom: auto;
cursor: pointer;
+ color: #eaf2ef;
}
</style>
diff --git a/frontend/src/components/MovieType.vue b/frontend/src/components/MovieType.vue
index 9638fad16d3fad66a3c67fd966d48aaffb75d264..814dfcf7489fe228ffc76da0b6785b2a10fa2b78 100644
--- a/frontend/src/components/MovieType.vue
+++ b/frontend/src/components/MovieType.vue
@@ -1,24 +1,48 @@
<template>
<div class="box">
<h1>Genre</h1>
+<div class="liste-genre">
+<li v-for="genre in genres" :key="genre.id" style="list-style-type:none;">
<div class="check">
-<input type="checkbox" id="action" value="Action" v-model="genre">
-<label for="Action">Action</label>
+<input type="checkbox" id="genre.id" value="genre" >
+<label for="genre"> {{ genre.name }} </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>
+</li>
</div>
-<br>
</div>
</template>
<script>
+import axios from "axios";
+const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
+export default {
+ data: function () {
+ return {
+ genrename: "",
+ genres: [],
+ genresLoadingError: "",
+ };
+ },
+ 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..5064a887eb37d37a096e3e28b9bf3a753f7029c8 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,26 +70,41 @@ 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;
+ console.log(response.data)
})
.catch((error) => {
this.moviesLoadingError = "An error occured while e ing movies.";
console.error(error);
});
+ },
+ fetchGenres: function () {
+ axios
+ .get(
+ backendURL + "/genres",
+ )
+ .then((response) => {
+ this.genres = response.data;
+ console.log(response.data)
+ })
+ .catch((error) => {
+ this.genresLoadingError = "An error occured while e ing genres.";
+ console.error(error);
+ });
},
},
created() {
this.fetchMovies();
+ this.fetchGenres();
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.logo {
max-width: 100px;
}
@@ -105,7 +128,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>