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

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

View File

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

View File

@ -1,100 +1,56 @@
<template> <template>
<b-modal :id="modal_id" size="lg" :title="modal_title" hide-footer aria-label="" @show="showModal"> <b-modal :id="modal_id" size="lg" :title="modal_title" hide-footer aria-label="" @show="showModal">
<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="row">
<div class="col col-md-12"> <div class="col-10">
<div class="row"> <h5 class="mt-1 mb-1">
<div class="col col-md-12"> {{ meal_type.icon }} {{
<div class="row"> meal_type.name
<div class="col-6 col-lg-9"> }}
<b-input-group> </h5>
<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>
</div> </div>
</div> </div>
<div class="row mt-3"> <div class="col-12">
<div class="col-12 col-lg-6 col-xl-6">
<b-form-group>
<generic-multiselect <generic-multiselect
@change="selectRecipe" @change="genericSelectChanged"
:initial_single_selection="entryEditing.recipe" :initial_selection="AutoPlan.keywords[meal_type]"
:label="'name'" :parent_variable="`${k}`"
:model="Models.RECIPE" :model="Models.KEYWORD"
style="flex-grow: 1; flex-shrink: 1; flex-basis: 0" :placeholder="$t('Keywords')"
v-bind:placeholder="$t('Recipe')" :limit="50"
: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>
<div class="col-lg-6 d-none d-lg-block d-xl-block"> </b-card-header>
<recipe-card v-if="entryEditing.recipe" :recipe="entryEditing.recipe" :detailed="false"></recipe-card> </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> </div>
</div>
<div class="row mt-3 mb-3"> <div class="row mt-3 mb-3">
<div class="col-12"> <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="createPlan">{{ $t("Create Meal Plan") }}</b-button>
<b-button class="float-right" variant="primary" @click="editEntry">{{ $t("Save") }}</b-button> <b-button class="" variant="danger" @click="exitPlan">{{ $t("Exit") }}</b-button>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</b-modal> </b-modal>
@ -102,144 +58,110 @@
<script> <script>
import Vue from "vue" 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 GenericMultiselect from "@/components/GenericMultiselect"
import { ApiMixin, getUserPreference } from "@/utils/utils" import {ApiMixin} from "@/utils/utils"
const { ApiApiFactory } = require("@/utils/openapi/api") const { ApiApiFactory } = require("@/utils/openapi/api")
const { StandardToasts } = require("@/utils/utils") const { StandardToasts } = require("@/utils/utils")
Vue.use(BootstrapVue) Vue.use(BootstrapVue)
Vue.use(VueCookies)
let MEALPLAN_COOKIE_NAME = "mealplan_settings"
export default { export default {
name: "AutoMealPlanModal", name: "AutoMealPlanModal",
components: {
GenericMultiselect
},
props: { props: {
entry: Object,
entryEditing_inital_servings: Number,
modal_title: String, modal_title: String,
modal_id: { modal_id: {
type: String, type: String,
default: "autoplan-modal", default: "autoplan-modal",
}, },
allow_delete: { current_period: Object
type: Boolean,
default: true,
},
}, },
mixins: [ApiMixin], mixins: [ApiMixin],
components: {
GenericMultiselect,
RecipeCard: () => import("@/components/RecipeCard.vue"),
},
data() { data() {
return { return {
entryEditing: {}, AutoPlan: {
missing_recipe: false, meal_types: [],
missing_meal_type: false, keywords: [[]],
default_plan_share: [], servings: 1,
mealplan_settings: { date: Date.now(),
addshopping: false, startDay: null,
reviewshopping: false, 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 () {}, mounted: function () {},
computed: {
autoMealPlan: function () {
return getUserPreference("mealplan_autoadd_shopping")
},
},
methods: { methods: {
genericSelectChanged: function (obj) {
this.AutoPlan.keywords[obj.var] = obj.val
},
showModal() { showModal() {
if (this.$cookies.isKey(MEALPLAN_COOKIE_NAME)) { this.refreshMealTypes()
this.mealplan_settings = Object.assign({}, this.mealplan_settings, this.$cookies.get(MEALPLAN_COOKIE_NAME))
} 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() let apiClient = new ApiApiFactory()
apiClient.listUserPreferences().then((result) => { apiClient
if (this.entry.id === -1) { .updateMealType(this.AutoPlan.meal_type, meal_type)
this.entryEditing.shared = result.data[0].plan_share .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()
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] = [];
}}
)
},
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`)
}
}, },
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 } })
}
},
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
}
},
},
} }
</script> </script>