implemented quick switch

cookbook/views/api.py

@@ -688,8 +688,11 @@ class RecipeViewSet(viewsets.ModelViewSet):
         obj = self.get_object()
         if obj.get_space() != request.space:
             raise PermissionDenied(detail='You do not have the required permission to perform this action', code=403)
-        qs = obj.get_related_recipes(levels=1)  # TODO: make levels a user setting, included in request data?, keep solely in the backend?
+        try:
-        # mealplans= TODO get todays mealplans
+            levels = int(request.query_params.get('levels', 1))
+        except (ValueError, TypeError):
+            levels = 1
+        qs = obj.get_related_recipes(levels=levels)  # TODO: make levels a user setting, included in request data?, keep solely in the backend?
         return Response(self.serializer_class(qs, many=True).data)
 
 

vue/src/apps/RecipeView/RecipeView.vue

@@ -5,6 +5,7 @@
         </template>
 
         <div v-if="!loading">
+            <RecipeSwitcher :recipe="rootrecipe.id" :name="rootrecipe.name" mode="recipe" @switch="quickSwitch($event)" />
             <div class="row">
                 <div class="col-12" style="text-align: center">
                     <h3>{{ recipe.name }}</h3>
@@ -172,6 +173,7 @@ import IngredientsCard from "@/components/IngredientsCard"
 import StepComponent from "@/components/StepComponent"
 import KeywordsComponent from "@/components/KeywordsComponent"
 import NutritionComponent from "@/components/NutritionComponent"
+import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
 
 Vue.prototype.moment = moment
 
@@ -192,6 +194,7 @@ export default {
         KeywordsComponent,
         LoadingSpinner,
         AddRecipeToBook,
+        RecipeSwitcher,
     },
     computed: {
         ingredient_factor: function () {
@@ -202,6 +205,7 @@ export default {
         return {
             loading: true,
             recipe: undefined,
+            rootrecipe: undefined,
             ingredient_count: 0,
             servings: 1,
             start_time: "",
@@ -237,7 +241,7 @@ export default {
                     this.start_time = moment().format("yyyy-MM-DDTHH:mm")
                 }
 
-                this.recipe = recipe
+                this.recipe = this.rootrecipe = recipe
                 this.loading = false
             })
         },
@@ -253,6 +257,13 @@ export default {
                 }
             }
         },
+        quickSwitch: function (e) {
+            if (e === -1) {
+                this.recipe = this.rootrecipe
+            } else {
+                this.recipe = e
+            }
+        },
     },
 }
 </script>

vue/src/components/Buttons/RecipeSwitcher.vue

@@ -0,0 +1,161 @@
+<template>
+    <div v-if="recipes.length > 0">
+        <div id="switcher">
+            <i class="btn btn-outline-dark fas fa-receipt fa-xl shadow-none btn-circle" v-b-toggle.related-recipes />
+        </div>
+        <b-sidebar id="related-recipes" :title="title" backdrop right shadow="sm" style="z-index: 10000">
+            <template #default="{ hide }">
+                <nav class="mb-3">
+                    <b-nav vertical>
+                        <b-nav-item
+                            variant="link"
+                            @click="
+                                navRecipe(-1)
+                                hide()
+                            "
+                            >{{ name }}</b-nav-item
+                        >
+                        <div v-for="r in recipes" :key="r.id">
+                            <b-nav-item
+                                variant="link"
+                                @click="
+                                    navRecipe(r)
+                                    hide()
+                                "
+                                >{{ r.name }}</b-nav-item
+                            >
+                        </div>
+                    </b-nav>
+                </nav>
+            </template>
+        </b-sidebar>
+    </div>
+</template>
+
+<script>
+const { ApiApiFactory } = require("@/utils/openapi/api")
+
+export default {
+    name: "RecipeSwitcher",
+    props: {
+        recipe: { type: Number, default: undefined },
+        name: { type: String, default: undefined },
+        mode: { type: String, default: "recipe" },
+    },
+    data() {
+        return {
+            recipes: [],
+            recipe_list: [],
+        }
+    },
+    computed: {
+        title() {
+            let title = ""
+            switch (this.mode) {
+                case "recipe":
+                    title = this.$t("related_recipes")
+                    break
+                case "mealplan":
+                    title = this.$t("today_recipes")
+                    break
+            }
+            return title
+        },
+    },
+    mounted() {
+        this.recipes = []
+        this.loadRecipes()
+    },
+
+    methods: {
+        navRecipe: function (recipe) {
+            switch (this.mode) {
+                case "recipe":
+                    this.$emit("switch", recipe)
+                    break
+                case "mealplan":
+                    console.log("navigate to", recipe)
+                    break
+                default:
+                    console.log(this.mode, " isn't defined.")
+            }
+        },
+        loadRecipes: function () {
+            let apiClient = new ApiApiFactory()
+            let today = new Date(Date.now()).toISOString().split("T")[0]
+            apiClient
+                .relatedRecipe(this.recipe, { query: { levels: 2 } })
+                // get related recipes and save them for later
+                .then((result) => {
+                    this.recipe_list = result.data
+                })
+                // get all recipes for today
+                .then(() => {
+                    apiClient
+                        .listMealPlans({
+                            query: {
+                                from_date: today,
+                                to_date: today,
+                            },
+                        })
+                        .then((result) => {
+                            let promises = []
+                            result.data.forEach((mealplan) => {
+                                this.recipe_list.push(mealplan?.recipe)
+                                promises.push(
+                                    apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
+                                        this.recipe_list = [...this.recipe_list, ...r.data]
+                                    })
+                                )
+                            })
+                            return Promise.all(promises).then(() => {
+                                let promises = []
+                                let dedup = []
+                                this.recipe_list.forEach((recipe) => {
+                                    if (!dedup.includes(recipe.id)) {
+                                        dedup.push(recipe.id)
+                                        promises.push(
+                                            apiClient.retrieveRecipe(recipe.id).then((result) => {
+                                                this.recipes.push(result.data)
+                                            })
+                                        )
+                                    }
+                                })
+                                return Promise.all(promises)
+                            })
+                        })
+                })
+        },
+    },
+}
+</script>
+
+<style>
+.btn-circle {
+    width: 50px;
+    height: 50px;
+    padding: 10px 16px;
+    text-align: center;
+    border-radius: 35px;
+    font-size: 24px;
+    line-height: 1.33;
+    z-index: 9000;
+}
+
+@media screen and (max-width: 600px) {
+    #switcher .btn-circle {
+        position: fixed;
+        top: 9px;
+        left: 80px;
+        color: white;
+    }
+}
+
+@media screen and (max-width: 2000px) {
+    #switcher .btn-circle {
+        position: fixed;
+        bottom: 10px;
+        right: 50px;
+    }
+}
+</style>

vue/src/locales/en.json

@@ -276,5 +276,7 @@
     "csv_prefix_label": "List Prefix",
     "copy_markdown_table": "Copy as Markdown Table",
     "in_shopping": "In Shopping List",
-    "DelayUntil": "Delay Until"
+    "DelayUntil": "Delay Until",
+    "related_recipes": "Related Recipes",
+    "today_recipes": "Today's Recipes"
 }