From de2904f4e61d7c40e3ffc7c77cc247ef32613804 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Fri, 28 Apr 2023 11:26:30 +0200
Subject: [PATCH] =?UTF-8?q?kj=C3=B8leskapselementer=20vises?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/FridgeItem.vue | 17 +++++++++++++----
src/components/ItemSearch.vue | 14 +++++++-------
src/util/API.js | 2 +-
src/views/FridgeView.vue | 13 ++++++++-----
src/views/SelectProfileView.vue | 12 ++++++++++--
5 files changed, 39 insertions(+), 19 deletions(-)
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index cd0bff2..d7cb9d6 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -1,8 +1,9 @@
<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();
diff --git a/src/components/ItemSearch.vue b/src/components/ItemSearch.vue
index 0a4668d..8083ed8 100644
--- a/src/components/ItemSearch.vue
+++ b/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}})
}
}
}
diff --git a/src/util/API.js b/src/util/API.js
index 565c55a..a5c477e 100644
--- a/src/util/API.js
+++ b/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: ");
})
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index a900355..84e2564 100644
--- a/src/views/FridgeView.vue
+++ b/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>
diff --git a/src/views/SelectProfileView.vue b/src/views/SelectProfileView.vue
index 13f0eba..8b7130a 100644
--- a/src/views/SelectProfileView.vue
+++ b/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
--
GitLab