Skip to content
Snippets Groups Projects
Commit 3ff47d7d authored by Valdemar Åstorp Beere's avatar Valdemar Åstorp Beere
Browse files

fix(format): 

Ran format
parent b671e840
No related branches found
No related tags found
3 merge requests!66Final merge,!50fix(styling):,!4Pipeline fix
Expand all Hide whitespace changes
Inline Side-by-side
src/components/ButtonDisplayStreak.vue
+ 23
− 19
View file @ 3ff47d7d
...@@ -63,20 +63,27 @@ ...@@ -63,20 +63,27 @@
class="flex flex-row items-center mx-auto h-20 w-4/5 md:w-full bg-black-400 gap-4" class="flex flex-row items-center mx-auto h-20 w-4/5 md:w-full bg-black-400 gap-4"
> >
<div class="flex flex-1 overflow-x-auto"> <div class="flex flex-1 overflow-x-auto">
<div v-for="index in 7" :key="index" class="min-w-max mx-auto"> <div v-for="index in 7" :key="index" class="min-w-max mx-auto">
<div class="flex flex-col justify-around items-center"> <div class="flex flex-col justify-around items-center">
<!-- Display the current streak day number adjusted by index --> <!-- Display the current streak day number adjusted by index -->
<span class="text-black text-xs md:text-1xl font-bold"> <span class="text-black text-xs md:text-1xl font-bold">
{{ currentStreak! - ((currentStreak! % 7) - index) }} {{ currentStreak! - ((currentStreak! % 7) - index) }}
</span> </span>
<!-- Display images based on completion --> <!-- Display images based on completion -->
<img <img
src="@/assets/pengesekkStreak.png" src="@/assets/pengesekkStreak.png"
:alt="index <= currentStreak! % 7 ? 'challenge completed' : 'challenge not completed'" :alt="
:class="{'max-h-6 max-w-6 md:max-h-10 md:max-w-10': true, 'grayscale': index > currentStreak! % 7}" index <= currentStreak! % 7
/> ? 'challenge completed'
: 'challenge not completed'
"
:class="{
'max-h-6 max-w-6 md:max-h-10 md:max-w-10': true,
grayscale: index > currentStreak! % 7
}"
/>
</div>
</div> </div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -98,7 +105,6 @@ onMounted(async () => { ...@@ -98,7 +105,6 @@ onMounted(async () => {
if (userStore.streak) { if (userStore.streak) {
currentStreak.value = userStore.streak?.streak currentStreak.value = userStore.streak?.streak
deadline.value = userStore.streak?.firstDue deadline.value = userStore.streak?.firstDue
} }
console.log('Streak:', currentStreak.value) console.log('Streak:', currentStreak.value)
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
...@@ -116,15 +122,13 @@ const handleWindowSizeChange = () => { ...@@ -116,15 +122,13 @@ const handleWindowSizeChange = () => {
screenSize.value = window.innerWidth screenSize.value = window.innerWidth
} }
const displayStreakCard = ref(false) const displayStreakCard = ref(false)
const display = () => { const display = () => {
displayStreakCard.value = true displayStreakCard.value = true
userStore.getUserStreak(); userStore.getUserStreak()
currentStreak.value = userStore.streak?.streak; currentStreak.value = userStore.streak?.streak
deadline.value = userStore.streak?.firstDue; deadline.value = userStore.streak?.firstDue
} }
const hide = () => { const hide = () => {
......
src/components/CardChallengeSavingsPath.vue
+ 82
− 90
View file @ 3ff47d7d
<template> <template>
<!-- Challenge Icon and Details --> <!-- Challenge Icon and Details -->
<div v-if="challenge" class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden"> <div
<!-- Challenge Icon --> v-if="challenge"
<div class="flex flex-col items-center mx-auto md:mx-2 my-auto"> class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden"
>
<div class="flex flex-col flex-nowrap self-center"> <!-- Challenge Icon -->
<!-- Check Icon --> <div class="flex flex-col items-center mx-auto md:mx-2 my-auto">
<div <div class="flex flex-col flex-nowrap self-center">
v-if="challenge.completion !== undefined && challenge.completion >= 100" <!-- Check Icon -->
class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end" <div
> v-if="challenge.completion !== undefined && challenge.completion >= 100"
<img src="@/assets/completed.png" alt="" />️ class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
</div> >
<div v-else class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"> <img src="@/assets/completed.png" alt="" />️
<img src="@/assets/pending.png" alt="" />️ </div>
</div> <div
<div class="basis-3/4"> v-else
<p class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
class="text-center text-wrap text-xs lg:text-lg md:text-md" >
data-cy="challenge-title" <img src="@/assets/pending.png" alt="" />️
> </div>
{{ challenge.title }} <div class="basis-3/4">
</p> <p
</div> class="text-center text-wrap text-xs lg:text-lg md:text-md"
</div> data-cy="challenge-title"
<img >
@click="editChallenge(challenge)" {{ challenge.title }}
:data-cy="'challenge-icon-' + challenge.id" </p>
:src="getChallengeIcon(challenge)" </div>
class="max-w-12 max-h-12 md:max-h-16 md:max-w-16 lg:max-w-20 lg:max-h-20 cursor-pointer hover:scale-125" </div>
:alt="challenge.title" <img
/> @click="editChallenge(challenge)"
<!-- Progress Bar, if the challenge is not complete --> :data-cy="'challenge-icon-' + challenge.id"
<div :src="getChallengeIcon(challenge)"
v-if=" class="max-w-12 max-h-12 md:max-h-16 md:max-w-16 lg:max-w-20 lg:max-h-20 cursor-pointer hover:scale-125"
challenge.completion != undefined && challenge.completion < 100 :alt="challenge.title"
" />
class="flex-grow w-full mt-2" <!-- Progress Bar, if the challenge is not complete -->
>
<div class="flex flex-row ml-5 md:ml-10 justify-center">
<div class="flex flex-col">
<div <div
class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700" v-if="challenge.completion != undefined && challenge.completion < 100"
class="flex-grow w-full mt-2"
> >
<div <div class="flex flex-row ml-5 md:ml-10 justify-center">
class="bg-green-600 h-2.5 rounded-full" <div class="flex flex-col">
data-cy="challenge-progress" <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
:style="{ <div
width: class="bg-green-600 h-2.5 rounded-full"
(challenge.saved / challenge.target) * 100 + data-cy="challenge-progress"
'%' :style="{
}" width: (challenge.saved / challenge.target) * 100 + '%'
></div> }"
</div> ></div>
<div class=" text-center text-nowrap text-xs md:text-base"> </div>
{{ challenge.saved }}kr / {{ challenge.target }}kr <div class="text-center text-nowrap text-xs md:text-base">
{{ challenge.saved }}kr / {{ challenge.target }}kr
</div>
</div>
<button
@click="incrementSaved(challenge)"
:data-cy="'increment-challenge' + challenge.id"
type="button"
class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
+
</button>
</div>
</div> </div>
</div> <span v-else class="text-center text-xs md:text-base"
>Ferdig: {{ challenge.saved }}</span
<button >
@click="incrementSaved(challenge)"
:data-cy="'increment-challenge' + challenge.id"
type="button"
class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
>
+
</button>
</div> </div>
</div>
<span v-else class="text-center text-xs md:text-base"
>Ferdig: {{ challenge.saved }}</span
>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type {Challenge} from "@/types/challenge"; import type { Challenge } from '@/types/challenge'
import {useChallengeStore} from "@/stores/challengeStore"; import { useChallengeStore } from '@/stores/challengeStore'
import router from "@/router"; import router from '@/router'
const challengeStore = useChallengeStore(); const challengeStore = useChallengeStore()
interface Props { interface Props {
challenge: Challenge, challenge: Challenge
} }
defineProps<Props>() defineProps<Props>()
const emit = defineEmits(['update-challenge', 'complete-challenge'])
const emit = defineEmits(['update-challenge', 'complete-challenge']);
// Increment saved amount // Increment saved amount
// In your incrementSaved function in the child component // In your incrementSaved function in the child component
const incrementSaved = async (challenge: Challenge) => { const incrementSaved = async (challenge: Challenge) => {
challenge.saved += challenge.perPurchase
// Trigger the update in the store
const updatedChallenge = (await challengeStore.editUserChallenge(challenge)) as Challenge
challenge.saved += challenge.perPurchase; console.log('updated challenge in child: ', updatedChallenge)
// Trigger the update in the store
const updatedChallenge = await challengeStore.editUserChallenge(challenge) as Challenge;
console.log('updated challenge in child: ', updatedChallenge);
// Emit an event to inform the parent component of the update
emit('update-challenge', updatedChallenge);
// Emit an event to inform the parent component of the update
emit('update-challenge', updatedChallenge)
} }
const editChallenge = (challenge: Challenge) => { const editChallenge = (challenge: Challenge) => {
router.push(`/spareutfordringer/rediger/${challenge.id}`) router.push(`/spareutfordringer/rediger/${challenge.id}`)
} }
// Helper methods to get icons // Helper methods to get icons
const getChallengeIcon = (challenge: Challenge): string => { const getChallengeIcon = (challenge: Challenge): string => {
return `src/assets/${challenge.type.toLowerCase()}.png` return `src/assets/${challenge.type.toLowerCase()}.png`
} }
</script> </script>
src/components/ImgGifTemplate.vue
+ 8
− 9
View file @ 3ff47d7d
<template> <template>
<div class="hover:scale-110 flex justify-center items-center"> <div class="hover:scale-110 flex justify-center items-center">
<img <img
v-if="index % 6 === modValue" v-if="index % 6 === modValue"
:src="url" :src="url"
alt="could not load" alt="could not load"
class="min-w-24 w-full h-auto min-h-24 max-w-32 max-h-32 md:min-h-32 md:max-h-44 md:min-w-32 md:max-w-44 border-2 rounded-lg border-stale-400 shadow-md shadow-black" class="min-w-24 w-full h-auto min-h-24 max-w-32 max-h-32 md:min-h-32 md:max-h-44 md:min-w-32 md:max-w-44 border-2 rounded-lg border-stale-400 shadow-md shadow-black"
/> />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
interface Props { interface Props {
url: string url: string
......
src/components/SavingsPath.vue
+ 353
− 361
View file @ 3ff47d7d
This diff is collapsed.
src/stores/challengeStore.ts
+ 6
− 6
View file @ 3ff47d7d
...@@ -32,15 +32,15 @@ export const useChallengeStore = defineStore('challenge', () => { ...@@ -32,15 +32,15 @@ export const useChallengeStore = defineStore('challenge', () => {
if (index !== -1) { if (index !== -1) {
challenges.value[index] = { ...challenges.value[index], ...response.data } challenges.value[index] = { ...challenges.value[index], ...response.data }
console.log('Updated Challenge:', response.data) console.log('Updated Challenge:', response.data)
return challenges.value[index]; return challenges.value[index]
} }
} else { } else {
console.error('No challenge content found in response data') console.error('No challenge content found in response data')
return null; return null
} }
} catch (error) { } catch (error) {
console.error('Error updating challenge:', error) console.error('Error updating challenge:', error)
return null; return null
} }
} }
const completeUserChallenge = async (challenge: Challenge) => { const completeUserChallenge = async (challenge: Challenge) => {
...@@ -56,15 +56,15 @@ export const useChallengeStore = defineStore('challenge', () => { ...@@ -56,15 +56,15 @@ export const useChallengeStore = defineStore('challenge', () => {
challenges.value[index] = { ...challenges.value[index], ...response.data } challenges.value[index] = { ...challenges.value[index], ...response.data }
console.log('Updated Challenge:', response.data) console.log('Updated Challenge:', response.data)
console.log('Challenge Completed store:', challenges.value[index]) console.log('Challenge Completed store:', challenges.value[index])
return challenges.value[index]; return challenges.value[index]
} }
} else { } else {
console.error('No challenge content found in response data') console.error('No challenge content found in response data')
return null; return null
} }
} catch (error) { } catch (error) {
console.error('Error updating challenge:', error) console.error('Error updating challenge:', error)
return null; return null
} }
} }
......
src/stores/goalStore.ts
+ 2
− 3
View file @ 3ff47d7d
...@@ -15,8 +15,7 @@ export const useGoalStore = defineStore('goal', () => { ...@@ -15,8 +15,7 @@ export const useGoalStore = defineStore('goal', () => {
if (goal.priority === 1) { if (goal.priority === 1) {
priorityGoal.value = goal priorityGoal.value = goal
break break
} } else {
else {
priorityGoal.value = null priorityGoal.value = null
} }
} }
...@@ -56,6 +55,6 @@ export const useGoalStore = defineStore('goal', () => { ...@@ -56,6 +55,6 @@ export const useGoalStore = defineStore('goal', () => {
goals, goals,
priorityGoal, priorityGoal,
getUserGoals, getUserGoals,
editUserGoal, editUserGoal
} }
}) })
src/views/HomeView.vue
+ 17
− 21
View file @ 3ff47d7d
<template> <template>
<div class="flex flex-col items-center max-h-[60vh] md:flex-row md:max-h-[80vh] mx-auto"> <div class="flex flex-col items-center max-h-[60vh] md:flex-row md:max-h-[80vh] mx-auto">
<div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-1 mt-10"> <div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-1 mt-10">
<SpareComponent <SpareComponent
:speech="speech" :speech="speech"
:show="showWelcome" :show="showWelcome"
:png-size="12" :png-size="12"
:direction="'right'" :direction="'right'"
:imageDirection="'right'" :imageDirection="'right'"
class="mt-24" class="mt-24"
></SpareComponent> ></SpareComponent>
<div class="flex flex-row gap-2 items-center mx-auto my-4 md:flex-col md:gap-4 md:m-8"> <div class="flex flex-row gap-2 items-center mx-auto my-4 md:flex-col md:gap-4 md:m-8">
<ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" /> <ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" />
<ButtonAddGoalOrChallenge <ButtonAddGoalOrChallenge
:buttonText="'Legg til spareutfordring'" :buttonText="'Legg til spareutfordring'"
...@@ -30,8 +30,7 @@ ...@@ -30,8 +30,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {onMounted, ref} from 'vue' import { onMounted, ref } from 'vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue' import ButtonAddGoalOrChallenge from '@/components/ButtonAddGoalOrChallenge.vue'
import type { Challenge } from '@/types/challenge' import type { Challenge } from '@/types/challenge'
import type { Goal } from '@/types/goal' import type { Goal } from '@/types/goal'
...@@ -60,15 +59,13 @@ onMounted(async () => { ...@@ -60,15 +59,13 @@ onMounted(async () => {
goal.value = goalStore.priorityGoal goal.value = goalStore.priorityGoal
const lastModalShow = localStorage.getItem('lastModalShow') const lastModalShow = localStorage.getItem('lastModalShow')
if (!lastModalShow || Date.now() - Number(lastModalShow) >= 24 * 60 * 60 * 1000) { if (!lastModalShow || Date.now() - Number(lastModalShow) >= 24 * 60 * 60 * 1000) {
showModal.value = true showModal.value = true
} }
firstLoggedInSpeech() firstLoggedInSpeech()
SpareSpeech(); SpareSpeech()
isMounted.value = true isMounted.value = true
}) })
const firstLoggedInSpeech = () => { const firstLoggedInSpeech = () => {
const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true' const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true'
if (isFirstLogin) { if (isFirstLogin) {
...@@ -83,13 +80,12 @@ const firstLoggedInSpeech = () => { ...@@ -83,13 +80,12 @@ const firstLoggedInSpeech = () => {
} }
const SpareSpeech = () => { const SpareSpeech = () => {
speech.value = [ speech.value = [
'Hei! Jeg er sparegrisen, Spare!', 'Hei! Jeg er sparegrisen, Spare!',
'Valkommen til SpareSti 👑', 'Valkommen til SpareSti 👑',
'Du kan trykke på meg for å høre hva jeg har å si 🐷' 'Du kan trykke på meg for å høre hva jeg har å si 🐷'
] ]
} }
</script> </script>
<style> <style>
......
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