Merge branch 'master' into 'css_mobile'

# Conflicts:
#   src/components/Question.vue
#   src/router/index.js
#   src/store/index.js
#   src/views/Questionnaire.vue

src/components/Question.vue

@@ -15,10 +15,20 @@
 <template>
     <div class="question">
         <p>{{ question }}</p>
-        <button v-bind:key="answer" v-for="answer in answers">{{ answer }}</button>
-        <router-link style="text-decoration:none" to="/questionnaire">
-          <button class="alert">Ich brauche Hilfe zu dieser Frage</button>
-        </router-link>
+        <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="/questionmaire"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
     </div>
 </template>
 
@@ -26,9 +36,55 @@
     export default {
         name: "Question",
         props: {
+            type: String,
             question: String,
             answers: Array
-        }
+        },
+        data() {
+            return {
+                selection: 0
+            }
+        },
+        methods: {
+            answerQuestion(value) {
+                this.$store.commit('answerQuestion', value)
+                this.$store.commit('nextQuestion')
+            }
+        },
     }
 </script>
 
+<style scoped>
+    .slider {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 100%;
+        height: 1em;
+        background: #d3d3d3;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+
+    .slider:hover {
+        opacity: 1;
+    }
+
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
+
+    .slider::-moz-range-thumb {
+        width: 2.5em;
+        height: 2.5em;
+        background: #e94a47;
+        cursor: pointer;
+    }
+
+</style>

src/router/index.js

@@ -1,8 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
-import Warning from '../views/Warning.vue'
-import Questionnaire from "@/views/Questionnaire.vue";
+import Warning from '../views/Warning'
+import Questionnaire from "@/views/Questionnaire";
+import Results from "@/views/Results";
 
 Vue.use(VueRouter)
 
@@ -21,6 +22,11 @@ const routes = [
     path: '/questionnaire',
     name: 'Fragebogen',
     component: Questionnaire
+  },
+  {
+    path: '/results',
+    name: 'Ergebnisse',
+    component: Results
   }
 ]
 

src/store/index.js

@@ -1,31 +1,49 @@
 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: [{
-      question: "Mit wie vielen Menschen haben Sie täglich Kontakt?",
-      answers: ["Answer 1", "Answer 2", "Answer 3"]
-    }]
-  },
-  mutations: {
-    nextQuestion() {
-      if(this.state.currentQuestion <=
-         this.state.questions.length - 1)
-      this.state.currentQuestion += 1
+    state: {
+        currentQuestion: 0,
+        answers: [],
+        questions: []
     },
-    previousQuestion() {
-      if(this.state.currentQuestion > 0) {
-        this.state.currentQuestion -= 1
-      }
-    }
-  },
-  actions: {
-  },
-  modules: {
-  }
+    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
+            }
+        },
+        answerQuestion(state, value) {
+            this.state.answers[this.state.currentQuestion] = value
+        },
+        init() {
+            axios.get('https://avian-safeguard-214619.firebaseio.com/questions.json')
+                .then(res => {
+                    console.log(res)
+                    this.state.questions = res.data
+                    this.state.answers = Array.apply(0, Array(res.data.length)).map(function () {})
+                })
+        }
+    },
+    getters: {
+        numberQuestions: (state) => {
+            return state.questions.length
+        }
+    },
+    actions: {
+    },
+    modules: {}
 })

src/views/Questionnaire.vue

@@ -1,7 +1,9 @@
 <template>
-    <div class="questionnaire">
-        <Question v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
-                  v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
+    <div class="questionmaire">
+        <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>
     </div>
 </template>
 
@@ -9,7 +11,10 @@
     import Question from "@/components/Question";
     export default {
         name: "Questionnaire",
-        components: {Question}
+        components: {Question},
+        mounted() {
+            this.$store.commit("init")
+        }
     }
 </script>
 

src/views/Results.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <p>Ihre Wahrscheinlichkeit sich zu infizieren ist</p>
+    </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
+            })
+            console.log(Math.round(summed / 10))
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>