From 7b5fbe1307f6168cf0d4519b216aebea47812bf0 Mon Sep 17 00:00:00 2001
From: ingrid <ingrimeg@stud.ntnu.no>
Date: Fri, 21 Apr 2023 14:47:00 +0200
Subject: [PATCH] =?UTF-8?q?la=20inn=20kj=C3=B8leskapsside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/FridgeItem.vue | 108 ++++++++++++++++++++++++++++++++++
src/components/Navbar.vue | 2 +-
src/router/index.js | 6 ++
src/views/FridgeView.vue | 37 ++++++++++++
4 files changed, 152 insertions(+), 1 deletion(-)
create mode 100644 src/components/FridgeItem.vue
create mode 100644 src/views/FridgeView.vue
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
new file mode 100644
index 0000000..0643db0
--- /dev/null
+++ b/src/components/FridgeItem.vue
@@ -0,0 +1,108 @@
+<template>
+<div id ="item">
+ <img src="src/components/icons/logo.png" alt="">
+ <div id="itemInfo">
+ <h1>{{ itemName }} {{ quantity }}{{quantityUnit}}</h1>
+ <h2>{{expirationText}}</h2>
+ </div>
+ <Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
+</div>
+ <hr>
+</template>
+
+<script>
+import {Icon} from "@iconify/vue";
+
+export default {
+ name: "FridgeItem",
+ components: {Icon},
+ computed: {
+ iconColor(){
+ return 'black';
+ },
+ iconSize() {
+ return '4rem'
+ },
+ expirationText() {
+ const expirationDays = this.getDateDifference();
+
+ if(expirationDays<0) {
+ return "Utgikk " + this.expiration
+ }
+
+ switch (expirationDays){
+ case expirationDays < -1:
+ return "Utgikk " + this.expiration
+ case 0:
+ return "Utgår i dag"
+ case -0:
+ return "Utgår i dag"
+ case 1:
+ return "Utgår i morgen"
+ case 2:
+ return "Utgår om to dager"
+ case 3:
+ return "Utgår om tre dager"
+ default:
+ return "Utgår " + this.expiration
+ }
+
+
+ return "i morgen"
+ }
+ },
+ props: {
+ itemName: String,
+ expiration: String,
+ image: String,
+ quantity: String,
+ quantityUnit: String,
+ },
+ methods: {
+ 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;
+ },
+
+ }
+}
+</script>
+
+<style scoped lang="scss">
+#item {
+ background-color: base.$white;
+ color: black;
+ border-radius: 10px;
+ padding: 1em;
+ padding-left: 2em;
+ padding-right:2em;
+ display:flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+
+img {
+ width: 4rem;
+ margin-right:.6em;
+
+}
+
+#itemInfo{
+ width: 100%;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index c452876..ecca59a 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -8,7 +8,7 @@
</RouterLink>
</li>
<li>
- <RouterLink :to="'/'" :aria-label="'link to fridge page'">
+ <RouterLink :to="'/myFridge'" :aria-label="'link to fridge page'">
<Icon icon="mingcute:fridge-line" :color="iconColor" :style="{ fontSize: iconSize }"/>
</RouterLink>
</li>
diff --git a/src/router/index.js b/src/router/index.js
index 15a23ad..fd734d8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from "@/views/HomeView.vue";
+import FridgeView from "@/views/FridgeView.vue";
const router = createRouter({
@@ -10,6 +11,11 @@ const router = createRouter({
name: 'home',
component: HomeView
},
+ {
+ path: '/myFridge',
+ name: 'myFridge',
+ component: FridgeView
+ },
]
})
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
new file mode 100644
index 0000000..7d2ec17
--- /dev/null
+++ b/src/views/FridgeView.vue
@@ -0,0 +1,37 @@
+<template>
+ <main>
+ <h1>Kjøleskap</h1><br><br>
+ <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>
+ </div>
+
+ </main>
+
+</template>
+
+<script>
+import FridgeItem from "@/components/FridgeItem.vue";
+
+export default {
+ name: "FridgeView",
+ components: {FridgeItem}
+}
+</script>
+
+<style scoped lang="scss">
+main {
+ padding-top: 4em;
+ color:black;
+ background-color: base.$white;
+}
+
+#itemCOntainer {
+ background-color: base.$grey;
+}
+</style>
\ No newline at end of file
--
GitLab