2020-03-21 21:54:20 +01:00
|
|
|
<template>
|
2020-03-21 23:12:37 +01:00
|
|
|
<div class="results">
|
2020-03-21 21:54:20 +01:00
|
|
|
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
|
2020-03-22 13:28:10 +01:00
|
|
|
<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>
|
2020-03-22 13:43:57 +01:00
|
|
|
<p v-if="bad.length > 0">Auf Folgendes sollten Sie achten:</p>
|
2020-03-22 00:24:57 +01:00
|
|
|
<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>
|
2020-03-21 23:12:37 +01:00
|
|
|
</div>
|
2020-03-22 13:43:57 +01:00
|
|
|
<p v-if="warning.length > 0">Hier können Sie sich noch verbessern:</p>
|
2020-03-22 00:24:57 +01:00
|
|
|
<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>
|
2020-03-21 23:12:37 +01:00
|
|
|
</div>
|
2020-03-22 13:43:57 +01:00
|
|
|
<p v-if="good.length > 0">Das machen Sie schon gut:</p>
|
2020-03-22 00:24:57 +01:00
|
|
|
<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>
|
2020-03-21 23:12:37 +01:00
|
|
|
</div>
|
2020-03-21 21:54:20 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
name: "Results",
|
|
|
|
mounted() {
|
2020-03-22 13:28:10 +01:00
|
|
|
const summed = this.$store.state.answers.map((x, i) => {
|
2020-03-21 21:54:20 +01:00
|
|
|
return x * this.$store.state.questions[i].multiplicator
|
2020-03-22 13:28:10 +01:00
|
|
|
}).reduce(function(acc, current) {
|
2020-03-21 21:54:20 +01:00
|
|
|
return acc + current
|
2020-03-22 13:28:10 +01:00
|
|
|
})
|
|
|
|
|
|
|
|
const sumMult = this.$store.state.questions.reduce(function(acc, current) {
|
|
|
|
return acc + current.multiplicator
|
|
|
|
}, 0)
|
|
|
|
|
|
|
|
this.risk = Math.round(summed / sumMult)
|
2020-03-22 00:24:57 +01:00
|
|
|
|
|
|
|
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 {
|
2020-03-22 13:28:10 +01:00
|
|
|
risk: -1,
|
2020-03-22 00:24:57 +01:00
|
|
|
bad: [],
|
|
|
|
warning: [],
|
|
|
|
good: []
|
|
|
|
}
|
|
|
|
},
|
2020-03-21 21:54:20 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
2020-03-21 23:12:37 +01:00
|
|
|
.results {
|
|
|
|
padding: 1em;
|
|
|
|
}
|
|
|
|
.card-advice {
|
|
|
|
padding: 0.8em;
|
|
|
|
border-radius: 0.8em;
|
2020-03-22 00:24:57 +01:00
|
|
|
margin-bottom: 1em;
|
2020-03-21 23:12:37 +01:00
|
|
|
}
|
|
|
|
.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);
|
|
|
|
}
|
2020-03-22 13:28:10 +01:00
|
|
|
.risk-chance {
|
|
|
|
text-align: center;
|
|
|
|
font-size: 1.5em;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
.risk-chance.success {
|
2020-03-22 13:30:19 +01:00
|
|
|
color: #62E160;
|
2020-03-22 13:28:10 +01:00
|
|
|
}
|
|
|
|
.risk-chance.warning {
|
|
|
|
color: orange;
|
|
|
|
}
|
|
|
|
.risk-chance.alert {
|
2020-03-22 13:30:19 +01:00
|
|
|
color: #E94A47;
|
2020-03-22 13:28:10 +01:00
|
|
|
}
|
2020-03-21 21:54:20 +01:00
|
|
|
</style>
|