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

added advice rendering

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">
<p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
<p>Auf Folgendes sollten Sie achten:</p>
<div 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-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
<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 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-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
<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 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-description">Hier kommt eine Erläuterung und evtl. ein Bezug auf den Einfluss den man auf die Virusverbreitung hat</div>
<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>
@ -23,14 +23,39 @@
export default {
name: "Results",
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
})
const summed = biased.reduce(function(acc, current) {
const summed = biased.reduce(function(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>
@ -41,6 +66,7 @@
.card-advice {
padding: 0.8em;
border-radius: 0.8em;
margin-bottom: 1em;
}
.card-advice .card-advice-title {
font-weight: bolder;