From ab78e6adf3d7e8c4c625461d8201c20b900145c8 Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sun, 22 Mar 2020 13:28:10 +0100
Subject: [PATCH 1/4] fixed result measure

---
 src/views/Results.vue | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/views/Results.vue b/src/views/Results.vue
index 19f3636..e00a2ad 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -1,6 +1,9 @@
 <template>
     <div class="results">
         <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
+            <p class="risk-chance alert" v-if="risk >= 66">hoch</p>
+            <p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p>
+            <p class="risk-chance success" v-if="risk < 33">niedrig</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>
@@ -23,12 +26,17 @@
     export default {
         name: "Results",
         mounted() {
-            /*const biased = this.$store.state.answers.map((x, i) => {
+            const summed = this.$store.state.answers.map((x, i) => {
                 return x * this.$store.state.questions[i].multiplicator
-            })
-             const summed = biased.reduce(function(acc, current) {
+            }).reduce(function(acc, current) {
                 return acc + current
-            }) */
+            })
+
+            const sumMult = this.$store.state.questions.reduce(function(acc, current) {
+                return acc + current.multiplicator
+            }, 0)
+
+            this.risk = Math.round(summed / sumMult)
 
             for(let i = 0; i < this.$store.state.answers.length; i ++) {
                 if (this.$store.state.answers[i] < 33) {
@@ -51,6 +59,7 @@
         },
         data() {
             return {
+                risk: -1,
                 bad: [],
                 warning: [],
                 good: []
@@ -81,4 +90,18 @@
     .card-advice.alert {
         background: rgba(233, 74, 71, 0.25);
     }
+    .risk-chance {
+        text-align: center;
+        font-size: 1.5em;
+        font-weight: bold;
+    }
+    .risk-chance.success {
+        color: green;
+    }
+    .risk-chance.warning {
+        color: orange;
+    }
+    .risk-chance.alert {
+        color: red;
+    }
 </style>

From ece528b441e85d1bc41801e16487cf4adc07bc2e Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sun, 22 Mar 2020 13:30:19 +0100
Subject: [PATCH 2/4] colors now comply with mockup

---
 src/views/Results.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Results.vue b/src/views/Results.vue
index e00a2ad..be1169b 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -96,12 +96,12 @@
         font-weight: bold;
     }
     .risk-chance.success {
-        color: green;
+        color: #62E160;
     }
     .risk-chance.warning {
         color: orange;
     }
     .risk-chance.alert {
-        color: red;
+        color: #E94A47;
     }
 </style>

From f065fa585229d95f44be5adcb2775a1e87f5255f Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sun, 22 Mar 2020 13:43:57 +0100
Subject: [PATCH 3/4] added conditional rendering of text blocks in Results
 fixed button alignment in questions

---
 src/components/Question.vue | 35 +++++++++++++++++++++--------------
 src/views/Results.vue       |  6 +++---
 2 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/Question.vue b/src/components/Question.vue
index ed5d988..5cbe5d0 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -15,21 +15,23 @@
 <template>
     <div class="question">
         <p>{{ question }}</p>
-        <div v-if="type === 'yesno'" class="question-choice">
-            <button v-on:click="$store.commit('nextQuestion')">Ja</button>
-            <button v-on:click="$store.commit('nextQuestion')">Nein</button>
+        <div class="buttons">
+            <div v-if="type === 'yesno'" class="question-choice">
+                <button v-on:click="$store.commit('nextQuestion')">Ja</button>
+                <button v-on:click="$store.commit('nextQuestion')">Nein</button>
+            </div>
+            <div v-if="type === 'slider'" class="question-slider">
+                <p>{{ selection }}</p>
+                <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
+            </div>
+            <div v-if="type === 'choice'" class="question-options">
+                <button v-bind:key="answer.text"
+                        v-for="answer in answers"
+                        v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
+            </div>
+            <router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+            <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
         </div>
-        <div v-if="type === 'slider'" class="question-slider">
-            <p>{{ selection }}</p>
-            <input v-model="selection" type="range" min="0" max="150" value="18" class="slider">
-        </div>
-        <div v-if="type === 'choice'" class="question-options">
-            <button v-bind:key="answer.text"
-                    v-for="answer in answers"
-                    v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
-        </div>
-        <router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
-        <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
     </div>
 </template>
 
@@ -97,4 +99,9 @@
         cursor: pointer;
     }
 
+    .buttons {
+        position: absolute;
+        bottom: 0;
+        padding: 1em;
+    }
 </style>
diff --git a/src/views/Results.vue b/src/views/Results.vue
index be1169b..a5347aa 100644
--- a/src/views/Results.vue
+++ b/src/views/Results.vue
@@ -4,17 +4,17 @@
             <p class="risk-chance alert" v-if="risk >= 66">hoch</p>
             <p class="risk-chance warning" v-if="risk >= 33 && risk < 66">durchschnittlich</p>
             <p class="risk-chance success" v-if="risk < 33">niedrig</p>
-        <p>Auf Folgendes sollten Sie achten:</p>
+        <p v-if="bad.length > 0">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>
+        <p v-if="warning.length > 0">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>
+        <p v-if="good.length > 0">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>

From 3948f6dce47e26817266038e68875902c710d79b Mon Sep 17 00:00:00 2001
From: thilo <thilo.billerbeck@officerent.de>
Date: Sun, 22 Mar 2020 14:21:58 +0100
Subject: [PATCH 4/4] based navigation on router

---
 src/App.vue                 | 11 ++++++++++-
 src/components/Question.vue | 23 +++++++++++++++++++----
 src/router/index.js         |  4 ++--
 src/store/index.js          | 20 ++------------------
 src/views/HelpPage.vue      | 21 +++++++++++++++++----
 src/views/Questionnaire.vue |  8 ++++----
 src/views/Warning.vue       |  2 +-
 7 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4576eeb..ee35e22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view/>
+    <transition name="fade">
+      <router-view/>
+    </transition>
   </div>
 </template>
 
@@ -86,4 +88,11 @@
     line-height: 1.35em;
     font-size: 24px;
   }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
 </style>
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 5cbe5d0..c8dc353 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -29,13 +29,15 @@
                         v-for="answer in answers"
                         v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
             </div>
-            <router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+            <router-link v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
             <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
         </div>
     </div>
 </template>
 
 <script>
+    import router from "@/router";
+
     export default {
         name: "Question",
         props: {
@@ -50,11 +52,24 @@
         },
         methods: {
             answerQuestion(value) {
-                this.$store.commit('answerQuestion', value)
-                this.$store.commit('nextQuestion')
+                this.$store.commit('answerQuestion', {
+                    id: this.$route.params.id,
+                    answer: value
+                })
+
+                if (this.$route.params.id < this.$store.state.questions.length - 1) {
+                    const nextQuestion = parseInt(this.$route.params.id) + 1
+                    this.$router.push("/questionnaire/" + nextQuestion)
+                }
+                else {
+                    router.push('/results')
+                }
             },
             goBack() {
-                this.$store.commit('previousQuestion')
+                if (this.$route.params.id > 0) {
+                    const previousQuestion = parseInt(this.$route.params.id) - 1
+                    this.$router.push("/questionnaire/" + previousQuestion)
+                }
             },
         },
         mounted () {
diff --git a/src/router/index.js b/src/router/index.js
index 61e8fa9..a2d3388 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,12 +20,12 @@ const routes = [
     component: Warning
   },
   {
-    path: '/questionnaire',
+    path: '/questionnaire/:id',
     name: 'Fragebogen',
     component: Questionnaire
   },
   {
-    path: '/questionnaire/help',
+    path: '/questionnaire/help/:id',
     name: 'Hilfe',
     component: HelpPage
   },
diff --git a/src/store/index.js b/src/store/index.js
index 49f377c..adff0fb 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,36 +1,20 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios';
-import router from "@/router";
-
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
-        currentQuestion: 0,
         answers: [],
         questions: []
     },
     mutations: {
-        nextQuestion() {
-            if (this.state.currentQuestion <
-                this.state.questions.length - 1)
-                this.state.currentQuestion += 1
-            else {
-                router.push('/results')
-            }
-        },
-        previousQuestion() {
-            if (this.state.currentQuestion > 0) {
-                this.state.currentQuestion -= 1
-            }
-        },
         startWithFirstQuestion() {
             this.state.currentQuestion = 0
         },
-        answerQuestion(state, value) {
-            this.state.answers[this.state.currentQuestion] = value
+        answerQuestion(state, pl) {
+            this.state.answers[pl.id] = pl.answer
         },
         init() {
             axios.get('https://avian-safeguard-214619.firebaseio.com/questions.json')
diff --git a/src/views/HelpPage.vue b/src/views/HelpPage.vue
index c842949..c991b4d 100644
--- a/src/views/HelpPage.vue
+++ b/src/views/HelpPage.vue
@@ -1,18 +1,31 @@
 <template>
     <div class="help">
-        <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
-        <router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
+        <p>{{ $store.state.questions[$route.params.id].description }}</p>
+        <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
         <br><br>
-        <router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
+        <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
     </div>
 </template>
 
 <script>
+    import router from "@/router";
+
     export default {
         name: "HelpPage",
         props: {
             text: String
-        }
+        },
+        methods: {
+            nextQuestion() {
+                if (this.$route.params.id < this.$store.state.questions.length - 1) {
+                    const nextQuestion = parseInt(this.$route.params.id) + 1
+                    this.$router.push("/questionnaire/" + nextQuestion)
+                }
+                else {
+                    router.push('/results')
+                }
+            },
+        },
     }
 </script>
 
diff --git a/src/views/Questionnaire.vue b/src/views/Questionnaire.vue
index 03e4628..2cf8099 100644
--- a/src/views/Questionnaire.vue
+++ b/src/views/Questionnaire.vue
@@ -4,9 +4,9 @@
             <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
         </div>
         <Question
-                v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
-                v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
-                v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
+                v-bind:type="$store.state.questions[$route.params.id].type"
+                v-bind:question="$store.state.questions[$route.params.id].question"
+                v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
     </div>
 </template>
 
@@ -17,7 +17,7 @@
         components: {Question},
         methods: {
             getDotClass(n) {
-                if (n <= this.$store.state.currentQuestion) {
+                if (n <= this.$route.params.id) {
                     return "point answered"
                 } else {
                     return "point"
diff --git a/src/views/Warning.vue b/src/views/Warning.vue
index bdc9c4a..f35c4cc 100644
--- a/src/views/Warning.vue
+++ b/src/views/Warning.vue
@@ -24,6 +24,6 @@
         Bereitschaftsdienst unter 116117 an.
       </p>
     </div>
-    <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
+    <router-link style="text-decoration:none" to="/questionnaire/0"><button>Ich möchte weiter zum Test</button></router-link>
   </div>
 </template>