Generate weekmenu

src/components/Navbar.vue

@@ -13,7 +13,7 @@
                     </RouterLink>
                  </li>
                 <li>
-                    <RouterLink to="/planner" aria-label="link to week menu">
+                    <RouterLink to="/weekmenu" aria-label="link to week menu">
                         <Icon icon="ic:baseline-calendar-month" :color="iconColor" :style="{ fontSize: iconSize }"/>
                     </RouterLink>
                 </li>

src/components/RecipeCard.vue

 <script>
 import { Icon } from '@iconify/vue';
+import router from "@/router";
 
 export default {
     props: ['recipe'],
     components: {
         Icon
+    },
+    methods: {
+        redirectToRecipe() {
+            router.push("/recipe/"+this.recipe.recipe.id);
+        }
     }
 }
 </script>
 
 <template>
-    <div class="recipe_card">
-        <div class="recipe_details">
+    <h3 class="recipe-day">{{recipe.day}}</h3>
+
+    <div class="recipe-card" @click="redirectToRecipe">
+        <div class="recipe-details">
             <div class="title">
-                <h2>{{ recipe.title }}</h2>
-                <p>{{ recipe.description }}</p>
+                <h2>{{ recipe.recipe.title }}</h2>
+<!--                <p>{{ recipe.recipe.description }}</p>-->
             </div>
             <div class="time">
                 <Icon icon="mdi:timer" :style="{ fontSize: '2rem' }" />
-                {{ recipe.time }}
+                {{ recipe.recipe.time }}
             </div>
         </div>
     </div>
@@ -26,23 +34,27 @@ export default {
 
 <style scoped lang="scss">
 @import "../style.scss";
-
-.recipe_card {
+.recipe-day {
+    /*
+    text-align: center;
+    */
+    margin-bottom: 5px;
+}
+.recipe-card {
     align-content: center;
-
+    cursor: pointer;
     height: 5rem;
     max-width: 30rem;
     gap: .5rem;
-    margin-inline: .4rem;
-
+    //margin-inline: .4rem;
     border: 1px solid black;
     border-radius: 1rem;
     overflow: hidden;
-
+    margin-bottom: 20px;
     box-shadow: 2px 2px $green;
-
     transition: all ease 150ms;
 
+
     &:hover {
         box-shadow: 4px 4px $green;
     }
@@ -53,27 +65,27 @@ export default {
     }
 }
 
-.recipe_details {
+.recipe-details {
     margin-top: .4em;
     margin-inline: 1em;
-
+    align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     
     .title {
+        font-size: 12px;
+        max-width: 260px;
         p {        
             overflow: hidden;
             white-space: nowrap;
             text-overflow: "...";
-
             max-width: 20em;
         }
     }
-
     .time {
-        width: 4em;
-
+        font-size: 14px;
+        width: 5em;
         display: flex;
         flex-direction: column;
         justify-content: center;

src/router/index.js

@@ -6,7 +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 WeekMenu from '../views/WeekMenuView.vue'
 import PinCodeView from "@/views/PinCodeView.vue";
 import FridgeView from "@/views/FridgeView.vue";
 import RecipeView from "@/views/RecipeView.vue";
@@ -52,9 +52,9 @@ const router = createRouter({
       component: FridgeView
     },
     {
-      path: '/planner',
-      name: 'planner',
-      component: PlannerView
+      path: '/weekmenu',
+      name: 'weekmenu',
+      component: WeekMenu
     },
     {
       path: '/recipe/:id',

src/stores/weekmenuStore.js

+import { defineStore } from "pinia";
+
+export const useWeekMenuStore = defineStore("weekmenu", {
+    state: () => {
+        return {
+            items: []
+        };
+    },
+    persist: {
+        storage: localStorage
+    },
+    getters: {
+        getItems() {
+            return this.items;
+        },
+        getItem(state){
+            return(id) => state.items.filter(item =>
+                item.id === id)
+        }
+    },
+    actions: {
+        reset() {
+            this.$reset();
+        },
+        addWeekmenu(item){
+            this.items.push(item);
+        }
+    }
+});
\ No newline at end of file

src/util/API.js

@@ -498,10 +498,34 @@ export const API = {
 
     },
 
+    getWeekMenu: () => {
+        const authStore = useAuthStore();
+        return axios.get(`${import.meta.env.VITE_BACKEND_URL}/weekmenu`, {
+            headers: { Authorization: `Bearer ${authStore.token}` },
+        })
+            .then((response) => {
+                console.log(response.data);
+                return response.data;
+            })
+            .catch(() => {
+                throw new Error("Weekmenu not found");
+            });
+    },
 
-
-
-
+    generateWeekMenu: (numberOfPeople) => {
+        const authStore = useAuthStore();
+        return axios.put(`${import.meta.env.VITE_BACKEND_URL}/weekmenu/${numberOfPeople}`, "", {
+            headers: {
+                Authorization: `Bearer ${authStore.token}`,
+            }
+        })
+        .then((response) => {
+            return response.data;
+        })
+        .catch(() => {
+            throw new Error();
+        })
+}
 
 
 }
\ No newline at end of file

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/WeekMenuView.vue

+<script>
+import {API} from "@/util/API";
+import RecipeCard from '../components/RecipeCard.vue';
+
+export default {
+    components: { RecipeCard },
+    data() {
+        return {
+            weekMenu: {},
+            numberOfPeople: 1
+        }
+    },
+    methods: {
+        adjustNumberOfPeople(event) {
+            this.numberOfPeople = event.target.value;
+        },
+        generateWeekMenu() {
+            API.generateWeekMenu(this.numberOfPeople).then((menu) => {
+                this.weekMenu = menu;
+                this.recipes = menu.dayMenus;
+            })
+        },
+        loadWeekMenu() {
+            API.getWeekMenu()
+                .then((weekmenu) => {
+                    this.weekMenu = weekmenu;
+                    this.recipes = this.weekMenu.dayMenus;
+                })
+        }
+    },
+    mounted() {
+        this.loadWeekMenu()
+    }
+}
+</script>
+
+<template>
+    <div class="weekmenu-container">
+        <h1>Ukemeny</h1>
+        <div class="generate-weekmenu">
+            <label for="number-of-people">Antall personer:</label>
+            <input id="number-of-people" type="number" min="1" max="20" value="1" @change="event => adjustNumberOfPeople(event)">
+            <button type="button" @click="generateWeekMenu">Generer ukemeny</button>
+        </div>
+
+        <div class="weekmenu-recipes">
+            <RecipeCard v-for="recipe in this.weekMenu.dayMenus" :recipe=recipe></RecipeCard>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+
+    .generate-weekmenu {
+        padding: 20px 0;
+        label {
+            margin-right: 10px;
+        }
+        #number-of-people {
+            width: 55px;
+            height: 30px;
+            margin-right: 5px;
+        }
+        button {
+            height: 35px;
+            border-radius: 0;
+            cursor: pointer;
+            color: black;
+            border: 1px solid black;
+            padding: .5rem 1rem;
+            border: 2px base.$green solid;
+            background-color: base.$light-green;
+        }
+    }
+    .weekmenu-container {
+        padding: 0 10px 60px;
+    }
+    .weekmenu-recipes {
+        display: flex;
+        flex-direction: column;
+    }
+
+
+</style>
\ No newline at end of file