Exercise store, mark exercise 0.2 as solved on ticket buy

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>

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)
 }
 

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"

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)
           }

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()
+        })
+    }
+  }
+})