covidassist/src/views/Results.vue

85 lines
2.9 KiB
Vue
Raw Normal View History

2020-03-21 21:54:20 +01:00
<template>
<div class="results">
2020-03-21 21:54:20 +01:00
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
<p>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>
</div>
<p>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>
</div>
<p>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>
</div>
2020-03-21 21:54:20 +01:00
</div>
</template>
<script>
export default {
name: "Results",
mounted() {
2020-03-22 00:24:57 +01:00
/*const biased = 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 00:24:57 +01:00
const summed = biased.reduce(function(acc, current) {
2020-03-21 21:54:20 +01:00
return acc + current
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 {
bad: [],
warning: [],
good: []
}
},
2020-03-21 21:54:20 +01:00
}
</script>
<style scoped>
.results {
padding: 1em;
}
.card-advice {
padding: 0.8em;
border-radius: 0.8em;
2020-03-22 00:24:57 +01:00
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);
}
2020-03-21 21:54:20 +01:00
</style>