Merge branch 'initialisation-front' into 'master'

Vrai front

See merge request !6

frontend/src/App.vue

 <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>

frontend/src/components/Banner.vue

+<template>
+  <div class="banner">
+   <Text>CaCaoCritics</Text>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Banner",
+};
+</script>
+
+<style>
+.banner {
+  text-align: left;
+  background-color: #FF68AD;
+}
+</style>

frontend/src/components/Footer.vue

+<template>
+  <div class="footer">
+    <h4>Footer</h4>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Footer",
+};
+</script>
+
+<style>
+.footer {
+  text-align: center;
+  background-color: #FF68AD;
+}
+</style>

frontend/src/components/Movie.vue

+<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>

frontend/src/components/NavBar.vue

+<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: #FF68AD;
+}
+</style>

frontend/src/views/Home.vue

 <template>
   <div class="home">
+    <h1>Bienvenue sur CaCaoCritics</h1>
     <img alt="Vue logo" src="../assets/logo.png" />
-    <h1>Welcome to Your Vue.js App</h1>
+    <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>
-      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>.
+      {{ movie.title }} 
+    </p>
+    <p>
+      <img :src= "'https://image.tmdb.org/t/p/original/' + movie.poster_path" withd="100" height="300" />
     </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>
   </div>
 </template>
 
 <script>
+import axios from "axios";
+
 export default {
   name: "Home",
+  data: function () {
+    return {
+      moviename: "",
+      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>
 
@@ -103,6 +70,6 @@ li {
 }
 
 a {
-  color: #42b983;
+  color: #FF68AD;
 }
 </style>