From 512f92991c6be264de12acab5f6f0e6a7f9bff28 Mon Sep 17 00:00:00 2001
From: Eline Evje <elineev@stud.ntnu.no>
Date: Fri, 19 Apr 2024 11:11:13 +0200
Subject: [PATCH] refactor: ran format check
---
src/views/FirstSavingGoalView.vue | 76 +++++++++++++++++++------------
1 file changed, 47 insertions(+), 29 deletions(-)
diff --git a/src/views/FirstSavingGoalView.vue b/src/views/FirstSavingGoalView.vue
index 55a0a97..079e5d7 100644
--- a/src/views/FirstSavingGoalView.vue
+++ b/src/views/FirstSavingGoalView.vue
@@ -1,66 +1,84 @@
<script setup lang="ts">
-import { ref, watch } from 'vue';
-import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue';
-import router from '@/router';
+import { ref, watch } from 'vue'
+import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
+import router from '@/router'
-const savingsGoal = ref('');
-const rawAmount = ref('');
+const savingsGoal = ref('')
+const rawAmount = ref('')
const validateAmount = () => {
- const validPattern = /^(\d+)?(,\d*)?$/;
+ const validPattern = /^(\d+)?(,\d*)?$/
if (!validPattern.test(rawAmount.value)) {
- rawAmount.value = rawAmount.value.slice(0, -1);
+ rawAmount.value = rawAmount.value.slice(0, -1)
} else if (rawAmount.value.includes(',')) {
- rawAmount.value = rawAmount.value.replace(/,+/g, ',');
+ rawAmount.value = rawAmount.value.replace(/,+/g, ',')
}
-};
+}
const checkNegative = () => {
- const numericValue = parseFloat(rawAmount.value.replace(',', '.'));
+ const numericValue = parseFloat(rawAmount.value.replace(',', '.'))
if (numericValue < 0) {
- rawAmount.value = '';
+ rawAmount.value = ''
}
-};
+}
-watch(rawAmount, validateAmount);
-watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative);
+watch(rawAmount, validateAmount)
+watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative)
const onButtonClick = () => {
- router.push('/home');
-};
+ router.push('/home')
+}
</script>
<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="width: 400px; height: 400px;">
+ <div
+ class="flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-16"
+ style="width: 400px; height: 400px"
+ >
<div class="mb-6 w-full text-left">
- <label for="savings-goal" class="block text-xl font-bold mb-2">Jeg vil spare til:</label>
+ <label for="savings-goal" class="block text-xl font-bold mb-2"
+ >Jeg vil spare til:</label
+ >
<input
type="text"
id="savings-goal"
v-model="savingsGoal"
- :class="{'border-[var(--green)]': savingsGoal.valueOf(), 'border-gray-300': !savingsGoal.valueOf()}"
+ :class="{
+ 'border-[var(--green)]': savingsGoal.valueOf(),
+ 'border-gray-300': !savingsGoal.valueOf()
+ }"
class="border-2 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl"
- placeholder="">
+ placeholder=""
+ />
</div>
<div class="mb-8 w-full flex items-center">
- <label for="amount" class="shrink-0 text-xl font-bold mr-2">Jeg vil spare:</label>
+ <label for="amount" class="shrink-0 text-xl font-bold mr-2"
+ >Jeg vil spare:</label
+ >
<input
type="text"
- id="amount"
- v-model="rawAmount"
- :class="{'border-[var(--green)]': rawAmount.valueOf(), 'border-gray-300': !rawAmount.valueOf()}"
- class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full"
- placeholder=""
- min="0">
+ id="amount"
+ v-model="rawAmount"
+ :class="{
+ 'border-[var(--green)]': rawAmount.valueOf(),
+ 'border-gray-300': !rawAmount.valueOf()
+ }"
+ class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full"
+ placeholder=""
+ min="0"
+ />
<span class="shrink-0 text-xl font-bold">kr</span>
</div>
<div class="w-full px-4 py-2">
- <img src="@/assets/coins.png" alt="Savings" class="mx-auto w-36 h-32">
+ <img src="@/assets/coins.png" alt="Savings" class="mx-auto w-36 h-32" />
</div>
</div>
</div>
- <ContinueButtonComponent @click="onButtonClick" class="px-10 py-3 text-2xl font-bold self-end"></ContinueButtonComponent>
+ <ContinueButtonComponent
+ @click="onButtonClick"
+ class="px-10 py-3 text-2xl font-bold self-end"
+ ></ContinueButtonComponent>
</div>
</template>
--
GitLab