Skip to content
Snippets Groups Projects
Commit b535b5e3 authored by Ina Martini's avatar Ina Martini
Browse files

chore: run format checks

parent 3beaa54b
No related branches found
No related tags found
3 merge requests!66Final merge,!49Create spare component,!4Pipeline fix
Hide whitespace changes
Inline Side-by-side
src/components/HelpComponent.vue
+ 19
− 23
View file @ b535b5e3
<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" />
<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" />
</div>
</div>
</div>
<InteractiveSpare
:speech="speech"
:direction="'right'"
:pngSize="15"
:isModalOpen="isModalOpen"
class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
></InteractiveSpare>
<InteractiveSpare
:speech="speech"
:direction="'right'"
:pngSize="15"
:isModalOpen="isModalOpen"
class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
></InteractiveSpare>
</template>
<script setup lang="ts">
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import { ref } from 'vue'
import InteractiveSpare from "@/components/InteractiveSpare.vue";
import {ref} from "vue";
const isModalOpen = ref(false)
const isModalOpen = ref(false);
defineProps(['speech'])
defineProps([
'speech',
])
const emit = defineEmits(['openHelp']);
const emit = defineEmits(['openHelp'])
function handleHelpClick() {
emit('openHelp');
isModalOpen.value = true;
emit('openHelp')
isModalOpen.value = true
}
</script>
\ No newline at end of file
</script>
src/components/SpareComponent.vue
+ 45
− 48
View file @ b535b5e3
<template>
<div>
<!-- This image shows only if new speech is available -->
<img
v-if="false"
alt="Varsel"
class="jump w-1/12 h-1/12 ml-52 cursor-pointer z-10"
src="@/assets/varsel.png"
/>
<!-- This is the clickable image that will trigger the modal to open -->
<div class="flex items-center"
:class="{
'flex-row scale-x-[-1]': imageDirection === 'right',
'flex-row-reverse': imageDirection === 'left'
}">
<a @click="handleSpareClick" class="hover:bg-transparent z-20">
<div>
<!-- This image shows only if new speech is available -->
<img
alt="Spare"
class="md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
src="@/assets/spare.png"
v-if="false"
alt="Varsel"
class="jump w-1/12 h-1/12 ml-52 cursor-pointer z-10"
src="@/assets/varsel.png"
/>
</a>
</div>
<!-- InteractiveSpare modal component -->
<InteractiveSpare
:isModalOpen="isModalOpen"
:speech="speech"
:png-size="pngSize"
:direction="direction"
></InteractiveSpare>
</div>
<!-- This is the clickable image that will trigger the modal to open -->
<div
class="flex items-center"
:class="{
'flex-row scale-x-[-1]': imageDirection === 'right',
'flex-row-reverse': imageDirection === 'left'
}"
>
<a @click="handleSpareClick" class="hover:bg-transparent z-20">
<img
alt="Spare"
class="md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
src="@/assets/spare.png"
/>
</a>
</div>
<!-- InteractiveSpare modal component -->
<InteractiveSpare
:isModalOpen="isModalOpen"
:speech="speech"
:png-size="pngSize"
:direction="direction"
></InteractiveSpare>
</div>
</template>
<script setup lang="ts">
import InteractiveSpare from "@/components/InteractiveSpare.vue"
import {defineProps, ref} from "vue"
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import { defineProps, ref } from 'vue'
const isModalOpen = ref(false)
defineProps([
'speech',
'pngSize',
'direction',
'imageDirection',
])
defineProps(['speech', 'pngSize', 'direction', 'imageDirection'])
const emit = defineEmits(['openSpare'])
function handleSpareClick() {
emit('openSpare')
isModalOpen.value = true
emit('openSpare')
isModalOpen.value = true
}
</script>
<style>
@keyframes jump {
0%,
100% {
transform: translateY(0)
}
50% {
transform: translateY(-10px)
}
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.jump {
animation: jump 0.6s infinite ease-in-out
animation: jump 0.6s infinite ease-in-out;
}
</style>
\ No newline at end of file
</style>
src/views/HomeView.vue
+ 5
− 8
View file @ b535b5e3
......@@ -17,10 +17,7 @@
</div>
<savings-path :challenges="challenges" :goal="goal"></savings-path>
</div>
<HelpComponent
:speech="helpSpeech"
@openHelp="openHelp"
></HelpComponent>
<HelpComponent :speech="helpSpeech" @openHelp="openHelp"></HelpComponent>
</template>
<script setup lang="ts">
......@@ -32,8 +29,8 @@ import { useGoalStore } from '@/stores/goalStore'
import { useChallengeStore } from '@/stores/challengeStore'
import SavingsPath from '@/components/SavingsPath.vue'
import router from '@/router'
import SpareComponent from "@/components/SpareComponent.vue";
import HelpComponent from "@/components/HelpComponent.vue";
import SpareComponent from '@/components/SpareComponent.vue'
import HelpComponent from '@/components/HelpComponent.vue'
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
......@@ -69,11 +66,11 @@ const firstLoggedInSpeech = () => {
}
}
const openHelp = () => {
helpSpeech.value = [
helpSpeech.value = [
'Heisann, jeg er Spare!',
'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!'
]
}
</script>
\ No newline at end of file
</script>
src/views/ProfileView.vue
+ 19
− 17
View file @ b535b5e3
......@@ -7,7 +7,7 @@ import type { Challenge } from '@/types/challenge'
import type { Goal } from '@/types/goal'
import CardGoal from '@/components/CardGoal.vue'
import router from '@/router'
import SpareComponent from "@/components/SpareComponent.vue";
import SpareComponent from '@/components/SpareComponent.vue'
const profile = ref<Profile>()
const completedGoals = ref<Goal[]>([])
......@@ -43,14 +43,16 @@ onMounted(async () => {
})
const openSpare = () => {
let welcomeSpeechShown = localStorage.getItem('welcomeSpeechShown');
let welcomeSpeechShown = localStorage.getItem('welcomeSpeechShown')
if (welcomeSpeechShown !== 'true') {
speech.value = [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`,
'Her kan du finne en oversikt over dine profilinstillinger!',
'Du kan også se dine fullførte sparemål og utfordringer!']
localStorage.setItem('welcomeSpeechShown', 'true');
}
if (welcomeSpeechShown !== 'true') {
speech.value = [
`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`,
'Her kan du finne en oversikt over dine profilinstillinger!',
'Du kan også se dine fullførte sparemål og utfordringer!'
]
localStorage.setItem('welcomeSpeechShown', 'true')
}
}
</script>
......@@ -96,14 +98,14 @@ const openSpare = () => {
</div>
<div class="flex flex-col">
<SpareComponent
:speech="speech"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
<SpareComponent
:speech="speech"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
<div class="flex flex-row justify-between mx-4">
<p class="font-bold">Fullførte sparemål</p>
<a class="hover:p-0 cursor-pointer" v-text="'Se alle'" />
......@@ -126,4 +128,4 @@ const openSpare = () => {
</div>
</div>
</div>
</template>
\ No newline at end of file
</template>
src/views/ViewChallengeView.vue
+ 9
− 9
View file @ b535b5e3
......@@ -5,7 +5,7 @@ import ProgressBar from '@/components/ProgressBar.vue'
import authInterceptor from '@/services/authInterceptor'
import type { Challenge } from '@/types/challenge'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import SpareComponent from "@/components/SpareComponent.vue";
import SpareComponent from '@/components/SpareComponent.vue'
const router = useRouter()
......@@ -145,14 +145,14 @@ const completeChallenge = () => {
</button>
</div>
</div>
<SpareComponent
:speech="motivation"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
<SpareComponent
:speech="motivation"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
</div>
</template>
......
src/views/ViewGoalView.vue
+ 10
− 10
View file @ b535b5e3
......@@ -5,7 +5,7 @@ import ProgressBar from '@/components/ProgressBar.vue'
import authInterceptor from '@/services/authInterceptor'
import type { Goal } from '@/types/goal'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import SpareComponent from "@/components/SpareComponent.vue";
import SpareComponent from '@/components/SpareComponent.vue'
const router = useRouter()
......@@ -52,7 +52,7 @@ const calculateSpeech = () => {
}
const openSpare = () => {
calculateSpeech()
calculateSpeech()
}
onMounted(() => {
......@@ -145,14 +145,14 @@ const completeGoal = () => {
/>
</a>
</div>
<SpareComponent
:speech="motivation"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
<SpareComponent
:speech="motivation"
:png-size="15"
:imageDirection="'left'"
:direction="'right'"
@openSpare="openSpare"
class="mb-5"
></SpareComponent>
</div>
</template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment