feat: Adding items in store and inventar

src/components/UserProfile/UserProfileLayout.vue

@@ -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

@@ -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

@@ -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);
     }