diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7aaa95a6926b8bc8228ef1b4c6b13f2fd7cb4162..bfc105717922d387cc711c1c7ba3e1efb6e43f03 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 0000000000000000000000000000000000000000..7c8e48ee2ec06691667b6bc0c782ed9f6175de7e --- /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 0000000000000000000000000000000000000000..83fcd5038a6b17bf50cee617f6886ef6030b96a5 --- /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 0000000000000000000000000000000000000000..5ff3a3035360957121ffbcb26f9345be471a640b --- /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 71a259c06c121d07f008a75abbb1effd031bf8d8..2fb75bb79bc016e01d464c0f210d7bb417228963 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>