switcher basically working again
This commit is contained in:
vabene1111
parent
418c38423f
commit
e1c7305c07
@ -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">
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user