From 552e56579103f6b2e37fff1ad681604788545517 Mon Sep 17 00:00:00 2001
From: Eline Evje <elineev@stud.ntnu.no>
Date: Tue, 23 Apr 2024 11:48:09 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20implemented=20view=20for=20a=20user?=
 =?UTF-8?q?=C2=B4s=20first=20saving=20challenge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                    |   5 ++
 src/views/FirstSavingChallengeView.vue | 102 +++++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 src/views/FirstSavingChallengeView.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 18518d4..b4179f6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -63,6 +63,11 @@ const router = createRouter({
             path: '/forsteSparemaal',
             name: 'firstSavingGoal',
             component: () => import('../views/FirstSavingGoalView.vue')
+        },
+        {
+            path: '/forsteSpareutfordring',
+            name: 'firstSavingChallengde',
+            component: () => import('../views/FirstSavingChallengeView.vue')
         }
     ],
     scrollBehavior(to, from, savedPosition) {
diff --git a/src/views/FirstSavingChallengeView.vue b/src/views/FirstSavingChallengeView.vue
new file mode 100644
index 0000000..58ed47e
--- /dev/null
+++ b/src/views/FirstSavingChallengeView.vue
@@ -0,0 +1,102 @@
+<template>
+    <div class="flex flex-col items-center justify-center min-h-screen px-4 text-center">
+        <div class="mb-20">
+            <div
+                class="flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-16"
+                style="height: 500px; min-height: 500px; min-width: 400px; max-width: 400px;"
+            >
+                <template v-if="!skipped && !accepted">
+                    <div class="mb-6 w-full text-left">
+                        <label for="savings-goal" class="block text-4xl font-bold mb-2">Spareutfordring</label>
+                    </div>
+                    <div class="flex flex-col w-full mb-4">
+                        <button
+                            v-for="buttonText in buttonOptions"
+                            :key="buttonText"
+                            :class="[
+                            'mb-4 text-xl font-bold w-full rounded-lg py-3 px-4',
+                            selectedOptions.includes(buttonText)
+                                ? 'bg-transparent border-2 border-[var(--green)]'
+                                : 'bg-transparent border-2 border-gray-300'
+                        ]"
+                            @click="toggleOption(buttonText)"
+                        >
+                            {{ buttonText }}
+                        </button>
+                    </div>
+                    <div class="flex justify-between w-full mt-auto space-x-2">
+                        <button
+                            class="bg-[var(--green)] border 4 border-[var(--green)] hover:brightness-90 active:brightness-75 font-bold rounded-lg py-2 px-10 text-lg"
+                            @click="skip"
+                        >
+                            Skip
+                        </button>
+                        <button
+                            :class="[
+        'border-4 font-bold rounded-lg py-2 px-10 text-lg transition-all',
+        { 'bg-[var(--green)] hover:brightness-90 active:brightness-75': selectedOptions.length > 0 },
+        { 'opacity-60 bg-[rgba(149,227,93,0.6)] cursor-not-allowed': selectedOptions.length === 0 }
+    ]"
+                            :disabled="selectedOptions.length === 0"
+                            @click="accept"
+                        >
+                            Godta
+                        </button>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="flex justify-center items-center h-full">
+                        <div class="text-4xl font-bold">{{ acceptedMessage }}</div>
+                    </div>
+                </template>
+            </div>
+        </div>
+        <ContinueButtonComponent
+            :disabled="!skipped && !accepted"
+            @click="onButtonClick"
+            class="px-10 py-3 text-2xl font-bold self-end mb-32 mt-[-11px]"
+        ></ContinueButtonComponent>
+    </div>
+</template>
+
+<script setup lang="ts">
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
+import { ref, watchEffect } from 'vue'
+
+const buttonOptions = ref(['Ikke kjøpe kaffe', 'Ikke kjøpe snus', 'Ikke kjøpe mat i kantina'])
+const selectedOptions = ref<string[]>([])
+const skipped = ref(false)
+const accepted = ref(false)
+
+const toggleOption = (option: string) => {
+    const index = selectedOptions.value.indexOf(option)
+    if (index === -1) {
+        selectedOptions.value.push(option)
+    } else {
+        selectedOptions.value.splice(index, 1)
+    }
+}
+
+const onButtonClick = () => {
+    router.push('/')
+}
+
+const skip = () => {
+    skipped.value = true
+}
+
+const accept = () => {
+    accepted.value = true
+}
+
+const acceptedMessage = ref("Du kan opprette spareutfordringer senere")
+
+watchEffect(() => {
+    if (accepted.value) {
+        acceptedMessage.value = "Du har fått din første spareutfordring!"
+    } else if (skipped.value) {
+        acceptedMessage.value = "Du kan opprette spareutfordringer senere"
+    }
+})
+</script>
-- 
GitLab