Added a lot of routes and views

client/src/router/index.js

@@ -1,11 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { mdiAccountGroupOutline, mdiAccountQuestion, mdiCodeTags, mdiHandCoin, mdiHome, mdiInformation } from '@mdi/js'
+import { mdiAccountBoxMultiple, mdiAccountGroupOutline, mdiAccountQuestion, mdiChartBox, mdiCodeTags, mdiCounter, mdiEarth, mdiHandCoin, mdiHome, mdiInformation, mdiWeb } from '@mdi/js'
 import About from '@/views/about/Index.vue'
 import AboutPage from '@/views/about/About.vue'
 import Acknowledgements from '@/views/about/Acknowledgements.vue'
 import Wanderhome from '@/views/about/Wanderhome.vue'
 import Home from '@/views/Home.vue'
-import Quiz from '@/views/Quiz.vue'
+import Quiz from '@/views/quiz/Index.vue'
+import QuizPage from '@/views/quiz/Quiz.vue'
+import Question from '@/views/quiz/Question.vue'
+import Error404 from '@/views/errors/Error404.vue'
+import Refused from '@/views/errors/Refused.vue'
+import Results from '@/views/results/Index.vue'
+import ResultsPage from '@/views/results/Results.vue'
+import Scores from '@/views/results/Scores.vue'
+import Answers from '@/views/results/Answers.vue'
+import Statistics from '@/views/results/Statistics.vue'
 
 const routes = [
     {
@@ -26,7 +35,32 @@ const routes = [
             index: 1,
             svgPath: mdiAccountQuestion,
             title: 'Take the Quiz'
-        }
+        },
+        children: [
+            {
+                path: '',
+                name: 'Quiz',
+                component: QuizPage,
+                meta: {
+                    index: 0,
+                    parentIndex: 1,
+                    title: 'Take the Quiz'
+                }
+            },
+            {
+                path: 'question/:id',
+                name: 'Question',
+                component: Question,
+                props: route => ({
+                    id: parseInt(route.params.id)
+                }),
+                meta: {
+                    index: 1,
+                    parentIndex: 1,
+                    title: 'Take the Quiz'
+                }
+            }
+        ]
     },
     {
         path: '/about',
@@ -82,6 +116,92 @@ const routes = [
                 }
             }
         ]
+    },
+    {
+        path: '/results',
+        name: 'Results',
+        component: Results,
+        meta: {
+            index: -1,
+            title: 'Results',
+            svgPath: mdiAccountBoxMultiple
+        },
+        children: [
+            {
+                path: '',
+                name: 'Result',
+                component: ResultsPage,
+                meta: {
+                    index: 0,
+                    title: 'Your Results',
+                    svgPath: mdiAccountBoxMultiple,
+                    parentIndex: -1
+                }
+            },
+            {
+                path: 'all',
+                name: 'Scores',
+                component: Scores,
+                meta: {
+                    index: 1,
+                    title: 'All Scores',
+                    svgPath: mdiCounter,
+                    parentIndex: -1
+                }
+            },
+            {
+                path: 'statistics',
+                name: 'Statistics',
+                component: Statistics,
+                meta: {
+                    index: 2,
+                    title: 'Statistics',
+                    svgPath: mdiChartBox,
+                    parentIndex: -1
+                }
+            },
+            {
+                path: 'answers',
+                name: 'Answers',
+                component: Answers,
+                meta: {
+                    index: 3,
+                    title: 'Global Answers',
+                    svgPath: mdiEarth,
+                    parentIndex: -1
+                }
+            }
+        ]
+    },
+    {
+        path: '/404',
+        name: 'Error404',
+        component: Error404,
+        meta: {
+            index: -1,
+            title: 'Error 404: Not Found',
+            svgPath: mdiWeb
+        }
+    },
+    {
+        path: "/:catchAll(.*)",
+        name: 'NotFound',
+        redirect: '/404',
+        meta: {
+            index: -1,
+            title: 'Error 404: Not Found',
+            svgPath: mdiWeb
+        }
+    },
+    {
+        path: "/err_refused",
+        name: 'Refused',
+        component: Refused,
+        meta: {
+            index: -1,
+            title: 'Error: Connection Refused',
+            svgPath: mdiWeb
+        }
     }
 ]
 
@@ -100,8 +220,8 @@ Router.beforeEach((to, from, next) => {
 })
 
 Router.afterEach( (to, from) => {
-    const enterActiveClass = 'transition-all duration-300 ease-in'
-    const leaveActiveClass = 'transition-all duration-300 ease-out'
+    const enterActiveClass = 'transition-all duration-300 origin-top ease-in'
+    const leaveActiveClass = 'transition-all duration-300 origin-top ease-out'
     const baseFromClass = 'transform opacity-0 md:scale-75'
     if ( to.fullPath.split('/')[1] !== from.fullPath.split('/')[1] || !from.matched.length ) {
         const fromIndex = from.meta.parentIndex ? from.meta.parentIndex : from.meta.index