Skip to content
Snippets Groups Projects
Commit fa5a2119 authored by Ingrid's avatar Ingrid
Browse files

vinduet åpner og lukker seg

parent b22ebc4b
No related branches found
No related tags found
1 merge request!13Fridge view
<template>
<div id="popup">
<p>Hvor mye har du spist?</p>
<div v-if="visible" id="popup">
<p>Hvor mye har du tatt av varen?</p>
<br>
<br>
<h2>{{ fridgeItem }}</h2>
<p>50%</p>
<p>|----------o-----------|</p>
<p>.</p>
<div id="buttons">
<button>ALT</button>
<button @click="close">ALT</button>
<button>Ingen ting</button>
</div>
</div>
......@@ -16,6 +17,22 @@
<script>
export default {
name: "EatFridgeItemModal",
props: {
fridgeItem: {
type: String,
required: false
},
},
data() {
return {
visible:true
}
},
methods:{
close(){
this.$emit('closeModal',this);
}
}
}
</script>
......@@ -28,6 +45,13 @@ export default {
flex-direction: column;
align-items: center;
}
@media (min-width: 800px){
#popup {
width: 300px;
}
}
#buttons {
......
......@@ -5,7 +5,10 @@
<h1>{{ itemName }} {{ quantity }}{{quantityUnit}}</h1>
<h2>{{expirationText}}</h2>
</div>
<Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
<div @click="appleBtnPressed">
<Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
</div>
</div>
<hr>
</template>
......@@ -16,6 +19,7 @@ import {Icon} from "@iconify/vue";
export default {
name: "FridgeItem",
components: {Icon},
emits: ['appleBtnPressed'],
computed: {
iconColor(){
return 'black';
......@@ -62,20 +66,17 @@ export default {
getDateDifference(){ //returns the difference between two dates
const date = this.expiration.split('.');
const dateFormat = date[1] + "/" + date [0]+ "/"+date[2];
const expDate = new Date(dateFormat);
const today = new Date();
console.log(expDate)
console.log(today)
console.log(expDate-today);
const ms = expDate-today;
const numOfDays = Math.ceil(ms/(86400000))
console.log(numOfDays)
return numOfDays;
},
appleBtnPressed(){
this.$emit('appleBtnPressed', this.itemName); /*TODO: change to item Object*/
//console.log("hai " + this.itemName)
}
}
}
......
<template>
<main>
<h1>Kjøleskap</h1><br><br>
<eat-fridge-item-modal @closeModal="hideModal" v-if="visible" :fridge-item="selectedItem"></eat-fridge-item-modal>
<div id = "itemCOntainer">
<FridgeItem item-name="Melk" quantity="5" quantity-unit="dl" expiration="21.04.23"></FridgeItem>
<FridgeItem item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
<FridgeItem item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
<FridgeItem item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="14.02.23"></FridgeItem>
<FridgeItem item-name="Rar saus" quantity="0.5" quantity-unit=" stk" expiration="03.04.06"></FridgeItem>
<FridgeItem item-name="Eple" quantity="3" quantity-unit="stk" expiration="14.02.23"></FridgeItem>
<FridgeItem item-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="21.04.23"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Melk" quantity="5" quantity-unit="dl" expiration="22.04.23"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Fløte" quantity="1" quantity-unit="dl" expiration="21.04.22"></FridgeItem>
<FridgeItem @appleBtnPressed="showModal" item-name="Sommerkål" quantity="0.5" quantity-unit=" stk" expiration="14.02.23"></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-name="Smør" quantity="350" quantity-unit="g" expiration="25.06.23"></FridgeItem>
</div>
</main>
......@@ -17,10 +18,27 @@
<script>
import FridgeItem from "@/components/FridgeItem.vue";
import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
export default {
name: "FridgeView",
components: {FridgeItem}
components: {EatFridgeItemModal, FridgeItem},
data() {
return {
visible: false,
selectedItem: null
}
},
methods: {
showModal(itemName){
this.visible =true;
this.selectedItem=itemName;
//alert(itemName)
},
hideModal(){
this.visible=false;
}
}
}
</script>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment