From 6a01c195e884051b21dc1078bf0a5714f7873d22 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Thu, 27 Apr 2023 14:48:04 +0200
Subject: [PATCH] =?UTF-8?q?la=20inn=20s=C3=B8keboks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/EatFridgeItemModal.vue | 14 +++++---
src/components/FridgeItem.vue | 16 ++++-----
src/components/ItemSearch.vue | 50 +++++++++++++++++++++++++++
src/util/API.js | 13 ++++---
src/views/FridgeView.vue | 30 +++++++++++-----
5 files changed, 96 insertions(+), 27 deletions(-)
create mode 100644 src/components/ItemSearch.vue
diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 3859ed5..264a762 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -1,11 +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>{{ fridgeItem }}</h2>
- <p>{{sliderValue}} %</p>
+ <h2>{{ this.fridgeItem.itemName }}</h2>
+ <p>{{sliderValue}} {{this.fridgeItem.quantityUnit}}</p>
<label for="slider">Mengde tatt av varen:</label>
- <input type = "range" id = "slider" name = "slider" min="0" max="70" v-model="sliderValue">
+ <input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
<div id="buttons">
<button @click="close">Ble kastet ðŸ—‘ï¸ </button>
@@ -16,20 +16,21 @@
<script>
import {Icon} from "@iconify/vue";
+import fridgeItem from "@/components/FridgeItem.vue";
export default {
name: "EatFridgeItemModal",
components: {Icon},
props: {
fridgeItem: {
- type: String,
+ type: Object,
required: false
},
},
data() {
return {
visible:true,
- sliderValue: 0
+ sliderValue: 0,
}
},
methods:{
@@ -45,6 +46,9 @@ export default {
redIconSize() {
return '40px';
},
+ maxValue(){
+ return this.fridgeItem.quantity*10;
+ }
}
}
</script>
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index b181164..cd0bff2 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -2,7 +2,7 @@
<div id ="item">
<img src="src/components/icons/logo.png" alt="">
<div id="itemInfo">
- <p id="fridgeItemName">{{ itemName }} {{ quantity }}{{quantityUnit}}</p>
+ <p id="fridgeItemName">{{ this.item.itemName }} {{ this.item.quantity }}{{this.item.quantityUnit}}</p>
<p :style="{color:expirationTextColor}">{{expirationText}}</p>
</div>
<div @click="appleBtnPressed">
@@ -39,12 +39,12 @@ export default {
const expirationDays = this.getDateDifference();
if(expirationDays<0) {
- return "Utgikk " + this.expiration
+ return "Utgikk " + this.item.expiration
}
switch (expirationDays){
case expirationDays < -1:
- return "Utgikk " + this.expiration
+ return "Utgikk " + this.item.expiration
case 0:
return "Utgår i dag"
case -0:
@@ -56,12 +56,12 @@ export default {
case 3:
return "Utgår om tre dager"
default:
- return "Utgår " + this.expiration
+ return "Utgår " + this.item.expiration
}
}
},
props: {
- fridgeItem: {
+ item: {
type:Object,
required: false,
},
@@ -73,7 +73,7 @@ export default {
},
methods: {
getDateDifference(){ //returns the difference between two dates
- const date = this.expiration.split('.');
+ const date = this.item.expiration.split('.');
const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
const expDate = new Date(dateFormat);
const today = new Date();
@@ -83,7 +83,7 @@ export default {
return numOfDays;
},
appleBtnPressed(){
- this.$emit('appleBtnPressed', this.itemName); /*TODO: change to item Object*/
+ this.$emit('appleBtnPressed', this.item); /*TODO: change to item Object*/
//console.log("hai " + this.itemName)
}
@@ -95,7 +95,7 @@ export default {
#item {
background-color: base.$white;
color: black;
- border-radius: 10px;
+ qborder-radius: 10px;
padding: 1em;
padding-left: 2em;
padding-right:2em;
diff --git a/src/components/ItemSearch.vue b/src/components/ItemSearch.vue
new file mode 100644
index 0000000..bb94ea5
--- /dev/null
+++ b/src/components/ItemSearch.vue
@@ -0,0 +1,50 @@
+<template>
+ <div id="wrapper">
+ <h1>SØK ETTER VARE</h1>
+ <input type="text" id="searchBox" v-model="itemSearch">
+ <button @click="search">Søk</button>
+ <p>Resultater:</p>
+ <select name="searchResult" id="searchResult">
+ <option value="volvo">Volvo</option>
+ <option value="saab">Saab</option>
+ <option value="mercedes">Mercedes</option>
+ <option value="audi">Audi</option>
+ </select>
+ <p>Antall:</p>
+ <input type="number">
+
+ <button>Legg i kjøleskap</button>
+
+ </div>
+</template>
+
+<script>
+import {API} from "@/util/API";
+
+export default {
+ name: "itemSearch",
+ data(){
+ return{
+ itemSearch:'',
+ }
+
+ },
+ methods: {
+ search() {
+ const results = API.searchItems(this.itemSearch);
+ console.log(results)
+
+ }
+ }
+}
+</script>
+
+<style scoped>
+select {
+ width:100%;
+}
+
+#wrapper{
+ background-color: #04be80;
+}
+</style>
\ No newline at end of file
diff --git a/src/util/API.js b/src/util/API.js
index fff00f3..8f75d1c 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -169,12 +169,15 @@ export const API = {
/**
* Removes x amount of item from fridge
- * @param id id of fridgeItem
- * @param request ... amount
+ * @param searchPhrase
*/
- removeFromFridge(id, request){
- //TODO
+ searchItems: async(searchPhrase)=> {
+ return axios.get(`${import.meta.env.VITE_BACKEND_URL}/item/search?name=${searchPhrase}`, {
+ }).then((response) => {
+ return response.data;
+ }).catch(()=> {
+ throw new Error("Error when searching for item ");
+ })
}
-
}
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index d92ef91..e50b332 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -1,19 +1,24 @@
<template>
<main>
<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 fridgeStore.items"></FridgeItem>-->
<!--<FridgeItem v-for="item in fridgeItems" :key="item.id" fridgeItem="item"></FridgeItem>-->
- <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
- <FridgeItem @appleBtnPressed="showModal" item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></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>
+ <FridgeItem @appleBtnPressed="showModal" item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="30.04.26"></FridgeItem>-->
</div>
<div id="addItemBtn-container">
@@ -35,25 +40,32 @@ import {API} from "@/util/API";
import {mapState, mapStores} from "pinia";
import {useAuthStore} from "@/stores/authStore";
import {useFridgeStore} from "@/stores/fridgeStore";
+import ItemSearch from "@/components/ItemSearch.vue";
export default {
name: "FridgeView",
- components: {EatFridgeItemModal, FridgeItem},
+ components: {ItemSearch, EatFridgeItemModal, FridgeItem},
computed:{
...mapState(useAuthStore, ['account']),
...mapStores(useFridgeStore),
},
data() {
return {
- visible: false,
+ visible: false, //is the useitemModal visible
selectedItem: null,
fridgeItems: [],
+ testItem: {
+ itemName:'Rar saus',
+ quantity:'0.5',
+ quantityUnit:' stk',
+ expiration:'20.03.23'
+ }
}
},
methods: {
- showModal(itemName){
- this.visible =true;
- this.selectedItem=itemName;
+ showModal(item){
+ this.visible = true;
+ this.selectedItem = item;
//alert(itemName)
},
hideModal(){
--
GitLab