Skip to content
Snippets Groups Projects
Commit 1fdd0146 authored by Ingrid Martinsheimen Egge's avatar Ingrid Martinsheimen Egge :cow2:
Browse files

styling på søk. popup reagerer igjen

parent 31c8056f
No related branches found
No related tags found
1 merge request!13Fridge view
Hide whitespace changes
Inline Side-by-side
src/components/EatFridgeItemModal.vue
+ 4
− 3
View file @ 1fdd0146
<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;
}
}
}
......
src/components/FridgeItem.vue
+ 22
− 15
View file @ 1fdd0146
<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;
}
}
}
......
src/components/ItemSearch.vue
+ 59
− 27
View file @ 1fdd0146
<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>
src/views/FridgeView.vue
+ 8
− 29
View file @ 1fdd0146
<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();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment