Ajout Page Launch

Ajout du Composant LaunchPage Hydratation de la Page avec l'API Création de la page LaunchNotFound Début design Header & Footer
hippothomas · Jan 26, 2021 · 9b37f61 · 9b37f61
1 parent defb39d
commit 9b37f61
Show file tree

Hide file tree

Showing 8 changed files with 262 additions and 27 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,35 +1,64 @@
 <template>
   <div id="app">
     <div id="nav">
-      <router-link to="/">Accueil</router-link> |
-      <router-link to="/favoris">Favoris</router-link>
+      <div class="title">
+        <router-link to="/">SpaceX Launches</router-link>
+      </div>
+      <div class="links-router">
+        <router-link to="/">Accueil</router-link>
+        <router-link to="/favorites">Favoris</router-link>
+      </div>
+    </div>
+    <div id="wrapper">
+      <router-view/>
     </div>
-    <router-view/>
     <div id="footer">
       &copy; SpaceX Launches - 2020
     </div>
   </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
+body {
+  margin: 0;
 
-  a {
-    font-weight: bold;
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: center;
     color: #2c3e50;
+  }
+
+  #wrapper {
+    min-height: calc(100vh - 120px);
+  }
 
-    &.router-link-exact-active {
-      color: #42b983;
+  #nav {
+    background: #1b1b1b;
+    color: #fff;
+    padding: 20px;
+    margin-bottom: 25px;
+    display: flex;
+    justify-content: space-between;
+
+    .title {
+      font-weight: bold;
+    }
+
+    a {
+      color: #fff;
+      margin-left: 15px;
+      text-decoration: none;
+
+      &.router-link-exact-active {
+        text-decoration: underline;
+      }
     }
   }
+
+  #footer {
+    margin-bottom: 10px;
+  }
 }
 </style>
diff --git a/src/assets/star _empty.png → src/assets/star_empty.png b/src/assets/star _empty.png → src/assets/star_empty.png
diff --git a/src/components/LaunchList.vue b/src/components/LaunchList.vue
@@ -14,10 +14,10 @@
             {{data.details}}
         </div>
         <div class="favorite">
-            <img src="../assets/star.png" alt="Ajouter aux Favoris" />
+            <img src="../assets/star_empty.png" alt="Ajouter aux Favoris" />
         </div>
         <div class="read-more">
-            <a href="#">Lire la suite...</a>
+            <a :href="'/launch/' + data.name + '-' + data.id">Lire la suite...</a>
         </div>
     </div>
   </div>
@@ -66,7 +66,9 @@ export default {
         }
 
         .description {
-            text-align: center;
+            max-height: 105px;
+            overflow: hidden;
+            text-align: left;
         }
 
         .favorite {
@@ -87,7 +89,7 @@ export default {
 
             a {
                 color: #fff;
-                background: cornflowerblue;
+                background: #1b1b1b;
                 text-decoration: none;
                 padding: 8px 13px;
                 border-radius: 4px;

diff --git a/src/components/LaunchPage.vue b/src/components/LaunchPage.vue
@@ -0,0 +1,141 @@
+<template>
+  <div id="launch">
+    <div class="slider" v-if="launch.links.patch.large != null">
+      <img :src="launch.links.patch.large" :alt="launch.name + ' Patch'">
+    </div>
+    <div class="slider" v-else>
+      <img src="../assets/not_available.png" :alt="launch.name">
+    </div>
+    <div class="informations">
+      <div class="title">{{launch.name}}</div>
+      <div class="date">
+        {{date.toLocaleString()}}
+      </div>
+      <div class="details">
+        {{launch.details}}
+      </div>
+      <div class="rocket" v-if="rocket.name != null">
+        Rocket : <a :href="rocket.wikipedia" target="_blank">{{rocket.name}}</a>
+      </div>
+      <div class="launchpad" v-if="launchpad != null">Launchpad : {{launchpad}}</div>
+      <div class="links">
+        <div class="article">
+          <a :href="launch.links.article" target="_blank">Lire l'article</a>
+        </div>
+        <div class="wikipedia">
+          <a :href="launch.links.wikipedia" target="_blank">Page Wikipédia</a>
+        </div>
+      </div>
+      <div class="webcast" v-if="launch.links.youtube_id != null">
+        <iframe width="560"
+                height="315"
+                :src="'https://www.youtube.com/embed/' + launch.links.youtube_id"
+                frameborder="0"
+                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen></iframe>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LaunchPage',
+  props: {
+    launch: Object,
+  },
+  data() {
+    return {
+      rocket: {
+        name: null,
+        wikipedia: null,
+      },
+      launchpad: null,
+      date: null,
+    };
+  },
+  created() {
+    this.date = new Date(this.launch.date_utc);
+
+    if (this.launch.rocket != null) {
+      this.$axios.get(`https://api.spacexdata.com/v4/rockets/${this.launch.rocket}`)
+        .then((response) => {
+          this.rocket.name = response.data.name;
+          this.rocket.wikipedia = response.data.wikipedia;
+        });
+    }
+
+    if (this.launch.launchpad != null) {
+      this.$axios.get(`https://api.spacexdata.com/v4/launchpads/${this.launch.launchpad}`)
+        .then((response) => {
+          this.launchpad = response.data.name;
+        });
+    }
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+#launch {
+  width: 80%;
+  max-width: 950px;
+  margin: auto;
+  margin-bottom: 30px;
+  display: flex;
+  align-items: flex-start;
+
+  .slider {
+    width: calc(50% - 10px);
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .informations {
+    width: 50%;
+    text-align: left;
+    padding-left: 15px;
+
+    .title {
+      font-weight: bold;
+      font-size: 30px;
+    }
+
+    .date {
+      color: grey;
+      font-weight: lighter;
+      margin-bottom: 25px;
+    }
+
+    .details {
+      margin-bottom: 15px;
+    }
+
+    .rocket a  {
+      color: inherit;
+    }
+
+    .links {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      display: flex;
+
+      > div {
+        margin-right: 10px;
+
+        a {
+          color: #fff;
+          background-color: #1b1b1b;
+          text-decoration: none;
+          padding: 8px 13px;
+          border-radius: 4px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
@@ -11,12 +11,20 @@ const routes = [
     component: Accueil,
   },
   {
-    path: '/favoris',
+    path: '/favorites',
     name: 'Favoris',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/Favorites.vue'),
+    component: () => import('../views/Favorites.vue'),
+  },
+  {
+    path: '/launch/404',
+    name: 'LaunchNotFound',
+    component: () => import('../views/LaunchNotFound.vue'),
+  },
+  {
+    path: '/launch/:launch',
+    name: 'Launch',
+    props: true,
+    component: () => import('../views/Launch.vue'),
   },
 ];
 

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -12,7 +12,7 @@ import List from '@/components/List.vue';
 
 export default {
   name: 'Accueil',
-  data: function data() {
+  data() {
     return {
       launches: {},
     };

diff --git a/src/views/Launch.vue b/src/views/Launch.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="launch-wrap">
+    <LaunchPage v-if="launch.links != undefined" :launch="launch"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import LaunchPage from '@/components/LaunchPage.vue';
+
+export default {
+  name: 'Launch',
+  props: ['launchPath'],
+  data() {
+    return {
+      launch: {},
+    };
+  },
+  components: {
+    LaunchPage,
+  },
+  mounted() {
+    let id = this.$route.path.split('-');
+    id = id[id.length - 1];
+
+    this.$axios.get(`https://api.spacexdata.com/v4/launches/${id}`)
+      .then((response) => {
+        this.launch = response.data;
+      })
+      .catch((error) => {
+        console.log(error);
+        this.$router.push('/launch/404');
+      });
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/LaunchNotFound.vue b/src/views/LaunchNotFound.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>404</div>
+</template>
+
+<script>
+export default {
+  name: 'LaunchNotFound',
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+
+</style>