corona-risikoabschaetzungs-app/covidassist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

based navigation on router

Browse source
This commit is contained in:
thilo 2020-03-22 14:21:58 +01:00
parent f065fa5852
commit 3948f6dce4
7 changed files with 55 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/App.vue
View file

@ -1,6 +1,8 @@
<template>
<div id="app">
<router-view/>
<transition name="fade">
<router-view/>
</transition>
</div>
</template>
@ -86,4 +88,11 @@
line-height: 1.35em;
font-size: 24px;
}
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>

23
src/components/Question.vue
View file

@ -29,13 +29,15 @@
v-for="answer in answers"
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
</div>
<router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<router-link v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
<svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
</div>
</div>
</template>
<script>
import router from "@/router";
export default {
name: "Question",
props: {
@ -50,11 +52,24 @@
},
methods: {
answerQuestion(value) {
this.$store.commit('answerQuestion', value)
this.$store.commit('nextQuestion')
this.$store.commit('answerQuestion', {
id: this.$route.params.id,
answer: value
})
if (this.$route.params.id < this.$store.state.questions.length - 1) {
const nextQuestion = parseInt(this.$route.params.id) + 1
this.$router.push("/questionnaire/" + nextQuestion)
}
else {
router.push('/results')
}
},
goBack() {
this.$store.commit('previousQuestion')
if (this.$route.params.id > 0) {
const previousQuestion = parseInt(this.$route.params.id) - 1
this.$router.push("/questionnaire/" + previousQuestion)
}
},
},
mounted () {

4
src/router/index.js
View file

@ -20,12 +20,12 @@ const routes = [
component: Warning
},
{
path: '/questionnaire',
path: '/questionnaire/:id',
name: 'Fragebogen',
component: Questionnaire
},
{
path: '/questionnaire/help',
path: '/questionnaire/help/:id',
name: 'Hilfe',
component: HelpPage
},

20
src/store/index.js
View file

@ -1,36 +1,20 @@
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';
import router from "@/router";
Vue.use(Vuex)
export default new Vuex.Store({
state: {
currentQuestion: 0,
answers: [],
questions: []
},
mutations: {
nextQuestion() {
if (this.state.currentQuestion <
this.state.questions.length - 1)
this.state.currentQuestion += 1
else {
router.push('/results')
}
},
previousQuestion() {
if (this.state.currentQuestion > 0) {
this.state.currentQuestion -= 1
}
},
startWithFirstQuestion() {
this.state.currentQuestion = 0
},
answerQuestion(state, value) {
this.state.answers[this.state.currentQuestion] = value
answerQuestion(state, pl) {
this.state.answers[pl.id] = pl.answer
},
init() {
axios.get('https://avian-safeguard-214619.firebaseio.com/questions.json')

21
src/views/HelpPage.vue
View file

@ -1,18 +1,31 @@
<template>
<div class="help">
<p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
<router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
<p>{{ $store.state.questions[$route.params.id].description }}</p>
<router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
<br><br>
<router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
<button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
</div>
</template>
<script>
import router from "@/router";
export default {
name: "HelpPage",
props: {
text: String
}
},
methods: {
nextQuestion() {
if (this.$route.params.id < this.$store.state.questions.length - 1) {
const nextQuestion = parseInt(this.$route.params.id) + 1
this.$router.push("/questionnaire/" + nextQuestion)
}
else {
router.push('/results')
}
},
},
}
</script>

8
src/views/Questionnaire.vue
View file

@ -4,9 +4,9 @@
<div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
</div>
<Question
v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
v-bind:type="$store.state.questions[$route.params.id].type"
v-bind:question="$store.state.questions[$route.params.id].question"
v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
</div>
</template>
@ -17,7 +17,7 @@
components: {Question},
methods: {
getDotClass(n) {
if (n <= this.$store.state.currentQuestion) {
if (n <= this.$route.params.id) {
return "point answered"
} else {
return "point"

2
src/views/Warning.vue
View file

@ -24,6 +24,6 @@
Bereitschaftsdienst unter 116117 an.
</p>
</div>
<router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
<router-link style="text-decoration:none" to="/questionnaire/0"><button>Ich möchte weiter zum Test</button></router-link>
</div>
</template>