From b76fdc2b9b9a7de1a32d90590a2f3316f5144438 Mon Sep 17 00:00:00 2001
From: Tom Bray <tom.bray@student-cs.fr>
Date: Fri, 3 Jun 2022 10:32:11 +0200
Subject: [PATCH 1/3] Initialisation de la branche

---
 frontend/src/views/Home.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index afd2064..71a259c 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -2,6 +2,8 @@
   <div class="home">
     <img alt="Vue logo" src="../assets/logo.png" />
     <h1>Welcome to Your Vue.js App</h1>
+    <input type="text"  v-model="moviename" />
+    <div class="film-name">Le film est : {{ moviename }}</div>
     <p>
       For a guide and recipes on how to configure / customize this project,<br />
       check out the
@@ -79,6 +81,11 @@
 <script>
 export default {
   name: "Home",
+  data: function () {
+    return {
+      moviename: 'test',
+    };
+  },
 };
 </script>
 
-- 
GitLab


From 09a1f0d571af56ba9613f661b0c6742075bf67cf Mon Sep 17 00:00:00 2001
From: Tom Bray <tom.bray@student-cs.fr>
Date: Fri, 3 Jun 2022 16:11:36 +0200
Subject: [PATCH 2/3] Initialisation front

---
 frontend/src/App.vue               |  36 +++++-----
 frontend/src/components/Banner.vue |  17 +++++
 frontend/src/components/Footer.vue |  17 +++++
 frontend/src/components/NavBar.vue |  30 +++++++++
 frontend/src/views/Home.vue        | 103 ++++++++---------------------
 5 files changed, 109 insertions(+), 94 deletions(-)
 create mode 100644 frontend/src/components/Banner.vue
 create mode 100644 frontend/src/components/Footer.vue
 create mode 100644 frontend/src/components/NavBar.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7aaa95a..bfc1057 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,25 +1,23 @@
 <template>
-  <div class="nav">
-    <router-link class="nav-link" to="/">Home</router-link> |
-    <router-link class="nav-link" to="/counter">Counter</router-link> |
-    <router-link class="nav-link" to="/users">Users</router-link> |
-    <router-link class="nav-link" to="/about">About</router-link>
-  </div>
+  <Banner />
+  <NavBar />
   <router-view />
+  <Footer />
 </template>
 
-<style scoped>
-.nav {
-  text-align: center;
-  padding: 30px;
-}
+<script>
+import NavBar from "@/components/NavBar.vue";
+import Footer from "@/components/Footer.vue";
+import Banner from "@/components/Banner.vue";
 
-.nav-link {
-  font-weight: bold;
-  color: #2c3e50;
-}
+export default {
+  name: "App",
+  components: {
+    NavBar,
+    Footer,
+    Banner,
+  },
+};
+</script>
 
-.nav-link.router-link-exact-active {
-  color: #42b983;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
new file mode 100644
index 0000000..7c8e48e
--- /dev/null
+++ b/frontend/src/components/Banner.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="banner">
+    <img alt="Vue logo" src="../assets/logo.png" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner",
+};
+</script>
+
+<style>
+.banner {
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
new file mode 100644
index 0000000..83fcd50
--- /dev/null
+++ b/frontend/src/components/Footer.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="footer">
+    <h4>Footer</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Footer",
+};
+</script>
+
+<style>
+.footer {
+  text-align: center;
+}
+</style>
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
new file mode 100644
index 0000000..5ff3a30
--- /dev/null
+++ b/frontend/src/components/NavBar.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="nav">
+    <router-link class="nav-link" to="/">Accueil</router-link> |
+    <router-link class="nav-link" to="/counter">Counter</router-link> |
+    <router-link class="nav-link" to="/users">Users</router-link> |
+    <router-link class="nav-link" to="/about">About</router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NavBar",
+};
+</script>
+
+<style scoped>
+.nav {
+  text-align: center;
+  padding: 30px;
+}
+
+.nav-link {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+.nav-link.router-link-exact-active {
+  color: #42b983;
+}
+</style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 71a259c..2fb75bb 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,91 +1,44 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <h1>Welcome to Your Vue.js App</h1>
-    <input type="text"  v-model="moviename" />
+    <h1>Bienvenue sur CaCaoCritics</h1>
+    <input type="text" v-model="moviename" />
     <div class="film-name">Le film est : {{ moviename }}</div>
-    <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>
+    <li v-for="movie in movies" :key="movie.id">
+      {{ movie.title }}
+    </li>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   name: "Home",
   data: function () {
     return {
-      moviename: 'test',
+      moviename: "test",
+      movies: [],
+      moviesLoadingError: "",
     };
   },
+  methods: {
+    fetchMovies: function () {
+      axios
+        .get(
+          `https://api.themoviedb.org/3/movie/popular?api_key=522d421671cf75c2cba341597d86403a`
+        )
+        .then((response) => {
+          this.movies = response.data.results;
+        })
+        .catch((error) => {
+          this.moviesLoadingError = "An error occured while fetching movies.";
+          console.error(error);
+        });
+    },
+  },
+  created() {
+    this.fetchMovies();
+  },
 };
 </script>
 
-- 
GitLab


From a244548e71338b1ed89608177ad68899ee421e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Juliette=20Kalfl=C3=A8che?=
 <juliette.kalfleche@student-cs.fr>
Date: Fri, 3 Jun 2022 17:05:31 +0200
Subject: [PATCH 3/3] initialisation

---
 frontend/src/assets/logo.png       | Bin 6849 -> 3026 bytes
 frontend/src/components/Banner.vue |   5 +++--
 frontend/src/components/Footer.vue |   1 +
 frontend/src/components/Movie.vue  |  27 +++++++++++++++++++++++++++
 frontend/src/components/NavBar.vue |   2 +-
 frontend/src/views/Home.vue        |  15 +++++++++++----
 6 files changed, 43 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/Movie.vue

diff --git a/frontend/src/assets/logo.png b/frontend/src/assets/logo.png
index f3d2503fc2a44b5053b0837ebea6e87a2d339a43..abae93914fcfa57de1be67d23b56816fa21f8975 100644
GIT binary patch
literal 3026
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

literal 6849
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
Hr-UW|hR3J6

diff --git a/frontend/src/components/Banner.vue b/frontend/src/components/Banner.vue
index 7c8e48e..1080e09 100644
--- a/frontend/src/components/Banner.vue
+++ b/frontend/src/components/Banner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="banner">
-    <img alt="Vue logo" src="../assets/logo.png" />
+   <Text>CaCaoCritics</Text>
   </div>
 </template>
 
@@ -12,6 +12,7 @@ export default {
 
 <style>
 .banner {
-  text-align: center;
+  text-align: left;
+  background-color: #FF68AD;
 }
 </style>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
index 83fcd50..12c47ba 100644
--- a/frontend/src/components/Footer.vue
+++ b/frontend/src/components/Footer.vue
@@ -13,5 +13,6 @@ export default {
 <style>
 .footer {
   text-align: center;
+  background-color: #FF68AD;
 }
 </style>
diff --git a/frontend/src/components/Movie.vue b/frontend/src/components/Movie.vue
new file mode 100644
index 0000000..2e8ab7e
--- /dev/null
+++ b/frontend/src/components/Movie.vue
@@ -0,0 +1,27 @@
+<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>
+</template>
+
+<script>
+export default {
+  props: {
+    movies: Array,
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 5ff3a30..f87eacb 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -25,6 +25,6 @@ export default {
 }
 
 .nav-link.router-link-exact-active {
-  color: #42b983;
+  color: #FF68AD;
 }
 </style>
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 2fb75bb..0a2fe0f 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,10 +1,17 @@
 <template>
   <div class="home">
     <h1>Bienvenue sur CaCaoCritics</h1>
-    <input type="text" v-model="moviename" />
+    <img 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">
-      {{ movie.title }}
+    <p>
+      {{ movie.title }} 
+    </p>
+    <p>
+      <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" />
+    </p>
     </li>
   </div>
 </template>
@@ -16,7 +23,7 @@ export default {
   name: "Home",
   data: function () {
     return {
-      moviename: "test",
+      moviename: "",
       movies: [],
       moviesLoadingError: "",
     };
@@ -63,6 +70,6 @@ li {
 }
 
 a {
-  color: #42b983;
+  color: #FF68AD;
 }
 </style>
-- 
GitLab