133 lines
4.4 KiB
Vue
133 lines
4.4 KiB
Vue
<template>
|
|
<div class="results">
|
|
<p>Ihr Risiko sich und andere zu infizieren ist</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 && risk >= 0">niedrig</p>
|
|
<p class="risk-chance" v-if=" risk < 0">nicht feststellbar</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 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 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>
|
|
</div>
|
|
<p class="text-center"><router-link to="/">
|
|
Zurück zum Anfang
|
|
</router-link></p>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Results",
|
|
mounted() {
|
|
const answersFiltered = this.$store.state.answers.filter((value, index) => {
|
|
return !this.$store.state.skipped[index]
|
|
})
|
|
const questionsFiltered = this.$store.state.questions.filter((value, index) => {
|
|
return !this.$store.state.skipped[index]
|
|
})
|
|
|
|
const summed = answersFiltered.map((x, i) => {
|
|
return x * questionsFiltered[i].multiplicator
|
|
}).reduce(function(acc, current) {
|
|
return acc + current
|
|
})
|
|
|
|
const sumMult = questionsFiltered.reduce(function(acc, current) {
|
|
return acc + current.multiplicator
|
|
}, 0)
|
|
|
|
this.risk = sumMult === 0 ? -1 : Math.round(summed / sumMult)
|
|
|
|
for(let i = 0; i < answersFiltered.length; i ++) {
|
|
if (answersFiltered[i] < 33) {
|
|
this.good.push({
|
|
title: questionsFiltered[i].cards.good,
|
|
description: questionsFiltered[i].cards.information
|
|
})
|
|
} else if (answersFiltered[i] < 66) {
|
|
this.warning.push({
|
|
title: questionsFiltered[i].cards.okay,
|
|
description: questionsFiltered[i].cards.information
|
|
})
|
|
} else {
|
|
this.bad.push({
|
|
title: questionsFiltered[i].cards.bad,
|
|
description: questionsFiltered[i].cards.information
|
|
})
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
risk: -1,
|
|
bad: [],
|
|
warning: [],
|
|
good: []
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.results {
|
|
padding: 1em;
|
|
}
|
|
|
|
@media screen and (min-width : 906px) {
|
|
.results {
|
|
width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
}
|
|
|
|
|
|
.card-advice {
|
|
padding: 0.8em;
|
|
border-radius: 0.8em;
|
|
margin-bottom: 1em;
|
|
}
|
|
.card-advice .card-advice-title {
|
|
font-weight: bolder;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
.card-advice.success {
|
|
background: rgba(98, 225, 96, 0.25);
|
|
}
|
|
.card-advice.warning {
|
|
background: rgba(255, 233, 36, 0.25);
|
|
}
|
|
.card-advice.alert {
|
|
background: rgba(233, 74, 71, 0.25);
|
|
}
|
|
.risk-chance {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
font-weight: bold;
|
|
font-family: Comfortaa;
|
|
}
|
|
.risk-chance.success {
|
|
color: #62E160;
|
|
}
|
|
.risk-chance.warning {
|
|
color: orange;
|
|
}
|
|
.risk-chance.alert {
|
|
color: #E94A47;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
</style>
|