Merge branch 'thilo-fixes' into 'master'
Thilo fixes See merge request corona-risikoabschaetzungs-app/covidassist!3
This commit is contained in:
commit
2640d408bf
8 changed files with 113 additions and 54 deletions
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<transition name="fade">
|
||||
<router-view/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -96,4 +98,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>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
<template>
|
||||
<div class="question">
|
||||
<p>{{ question }}</p>
|
||||
<div class="buttons">
|
||||
<div v-if="type === 'yesno'" class="question-choice">
|
||||
<button v-on:click="$store.commit('nextQuestion')">Ja</button>
|
||||
<button v-on:click="$store.commit('nextQuestion')">Nein</button>
|
||||
|
|
@ -21,6 +22,18 @@
|
|||
<p>{{ selection }}</p>
|
||||
<input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
|
||||
</div>
|
||||
<div v-if="type === 'choice'" class="question-options">
|
||||
<button v-bind:key="answer.text"
|
||||
v-for="answer in answers"
|
||||
v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
|
||||
</div>
|
||||
<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 v-if="type === 'slider'" class="question-slider">
|
||||
<p>{{ selection }}</p>
|
||||
<input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
|
||||
</div>
|
||||
<div v-if="type === 'choice'" class="question-options">
|
||||
<div class="button-wrapper">
|
||||
<button v-bind:key="answer.text"
|
||||
|
|
@ -38,6 +51,8 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import router from "@/router";
|
||||
|
||||
export default {
|
||||
name: "Question",
|
||||
props: {
|
||||
|
|
@ -52,11 +67,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 () {
|
||||
|
|
@ -101,4 +129,9 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -11,23 +11,35 @@
|
|||
|
||||
<template>
|
||||
<div class="help">
|
||||
<p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
|
||||
<p>{{ $store.state.questions[$route.params.id].description }}</p>
|
||||
<div class="button-wrapper">
|
||||
<router-link to="/questionnaire">
|
||||
<button>Zurück zur Frage</button>
|
||||
</router-link>
|
||||
<router-link to="/questionnaire">
|
||||
<button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button>
|
||||
</router-link>
|
||||
<router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
|
||||
<br><br>
|
||||
<button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
<template>
|
||||
<div class="results">
|
||||
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
|
||||
<p>Auf Folgendes sollten Sie achten:</p>
|
||||
<p class="risk-chance alert" v-if="risk >= 66">hoch</p>
|
||||
<p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p>
|
||||
<p class="risk-chance success" v-if="risk < 33">niedrig</p>
|
||||
<p v-if="bad.length > 0">Auf Folgendes sollten Sie achten:</p>
|
||||
<div v-for="card in bad" v-bind:key="card.description" class="card-advice alert">
|
||||
<div class="card-advice-title">{{ card.title }}</div>
|
||||
<div class="card-advice-description">{{ card.description }}</div>
|
||||
</div>
|
||||
<p>Hier können Sie sich noch verbessern:</p>
|
||||
<p v-if="warning.length > 0">Hier können Sie sich noch verbessern:</p>
|
||||
<div v-for="card in warning" v-bind:key="card.description" class="card-advice warning">
|
||||
<div class="card-advice-title">{{ card.title }}</div>
|
||||
<div class="card-advice-description">{{ card.description }}</div>
|
||||
</div>
|
||||
<p>Das machen Sie schon gut:</p>
|
||||
<p v-if="good.length > 0">Das machen Sie schon gut:</p>
|
||||
<div v-for="card in good" v-bind:key="card.description" class="card-advice success">
|
||||
<div class="card-advice-title">{{ card.title }}</div>
|
||||
<div class="card-advice-description">{{ card.description }}</div>
|
||||
|
|
@ -23,12 +26,17 @@
|
|||
export default {
|
||||
name: "Results",
|
||||
mounted() {
|
||||
/*const biased = this.$store.state.answers.map((x, i) => {
|
||||
const summed = this.$store.state.answers.map((x, i) => {
|
||||
return x * this.$store.state.questions[i].multiplicator
|
||||
})
|
||||
const summed = biased.reduce(function(acc, current) {
|
||||
}).reduce(function(acc, current) {
|
||||
return acc + current
|
||||
}) */
|
||||
})
|
||||
|
||||
const sumMult = this.$store.state.questions.reduce(function(acc, current) {
|
||||
return acc + current.multiplicator
|
||||
}, 0)
|
||||
|
||||
this.risk = Math.round(summed / sumMult)
|
||||
|
||||
for(let i = 0; i < this.$store.state.answers.length; i ++) {
|
||||
if (this.$store.state.answers[i] < 33) {
|
||||
|
|
@ -51,6 +59,7 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
risk: -1,
|
||||
bad: [],
|
||||
warning: [],
|
||||
good: []
|
||||
|
|
@ -81,4 +90,18 @@
|
|||
.card-advice.alert {
|
||||
background: rgba(233, 74, 71, 0.25);
|
||||
}
|
||||
.risk-chance {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.risk-chance.success {
|
||||
color: #62E160;
|
||||
}
|
||||
.risk-chance.warning {
|
||||
color: orange;
|
||||
}
|
||||
.risk-chance.alert {
|
||||
color: #E94A47;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,9 +25,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="button-wrapper">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue