diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 264a76241f54345410e1d62cd352cd04ac29c7c7..734d48286e4c2419e3cf65758ada6b3668a491fa 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -1,10 +1,11 @@
<template>
<div v-if="visible" id="popup">
<div id="exitBtn" @click="close"><Icon icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
- <h2>{{ this.fridgeItem.itemName }}</h2>
- <p>{{sliderValue}} {{this.fridgeItem.quantityUnit}}</p>
+ <h2>{{ this.fridgeItem.item.name }}</h2>
+ <p>{{sliderValue}} {{this.fridgeItem.amount.unit}}</p>
<label for="slider">Mengde tatt av varen:</label>
+
<input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
<div id="buttons">
@@ -47,7 +48,7 @@ export default {
return '40px';
},
maxValue(){
- return this.fridgeItem.quantity*10;
+ return this.fridgeItem.amount.quantity;
}
}
}
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index 590cbd870819924d82ce9d5a25cdcf4c01222870..824d58d8b6ff5caff20df5d1c9904bf4cf4c71f9 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -1,9 +1,8 @@
<template>
<div id ="item">
- <!--<img src="src/components/icons/logo.png" alt="">-->
<img :src="getImage" alt="">
<div id="itemInfo">
- <p id="fridgeItemName">{{this.actualItem.item.name }} {{ this.actualItem.item.amount.quantity }}{{this.actualItem.item.amount.unit}}</p>
+ <p id="fridgeItemName">{{this.actualItem.item.name }} {{ this.actualItem.amount.quantity }}{{this.actualItem.item.amount.unit}}</p>
<p :style="{color:expirationTextColor}">{{expirationText}}</p>
</div>
<div @click="appleBtnPressed">
@@ -30,10 +29,10 @@ export default {
},
expirationTextColor(){
if(this.expirationText.split("Utgikk").length===2){
- return '#EE6D6D';
+ return '#EE6D6D'; //rød
}
else{
- return '#737573';
+ return '#737573'; //grå
}
},
getImage(){
@@ -42,6 +41,7 @@ export default {
},
expirationText() {
const expirationDays = this.getDateDifference();
+ const dateString = this.formatDate();
if(expirationDays<0) {
return "Utgikk " + this.item.expiration
@@ -49,7 +49,7 @@ export default {
switch (expirationDays){
case expirationDays < -1:
- return "Utgikk " + this.item.expiration
+ return "Utgikk " + dateString
case 0:
return "Utgår i dag"
case -0:
@@ -61,7 +61,7 @@ export default {
case 3:
return "Utgår om tre dager"
default:
- return "Utgår " + this.actualItem.exp_date.split('T')[0]
+ return "Utgår " + dateString
}
}
},
@@ -81,21 +81,28 @@ export default {
quantityUnit: String,
},
methods: {
- getDateDifference(){ //returns the difference between two dates
- let date = this.actualItem.exp_date.split('T')[0];
-
+ getDateDifference(){ //returns the difference in days between the expiration date and today
+ let date = this.actualItem.exp_date;
const epDate = new Date(date);
- const expDate= Date.parse(epDate)
+
+ const parsedDate = Date.parse(epDate)
const today = new Date();
- const ms = expDate-today;
+
+ const ms = parsedDate-today;
const numOfDays = Math.ceil(ms/(86400000))
- console.log(numOfDays)
+
return numOfDays;
},
appleBtnPressed(){
- this.$emit('appleBtnPressed', this.item); /*TODO: change to item Object*/
- //console.log("hai " + this.itemName)
- }
+ this.$emit('appleBtnPressed', this.actualItem);
+ },
+ formatDate(){ //formats expiration date as dd.mm.yyyy
+ let fullExpirationDate = new Date(this.actualItem.exp_date);
+ let day = fullExpirationDate.getDate();
+ let month= (fullExpirationDate.getMonth()+1).toString();
+ let year= fullExpirationDate.getFullYear().toString();
+ return day + "." + month + "." + year;
+ }
}
}
diff --git a/src/components/ItemSearch.vue b/src/components/ItemSearch.vue
index f643d34cab4b69dcd864677ce125cf31ff9a2b07..e1c06900723d2d34b5adffadf2edca0e29003289 100644
--- a/src/components/ItemSearch.vue
+++ b/src/components/ItemSearch.vue
@@ -1,24 +1,28 @@
<template>
<div v-if="showSearch" id="wrapper">
- <h1>SØK ETTER VARE</h1>
- <input type="text" id="searchBox" v-model="itemSearch">
- <button @click="search">Søk</button>
+ <h3>SØK ETTER VARE</h3>
+ <div id="searchBoxDiv">
+ <input type="text" id="searchBox" v-model="itemSearch">
+ <button @click="search">Søk</button>
+ </div>
+
<p>Resultater: ({{searchResult.length}})</p>
<select v-model="selectedItem" name="searchR" id="searchR">
<option v-for ="item in searchResult" :value="item" :key="item.ean">{{item.name}} ({{item.amount.quantity}}{{item.amount.unit}})</option>
</select>
- <p>Antall:</p>
- <input type="number" v-model="numOfItemsToAdd">
+ <p>Antall varer: <span v-if="numOfItemsToAdd>1 && selectedItem!=null">(totalt: {{this.totalNumOfItems}} {{selectedItem.amount.unit}})</span></p>
+ <input type="number" min='1' v-model="numOfItemsToAdd"><br>
+
+ <button id = "addToFridgeBtn" @click="addToFridge">Legg i kjøleskap</button>
- <button @click="addToFridge">Legg i kjøleskap</button>
</div>
</template>
<script>
import {API} from "@/util/API";
-import router from "@/router";
+
export default {
name: "itemSearch",
@@ -31,6 +35,11 @@ export default {
numOfItemsToAdd:1,
}
},
+ computed:{
+ totalNumOfItems(){
+ return this.selectedItem.amount.quantity*this.numOfItemsToAdd
+ }
+ },
methods: {
async search() {
this.searchResult = await API.searchItems(this.itemSearch);
@@ -45,37 +54,60 @@ export default {
"amount":
{
"quantity": this.selectedItem.amount.quantity*num,
- "unit": this.selectedItem.amount.unit}}).then(()=> router.push('/myFridge'))
-
+ "unit": this.selectedItem.amount.unit}}
+ ).then(() => this.$emit('itemsAdded',this)).catch((_)=> console.log("No items were added to the fridge"))
}
}
}
</script>
-<style scoped>
+<style scoped lang = "scss">
select {
width:100%;
}
#wrapper{
- background-color: #04be80;
+ background-color: base.$grey;
+ padding: 2em;
+ border-radius: 9%;
+
+}
+
+#searchBoxDiv {
+ display:flex;
+ width:100%;
+}
+
+input[type="text"],
+input[type="select"],
+input[type="number"],
+select{
+ padding: .4em;
+ margin: .1em;
}
-/*let thisItem = {
- allergens : item.allergens,
- ean : item.ean,
- shelfLife : item.shelfLife,
- image_url : item.image_url,
- name : item.name,
- nutrition : item.nutrition,
- amount : item.amount,
- }*/
-/*
-//const sAmount = {quantity:item.amount.quantity,unit:item.amount.unit}
-//const ingredient = {Item:thisItem, SerializedAmount:sAmount}
-
-//console.log("ITEM::::" + thisItem.name)
-//API.addToFridge({ingredient,num})
-//const request = [{item: this.selectedItem, amount : this.selectedItem.amount}]*/
+button {
+ padding: .5em;
+ background-color: base.$light-green;
+ border-radius: 5%;
+
+ border: 1px solid base.$green;
+
+}
+
+button:hover {
+ border: 1px solid base.$grey;
+ background-color: base.$green;
+
+
+}
+
+addToFridgeBtn {
+ width: 100%;
+}
+
+span {
+ qfont-size: 1.3em;
+}
</style>
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index 84e256486312d5932c24b40e51b95a908aa14b6c..99b34bf692ecc6e0183a6552cf9fb6af88447c7e 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -1,25 +1,11 @@
<template>
<main>
<h1>Kjøleskap</h1><br><br>
- <ItemSearch></ItemSearch>
+ <ItemSearch @itemsAdded="updateFridge"></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" :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>
- <FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="28.04.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="29.04.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="30.04.26"></FridgeItem>-->
+ <div id = "itemContainer" >
+ <FridgeItem v-for="item in fridgeItems" :actualItem = "item" :item="testItem" @appleBtnPressed="showModal"></FridgeItem>
</div>
<div id="addItemBtn-container">
@@ -27,11 +13,7 @@
<span class="plus">+</span>
</button>
</div>
-
-
-
</main>
-
</template>
<script>
@@ -50,32 +32,29 @@ export default {
computed:{
...mapState(useAuthStore, ['account']),
...mapStores(useFridgeStore),
+
},
data() {
return {
visible: false, //is the useitemModal visible
selectedItem: null,
fridgeItems: [],
- testItem: {
- itemName:'Rar saus',
- quantity:'0.5',
- quantityUnit:' stk',
- expiration:'20.03.23'
- }
}
},
methods: {
showModal(item){
this.visible = true;
this.selectedItem = item;
- //alert(itemName)
},
hideModal(){
this.visible=false;
},
addItemToFridge() {
alert("Denne knappen legger en ny vare i kjøleskapet")
- }
+ },
+ async updateFridge() {
+ this.fridgeItems = await API.getFridgeItems();
+ }
},
async mounted() {
this.fridgeItems = await API.getFridgeItems();