corona-risikoabschaetzungs-app/covidassist
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

added advice rendering

Browse source
This commit is contained in:
thilo 2020-03-22 00:24:57 +01:00
parent 5c1126c105
commit b96a76ba75
1 changed files with 40 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/views/Results.vue
View file

@ -2,19 +2,19 @@
<div class="results"> <div class="results">
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p> <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
<p>Auf Folgendes sollten Sie achten:</p> <p>Auf Folgendes sollten Sie achten:</p>
<div class="card-advice alert"> <div v-for="card in bad" v-bind:key="card.description" class="card-advice alert">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div> <div class="card-advice-description">{{ card.description }}</div>
</div> </div>
<p>Hier können Sie sich noch verbessern:</p> <p>Hier können Sie sich noch verbessern:</p>
<div class="card-advice warning"> <div v-for="card in warning" v-bind:key="card.description" class="card-advice warning">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div> <div class="card-advice-description">{{ card.description }}</div>
</div> </div>
<p>Das machen Sie schon gut:</p> <p>Das machen Sie schon gut:</p>
<div class="card-advice success"> <div v-for="card in good" v-bind:key="card.description" class="card-advice success">
<div class="card-advice-title">Sie sollten sich die Hände mindestens drei mal am Tag waschen</div> <div class="card-advice-title">{{ card.title }}</div>
<div class="card-advice-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div> <div class="card-advice-description">{{ card.description }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -23,14 +23,39 @@
export default { export default {
name: "Results", name: "Results",
mounted() { mounted() {
const biased = this.$store.state.answers.map((x, i) => { /*const biased = this.$store.state.answers.map((x, i) => {
return x * this.$store.state.questions[i].multiplicator return x * this.$store.state.questions[i].multiplicator
}) })
const summed = biased.reduce(function(acc, current) { const summed = biased.reduce(function(acc, current) {
return acc + current return acc + current
}) }) */
console.log(Math.round(summed / 10))
} 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> </script>
@ -41,6 +66,7 @@
.card-advice { .card-advice {
padding: 0.8em; padding: 0.8em;
border-radius: 0.8em; border-radius: 0.8em;
margin-bottom: 1em;
} }
.card-advice .card-advice-title { .card-advice .card-advice-title {
font-weight: bolder; font-weight: bolder;