Recipe view. Needs tests.

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
     }
   ]
 })

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

src/views/RecipeView.vue

+<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