mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-03 13:19:16 -05:00
Merge branch 'develop' into feature/shopping_list_v2
This commit is contained in:
vabene1111
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div id="app" style="margin-bottom: 4vh">
|
||||
<RecipeSwitcher mode="mealplan" />
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
|
||||
<div class="row">
|
||||
@@ -244,6 +245,7 @@ import RecipeCard from "@/components/RecipeCard"
|
||||
import GenericMultiselect from "@/components/GenericMultiselect"
|
||||
import Treeselect from "@riophae/vue-treeselect"
|
||||
import "@riophae/vue-treeselect/dist/vue-treeselect.css"
|
||||
import RecipeSwitcher from "@/components/Buttons/RecipeSwitcher"
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
|
||||
@@ -252,7 +254,7 @@ let SETTINGS_COOKIE_NAME = "search_settings"
|
||||
export default {
|
||||
name: "RecipeSearchView",
|
||||
mixins: [ResolveUrlMixin, ApiMixin],
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect },
|
||||
components: { GenericMultiselect, RecipeCard, Treeselect, RecipeSwitcher },
|
||||
data() {
|
||||
return {
|
||||
// this.Models and this.Actions inherited from ApiMixin
|
||||
|
||||
@@ -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>
|
||||
@@ -75,12 +76,12 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="my-auto">
|
||||
<span class="text-primary"
|
||||
><b
|
||||
><template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template
|
||||
><template v-else>{{ recipe.servings_text }}</template></b
|
||||
></span
|
||||
>
|
||||
<span class="text-primary">
|
||||
<b>
|
||||
<template v-if="recipe.servings_text === ''">{{ $t("Servings") }}</template>
|
||||
<template v-else>{{ recipe.servings_text }}</template>
|
||||
</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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,22 +194,32 @@ export default {
|
||||
KeywordsComponent,
|
||||
LoadingSpinner,
|
||||
AddRecipeToBook,
|
||||
RecipeSwitcher,
|
||||
},
|
||||
computed: {
|
||||
ingredient_factor: function () {
|
||||
return this.servings / this.recipe.servings
|
||||
},
|
||||
ingredient_count() {
|
||||
return this.recipe?.steps.map((x) => x.ingredients).flat().length
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
recipe: undefined,
|
||||
ingredient_count: 0,
|
||||
rootrecipe: undefined,
|
||||
servings: 1,
|
||||
servings_cache: {},
|
||||
start_time: "",
|
||||
share_uid: window.SHARE_UID,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
servings(newVal, oldVal) {
|
||||
this.servings_cache[this.recipe.id] = this.servings
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.loadRecipe(window.RECIPE_ID)
|
||||
this.$i18n.locale = window.CUSTOM_LOCALE
|
||||
@@ -218,12 +230,9 @@ export default {
|
||||
if (window.USER_SERVINGS !== 0) {
|
||||
recipe.servings = window.USER_SERVINGS
|
||||
}
|
||||
this.servings = recipe.servings
|
||||
|
||||
let total_time = 0
|
||||
for (let step of recipe.steps) {
|
||||
this.ingredient_count += step.ingredients.length
|
||||
|
||||
for (let ingredient of step.ingredients) {
|
||||
this.$set(ingredient, "checked", false)
|
||||
}
|
||||
@@ -237,7 +246,8 @@ export default {
|
||||
this.start_time = moment().format("yyyy-MM-DDTHH:mm")
|
||||
}
|
||||
|
||||
this.recipe = recipe
|
||||
this.recipe = this.rootrecipe = recipe
|
||||
this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
@@ -253,6 +263,15 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
quickSwitch: function (e) {
|
||||
if (e === -1) {
|
||||
this.recipe = this.rootrecipe
|
||||
this.servings = this.servings_cache[this.rootrecipe?.id ?? 1]
|
||||
} else {
|
||||
this.recipe = e
|
||||
this.servings = this.servings_cache?.[e.id] ?? e.servings
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
185
vue/src/components/Buttons/RecipeSwitcher.vue
Normal file
185
vue/src/components/Buttons/RecipeSwitcher.vue
Normal file
@@ -0,0 +1,185 @@
|
||||
<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")
|
||||
import { ResolveUrlMixin } from "@/utils/utils"
|
||||
|
||||
export default {
|
||||
name: "RecipeSwitcher",
|
||||
mixins: [ResolveUrlMixin],
|
||||
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 = []
|
||||
switch (this.mode) {
|
||||
case "recipe":
|
||||
this.loadRecipes()
|
||||
break
|
||||
case "mealplan":
|
||||
this.loadMealPlans()
|
||||
break
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
navRecipe: function (recipe) {
|
||||
switch (this.mode) {
|
||||
case "recipe":
|
||||
this.$emit("switch", recipe)
|
||||
break
|
||||
case "mealplan":
|
||||
window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
|
||||
break
|
||||
default:
|
||||
console.log(this.mode, " isn't defined.")
|
||||
}
|
||||
},
|
||||
loadRecipes: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
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(() => {
|
||||
this.loadMealPlans()
|
||||
})
|
||||
},
|
||||
loadMealPlans: function () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
// TODO move to utility function moment is in maintenance mode https://momentjs.com/docs/
|
||||
var tzoffset = new Date().getTimezoneOffset() * 60000 //offset in milliseconds
|
||||
let today = new Date(Date.now() - tzoffset).toISOString().split("T")[0]
|
||||
apiClient
|
||||
.listMealPlans({
|
||||
query: {
|
||||
from_date: today,
|
||||
to_date: today,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
let promises = []
|
||||
result.data.forEach((mealplan) => {
|
||||
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]
|
||||
})
|
||||
)
|
||||
})
|
||||
|
||||
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)
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</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>
|
||||
@@ -280,5 +280,7 @@
|
||||
"mark_complete": "Mark Complete",
|
||||
"QuickEntry": "Quick Entry",
|
||||
"shopping_add_onhand_desc": "Mark food 'On Hand' when checked off shopping list.",
|
||||
"shopping_add_onhand": "Auto On Hand"
|
||||
"shopping_add_onhand": "Auto On Hand",
|
||||
"related_recipes": "Related Recipes",
|
||||
"today_recipes": "Today's Recipes"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user