From 802903c99d2cb070f734bd5b64d78bf632ea5203 Mon Sep 17 00:00:00 2001 From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr> Date: Fri, 3 Jun 2022 16:25:49 +0200 Subject: [PATCH] first commit --- frontend/src/components/Movie.vue | 37 ++++++++ frontend/src/views/Home.vue | 141 ++++++++++++++++-------------- 2 files changed, 111 insertions(+), 67 deletions(-) create mode 100644 frontend/src/components/Movie.vue diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue new file mode 100644 index 0000000..d3681d5 --- /dev/null +++ b/frontend/src/components/Movie.vue @@ -0,0 +1,37 @@ +<template> + <div> + <p> + <img + height="400" + :src="'https://image.tmdb.org/t/p/original/' + movie.poster_path" + /> + </p> + <p>{{ movie.title }}</p> + <p>{{ movie.release_date }}</p> + </div> +</template> + +<script> +export default { + props: { + movie: Array, + }, +}; +</script> + +<style scoped> +.center { + margin-left: auto; + margin-right: auto; +} + +table { + border-collapse: collapse; +} + +th, +td { + border: 1px solid #000000; + padding: 10px; +} +</style> diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue index afd2064..b83fe08 100644 --- a/frontend/src/views/Home.vue +++ b/frontend/src/views/Home.vue @@ -1,84 +1,80 @@ <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> - <h1>Welcome to Your Vue.js App</h1> + <h1>Welcome to Movie Website</h1> <p> For a guide and recipes on how to configure / customize this project,<br /> check out the <a href="https://cli.vuejs.org" target="_blank">vue-cli documentation</a>. </p> - <h3>Installed CLI Plugins</h3> - <ul> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" - target="_blank" - >babel</a - > - </li> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" - target="_blank" - >router</a - > - </li> - <li> - <a - href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" - target="_blank" - >eslint</a - > - </li> - </ul> - <h3>Essential Links</h3> - <ul> - <li> - <a href="https://vuejs.org" target="_blank">Core Docs</a> - </li> - <li> - <a href="https://forum.vuejs.org" target="_blank">Forum</a> - </li> - <li> - <a href="https://chat.vuejs.org" target="_blank">Community Chat</a> - </li> - <li> - <a href="https://twitter.com/vuejs" target="_blank">Twitter</a> - </li> - <li> - <a href="https://news.vuejs.org" target="_blank">News</a> - </li> - </ul> - <h3>Ecosystem</h3> - <ul> - <li> - <a href="https://router.vuejs.org" target="_blank">vue-router</a> - </li> - <li> - <a href="https://vuex.vuejs.org" target="_blank">vuex</a> - </li> - <li> - <a - href="https://github.com/vuejs/vue-devtools#vue-devtools" - target="_blank" - >vue-devtools</a - > - </li> - <li> - <a href="https://vue-loader.vuejs.org" target="_blank">vue-loader</a> - </li> - <li> - <a href="https://github.com/vuejs/awesome-vue" target="_blank" - >awesome-vue</a - > - </li> - </ul> + <p> + <input + v-model="movieName" + placeholder="Type any movie here" + type="text" + /> + </p> + <div>Nom du film: {{ movieName }}</div> + <div class="parent"> + <tr v-for="movie in movies" :key="movie.id"> + <Movie class="child" :movie="movie" /> + </tr> + </div> </div> </template> <script> +import axios from "axios"; +import Movie from "@/components/Movie"; + export default { name: "Home", + components: { + Movie, + }, + data: function () { + return { + movieName: "", + movies: [], + moviesLoadingError: "", + }; + }, + methods: { + fetchMovies: function () { + axios + .get( + `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a` + ) + .then((response) => { + // Do something if call succeeded + this.movies = response.data.results; + console.log(this.movies); + }) + .catch((error) => { + // Do something if call failed + this.usersLoadingError = "An error occured while fetching movies."; + console.error(error); + }); + }, + fetchMoviesAsync: async function () { + try { + // Do something if call succeeded + const response = await axios.get( + `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a` + ); + await (this.movies = response.data.results); + console.log(this.movies); + } catch (error) { + // Do something if call failed + this.usersLoadingError = "An error occured while fetching movies."; + console.error(error); + } + }, + }, + created() { + console.log("Hello World"); + this.fetchMoviesAsync(); + }, }; </script> @@ -88,6 +84,17 @@ export default { text-align: center; } +.parent { + display: flex; + flex-flow: row nowrap; + height: 250px; +} + +.child { + width: 40%; + height: 40%; +} + h3 { margin: 40px 0 0; } -- GitLab