Disclaimer (#91)

MinBZK · Aug 29, 2024 · 69e3cce · 69e3cce
2 parents 1a8a1e1 + b6ae648
commit 69e3cce
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 46 deletions.
diff --git a/frontend/src/components/BeslisboomForm.vue b/frontend/src/components/BeslisboomForm.vue
@@ -15,10 +15,10 @@ import SingleQuestion from '@/components/SingleQuestion.vue'
 import Conclusion from '@/components/ConclusionComponent.vue'
 import DefaultLoader from '@/components/DefaultLoader.vue'
 import DefaultError from '@/components/DefaultError.vue'
+import Disclaimer from '@/components/DisclaimerForm.vue'
 
 const questionStore = useQuestionStore()
-
-const { QuestionId } = storeToRefs(questionStore)
+const { AcceptedDisclaimer, QuestionId } = storeToRefs(questionStore)
 
 const data_questions = ref<Questions>([])
 const data_conclusions = ref<Conclusions>([])
@@ -108,54 +108,70 @@ function back() {
   questionStore.revertAnswer()
   conclusionId.value = null
 }
+
+function acceptDisclaimer() {
+  questionStore.acceptDisclaimer()
+}
 </script>
 
 <template>
-  <div
-    class="ai-decisiontree flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
-  >
-    <DefaultLoader :loading="isLoading" />
-
-    <DefaultError :error="error" />
-    <Conclusion
-      v-if="findConclusion"
-      :conclusion="findConclusion.conclusion"
-      :obligation="findConclusion.obligation"
-      :labels="questionStore.getJsonLabels()"
-      :sources="findConclusion.sources"
-    />
-    <div>
-      <fieldset>
-        <div v-if="currentQuestion" class="ai-decisiontree-form-question">
-          <SingleQuestion
-            :question="currentQuestion.question"
-            :id="currentQuestion.questionId"
-            :sources="currentQuestion.sources"
-          />
-          <SingleAnswer
-            :answers="currentQuestion.answers"
-            :id="currentQuestion.questionId"
-            @answered="givenAnswer"
-            class="relative top-5"
-          />
-        </div>
-      </fieldset>
-    </div>
+  <div v-if="AcceptedDisclaimer == '0'">
+    <Disclaimer />
+    <button @click="acceptDisclaimer" type="button"
+            class="text-sm font-semibold leading-6 text-gray-900 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+    >
+      Accept
+    </button>
   </div>
+  <div v-else>
+    <div
+      class="ai-decisiontree flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
 
-  <div
-    class="mt-6 flex items-center justify-end gap-x-6 border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
-  >
-    <button @click="reset" type="button" class="text-sm font-semibold leading-6 text-gray-900">
-      Reset
-    </button>
-    <button
-      @click="back"
-      v-if="questionId !== '0'"
-      type="button"
-      class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
     >
-      Terug
-    </button>
+      <DefaultLoader :loading="isLoading" />
+
+      <DefaultError :error="error" />
+      <Conclusion
+        v-if="findConclusion"
+        :conclusion="findConclusion.conclusion"
+        :obligation="findConclusion.obligation"
+        :labels="questionStore.getJsonLabels()"
+        :sources="findConclusion.sources"
+      />
+      <div>
+        <fieldset>
+          <div v-if="currentQuestion" class="ai-decisiontree-form-question">
+            <SingleQuestion
+              :question="currentQuestion.question"
+              :id="currentQuestion.questionId"
+              :sources="currentQuestion.sources"
+            />
+            <SingleAnswer
+              :answers="currentQuestion.answers"
+              :id="currentQuestion.questionId"
+              @answered="givenAnswer"
+              class="relative top-5"
+            />
+          </div>
+        </fieldset>
+      </div>
+    </div>
+
+    <div
+      class="mt-6 flex items-center justify-end gap-x-6 border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
+
+    >
+      <button @click="reset" type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Reset
+      </button>
+      <button
+        @click="back"
+        v-if="questionId !== '0'"
+        type="button"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Terug
+      </button>
+    </div>
   </div>
 </template>
diff --git a/frontend/src/components/DisclaimerForm.vue b/frontend/src/components/DisclaimerForm.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+
+import { ExclamationTriangleIcon } from '@heroicons/vue/24/outline'
+</script>
+
+<template>
+  <DialogPanel class="">
+    <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div class="sm:flex sm:items-start">
+        <div
+          class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
+        >
+          <ExclamationTriangleIcon class="h-6 w-6 text-red-600" aria-hidden="true" />
+        </div>
+        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+          <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900"
+          >Disclaimer
+          </DialogTitle
+          >
+          <div class="mt-2">
+            <p class="text-sm text-gray-500">
+              Deze website is in ontwikkeling. Alle versies ontstaan op een open manier.
+            </p>
+            <p class="text-sm text-gray-500 underline">
+              <a underline href="https://github.com/MinBZK/ai-act-decisiontree">Iedereen mag opmerkingen of suggesties
+                geven.
+              </a>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogPanel>
+</template>
diff --git a/frontend/src/stores/QuestionStore.ts b/frontend/src/stores/QuestionStore.ts
@@ -2,10 +2,12 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useQuestionStore = defineStore('question', () => {
+  const initialAcceptedDisclaimer = JSON.parse(sessionStorage.getItem('acceptedDisclaimer') || '0')
   const initialAnswers = JSON.parse(localStorage.getItem('answers') || '[]')
   const initialLabels = JSON.parse(localStorage.getItem('labels') || '{}')
   const initialQuestionId = JSON.parse(localStorage.getItem('currentquestion') || '0')
 
+  const AcceptedDisclaimer = ref(String(initialAcceptedDisclaimer))
   const QuestionId = ref(String(initialQuestionId))
   const answers = ref(initialAnswers)
   const labels = ref(initialLabels)
@@ -51,5 +53,11 @@ export const useQuestionStore = defineStore('question', () => {
     localStorage.removeItem('labels')
   }
 
-  return { QuestionId, answers, setQuestionId, addAnswer, getJsonLabels, addLabel, revertAnswer, reset }
+  function acceptDisclaimer() {
+    AcceptedDisclaimer.value = '1'
+    sessionStorage.setItem('acceptedDisclaimer', '1')
+  }
+
+  return { AcceptedDisclaimer, QuestionId, answers, setQuestionId, addAnswer, getJsonLabels, addLabel, revertAnswer,
+    reset, acceptDisclaimer }
 })