From 8a53592e63b7f9188fcb039b00e6f81931e01b13 Mon Sep 17 00:00:00 2001
From: El Yaagoubi Bilel <bilel.el-yaagoubi@student-cs.fr>
Date: Sun, 5 Jun 2022 02:59:33 +0200
Subject: [PATCH] view Home
---
frontend/src/views/Home.vue | 146 +++++++++++++++++++-----------------
1 file changed, 78 insertions(+), 68 deletions(-)
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index afd2064..a9c940f 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,84 +1,83 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
- <h1>Welcome to Your Vue.js App</h1>
- <p>
+ <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">
+ <Movie
+ class="child"
+ :movie="movie"
+ v-for="movie in movies"
+ :key="movie.id"
+ />
+ </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 +87,17 @@ export default {
text-align: center;
}
+.parent {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
+ justify-content: space-evenly;
+}
+
+.child {
+ width: 20%;
+}
+
h3 {
margin: 40px 0 0;
}
--
GitLab