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

switcher basically working again

Browse Source
This commit is contained in:
vabene1111
2022-01-17 20:22:37 +01:00
parent 418c38423f
commit e1c7305c07
3 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div id="app" style="margin-bottom: 4vh"> <div id="app" style="margin-bottom: 4vh">
<RecipeSwitcher mode="mealplan" /> <RecipeSwitcher ref="ref_recipe_switcher"/>
<div class="row"> <div class="row">
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1"> <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
<div class="row"> <div class="row">

2
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -5,7 +5,7 @@
</template> </template>
<div v-if="!loading"> <div v-if="!loading">
<RecipeSwitcher :recipe="rootrecipe.id" :name="rootrecipe.name" mode="recipe" @switch="quickSwitch($event)" /> <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" />
<div class="row"> <div class="row">
<div class="col-12" style="text-align: center"> <div class="col-12" style="text-align: center">
<h3>{{ recipe.name }}</h3> <h3>{{ recipe.name }}</h3>

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

@ -1,55 +1,75 @@
<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-outline-dark fas fa-receipt fa-xl fa-fw shadow-none btn-circle" <i class="btn btn-primary fas fa-receipt fa-xl fa-fw shadow-none btn-circle"
v-b-toggle.related-recipes/> v-b-toggle.related-recipes/>
</div> </div>
<b-sidebar id="related-recipes" title="Quick actions" backdrop right shadow="sm" style="z-index: 10000"> <b-sidebar id="related-recipes" backdrop right bottom no-header shadow="sm" style="z-index: 10000"
@shown="updatePinnedRecipes()">
<template #default="{ hide }"> <template #default="{ hide }">
<nav class="mb-3 ml-3"> <div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
<b-nav vertical>
<h5><i class="fas fa-calendar fa-fw"></i> Planned</h5>
<div v-for="r in planned_recipes" :key="`plan${r.id}`"> <h5>Planned <i class="fas fa-calendar fa-fw"></i></h5>
<b-nav-item variant="link" @click="
navRecipe(r) <div class="text-right">
hide() <template v-if="planned_recipes.length > 0">
">{{ r.name }} <div v-for="r in planned_recipes" :key="`plan${r.id}`">
</b-nav-item> <div class="pb-1 pt-1">
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
</div>
</div>
</template>
<template v-else>
<span class="text-muted">You have nothing planned for today!</span>
</template>
</div>
<h5>Pinned <i class="fas fa-thumbtack fa-fw"></i></h5>
<template v-if="pinned_recipes.length > 0">
<div class="text-right">
<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>
</b-col>
<b-col cols="10">
<a @click="navRecipe(r); hide()" href="javascript:void(0);"
class="align-self-end">{{ r.name }} </a>
</b-col>
</b-row>
</div>
</div> </div>
<hr/> </template>
<h5><i class="fas fa-thumbtack fa-fw"></i> Pinned</h5> <template v-else>
<span class="text-muted">You have no pinned recipes!</span>
</template>
<div v-for="r in pinned_recipes" :key="`pin${r.id}`">
<b-nav-item variant="link" @click=" <template v-if="related_recipes.length > 0">
navRecipe(r) <h5>Related <i class="fas fa-link fa-fw"></i></h5>
hide() <div class="text-right">
">{{ r.name }} <a href="javascript:void(0);">x</a> <div v-for="r in related_recipes" :key="`related${r.id}`">
</b-nav-item> <div class="pb-1 pt-1">
<a @click=" navRecipe(r); hide()" href="javascript:void(0);">{{ r.name }}</a>
</div>
</div>
</div> </div>
<hr/> </template>
<h5><i class="fas fa-link fa-fw"></i> Related</h5>
<div v-for="r in related_recipes" :key="`related${r.id}`"> </div>
<b-nav-item variant="link" @click="
navRecipe(r)
hide()
">{{ r.name }}
</b-nav-item>
</div>
<h5><i class="fas fa-link fa-fw"></i> TEST</h5>
<div v-for="r in test" :key="`test${r.id}`"> </template>
<b-nav-item variant="link" @click=" <template #footer="{ hide }">
navRecipe(r) <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
hide() <strong class="mr-auto">Quick actions</strong>
">{{ r.name }} <b-button size="sm" @click="hide">Close</b-button>
</b-nav-item> </div>
</div>
</b-nav>
</nav>
</template> </template>
</b-sidebar> </b-sidebar>
</div> </div>
@ -71,7 +91,6 @@ export default {
planned_recipes: [], planned_recipes: [],
pinned_recipes: [], pinned_recipes: [],
recipes: {}, recipes: {},
test : []
} }
}, },
computed: { computed: {
@ -95,11 +114,16 @@ export default {
navRecipe: function (recipe) { navRecipe: function (recipe) {
if (this.is_recipe_view) { if (this.is_recipe_view) {
this.$emit("switch", recipe) this.$emit("switch", this.recipes[recipe.id])
} else { } else {
window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id) window.location.href = this.resolveDjangoUrl("view_recipe", recipe.id)
} }
}, },
updatePinnedRecipes: function () {
//TODO clean this up to prevent duplicate API calls
this.loadPinnedRecipes()
this.loadRecipeData()
},
loadRecipeData: function () { loadRecipeData: function () {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
@ -113,11 +137,10 @@ export default {
recipe_ids.push(id) recipe_ids.push(id)
} }
}) })
console.log(recipe_list, recipe_ids)
recipe_ids.forEach((id) => { recipe_ids.forEach((id) => {
apiClient.retrieveRecipe(id).then((result) => { apiClient.retrieveRecipe(id).then((result) => {
this.recipes[id] = result.data this.recipes[id] = result.data
this.test.push(result.data)
}) })
}) })
@ -126,9 +149,10 @@ export default {
let apiClient = new ApiApiFactory() let apiClient = new ApiApiFactory()
// get related recipes and save them for later // get related recipes and save them for later
if (this.recipe){ if (this.$parent.recipe) {
return apiClient.relatedRecipe(this.recipe, {query: {levels: 2}}).then((result) => { this.related_recipes = [this.$parent.recipe]
this.related_recipes = 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)
}) })
} }
}, },
@ -159,6 +183,13 @@ export default {
return Promise.all(promises) return Promise.all(promises)
}) })
}, },
unPinRecipe: function (recipe) {
let pinnedRecipes = JSON.parse(localStorage.getItem('pinned_recipes')) || []
pinnedRecipes = pinnedRecipes.filter((r) => r.id !== recipe.id)
console.log('pinned left', pinnedRecipes)
this.pinned_recipes = pinnedRecipes
localStorage.setItem('pinned_recipes', JSON.stringify(pinnedRecipes))
}
}, },
} }
</script> </script>