From fa5a21192333a80ab86dd423ee4b8ba5484d8759 Mon Sep 17 00:00:00 2001
From: Ingrid <ingridmegge@gmail.com>
Date: Fri, 21 Apr 2023 19:02:26 +0200
Subject: [PATCH] =?UTF-8?q?vinduet=20=C3=A5pner=20og=20lukker=20seg?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/EatFridgeItemModal.vue | 30 ++++++++++++++++++++---
src/components/FridgeItem.vue | 17 +++++++-------
src/views/FridgeView.vue | 34 ++++++++++++++++++++-------
3 files changed, 62 insertions(+), 19 deletions(-)
diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index 57cd31e..ccf9e84 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -1,13 +1,14 @@
<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 {
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index 0643db0..b7f9650 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -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)
+ }
}
}
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index 7d2ec17..e9ca115 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -1,14 +1,15 @@
<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>
--
GitLab