Nearly finished app
This commit is contained in:
@ -1,7 +1,8 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import { mdiAccountBoxMultiple, mdiAccountGroupOutline, mdiAccountQuestion, mdiChartBox, mdiCodeTags, mdiCompare, mdiCounter, mdiEarth, mdiHandCoin, mdiHome, mdiInformation, mdiWeb } from '@mdi/js'
|
||||
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'
|
||||
@ -13,9 +14,11 @@ 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 CompareAnswers from '@/views/results/CompareAnswers.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 = [
|
||||
{
|
||||
@ -23,7 +26,7 @@ const routes = [
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
meta: {
|
||||
index: 0,
|
||||
indexBase: 0,
|
||||
svgPath: mdiHome,
|
||||
title: 'Home'
|
||||
}
|
||||
@ -33,7 +36,7 @@ const routes = [
|
||||
name: 'Quiz',
|
||||
component: Quiz,
|
||||
meta: {
|
||||
index: 1,
|
||||
indexBase: 1,
|
||||
svgPath: mdiAccountQuestion,
|
||||
title: 'Take the Quiz'
|
||||
},
|
||||
@ -43,8 +46,8 @@ const routes = [
|
||||
name: 'Quiz',
|
||||
component: QuizPage,
|
||||
meta: {
|
||||
index: 0,
|
||||
parentIndex: 1,
|
||||
indexChild: 0,
|
||||
indexBase: 1,
|
||||
title: 'Take the Quiz'
|
||||
}
|
||||
},
|
||||
@ -56,8 +59,8 @@ const routes = [
|
||||
id: parseInt(route.params.id)
|
||||
}),
|
||||
meta: {
|
||||
index: 1,
|
||||
parentIndex: 1,
|
||||
indexChild: 1,
|
||||
indexBase: 1,
|
||||
title: 'Take the Quiz'
|
||||
}
|
||||
}
|
||||
@ -68,7 +71,7 @@ const routes = [
|
||||
name: 'About',
|
||||
component: About,
|
||||
meta: {
|
||||
index: 2,
|
||||
indexBase: 2,
|
||||
svgPath: mdiInformation,
|
||||
title: 'About'
|
||||
},
|
||||
@ -78,19 +81,30 @@ const routes = [
|
||||
name: 'About',
|
||||
component: AboutPage,
|
||||
meta: {
|
||||
index: 0,
|
||||
parentIndex: 2,
|
||||
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: {
|
||||
index: 1,
|
||||
parentIndex: 2,
|
||||
indexChild: 2,
|
||||
indexBase: 2,
|
||||
svgPath: mdiHandCoin,
|
||||
title: 'About Wanderhome'
|
||||
}
|
||||
@ -100,8 +114,8 @@ const routes = [
|
||||
name: 'Acknowledgements',
|
||||
component: Acknowledgements,
|
||||
meta: {
|
||||
index: 2,
|
||||
parentIndex: 2,
|
||||
indexChild: 3,
|
||||
indexBase: 2,
|
||||
svgPath: mdiAccountGroupOutline,
|
||||
title: 'Acknowledgements'
|
||||
}
|
||||
@ -110,8 +124,8 @@ const routes = [
|
||||
path: 'https://git.vsnt.uk/viveksantayana/wanderhome-quiz',
|
||||
name: 'SourceCode',
|
||||
meta: {
|
||||
index: 3,
|
||||
parentIndex: 2,
|
||||
indexChild: 4,
|
||||
indexBase: 2,
|
||||
svgPath: mdiCodeTags,
|
||||
title: 'View Source Code'
|
||||
}
|
||||
@ -123,7 +137,7 @@ const routes = [
|
||||
name: 'Results',
|
||||
component: Results,
|
||||
meta: {
|
||||
index: -1,
|
||||
indexBase: -1,
|
||||
title: 'Results',
|
||||
svgPath: mdiAccountBoxMultiple
|
||||
},
|
||||
@ -133,10 +147,10 @@ const routes = [
|
||||
name: 'Result',
|
||||
component: ResultsPage,
|
||||
meta: {
|
||||
index: 0,
|
||||
indexChild: 0,
|
||||
title: 'Your Results',
|
||||
svgPath: mdiAccountBoxMultiple,
|
||||
parentIndex: -1
|
||||
indexBase: -1
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -144,10 +158,10 @@ const routes = [
|
||||
name: 'Scores',
|
||||
component: Scores,
|
||||
meta: {
|
||||
index: 1,
|
||||
indexChild: 1,
|
||||
title: 'Your Scores',
|
||||
svgPath: mdiCounter,
|
||||
parentIndex: -1
|
||||
indexBase: -1
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -155,10 +169,10 @@ const routes = [
|
||||
name: 'CompareResults',
|
||||
component: CompareResults,
|
||||
meta: {
|
||||
index: 2,
|
||||
indexChild: 2,
|
||||
title: 'Compare Results',
|
||||
svgPath: mdiCompare,
|
||||
parentIndex: -1
|
||||
indexBase: -1
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -166,22 +180,51 @@ const routes = [
|
||||
name: 'Statistics',
|
||||
component: Statistics,
|
||||
meta: {
|
||||
index: 3,
|
||||
indexChild: 3,
|
||||
title: 'Statistics',
|
||||
svgPath: mdiChartBox,
|
||||
parentIndex: -1
|
||||
indexBase: -1
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'answers',
|
||||
name: 'Answers',
|
||||
component: CompareAnswers,
|
||||
component: CompareAnswersIndex,
|
||||
meta: {
|
||||
index: 4,
|
||||
indexChild: 4,
|
||||
title: 'Compare Answers',
|
||||
svgPath: mdiEarth,
|
||||
parentIndex: -1
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -190,17 +233,17 @@ const routes = [
|
||||
name: 'NotFound',
|
||||
component: NotFound,
|
||||
meta: {
|
||||
index: -1,
|
||||
indexBase: -2,
|
||||
title: 'Error: Not Found',
|
||||
svgPath: mdiWeb
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/:catchAll(.*)",
|
||||
name: 'NotFound',
|
||||
name: 'CatchAll',
|
||||
redirect: '/err_notfound',
|
||||
meta: {
|
||||
index: -1,
|
||||
indexBase: -3,
|
||||
title: 'Error: Not Found',
|
||||
svgPath: mdiWeb
|
||||
}
|
||||
@ -210,7 +253,7 @@ const routes = [
|
||||
name: 'Refused',
|
||||
component: Refused,
|
||||
meta: {
|
||||
index: -1,
|
||||
indexBase: -4,
|
||||
title: 'Error: Connection Refused',
|
||||
svgPath: mdiWeb
|
||||
}
|
||||
@ -222,31 +265,36 @@ const Router = createRouter({
|
||||
routes
|
||||
})
|
||||
|
||||
Router.beforeEach((to, from, next) => {
|
||||
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.`
|
||||
}
|
||||
next()
|
||||
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 ( 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
|
||||
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 ( to.fullPath.split('/')[1] == from.fullPath.split('/')[1] && from.matched.length ) {
|
||||
const fromIndex = from.meta.index
|
||||
const toIndex = to.meta.index
|
||||
} 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
|
||||
|
||||
Reference in New Issue
Block a user