Merge branch 'develop' into main

package-lock.json

@@ -1377,6 +1377,12 @@
         }
       }
     },
+    "@types/uuid": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.0.tgz",
+      "integrity": "sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==",
+      "dev": true
+    },
     "@types/webpack": {
       "version": "4.41.26",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.26.tgz",
@@ -9959,6 +9965,14 @@
         "tough-cookie": "~2.5.0",
         "tunnel-agent": "^0.6.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "require-directory": {
@@ -10604,6 +10618,14 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^3.4.0",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "sockjs-client": {
@@ -11838,10 +11860,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
-      "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
-      "dev": true
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
     },
     "v8-compile-cache": {
       "version": "2.2.0",
@@ -12666,6 +12687,14 @@
       "requires": {
         "ansi-colors": "^3.0.0",
         "uuid": "^3.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.4.0.tgz",
+          "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
+          "dev": true
+        }
       }
     },
     "webpack-merge": {

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "uuid": "^8.3.2",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -4,16 +4,19 @@
     <div class="fs-content">
       <router-view />
     </div>
+    <toasts-list />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import Navbar from "@/components/Navbar.vue";
+import ToastsList from "@/components/toast/ToastsList.vue";
 
 export default defineComponent({
   components: {
-    Navbar
+    Navbar,
+    ToastsList
   }
 });
 </script>

src/api/le-systeme-solaire/index.ts

@@ -0,0 +1,30 @@
+import axios from "axios";
+
+/**
+ * Fetches the API for all celestial bodies
+ * @returns Array of celestials in the API
+ */
+export const fetchCelestials = (): Promise<any> => {
+  return axios
+    .get("https://api.le-systeme-solaire.net/rest/bodies/")
+    .then(res => {
+      return res.data.bodies;
+    });
+};
+
+/**
+ * Fetches the API for all celestial bodies
+ * @returns Array of celestials in the API
+ */
+export const fetchCelestial = (slug: string): Promise<any> => {
+  return axios
+    .get(`https://api.le-systeme-solaire.net/rest/bodies/${slug}`)
+    .then(res => {
+      return res.data;
+    });
+};
+
+export default {
+  fetchCelestials,
+  fetchCelestial
+};

src/api/wikipedia/index.ts

@@ -0,0 +1,36 @@
+import axios from "axios";
+
+/**
+ * Get the excerpt of the wikipedia (fr) article for the specific celestial object
+ * @param celestial A celestial object
+ */
+export const fetchWikipediaExcerpt = async (celestial: any): Promise<any> => {
+  let query = 'https://fr.wikipedia.org/w/api.php?action=opensearch';
+
+  switch (celestial.id) {
+    case "soleil":
+    case "lune":
+      query += `&search=${celestial.id}`;
+      break;
+    
+    case "planète à lunes":
+      query += `&search=${celestial.id}%20planète`;
+      break;
+  
+    default:
+      query += `&search=${celestial.id}%20${celestial.type}`;
+      break;
+  }
+
+  query += "&limit=1&namespace=0&format=json";
+
+  console.log(query);
+
+
+  const req = await axios.get(query);
+  return;
+};
+
+export default {
+  fetchWikipediaExcerpt
+}

src/assets/scss/_animations.scss

@@ -1,3 +1,14 @@
+@keyframes toggleFavHeart {
+  0%, 20% {
+    color: #d01d35;
+    transform: scale(1.2);
+  }
+  100% {
+    color: #d01d35;
+    transform: scale(1);
+  }
+}
+
 @keyframes fadeInBg {
   from {
     opacity: 0;
@@ -16,6 +27,15 @@
   }
 }
 
+@keyframes fadeOut {
+  from {
+    opacity: 100%;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes fromBottom {
   from {
     transform: translateY(20px);
@@ -25,6 +45,24 @@
   }
 }
 
+@keyframes slideFromRight {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
 @keyframes paneBgAround {
   0% {
     background-position: -10vw 0%;

src/assets/scss/_fonts.scss

@@ -1 +1,2 @@
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700;800;900&display=swap');

src/assets/scss/_global.scss

@@ -66,6 +66,18 @@ a {
   }
 }
 
+button {
+  &.no-style {
+    padding: 0;
+    background: none;
+    border: none;
+    cursor: pointer;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
 hr {
   border-color: rgba($white, .2);
 }
@@ -140,13 +152,14 @@ hr {
     width: 100%;
     background-size: cover;
     background-attachment: fixed;
+    background-repeat: no-repeat;
     z-index: -1;
     opacity: 33%;
     pointer-events: none;
   }
   &.bg-fade-in {
     &:after {
-      width: 120vw;
+      background-size: 120vw;
       opacity: 0;
       animation: fadeInBg 2s ease-out 0s 1 forwards,
       paneBgAround 35s ease-in-out 0s infinite forwards;

src/assets/scss/_variables.scss

@@ -8,6 +8,16 @@ $space-blue-600:  #234e69;
 $space-blue-500:  #457b9d;
 $space-blue-300:  #a8dadc;
 
+$blue:        #306BAC;
+$green:       #1c8267;
+$orange:      #ff9844;
+$red:         #9f2042;
+
+$info: $blue;
+$valid: $green;
+$warning: $orange;
+$danger: $red;
+
 $primary: $space-blue-700;
 $primary-light: $space-blue-600;
 

src/components/Navbar.vue

@@ -23,8 +23,8 @@ export default defineComponent({
           link: "/"
         },
         {
-          text: "Célestes",
-          link: "/celestes"
+          text: "Astres",
+          link: "/astres"
         },
         {
           text: "À propos",

src/components/celestials/CelestialCard.vue

@@ -42,6 +42,15 @@
         </p>
       </div>
 
+      <div class="card-info">
+        <router-link
+          :to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
+          class="no-style"
+        >
+          <span class="material-icons-round">info</span>
+        </router-link>
+      </div>
+
       <div class="card-content">
         <div v-if="celestial.aroundPlanet">
           <p>
@@ -75,12 +84,13 @@
       </div>
 
       <div class="card-actions">
-        <router-link
-          :to="{ name: 'CelesteSingle', params: { slug: celestial.id } }"
-          class="btn btn-primary"
+        <button
+          @click="toggleFav(celestial)"
+          class="favourite no-style"
+          :class="isFav ? 'active' : ''"
         >
-          Détails
-        </router-link>
+          <span class="icon material-icons-round">favorite</span>
+        </button>
       </div>
     </div>
   </div>
@@ -88,6 +98,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { v4 as uuidv4 } from "uuid";
+
+import store from "@/store";
 
 export default defineComponent({
   name: "celestial-card",
@@ -96,8 +109,38 @@ export default defineComponent({
       type: "unknown"
     };
   },
+  computed: {
+    isFav() {
+      if (store.getters.isFav(this.celestial?.id)) {
+        return true;
+      }
+      return false;
+    }
+  },
   props: {
     celestial: Object
+  },
+  methods: {
+    toggleFav: (celestial: any) => {
+      store.dispatch("toggleFav", celestial.id);
+      if (store.getters.isFav(celestial.id)) {
+        store.dispatch("toasts/pushToast", {
+          id: uuidv4(),
+          title: "Favori ajouté",
+          message: `${celestial.name} a été ajouté à la liste des favoris.`,
+          category: "valid",
+          timer: 3
+        });
+      } else {
+        store.dispatch("toasts/pushToast", {
+          id: uuidv4(),
+          title: "Favori retiré",
+          message: `${celestial.name} a été retiré de la liste des favoris.`,
+          category: "valid",
+          timer: 3
+        });
+      }
+    }
   }
 });
 </script>
@@ -121,8 +164,18 @@ export default defineComponent({
     .card-icon {
       display: block;
       position: absolute;
-      top: 0;
+      top: 20px;
+      bottom: 20px;
+      left: 0;
       right: 0;
+      user-select: none;
+      pointer-events: none;
+      opacity: 4%;
+      img {
+        height: 100%;
+        width: 100%;
+        z-index: -1;
+      }
     }
 
     > * {
@@ -135,6 +188,30 @@ export default defineComponent({
       flex: 1 1 auto;
       min-height: 30px;
     }
+
+    .card-info {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+
+    .card-actions {
+      color: #afafaf;
+      .favourite {
+        .icon {
+          color: #afafaf;
+        }
+        &.active {
+          .icon {
+            position: relative;
+            display: inline-block;
+            will-change: font-size;
+            animation: toggleFavHeart 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.49);
+            animation-fill-mode: forwards;
+          }
+        }
+      }
+    }
   }
 }
 </style>

src/components/celestials/CelestialFilters.vue

@@ -71,7 +71,7 @@ export default defineComponent({
   data() {
     return {
       filters: {
-        all: false,
+        all: true,
         planets: false,
         moons: false,
         stars: false,

src/components/toast/ToastCard.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="toast-card" :class="[toast.category, closing ? 'closing' : '']">
+    <div class="toast-title">
+      <slot name="title" />
+    </div>
+    <div class="toast-message">
+      <slot name="message" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+import store from "@/store";
+
+export default defineComponent({
+  name: "ToastCard",
+  data() {
+    return {
+      closing: false
+    };
+  },
+  props: {
+    toast: Object
+  },
+  methods: {
+    // Counts down until 0 is reached
+    countdown(timeToLive) {
+      if (timeToLive > 0) {
+        console.log(timeToLive);
+        setTimeout(() => {
+          timeToLive = timeToLive - 1;
+          this.countdown(timeToLive);
+        }, 900);
+      } else {
+        // When timer ends
+        this.closing = true;
+        setTimeout(() => {
+          this.close();
+        }, 1200);
+      }
+    },
+    close() {
+      store.dispatch("toasts/purgeToast", this.toast.id);
+    }
+  },
+  mounted() {
+    // Starts countdown to initial timer value
+    this.countdown(this.toast.timer);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-card {
+  position: relative;
+  width: 300px;
+  padding: 20px 30px 26px;
+  border-radius: 5px;
+  animation: fadeIn 1s cubic-bezier(0.175, 1, 0.32, 1),
+    slideFromRight 1s cubic-bezier(0.175, 1, 0.32, 1);
+  overflow: hidden;
+  .toast-title {
+    margin-bottom: 5px;
+    font-size: 16px;
+    font-weight: $fw-bold;
+  }
+  &:after {
+    position: absolute;
+    display: block;
+    content: "";
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 6px;
+    background: rgba($fs-black, 33%);
+  }
+  &.info {
+    background-color: $info;
+  }
+  &.valid {
+    background-color: $valid;
+  }
+  &.warning {
+    color: $fs-black;
+    background-color: $warning;
+  }
+  &.danger {
+    background-color: $danger;
+  }
+  &.closing {
+    animation: fadeOut 1.2s cubic-bezier(0.175, 1, 0.32, 1),
+      slideFromLeft 1.2s cubic-bezier(0.175, 1, 0.32, 1);
+  }
+}
+</style>

src/components/toast/ToastsList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="toast-wrapper">
+    <div class="toast-item" v-for="toast in queue" :key="toast.id">
+      <toast-card :variant="toast.category" :toast="toast">
+        <template #title>{{ toast.title }}</template>
+        <template #message>
+          {{ toast.message }}
+        </template>
+      </toast-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "vue";
+
+import ToastCard from "./ToastCard.vue";
+
+export default defineComponent({
+  name: "ToastsList",
+  components: {
+    ToastCard
+  },
+  computed: {
+    queue() {
+      return this.$store.state.toasts.queue;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-wrapper {
+  position: fixed;
+  top: 90px;
+  height: 100%;
+  right: 0;
+  pointer-events: none;
+  .toast-item {
+    pointer-events: all;
+    margin-right: 20px;
+    margin-bottom: 20px;
+  }
+}
+</style>

src/plugins/methods/index.ts

@@ -21,6 +21,11 @@ export const addCelestialType = (celestial: any) => {
   return celestial;
 };
 
-export default {
-  addCelestialType
+export const addCelestialsType = (celestials: any) => {
+  return celestials.map((e: any) => addCelestialType(e));
+};
+
+export default {
+  addCelestialType,
+  addCelestialsType
 };

src/router/index.ts

@@ -19,12 +19,12 @@ const routes: Array<RouteRecordRaw> = [
     component: About
   },
   {
-    path: "/celestes",
+    path: "/astres",
     name: "CelesteAll",
     component: Celestials
   },
   {
-    path: "/celestes/:slug",
+    path: "/astres/:slug",
     name: "CelesteSingle",
     component: Celestial,
     props: true

src/shims-vue.d.ts

@@ -4,3 +4,5 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>
   export default component
 }
+
+declare module 'uuid';

src/store/index.ts

@@ -1,8 +1,52 @@
 import { createStore } from "vuex";
 
+import toastStore from "./toasts";
+
 export default createStore({
-  state: {},
-  mutations: {},
-  actions: {},
-  modules: {}
+  state: () => ({
+    user: {
+      avatarUrl: "",
+      favourites: Array<{ id: string }>()
+    }
+  }),
+  getters: {
+    // Returns the number of favs for the user
+    favCount: (state): number => {
+      return state.user.favourites.length;
+    },
+    // Returns true if celestial is fav
+    isFav: state => (celestialId: string) => {
+      return state.user.favourites.find(fav => fav.id === celestialId);
+    }
+  },
+  mutations: {
+    addFav: (state, celestialId: string) => {
+      state.user.favourites.push({ id: celestialId });
+    },
+    removeFav: (state, celestialId: string) => {
+      state.user.favourites = state.user.favourites.filter(
+        fav => fav.id != celestialId
+      );
+    }
+  },
+  actions: {
+    toggleFav: ({ commit, getters }, celestialId: string) => {
+      // If the celestial is not faved
+      if (!getters.isFav(celestialId)) {
+        // ... favs it
+        commit("addFav", celestialId);
+      } else {
+        // ...else unfavs
+        commit("removeFav", celestialId);
+      }
+    }
+  },
+  modules: {
+    toasts: {
+      namespaced: true,
+      state: toastStore.state,
+      mutations: toastStore.mutations,
+      actions: toastStore.actions
+    }
+  }
 });

src/store/toasts/index.ts

@@ -0,0 +1,27 @@
+export default {
+  state: {
+    queue: Array<{
+      id: string;
+      title: string;
+      message: string;
+      category: string;
+      timer: number;
+    }>()
+  },
+  mutations: {
+    pushToast: (state: any, toast: any) => {
+      state.queue.push(toast);
+    },
+    purgeToast: (state: any, toastId: string) => {
+      state.queue = state.queue.filter((toast: any) => toast.id != toastId);
+    }
+  },
+  actions: {
+    pushToast: ({ commit }: any, toast: any) => {
+      commit("pushToast", toast);
+    },
+    purgeToast: ({ commit }: any, toastId: string) => {
+      commit("purgeToast", toastId);
+    }
+  }
+};

src/views/Home.vue

@@ -3,11 +3,11 @@
     <div class="splash fade-in-children">
       <h2 class="heading-1">Full Skies</h2>
       <p class="heading-2">
-        L'application Full Skies explore les cieux à votre place !
+        Explorez les cieux et le système solaire avec Full Skies !
       </p>
       <p class="heading-2">
         Embarquez pour un voyage stellaire ; destination : le système solaire et
-        ses astres.
+        ses astres si proches.
       </p>
     </div>
   </section>

src/views/celestials/Celestial.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="celestial bg-image">
-    <div v-if="loaded">
+    <div v-if="celestialLoaded">
       <header>
         <h1 class="heading-1">{{ celestial.name }}</h1>
       </header>
@@ -19,7 +19,9 @@
 import { defineComponent } from "vue";
 
 // API
-import axios from "axios";
+import { fetchCelestial } from "@/api/le-systeme-solaire";
+// import { fetchWikipediaExcerpt } from "@/api/wikipedia";
+
 // Global methods
 import { addCelestialType } from "@/plugins/methods";
 import NestLoader from "@/components/NestLoader.vue";
@@ -32,8 +34,9 @@ export default defineComponent({
 
   data() {
     return {
-      celestial: false,
-      loaded: false,
+      celestial: {},
+      celestialLoaded: false,
+      excerpt: "",
       error: ""
     };
   },
@@ -47,30 +50,18 @@ export default defineComponent({
 
   mounted() {
     // Fetches from API...
-    this.fetchCelestial()
+    fetchCelestial(this.slug)
       .then(res => {
-        // Adds type after fake loading (it's just to showcase the spinner tbh)
-        setTimeout(() => {
         this.celestial = addCelestialType(res);
-          this.loaded = true;
-        }, 1000);
+        this.celestialLoaded = true;
+        return this.celestial;
       })
       .catch(() => {
         this.error = "Impossible de récupérer l'astre demandé.";
+      })
+      .then(() => {
+        // fetchWikipediaExcerpt(celestial);
       });
-  },
-
-  methods: {
-    /**
-     * Fetches celestial body from API
-     */
-    fetchCelestial(): Promise<any> {
-      return axios
-        .get(`https://api.le-systeme-solaire.net/rest/bodies/${this.slug}`)
-        .then(res => {
-          return res.data;
-        });
-    }
   }
 });
 </script>

src/views/celestials/Celestials.vue

@@ -16,12 +16,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 
 // API
-import axios from "axios";
+import { fetchCelestials } from "@/api/le-systeme-solaire";
+
 // Global methods
-import { addCelestialType } from "@/plugins/methods";
+import { addCelestialsType } from "@/plugins/methods";
 
 import CelestialsList from "@/components/celestials/CelestialsList.vue";
 import NestLoader from "@/components/NestLoader.vue";
@@ -34,38 +35,21 @@ export default defineComponent({
   },
   data() {
     return {
-      celestials: Array<any>(),
       error: ""
     };
   },
 
-  mounted() {
-    this.fetchCelestials()
-      .then(res => {
-        this.celestials = this.addType(res);
-      })
-      .catch(() => {
-        this.error = "Impossible de récupérer les astres.";
-      });
-  },
+  setup() {
+    const celestials = ref(Array<any>());
 
-  methods: {
-    /**
-     * Fetches celestial bodies from API
-     */
-    fetchCelestials(): Promise<any> {
-      return axios
-        .get("https://api.le-systeme-solaire.net/rest/bodies/")
-        .then(res => {
-          return res.data.bodies;
-        });
-    },
-    /**
-     * Assign a type from the celestial object provided
-     */
-    addType(bodies: Array<any>): Array<any> {
-      return bodies.map((e: any) => addCelestialType(e));
-    }
+    const getCelestials = async () => {
+      celestials.value = await fetchCelestials();
+      celestials.value = addCelestialsType(celestials.value);
+    };
+
+    onMounted(getCelestials);
+
+    return { celestials };
   }
 });
 </script>