diff --git a/src/router/index.js b/src/router/index.js index bdc5515a1fa509cc1ad6df192c227ad31979035b..010ff3cc25d1fb1dd8dafae01bc7ed655878acf9 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -6,6 +6,7 @@ import ProfileCreationView from '../views/ProfileCreationView.vue' import RegisterAccountView from '../views/RegisterAccountView.vue' import PinCodeView from "@/views/PinCodeView.vue"; import FridgeView from "@/views/FridgeView.vue"; +import RecipeView from "@/views/RecipeView.vue"; const router = createRouter({ @@ -45,6 +46,11 @@ const router = createRouter({ path: '/myFridge', name: 'myFridge', component: FridgeView + }, + { + path: '/recipe/:id', + name: 'recipe', + component: RecipeView } ] }) diff --git a/src/util/API.js b/src/util/API.js index 516c23defb0db232f23c69503b15968b56ff1c45..97cde9c4e9c91048b5be41b0b7d448cf5395b118 100644 --- a/src/util/API.js +++ b/src/util/API.js @@ -263,4 +263,20 @@ export const API = { throw new Error("Could not fetch fridge item"); }); }, + + /** + * Get recipe based on id + * @param id + * @returns {Promise<*>} + */ + getRecipe: async (id) => { + return axios.get(`${import.meta.env.VITE_BACKEND_URL}/recipe/${id}`) + .then((response) => { + console.log(response.data); + return response.data; + }) + .catch((error) => { + throw new Error(error); + }) + } } \ No newline at end of file diff --git a/src/views/RecipeView.vue b/src/views/RecipeView.vue new file mode 100644 index 0000000000000000000000000000000000000000..88fd6572f4de41dae6c0a44719f0a0255f2b3dc1 --- /dev/null +++ b/src/views/RecipeView.vue @@ -0,0 +1,86 @@ +<script> + +import {API} from "@/util/API"; + +export default { + name: "RecipeView", + data() { + return { + recipe: {}, + id: this.$route.params.id, + title: "", + description: "", + time: "", + ingredients: [], + instructions: "", + } + }, + methods: { + async loadData() { + await API.getRecipe(this.id) + .then((recipe) => { + this.title = recipe.title; + this.description = recipe.description; + this.time = recipe.time; + this.ingredients = recipe.ingredient; + this.instructions = recipe.instructions; + }) + }, + addIngredientsShoppingList() { + //TODO add ingredients to shopping list + }, + removeIngredientsFromFridge() { + //TODO remove used ingredients from fridge + } + }, + async mounted() { + await this.loadData(); + } +} + +</script> + +<template> + <main> + <h1>{{this.title}}</h1><br> + <p>{{this.description}}</p><br> + <div class="ingredients"> + <h2>Ingredienser</h2> + <ul> + <li v-for="ingredient in this.ingredients">{{ ingredient.item.name }} {{ ingredient.amount.quantity }} {{ingredient.amount.unit}}</li> + </ul> + <button @click="addIngredientsShoppingList">Legg til ingrediensene i handlekurven</button> + </div> + <div class="instructions"> + <h2>Instruksjoner</h2> + {{this.instructions}} + </div> + <button @click="removeIngredientsFromFridge">Fjern varene fra kjøleskapet</button> + + </main> + +</template> + +<style scoped lang="scss"> +@media(min-width: base.$desktop-min) { + main { + padding-top: 45px !important; + } +} + +main { + padding: 20px 10px; + .ingredients { + margin-bottom: 20px; + } + button { + min-height: 40px; + border-radius: 0; + border: 1px solid; + cursor: pointer; + padding: 5px; + } +} + + +</style> \ No newline at end of file