Skip to content
Snippets Groups Projects
Commit c47f335b authored by Eline Evje's avatar Eline Evje
Browse files

feat: added functionality for posting config to backend

parent 0e086018
No related branches found
No related tags found
3 merge requests!66Final merge,!22Feat/connect config to backend,!4Pipeline fix
Hide whitespace changes
Inline Side-by-side
src/views/ConfigFamiliarWithSavingsView.vue
+ 24
− 1
View file @ c47f335b
......@@ -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>
src/views/ConfigHabitChangeView.vue
+ 24
− 1
View file @ c47f335b
......@@ -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>
src/views/ConfigSpendingItemsAmountView.vue
+ 30
− 40
View file @ c47f335b
......@@ -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>
src/views/ConfigSpendingItemsTotalAmountView.vue
+ 33
− 39
View file @ c47f335b
......@@ -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>
src/views/ConfigSpendingItemsView.vue
+ 57
− 35
View file @ c47f335b
<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>
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