307 lines
9.9 KiB
JavaScript
307 lines
9.9 KiB
JavaScript
import { createRouter, createWebHistory } from 'vue-router'
|
|
import { mdiAccountBoxMultiple, mdiAccountGroupOutline, mdiAccountQuestion, mdiChartBox, mdiCodeTags, mdiCompare, mdiCounter, mdiForum, mdiHandCoin, mdiHome, mdiInformation, mdiLicense, mdiWeb } from '@mdi/js'
|
|
import About from '@/views/about/Index.vue'
|
|
import AboutPage from '@/views/about/About.vue'
|
|
import Licenses from '@/views/about/Licenses.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 CompareAnswersIndex from '@/views/results/compare-answers/Index.vue'
|
|
import Statistics from '@/views/results/Statistics.vue'
|
|
import CompareResults from '@/views/results/CompareResults.vue'
|
|
import CompareQuestion from '@/views/results/compare-answers/CompareQuestion.vue'
|
|
import CompareQuestions from '@/views/results/compare-answers/CompareQuestions.vue'
|
|
|
|
const routes = [
|
|
{
|
|
path: '/',
|
|
name: 'Home',
|
|
component: Home,
|
|
meta: {
|
|
indexBase: 0,
|
|
svgPath: mdiHome,
|
|
title: 'Home'
|
|
}
|
|
},
|
|
{
|
|
path: '/quiz',
|
|
name: 'Quiz',
|
|
component: Quiz,
|
|
meta: {
|
|
indexBase: 1,
|
|
svgPath: mdiAccountQuestion,
|
|
title: 'Take the Quiz'
|
|
},
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'Quiz',
|
|
component: QuizPage,
|
|
meta: {
|
|
indexChild: 0,
|
|
indexBase: 1,
|
|
title: 'Take the Quiz'
|
|
}
|
|
},
|
|
{
|
|
path: 'question/:id',
|
|
name: 'Question',
|
|
component: Question,
|
|
props: route => ({
|
|
id: parseInt(route.params.id)
|
|
}),
|
|
meta: {
|
|
indexChild: 1,
|
|
indexBase: 1,
|
|
title: 'Take the Quiz'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
path: '/about',
|
|
name: 'About',
|
|
component: About,
|
|
meta: {
|
|
indexBase: 2,
|
|
svgPath: mdiInformation,
|
|
title: 'About'
|
|
},
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'About',
|
|
component: AboutPage,
|
|
meta: {
|
|
indexChild: 0,
|
|
indexBase: 2,
|
|
svgPath: mdiInformation,
|
|
title: 'Background'
|
|
}
|
|
},
|
|
{
|
|
path: 'licenses',
|
|
name: 'Licenses',
|
|
component: Licenses,
|
|
meta: {
|
|
indexChild: 1,
|
|
indexBase: 2,
|
|
svgPath: mdiLicense,
|
|
title: 'Licenses'
|
|
}
|
|
},
|
|
{
|
|
path: 'wanderhome',
|
|
name: 'Wanderhome',
|
|
component: Wanderhome,
|
|
meta: {
|
|
indexChild: 2,
|
|
indexBase: 2,
|
|
svgPath: mdiHandCoin,
|
|
title: 'About Wanderhome'
|
|
}
|
|
},
|
|
{
|
|
path: 'acknowledgements',
|
|
name: 'Acknowledgements',
|
|
component: Acknowledgements,
|
|
meta: {
|
|
indexChild: 3,
|
|
indexBase: 2,
|
|
svgPath: mdiAccountGroupOutline,
|
|
title: 'Acknowledgements'
|
|
}
|
|
},
|
|
{
|
|
path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
|
|
name: 'SourceCode',
|
|
meta: {
|
|
indexChild: 4,
|
|
indexBase: 2,
|
|
svgPath: mdiCodeTags,
|
|
title: 'View Source Code'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
path: '/results',
|
|
name: 'Results',
|
|
component: Results,
|
|
meta: {
|
|
indexBase: -1,
|
|
title: 'Results',
|
|
svgPath: mdiAccountBoxMultiple
|
|
},
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'Result',
|
|
component: ResultsPage,
|
|
meta: {
|
|
indexChild: 0,
|
|
title: 'Your Results',
|
|
svgPath: mdiAccountBoxMultiple,
|
|
indexBase: -1
|
|
}
|
|
},
|
|
{
|
|
path: 'all',
|
|
name: 'Scores',
|
|
component: Scores,
|
|
meta: {
|
|
indexChild: 1,
|
|
title: 'Your Scores',
|
|
svgPath: mdiCounter,
|
|
indexBase: -1
|
|
}
|
|
},
|
|
{
|
|
path: 'compare',
|
|
name: 'CompareResults',
|
|
component: CompareResults,
|
|
meta: {
|
|
indexChild: 2,
|
|
title: 'Compare Results',
|
|
svgPath: mdiCompare,
|
|
indexBase: -1
|
|
}
|
|
},
|
|
{
|
|
path: 'statistics',
|
|
name: 'Statistics',
|
|
component: Statistics,
|
|
meta: {
|
|
indexChild: 3,
|
|
title: 'Statistics',
|
|
svgPath: mdiChartBox,
|
|
indexBase: -1
|
|
}
|
|
},
|
|
{
|
|
path: 'answers',
|
|
name: 'Answers',
|
|
component: CompareAnswersIndex,
|
|
meta: {
|
|
indexChild: 4,
|
|
title: 'Compare Answers',
|
|
svgPath: mdiForum,
|
|
indexBase: -1
|
|
},
|
|
children: [
|
|
{
|
|
path: '',
|
|
name: 'RootAnswer',
|
|
component: CompareQuestions,
|
|
meta: {
|
|
indexGrandchild: 0,
|
|
title: 'Compare Answers',
|
|
svgPath: mdiForum,
|
|
indexBase: -1,
|
|
indexChild: 4
|
|
}
|
|
},
|
|
{
|
|
path: ':id',
|
|
name: 'CompareQuestion',
|
|
component: CompareQuestion,
|
|
props: route => ({
|
|
id: parseInt(route.params.id)
|
|
}),
|
|
meta: {
|
|
indexGrandchild: 1,
|
|
title: 'Compare Answers',
|
|
svgPath: mdiForum,
|
|
indexBase: -1,
|
|
indexChild: 4
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
path: '/err_notfound',
|
|
name: 'NotFound',
|
|
component: NotFound,
|
|
meta: {
|
|
indexBase: -2,
|
|
title: 'Error: Not Found',
|
|
svgPath: mdiWeb
|
|
}
|
|
},
|
|
{
|
|
path: "/:catchAll(.*)",
|
|
name: 'CatchAll',
|
|
redirect: '/err_notfound',
|
|
meta: {
|
|
indexBase: -3,
|
|
title: 'Error: Not Found',
|
|
svgPath: mdiWeb
|
|
}
|
|
},
|
|
{
|
|
path: "/err_refused",
|
|
name: 'Refused',
|
|
component: Refused,
|
|
meta: {
|
|
indexBase: -4,
|
|
title: 'Error: Connection Refused',
|
|
svgPath: mdiWeb
|
|
}
|
|
}
|
|
]
|
|
|
|
const Router = createRouter({
|
|
history: createWebHistory(),
|
|
routes
|
|
})
|
|
|
|
Router.beforeEach((to, from) => {
|
|
if (to.meta.title != 'Home') {
|
|
document.title = `Wanderhome Quiz | V.S. - ${to.meta.title}`
|
|
} else {
|
|
document.title = `Wanderhome Quiz | V.S.`
|
|
}
|
|
if (from.meta.indexBase == -1 && to.meta.indexBase != -1) {
|
|
if (!confirm('If you navigate away from the Results section, then you will lose your results and need to start the quiz again. Are you sure?')) {
|
|
return false
|
|
}
|
|
to.meta.resetApp = true
|
|
}
|
|
})
|
|
|
|
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 ( from.meta.indexBase !== to.meta.indexBase ) {
|
|
const fromIndex = from.meta.indexBase
|
|
const toIndex = to.meta.indexBase
|
|
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 ( from.meta.indexChild !== to.meta.indexChild ) {
|
|
const fromIndex = from.meta.indexChild
|
|
const toIndex = to.meta.indexChild
|
|
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 |