Merge branch 'ukemeny' into 'main'

ukemeny

See merge request !22

package.json

@@ -7,6 +7,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "test:unit": "vitest --environment jsdom --root src/",
+    "test:unit-coverage": "vitest --environment jsdom --root src/ --coverage",
     "test:e2e": "start-server-and-test preview :4173 'cypress run --e2e'",
     "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress run --e2e'"
   },
@@ -22,6 +23,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
+    "@vitest/coverage-c8": "^0.30.1",
     "@vue/test-utils": "^2.2.6",
     "cypress": "^12.0.2",
     "jsdom": "^20.0.3",
@@ -29,6 +31,6 @@
     "sass-loader": "^13.2.2",
     "start-server-and-test": "^1.15.2",
     "vite": "^4.0.0",
-    "vitest": "^0.25.6"
+    "vitest": "^0.30.1"
   }
 }

src/components/Navbar.vue

@@ -13,7 +13,7 @@
                     </RouterLink>
                  </li>
                 <li>
-                    <RouterLink :to="'/'" :aria-label="'link to week menu'">
+                    <RouterLink to="/planner" aria-label="link to week menu">
                         <Icon icon="ic:baseline-calendar-month" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                 </li>
@@ -73,7 +73,7 @@ nav {
     width: 100%;
     background-color: base.$green;
     margin:0;
-    qpadding:5px;
+    padding:5px;
     align-items: center;
 
 }

src/components/RecipeCard.vue

+<script>
+import { Icon } from '@iconify/vue';
+
+export default {
+    props: ['recipe'],
+    components: {
+        Icon
+    }
+}
+</script>
+
+<template>
+    <div class="recipe_card">
+        <img class="recipe_img" src="/dish-placeholder.png" :alt="`Bilde av {recipe.title}`">
+        <div class="recipe_details">
+            <div class="title">
+                <h2>{{ recipe.title }}</h2>
+                <p>{{ recipe.description }}</p>
+            </div>
+            <div class="time">
+                <Icon icon="mdi:timer" :style="{ fontSize: '2rem' }" />
+                {{ recipe.time }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+@import "../style.scss";
+
+.recipe_card {
+    display: flex;
+    flex-direction: column;
+    align-content: center;
+
+    height: 15rem;
+    max-width: 30rem;
+    gap: .5rem;
+    margin-inline: .4rem;
+
+    border: 1px solid black;
+    border-radius: 1rem;
+    overflow: hidden;
+
+    box-shadow: 2px 2px $green;
+
+    transition: all ease 150ms;
+
+    &:hover {
+        box-shadow: 4px 4px $green;
+    }
+
+    img {
+        object-fit: cover;
+        height: 10rem;
+    }
+}
+
+.recipe_details {
+    margin-inline: 1em;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    
+    .title {
+        p {        
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: "...";
+
+            max-width: 20em;
+        }
+    }
+
+    .time {
+        width: 4em;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        p {
+            width: 100%;
+        }
+    }
+}
+</style>
\ No newline at end of file

src/router/index.js

@@ -6,6 +6,7 @@ import LoginView from '../views/LoginView.vue'
 import SelectProfileView from '../views/SelectProfileView.vue'
 import ProfileCreationView from '../views/ProfileCreationView.vue'
 import RegisterAccountView from '../views/RegisterAccountView.vue'
+import PlannerView from '../views/PlannerView.vue'
 import PinCodeView from "@/views/PinCodeView.vue";
 import FridgeView from "@/views/FridgeView.vue";
 import RecipeView from "@/views/RecipeView.vue";
@@ -50,6 +51,11 @@ const router = createRouter({
       name: 'myFridge',
       component: FridgeView
     },
+    {
+      path: '/planner',
+      name: 'planner',
+      component: PlannerView
+    },
     {
       path: '/recipe/:id',
       name: 'recipe',
@@ -68,8 +74,8 @@ const router = createRouter({
     {
       path: '/:catchAll(.*)',
       name: "404 Page not found" ,
-      component: MissingPage }
-
+      component: MissingPage 
+    }
   ]
 })
 

src/style.scss

@@ -46,4 +46,4 @@ $phone-min : 360px;
   width: 100%;
   margin: 0;
   height: 100%;
-}
\ No newline at end of file
+}

src/views/FridgeView.vue

@@ -67,10 +67,17 @@ export default {
 
   },
   async mounted() {
-      await API.getFridgeItems()
-      if(this.fridgeItems.length===0){
+      API.getFridgeItems()
+      .then((fridgeItems) => {
+        this.fridgeItems = fridgeItems;
+        
+        if(this.fridgeItems.length===0){
           this.fridgeMsg="Kjøleskapet ditt er tomt."
-      }
+        }
+      })
+      .catch(() => {
+        this.fridgeMsg = "Kjøleskapet ditt er tomt."
+      })
   }
 }
 </script>

src/views/PlannerView.vue

+<script>
+import RecipeCard from '../components/RecipeCard.vue';
+export default {
+    components: { RecipeCard }
+}
+</script>
+
+<template>
+    <div class="planner_container">
+        <h1>Denne uken</h1>
+        <div class="recipe_list">
+            <RecipeCard :recipe="{ id: 1, title: 'Kjøttkaker', description: 'Skikkelig gode kjøttkaker', time: '15 min' }" />
+            <RecipeCard :recipe="{ id: 1, title: 'Kjøttkaker', description: 'Skikkelig gode kjøttkaker med veldig veldig lang beskrivelse', time: '15 min' }" />
+
+        </div>
+    </div>
+</template>
+
+<style>
+h1 {
+    padding-left: 0.5em;
+}
+
+.recipe_list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+</style>
\ No newline at end of file

src/views/ProfileCreationView.vue

@@ -18,18 +18,22 @@ export default {
     methods: {
         async submit() {
             await API.addProfile(this.profile)
-            .then((profile) => {
-                let id = profile.id;
-
-                let image = document.getElementById("profile_img").files[0];
-                
-                API.uploadProfileImage(image, id)
-                .then((updatedProfile) => {
-                    this.authStore.profile = updatedProfile;                     
-                    router.push("/");
-                });
-
-            })
+                .then((profile) => {
+                    let id = profile.id;
+
+                    let image = document.getElementById("profile_img").files[0];
+
+                    if (typeof image === 'undefined') {
+                        this.authStore.profile = profile;
+                        router.push("/");
+                    }
+                    API.uploadProfileImage(image, id)
+                        .then((updatedProfile) => {
+                            this.authStore.profile = updatedProfile;
+                            router.push("/");
+                        });
+
+                })
         },
         updateImg() {
             let file = document.getElementById("profile_img").files[0];
@@ -59,8 +63,7 @@ export default {
                     </p>
                 </div>
             </label>
-            <input @change="updateImg" type="file"
-                accept=".jpeg, .jpg" id="profile_img" name="profile_img">
+            <input @change="updateImg" type="file" accept=".jpeg, .jpg" id="profile_img" name="profile_img">
             <label for="name">Navn</label>
             <input name="name" type="text" v-model="profile.name">
             <div class="check_container">