Add store

frontend/src/components/BeslisboomForm.vue

@@ -2,18 +2,25 @@
 import { load } from 'js-yaml'
 import { ref, computed, onMounted } from 'vue'
 import { DecisionTree, Questions, Answer } from '@/models/DecisionTree'
+import { storeToRefs } from 'pinia'
 import { fold } from 'fp-ts/lib/Either'
 import * as t from 'io-ts'
 import { PathReporter } from 'io-ts/PathReporter'
 
+import { useQuestionStore } from '@/stores/QuestionStore'
+
 import SingleAnswer from '@/components/SingleAnswer.vue'
 import SingleQuestion from '@/components/SingleQuestion.vue'
 import FinalResult from '@/components/FinalResult.vue'
 import DefaultLoader from '@/components/DefaultLoader.vue'
 import DefaultError from '@/components/DefaultError.vue'
 
+const questionStore = useQuestionStore()
+
+const { QuestionId } = storeToRefs(questionStore)
+
 const data = ref<Questions>([])
-const questionId = ref('0')
+const questionId = QuestionId
 const isLoading = ref(true)
 const result = ref<string | null>(null)
 const error = ref<string | null>(null)
@@ -25,9 +32,10 @@ onMounted(async () => {
       throw new Error(`Error getting questionair data: ${response.status}`)
     }
 
-    if (!response.headers.get('content-type')?.includes('text/yaml')) {
-      throw new Error(`Invalid content type: ${response.headers.get('content-type')}`)
-    }
+    //const contenttype = response.headers.get('content-type')
+    // if (!contenttype?.includes('text/yaml')) {
+    //   throw new Error(`Invalid content type: ${response.headers.get('content-type')}`)
+    // }
 
     const text = await response.text()
     const yamlData = load(text)
@@ -59,10 +67,24 @@ const currentQuestion = computed(() => {
 })
 
 function givenAnswer(answer: Answer) {
+  questionStore.addAnswer(questionId.value)
+  questionId.value = String(answer.nextQuestionId)
+
   if (answer.result) {
     result.value = answer.result
+  } else {
+    questionStore.setQuestionId(questionId.value)
   }
-  questionId.value = String(answer.nextQuestionId)
+}
+
+function reset() {
+  questionStore.reset()
+  result.value = null
+}
+
+function back() {
+  questionStore.revertAnswer()
+  result.value = null
 }
 </script>
 
@@ -72,18 +94,21 @@ function givenAnswer(answer: Answer) {
 
     <FinalResult :result="result" />
 
-    <div v-if="currentQuestion" class="ai-decisiontree ai-decisiontree-form-question">
+    <div v-if="currentQuestion" class="ai-decisiontree-form-question">
       <SingleQuestion :question="currentQuestion.question" />
 
       <div
-        class="ai-decisiontree ai-decisiontree-form-answer"
+        class="ai-decisiontree-form-answer"
         v-for="(answer, index) in currentQuestion.answers"
         :key="index"
       >
         <SingleAnswer :answer="answer" @answered="givenAnswer" />
       </div>
     </div>
 
+    <button v-if="questionId !== '0'" @click="back">back</button>
+    <button @click="reset">reset</button>
+
     <DefaultError :error="error" />
   </div>
 </template>

frontend/src/components/DefaultError.vue

@@ -7,7 +7,7 @@ defineProps<Props>()
 
 <template>
   {{ error }}
-  <div v-if="error" class="ai-decisiontree ai-decisiontree-error">
+  <div v-if="error" class="ai-decisiontree-error">
     {{ error }}
     <slot />
   </div>

frontend/src/components/DefaultLoader.vue

@@ -6,7 +6,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div v-if="loading" class="ai-decisiontree ai-decisiontree-loader">
+  <div v-if="loading" class="ai-decisiontree-loader">
     <div></div>
     <div></div>
     <div></div>

frontend/src/components/FinalResult.vue

@@ -6,7 +6,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div v-if="result" class="ai-decisiontree ai-decisiontree-result">
+  <div v-if="result" class="ai-decisiontree-result">
     {{ result }}
     <slot />
   </div>

frontend/src/components/SingleAnswer.vue

@@ -9,7 +9,7 @@ defineEmits(['answered'])
 </script>
 
 <template>
-  <div class="ai-decisiontree ai-decisiontree-answered">
+  <div class="ai-decisiontree-answered">
     <button @click="$emit('answered', answer)">{{ answer.answer }}</button>
     <div v-if="answer.answerComment !== undefined">{{ answer.answerComment }}</div>
   </div>

frontend/src/components/SingleQuestion.vue

@@ -6,7 +6,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <div class="ai-decisiontree ai-decisiontree-question">
+  <div class="ai-decisiontree-question">
     {{ question }}
     <slot />
   </div>

frontend/src/stores/QuestionStore.ts

@@ -0,0 +1,35 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useQuestionStore = defineStore('question', () => {
+  const initialAnswers = JSON.parse(localStorage.getItem('answers') || '[]')
+  const initialQuestionId = JSON.parse(localStorage.getItem('currentquestion') || '0')
+
+  const QuestionId = ref(String(initialQuestionId))
+  const answers = ref(initialAnswers)
+
+  function setQuestionId(id: string) {
+    QuestionId.value = id
+    localStorage.setItem('currentquestion', JSON.stringify(QuestionId.value))
+  }
+
+  function addAnswer(id: string) {
+    answers.value.push(id)
+    localStorage.setItem('answers', JSON.stringify(answers.value))
+  }
+
+  function revertAnswer() {
+    QuestionId.value = answers.value[answers.value.length - 1]
+    answers.value.pop()
+    localStorage.setItem('answers', JSON.stringify(answers.value))
+  }
+
+  function reset() {
+    answers.value = []
+    QuestionId.value = '0'
+    localStorage.removeItem('answers')
+    localStorage.removeItem('currentquestion')
+  }
+
+  return { QuestionId, answers, setQuestionId, addAnswer, revertAnswer, reset }
+})