Skip to content
Snippets Groups Projects
Commit 136decaf authored by VIktorGrev's avatar VIktorGrev
Browse files

feat: Adding selecting banner

parent 9db61e58
No related branches found
No related tags found
1 merge request!99fix: new OpenAPI spec
Hide whitespace changes
Inline Side-by-side
src/assets/banners/steps.svg 0 → 100644
+ 1
− 0
View file @ 136decaf
<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#140021"></rect><path d="M0 87L286 87L286 116L571 116L571 88L857 88L857 118L1143 118L1143 99L1429 99L1429 114L1714 114L1714 96L2000 96L2000 103L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#9900ff"></path><path d="M0 149L286 149L286 136L571 136L571 118L857 118L857 127L1143 127L1143 151L1429 151L1429 148L1714 148L1714 150L2000 150L2000 144L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#7700c6"></path><path d="M0 160L286 160L286 169L571 169L571 160L857 160L857 174L1143 174L1143 164L1429 164L1429 181L1714 181L1714 181L2000 181L2000 174L2000 201L2000 201L1714 201L1714 201L1429 201L1429 201L1143 201L1143 201L857 201L857 201L571 201L571 201L286 201L286 201L0 201Z" fill="#560090"></path></svg>
\ No newline at end of file
src/assets/banners/waves.svg 0 → 100644
+ 1
− 0
View file @ 136decaf
<svg id="visual" viewBox="0 0 2000 200" width="2000" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><rect x="0" y="0" width="2000" height="200" fill="#001220"></rect><path d="M0 43L15.8 43.3C31.7 43.7 63.3 44.3 95 57.8C126.7 71.3 158.3 97.7 190.2 103C222 108.3 254 92.7 285.8 84.3C317.7 76 349.3 75 381 70.5C412.7 66 444.3 58 476 50.8C507.7 43.7 539.3 37.3 571.2 52.2C603 67 635 103 666.8 122C698.7 141 730.3 143 762 134.7C793.7 126.3 825.3 107.7 857 91.5C888.7 75.3 920.3 61.7 952.2 62.8C984 64 1016 80 1047.8 75.7C1079.7 71.3 1111.3 46.7 1143 40.8C1174.7 35 1206.3 48 1238 64.2C1269.7 80.3 1301.3 99.7 1333.2 110.7C1365 121.7 1397 124.3 1428.8 118.5C1460.7 112.7 1492.3 98.3 1524 100.3C1555.7 102.3 1587.3 120.7 1619 129.7C1650.7 138.7 1682.3 138.3 1714.2 128.3C1746 118.3 1778 98.7 1809.8 82.3C1841.7 66 1873.3 53 1905 61.2C1936.7 69.3 1968.3 98.7 1984.2 113.3L2000 128L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#fcaf3c"></path><path d="M0 83L15.8 79.7C31.7 76.3 63.3 69.7 95 78.3C126.7 87 158.3 111 190.2 120.3C222 129.7 254 124.3 285.8 116.8C317.7 109.3 349.3 99.7 381 96.7C412.7 93.7 444.3 97.3 476 95C507.7 92.7 539.3 84.3 571.2 91.5C603 98.7 635 121.3 666.8 131C698.7 140.7 730.3 137.3 762 133.8C793.7 130.3 825.3 126.7 857 117.7C888.7 108.7 920.3 94.3 952.2 96.3C984 98.3 1016 116.7 1047.8 125.8C1079.7 135 1111.3 135 1143 124.8C1174.7 114.7 1206.3 94.3 1238 100.5C1269.7 106.7 1301.3 139.3 1333.2 151.8C1365 164.3 1397 156.7 1428.8 154.3C1460.7 152 1492.3 155 1524 155.5C1555.7 156 1587.3 154 1619 150.7C1650.7 147.3 1682.3 142.7 1714.2 132.3C1746 122 1778 106 1809.8 93C1841.7 80 1873.3 70 1905 69C1936.7 68 1968.3 76 1984.2 80L2000 84L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff9e43"></path><path d="M0 93L15.8 95.7C31.7 98.3 63.3 103.7 95 109.3C126.7 115 158.3 121 190.2 116.8C222 112.7 254 98.3 285.8 100.2C317.7 102 349.3 120 381 120.2C412.7 120.3 444.3 102.7 476 102.5C507.7 102.3 539.3 119.7 571.2 122.3C603 125 635 113 666.8 104C698.7 95 730.3 89 762 101.3C793.7 113.7 825.3 144.3 857 144C888.7 143.7 920.3 112.3 952.2 109.7C984 107 1016 133 1047.8 146.7C1079.7 160.3 1111.3 161.7 1143 151C1174.7 140.3 1206.3 117.7 1238 114.5C1269.7 111.3 1301.3 127.7 1333.2 130C1365 132.3 1397 120.7 1428.8 124C1460.7 127.3 1492.3 145.7 1524 155.5C1555.7 165.3 1587.3 166.7 1619 169.3C1650.7 172 1682.3 176 1714.2 173C1746 170 1778 160 1809.8 154.8C1841.7 149.7 1873.3 149.3 1905 141.2C1936.7 133 1968.3 117 1984.2 109L2000 101L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff8e4b"></path><path d="M0 114L15.8 119C31.7 124 63.3 134 95 138.3C126.7 142.7 158.3 141.3 190.2 135.8C222 130.3 254 120.7 285.8 120.5C317.7 120.3 349.3 129.7 381 135.7C412.7 141.7 444.3 144.3 476 147C507.7 149.7 539.3 152.3 571.2 153.5C603 154.7 635 154.3 666.8 150.3C698.7 146.3 730.3 138.7 762 141.8C793.7 145 825.3 159 857 161.2C888.7 163.3 920.3 153.7 952.2 144C984 134.3 1016 124.7 1047.8 126.3C1079.7 128 1111.3 141 1143 152.2C1174.7 163.3 1206.3 172.7 1238 175C1269.7 177.3 1301.3 172.7 1333.2 162.5C1365 152.3 1397 136.7 1428.8 129C1460.7 121.3 1492.3 121.7 1524 127.8C1555.7 134 1587.3 146 1619 150C1650.7 154 1682.3 150 1714.2 142.8C1746 135.7 1778 125.3 1809.8 122.8C1841.7 120.3 1873.3 125.7 1905 130.2C1936.7 134.7 1968.3 138.3 1984.2 140.2L2000 142L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff7e55"></path><path d="M0 166L15.8 171.2C31.7 176.3 63.3 186.7 95 188C126.7 189.3 158.3 181.7 190.2 177.7C222 173.7 254 173.3 285.8 170.5C317.7 167.7 349.3 162.3 381 159.2C412.7 156 444.3 155 476 159.8C507.7 164.7 539.3 175.3 571.2 181C603 186.7 635 187.3 666.8 183.7C698.7 180 730.3 172 762 172.7C793.7 173.3 825.3 182.7 857 188.3C888.7 194 920.3 196 952.2 187.7C984 179.3 1016 160.7 1047.8 158.8C1079.7 157 1111.3 172 1143 179.3C1174.7 186.7 1206.3 186.3 1238 186.2C1269.7 186 1301.3 186 1333.2 182.2C1365 178.3 1397 170.7 1428.8 167C1460.7 163.3 1492.3 163.7 1524 169.5C1555.7 175.3 1587.3 186.7 1619 192.3C1650.7 198 1682.3 198 1714.2 192.7C1746 187.3 1778 176.7 1809.8 169.3C1841.7 162 1873.3 158 1905 153.7C1936.7 149.3 1968.3 144.7 1984.2 142.3L2000 140L2000 201L1984.2 201C1968.3 201 1936.7 201 1905 201C1873.3 201 1841.7 201 1809.8 201C1778 201 1746 201 1714.2 201C1682.3 201 1650.7 201 1619 201C1587.3 201 1555.7 201 1524 201C1492.3 201 1460.7 201 1428.8 201C1397 201 1365 201 1333.2 201C1301.3 201 1269.7 201 1238 201C1206.3 201 1174.7 201 1143 201C1111.3 201 1079.7 201 1047.8 201C1016 201 984 201 952.2 201C920.3 201 888.7 201 857 201C825.3 201 793.7 201 762 201C730.3 201 698.7 201 666.8 201C635 201 603 201 571.2 201C539.3 201 507.7 201 476 201C444.3 201 412.7 201 381 201C349.3 201 317.7 201 285.8 201C254 201 222 201 190.2 201C158.3 201 126.7 201 95 201C63.3 201 31.7 201 15.8 201L0 201Z" fill="#ff6f61"></path></svg>
\ No newline at end of file
src/components/Settings/SettingsProfile.vue
+ 81
− 21
View file @ 136decaf
......@@ -2,8 +2,9 @@
import { ref, onMounted } from 'vue';
import BaseInput from '@/components/BaseComponents/Input/BaseInput.vue';
import { useUserInfoStore } from "@/stores/UserStore";
import { UserService, ImageService } from '@/api';
import { UserService, ImageService, ItemService } from '@/api';
import type { UserUpdateDTO } from '@/api';
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
let apiUrl = import.meta.env.VITE_APP_API_URL;
......@@ -13,8 +14,11 @@ const emailRef = ref('')
const passwordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
let banners = ref([] as any)
const imageRange = ref([10, 11, 12, 13, 14, 15]);
let hasBanners = ref(false);
let selectedBannerId = ref(0);
const selectedBanner = ref()
const iconSrc = ref('../src/assets/userprofile.png');
const fileInputRef = ref();
......@@ -54,10 +58,36 @@ const uploadImage = async (file: any) => {
profileImage: response,
})
} catch (error) {
handleUnknownError(error);
console.error('Failed to upload image:', error);
}
};
const getInventory = async () => {
try {
const response = await ItemService.getInventory();
console.log(response)
banners.value = response;
hasBanners.value = response.length > 0;
} catch (error) {
handleUnknownError(error);
console.error('Failed to get inventory:', error);
}
};
const selectItem = async (bannerId: any) => {
try {
const bannerImagePayload: UserUpdateDTO = {
bannerImage: bannerId,
};
await UserService.update({ requestBody: bannerImagePayload })
setupForm()
} catch (error) {
handleUnknownError(error)
console.error(error)
}
}
async function setupForm() {
try {
const response = await UserService.getUser();
......@@ -71,31 +101,34 @@ async function setupForm() {
} else {
iconSrc.value = "../src/assets/userprofile.png";
}
if (response.bannerImage != null) {
selectedBanner.value = response.bannerImage;
}
} catch (err) {
handleUnknownError(err);
console.error(err)
}
}
const handleSubmit = async () => {
console.log('Yoooo')
const updateUserPayload: UserUpdateDTO = {
firstName: firstNameRef.value,
lastName: surnameRef.value,
};
try {
UserService.update({ requestBody: updateUserPayload })
useUserInfoStore().setUserInfo({
firstname: firstNameRef.value,
lastname: surnameRef.value,
})
} catch (err) {
handleUnknownError(err);
console.error(err)
}
}
onMounted(() => {
setupForm()
getInventory()
})
</script>
......@@ -108,7 +141,7 @@ onMounted(() => {
<form @submit.prevent="handleSubmit" novalidate>
<div class="user-avatar">
<input type="file" ref="fileInputRef" @change="handleFileChange" accept=".jpg, .jpeg, .png"
style="display: none;" />
style="display: none" />
<img :src="iconSrc" alt="Brukeravatar" style="width: 200px; height: 200px;">
<div class="mt-2">
<button type="button" class="btn btn-primary classyButton" @click="triggerFileUpload"><img
......@@ -118,18 +151,34 @@ onMounted(() => {
<div class="form-group">
<BaseInput data-cy="first-name" :model-value="firstNameRef" @input-change-event="handleFirstNameInputEvent"
id="firstNameInputChange" input-id="first-name-new" type="text" label="Fornavn"
placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn" />
placeholder="Skriv inn ditt fornavn" invalid-message="Vennligst skriv inn ditt fornavn"
style="max-width: 300px" />
</div>
<br>
<div class="form-group">
<BaseInput data-cy="last-name" :model-value="surnameRef" @input-change-event="handleSurnameInputEvent"
id="surnameInput-change" input-id="surname-new" type="text" label="Etternavn"
placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn" />
placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn"
style="max-width: 300px" />
</div>
<br>
<button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater
profil</button>
<button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater profil</button>
</form>
<hr>
<div>
<h6>Banners</h6>
<div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center" @click="selectItem(banner.id)"
:class="{ 'selected-banner': banner.id === selectedBannerId }" data-bs-toggle="tooltip"
data-bs-placement="top" data-bs-custom-class="custom-tooltip" :data-bs-title="banner.criteria">
<img :src="apiUrl + `/api/images/${banner.imageId}`" class="card-img-top" alt="Banner" style="width: 100px; height: 100px" />
<h5 class="card-title">{{ selectedBanner }}</h5>
</div>
</div>
<div v-else>
Ingen banners
</div>
</div>
</div>
</template>
......@@ -151,17 +200,28 @@ onMounted(() => {
}
.classyButton {
background-color: #003A58;
border: #003A58;
}
background-color: #003A58;
border: #003A58;
}
.classyButton:hover {
background-color: #003b58ec;
border: #003A58;
}
.classyButton:hover {
background-color: #003b58ec;
border: #003A58;
}
.classyButton:active {
background-color: #003b58d6;
border: #003A58;
}
.classyButton:active {
background-color: #003b58d6;
border: #003A58;
}
.selected-banner {
border: 2px solid #1a81b5;
display: flex;
}
.banner {
margin: 10px;
cursor: pointer;
width: 200px;
}
</style>
\ No newline at end of file
src/components/UserProfile/MyProfile.vue
+ 2
− 28
View file @ 136decaf
......@@ -158,12 +158,10 @@ const toUpdateUserSettings = () => {
</div>
<div class="d-flex align-items-end text-white my-3 mx-5">
<div class="d-flex align-items-center flex-column">
<p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 80px; height: 80px"></p>
<p class="small text-white mb-0">Poeng</p>
<p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points"><img src="@/assets/items/pigcoin.png" style="width: 80px; height: 80px" data-toggle="tooltip" title="Points"> {{ points }}</p>
</div>
<div class="d-flex align-items-center flex-column px-3">
<p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 80px; height: 80px"></p>
<p class="small text-white mb-0">Streak</p>
<p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak"><img src="@/assets/icons/fire.png" style="width: 80px; height: 80px" data-toggle="tooltip" title="Points"> {{ streak }}</p>
</div>
</div>
</div>
......@@ -178,35 +176,12 @@ const toUpdateUserSettings = () => {
</div>
</div>
<hr>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
<div class="container-fluid">
<h1 class="mt-1 text-start badges-text">Lageret ditt</h1>
<div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="product in inventory" :key="product.id" class="card text-center"
style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
<img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">{{ product.itemName }}</h5>
</div>
</div>
</div>
<div v-else>Du har ingen ting på lageret ditt, gå til butikken for å kjøpe!</div>
<div v-if="backgroundName" class="text-success">You selected the background: <strong>{{ backgroundName }}!</strong></div>
</div>
</div>
</div>
</div>
<hr>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
<div class="container-fluid">
<h1 class="mt-1 text-start badges-text">Merker</h1>
<div v-if="hasBadges" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="badge in badges" :key="badge.id" class="card text-center"
style="width: 12rem; border: none; cursor: pointer; margin: 1rem;
border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top"
......@@ -217,7 +192,6 @@ const toUpdateUserSettings = () => {
<h5 class="card-title">{{ badge.badgeName }}</h5>
</div>
</div>
</div>
<div v-else>
Ingen merker
......
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