From 73cf67663d53733bdce41f5fe021e819327237e3 Mon Sep 17 00:00:00 2001
From: Katarzyna Szlejter <katarzsz@stud.ntnu.no>
Date: Fri, 5 May 2023 13:35:09 +0200
Subject: [PATCH] Generate weekmenu
---
src/components/Navbar.vue | 2 +-
src/components/RecipeCard.vue | 48 ++++++++++++--------
src/router/index.js | 8 ++--
src/stores/weekmenuStore.js | 29 ++++++++++++
src/util/API.js | 30 +++++++++++--
src/views/PlannerView.vue | 29 ------------
src/views/WeekMenuView.vue | 84 +++++++++++++++++++++++++++++++++++
7 files changed, 175 insertions(+), 55 deletions(-)
create mode 100644 src/stores/weekmenuStore.js
delete mode 100644 src/views/PlannerView.vue
create mode 100644 src/views/WeekMenuView.vue
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index b0e13c3..85fab9a 100644
--- a/src/components/Navbar.vue
+++ b/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>
diff --git a/src/components/RecipeCard.vue b/src/components/RecipeCard.vue
index 1d6cdc9..1e50a1b 100644
--- a/src/components/RecipeCard.vue
+++ b/src/components/RecipeCard.vue
@@ -1,24 +1,32 @@
<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;
diff --git a/src/router/index.js b/src/router/index.js
index 8d1e93c..cafcdb0 100644
--- a/src/router/index.js
+++ b/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',
diff --git a/src/stores/weekmenuStore.js b/src/stores/weekmenuStore.js
new file mode 100644
index 0000000..ec2db23
--- /dev/null
+++ b/src/stores/weekmenuStore.js
@@ -0,0 +1,29 @@
+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
diff --git a/src/util/API.js b/src/util/API.js
index bfa4263..20b02ff 100644
--- a/src/util/API.js
+++ b/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
diff --git a/src/views/PlannerView.vue b/src/views/PlannerView.vue
deleted file mode 100644
index 459ebb9..0000000
--- a/src/views/PlannerView.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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
diff --git a/src/views/WeekMenuView.vue b/src/views/WeekMenuView.vue
new file mode 100644
index 0000000..34b7e87
--- /dev/null
+++ b/src/views/WeekMenuView.vue
@@ -0,0 +1,84 @@
+<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
--
GitLab