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

updated RecipeSwitcher with new MealPlan API format

Browse Source
This commit is contained in:
smilerz
2023-12-19 16:50:32 -06:00
parent 99cd9bfb5b
commit 48dacf46c3
1 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,9 @@
<template> <template>
<div v-if="recipes !== {}"> <div v-if="recipes !== {}">
<div id="switcher" class="align-center"> <div id="switcher" class="align-center">
<i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes/> <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle" v-b-toggle.related-recipes />
</div> </div>
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
@shown="updatePinnedRecipes()">
<template #default="{ hide }"> <template #default="{ hide }">
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end"> <div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
<h5>{{ $t("Planned") }} <i class="fas fa-calendar fa-fw"></i></h5> <h5>{{ $t("Planned") }} <i class="fas fa-calendar fa-fw"></i></h5>
@ -19,7 +18,7 @@
hide() hide()
" "
href="javascript:void(0);" href="javascript:void(0);"
>{{ r.name }}</a >{{ r.name }}</a
> >
</div> </div>
</div> </div>
@ -36,8 +35,7 @@
<div v-for="r in pinned_recipes" :key="`pin${r.id}`"> <div v-for="r in pinned_recipes" :key="`pin${r.id}`">
<b-row class="pb-1 pt-1"> <b-row class="pb-1 pt-1">
<b-col cols="2"> <b-col cols="2">
<a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i <a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
class="fas fa-times"></i></a>
</b-col> </b-col>
<b-col cols="10"> <b-col cols="10">
<a <a
@ -47,7 +45,7 @@
" "
href="javascript:void(0);" href="javascript:void(0);"
class="align-self-end" class="align-self-end"
>{{ r.name }} >{{ r.name }}
</a> </a>
</b-col> </b-col>
</b-row> </b-row>
@ -69,7 +67,7 @@
hide() hide()
" "
href="javascript:void(0);" href="javascript:void(0);"
>{{ r.name }}</a >{{ r.name }}</a
> >
</div> </div>
</div> </div>
@ -88,14 +86,14 @@
</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 },
}, },
data() { data() {
return { return {
@ -160,14 +158,16 @@ export default {
// get related recipes and save them for later // get related recipes and save them for later
if (this.$parent.recipe) { if (this.$parent.recipe) {
this.related_recipes = [this.$parent.recipe] this.related_recipes = [this.$parent.recipe]
return apiClient.relatedRecipe(this.$parent.recipe.id, { return apiClient
query: { .relatedRecipe(this.$parent.recipe.id, {
levels: 2, query: {
format: "json" levels: 2,
} format: "json",
}).then((result) => { },
this.related_recipes = this.related_recipes.concat(result.data) })
}) .then((result) => {
this.related_recipes = this.related_recipes.concat(result.data)
})
} }
}, },
loadPinnedRecipes: function () { loadPinnedRecipes: function () {
@ -179,16 +179,16 @@ export default {
// 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]
return apiClient.listMealPlans({query: {from_date: today, to_date: today}}).then((result) => { return apiClient.listMealPlans(today, today).then((result) => {
let promises = [] let promises = []
result.data.forEach((mealplan) => { result.data.forEach((mealplan) => {
this.planned_recipes.push({...mealplan?.recipe, servings: mealplan?.servings}) this.planned_recipes.push({ ...mealplan?.recipe, servings: mealplan?.servings })
const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1) const serving_factor = (mealplan?.servings ?? mealplan?.recipe?.servings ?? 1) / (mealplan?.recipe?.servings ?? 1)
promises.push( promises.push(
apiClient.relatedRecipe(mealplan?.recipe?.id, {query: {levels: 2}}).then((r) => { apiClient.relatedRecipe(mealplan?.recipe?.id, { query: { levels: 2 } }).then((r) => {
// scale all recipes to mealplan servings // scale all recipes to mealplan servings
r.data = r.data.map((x) => { r.data = r.data.map((x) => {
return {...x, factor: serving_factor} return { ...x, factor: serving_factor }
}) })
this.planned_recipes = [...this.planned_recipes, ...r.data] this.planned_recipes = [...this.planned_recipes, ...r.data]
}) })
@ -220,7 +220,6 @@ export default {
z-index: 9000; z-index: 9000;
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
#switcher .btn-circle { #switcher .btn-circle {
position: fixed; position: fixed;