Skip to content
Snippets Groups Projects
Commit 199de2e6 authored by VIktorGrev's avatar VIktorGrev
Browse files

feat: Adding items in store and inventar

parent d704bcb4
Branches Itemshop
No related tags found
1 merge request!67Itemshop
Pipeline #282244 passed with warnings
Stage: install
Stage: build
Stage: test
Stage: lint
Hide whitespace changes
Inline Side-by-side
src/components/UserProfile/UserProfileLayout.vue
+ 44
− 5
View file @ 199de2e6
......@@ -3,16 +3,17 @@ import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useUserInfoStore } from "../../stores/UserStore";
import { UserService } from "@/api";
import { ItemService } from "@/api";
let numberOfHistory = 6;
let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
let firstname = ref();
let lastname = ref();
const imageUrl = ref(`../src/assets/userprofile.png`);
const router = useRouter();
const inventory = ref([] as any);
const backgroundName = ref("");
async function setupForm() {
try {
......@@ -22,11 +23,28 @@ async function setupForm() {
firstname.value = response.firstName;
lastname.value = response.lastName;
imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
getInventory();
} catch (err) {
console.error(err)
}
}
const getInventory = async () => {
try {
const response = await ItemService.getInventory();
inventory.value = response;
} catch (error) {
console.log(error);
}
}
const selectItem = (item: any) => {
backgroundName.value = item.itemName;
useUserInfoStore().setUserInfo({
roadBackground: item.imageId,
})
}
onMounted(() => {
setupForm()
})
......@@ -48,8 +66,8 @@ const toUpdateUserSettings = () => {
<div class="card">
<div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
<div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
<img :src="imageUrl" alt="Generisk plassholderbilde"
class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
<img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail mt-4 mb-2"
style="width: 150px; z-index: 1">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
data-mdb-ripple-color="dark" style="z-index: 1;" id="toUpdate" @click="toUpdateUserSettings">
Rediger profil
......@@ -71,6 +89,26 @@ const toUpdateUserSettings = () => {
</div>
</div>
</div>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
<div class="container-fluid">
<h1 class="mt-5 text-start badges-text">Lageret ditt</h1>
<div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 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="`http://localhost:8080/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-if="backgroundName" class="text-success">You selected the background: <strong>{{ backgroundName }}!</strong></div>
</div>
</div>
</div>
</div>
<div class="card-body p-1 text-black">
<div class="row">
<div class="col">
......@@ -131,7 +169,8 @@ const toUpdateUserSettings = () => {
<div class="card-body">
<h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
<p class="card-text">Penger spart: 200 <br />Du har fullført en utfordring: 21</p>
<p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter siden</small></p>
<p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter
siden</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
......
src/stores/UserStore.ts
+ 4
− 0
View file @ 199de2e6
......@@ -37,6 +37,7 @@ export type UserStoreInfo = {
accessToken?: string;
role?: string;
subscriptionLevel?: string;
roadBackground?: number;
profileImage?: number;
};
......@@ -50,6 +51,7 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
accessToken: '',
role: '',
subscriptionLevel: '',
roadBackground: 0,
profileImage: 0,
}),
persist: {
......@@ -71,6 +73,7 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
userinfo.accessToken && (OpenAPI.TOKEN = this.$state.accessToken);
userinfo.role && (this.$state.role = userinfo.role);
userinfo.subscriptionLevel && (this.$state.subscriptionLevel = userinfo.subscriptionLevel);
userinfo.roadBackground && (this.$state.roadBackground = userinfo.roadBackground);
userinfo.profileImage && (this.$state.profileImage = userinfo.profileImage);
},
clearUserInfo() {
......@@ -81,6 +84,7 @@ export const useUserInfoStore = defineStore('UserInfoStore', {
this.$state.accessToken = '';
this.$state.role = '';
this.$state.subscriptionLevel = '';
this.$state.roadBackground = 0;
this.$state.profileImage = 0;
OpenAPI.TOKEN = undefined;
},
......
src/views/ShopView.vue
+ 17
− 34
View file @ 199de2e6
......@@ -12,7 +12,8 @@
<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>
<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">
......@@ -26,38 +27,19 @@
</div>
</div>
<div class="col-md-12">
<h1>Fantacy</h1>
<h1>Items</h1>
<div class="category row justify-content-between mb-5 m-2">
<!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
</div>
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
</div>
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
</div>
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<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">The panda</h5>
<ShopButton button-text="100"></ShopButton>
<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>
</div>
<div class="col-md-12">
......@@ -100,17 +82,18 @@ import { ItemService } from '@/api';
const products = ref([] as any);
const getStore = () => {
const response = ItemService.getStore();
const response1 = ItemService.getInventory();
const getStore = async () => {
const response = await ItemService.getStore();
products.value = response;
console.log(response);
console.log(response1);
}
const buyItem = async (itemId: number) => {
try {
const response = await ItemService.buyItem({ itemId: itemId});
const response = await ItemService.buyItem({ itemId: itemId });
console.log(response);
const responseStore = await ItemService.getStore();
products.value = responseStore;
} catch (error) {
console.log(error);
}
......
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