science-quest/src/components/PagePrincipale.vue

@@ -1,5 +1,5 @@
 <script>
-import { NOM_APP } from "../assets/const";
+import { NOM_APP } from "@/assets/const";
 
 export default {
     data() {
@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../scss/landingPage.scss";
+@import "@/scss/landingPage.scss";
 </style>
 
 <template>
@@ -27,7 +27,7 @@ export default {
                 <router-link to="/kahoot" class="btn btn-dark">Kahoot 🚧</router-link>
                 <router-link to="/qui_est_ce" class="btn btn-dark">Qui-est-ce ? 🚧</router-link>
             </div>
-            <img src="../temporary_ressources/img/marie-curie.png" alt="Marie Curie" />
+            <img src="@/temporary_ressources/img/marie-curie.png" alt="Marie Curie" />
         </div>   
     </div>
     <footer>

science-quest/src/components/Titre.vue

@@ -1,5 +1,5 @@
 <script>
-import { NOM_APP } from "../assets/const";
+import { NOM_APP } from "@/assets/const";
 
 export default{
     data(){
@@ -18,7 +18,7 @@ export default{
 
 <template>
         <!-- logo temporaire
-        <img alt="Vue logo" src="../assets/logo.png" />
+        <img alt="Vue logo" src="@/assets/logo.png" />
         -->
 <nav class="navbar navbar-expand-lg bg-body-tertiary">
   <div class="container-fluid">

science-quest/src/components/admin/VoirScientifiques.vue

@@ -1,16 +1,51 @@
 <script>
+import { REST_API } from '@/assets/const';
+
 import LigneScientifique from './ligneScientifique.vue';
 
 export default{
     data() {
         return {
             //données obtenues par l'api
-            scientifiques: [
-            {prenom:"marie",nom:"curie",date:"1900-01-13",descriptif:"radaition qqch comme ca"},
-            {prenom:"albert",nom:"einstein",date:"1900-01-13",descriptif:"theorie"}
-            ]
+            scientifiques: [],
+            page:0,
+            self:"",
+            //HATEOAS
+            last:null, // a prendre a partir de la requete
+            prev:null,
+            next:null,
+            last:null,
         };
     },
+    mounted(){
+        //TODO faire route pour prendre la page a partir de l'URL
+        this.self=`${REST_API}/scientifiques?page=${this.page}`
+        this.getScientifiques(this.self)
+    },
+    methods:{
+        getScientifiques(url){
+            //HACK : s'assurer que les liens sont en HTTPS
+            url=url.replace("http://", "https://")
+            //enlever les anciens du tableau
+            this.scientifiques=[]
+            //TODO : ajouter un delai si jamais la requete est trop rapide pour VueJS
+            //appeler l'API
+            fetch(url).then(response=>{
+                response.json().then(json=>{
+                    const oldLength=this.scientifiques.length
+                    //prendre les scientifiques de la requete
+                    this.scientifiques.push(...json._embedded)
+
+                    //HATEOAS
+                    this.self=json._links.self.href;
+                    this.first=json._links.first ? json._links.first.href : null;
+                    this.prev=json._links.prev ? json._links.prev.href : null;
+                    this.next=json._links.next ? json._links.next.href : null;
+                    this.last=json._links.last ? json._links.last.href : null;
+                })
+            })
+        }
+    },
     components: { LigneScientifique }
 }
 </script>
@@ -31,9 +66,13 @@ export default{
     <LigneScientifique v-for="scientifique in scientifiques"
     :prenom="scientifique.prenom"
     :nom="scientifique.nom"
-    :date="scientifique.date"
+    :date="scientifique.dateNaissance"
     :descriptif="scientifique.descriptif"
     ></LigneScientifique>
 </tbody>
     </table>
+    <button :class="{ invisible: !first }" class="btn btn-secondary" @click="this.getScientifiques(this.first)">First</button>
+    <button :class="{ invisible: !prev }"  class="btn btn-secondary" @click="this.getScientifiques(this.prev)">Prev</button>
+    <button :class="{ invisible: !next }"  class="btn btn-secondary" @click="this.getScientifiques(this.next)">Next</button>
+    <button :class="{ invisible: !last }"  class="btn btn-secondary" @click="this.getScientifiques(this.last)">Last</button>
 </template>

science-quest/src/components/jeux/kahoot/Kahoot.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../../scss/kahoot.scss";
+@import "@/scss/kahoot.scss";
 </style>
 
 <template>

science-quest/src/components/jeux/pendu/Pendu.vue

@@ -1,6 +1,6 @@
 <script>
 import PenduDessin from './PenduDessin.vue'
-import { REST_API } from "../../../assets/const";
+import { REST_API } from "@/assets/const";
 
 export default{
     data() {