Skip to content
Snippets Groups Projects
Commit 73374134 authored by Katarzyna Szlejter's avatar Katarzyna Szlejter :cat2:
Browse files

Merge branch 'generate-weekmenu' into 'main'

Generate weekmenu

See merge request !30
parents a39b33cb 73cf6766
No related branches found
No related tags found
1 merge request!30Generate weekmenu
Pipeline #226535 passed
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</RouterLink> </RouterLink>
</li> </li>
<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 }"/> <Icon icon="ic:baseline-calendar-month" :color="iconColor" :style="{ fontSize: iconSize }"/>
</RouterLink> </RouterLink>
</li> </li>
......
<script> <script>
import { Icon } from '@iconify/vue'; import { Icon } from '@iconify/vue';
import router from "@/router";
export default { export default {
props: ['recipe'], props: ['recipe'],
components: { components: {
Icon Icon
},
methods: {
redirectToRecipe() {
router.push("/recipe/"+this.recipe.recipe.id);
}
} }
} }
</script> </script>
<template> <template>
<div class="recipe_card"> <h3 class="recipe-day">{{recipe.day}}</h3>
<div class="recipe_details">
<div class="recipe-card" @click="redirectToRecipe">
<div class="recipe-details">
<div class="title"> <div class="title">
<h2>{{ recipe.title }}</h2> <h2>{{ recipe.recipe.title }}</h2>
<p>{{ recipe.description }}</p> <!-- <p>{{ recipe.recipe.description }}</p>-->
</div> </div>
<div class="time"> <div class="time">
<Icon icon="mdi:timer" :style="{ fontSize: '2rem' }" /> <Icon icon="mdi:timer" :style="{ fontSize: '2rem' }" />
{{ recipe.time }} {{ recipe.recipe.time }}
</div> </div>
</div> </div>
</div> </div>
...@@ -26,23 +34,27 @@ export default { ...@@ -26,23 +34,27 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
@import "../style.scss"; @import "../style.scss";
.recipe-day {
.recipe_card { /*
text-align: center;
*/
margin-bottom: 5px;
}
.recipe-card {
align-content: center; align-content: center;
cursor: pointer;
height: 5rem; height: 5rem;
max-width: 30rem; max-width: 30rem;
gap: .5rem; gap: .5rem;
margin-inline: .4rem; //margin-inline: .4rem;
border: 1px solid black; border: 1px solid black;
border-radius: 1rem; border-radius: 1rem;
overflow: hidden; overflow: hidden;
margin-bottom: 20px;
box-shadow: 2px 2px $green; box-shadow: 2px 2px $green;
transition: all ease 150ms; transition: all ease 150ms;
&:hover { &:hover {
box-shadow: 4px 4px $green; box-shadow: 4px 4px $green;
} }
...@@ -53,27 +65,27 @@ export default { ...@@ -53,27 +65,27 @@ export default {
} }
} }
.recipe_details { .recipe-details {
margin-top: .4em; margin-top: .4em;
margin-inline: 1em; margin-inline: 1em;
align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
.title { .title {
font-size: 12px;
max-width: 260px;
p { p {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: "..."; text-overflow: "...";
max-width: 20em; max-width: 20em;
} }
} }
.time { .time {
width: 4em; font-size: 14px;
width: 5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
......
...@@ -6,7 +6,7 @@ import LoginView from '../views/LoginView.vue' ...@@ -6,7 +6,7 @@ import LoginView from '../views/LoginView.vue'
import SelectProfileView from '../views/SelectProfileView.vue' import SelectProfileView from '../views/SelectProfileView.vue'
import ProfileCreationView from '../views/ProfileCreationView.vue' import ProfileCreationView from '../views/ProfileCreationView.vue'
import RegisterAccountView from '../views/RegisterAccountView.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 PinCodeView from "@/views/PinCodeView.vue";
import FridgeView from "@/views/FridgeView.vue"; import FridgeView from "@/views/FridgeView.vue";
import RecipeView from "@/views/RecipeView.vue"; import RecipeView from "@/views/RecipeView.vue";
...@@ -52,9 +52,9 @@ const router = createRouter({ ...@@ -52,9 +52,9 @@ const router = createRouter({
component: FridgeView component: FridgeView
}, },
{ {
path: '/planner', path: '/weekmenu',
name: 'planner', name: 'weekmenu',
component: PlannerView component: WeekMenu
}, },
{ {
path: '/recipe/:id', path: '/recipe/:id',
......
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
...@@ -498,10 +498,34 @@ export const API = { ...@@ -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
<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
<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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment