From b96a76ba759345ffbbdcde42eaeb5ae5638c2ced Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sun, 22 Mar 2020 00:24:57 +0100
Subject: [PATCH] added advice rendering

---
 src/views/Results.vue | 54 ++++++++++++++++++++++++++++++++-----------
 1 file changed, 40 insertions(+), 14 deletions(-)

diff --git a/src/views/Results.vue b/src/views/Results.vue
index 2f5cb62..19f3636 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -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;