covidassist/src/views/Results.vue

124 lines
4.0 KiB
Vue

<template>
<div class="results">
<p>Ihre Wahrscheinlichkeit sich 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">niedrig</p>
<p class="text-center"><router-link style="text-decoration:none" to="/">
Zurück zum Anfang
</router-link></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>
</div>
</template>
<script>
export default {
name: "Results",
mounted() {
const summed = this.$store.state.answers.map((x, i) => {
return x * this.$store.state.questions[i].multiplicator
}).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) {
this.good.push({
title: this.$store.state.questions[i].cards.good,
description: this.$store.state.questions[i].cards.information
})
} else if (this.$store.state.answers[i] < 66) {
this.warning.push({
title: this.$store.state.questions[i].cards.okay,
description: this.$store.state.questions[i].cards.information
})
} else {
this.bad.push({
title: this.$store.state.questions[i].cards.bad,
description: this.$store.state.questions[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;
}
.risk-chance.success {
color: #62E160;
}
.risk-chance.warning {
color: orange;
}
.risk-chance.alert {
color: #E94A47;
}
.text-center {
text-align: center;
}
</style>