switcher basically working again
This commit is contained in:
vabene1111
parent
418c38423f
commit
e1c7305c07
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="app" style="margin-bottom: 4vh">
|
||||
<RecipeSwitcher mode="mealplan" />
|
||||
<RecipeSwitcher ref="ref_recipe_switcher"/>
|
||||
<div class="row">
|
||||
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
|
||||
<div class="row">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<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="col-12" style="text-align: center">
|
||||
<h3>{{ recipe.name }}</h3>
|
||||
|
||||
@ -1,55 +1,75 @@
|
||||
<template>
|
||||
<div v-if="recipes !== {}">
|
||||
<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/>
|
||||
</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 }">
|
||||
|
||||
<nav class="mb-3 ml-3">
|
||||
<b-nav vertical>
|
||||
<h5><i class="fas fa-calendar fa-fw"></i> Planned</h5>
|
||||
<div class="d-flex flex-column justify-content-end h-100 p-3 align-items-end">
|
||||
|
||||
<div v-for="r in planned_recipes" :key="`plan${r.id}`">
|
||||
<b-nav-item variant="link" @click="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
">{{ r.name }}
|
||||
</b-nav-item>
|
||||
<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>
|
||||
</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>
|
||||
<hr/>
|
||||
<h5><i class="fas fa-thumbtack fa-fw"></i> Pinned</h5>
|
||||
</template>
|
||||
<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="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
">{{ r.name }} <a href="javascript:void(0);">x</a>
|
||||
</b-nav-item>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<h5><i class="fas fa-link fa-fw"></i> Related</h5>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<h5><i class="fas fa-link fa-fw"></i> TEST</h5>
|
||||
|
||||
<div v-for="r in test" :key="`test${r.id}`">
|
||||
<b-nav-item variant="link" @click="
|
||||
navRecipe(r)
|
||||
hide()
|
||||
">{{ r.name }}
|
||||
</b-nav-item>
|
||||
</div>
|
||||
</b-nav>
|
||||
</nav>
|
||||
</template>
|
||||
<template #footer="{ hide }">
|
||||
<div class="d-flex bg-dark text-light align-items-center px-3 py-2">
|
||||
<strong class="mr-auto">Quick actions</strong>
|
||||
<b-button size="sm" @click="hide">Close</b-button>
|
||||
</div>
|
||||
</template>
|
||||
</b-sidebar>
|
||||
</div>
|
||||
@ -71,7 +91,6 @@ export default {
|
||||
planned_recipes: [],
|
||||
pinned_recipes: [],
|
||||
recipes: {},
|
||||
test : []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -95,11 +114,16 @@ export default {
|
||||
navRecipe: function (recipe) {
|
||||
|
||||
if (this.is_recipe_view) {
|
||||
this.$emit("switch", recipe)
|
||||
this.$emit("switch", this.recipes[recipe.id])
|
||||
} else {
|
||||
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 () {
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
@ -113,11 +137,10 @@ export default {
|
||||
recipe_ids.push(id)
|
||||
}
|
||||
})
|
||||
console.log(recipe_list, recipe_ids)
|
||||
|
||||
recipe_ids.forEach((id) => {
|
||||
apiClient.retrieveRecipe(id).then((result) => {
|
||||
this.recipes[id] = result.data
|
||||
this.test.push(result.data)
|
||||
})
|
||||
})
|
||||
|
||||
@ -126,9 +149,10 @@ export default {
|
||||
let apiClient = new ApiApiFactory()
|
||||
|
||||
// get related recipes and save them for later
|
||||
if (this.recipe){
|
||||
return apiClient.relatedRecipe(this.recipe, {query: {levels: 2}}).then((result) => {
|
||||
this.related_recipes = result.data
|
||||
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)
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -159,6 +183,13 @@ export default {
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user