Merge branch 'master' into 'css_mobile'

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

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-router": "^3.1.5",

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>

yarn.lock

@@ -1580,6 +1580,13 @@ aws4@^1.8.0:
   resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.9.1.tgz?cache=0&sync_timestamp=1578958168482&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
   integrity sha1-fjPY99RJs/ZzzXLeuavcVS2+Uo4=
 
+axios@^0.19.2:
+  version "0.19.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.2.tgz#3ea36c5d8818d0d5f8a8a97a6d36b86cdc00cb27"
+  integrity sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==
+  dependencies:
+    follow-redirects "1.5.10"
+
 babel-eslint@^10.0.3:
   version "10.1.0"
   resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -2676,6 +2683,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.0.0, debug@^3.1.1, debug@^3.2.5:
   version "3.2.6"
   resolved "https://registry.npm.taobao.org/debug/download/debug-3.2.6.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3579,6 +3593,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.10.0"
   resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.10.0.tgz#01f5263aee921c6a54fb91667f08f4155ce169eb"