From ddaac8e7c410b5de9268be40770d3bf802562cf5 Mon Sep 17 00:00:00 2001
From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr>
Date: Wed, 8 Jun 2022 12:30:47 +0200
Subject: [PATCH] beginning of work
---
frontend/src/components/Movie.vue | 9 ++--
frontend/src/router/index.js | 6 +++
frontend/src/views/MoviePage.vue | 86 +++++++++++++++++++++++++++++++
3 files changed, 98 insertions(+), 3 deletions(-)
create mode 100644 frontend/src/views/MoviePage.vue
diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue
index 2e8ab7e..c202fab 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 045929f..363a19a 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 0000000..711c976
--- /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>
--
GitLab