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

implement sort order via API

Browse Source
This commit is contained in:
Chris Scoggins
2022-01-22 14:31:06 -06:00
parent 890e9e7242
commit 8d78d15e21
6 changed files with 211 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,22 +1,25 @@
<template>
<div v-if="recipes !== {}">
<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>
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
@shown="updatePinnedRecipes()">
<b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000" @shown="updatePinnedRecipes()">
<template #default="{ hide }">
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
<h5>Planned <i class="fas fa-calendar fa-fw"></i></h5>
<div class="text-right">
<template v-if="planned_recipes.length > 0">
<div v-for="r in planned_recipes" :key="`plan${r.id}`">
<div class="pb-1 pt-1">
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
<a
@click="
navRecipe(r)
hide()
"
href="javascript:void(0);"
>{{ r.name }}</a
>
</div>
</div>
</template>
@ -32,16 +35,20 @@
<div v-for="r in pinned_recipes" :key="`pin${r.id}`">
<b-row class="pb-1 pt-1">
<b-col cols="2">
<a href="javascript:void(0)" @click="unPinRecipe(r)"
class="text-muted"><i class="fas fa-times"></i></a>
<a href="javascript:void(0)" @click="unPinRecipe(r)" class="text-muted"><i class="fas fa-times"></i></a>
</b-col>
<b-col cols="10">
<a @click="navRecipe(r); hide()" href="javascript:void(0);"
class="align-self-end">{{ r.name }} </a>
<a
@click="
navRecipe(r)
hide()
"
href="javascript:void(0);"
class="align-self-end"
>{{ r.name }}
</a>
</b-col>
</b-row>
</div>
</div>
</template>
@ -49,21 +56,24 @@
<span class="text-muted">You have no pinned recipes!</span>
</template>
<template v-if="related_recipes.length > 0">
<h5>Related <i class="fas fa-link fa-fw"></i></h5>
<div class="text-right">
<div v-for="r in related_recipes" :key="`related${r.id}`">
<div class="pb-1 pt-1">
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
<a
@click="
navRecipe(r)
hide()
"
href="javascript:void(0);"
>{{ r.name }}</a
>
</div>
</div>
</div>
</template>
</div>
</template>
<template #footer="{ hide }">
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
@ -76,14 +86,14 @@
</template>
<script>
const {ApiApiFactory} = require("@/utils/openapi/api")
import {ResolveUrlMixin} from "@/utils/utils"
const { ApiApiFactory } = require("@/utils/openapi/api")
import { ResolveUrlMixin } from "@/utils/utils"
export default {
name: "RecipeSwitcher",
mixins: [ResolveUrlMixin],
props: {
recipe: {type: Number, default: undefined},
recipe: { type: Number, default: undefined },
},
data() {
return {
@ -96,11 +106,10 @@ export default {
computed: {
is_recipe_view: function () {
// determine if the currently open view is the recipe view to decide if links should switch to or link to a recipe
return this.$root._vnode.tag.includes('RecipeView')
return this.$root._vnode.tag.includes("RecipeView")
},
},
mounted() {
let promises = []
promises.push(this.loadRelatedRecipes())
this.loadPinnedRecipes()
@ -112,7 +121,6 @@ export default {
},
methods: {
navRecipe: function (recipe) {
if (this.is_recipe_view) {
this.$emit("switch", this.recipes[recipe.id])
} else {
@ -143,7 +151,6 @@ export default {
this.recipes[id] = result.data
})
})
},
loadRelatedRecipes: function () {
let apiClient = new ApiApiFactory()
@ -151,13 +158,13 @@ export default {
// get related recipes and save them for later
if (this.$parent.recipe) {
this.related_recipes = [this.$parent.recipe]
return apiClient.relatedRecipe(this.$parent.recipe.id, {query: {levels: 2, format: 'json'}}).then((result) => {
this.related_recipes = this.related_recipes.concat(result.data)
return apiClient.relatedRecipe(this.$parent.recipe.id, { query: { levels: 2, format: "json" } }).then((result) => {
this.related_recipes = this.related_recipes.concat(result.data)
})
}
},
loadPinnedRecipes: function () {
let pinned_recipe_ids = JSON.parse(localStorage.getItem('pinned_recipes')) || []
let pinned_recipe_ids = JSON.parse(localStorage.getItem("pinned_recipes")) || []
this.pinned_recipes = pinned_recipe_ids
},
loadMealPlans: function () {
@ -165,16 +172,16 @@ export default {
// 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]
return apiClient.listMealPlans({query: {from_date: today, to_date: today,},}).then((result) => {
return apiClient.listMealPlans({ query: { from_date: today, to_date: today } }).then((result) => {
let promises = []
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)
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
r.data = r.data.map((x) => {
return {...x, factor: serving_factor}
return { ...x, factor: serving_factor }
})
this.planned_recipes = [...this.planned_recipes, ...r.data]
})
@ -184,12 +191,12 @@ export default {
})
},
unPinRecipe: function (recipe) {
let pinnedRecipes = JSON.parse(localStorage.getItem('pinned_recipes')) || []
let pinnedRecipes = JSON.parse(localStorage.getItem("pinned_recipes")) || []
pinnedRecipes = pinnedRecipes.filter((r) => r.id !== recipe.id)
console.log('pinned left', pinnedRecipes)
console.log("pinned left", pinnedRecipes)
this.pinned_recipes = pinnedRecipes
localStorage.setItem('pinned_recipes', JSON.stringify(pinnedRecipes))
}
localStorage.setItem("pinned_recipes", JSON.stringify(pinnedRecipes))
},
},
}
</script>