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

Menu for auto planner, menu sets auto planner settings. delete method no longer deletes all records for testing the auto planner.

Browse Source
This commit is contained in:
AquaticLava
2023-01-05 16:25:42 -07:00
parent 689eb426ea
commit 31f3425354
2 changed files with 159 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -209,11 +209,9 @@
@reload-meal-types="refreshMealTypes"
></meal-plan-edit-modal>
<auto-meal-plan-modal
:entry="entryEditing"
:modal_title="'Auto create meal plan'"
:auto_plan_show="auto_plan_show"
@create-plan="autoPlan"
:current_period="current_period"
@create-plan="doAutoPlan"
></auto-meal-plan-modal>
<transition name="slide-fade">
@ -305,6 +303,14 @@ export default {
mixins: [CalendarMathMixin, ApiMixin, ResolveUrlMixin],
data: function () {
return {
AutoPlan: {
meal_types: [],
keywords: [[]],
servings: 1,
date: Date.now(),
startDay: null,
endDay: null
},
showDate: new Date(),
plan_entries: [],
recipe_viewed: {},
@ -555,7 +561,7 @@ export default {
},
deleteEntry(data) {
this.plan_entries.forEach((entry, index, list) => {
//if (entry.id === data.id) {//todo:remove block!
if (entry.id === data.id) {
let apiClient = new ApiApiFactory()
apiClient
@ -566,7 +572,7 @@ export default {
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
//}
}
})
},
entryClick(data) {
@ -643,35 +649,44 @@ export default {
entry: plan_entry,
}
},
createAutoPlan(date) {
createAutoPlan() {
this.$bvModal.show(`autoplan-modal`)
},
async autoPlanThread(date,dateOffset,i,servings){
async autoPlanThread(date,dateOffset,meal_type,keywords,servings,mealTypesKey){
let apiClient = new ApiApiFactory()
let currentEntry = Object.assign({}, this.options.entryEditing)
currentEntry.date = moment(date).add(dateOffset,"d").format("YYYY-MM-DD")
currentEntry.servings = servings
await Promise.all([
currentEntry.recipe = await this.randomRecipe(i+3).then((result)=>{return result}),
currentEntry.recipe = await this.randomRecipe(keywords[mealTypesKey]).then((result)=>{return result}),
currentEntry.shared = await apiClient.listUserPreferences().then((result) => {return result.data[0].plan_share}),
currentEntry.meal_type = await this.getMealType(i+2).then((result)=>{return result})
currentEntry.meal_type = await this.getMealType(meal_type[mealTypesKey].id).then((result)=>{return result})
])
currentEntry.title = currentEntry.recipe.name
this.createEntry(currentEntry)
},
autoPlan(data, servings){
// ["breakfast","lunch","dinner"]
// meal types: 4,3,2
//meal keywords: 5,4,3
for (let i = 0; i < 3; i++) {
for (let dateOffset = 0; dateOffset < 7; dateOffset++) {
this.autoPlanThread(data,dateOffset,i,servings)
}
}
doAutoPlan(autoPlan){
console.log(autoPlan)
let dayInMilliseconds = (86400000)
console.log(autoPlan.startDay)
console.log(autoPlan.endDay)
console.log(autoPlan.endDay - autoPlan.startDay)
console.log(((autoPlan.endDay - autoPlan.startDay)/dayInMilliseconds) + 1)
let numberOfDays = ((autoPlan.endDay - autoPlan.startDay)/dayInMilliseconds) + 1
for (const mealTypesKey in autoPlan.meal_types) {
for (let dateOffset = 0; dateOffset < numberOfDays; dateOffset++) {
this.autoPlanThread(autoPlan.date, dateOffset, autoPlan.meal_types, autoPlan.keywords, autoPlan.servings, mealTypesKey)
}
}
},
randomRecipe(keyword) {
let url = `/api/recipe/?query=&keywords_or=${keyword}`
randomRecipe(keywords) {
let url = "/api/recipe/?query="
for (const keywordsKey in keywords) {
let keyword = keywords[keywordsKey]
url += `&keywords_and=${keyword.id}`
}
return axios.get(url).then((response) => {
let result = response.data
let count = result.count

324
vue/src/components/AutoMealPlanModal.vue
View File

@ -1,245 +1,167 @@
<template>
<b-modal :id="modal_id" size="lg" :title="modal_title" hide-footer aria-label="" @show="showModal">
<div class="row">
<div class="col col-md-12">
<div class="row">
<div class="col col-md-12">
<div class="row">
<div class="col-6 col-lg-9">
<b-input-group>
<b-form-input id="TitleInput" v-model="entryEditing.title" :placeholder="entryEditing.title_placeholder" @change="missing_recipe = false"></b-form-input>
<b-input-group-append class="d-none d-lg-block">
<b-button variant="primary" @click="entryEditing.title = ''"><i class="fa fa-eraser"></i></b-button>
</b-input-group-append>
</b-input-group>
<span class="text-danger" v-if="missing_recipe">{{ $t("Title_or_Recipe_Required") }}</span>
<small tabindex="-1" class="form-text text-muted" v-if="!missing_recipe">{{ $t("Title") }}</small>
</div>
<div class="col-6 col-lg-3">
<input type="date" id="DateInput" class="form-control" v-model="entryEditing.date" />
<small tabindex="-1" class="form-text text-muted">{{ $t("Date") }}</small>
<h5>{{ $t("Meal_Types") }}</h5>
<div>
<div>
<b-card no-body class="mt-1 p-2"
v-for="(meal_type, k) in AutoPlan.meal_types" :key="meal_type.id">
<b-card-header class="p-2 border-0">
<div class="row">
<div class="col-10">
<h5 class="mt-1 mb-1">
{{ meal_type.icon }} {{
meal_type.name
}}
</h5>
</div>
</div>
<div class="col-12">
<generic-multiselect
@change="genericSelectChanged"
:initial_selection="AutoPlan.keywords[meal_type]"
:parent_variable="`${k}`"
:model="Models.KEYWORD"
:placeholder="$t('Keywords')"
:limit="50"
/>
</div>
</b-card-header>
</b-card>
</div>
<div class="row-cols-1 m-3">
<b-form-input class="w-25 m-2 mb-0" :value = "AutoPlan.servings" :type="'number'" @input="updateServings"></b-form-input>
<small tabindex="-1" class="m-2 mt-0 form-text text-muted">{{ $t("Servings") }}</small>
</div>
<div class="">
<div class="row m-3 mb-0">
<b-form-datepicker class="col" :value-as-date="true" :value="current_period.periodStart" @input="updateStartDay"></b-form-datepicker>
<div class="col"></div>
<b-form-datepicker class="col" :value-as-date="true" :value="current_period.periodEnd" @input="updateEndDay"></b-form-datepicker>
</div>
<div class="row align-top m-3 mt-0">
<small tabindex="-1" class="col align-text-top text-muted">{{ $t("Start Day") }}</small>
<div class="col"></div>
<small tabindex="-1" class="col align-self-end text-muted">{{ $t("End Day") }}</small>
</div>
</div>
<div class="row mt-3">
<div class="col-12 col-lg-6 col-xl-6">
<b-form-group>
<generic-multiselect
@change="selectRecipe"
:initial_single_selection="entryEditing.recipe"
:label="'name'"
:model="Models.RECIPE"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Recipe')"
:limit="10"
:multiple="false"
></generic-multiselect>
<small tabindex="-1" class="form-text text-muted">{{ $t("Recipe") }}</small>
</b-form-group>
<b-form-group class="mt-3">
<generic-multiselect
required
@change="selectMealType"
:label="'name'"
:model="Models.MEAL_TYPE"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Meal_Type')"
:limit="10"
:multiple="false"
:initial_single_selection="entryEditing.meal_type"
:allow_create="true"
:create_placeholder="$t('Create_New_Meal_Type')"
></generic-multiselect>
<span class="text-danger" v-if="missing_meal_type">{{ $t("Meal_Type_Required") }}</span>
<small tabindex="-1" class="form-text text-muted" v-if="!missing_meal_type">{{ $t("Meal_Type") }}</small>
</b-form-group>
<b-form-group label-for="NoteInput" :description="$t('Note')" class="mt-3">
<textarea class="form-control" id="NoteInput" v-model="entryEditing.note" :placeholder="$t('Note')"></textarea>
</b-form-group>
<b-input-group>
<b-form-input id="ServingsInput" v-model="entryEditing.servings" :placeholder="$t('Servings')"></b-form-input>
</b-input-group>
<small tabindex="-1" class="form-text text-muted">{{ $t("Servings") }}</small>
<b-form-group class="mt-3">
<generic-multiselect
required
@change="entryEditing.shared = $event.val"
parent_variable="entryEditing.shared"
:label="'display_name'"
:model="Models.USER_NAME"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
v-bind:placeholder="$t('Share')"
:limit="10"
:multiple="true"
:initial_selection="entryEditing.shared"
></generic-multiselect>
<small tabindex="-1" class="form-text text-muted">{{ $t("Share") }}</small>
</b-form-group>
<b-input-group v-if="!autoMealPlan">
<b-form-checkbox id="AddToShopping" v-model="mealplan_settings.addshopping" />
<small tabindex="-1" class="form-text text-muted">{{ $t("AddToShopping") }}</small>
</b-input-group>
<b-input-group v-if="mealplan_settings.addshopping">
<b-form-checkbox id="reviewShopping" v-model="mealplan_settings.reviewshopping" />
<small tabindex="-1" class="form-text text-muted">{{ $t("review_shopping") }}</small>
</b-input-group>
</div>
<div class="col-lg-6 d-none d-lg-block d-xl-block">
<recipe-card v-if="entryEditing.recipe" :recipe="entryEditing.recipe" :detailed="false"></recipe-card>
</div>
</div>
<div class="row mt-3 mb-3">
<div class="col-12">
<b-button variant="danger" @click="deleteEntry" v-if="allow_delete">{{ $t("Delete") }} </b-button>
<b-button class="float-right" variant="primary" @click="editEntry">{{ $t("Save") }}</b-button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-3 mb-3">
<div class="col-12">
<b-button class="float-right" variant="primary" @click="createPlan">{{ $t("Create Meal Plan") }}</b-button>
<b-button class="" variant="danger" @click="exitPlan">{{ $t("Exit") }}</b-button>
</div>
</div>
</b-modal>
</template>
<script>
import Vue from "vue"
import VueCookies from "vue-cookies"
import { BootstrapVue } from "bootstrap-vue"
import {BootstrapVue} from "bootstrap-vue"
import GenericMultiselect from "@/components/GenericMultiselect"
import { ApiMixin, getUserPreference } from "@/utils/utils"
import {ApiMixin} from "@/utils/utils"
const { ApiApiFactory } = require("@/utils/openapi/api")
const { StandardToasts } = require("@/utils/utils")
Vue.use(BootstrapVue)
Vue.use(VueCookies)
let MEALPLAN_COOKIE_NAME = "mealplan_settings"
export default {
name: "AutoMealPlanModal",
components: {
GenericMultiselect
},
props: {
entry: Object,
entryEditing_inital_servings: Number,
modal_title: String,
modal_id: {
type: String,
default: "autoplan-modal",
},
allow_delete: {
type: Boolean,
default: true,
},
current_period: Object
},
mixins: [ApiMixin],
components: {
GenericMultiselect,
RecipeCard: () => import("@/components/RecipeCard.vue"),
},
data() {
return {
entryEditing: {},
missing_recipe: false,
missing_meal_type: false,
default_plan_share: [],
mealplan_settings: {
addshopping: false,
reviewshopping: false,
},
AutoPlan: {
meal_types: [],
keywords: [[]],
servings: 1,
date: Date.now(),
startDay: null,
endDay: null
}
}
},
watch: {
entry: {
handler() {
this.entryEditing = Object.assign({}, this.entry)
if (this.entryEditing_inital_servings) {
this.entryEditing.servings = this.entryEditing_inital_servings
}
},
deep: true,
},
entryEditing: {
handler(newVal) {},
deep: true,
},
mealplan_settings: {
handler(newVal) {
this.$cookies.set(MEALPLAN_COOKIE_NAME, this.mealplan_settings)
},
deep: true,
},
entryEditing_inital_servings: function (newVal) {
this.entryEditing.servings = newVal
},
},
mounted: function () {},
computed: {
autoMealPlan: function () {
return getUserPreference("mealplan_autoadd_shopping")
},
},
methods: {
genericSelectChanged: function (obj) {
this.AutoPlan.keywords[obj.var] = obj.val
},
showModal() {
if (this.$cookies.isKey(MEALPLAN_COOKIE_NAME)) {
this.mealplan_settings = Object.assign({}, this.mealplan_settings, this.$cookies.get(MEALPLAN_COOKIE_NAME))
}
let apiClient = new ApiApiFactory()
this.refreshMealTypes()
apiClient.listUserPreferences().then((result) => {
if (this.entry.id === -1) {
this.entryEditing.shared = result.data[0].plan_share
}
this.AutoPlan.servings = 1
this.AutoPlan.startDay = this.current_period.periodStart
this.AutoPlan.endDay = this.current_period.periodEnd
},
sortMealTypes() {
this.meal_types.forEach(function (element, index) {
element.order = index
})
let updated = 0
this.meal_types.forEach((meal_type) => {
let apiClient = new ApiApiFactory()
apiClient
.updateMealType(this.AutoPlan.meal_type, meal_type)
.then((e) => {
if (updated === this.meal_types.length - 1) {
this.periodChangedCallback(this.current_period)
} else {
updated++
}
})
.catch((err) => {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_UPDATE, err)
})
})
},
refreshMealTypes() {
let apiClient = new ApiApiFactory()
editEntry() {
this.missing_meal_type = false
this.missing_recipe = false
let cancel = false
if (this.entryEditing.meal_type == null) {
this.missing_meal_type = true
cancel = true
}
if (this.entryEditing.recipe == null && this.entryEditing.title === "") {
this.missing_recipe = true
cancel = true
}
if (!cancel) {
this.$bvModal.hide(`edit-modal`)
this.$emit("save-entry", { ...this.mealplan_settings, ...this.entryEditing, ...{ addshopping: this.mealplan_settings.addshopping && !this.autoMealPlan } })
}
Promise.resolve(apiClient.listMealTypes().then((result) => {
result.data.forEach((meal_type) => {
meal_type.editing = false
})
this.AutoPlan.meal_types = result.data
})).then( () => {
let mealArray = this.AutoPlan.meal_types
for (let i = 0; i < mealArray.length; i++) {
this.AutoPlan.keywords[i] = [];
}}
)
},
deleteEntry() {
this.$bvModal.hide(`edit-modal`)
this.$emit("delete-entry", this.entryEditing)
},
selectMealType(event) {
this.missing_meal_type = false
if (event.val != null) {
this.entryEditing.meal_type = event.val
} else {
this.entryEditing.meal_type = null
}
},
selectShared(event) {
if (event.val != null) {
this.entryEditing.shared = event.val
} else {
this.entryEditing.meal_type = null
}
},
selectRecipe(event) {
this.missing_recipe = false
if (event.val != null) {
this.entryEditing.recipe = event.val
this.entryEditing.title_placeholder = this.entryEditing.recipe.name
this.entryEditing.servings = this.entryEditing.recipe.servings
} else {
this.entryEditing.recipe = null
this.entryEditing.title_placeholder = ""
this.entryEditing.servings = 1
}
createPlan() {
this.$bvModal.hide(`autoplan-modal`)
this.$emit("create-plan", this.AutoPlan)
},
updateStartDay(date){
this.AutoPlan.startDay = date
console.log(date)
},
updateEndDay(date){
this.AutoPlan.endDay = date
},
updateServings(numberOfServings) {
this.AutoPlan.servings = numberOfServings
},
exitPlan() {
this.$bvModal.hide(`autoplan-modal`)
}
},
}
</script>