85 lines
2.9 KiB
Vue
85 lines
2.9 KiB
Vue
<template>
|
|
<div class="results">
|
|
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
|
|
<p>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>
|
|
<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>
|
|
<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 biased = this.$store.state.answers.map((x, i) => {
|
|
return x * this.$store.state.questions[i].multiplicator
|
|
})
|
|
const summed = biased.reduce(function(acc, current) {
|
|
return acc + current
|
|
}) */
|
|
|
|
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 {
|
|
bad: [],
|
|
warning: [],
|
|
good: []
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.results {
|
|
padding: 1em;
|
|
}
|
|
.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);
|
|
}
|
|
</style>
|