feat: add help component to view

src/components/HelpComponent.vue

 <template>
     <div class="fixed bottom-5 left-5">
         <div @click="handleHelpClick" class="hover:cursor-pointer">
-            <img alt="Hjelp" class="w-1/12" src="@/assets/hjelp.png" />
+            <img
+                 alt="Hjelp"
+                 class="w-1/12 transition-transform duration-300 ease-in-out hover:scale-110"
+                 src="@/assets/hjelp.png"
+            />
         </div>
     </div>
     <InteractiveSpare

src/views/EditProfileView.vue

@@ -6,6 +6,7 @@ import CardTemplate from '@/views/CardTemplate.vue'
 import router from '@/router'
 import ToolTip from '@/components/ToolTip.vue'
 import InteractiveSpare from '@/components/InteractiveSpare.vue'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const profile = ref<Profile>({
     id: 0,
@@ -97,6 +98,16 @@ const saveChanges = async () => {
             errorMessage.value = error.response.data.message
         })
 }
+
+const helpSpeech = ref<string[]>([])
+
+const openHelp = () => {
+  helpSpeech.value = [
+    '️Her kan du redigere dine profil-instillinger 🪄',
+    'For å lagre endringene dine, trykk på "Lagre endringer" i høyre hjørne',
+    'Husk at passordet ditt må være minst 8 tegn langt, og inneholde minst ett tall, en stor bokstav, en liten bokstav, og et spesialtegn'
+  ]
+}
 </script>
 
 <template>
@@ -251,6 +262,7 @@ const saveChanges = async () => {
             </div>
         </div>
     </div>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
 </template>
 
 <style scoped></style>

src/views/HomeView.vue

@@ -68,9 +68,9 @@ const firstLoggedInSpeech = () => {
 const openHelp = () => {
     helpSpeech.value = [
         'Heisann, jeg er Spare!',
-        'Jeg skal hjelpe deg med å spare penger.',
+        'Jeg skal hjelpe deg med å spare penger 💵',
         'Du kan legge til sparemål og spareutfordringer!',
-        'Sammen kan vi spare penger og nå dine mål!'
+        'Sammen kan vi spare penger og nå dine mål! 🚀'
     ]
 }
 </script>

src/views/ManageChallengeView.vue

@@ -4,6 +4,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import ProgressBar from '@/components/ProgressBar.vue'
 import authInterceptor from '@/services/authInterceptor'
 import type { Challenge } from '@/types/challenge'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const router = useRouter()
 
@@ -156,6 +157,20 @@ const updateChallenge = () => {
             console.error(error)
         })
 }
+
+const helpSpeech = ref<string[]>([])
+
+const openHelp = () => {
+  helpSpeech.value = [
+    'Her kan du opprette en ny utfordring ☕️',
+    'Tittel er navnet på utfordringen, og beskrivelse er en kort forklaring på hva utfordringen går ut på.',
+    'Pris per sparing er hvor mye du sparer hver gang du sparer, og antall sparinger er hvor mange ganger du har spart.',
+    'Av målbeløp er hvor mye du har spart til nå, og forfallsdato er når utfordringen skal være fullført.',
+    'Du kan selvsagt endre på dette senere!',
+    'Lykke til med utfordringen din! 🎉'
+
+  ]
+}
 </script>
 
 <template>
@@ -254,6 +269,7 @@ const updateChallenge = () => {
             </div>
         </div>
     </div>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
 </template>
 
 <style scoped>

src/views/ManageGoalView.vue

@@ -4,11 +4,13 @@ import { computed, onMounted, ref, watch } from 'vue'
 import type { Goal } from '@/types/goal'
 import ProgressBar from '@/components/ProgressBar.vue'
 import authInterceptor from '@/services/authInterceptor'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const router = useRouter()
 
 const selectedDate = ref<string>('')
 const minDate = new Date(new Date().setDate(new Date().getDate() + 1)).toISOString().slice(0, 16)
+const helpSpeech = ref<string[]>([])
 
 const goalInstance = ref<Goal>({
     title: '',
@@ -116,6 +118,16 @@ const deleteGoal = () => {
             console.error(error)
         })
 }
+
+const openHelp = () => {
+  helpSpeech.value = [
+    'Her kan du opprette et nytt sparemål 🌸',
+    'Tittel er navnet på sparemålet, og beskrivelse er en kort forklaring på hva sparemålet går ut på.',
+    'Kroner spart er hvor mye du har spart til nå, og av målbeløp er hvor mye du ønsker å spare.',
+    'Forfallsdato er datoen du ønsker å ha nådd sparemålet ditt.',
+    'Lykke til med sparingen! 🌴'
+  ]
+}
 </script>
 
 <template>
@@ -187,6 +199,7 @@ const deleteGoal = () => {
             </div>
         </div>
     </div>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
 </template>
 
 <style scoped>

src/views/ProfileView.vue

@@ -8,12 +8,13 @@ import type { Goal } from '@/types/goal'
 import CardGoal from '@/components/CardGoal.vue'
 import router from '@/router'
 import SpareComponent from '@/components/SpareComponent.vue'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const profile = ref<Profile>()
 const completedGoals = ref<Goal[]>([])
 const completedChallenges = ref<Challenge[]>([])
 const speech = ref<string[]>([])
-const newSpeechAvailable = ref(false)
+const helpSpeech = ref<string[]>([])
 
 onMounted(async () => {
     await authInterceptor('/profile')
@@ -54,6 +55,15 @@ const openSpare = () => {
         localStorage.setItem('welcomeSpeechShown', 'true')
     }
 }
+
+const openHelp = () => {
+  helpSpeech.value = [
+    'Du har kommet til profilen din 🐷',
+    'Her kan du se en oversikt over dine profilinstillinger ⚙️',
+    'Du kan også se dine fullførte sparemål og utfordringer!',
+    'Du kan redigere profilen din ved å trykke på "Rediger bruker" 💎'
+  ]
+}
 </script>
 
 <template>
@@ -128,4 +138,5 @@ const openSpare = () => {
             </div>
         </div>
     </div>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
 </template>

src/views/UserChallengesView.vue

@@ -5,6 +5,7 @@ import authInterceptor from '@/services/authInterceptor'
 import type { Challenge } from '@/types/challenge'
 import CardChallenge from '@/components/CardChallenge.vue'
 import PageControl from '@/components/PageControl.vue'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const router = useRouter()
 
@@ -12,6 +13,7 @@ const currentPageActive = ref(0)
 const totalPagesActive = ref(1)
 const currentPageCompleted = ref(0)
 const totalPagesCompleted = ref(1)
+const helpSpeech = ref<string[]>([])
 
 const activeChallenges = ref<Challenge[]>([])
 const completedChallenges = ref<Challenge[]>([])
@@ -44,6 +46,17 @@ onMounted(async () => {
     await getActiveChallenges(currentPageActive.value)
     await getCompletedChallenges(currentPageActive.value)
 })
+
+const openHelp = () => {
+  helpSpeech.value = [
+    'Du har kommet til spareutfordringene dine 💰',
+    'En spareutfordring er en måte å bli kvitt dårlige vaner, samtidig spare penger for å nå dine mål ✨',
+    'Du kan opprette en ny utfordring ved å trykke på "Opprett en ny utfordring"',
+    'Du kan også endre rekkefølgen på utfordringene dine ved å trykke på "Endre rekkefølge".',
+    'Når du har fullført en utfordring, vil den dukke opp under "Fullførte utfordringer".',
+    'Lykke til med utfordringene dine 🏆'
+  ]
+}
 </script>
 
 <template>
@@ -83,6 +96,7 @@ onMounted(async () => {
             :totalPages="totalPagesCompleted"
         />
     </div>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
 </template>
 
 <style scoped></style>

src/views/UserGoalsView.vue

@@ -7,11 +7,13 @@ import authInterceptor from '@/services/authInterceptor'
 import type { Goal } from '@/types/goal'
 import draggable from 'vuedraggable'
 import PageControl from '@/components/PageControl.vue'
+import HelpComponent from "@/components/HelpComponent.vue";
 
 const router = useRouter()
 
 const currentPage = ref(0)
 const totalPages = ref(1)
+const helpSpeech = ref<string[]>([])
 
 const activeGoals = ref<Goal[]>([])
 const completedGoals = ref<Goal[]>([])
@@ -55,6 +57,17 @@ const changeOrder = async () => {
         isDraggable.value = true
     }
 }
+
+const openHelp = () => {
+  helpSpeech.value = [
+    'Du har kommet til sparemålene dine 🎯',
+    'Et sparemål kan være noe du ønsker å spare penger til, for eksempel en ferie 🏖️ eller en ny sykkel 🚴🏻',
+    'Du kan lage nye sparemål ved å trykke på knappen "Opprett et nytt sparemål".',
+    'Du kan også endre rekkefølgen på sparemålene dine ved å trykke på "Endre rekkefølge".',
+    'Når du har fullført et sparemål, vil det dukke opp under "Fullførte sparemål".',
+    'Lykke til med målene dine! 🎀'
+  ]
+}
 </script>
 
 <template>
@@ -96,6 +109,5 @@ const changeOrder = async () => {
             :total-pages="totalPages"
         />
     </div>
-</template>
-
-<style scoped></style>
+  <HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
+</template>
\ No newline at end of file