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/algo/adreco.py b/algo/adreco.py
index fc477936033d7f50597202ea5407156489b7cb05..142e3b22cac41a03f8a10fc9c89eaf9d100d608c 100644
--- a/algo/adreco.py
+++ b/algo/adreco.py
@@ -36,6 +36,29 @@ def movieDbToDf():
return df
+def userDbToDf():
+ '''
+ This function convert a movie DataBase from mongoDB into a pandas DataFrame
+ '''
+ #load DB
+ client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
+ db = client.group3
+ collection = db.users
+
+ #projection on useful data
+ cursor = collection.find({},{"_id":1, "liked_movies": 1, "update":1})
+ df=pd.DataFrame(list(cursor))
+
+ return df
+
+def loadRecDB():
+
+ #load DB
+ client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
+ db = client.group3
+ collection = db['recommendations']
+ return collection
+
def preFiltering(df,percent=90):
'''
This function removes movies who do not have enough votes to be evaluated
@@ -103,7 +126,6 @@ def index_from_id(df,id):
'''
return df[df['_id']==id].index.values[0]
-
def recommendations(original_title, df, number_of_recommendations):
#prefilter the dataframe
@@ -130,6 +152,10 @@ def recommendations(original_title, df, number_of_recommendations):
return df['original_title'].iloc[recommendations_indices]
def formatingFeatures(df_row):
+ """
+ This function creates a new column "features" in the df
+ used to calculate similarities between users_profiles et movies
+ """
g = []
genres = []
k=[]
@@ -150,21 +176,6 @@ def formatingFeatures(df_row):
return ' '.join([genres]*w_genres)+' '+' '.join([keywords]*w_keywords)+' '+' '.join([str(df_row['main_actor'])]*w_actor)+' '+' '.join([str(df_row['director'])]*w_director)+' '+' '.join([str(df_row['release_date'])]*w_release_date)
-def userDbToDf():
- '''
- This function convert a movie DataBase from mongoDB into a pandas DataFrame
- '''
- #load DB
- client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
- db = client.group3
- collection = db.users
-
- #projection on useful data
- cursor = collection.find({},{"_id":1, "liked_movies": 1, "update":1})
- df=pd.DataFrame(list(cursor))
-
- return df
-
def user_profile( user_index, moviesdf, usersdf, vectMatrix ):
"""
This function creates a user profile based on the likef movies of the user
@@ -199,16 +210,12 @@ def user_profile( user_index, moviesdf, usersdf, vectMatrix ):
else:
return [i for i in range(100)]
-
-def loadRecDB():
-
- #load DB
- client = MongoClient("mongodb://group3:GJF6cQqM4RLxBfNb@cs2022.lmichelin.fr:27017/group3?ssl=true")
- db = client.group3
- collection = db['recommendations']
- return collection
def updateDB():
+ """
+ This function update the recommandation DB based on the likes of thes users
+ """
+
#loadDB
moviesdf = movieDbToDf()
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..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 9654bd05beb68edf010504a101e5d901ca07e519..2651045fd702e8a673e435a25ce1aeeee2cf5068 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -3,7 +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";
+import MoviePage from "../views/MoviePage.vue";
const routes = [
{
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 8ac39981eb755bb89be165b56813bb23cf01cd8f..5064a887eb37d37a096e3e28b9bf3a753f7029c8 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,42 +1,43 @@
<template>
<div class="home">
- <div class="carousel">
- <Carousel :itemsToShow="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>
- <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 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">
+ <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>
@@ -46,6 +47,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",
@@ -67,19 +70,35 @@ 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>
@@ -112,4 +131,13 @@ li {
display: flex;
align-self: center;
}
+.name {
+ max-width: 200px;
+ justify-content: center;
+ align-items: center;
+ background-color: #eaf2ef;
+}
+.corps {
+ display: flex;
+}
</style>