covidassist/src/views/Results.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>