diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue index 2e8ab7ea554ef61f31ed65ba790c8e92655cebe3..c202fabe22783c1119aeb56203d496d4e27c371a 100644 --- a/frontend/src/components/Movie.vue +++ b/frontend/src/components/Movie.vue @@ -9,7 +9,11 @@ <tr v-for="movie in movies" :key="movie.id"> <td>{{ movie.title }}</td> <td>{{ movie.release_date }}</td> - <td> <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" /> </td> + <td> + <img + :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" + /> + </td> </tr> </tbody> </table> @@ -23,5 +27,4 @@ export default { }; </script> -<style scoped> -</style> +<style scoped></style> diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js index 045929fad71bb6d978f0d9db3f6a849d9c3e4bfe..363a19aed44195fbc716bc2f71d63e4b7ffffaff 100644 --- a/frontend/src/router/index.js +++ b/frontend/src/router/index.js @@ -3,6 +3,7 @@ import Home from "../views/Home.vue"; import Counter from "../views/Counter.vue"; import Users from "../views/Users.vue"; import About from "../views/About.vue"; +import MoviePage from "../views/MoviePage"; const routes = [ { @@ -25,6 +26,11 @@ const routes = [ name: "About", component: About, }, + { + path: "/movie/:id", + name: "MoviePage", + component: MoviePage, + }, ]; const router = createRouter({ diff --git a/frontend/src/views/MoviePage.vue b/frontend/src/views/MoviePage.vue new file mode 100644 index 0000000000000000000000000000000000000000..711c97650045d987bcc50405863089e64e8127d1 --- /dev/null +++ b/frontend/src/views/MoviePage.vue @@ -0,0 +1,86 @@ +<template> + <div class="home"> + <h1>Bienvenue sur la page film</h1> + <img class="logo" alt="Vue logo" src="../assets/logo.png" /> + <br /> + <input type="text" v-model="moviename" placeholder="enter a movie name" /> + <div class="film-name">Le film est : {{ moviename }}</div> + <li v-for="movie in movies" :key="movie.id"> + <p class="movie-title"> + {{ movie.title }} + </p> + <p> + <img + :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" + withd="100" + height="300" + /> + </p> + </li> + </div> +</template> + +<script> +import axios from "axios"; +const backendURL = process.env.VUE_APP_BACKEND_BASE_URL; + +export default { + name: "Home", + data: function () { + return { + movieId: "", + moviesInfos: {}, + }; + }, + methods: { + fetchMovie: async function () { + try { + // Do something if call succeeded + const response = await axios.get( + backendURL + "/movie/id/" + this.movieId + ); + await (this.moviesInfos = response); + console.log(this.moviesInfos); + } catch (error) { + // Do something if call failed + this.usersLoadingError = "An error occured while fetching movies."; + console.error(error); + } + }, + }, + created() { + this.movieId = this.$route.params.id; + console.log(this.movieId); + this.fetchMovie(); + }, +}; +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +.home { + text-align: center; +} + +.logo { + max-width: 100px; +} + +h3 { + margin: 40px 0 0; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + display: inline-block; + margin: 0 10px; +} + +a { + color: #ff68ad; +} +</style>