wanderhome-quiz-client/client/src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
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/Index.vue'
import QuizPage from '@/views/quiz/Quiz.vue'
import Question from '@/views/quiz/Question.vue'
import NotFound from '@/views/errors/NotFound.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 = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        meta: {
            index: 0,
            svgPath: mdiHome,
            title: 'Home'
        }
    },
    {
        path: '/quiz',
        name: 'Quiz',
        component: Quiz,
        meta: {
            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',
        name: 'About',
        component: About,
        meta: {
            index: 2,
            svgPath: mdiInformation,
            title: 'About'
        },
        children: [
            {
                path: '',
                name: 'About',
                component: AboutPage,
                meta: {
                    index: 0,
                    parentIndex: 2,
                    svgPath: mdiInformation,
                    title: 'Background'
                }
            },
            {
                path: 'wanderhome',
                name: 'Wanderhome',
                component: Wanderhome,
                meta: {
                    index: 1,
                    parentIndex: 2,
                    svgPath: mdiHandCoin,
                    title: 'About Wanderhome'
                }
            },
            {
                path: 'acknowledgements',
                name: 'Acknowledgements',
                component: Acknowledgements,
                meta: {
                    index: 2,
                    parentIndex: 2,
                    svgPath: mdiAccountGroupOutline,
                    title: 'Acknowledgements'
                }
            },
            {
                path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
                name: 'SourceCode',
                meta: {
                    index: 3,
                    parentIndex: 2,
                    svgPath: mdiCodeTags,
                    title: 'View Source Code'
                }
            }
        ]
    },
    {
        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: '/err_notfound',
        name: 'NotFound',
        component: NotFound,
        meta: {
            index: -1,
            title: 'Error: Not Found',
            svgPath: mdiWeb
        }
    },
    {
        path: "/:catchAll(.*)",
        name: 'NotFound',
        redirect: '/err_notfound',
        meta: {
            index: -1,
            title: 'Error: Not Found',
            svgPath: mdiWeb
        }
    },
    {
        path: "/err_refused",
        name: 'Refused',
        component: Refused,
        meta: {
            index: -1,
            title: 'Error: Connection Refused',
            svgPath: mdiWeb
        }
    }
]

const Router = createRouter({
    history: createWebHistory(),
    routes
})

Router.beforeEach((to, from, next) => {
    if (to.meta.title != 'Home') {
        document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
    } else {
        document.title = `Wanderhome Quiz | V.S.`
    }
    next()
})

Router.afterEach( (to, from) => {
    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
        const toIndex = to.meta.parentIndex ? to.meta.parentIndex : to.meta.index
        const slideInDirection = toIndex < fromIndex ? 'md:-translate-x-1/3' : 'md:translate-x-1/3'
        const slideOutDirection = toIndex < fromIndex ? 'md:translate-x-1/3' : 'md:-translate-x-1/3'
        to.meta.mainEnterActiveClass = enterActiveClass
        to.meta.mainLeaveActiveClass = leaveActiveClass
        to.meta.mainEnterFromClass = baseFromClass + ' ' + slideInDirection
        to.meta.mainLeaveToClass = baseFromClass + ' ' + slideOutDirection
    } else if ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
        const fromIndex = from.meta.index
        const toIndex = to.meta.index
        const slideInDirection = toIndex < fromIndex ? 'md:-translate-y-1/3' : 'md:translate-y-1/3'
        const slideOutDirection = toIndex < fromIndex ? 'md:translate-y-1/3' : 'md:-translate-y-1/3'
        to.meta.panelEnterActiveClass = enterActiveClass
        to.meta.panelLeaveActiveClass = leaveActiveClass
        to.meta.panelEnterFromClass = baseFromClass + ' ' + slideInDirection
        to.meta.panelLeaveToClass = baseFromClass + ' ' + slideOutDirection
    }
})

export default Router