- Added detail pages for both spells and schools

client/src/pages/index-page.vue

@@ -5,7 +5,9 @@
         <h1 class="title text-dark mb-4 font-display font-weight-black line-height-100">"C'est magique, ta gueule."</h1>
         <div class="lead font-display font-weight-bold">— N'importe quel MJ, une fois dans sa vie</div>
         <hr class="w-50">
-                <div class="lead"><span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.</div>
+        <div class="lead">
+          <span class="font-display font-weight-bold">Auracle</span> est une base de données publique en ligne pour sortilèges, en soutien au jeu de rôle sur table <span class="font-weight-bold text-secondary">Leïm</span>.
+        </div>
       </main>
     </section>
   </div>

client/src/pages/schools/single-school-page.vue

@@ -7,42 +7,40 @@
 </template>
 
 <script>
-import SpellsList from "~/components/spells/spells-list"
-
 // API
-import { RepositoryFactory } from "~/api/repositories"
-const Schools = RepositoryFactory.get('schools')
+import { RepositoryFactory } from "~/api/repositories";
+const Schools = RepositoryFactory.get('schools');
+
+import SpellsList from "~/components/spells/spells-list";
 
 export default {
   name: 'single-school-page',
-  metaInfo: {
-    titleTemplate: '%s - Maîtrise I'
+  metaInfo() {
+    return {
+      titleTemplate: `%s - ${this.school.name}`,
+    }
   },
   components: {
     'spell-list': SpellsList,
   },
   data() {
     return {
-      loading: false,
+      id: this.$route.params.id,
       school: {},
-      id: this.$route.params.id
+      errors: {
+        loading: "",
+      }
     }
   },
   created() {
-    this.computeSchool();
+    Schools.getOne(this.id)
+      .then(v => {
+        this.school = v.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
   },
-  methods: {
-    async fetchSchool(id) {
-      const { data } = await Schools.getOne(id);
-      return data;
-    },
-    async computeSchool() {
-      this.loading = true;
-      const displaySchool = await this.fetchSchool(this.id);
-      this.loading = false;
-      this.school = displaySchool;
-    },
-  }
 }
 </script>
 

client/src/pages/spells/single-spell-page.vue

@@ -1,14 +1,38 @@
 <template>
   <div class="container-fluid p-4" id="spell-container">
-    <h1 class="display-3 font-display mb-3">Sortilège I</h1>
-  </div>
+    <h1 class="display-3 font-display mb-3">{{ spell.name }}</h1>
+    <p>{{ spell.description }}</p>  </div>
 </template>
 
 <script>
+// API
+import { RepositoryFactory } from "~/api/repositories";
+const Spells = RepositoryFactory.get('spells');
+
 export default {
   name: 'single-spell-page',
-  metaInfo: {
-    titleTemplate: '%s - Sortilège I'
+  metaInfo() {
+    return {
+      titleTemplate: `%s - ${this.spell.name}`,
+    }
+  },
+  data() {
+    return {
+      id: this.$route.params.id,
+      spell: {},
+      errors: {
+        loading: "",
+      }
+    }
+  },
+  created() {
+    Spells.getOne(this.id)
+      .then(v => {
+        this.spell = v.data;
+      })
+      .catch(err => {
+        console.log(err);
+      });
   },
 }
 </script>

client/src/pages/timelines/timeline-page.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="container-fluid p-4" id="spell-container">
     <h1 class="display-3 font-display mb-3">Chronologie</h1>
+    <timeline/>
   </div>
 </template>
 
 <script>
+import Timeline from "~/components/timeline/timeline"
+
 export default {
   name: 'timeline-page',
   metaInfo: {
     titleTemplate: '%s - Âges'
   },
+  components: {
+    'timeline': Timeline
+  }
 }
 </script>
 

client/src/pages/user/profile-page.vue

@@ -16,6 +16,9 @@
 
 export default {
   name: 'profile-page',
+  metaInfo: {
+    titleTemplate: '%s - Profil'
+  },
   data() {
     return {
     }
@@ -36,9 +39,6 @@ export default {
       return new Intl.DateTimeFormat("fr", date_options).format(raw_date);
     }
   },
-  metaInfo: {
-    titleTemplate: '%s - Profil'
-  }
 }
 </script>