From 24e8488be66a941371f26d4b18a1f31712a1b4a1 Mon Sep 17 00:00:00 2001
From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr>
Date: Wed, 8 Jun 2022 15:10:38 +0200
Subject: [PATCH] work continuation
---
frontend/src/components/Movie.vue | 48 ++++++++++++++-----------
frontend/src/components/MovieInfos.vue | 16 +++++++++
frontend/src/components/MoviePoster.vue | 16 +++++++++
frontend/src/views/MoviePage.vue | 15 ++++----
4 files changed, 68 insertions(+), 27 deletions(-)
create mode 100644 frontend/src/components/MovieInfos.vue
create mode 100644 frontend/src/components/MoviePoster.vue
diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue
index c202fab..54bad72 100644
--- a/frontend/src/components/Movie.vue
+++ b/frontend/src/components/Movie.vue
@@ -1,30 +1,38 @@
<template>
- <table>
- <thead>
- <th>Titre</th>
- <th>Date de sortie</th>
- <th>Image</th>
- </thead>
- <tbody>
- <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>
- </tr>
- </tbody>
- </table>
+ <div class="child">
+ <img
+ class="movieImage"
+ :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path"
+ />
+ <h2>{{ movie.title }}</h2>
+ <h3>{{ movie.release_date }}</h3>
+ </div>
</template>
<script>
export default {
props: {
- movies: Array,
+ movie: Array,
},
};
</script>
-<style scoped></style>
+<style scoped>
+.movieImage {
+ width: 50%;
+}
+.child {
+ margin-left: auto;
+ margin-right: auto;
+}
+
+table {
+ border-collapse: collapse;
+}
+
+th,
+td {
+ border: 1px solid #000000;
+ padding: 10px;
+}
+</style>
diff --git a/frontend/src/components/MovieInfos.vue b/frontend/src/components/MovieInfos.vue
new file mode 100644
index 0000000..6a244de
--- /dev/null
+++ b/frontend/src/components/MovieInfos.vue
@@ -0,0 +1,16 @@
+<template>
+ <img
+ :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+ hightd="100%"
+ />
+</template>
+
+<script>
+export default {
+ props: {
+ posterPath: String,
+ },
+};
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/components/MoviePoster.vue b/frontend/src/components/MoviePoster.vue
new file mode 100644
index 0000000..6a244de
--- /dev/null
+++ b/frontend/src/components/MoviePoster.vue
@@ -0,0 +1,16 @@
+<template>
+ <img
+ :src="'https://image.tmdb.org/t/p/original/' + posterPath"
+ hightd="100%"
+ />
+</template>
+
+<script>
+export default {
+ props: {
+ posterPath: String,
+ },
+};
+</script>
+
+<style scoped></style>
diff --git a/frontend/src/views/MoviePage.vue b/frontend/src/views/MoviePage.vue
index d9a9c05..6214fd6 100644
--- a/frontend/src/views/MoviePage.vue
+++ b/frontend/src/views/MoviePage.vue
@@ -4,22 +4,23 @@
<p class="movie-title">
{{ moviesInfos.title }}
</p>
- <p>
- <img
- :src="'https://image.tmdb.org/t/p/original/' + moviesInfos.poster_path"
- withd="100"
- height="300"
- />
- </p>
+ <div>
+ <MoviePoster :posterPath="moviesInfos.poster_path" />
+ <MovieInfos :infos="moviesInfos.poster_path" />
+ </div>
</div>
</template>
<script>
import axios from "axios";
+import MoviePoster from "@/components/MoviePoster.vue";
const backendURL = process.env.VUE_APP_BACKEND_BASE_URL;
export default {
name: "Home",
+ components: {
+ MoviePoster,
+ },
data: function () {
return {
movieId: "",
--
GitLab