kjøleskapselementer vises

src/components/FridgeItem.vue

 <template>
 <div id ="item">
-    <img src="src/components/icons/logo.png" alt="">
+    <!--<img src="src/components/icons/logo.png" alt="">-->
+    <img :src="getImage" alt="">
     <div id="itemInfo">
-        <p id="fridgeItemName">{{ this.item.itemName }} {{ this.item.quantity }}{{this.item.quantityUnit}}</p>
+        <p id="fridgeItemName">{{this.actualItem.item.name }} {{ this.actualItem.item.amount.quantity }}{{this.actualItem.item.amount.unit}}</p>
         <p :style="{color:expirationTextColor}">{{expirationText}}</p>
     </div>
     <div @click="appleBtnPressed">
@@ -35,6 +36,10 @@ export default {
                 return 'black';
             }
         },
+        getImage(){
+            return this.actualItem.item.image_url;
+
+        },
         expirationText() {
             const expirationDays = this.getDateDifference();
 
@@ -56,7 +61,7 @@ export default {
                 case 3:
                     return "Utgår om tre dager"
                 default:
-                    return "Utgår " + this.item.expiration
+                    return "Utgår " + this.actualItem.exp_date
             }
         }
     },
@@ -65,6 +70,10 @@ export default {
           type:Object,
           required: false,
         },
+        actualItem: {
+            type: Object,
+            required:false,
+        },
         itemName: String,
         expiration: String,
         image: String,
@@ -73,7 +82,7 @@ export default {
     },
     methods: {
         getDateDifference(){ //returns the difference between two dates
-            const date = this.item.expiration.split('.');
+            const date = this.actualItem.exp_date.split('.');//todo
             const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
             const expDate = new Date(dateFormat);
             const today = new Date();

src/components/ItemSearch.vue

@@ -38,16 +38,16 @@ export default {
         addToFridge(){
             const num = this.numOfItemsToAdd;
 
-            const ingred = {
-                item: this.selectedItem.id,
-                amount: this.selectedItem.amount
-            }
+            /*const ingredient = {
+            {itemId: 123,
+                amount: this.selectedItem.amount}
+            }*/
 
-            const request = [{itemId: this.selectedItem.id, amount: this.selectedItem.amount}]
+            //const request = [{ingredient}]
             //const request = [{ingredient_id: ingred},{ingredient: ingred}]
             //const request = [{ingredient: JSON.stringify(ingred)}]
-            console.log(request)
-            API.addToFridge(JSON.stringify(request))
+            //console.log(request)
+            API.addToFridge({"itemId": 1, "amount": {"quantity": this.selectedItem.amount.quantity,"unit": this.selectedItem.amount.unit}})
         }
     }
 }

src/util/API.js

@@ -161,7 +161,7 @@ export const API = {
         axios.post(`${import.meta.env.VITE_BACKEND_URL}/fridge/items`, request,{
             headers: { Authorization: `Bearer ${authStore.token}` },
         }).then((response) => {
-            return response.data.value.content;
+            return response.data;
         }).catch(()=> {
             throw new Error("Could not add item to fridge: ");
         })

src/views/FridgeView.vue

@@ -3,13 +3,14 @@
         <h1>Kjøleskap</h1><br><br>
         <ItemSearch></ItemSearch>
         <eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
+
         <div id = "itemContainer">
           <!--<FridgeItem v-for="item in fridgeStore.items"></FridgeItem>-->
-            <FridgeItem v-for="item in fridgeItems" :item="item"></FridgeItem>
-            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
-            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+            <FridgeItem v-for="item in fridgeItems" :actualItem = "item" :item="testItem"></FridgeItem>
+            <!---<FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>
+            <FridgeItem @appleBtnPressed="showModal" :item=testItem ></FridgeItem>-->
 
             <!--<FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
             <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="30.02.23"></FridgeItem>
@@ -41,6 +42,7 @@ import {mapState, mapStores} from "pinia";
 import {useAuthStore} from "@/stores/authStore";
 import {useFridgeStore} from "@/stores/fridgeStore";
 import ItemSearch from "@/components/ItemSearch.vue";
+import fridgeItem from "@/components/FridgeItem.vue";
 
 export default {
     name: "FridgeView",
@@ -75,8 +77,9 @@ export default {
         alert("Denne knappen legger en ny vare i kjøleskapet")
     }
   },
-  mounted(){
-      this.fridgeItems = API.getFridgeItems();
+  async mounted() {
+      this.fridgeItems = await API.getFridgeItems();
+      console.log(this.fridgeItems.length)
   }
 }
 </script>

src/views/SelectProfileView.vue

@@ -45,11 +45,11 @@
         <h1>Hvem bruker appen?</h1>
 
         <div class="icons">
-            <div v-for="profile in this.profiles" tabindex="0" @click=selectProfile(profile.id) class="icon" role="button" :aria-label="profile.name">
+            <div v-for="profile in this.profiles"  @click=selectProfile(profile.id) class="icon" >
 
                 <img v-if="profile.profileImageUrl == ''" src="https://t4.ftcdn.net/jpg/02/15/84/43/360_F_215844325_ttX9YiIIyeaR7Ne6EaLLjMAmy4GvPC69.jpg" alt="profile image">
                 <img v-else :src=profile.profileImageUrl alt="profile image">
-                <p>{{profile.name}}</p>
+                <button id="selectProfileBtn" @click=selectProfile(profile.id)><p>{{profile.name}}</p></button>
             </div>
             
         </div>
@@ -117,4 +117,12 @@
         padding-bottom: 10px;
     }
 
+    #selectProfileBtn {
+        background-color: transparent;
+        border:none;
+        font-size: 1em;
+        border-radius: 0;
+
+    }
+
 </style>
\ No newline at end of file