From 8de3ca481a7c520fdff87a968490827450b76591 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Wed, 23 Oct 2024 13:57:37 +0200
Subject: [PATCH] Exercise store, mark exercise 0.2 as solved on ticket buy

---
 .../src/components/navigation/footerItems.vue | 10 +++---
 software/src/data/api/exerciseApi.ts          |  2 +-
 software/src/pages/misc/helpPage/index.vue    | 17 +++-------
 software/src/stores/basket.store.ts           |  6 +++-
 software/src/stores/exercise.store.ts         | 34 +++++++++++++++++++
 5 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 software/src/stores/exercise.store.ts

diff --git a/software/src/components/navigation/footerItems.vue b/software/src/components/navigation/footerItems.vue
index 471a038..63f2183 100644
--- a/software/src/components/navigation/footerItems.vue
+++ b/software/src/components/navigation/footerItems.vue
@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { updateExercise } from '@/data/api/exerciseApi';
+import { useExerciseStore } from '@/stores/exercise.store';
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute()
 const routeItems = ref(route.path.split('/'))
-
-function solveExerciseXssInUrl() {
-  updateExercise(3, 1, true)
-}
+const exerciseStore = useExerciseStore()
 
 watch(() => route.path, () => {
   routeItems.value = route.path.split("/")
@@ -41,9 +38,10 @@ watch(() => route.path, () => {
         Filter:
         <div v-for="query in route.query" v-html="query" />
 
+        <!-- Logic to check, if exercise 3.1 is solved -->
         <div v-for="query in route.query">
           <span v-if="String(query).startsWith('<iframe')">
-            {{ solveExerciseXssInUrl() }}
+            {{ exerciseStore.solveExercise(3, 1) }}
           </span>
         </div>
       </v-col>
diff --git a/software/src/data/api/exerciseApi.ts b/software/src/data/api/exerciseApi.ts
index 6e21043..9439b08 100644
--- a/software/src/data/api/exerciseApi.ts
+++ b/software/src/data/api/exerciseApi.ts
@@ -2,7 +2,7 @@ import axios from "axios"
 
 const BASE_URL = "http://localhost:3000/exercises"
 
-export async function getAllExerciseGroups() {
+export async function fetchAllExerciseGroups() {
   return await axios.get(BASE_URL)
 }
 
diff --git a/software/src/pages/misc/helpPage/index.vue b/software/src/pages/misc/helpPage/index.vue
index b7c2b10..b64d712 100644
--- a/software/src/pages/misc/helpPage/index.vue
+++ b/software/src/pages/misc/helpPage/index.vue
@@ -1,29 +1,22 @@
 <script setup lang="ts">
-import { getAllExerciseGroups } from '@/data/api/exerciseApi';
 import scoreCard from './scoreCard.vue';
-import { ref } from 'vue';
-import { ExerciseGroupApiModel } from '@/data/models/exercises/exerciseGroupApiModel';
-import { usePreferencesStore } from '@/stores/preferences.store';
+import { useExerciseStore } from '@/stores/exercise.store';
 
-const exerciseGroups = ref<Array<ExerciseGroupApiModel>>([])
-const preferencesStore = usePreferencesStore()
+const exerciseStore = useExerciseStore()
 
-getAllExerciseGroups()
-  .then(result => {
-    exerciseGroups.value = result.data
-  })
+exerciseStore.getAllExercises()
 </script>
 
 <template>
   <v-container max-width="1000">
-    <v-row v-if="preferencesStore.fetchInProgress" v-for="i in 3">
+    <v-row v-if="exerciseStore.fetchInProgress" v-for="i in 3">
       <v-col>
         <score-card :loading="true"
       />
       </v-col>
     </v-row>
 
-    <v-row v-for="exerciseGroup in exerciseGroups">
+    <v-row v-for="exerciseGroup in exerciseStore.exerciseGroups">
       <v-col>
         <score-card
           :exercise-group="exerciseGroup"
diff --git a/software/src/stores/basket.store.ts b/software/src/stores/basket.store.ts
index d759efb..4ba6fed 100644
--- a/software/src/stores/basket.store.ts
+++ b/software/src/stores/basket.store.ts
@@ -9,9 +9,9 @@ import { ref } from "vue";
 import { SelectedSeatModel } from "../data/models/ordering/selectedSeatModel";
 import { calcPrice } from "@/scripts/concertScripts";
 import { BandModel } from "../data/models/acts/bandModel";
-import { ConcertModel } from "../data/models/acts/concertModel";
 import { useAccountStore } from "./account.store";
 import { createOrder } from "@/data/api/orderApi";
+import { useExerciseStore } from "./exercise.store";
 
 export const useBasketStore = defineStore('basketStore', {
   state: () => ({
@@ -97,6 +97,7 @@ export const useBasketStore = defineStore('basketStore', {
     async takeOrder() {
       const accountStore = useAccountStore()
       const feedbackStore = useFeedbackStore()
+      const exerciseStore = useExerciseStore()
 
       await createOrder(
         accountStore.userAccount.id,
@@ -110,6 +111,9 @@ export const useBasketStore = defineStore('basketStore', {
 
             this.itemsInBasket = []
             feedbackStore.changeBanner(BannerStateEnum.ORDERPLACESUCCESSFUL)
+
+            // Exercise 0.2 is solved
+            exerciseStore.solveExercise(0, 2)
           } else {
             feedbackStore.changeBanner(BannerStateEnum.ERROR)
           }
diff --git a/software/src/stores/exercise.store.ts b/software/src/stores/exercise.store.ts
new file mode 100644
index 0000000..66b0221
--- /dev/null
+++ b/software/src/stores/exercise.store.ts
@@ -0,0 +1,34 @@
+import { fetchAllExerciseGroups, updateExercise } from "@/data/api/exerciseApi";
+import { ExerciseGroupApiModel } from "@/data/models/exercises/exerciseGroupApiModel";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useExerciseStore = defineStore("exerciseStore", {
+  state: () => ({
+    exerciseGroups: ref<Array<ExerciseGroupApiModel>>([]),
+
+    /** Request to server sent, waiting for data response */
+    fetchInProgress: ref(false)
+  }),
+
+  actions: {
+    getAllExercises() {
+      this.fetchInProgress = true
+
+      fetchAllExerciseGroups()
+        .then(result => {
+          this.exerciseGroups = result.data
+          this.fetchInProgress = false
+        })
+    },
+
+    solveExercise(exerciseGroupNr: number, exerciseNr: number) {
+      this.fetchInProgress = true
+      
+      updateExercise(exerciseGroupNr, exerciseNr, true)
+        .then(result => {
+          this.getAllExercises()
+        })
+    }
+  }
+})
\ No newline at end of file