cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

playing around with the reciupe switcher

Browse Source
This commit is contained in:
vabene1111 2022-01-07 16:19:25 +01:00
parent 30683fe455
commit e1e53d12f8
1 changed files with 98 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
vue/src/components/Buttons/RecipeSwitcher.vue
View File

@ -1,29 +1,42 @@
<template> <template>
<div v-if="recipes.length > 0"> <div v-if="recipes !== {}">
<div id="switcher"> <div id="switcher" class="align-center">
<i class="btn btn-outline-dark fas fa-receipt fa-xl shadow-none btn-circle" v-b-toggle.related-recipes /> <i class="btn btn-outline-dark fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
v-b-toggle.related-recipes/>
</div> </div>
<b-sidebar id="related-recipes" :title="title" backdrop right shadow="sm" style="z-index: 10000"> <b-sidebar id="related-recipes" title="Quick actions" backdrop right shadow="sm" style="z-index: 10000">
<template #default="{ hide }"> <template #default="{ hide }">
<nav class="mb-3">
<nav class="mb-3 ml-3">
<b-nav vertical> <b-nav vertical>
<b-nav-item <h5><i class="fas fa-calendar fa-fw"></i> Planned</h5>
variant="link"
@click=" <div v-for="r in planned_recipes" :key="`plan${r.id}`">
navRecipe(-1) <b-nav-item variant="link" @click="
hide()
"
>{{ name }}</b-nav-item
>
<div v-for="r in recipes" :key="r.id">
<b-nav-item
variant="link"
@click="
navRecipe(r) navRecipe(r)
hide() hide()
" ">{{ r.name }}
>{{ r.name }}</b-nav-item </b-nav-item>
> </div>
<hr/>
<h5><i class="fas fa-thumbtack fa-fw"></i> Pinned</h5>
<div v-for="r in pinned_recipes" :key="`pin${r.id}`">
<b-nav-item variant="link" @click="
navRecipe(r)
hide()
">{{ r.name }}
</b-nav-item>
</div>
<hr/>
<h5><i class="fas fa-link fa-fw"></i> Related</h5>
<div v-for="r in related_recipes" :key="`related${r.id}`">
<b-nav-item variant="link" @click="
navRecipe(r)
hide()
">{{ r.name }}
</b-nav-item>
</div> </div>
</b-nav> </b-nav>
</nav> </nav>
@ -33,122 +46,101 @@
</template> </template>
<script> <script>
const { ApiApiFactory } = require("@/utils/openapi/api") const {ApiApiFactory} = require("@/utils/openapi/api")
import { ResolveUrlMixin } from "@/utils/utils" import {ResolveUrlMixin} from "@/utils/utils"
export default { export default {
name: "RecipeSwitcher", name: "RecipeSwitcher",
mixins: [ResolveUrlMixin], mixins: [ResolveUrlMixin],
props: { props: {
recipe: { type: Number, default: undefined }, recipe: {type: Number, default: undefined},
name: { type: String, default: undefined },
mode: { type: String, default: "recipe" },
}, },
data() { data() {
return { return {
recipes: [], related_recipes: [],
recipe_list: [], planned_recipes: [],
pinned_recipes: [],
recipes: {}
} }
}, },
computed: { computed: {
title() { is_recipe_view: function () {
let title = "" // determine if the currently open view is the recipe view to decide if links should switch to or link to a recipe
switch (this.mode) { return this.$root._vnode.tag.includes('RecipeView')
case "recipe":
title = this.$t("related_recipes")
break
case "mealplan":
title = this.$t("today_recipes")
break
}
return title
}, },
}, },
mounted() { mounted() {
this.recipes = []
switch (this.mode) {
case "recipe":
this.loadRecipes()
break
case "mealplan":
this.loadMealPlans()
break
}
},
let promises = []
promises.push(this.loadRelatedRecipes())
this.loadPinnedRecipes()
promises.push(this.loadMealPlans())
Promise.all(promises).then(() => {
this.loadRecipeData()
})
},
methods: { methods: {
navRecipe: function (recipe) { navRecipe: function (recipe) {
switch (this.mode) {
case "recipe": if (this.is_recipe_view) {
this.$emit("switch", recipe) this.$emit("switch", this.recipes[recipe.id])
break } else {
case "mealplan": window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
break
default:
console.log(this.mode, " isn't defined.")
} }
}, },
loadRecipes: function () { loadRecipeData: function () {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
apiClient let recipe_list = [...this.related_recipes, ...this.planned_recipes, ...this.pinned_recipes]
.relatedRecipe(this.recipe, { query: { levels: 2 } }) let recipe_ids = []
// get related recipes and save them for later recipe_list.forEach((recipe) => {
.then((result) => { if (!recipe_ids.includes(recipe.id)) {
this.recipe_list = result.data recipe_ids.push(recipe.id)
}) }
// get all recipes for today })
.then(() => {
this.loadMealPlans() recipe_ids.forEach((id) => {
apiClient.retrieveRecipe(id).then((result) => {
this.recipes[id] = result.data
}) })
})
},
loadRelatedRecipes: function () {
let apiClient = new ApiApiFactory()
// get related recipes and save them for later
return apiClient.relatedRecipe(this.recipe, {query: {levels: 2}}).then((result) => {
this.related_recipes = result.data
})
},
loadPinnedRecipes: function () {
let pinned_recipe_ids = localStorage.getItem('pinned_recipes') || []
this.pinned_recipes = pinned_recipe_ids
}, },
loadMealPlans: function () { loadMealPlans: function () {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
// TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/ // TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0] let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
apiClient return apiClient.listMealPlans({query: {from_date: today, to_date: today,},}).then((result) => {
.listMealPlans({ let promises = []
query: { result.data.forEach((mealplan) => {
from_date: today, this.planned_recipes.push({...mealplan?.recipe, servings: mealplan?.servings})
to_date: today, const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
}, promises.push(
}) apiClient.relatedRecipe(mealplan?.recipe?.id, {query: {levels: 2}}).then((r) => {
.then((result) => { // scale all recipes to mealplan servings
let promises = [] r.data = r.data.map((x) => {
result.data.forEach((mealplan) => { return {...x, factor: serving_factor}
this.recipe_list.push({ ...mealplan?.recipe, servings: mealplan?.servings })
const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
promises.push(
apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
// scale all recipes to mealplan servings
r.data = r.data.map((x) => {
return { ...x, factor: serving_factor }
})
this.recipe_list = [...this.recipe_list, ...r.data]
}) })
) this.planned_recipes = [...this.planned_recipes, ...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) => {
// scale all recipes to mealplan servings
result.data.servings = recipe?.servings ?? result.data.servings * (recipe?.factor ?? 1)
this.recipes.push(result.data)
})
)
}
}) })
return Promise.all(promises) )
})
}) })
return Promise.all(promises)
})
}, },
}, },
} }
@ -158,7 +150,7 @@ export default {
.btn-circle { .btn-circle {
width: 50px; width: 50px;
height: 50px; height: 50px;
padding: 10px 16px; padding: 10px 12px;
text-align: center; text-align: center;
border-radius: 35px; border-radius: 35px;
font-size: 24px; font-size: 24px;