From 3496fd3d079cb92f21c1c46c99ac970ddb11ca85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valdemar=20=C3=85storp=20Beere?= <valdemb@stud.ntnu.no>
Date: Fri, 3 May 2024 09:11:26 +0200
Subject: [PATCH] fix(format): Ran format check
---
src/components/ButtonDisplayStreak.vue | 2 +-
src/components/CardChallengeSavingsPath.vue | 179 ++++++++-------
src/components/ModalEditAvatar.vue | 234 ++++++++++----------
src/components/NavBarComponent.vue | 7 +-
src/stores/userStore.ts | 23 +-
src/views/ManageProfileView.vue | 27 +--
src/views/ViewProfileView.vue | 21 +-
7 files changed, 246 insertions(+), 247 deletions(-)
diff --git a/src/components/ButtonDisplayStreak.vue b/src/components/ButtonDisplayStreak.vue
index 5b4832f..d8fd8b3 100644
--- a/src/components/ButtonDisplayStreak.vue
+++ b/src/components/ButtonDisplayStreak.vue
@@ -14,7 +14,7 @@
<div
v-if="displayStreakCard"
- class="w-[30vh] h-[20vh] md:w-auto md:h-auto group z-50 bg-opacity-50 overflow-hidden absolute right-[-4rem] top-14 md:top-20 flex flex-col justify-evenly text-wrap"
+ class="w-[30vh] h-[20vh] md:w-auto md:h-auto group z-50 bg-opacity-50 overflow-hidden absolute right-[-4rem] top-14 md:top-20 flex flex-col justify-evenly text-wrap"
>
<div
class="flex flex-col justify-evenly w-full h-full py-2 px-4 md:py-0 bg-white rounded-2xl border-4 border-green-300"
diff --git a/src/components/CardChallengeSavingsPath.vue b/src/components/CardChallengeSavingsPath.vue
index 966da3f..651ce0c 100644
--- a/src/components/CardChallengeSavingsPath.vue
+++ b/src/components/CardChallengeSavingsPath.vue
@@ -1,77 +1,77 @@
<template>
- <!-- Challenge Icon and Details -->
- <div
- v-if="challenge"
- class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden"
- >
- <!-- Challenge Icon -->
- <div class="flex flex-col items-center mx-auto md:mx-2 my-auto">
- <div class="flex flex-col flex-nowrap self-center">
- <!-- Check Icon -->
- <div
- v-if="challenge.completion !== undefined && challenge.completion >= 100"
- class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
- >
- <img src="@/assets/completed.png" alt="" />ï¸
- </div>
- <div
- v-else
- class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
- >
- <img src="@/assets/pending.png" alt="" />ï¸
- </div>
- <div class="basis-3/4">
- <p
- class="text-center text-wrap text-xs lg:text-lg md:text-md"
- data-cy="challenge-title"
- >
- {{ challenge.title }}
- </p>
- </div>
- </div>
- <img
- @click="editChallenge(challenge)"
- :data-cy="'challenge-icon-' + challenge.id"
- :src="challengeImageUrl"
- class="max-w-12 max-h-12 md:max-h-8 md:max-w-8 lg:max-w-10 lg:max-h-10 cursor-pointer hover:scale-125 rounded-sm"
- :alt="challenge.title"
- />
- <!-- Progress Bar, if the challenge is not complete -->
- <div
- v-if="challenge.completion != undefined && challenge.completion < 100"
- class="flex-grow w-full mt-2"
- >
- <div class="flex flex-row ml-5 md:ml-10 justify-center">
- <div class="flex flex-col">
- <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
- <div
- class="bg-green-600 h-2.5 rounded-full"
- data-cy="challenge-progress"
- :style="{
+ <!-- Challenge Icon and Details -->
+ <div
+ v-if="challenge"
+ class="flex items-center justify-center shadow-black min-w-24 w-full h-auto md:max-h-full min-h-24 max-w-32 max-h-32 md:min-h-32 md:min-w-32 md:max-w-48 overflow-hidden"
+ >
+ <!-- Challenge Icon -->
+ <div class="flex flex-col items-center mx-auto md:mx-2 my-auto">
+ <div class="flex flex-col flex-nowrap self-center">
+ <!-- Check Icon -->
+ <div
+ v-if="challenge.completion !== undefined && challenge.completion >= 100"
+ class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
+ >
+ <img src="@/assets/completed.png" alt="" />ï¸
+ </div>
+ <div
+ v-else
+ class="min-w-6 min-h-6 max-w-6 max-h-6 md:min-h-8 md:max-h-8 md:min-w-8 md:max-w-8 ml-20 md:ml-32 p-1 basis-1/4 self-end"
+ >
+ <img src="@/assets/pending.png" alt="" />ï¸
+ </div>
+ <div class="basis-3/4">
+ <p
+ class="text-center text-wrap text-xs lg:text-lg md:text-md"
+ data-cy="challenge-title"
+ >
+ {{ challenge.title }}
+ </p>
+ </div>
+ </div>
+ <img
+ @click="editChallenge(challenge)"
+ :data-cy="'challenge-icon-' + challenge.id"
+ :src="challengeImageUrl"
+ class="max-w-12 max-h-12 md:max-h-8 md:max-w-8 lg:max-w-10 lg:max-h-10 cursor-pointer hover:scale-125 rounded-sm"
+ :alt="challenge.title"
+ />
+ <!-- Progress Bar, if the challenge is not complete -->
+ <div
+ v-if="challenge.completion != undefined && challenge.completion < 100"
+ class="flex-grow w-full mt-2"
+ >
+ <div class="flex flex-row ml-5 md:ml-10 justify-center">
+ <div class="flex flex-col">
+ <div class="bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+ <div
+ class="bg-green-600 h-2.5 rounded-full"
+ data-cy="challenge-progress"
+ :style="{
width: (challenge.saved / challenge.target) * 100 + '%'
}"
- ></div>
- </div>
- <div class="text-center text-nowrap text-xs md:text-base">
- {{ challenge.saved }}kr / {{ challenge.target }}kr
- </div>
- </div>
+ ></div>
+ </div>
+ <div class="text-center text-nowrap text-xs md:text-base">
+ {{ challenge.saved }}kr / {{ challenge.target }}kr
+ </div>
+ </div>
- <button
- @click="incrementSaved(challenge)"
- :data-cy="'increment-challenge' + challenge.id"
- type="button"
- class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
- >
- +
- </button>
+ <button
+ @click="incrementSaved(challenge)"
+ :data-cy="'increment-challenge' + challenge.id"
+ type="button"
+ class="inline-block mb-2 ml-2 h-7 w-8 rounded-full p-1 uppercase leading-normal transition duration-150 ease-in-out focus:bg-green-accent-300 focus:shadow-green-2 focus:outline-none focus:ring-0 active:bg-green-600 active:shadow-green-200 motion-reduce:transition-none dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong"
+ >
+ +
+ </button>
+ </div>
+ </div>
+ <span v-else class="text-center text-xs md:text-base"
+ >Ferdig: {{ challenge.saved }}</span
+ >
</div>
- </div>
- <span v-else class="text-center text-xs md:text-base"
- >Ferdig: {{ challenge.saved }}</span
- >
</div>
- </div>
</template>
<script setup lang="ts">
@@ -85,44 +85,43 @@ const challengeStore = useChallengeStore()
const challengeImageUrl = ref('/src/assets/star.png') // Default or placeholder image
const props = defineProps<{ challenge: Challenge }>()
-
const emit = defineEmits(['update-challenge', 'complete-challenge'])
// Increment saved amount
// In your incrementSaved function in the child component
const incrementSaved = async (challenge: Challenge) => {
- challenge.saved += challenge.perPurchase
- // Trigger the update in the store
+ challenge.saved += challenge.perPurchase
+ // Trigger the update in the store
- const updatedChallenge = (await challengeStore.editUserChallenge(challenge)) as Challenge
+ const updatedChallenge = (await challengeStore.editUserChallenge(challenge)) as Challenge
- console.log('updated challenge in child: ', updatedChallenge)
+ console.log('updated challenge in child: ', updatedChallenge)
- // Emit an event to inform the parent component of the update
- emit('update-challenge', updatedChallenge)
+ // Emit an event to inform the parent component of the update
+ emit('update-challenge', updatedChallenge)
}
const editChallenge = (challenge: Challenge) => {
- router.push(`/spareutfordringer/rediger/${challenge.id}`)
+ router.push(`/spareutfordringer/rediger/${challenge.id}`)
}
const getChallengeIcon = async (challengeId: number) => {
- try {
- const imageResponse = await authInterceptor.get(`/challenges/picture?id=${challengeId}`, {
- responseType: 'blob'
- })
- challengeImageUrl.value = URL.createObjectURL(imageResponse.data)
- } catch (error) {
- console.error('Failed to load challenge icon:', error)
- challengeImageUrl.value = '/src/assets/star.png' // Fallback on error
- }
+ try {
+ const imageResponse = await authInterceptor.get(`/challenges/picture?id=${challengeId}`, {
+ responseType: 'blob'
+ })
+ challengeImageUrl.value = URL.createObjectURL(imageResponse.data)
+ } catch (error) {
+ console.error('Failed to load challenge icon:', error)
+ challengeImageUrl.value = '/src/assets/star.png' // Fallback on error
+ }
}
onMounted(() => {
- if (props.challenge?.id) {
- getChallengeIcon(props.challenge.id)
- } else {
- console.error('Challenge id is undefined')
- }
+ if (props.challenge?.id) {
+ getChallengeIcon(props.challenge.id)
+ } else {
+ console.error('Challenge id is undefined')
+ }
})
</script>
diff --git a/src/components/ModalEditAvatar.vue b/src/components/ModalEditAvatar.vue
index 9233440..459190f 100644
--- a/src/components/ModalEditAvatar.vue
+++ b/src/components/ModalEditAvatar.vue
@@ -5,151 +5,157 @@
class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
>
<div class="bg-white p-6 rounded-lg shadow-lg max-w-[80vh] h-auto w-full text-center">
- <div class="flex flex-row justify-end">
- <button @click="closeModal" class="primary ">X</button>
- </div>
+ <div class="flex flex-row justify-end">
+ <button @click="closeModal" class="primary">X</button>
+ </div>
<h2 class="title">Endre avatar</h2>
<div class="avatar-container flex flex-row justify-between gap-2 items-center my-8">
<button @click="cycleArray('prev')">â—€</button>
<div class="flex flex-row items-center justify-around">
<img :src="previousAvatar" alt="avatar" class="avatar h-16 w-16" />
- <img :src="currentAvatar" alt="avatar" class="avatar block mx-auto h-32 w-32 rounded-full border-green-600 border-2 sm:mx-0 sm:shrink-0" />
+ <img
+ :src="currentAvatar"
+ alt="avatar"
+ class="avatar block mx-auto h-32 w-32 rounded-full border-green-600 border-2 sm:mx-0 sm:shrink-0"
+ />
<img :src="nextAvatar" alt="avatar" class="avatar h-16 w-16" />
</div>
<button @click="cycleArray('next')">â–¶</button>
</div>
<div class="flex flex-row items-center gap-4 mx-auto">
- <button @click="saveAvatar" class=" primary save-button basis-1/2">Lagre</button>
- <button @click="openFileExplorer" class="primary basis-1/2">Upload New Avatar</button>
+ <button @click="saveAvatar" class="primary save-button basis-1/2">Lagre</button>
+ <button @click="openFileExplorer" class="primary basis-1/2">
+ Upload New Avatar
+ </button>
</div>
<input type="file" ref="fileInput" @change="handleFileUpload" hidden />
-
</div>
</div>
</template>
<script setup lang="ts">
-import { ref, reactive, computed } from 'vue';
-import { useUserStore } from "@/stores/userStore";
+import { ref, reactive, computed } from 'vue'
+import { useUserStore } from '@/stores/userStore'
-const userStore = useUserStore();
+const userStore = useUserStore()
const state = reactive({
- avatars: [
- '/avatar1.png',
- '/avatar2.png',
- '/avatar3.png',
- '/avatar4.png',
- '/avatar5.png',
- '/avatar6.png',
- '/avatar7.png',
- '/avatar8.png',
- '/avatar9.png',
- ],
- currentAvatarIndex: 0,
- newFile: null, // To hold the new file object
- selectedPublicImg: '' // Track blob URLs created for uploaded files
-});
-
-const isModalOpen = ref(false);
-const fileInput = ref<HTMLElement |null >(null);
-
-const emit = defineEmits(['update-profile-picture']);
-
+ avatars: [
+ '/avatar1.png',
+ '/avatar2.png',
+ '/avatar3.png',
+ '/avatar4.png',
+ '/avatar5.png',
+ '/avatar6.png',
+ '/avatar7.png',
+ '/avatar8.png',
+ '/avatar9.png'
+ ],
+ currentAvatarIndex: 0,
+ newFile: null, // To hold the new file object
+ selectedPublicImg: '' // Track blob URLs created for uploaded files
+})
+
+const isModalOpen = ref(false)
+const fileInput = ref<HTMLElement | null>(null)
+
+const emit = defineEmits(['update-profile-picture'])
const openModal = () => {
- state.avatars = [
- '/avatar1.png',
- '/avatar2.png',
- '/avatar3.png',
- '/avatar4.png',
- '/avatar5.png',
- '/avatar6.png',
- '/avatar7.png',
- '/avatar8.png',
- '/avatar9.png',
- ];
- userStore.getProfilePicture();
- const urlProfilePicture = userStore.profilePicture;
- // Check if a profile picture URL exists and append it to the avatars list
- const img = localStorage.getItem('profilePicture') as string;
- console.log(state.avatars)
- console.log(img)
- if (state.avatars.includes(state.selectedPublicImg) || state.avatars.includes(img)) {
- // Remove the public asset from the list if it's already selected
- state.avatars = state.avatars.filter(avatar => avatar !== state.selectedPublicImg);
- console.log(state.avatars, 'state.avatars')
- }
- // Clear
- console.log(state.avatars)
- localStorage.removeItem('profilePicture');
- state.selectedPublicImg = '';
-
- if (urlProfilePicture) {
- state.avatars.push(urlProfilePicture);
- state.currentAvatarIndex = state.avatars.length - 1; // Set the current avatar to the profile picture
- }
- isModalOpen.value = true;
-};
+ state.avatars = [
+ '/avatar1.png',
+ '/avatar2.png',
+ '/avatar3.png',
+ '/avatar4.png',
+ '/avatar5.png',
+ '/avatar6.png',
+ '/avatar7.png',
+ '/avatar8.png',
+ '/avatar9.png'
+ ]
+ userStore.getProfilePicture()
+ const urlProfilePicture = userStore.profilePicture
+ // Check if a profile picture URL exists and append it to the avatars list
+ const img = localStorage.getItem('profilePicture') as string
+ console.log(state.avatars)
+ console.log(img)
+ if (state.avatars.includes(state.selectedPublicImg) || state.avatars.includes(img)) {
+ // Remove the public asset from the list if it's already selected
+ state.avatars = state.avatars.filter((avatar) => avatar !== state.selectedPublicImg)
+ console.log(state.avatars, 'state.avatars')
+ }
+ // Clear
+ console.log(state.avatars)
+ localStorage.removeItem('profilePicture')
+ state.selectedPublicImg = ''
+
+ if (urlProfilePicture) {
+ state.avatars.push(urlProfilePicture)
+ state.currentAvatarIndex = state.avatars.length - 1 // Set the current avatar to the profile picture
+ }
+ isModalOpen.value = true
+}
const closeModal = () => {
- isModalOpen.value = false;
- //Remove the uploaded file if there is one.
- state.avatars = []
+ isModalOpen.value = false
+ //Remove the uploaded file if there is one.
+ state.avatars = []
- state.newFile = null; // Clear the new file reference
-};
+ state.newFile = null // Clear the new file reference
+}
const cycleArray = (direction: string) => {
- if (direction === 'prev') {
- state.currentAvatarIndex = (state.currentAvatarIndex - 1 + state.avatars.length) % state.avatars.length;
- } else {
- state.currentAvatarIndex = (state.currentAvatarIndex + 1) % state.avatars.length;
- }
-};
+ if (direction === 'prev') {
+ state.currentAvatarIndex =
+ (state.currentAvatarIndex - 1 + state.avatars.length) % state.avatars.length
+ } else {
+ state.currentAvatarIndex = (state.currentAvatarIndex + 1) % state.avatars.length
+ }
+}
const handleFileUpload = async (event: any) => {
- const input = event.target;
- if (input.files && input.files[0]) {
- const file = input.files[0];
- // Clear any existing temporary blob URLs
- state.avatars = state.avatars.filter(avatar => !avatar.startsWith('blob:'));
- state.newFile = file; // Save the new file object for later upload
- state.avatars.push(URL.createObjectURL(file)); // Add the blob URL for preview
- state.currentAvatarIndex = state.avatars.length - 1; // Set this new avatar as current
- }
-};
+ const input = event.target
+ if (input.files && input.files[0]) {
+ const file = input.files[0]
+ // Clear any existing temporary blob URLs
+ state.avatars = state.avatars.filter((avatar) => !avatar.startsWith('blob:'))
+ state.newFile = file // Save the new file object for later upload
+ state.avatars.push(URL.createObjectURL(file)) // Add the blob URL for preview
+ state.currentAvatarIndex = state.avatars.length - 1 // Set this new avatar as current
+ }
+}
const saveAvatar = async () => {
- if (state.newFile &¤tAvatar.value.startsWith('blob:')) {
- // If there's a new file selected, upload it
- const formData = new FormData();
- formData.append('file', state.newFile);
- await userStore.uploadProfilePicture(formData);
- } else if (currentAvatar.value.startsWith('/')) {
- // If it's a public asset, fetch it as a blob and upload
- state.selectedPublicImg = currentAvatar.value;
- const response = await fetch(currentAvatar.value);
- const blob = await response.blob();
- const file = new File([blob], 'public-avatar.png', { type: blob.type });
- const formData = new FormData();
- formData.append('file', file);
- await userStore.uploadProfilePicture(formData);
- localStorage.setItem('profilePicture', currentAvatar.value)
- }
- closeModal();
- emit('update-profile-picture', currentAvatar.value);
-};
+ if (state.newFile && currentAvatar.value.startsWith('blob:')) {
+ // If there's a new file selected, upload it
+ const formData = new FormData()
+ formData.append('file', state.newFile)
+ await userStore.uploadProfilePicture(formData)
+ } else if (currentAvatar.value.startsWith('/')) {
+ // If it's a public asset, fetch it as a blob and upload
+ state.selectedPublicImg = currentAvatar.value
+ const response = await fetch(currentAvatar.value)
+ const blob = await response.blob()
+ const file = new File([blob], 'public-avatar.png', { type: blob.type })
+ const formData = new FormData()
+ formData.append('file', file)
+ await userStore.uploadProfilePicture(formData)
+ localStorage.setItem('profilePicture', currentAvatar.value)
+ }
+ closeModal()
+ emit('update-profile-picture', currentAvatar.value)
+}
const openFileExplorer = () => {
- fileInput.value?.click();
-};
-
-const currentAvatar = computed(() => state.avatars[state.currentAvatarIndex]);
-const nextAvatar = computed(() => state.avatars[(state.currentAvatarIndex + 1) % state.avatars.length]);
-const previousAvatar = computed(() => state.avatars[(state.currentAvatarIndex - 1 + state.avatars.length) % state.avatars.length]);
+ fileInput.value?.click()
+}
+
+const currentAvatar = computed(() => state.avatars[state.currentAvatarIndex])
+const nextAvatar = computed(
+ () => state.avatars[(state.currentAvatarIndex + 1) % state.avatars.length]
+)
+const previousAvatar = computed(
+ () =>
+ state.avatars[(state.currentAvatarIndex - 1 + state.avatars.length) % state.avatars.length]
+)
</script>
-
-
-
-
diff --git a/src/components/NavBarComponent.vue b/src/components/NavBarComponent.vue
index 4aa1a21..951c498 100644
--- a/src/components/NavBarComponent.vue
+++ b/src/components/NavBarComponent.vue
@@ -19,7 +19,7 @@
</div>
<div v-if="!isHamburger" class="flex-row flex gap-2 justify-end w-auto h-14 basis-1/5">
- <ButtonDisplayStreak/>
+ <ButtonDisplayStreak />
<button
class="primary basis-1/2 bg-[#95e35d] logout focus:ring focus:ring-black-300 text-nowrap"
@click="openModal"
@@ -28,10 +28,9 @@
</button>
</div>
<div class="flex flex-row gap-2">
- <ButtonDisplayStreak v-if="isHamburger"/>
- <button class="primary logout" v-if="isHamburger" @click="toggleMenu">☰</button>
+ <ButtonDisplayStreak v-if="isHamburger" />
+ <button class="primary logout" v-if="isHamburger" @click="toggleMenu">☰</button>
</div>
-
</nav>
<div v-if="hamburgerOpen" class="flex flex-col bg-white border border-slate-300 z-50">
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index b30992e..4f640e3 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -249,23 +249,24 @@ export const useUserStore = defineStore('user', () => {
const uploadProfilePicture = async (formData: FormData) => {
try {
const response = await authInterceptor.post('/profile/picture', formData, {
- headers: { 'Content-Type': 'multipart/form-data' },
- });
- console.log('Upload successful:', response.data);
+ headers: { 'Content-Type': 'multipart/form-data' }
+ })
+ console.log('Upload successful:', response.data)
} catch (error: any) {
- console.error('Failed to upload profile picture:', error.response.data);
+ console.error('Failed to upload profile picture:', error.response.data)
}
- };
+ }
const getProfilePicture = async () => {
try {
- const imageResponse = await authInterceptor.get('/profile/picture', { responseType: 'blob' });
- profilePicture.value = URL.createObjectURL(imageResponse.data);
+ const imageResponse = await authInterceptor.get('/profile/picture', {
+ responseType: 'blob'
+ })
+ profilePicture.value = URL.createObjectURL(imageResponse.data)
} catch (error: any) {
- console.error('Failed to retrieve profile picture:', error.response.data);
+ console.error('Failed to retrieve profile picture:', error.response.data)
}
- };
-
+ }
return {
user,
@@ -280,6 +281,6 @@ export const useUserStore = defineStore('user', () => {
streak,
uploadProfilePicture,
getProfilePicture,
- profilePicture,
+ profilePicture
}
})
diff --git a/src/views/ManageProfileView.vue b/src/views/ManageProfileView.vue
index ede0345..470edff 100644
--- a/src/views/ManageProfileView.vue
+++ b/src/views/ManageProfileView.vue
@@ -97,18 +97,15 @@ const selectImage = async () => {
console.log('Vi klarte ikke å hente bildene dine. Prøv igjen!')
}
- if ( !fileInput.files) {
- return;
+ if (!fileInput.files) {
+ return
}
image.value = fileInput.files[0]
}
const uploadImage = async () => {
-
// bildet må lastes opp som en form. altså en body med form
// const formData = new FormData()
-
// authInterceptor.post("/profile/picture", formData)
-
}
const saveChanges = async () => {
@@ -147,19 +144,15 @@ const saveChanges = async () => {
</div>
</div>
<div class="flex flex-row justify-center">
- <input id="fileInput"
- type="file"
- style="display:none;"
- accept =".jpg, .jpeg, .png, .gif, .img" />
- <button
- v-text="'Velg eget bilde!'"
- @click="selectImage()"
- />
-
- <button
- v-text="'Send bilde'"
- @click="uploadImage()"
+ <input
+ id="fileInput"
+ type="file"
+ style="display: none"
+ accept=".jpg, .jpeg, .png, .gif, .img"
/>
+ <button v-text="'Velg eget bilde!'" @click="selectImage()" />
+
+ <button v-text="'Send bilde'" @click="uploadImage()" />
</div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
diff --git a/src/views/ViewProfileView.vue b/src/views/ViewProfileView.vue
index a27f8f7..b8c9f97 100644
--- a/src/views/ViewProfileView.vue
+++ b/src/views/ViewProfileView.vue
@@ -17,7 +17,7 @@ const completedChallenges = ref<Challenge[]>([])
const speech = ref<string[]>([])
const profilePicture = ref<string>()
-const userStore = useUserStore();
+const userStore = useUserStore()
const updateUser = async () => {
authInterceptor('/profile')
@@ -33,7 +33,6 @@ const updateUser = async () => {
onMounted(async () => {
await updateUser()
-
await authInterceptor(`/goals/completed?page=0&size=3`)
.then((response) => {
completedGoals.value = response.data.content
@@ -51,7 +50,7 @@ onMounted(async () => {
})
await userStore.getProfilePicture()
- profilePicture.value = userStore.profilePicture;
+ profilePicture.value = userStore.profilePicture
openSpare()
})
const updateBiometrics = async () => {
@@ -59,10 +58,10 @@ const updateBiometrics = async () => {
await updateUser()
}
-const updateProfilePicture =async () => {
- await updateUser()
- await userStore.getProfilePicture()
- profilePicture.value = userStore.profilePicture;
+const updateProfilePicture = async () => {
+ await updateUser()
+ await userStore.getProfilePicture()
+ profilePicture.value = userStore.profilePicture
}
const openSpare = () => {
@@ -81,9 +80,11 @@ const openSpare = () => {
<h1>Profil</h1>
<div class="flex flex-row gap-5">
<div class="flex flex-col gap-1">
-
-
- <img :src="profilePicture" alt="could not load" class="block mx-auto h-32 rounded-full border-green-600 border-2 sm:mx-0 sm:shrink-0"/>
+ <img
+ :src="profilePicture"
+ alt="could not load"
+ class="block mx-auto h-32 rounded-full border-green-600 border-2 sm:mx-0 sm:shrink-0"
+ />
<ModalEditAvatar @update-profile-picture="updateProfilePicture" />
</div>
<div class="w-full flex flex-col justify-between">
--
GitLab