diff --git a/src/views/ConfigFamiliarWithSavingsView.vue b/src/views/ConfigFamiliarWithSavingsView.vue
index c7664c76fde01c1989200259eaf9a4801767a913..3b3c8a4d1c6b6143ce1100e1e850a97a82e27988 100644
--- a/src/views/ConfigFamiliarWithSavingsView.vue
+++ b/src/views/ConfigFamiliarWithSavingsView.vue
@@ -48,14 +48,37 @@
import { ref } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
+import { useUserConfigStore } from '@/stores/userConfigStore'
const selectedOption = ref<string | null>(null)
+const userConfigStore = useUserConfigStore()
const selectOption = (option: string) => {
selectedOption.value = option
+ let experienceValue = ''
+
+ switch (option) {
+ case 'litt':
+ experienceValue = 'VERY_LOW'
+ break
+ case 'noe':
+ experienceValue = 'MEDIUM'
+ break
+ case 'godt':
+ experienceValue = 'VERY_HIGH'
+ break
+ default:
+ experienceValue = 'VERY_LOW'
+ }
+
+ userConfigStore.setExperience(experienceValue)
}
const onButtonClick = () => {
- router.push('/konfigurasjonSteg3')
+ if (selectedOption.value) {
+ router.push('/konfigurasjonSteg3')
+ } else {
+ console.error('No option selected')
+ }
}
</script>
diff --git a/src/views/ConfigHabitChangeView.vue b/src/views/ConfigHabitChangeView.vue
index 8f6497e4822f8e79439bc4049ca7918bc939fcfd..c686e26112e56a2d298e5e80d5cb59f0b8736f83 100644
--- a/src/views/ConfigHabitChangeView.vue
+++ b/src/views/ConfigHabitChangeView.vue
@@ -50,14 +50,37 @@
import { ref } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
+import { useUserConfigStore } from '@/stores/userConfigStore'
const selectedOption = ref<string | null>(null)
+const userConfigStore = useUserConfigStore()
const selectOption = (option: string) => {
selectedOption.value = option
+ let motivationValue = ''
+
+ switch (option) {
+ case 'litt':
+ motivationValue = 'VERY_LOW'
+ break
+ case 'passe':
+ motivationValue = 'MEDIUM'
+ break
+ case 'store':
+ motivationValue = 'VERY_HIGH'
+ break
+ default:
+ motivationValue = 'VERY_LOW'
+ }
+
+ userConfigStore.setMotivation(motivationValue)
}
const onButtonClick = () => {
- router.push('/konfigurasjonSteg2')
+ if (selectedOption.value) {
+ router.push('/konfigurasjonSteg2')
+ } else {
+ console.error('No option selected')
+ }
}
</script>
diff --git a/src/views/ConfigSpendingItemsAmountView.vue b/src/views/ConfigSpendingItemsAmountView.vue
index 8146317360f08c970b08df5a793addea913dfb10..b0ea9d49579668e0e075b87e28e417c11479da5e 100644
--- a/src/views/ConfigSpendingItemsAmountView.vue
+++ b/src/views/ConfigSpendingItemsAmountView.vue
@@ -2,23 +2,22 @@
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du per kjøp på ...</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-100">
+ <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
<div
- v-for="(option, index) in options.slice(0, 3)"
- :key="index"
+ v-for="(option, index) in options.slice(0, 6)"
+ :key="`option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.name }}</p>
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
- type="text"
- v-model="option.amount"
- @input="($event) => filterAmount(index, $event)"
+ v-model="amounts[index]"
+ @input="filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
- 'border-gray-300': option.amount === '',
- 'border-[var(--green)]': option.amount !== ''
+ 'border-gray-300': !amounts[index],
+ 'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
@@ -26,23 +25,22 @@
</div>
</div>
</div>
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-100">
+ <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
<div
- v-for="(option, index) in options.slice(3, 6)"
- :key="index"
+ v-for="(option, index) in options.slice(6, 12)"
+ :key="`option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.name }}</p>
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
- type="text"
- v-model="option.amount"
- @input="($event) => filterAmount(index + 3, $event)"
+ v-model="amounts[index + 6]"
+ @input="filterAmount(index + 6, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
- 'border-gray-300': option.amount === '',
- 'border-[var(--green)]': option.amount !== ''
+ 'border-gray-300': !amounts[index + 6],
+ 'border-[var(--green)]': amounts[index + 6]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
@@ -54,7 +52,7 @@
<div class="w-full text-right mb-3 mt-16">
<ContinueButtonComponent
@click="onButtonClick"
- :disabled="options.some((option) => option.amount === '')"
+ :disabled="!isAnyAmountFilled"
class="px-10 py-3 text-2xl font-bold mb-4"
></ContinueButtonComponent>
</div>
@@ -62,38 +60,30 @@
</template>
<script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
+import { useUserConfigStore } from '@/stores/userConfigStore'
-interface Option {
- name: string
- amount: string
-}
+const userConfigStore = useUserConfigStore()
+
+const options = ref(userConfigStore.challengeTypeConfigs)
+const amounts = ref(options.value.map(() => ''))
-const options = ref<Option[]>([
- { name: 'Snus', amount: '' },
- { name: 'Kaffe', amount: '' },
- { name: 'Kantina', amount: '' },
- { name: 'Annet', amount: '' },
- { name: 'Annet', amount: '' },
- { name: 'Annet', amount: '' }
-])
+const isAnyAmountFilled = computed(() => amounts.value.some((amount) => amount !== ''))
const onButtonClick = () => {
+ options.value.forEach((option, index) => {
+ userConfigStore.challengeTypeConfigs[index].specificAmount =
+ parseFloat(amounts.value[index]) || 0
+ })
router.push('/konfigurasjonSteg5')
}
const filterAmount = (index: number, event: Event) => {
const input = event.target as HTMLInputElement
let filteredValue = input.value.replace(/[^\d,]/g, '')
- if (filteredValue.includes(',')) {
- filteredValue = filteredValue.replace(/,+/g, ',')
- const firstCommaIndex = filteredValue.indexOf(',')
- filteredValue =
- filteredValue.slice(0, firstCommaIndex + 1) +
- filteredValue.slice(firstCommaIndex + 1).replace(/,/g, '')
- }
- options.value[index].amount = filteredValue
+ filteredValue = filteredValue.replace(/(,.*?),/g, '$1').replace(/,+/g, ',')
+ amounts.value[index] = filteredValue
}
</script>
diff --git a/src/views/ConfigSpendingItemsTotalAmountView.vue b/src/views/ConfigSpendingItemsTotalAmountView.vue
index 0f8d51b5d4cb80e1253864260d588c050c82ae4f..fe8f2afab62e756fd96cac98bc1e34e5a92da612 100644
--- a/src/views/ConfigSpendingItemsTotalAmountView.vue
+++ b/src/views/ConfigSpendingItemsTotalAmountView.vue
@@ -2,23 +2,23 @@
<div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hvor mye bruker du totalt per uke på ...</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-100">
+ <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
<div
- v-for="(option, index) in options.slice(0, 3)"
- :key="index"
+ v-for="(option, index) in options.slice(0, 6)"
+ :key="`option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.name }}</p>
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
type="text"
- v-model="option.amount"
+ v-model="amounts[index]"
@input="($event) => filterAmount(index, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
- 'border-gray-300': option.amount === '',
- 'border-[var(--green)]': option.amount !== ''
+ 'border-gray-300': !amounts[index],
+ 'border-[var(--green)]': amounts[index]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
@@ -26,23 +26,23 @@
</div>
</div>
</div>
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-100">
+ <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg w-full">
<div
- v-for="(option, index) in options.slice(3, 6)"
- :key="index"
+ v-for="(option, index) in options.slice(6, 12)"
+ :key="`option-${index}`"
class="w-full my-4"
>
<div class="flex justify-between items-center">
- <p class="text-xl font-bold mr-4">{{ option.name }}</p>
+ <p class="text-xl font-bold mr-4">{{ option.type }}</p>
<div class="flex items-center w-2/3">
<input
type="text"
- v-model="option.amount"
- @input="($event) => filterAmount(index + 3, $event)"
+ v-model="amounts[index + 6]"
+ @input="($event) => filterAmount(index + 6, $event)"
class="h-11 px-3 rounded-md text-lg focus:outline-none border-2 w-full"
:class="{
- 'border-gray-300': option.amount === '',
- 'border-[var(--green)]': option.amount !== ''
+ 'border-gray-300': !amounts[index + 6],
+ 'border-[var(--green)]': amounts[index + 6]
}"
/>
<p class="text-xl font-bold ml-2">kr</p>
@@ -54,7 +54,7 @@
<div class="w-full text-right mb-3 mt-16">
<ContinueButtonComponent
@click="onButtonClick"
- :disabled="options.some((option) => option.amount === '')"
+ :disabled="!isAnyAmountFilled"
class="px-10 py-3 text-2xl font-bold mb-4"
></ContinueButtonComponent>
</div>
@@ -62,38 +62,32 @@
</template>
<script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
+import { useUserConfigStore } from '@/stores/userConfigStore'
-interface Option {
- name: string
- amount: string
-}
+const userConfigStore = useUserConfigStore()
+
+const options = ref(userConfigStore.challengeTypeConfigs)
+const amounts = ref(options.value.map(() => ''))
+
+const isAnyAmountFilled = computed(() => amounts.value.some((amount) => amount !== ''))
-const options = ref<Option[]>([
- { name: 'Snus', amount: '' },
- { name: 'Kaffe', amount: '' },
- { name: 'Kantina', amount: '' },
- { name: 'Annet', amount: '' },
- { name: 'Annet', amount: '' },
- { name: 'Annet', amount: '' }
-])
+const onButtonClick = async () => {
+ options.value.forEach((option, index) => {
+ userConfigStore.challengeTypeConfigs[index].generalAmount =
+ parseFloat(amounts.value[index]) || 0
+ })
-const onButtonClick = () => {
- router.push('/')
+ await userConfigStore.postUserConfig()
+ router.push('/hjem')
}
const filterAmount = (index: number, event: Event) => {
const input = event.target as HTMLInputElement
let filteredValue = input.value.replace(/[^\d,]/g, '')
- if (filteredValue.includes(',')) {
- filteredValue = filteredValue.replace(/,+/g, ',')
- const firstCommaIndex = filteredValue.indexOf(',')
- filteredValue =
- filteredValue.slice(0, firstCommaIndex + 1) +
- filteredValue.slice(firstCommaIndex + 1).replace(/,/g, '')
- }
- options.value[index].amount = filteredValue
+ filteredValue = filteredValue.replace(/(,.*?),/g, '$1').replace(/,+/g, ',')
+ amounts.value[index] = filteredValue
}
</script>
diff --git a/src/views/ConfigSpendingItemsView.vue b/src/views/ConfigSpendingItemsView.vue
index 2dea8dffdfe9c300127795cd5981cb95b305d3d2..dc1ccf55352c3eb27b8243b214a2e72941df5f78 100644
--- a/src/views/ConfigSpendingItemsView.vue
+++ b/src/views/ConfigSpendingItemsView.vue
@@ -1,16 +1,25 @@
<template>
- <div class="flex flex-col items-center justify-center min-h-screen px-4 sm:px-2 text-center">
+ <div class="flex flex-col items-center justify-center min-h-screen text-center">
<h1 class="mb-8 lg:mb-12 text-4xl font-bold">Hva bruker du mye penger på?</h1>
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg md:w-96">
+ <div class="flex flex-wrap justify-center gap-8 mb-8">
+ <div
+ class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+ >
<div
- v-for="buttonText in ['Kaffe', 'Snus', 'Kantina']"
+ v-for="buttonText in [
+ 'Kaffe',
+ 'Snus',
+ 'Kantina',
+ 'Sigaretter',
+ 'Transport',
+ 'Klær'
+ ]"
:key="buttonText"
class="w-full my-4"
>
<button
:class="[
- 'w-full h-11 rounded-md text-xl font-bold',
+ 'w-full md:w-64 h-11 rounded-md text-xl font-bold',
selectedOptions.includes(buttonText)
? 'border-2 border-[var(--green)]'
: 'border-2 border-gray-300'
@@ -22,19 +31,19 @@
</button>
</div>
</div>
-
- <div class="flex flex-col items-center bg-white rounded-lg p-8 shadow-lg md:w-96">
- <div v-for="(option, index) in options" :key="`input-${index}`" class="w-full my-4">
+ <div
+ class="flex flex-col items-center justify-center bg-white rounded-lg p-8 shadow-lg w-full md:w-[45%]"
+ >
+ <div
+ v-for="(option, index) in customOptions"
+ :key="`custom-${index}`"
+ class="w-full my-4"
+ >
<input
- v-model="option.name"
- :class="[
- 'w-full h-11 px-3 rounded-md text-xl focus:outline-none transition-colors',
- option.name
- ? 'border-2 border-[var(--green)]'
- : 'border-2 border-gray-300'
- ]"
+ v-model="customOptions[index]"
+ class="w-full md:w-64 h-11 px-3 rounded-md text-xl focus:outline-none transition-colors border-2 border-gray-300"
type="text"
- placeholder="Annet ..."
+ :placeholder="'Annet ' + (index + 1) + ' ...'"
/>
</div>
</div>
@@ -50,36 +59,49 @@
</template>
<script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, computed } from 'vue'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
+import { useUserConfigStore } from '@/stores/userConfigStore'
-interface Option {
- name: string
-}
-
-const options = ref<Option[]>([{ name: '' }, { name: '' }, { name: '' }])
+const userConfigStore = useUserConfigStore()
const selectedOptions = ref<string[]>([])
+const customOptions = ref(['', '', '', '', '', ''])
-const toggleOption = (option: string) => {
- const index = selectedOptions.value.indexOf(option)
- if (index === -1) {
- selectedOptions.value.push(option)
- } else {
- selectedOptions.value.splice(index, 1)
+const toggleOption = (option: string, isCustom: boolean = false) => {
+ if (!isCustom) {
+ const index = selectedOptions.value.indexOf(option)
+ if (index === -1) {
+ selectedOptions.value.push(option)
+ } else {
+ selectedOptions.value.splice(index, 1)
+ }
}
}
const isFormValid = computed(() => {
- return (
- selectedOptions.value.length > 0 ||
- options.value.some((option) => option.name.trim() !== '')
- )
+ const predefinedSelected = selectedOptions.value.length > 0
+ const customFilled = customOptions.value.some((option) => option.trim() !== '')
+ return predefinedSelected || customFilled
})
const onButtonClick = () => {
- if (isFormValid.value) {
- router.push('/konfigurasjonSteg4')
- }
+ const predefinedChallengeTypes = selectedOptions.value.map((option) => ({
+ type: option,
+ specificAmount: 0,
+ generalAmount: 0
+ }))
+
+ const customChallengeTypes = customOptions.value
+ .filter((option) => option.trim() !== '')
+ .map((option) => ({
+ type: option,
+ specificAmount: 0,
+ generalAmount: 0
+ }))
+
+ userConfigStore.challengeTypeConfigs = [...predefinedChallengeTypes, ...customChallengeTypes]
+ console.log('Selected Challenge Types:', userConfigStore.challengeTypeConfigs)
+ router.push('/konfigurasjonSteg4')
}
</script>