diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index f99af99d8db075c5862baf6fc57d55f86bcd4fcd..6b54c7187cf5ff808eb928e2413d7c0f62df6932 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -157,6 +157,7 @@ import { useRouter, useRoute } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
import {onMounted, ref} from "vue";
import { BadgeService, type NotificationDTO, NotificationService } from '@/api'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const router = useRouter();
const route = useRoute();
@@ -207,6 +208,7 @@ const getNotifications = async () => {
await BadgeService.updateUnlockedBadges();
notificationListRef.value = await NotificationService.getUnreadNotificationByUser()
} catch (error) {
+ handleUnknownError(error);
notificationListRef.value = []
}
}
@@ -217,6 +219,7 @@ const readNotification = async (notification: NotificationDTO) => {
await NotificationService.updateNotification({requestBody: notification});
notificationListRef.value = await NotificationService.getUnreadNotificationByUser()
} catch (error) {
+ handleUnknownError(error);
notificationListRef.value = [];
}
}
diff --git a/src/components/Budget/Modal/ConfirmDeleteModal.vue b/src/components/Budget/Modal/ConfirmDeleteModal.vue
index 0644da13bdc34b26a4a04955c404c566085972ae..5d8b19f87074ee47704de0c480c65186bf92a3e8 100644
--- a/src/components/Budget/Modal/ConfirmDeleteModal.vue
+++ b/src/components/Budget/Modal/ConfirmDeleteModal.vue
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { BudgetService } from '@/api'
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const emit = defineEmits(['errorEvent', 'deletedEvent'])
const props = defineProps({
@@ -25,6 +26,7 @@ const deleteBudget = async () => {
await BudgetService.deleteBudget({budgetId: props.budgetId})
emit('deletedEvent')
} catch (error) {
+ handleUnknownError(error);
emit('errorEvent', error)
}
}
diff --git a/src/components/Configuration/ConfigurationSteps/ConfigurationSavingGoal.vue b/src/components/Configuration/ConfigurationSteps/ConfigurationSavingGoal.vue
index f6bf338f7ff5455a9777ed3c00aa51cf6c39747f..f94692165826660f651401c41f5ad6830ae81497 100644
--- a/src/components/Configuration/ConfigurationSteps/ConfigurationSavingGoal.vue
+++ b/src/components/Configuration/ConfigurationSteps/ConfigurationSavingGoal.vue
@@ -4,6 +4,7 @@ import { ref } from 'vue'
import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue'
import { useRouter } from 'vue-router'
import {type CreateGoalDTO, GoalService} from "@/api";
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const router = useRouter();
const emit = defineEmits(['changeRouterEvent'])
@@ -35,6 +36,7 @@ const handleSubmit = async () => {
await GoalService.createGoal({ requestBody: createGoalPayload });
await router.push("/")
} catch (error: any) {
+ handleUnknownError(error);
console.log(error.message);
errorMessage.value = error.message;
}
diff --git a/src/components/Friends/UserFriends.vue b/src/components/Friends/UserFriends.vue
index d97189bedc05e1d1f590bce0233249732dc824bd..33d2b7a9cf9d1ad451b7b2b337a3985113117617 100644
--- a/src/components/Friends/UserFriends.vue
+++ b/src/components/Friends/UserFriends.vue
@@ -124,6 +124,7 @@ import { type Ref, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { FriendService, UserService } from '@/api';
import type { UserDTO } from '@/api';
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const router = useRouter();
const friends = ref();
@@ -155,6 +156,7 @@ const searchProfile = async (searchTerm: string) => {
searchedUsers.value = response;
console.log(response);
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to search for profile', error);
}
};
@@ -169,6 +171,7 @@ const addNewFriends = async () => {
searchedUsers.value = response;
showAddFriend.value = true;
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to add friend', error);
}
};
@@ -179,6 +182,7 @@ async function addFriend(friendID: number) {
// Use a spread to update the state and keep immutability
friendRequestsSent.value = { ...friendRequestsSent.value, [friendID]: true };
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to send friend request', error);
}
}
@@ -192,6 +196,7 @@ async function requestFriend() {
elementsInFriendRequest.value = response.length > 0;
console.log("Friend requests: " + response);
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to fetch friend requests', error);
}
}
@@ -206,6 +211,7 @@ const removeFriend = async (friendID: number) => {
const responseFriends = await FriendService.getFriends();
friends.value = responseFriends;
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to remove friend', error);
}
};
@@ -219,6 +225,7 @@ const setupFriends = async () => {
elementsInFriends.value = response.length > 0;
console.log(response);
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to fetch friends', error);
}
};
@@ -231,6 +238,7 @@ const acceptRequest = async (requestID: number) => {
const responseFriends = await FriendService.getFriends();
friends.value = responseFriends;
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to accept friend request', error);
}
};
@@ -241,6 +249,7 @@ const rejectRequest = async (requestID: number) => {
const response = await FriendService.getFriendRequests();
friendRequests.value = response;
} catch (error) {
+ handleUnknownError(error);
console.error('Failed to reject friend request', error);
}
};
diff --git a/src/components/Leaderboard/LeaderboardRank.vue b/src/components/Leaderboard/LeaderboardRank.vue
index b3432f49675eefd694e027b6d55c738eddc47b93..5fe859052b04ce6a4c6f412b5be0edf1517dcfbe 100644
--- a/src/components/Leaderboard/LeaderboardRank.vue
+++ b/src/components/Leaderboard/LeaderboardRank.vue
@@ -46,6 +46,7 @@
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Leaderboard from '@/components/Leaderboard/LeaderboardTable.vue';
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
import { LeaderboardService } from '@/api';
let streakLeaderboardData = ref([] as any);
@@ -72,44 +73,49 @@ onMounted(() => {
});
async function global() {
- let globalPoints = await LeaderboardService.getLeaderboard({
- type: "TOTAL_POINTS",
- filter: "GLOBAL",
- });
- let globalStreak = await LeaderboardService.getLeaderboard({
- type: "TOP_STREAK",
- filter: "GLOBAL",
- });
- let globalCurrentStreak = await LeaderboardService.getLeaderboard({
- type: "CURRENT_STREAK",
- filter: "GLOBAL",
- });
- let globalPointsYou = await LeaderboardService.getSurrounding({
- type: "TOTAL_POINTS",
- filter: "GLOBAL",
- entryCount: 2,
- });
- let globalStreakYou = await LeaderboardService.getSurrounding({
- type: "TOP_STREAK",
- filter: "GLOBAL",
- entryCount: 2,
- });
- let globalCurrentStreakYou = await LeaderboardService.getSurrounding({
- type: "CURRENT_STREAK",
- filter: "GLOBAL",
- entryCount: 2,
- });
-
- pointsLeaderboardData.value = globalPoints.entries;
- currentLeaderboardData.value = globalCurrentStreak.entries;
- streakLeaderboardData.value = globalStreak.entries;
-
- pointsLeaderboardDataExtra.value = globalPointsYou.entries;
- currentLeaderboardDataExtra.value = globalCurrentStreakYou.entries;
- streakLeaderboardDataExtra.value = globalStreakYou.entries;
+ try {
+ let globalPoints = await LeaderboardService.getLeaderboard({
+ type: "TOTAL_POINTS",
+ filter: "GLOBAL",
+ });
+ let globalStreak = await LeaderboardService.getLeaderboard({
+ type: "TOP_STREAK",
+ filter: "GLOBAL",
+ });
+ let globalCurrentStreak = await LeaderboardService.getLeaderboard({
+ type: "CURRENT_STREAK",
+ filter: "GLOBAL",
+ });
+ let globalPointsYou = await LeaderboardService.getSurrounding({
+ type: "TOTAL_POINTS",
+ filter: "GLOBAL",
+ entryCount: 2,
+ });
+ let globalStreakYou = await LeaderboardService.getSurrounding({
+ type: "TOP_STREAK",
+ filter: "GLOBAL",
+ entryCount: 2,
+ });
+ let globalCurrentStreakYou = await LeaderboardService.getSurrounding({
+ type: "CURRENT_STREAK",
+ filter: "GLOBAL",
+ entryCount: 2,
+ });
+
+ pointsLeaderboardData.value = globalPoints.entries;
+ currentLeaderboardData.value = globalCurrentStreak.entries;
+ streakLeaderboardData.value = globalStreak.entries;
+
+ pointsLeaderboardDataExtra.value = globalPointsYou.entries;
+ currentLeaderboardDataExtra.value = globalCurrentStreakYou.entries;
+ streakLeaderboardDataExtra.value = globalStreakYou.entries;
+ } catch (error) {
+ handleUnknownError(error);
+ }
}
async function friends() {
+ try {
let friendsPoints = await LeaderboardService.getLeaderboard({
type: "TOTAL_POINTS",
filter: "FRIENDS",
@@ -138,7 +144,6 @@ async function friends() {
entryCount: 2,
});
-
pointsLeaderboardData.value = friendsPoints.entries;
currentLeaderboardData.value = friendsCurrentStreak.entries;
streakLeaderboardData.value = friendsStreak.entries;
@@ -146,6 +151,9 @@ async function friends() {
pointsLeaderboardDataExtra.value = friendsPointsYou.entries;
currentLeaderboardDataExtra.value = friendsStreakYou.entries;
streakLeaderboardDataExtra.value = friendsCurrentStreakYou.entries;
+ } catch (error) {
+ handleUnknownError(error);
+ }
}
const navigateToUserProfile = (userId: number) => {
diff --git a/src/components/Login/ForgottenPassword.vue b/src/components/Login/ForgottenPassword.vue
index 6d5e7fc808c4eb43be34b7550cf0b4e78d8fa82d..5066cef695a3c0f6cf31688edf4f0e63a931ea85 100644
--- a/src/components/Login/ForgottenPassword.vue
+++ b/src/components/Login/ForgottenPassword.vue
@@ -30,6 +30,7 @@
import { ref } from 'vue';
import { UserService } from '@/api';
import BaseButton from '@/components/BaseComponents/Buttons/BaseButton.vue'
+ import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const formRef = ref()
const form = formRef.value;
@@ -49,6 +50,7 @@
confirmationMessage.value = 'An email has been sent to your email address with a link to reset your password.';
errorMessage.value = '';
} catch (error) {
+ handleUnknownError(error);
errorMessage.value = 'Failed to send email. Please try again.';
confirmationMessage.value = '';
}
diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index 9e01429f4c3d343d1277fcaa29b35d0e8bdae044..90ed8d699a10f4e1f4e0e1d99ff8eee09f2b4ecc 100644
--- a/src/components/Settings/SettingsAccount.vue
+++ b/src/components/Settings/SettingsAccount.vue
@@ -4,6 +4,7 @@ import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
import { useUserInfoStore } from "@/stores/UserStore";
import { UserService } from '@/api';
import type { UserUpdateDTO } from '@/api';
+import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const emailRef = ref('')
const errorMsg = ref('')
@@ -22,6 +23,7 @@ async function setupForm() {
confirmationMsg.value = '';
errorMsg.value = '';
} catch (err) {
+ handleUnknownError(err);
errorMsg.value = 'Error fetching email, try again!'
confirmationMsg.value = ''
}
@@ -40,6 +42,7 @@ const handleSubmit = async () => {
confirmationMsg.value = 'Email updated successfully!'
errorMsg.value = '';
} catch (err) {
+ handleUnknownError(err);
errorMsg.value = "Error updating email, try again!";
confirmationMsg.value = ''
}
diff --git a/src/components/Settings/SettingsSecurity.vue b/src/components/Settings/SettingsSecurity.vue
index 8eab51063b9684504beea4d6e375a1c4b536e3a4..db446c7f0f94f648ddb9013e2bebc538f948a87d 100644
--- a/src/components/Settings/SettingsSecurity.vue
+++ b/src/components/Settings/SettingsSecurity.vue
@@ -37,6 +37,7 @@
import { ref } from 'vue'
import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue'
import { type PasswordUpdateDTO, UserService } from '@/api'
+ import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
const oldPasswordRef = ref('');
const newPasswordRef = ref('');
@@ -71,13 +72,8 @@ const handleSubmit = async () => {
const response = UserService.updatePassword({ requestBody: updateUserPayload })
console.log(response)
} catch (err) {
+ handleUnknownError(err);
console.error(err)
}
}
-
-
-
-
-</script>
-
-<style scoped></style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/Shop/ItemShop.vue b/src/components/Shop/ItemShop.vue
index da198f45b152a166fe6c70d2c1457d39eb1f1869..d6f14fdca2bad7a27b7df6daef35e0db166199f7 100644
--- a/src/components/Shop/ItemShop.vue
+++ b/src/components/Shop/ItemShop.vue
@@ -1,149 +1,195 @@
<template>
<div id="background">
- <br>
- <div id="dropdownContainer">
+ <br />
+ <div id="dropdownContainer">
<h1 class="box">Butikk</h1>
<div>
- <p class="mb-1 h2" data-cy="points">{{points}}<img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
+ <p class="mb-1 h2" data-cy="points">{{ points }}<img src="@/assets/items/pigcoin.png" style="width: 4rem" /></p>
</div>
- </div>
- <div class="container d-flex justify-content-center">
+ </div>
+ <div class="container d-flex justify-content-center">
<div class="row col-md-10">
- <div class="col-md-12">
- <h1>Stash</h1>
- <div class="category row justify-content-between mb-5 m-2">
- <div class="card text-center" style="width: 16rem; border: none">
- <img src="../../assets/items/adfree.png" class="card-img-top" alt="...">
- <div class="card-body">
- <h5 class="card-title">Adfree</h5>
- <button type="button" class="btn btn-primary" id="buttonStyle" @click="buyNoAds">
- +35kr</button>
- </div>
- </div>
- <div class="card text-center" style="width: 16rem; border: none">
- <img src="../../assets/items/piggybank.webp" class="card-img-top" alt="...">
- <div class="card-body">
- <h5 class="card-title">Premium</h5>
- <button type="button" class="btn btn-primary" id="buttonStyle"
- @click="buyPremium">+50kr</button>
- </div>
- </div>
+ <div class="col-md-12">
+ <h1>Stash</h1>
+ <div class="category row mb-2 m-2">
+ <div class="card text-center justify-content-center align-items-center" style="width: 8rem; border: none">
+ <img src="../../assets/items/adfree.png" class="card-img-top" alt="..." style="width: 100px; height: 100px;" />
+ <div class="card-body">
+ <h5 class="card-title">Adfree</h5>
+ <button type="button" class="btn btn-primary" id="buttonStyle" @click="buyNoAds">
+ +35kr
+ </button>
</div>
+ </div>
+ <div class="card text-center justify-content-center align-items-center" style="width: 8rem; border: none">
+ <img src="../../assets/items/piggybank.webp" class="card-img-top" alt="..." style="width: 100px; height: 100px;" />
+ <div class="card-body">
+ <h5 class="card-title">Premium</h5>
+ <button type="button" class="btn btn-primary" id="buttonStyle" @click="buyPremium">
+ +50kr
+ </button>
+ </div>
+ </div>
</div>
- <div class="col-md-12">
- <h1>Items</h1>
- <div class="category row justify-content-between mb-5 m-2">
- <div v-for="product in products" :key="product.id" class="card text-center"
- style="width: 16rem; border: none">
- <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
- alt="..." />
- <div class="card-body">
- <h5 class="card-title">{{ product.itemName }}</h5>
- <ShopButton v-if="!product.alreadyBought" :button-text="product.price"
- @click="buyItem(product.id)"></ShopButton>
- <p v-else>Owned</p>
- </div>
- </div>
+ </div>
+ <div class="col-md-12">
+ <h1>Items</h1>
+ <div class="category row mb-2 m-2">
+ <div v-for="product in products" :key="product.id" class="card text-center d-flex justify-content-center align-items-center"
+ style="width: 8rem; border: none">
+ <img :src="`http://localhost:8080/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
+ <div class="card-body">
+ <h5 class="card-title">{{ product.itemName }}</h5>
+ <h6>{{ product.price }}<img src="../../assets/items/pigcoin.png" style="width: 2rem" /></h6>
+ <ShopButton
+ v-if="!product.alreadyBought"
+ button-text="Buy item"
+ :disabled="product.price > points"
+ @click="buyItem(product.id)"
+ />
+ <p v-else>Owned</p>
</div>
+ </div>
</div>
- <div class="col-md-12">
- <h1>Stash</h1>
- <div class="category row justify-content-between mb-5 m-2">
- <div class="card text-center" style="width: 16rem; border: none">
- <img src="../../assets/items/coffee.jpg" class="card-img-top" alt="...">
+ </div>
+ <div class="col-md-12">
+ <h1>Cool items</h1>
+ <div class="category row mb-2 m-2">
+ <div class="card text-center d-flex justify-content-center align-items-center" style="width: 8rem; border: none">
+ <img src="../../assets/items/coffee.jpg" class="card-img-top" alt="..." style="width: 100px; height: 100px;">
<div class="card-body">
<h5 class="card-title">Free Coffee</h5>
- <ShopButton button-text="500"></ShopButton>
+ <h6>500<img src="../../assets/items/pigcoin.png" style="width: 2rem"></h6>
+ <ShopButton
+ button-text="Buy item"
+ :disabled="500 > points"
+ @click="buySomething()"
+ />
</div>
</div>
- <div class="card text-center" style="width: 16rem; border: none">
- <img src="../../assets/items/viaplay.jpg" class="card-img-top" alt="...">
+ <div class="card text-center d-flex justify-content-center align-items-center" style="width: 8rem; border: none">
+ <img src="../../assets/items/viaplay.jpg" class="card-img-top" alt="..." style="width: 100px; height: 100px;">
<div class="card-body">
- <h5 class="card-title">1 Month Viaplay</h5>
- <ShopButton button-text="10000"></ShopButton>
+ <h5 class="card-title">1 Month</h5>
+ <h6>10 000<img src="../../assets/items/pigcoin.png" style="width: 2rem"></h6>
+ <ShopButton
+ button-text="Buy item"
+ :disabled="10000 > points"
+ @click="buySomething()"
+ />
</div>
</div>
- <div class="card text-center" style="width: 16rem; border: none">
- <img src="../../assets/items/pirbad.png" class="card-img-top" alt="...">
+ <div class="card text-center d-flex justify-content-center align-items-center" style="width: 8rem; border: none">
+ <img src="../../assets/items/pirbad.png" class="card-img-top" alt="..." style="width: 100px; height: 100px;">
<div class="card-body">
<h5 class="card-title">-10% rabatt</h5>
- <ShopButton button-text="1000"></ShopButton>
+ <h6>1000<img src="../../assets/items/pigcoin.png" style="width: 2rem"></h6>
+ <ShopButton
+ button-text="Buy item"
+ :disabled="1000 > points"
+ @click="buySomething()"
+ />
</div>
</div>
</div>
</div>
-
</div>
+ </div>
</div>
- </div>
-</template>
-
-<script setup lang="ts">
-import ShopButton from '@/components/Shop/ShopButton.vue';
-import { ref, onMounted } from 'vue';
-import { UserService } from '@/api';
-import { useUserInfoStore } from '@/stores/UserStore';
-import { ItemService } from '@/api';
-
-const products = ref([] as any);
-const points = ref();
-
-const getStore = async () => {
+ </template>
+
+ <script setup lang="ts">
+ import ShopButton from '@/components/Shop/ShopButton.vue';
+ import { ref, onMounted } from 'vue';
+ import { UserService } from '@/api';
+ import { useUserInfoStore } from '@/stores/UserStore';
+ import { ItemService } from '@/api';
+ import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
+
+ const products = ref([] as any);
+ const points = ref();
+
+ const getStore = async () => {
try {
- const response = await ItemService.getStore();
- products.value = response;
+ const response = await ItemService.getStore();
+ products.value = response;
} catch (error) {
- console.log(error);
+ handleUnknownError(error);
+ console.log(error);
}
-}
-
-const getPoints = async () => {
+ }
+
+ const getPoints = async () => {
try {
- const response = await UserService.getUser();
- points.value = response.point?.currentPoints;
+ const response = await UserService.getUser();
+ points.value = response.point?.currentPoints;
} catch (error) {
- console.log(error);
+ handleUnknownError(error);
+ console.log(error);
}
-}
-
-const buyItem = async (itemId: number) => {
+ }
+
+ const buyItem = async (itemId: number) => {
try {
- const response = await ItemService.buyItem({ itemId: itemId });
- console.log(response);
- getStore();
- getPoints();
+ const response = await ItemService.buyItem({ itemId: itemId });
+ console.log(response);
+ getStore();
+ getPoints();
} catch (error) {
- console.log(error);
+ handleUnknownError(error);
+ console.log(error);
}
-}
-
-const buyPremium = async () => {
+ }
+
+ const buyPremium = async () => {
try {
- const response = await UserService.updateSubscriptionLevel({ subscriptionLevel: 'PREMIUM' });
- useUserInfoStore().setUserInfo({
- subscriptionLevel: 'PREMIUM',
- })
+ const response = await UserService.updateSubscriptionLevel({ subscriptionLevel: 'PREMIUM' });
+ useUserInfoStore().setUserInfo({
+ subscriptionLevel: 'PREMIUM',
+ })
} catch (error) {
- console.log(error);
+ handleUnknownError(error);
+ console.log(error);
}
-}
-
-const buyNoAds = async () => {
+ }
+
+ const buyNoAds = async () => {
try {
- const response = await UserService.updateSubscriptionLevel({ subscriptionLevel: 'NO_ADS' });
- useUserInfoStore().setUserInfo({
- subscriptionLevel: 'NO_ADS',
- })
+ const response = await UserService.updateSubscriptionLevel({ subscriptionLevel: 'NO_ADS' });
+ useUserInfoStore().setUserInfo({
+ subscriptionLevel: 'NO_ADS',
+ })
} catch (error) {
- console.log(error);
+ handleUnknownError(error);
+ console.log(error);
}
+ }
+
+ //Just a random code generator for the feature's sake
+ function generateRandomCode(length = 8) {
+ const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+ let result = '';
+ for (let i = 0; i < length; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+ return result;
}
-onMounted(() => {
+ const buySomething = async () => {
+ try {
+ const randomCode = generateRandomCode();
+ alert(`Thank you for your purchase! Your code is: ${randomCode}`);
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
+ }
+
+ onMounted(() => {
getStore();
getPoints();
-})
-</script>
+ })
+ </script>
<style scoped>
.card {
@@ -152,7 +198,7 @@ onMounted(() => {
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
- /* Rounded corners */
+ height: 225px;
}
.box {
diff --git a/src/components/Shop/ShopButton.vue b/src/components/Shop/ShopButton.vue
index 843eeb1530c696b3ae8aca05ab310aae54aaf057..67b6a41c3b918fb896239640b763982831feb1a7 100644
--- a/src/components/Shop/ShopButton.vue
+++ b/src/components/Shop/ShopButton.vue
@@ -1,13 +1,39 @@
+<!-- ShopButton.vue -->
<template>
- <button type="button" class="btn btn-primary" id="buttonStyle"><img src="../../assets/items/pigcoin.png" style="width: 2rem"> +{{ buttonText }}</button>
+ <button
+ :disabled="disabled"
+ :class="['btn', { 'btn-primary': !disabled, 'btn-secondary': disabled }]"
+ id="buttonStyle"
+ @click="handleClick"
+ >
+ {{ buttonText }}
+ </button>
</template>
<script setup lang="ts">
-defineProps<{ buttonText: string }>();
+import { defineProps, defineEmits } from 'vue';
+
+const props = defineProps({
+ buttonText: String,
+ disabled: Boolean,
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = () => {
+ if (!props.disabled) {
+ emit('click');
+ }
+};
</script>
<style scoped>
- #buttonStyle {
- border-radius: 3rem;
- }
-</style>
\ No newline at end of file
+#buttonStyle {
+ border-radius: 1rem;
+ cursor: pointer;
+}
+
+#buttonStyle[disabled] {
+ cursor: not-allowed;
+}
+</style>
diff --git a/src/components/Shop/__tests__/ShopButton.spec.ts b/src/components/Shop/__tests__/ShopButton.spec.ts
index 277e3521fe84175524d94d0f10bfdf5b7da851c3..bc9cbea5ba146921c2e480d56e8257e9c1e021b0 100644
--- a/src/components/Shop/__tests__/ShopButton.spec.ts
+++ b/src/components/Shop/__tests__/ShopButton.spec.ts
@@ -20,9 +20,6 @@ describe('ImageButtonComponent', () => {
const button = wrapper.find('#buttonStyle')
expect(button.exists()).toBe(true)
- expect(button.text()).toContain('+Add Coin')
- const image = button.find('img')
- expect(image.exists()).toBe(true)
- expect(image.attributes('src')).toBe('/src/assets/items/pigcoin.png')
+ expect(button.text()).toContain('Add Coin')
})
})
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index 4aebb55972d017af7c1469446acd9a9cb4ef8d61..f7907b39ced3e3c370f50f2d91faeba4f78afe75 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -7,15 +7,9 @@ import { useUserInfoStore } from '@/stores/UserStore';
<template>
<Menu data-cy="menu"></Menu>
- <div v-if="!useUserInfoStore().isPremium && !useUserInfoStore().isNoAds" style="display: flex; flex-direction: row;">
- <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
- </div>
<div id="minHeight">
<RouterView />
</div>
- <div v-if="!useUserInfoStore().isPremium && !useUserInfoStore().isNoAds" style="display: flex; flex-direction: row;">
- <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
- </div>
<Footer></Footer>
</template>