enrecipes/app/components/MealPlanner.vue

791 lines
23 KiB
Vue
Raw Normal View History

2020-11-15 21:13:06 +00:00
<template>
2021-05-31 12:47:45 +00:00
<Page @loaded="pgLoad" actionBarHidden="true">
2021-06-15 11:04:42 +00:00
<GridLayout rows="*, auto, 72" columns="*">
2021-04-01 10:55:35 +00:00
<ScrollView
2021-06-15 11:04:42 +00:00
@scroll="!edit && svScroll($event)"
rowSpan="3"
2021-04-01 10:55:35 +00:00
scrollBarIndicatorVisible="false"
>
2021-06-18 12:52:03 +00:00
<StackLayout rows="auto, auto, auto, *">
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" columns="*, auto, 12">
2021-06-18 12:52:03 +00:00
<Label class="pTitle tw tb a" :text="'planner' | L" />
2021-06-15 11:04:42 +00:00
<Button col="1" class="ico" :text="icon.cog" @tap="navigateTo" />
</RGridLayout>
2021-06-18 12:52:03 +00:00
<GridLayout row="1" padding="0 16" columns="auto, *, auto">
<Button class="ico si" :text="icon.left" @tap="navigate(0)" />
<Button
class="t3"
2021-06-15 11:04:42 +00:00
@touch="mYPicker"
2021-04-01 10:55:35 +00:00
col="1"
2021-06-15 11:04:42 +00:00
:text="formattedDate(0)"
2021-04-01 10:55:35 +00:00
/>
<Button
2021-06-18 12:52:03 +00:00
class="ico si"
2021-06-15 11:04:42 +00:00
col="2"
2021-04-01 10:55:35 +00:00
:text="icon.right"
2021-06-15 11:04:42 +00:00
@tap="navigate(1)"
2021-04-01 10:55:35 +00:00
/>
2021-06-15 11:04:42 +00:00
</GridLayout>
<RGridLayout
2021-06-18 12:52:03 +00:00
row="2"
2021-06-15 11:04:42 +00:00
:rtl="RTL"
class="calendar"
columns="*, *, *, *, *, *, *"
:rows="calRows"
>
2021-04-01 10:55:35 +00:00
<Label
2021-06-18 12:52:03 +00:00
class="sub rtl t5 vc tc"
2021-06-15 11:04:42 +00:00
:class="{ f: RTL }"
2021-04-01 10:55:35 +00:00
:col="i"
2021-04-12 18:09:48 +00:00
v-for="(d, i) in getDayNames"
2021-06-15 11:04:42 +00:00
:key="d + i"
2021-04-01 10:55:35 +00:00
:text="d | L"
/>
<Button
2021-06-15 11:04:42 +00:00
v-for="(cal, i) in getCal"
:key="i"
2021-04-01 10:55:35 +00:00
:row="getrow(i)"
:col="i % 7"
2021-06-15 11:04:42 +00:00
:class="dayClasses(cal)"
:text="cal.ld"
@tap="setDate(cal)"
2021-04-01 10:55:35 +00:00
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-06-18 12:52:03 +00:00
<StackLayout row="3" class="plans">
<CollectionView
@loaded="cvLoad"
for="item in mpItems"
:height="listHeight"
>
<v-template if="item.type == 0">
<RLabel class="date tb t2" :text="item.date" textWrap="true" />
</v-template>
<v-template if="item.type == 1">
<Label
class="type t3"
:class="{ tb: plannerView == 'd' }"
:text="item.mealType | L"
/>
</v-template>
<v-template if="item.type == 2">
2021-06-15 11:04:42 +00:00
<RGridLayout
:rtl="RTL"
2021-06-18 12:52:03 +00:00
class="plan vc"
columns="auto, *, auto"
@touch="!edit && touchRecipe"
@tap="!edit && viewRecipe(item.id)"
2021-06-15 11:04:42 +00:00
>
<Image
class="imgHolder"
verticalAlignment="middle"
2021-06-18 12:52:03 +00:00
v-if="!noImg && item.image"
:src="item.image"
2021-06-15 11:04:42 +00:00
stretch="none"
decodeWidth="48"
decodeHeight="48"
loadMode="async"
/>
<Label
2021-06-18 12:52:03 +00:00
v-else-if="!noImg && !item.image"
2021-06-15 11:04:42 +00:00
verticalAlignment="middle"
class="ico imgHolder"
@loaded="centerLabel($event, 17)"
width="48"
height="48"
2021-06-18 12:52:03 +00:00
fontSize="23"
2021-06-15 11:04:42 +00:00
:text="icon.img"
/>
2021-06-18 12:52:03 +00:00
<GridLayout rows="auto, auto" class="info vc" col="1">
<RLabel :text="item.title" />
2021-06-15 11:04:42 +00:00
<RLabel
2021-06-18 12:52:03 +00:00
row="1"
:hidden="!item.size"
class="t6"
:text="item.size"
2021-06-15 11:04:42 +00:00
/>
2021-06-18 12:52:03 +00:00
</GridLayout>
<Button
:hidden="!edit"
col="2"
class="ico si"
:text="icon.x"
@tap="removeRecipe(item.id)"
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-06-18 12:52:03 +00:00
</v-template>
<v-template if="item.type == 3">
<RGridLayout :rtl="RTL" class="plan vc" columns="*, auto">
<Label
class="info lh4 tw"
:class="{ note: !noImg }"
@loaded="centerLabel($event, 16)"
:hidden="!item.note"
:text="item.note"
/>
<Button
:hidden="!edit"
col="2"
class="ico si"
:text="icon.x"
@tap="removeRecipe(item.id)"
/>
</RGridLayout>
</v-template>
<v-template>
<StackLayout class="listSpace"> </StackLayout>
</v-template>
</CollectionView>
2021-02-28 15:10:26 +00:00
</StackLayout>
</StackLayout>
2021-04-01 10:55:35 +00:00
</ScrollView>
2021-06-15 11:04:42 +00:00
<GridLayout rowSpan="2" rows="*, auto" v-if="!mealPlans.length">
2021-06-18 12:52:03 +00:00
<StackLayout row="1" class="empty">
<RLabel class="tb t3 tw" :text="'ehwmp' | L" />
<RLabel class="tw" :text="'plsCrt' | L" />
2021-06-15 11:04:42 +00:00
</StackLayout>
</GridLayout>
<RGridLayout
:rtl="RTL"
row="2"
2021-05-31 12:47:45 +00:00
@loaded="abLoad"
2021-04-01 10:55:35 +00:00
class="appbar"
2021-04-12 18:09:48 +00:00
:hidden="showUndo"
2021-06-15 11:04:42 +00:00
columns="auto, *, auto, auto, auto"
@swipe="stSwipe"
2021-04-01 10:55:35 +00:00
>
2021-06-15 11:04:42 +00:00
<Button class="ico rtl" :text="icon.back" @tap="navigateBack" />
2021-04-01 10:55:35 +00:00
<Button
class="ico"
:text="icon.tod"
2021-04-12 18:09:48 +00:00
:hidden="isExactlyToday"
2021-04-01 10:55:35 +00:00
@tap="goToToday"
col="2"
/>
<Button
2021-06-15 11:04:42 +00:00
:hidden="!hasRecipes"
class="ico"
2021-04-01 10:55:35 +00:00
:text="edit ? icon.done : icon.edit"
@tap="toggleEditMode"
col="3"
/>
2021-06-15 11:04:42 +00:00
<!-- <Button
class="ico"
:text="hasRecipes ? (edit ? icon.done : icon.edit) : icon.madd"
@tap="hasRecipes ? toggleEditMode() : randomMealPlan()"
col="3"
/> -->
<Button class="ico fab" :text="icon.plus" @tap="addMealPlan" col="4" />
</RGridLayout>
2021-05-25 14:32:53 +00:00
<SnackBar
2021-06-15 11:04:42 +00:00
row="2"
2021-04-12 18:09:48 +00:00
:hidden="!showUndo"
2021-05-25 14:32:53 +00:00
:count="countdown"
:msg="snackMsg"
:undo="undoDel"
2021-05-31 12:47:45 +00:00
:action="hideBar"
:onload="sbLoad"
2021-05-25 14:32:53 +00:00
/>
2021-06-18 12:52:03 +00:00
<Label
rowSpan="3"
class="edge hal"
:class="{ 'f r': RTL }"
@swipe="swipeBack($event, navigateBack)"
/>
<Label
rowSpan="3"
class="edge har rtl"
:class="{ r: RTL, f: !RTL }"
@swipe="swipeBack($event, navigateBack)"
/>
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
</Page>
2020-11-15 21:13:06 +00:00
</template>
2021-06-15 11:04:42 +00:00
<script lang="ts">
2021-06-18 12:52:03 +00:00
import { Frame, Observable, Screen } from "@nativescript/core";
2021-02-28 15:10:26 +00:00
import { mapState, mapActions } from "vuex";
2021-06-15 11:04:42 +00:00
import ViewRecipe from "./ViewRecipe.vue";
import EditRecipe from "./EditRecipe.vue";
import EnRecipes from "./EnRecipes.vue";
import MPSettings from "./settings/MPSettings.vue";
import Action from "./modals/Action.vue";
import ActionWithSearch from "./modals/ActionWithSearch.vue";
import Prompt from "./modals/Prompt.vue";
import DMYPicker from "./modals/DMYPicker.vue";
import SnackBar from "./sub/SnackBar.vue";
import * as utils from "~/shared/utils";
const Intl = require("nativescript-intl");
import { localize } from "@nativescript/localize";
2021-05-31 12:47:45 +00:00
let barTimer;
2021-04-01 10:55:35 +00:00
2020-11-15 21:13:06 +00:00
export default {
2021-05-25 14:32:53 +00:00
components: {
SnackBar,
},
2020-11-15 21:13:06 +00:00
data() {
return {
2021-06-15 11:04:42 +00:00
mealTypes: ["breakfast", "lunch", "dinner", "snacks"],
2021-06-18 12:52:03 +00:00
year: 0,
2021-01-23 17:20:15 +00:00
month: 0,
2021-06-18 12:52:03 +00:00
date: 0,
2021-06-15 11:04:42 +00:00
edit: 0,
2021-04-01 10:55:35 +00:00
scrollPos: 1,
2021-06-18 12:52:03 +00:00
appbar: 0,
snackbar: 0,
listView: 0,
2021-04-01 10:55:35 +00:00
countdown: 5,
2021-06-18 12:52:03 +00:00
snackMsg: 0,
2021-06-15 11:04:42 +00:00
showUndo: 0,
undo: 0,
2021-05-31 14:59:15 +00:00
temp: 0,
2021-02-28 15:10:26 +00:00
};
2020-11-15 21:13:06 +00:00
},
computed: {
2021-06-15 11:04:42 +00:00
...mapState([
"icon",
"recipes",
"layout",
"mealPlans",
"mondayFirst",
"RTL",
"plannerView",
]),
2021-01-23 17:20:15 +00:00
todaysTime() {
2021-05-31 12:47:45 +00:00
return new Date(this.year, this.month, this.date, 0).getTime();
2020-11-23 09:49:58 +00:00
},
2021-06-18 12:52:03 +00:00
listHeight() {
return Math.floor(Screen.mainScreen.heightDIPs);
},
2020-11-23 09:49:58 +00:00
getRecipes() {
2021-02-28 15:10:26 +00:00
if (this.mealPlans.length) {
return this.mealPlans.reduce((acc, e) => {
if (e.date == this.todaysTime) {
2021-06-15 11:04:42 +00:00
acc[e.mealType] = [...(acc[e.mealType] || []), e];
2020-11-23 09:49:58 +00:00
}
2021-02-28 15:10:26 +00:00
return acc;
}, {});
2021-06-15 11:04:42 +00:00
} else return {};
},
calRows() {
let h = (Screen.mainScreen.widthDIPs - 32) / 8;
2021-06-18 12:52:03 +00:00
if (h < 48) h = 48;
2021-06-15 11:04:42 +00:00
let pv = this.plannerView;
return pv != "d" ? `${h}, `.repeat(pv == "wk" ? 1 : 6) + h : 0;
2020-11-23 09:49:58 +00:00
},
2021-04-12 18:09:48 +00:00
getDayNames() {
2021-06-15 11:04:42 +00:00
let dNames =
this.plannerView != "d" &&
this.getCal.slice(0, 7).map((d) => {
let date = new Date(d.y, d.m, d.d);
return new Intl.DateTimeFormat(null, {
weekday: "short",
}).format(date);
});
2021-05-22 08:56:31 +00:00
return dNames;
2021-04-12 18:09:48 +00:00
},
2021-01-23 17:20:15 +00:00
getCal() {
2021-06-15 11:04:42 +00:00
const getDays = (s, e) => {
let a = [];
for (
let d = new Date(s);
d <= new Date(e);
d.setDate(d.getDate() + 1)
) {
a.push({
d: d.getDate(),
ld: this.getLocaleN(d.getDate()),
m: d.getMonth(),
y: d.getFullYear(),
});
}
return a;
};
let pv = this.plannerView;
let date = new Date(
this.year,
this.month,
pv == "mnth" ? 1 : this.date - this.mondayFirst
);
return pv != "d"
? getDays(
date.setDate(date.getDate() - date.getDay() + this.mondayFirst),
date.setDate(date.getDate() + (pv == "mnth" ? 41 : 6))
)
2021-06-18 12:52:03 +00:00
: [];
2020-11-23 09:49:58 +00:00
},
2021-04-01 10:55:35 +00:00
isExactlyToday() {
let d = new Date();
return (
this.year == d.getFullYear() &&
this.month == d.getMonth() &&
2021-05-31 12:47:45 +00:00
this.date == d.getDate()
2021-04-01 10:55:35 +00:00
);
},
2021-06-15 11:04:42 +00:00
hasRecipes() {
2021-06-18 12:52:03 +00:00
return this.mpItems.length > 1;
2021-06-15 11:04:42 +00:00
},
noImg() {
return /simple|minimal/.test(this.layout);
},
noAttr() {
return /minimal/.test(this.layout);
2021-04-01 10:55:35 +00:00
},
2021-06-18 12:52:03 +00:00
mpItems() {
let pv = this.plannerView;
let days =
pv == "wk"
? this.getCal.slice(0, 7)
: [
{
d: this.date,
m: this.month,
y: this.year,
},
];
let meals = {};
for (let i = 0; i < (pv == "wk" ? 7 : 1); i++)
meals[i] = this.getRecipesOn(days[i]);
let plans = [];
for (const k1 in meals) {
if (Object.keys(meals[k1]).length && pv != "d")
plans.push({
type: 0,
date: this.formattedDate(1, days[k1]),
d: days[k1].d,
});
if (Object.keys(meals[k1]).length) {
this.mealTypes.forEach((e) => {
if (meals[k1][e]) {
plans.push({
type: 1,
mealType: e,
});
meals[k1][e].forEach(({ id, recipeID, note }) => {
if (recipeID) {
plans.push({
type: 2,
id,
image: this.getRecipeImage(recipeID),
title: this.getRecipeTitle(recipeID),
size: this.getYield(id),
});
} else {
plans.push({
type: 3,
id,
note,
});
}
});
}
});
}
}
plans.push({});
return plans;
},
2020-11-15 21:13:06 +00:00
},
methods: {
2021-06-15 11:04:42 +00:00
...mapActions(["addMealPlanAction", "deleteMealPlanAction"]),
2021-05-31 12:47:45 +00:00
pgLoad({ object }) {
2021-05-25 14:32:53 +00:00
object.bindingContext = new Observable();
2021-06-15 11:04:42 +00:00
this.showBar();
2020-11-23 09:49:58 +00:00
},
2021-05-31 12:47:45 +00:00
abLoad({ object }) {
2021-04-01 10:55:35 +00:00
this.appbar = object;
},
2021-05-31 12:47:45 +00:00
sbLoad({ object }) {
this.snackbar = object;
},
2021-06-18 12:52:03 +00:00
cvLoad({ object }) {
this.listView = object;
},
2021-06-15 11:04:42 +00:00
svScroll(args) {
2021-04-01 10:55:35 +00:00
let scrollUp;
let y = args.scrollY;
if (y) {
scrollUp = y < this.scrollPos;
this.scrollPos = Math.abs(y);
let ab = this.appbar.translateY;
2021-06-18 12:52:03 +00:00
if (!scrollUp && ab == 0) this.animateBar(this.appbar, 0);
else if (scrollUp && ab == 64) this.animateBar(this.appbar, 1);
2021-04-01 10:55:35 +00:00
}
2021-01-13 05:02:48 +00:00
},
2021-06-15 11:04:42 +00:00
// Helpers
centerLabel({ object }, n) {
object.android.setGravity(n);
},
showBar() {
2021-06-18 12:52:03 +00:00
this.animateBar(this.appbar, 1);
2021-04-01 10:55:35 +00:00
},
2021-02-28 15:10:26 +00:00
getrow(i) {
2021-06-15 11:04:42 +00:00
return Math.floor(1 + i / 7);
2020-11-15 21:13:06 +00:00
},
2021-02-28 15:10:26 +00:00
getDate(index) {
let date = new Date();
date.setDate(date.getDate() + index);
return date.getTime();
},
2021-06-15 11:04:42 +00:00
getRecipeImage(id) {
let r = this.recipes.filter((e) => e.id === id)[0];
return r && r.image;
},
2021-02-28 15:10:26 +00:00
getRecipeTitle(id) {
2021-06-15 11:04:42 +00:00
let r = this.recipes.filter((e) => e.id === id)[0];
2021-06-18 12:52:03 +00:00
return r ? r.title : `[ ${this.$options.filters.L("resNF")} ]`;
2021-06-15 11:04:42 +00:00
},
getYield(id) {
let mp = this.mealPlans.filter((e) => e.id == id)[0];
let r = this.recipes.filter((e) => e.id === mp.recipeID)[0];
2021-06-18 12:52:03 +00:00
return r ? `${this.getLocaleN(mp.quantity)} ${localize(r.yieldUnit)}` : 0;
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// NavigationHandlers
viewRecipe(id) {
let mp = this.mealPlans.filter((e) => e.id == id)[0];
let r = this.recipes.filter((e) => e.id === mp.recipeID)[0];
if (r) {
2021-02-28 15:10:26 +00:00
this.$navigateTo(ViewRecipe, {
2020-11-23 09:49:58 +00:00
props: {
2021-06-15 11:04:42 +00:00
filterTrylater: 1,
recipeID: r.id,
yieldQuantity: mp.quantity,
2020-11-23 09:49:58 +00:00
},
2021-02-28 15:10:26 +00:00
});
2020-11-23 09:49:58 +00:00
}
},
2021-06-15 11:04:42 +00:00
navigateTo() {
this.$navigateTo(MPSettings, {
transition: {
name: this.RTL ? "slideRight" : "slide",
duration: 200,
curve: "easeOut",
},
});
},
navigateBack() {
Frame.topmost().backStack.length
? this.$navigateBack()
: this.$navigateTo(EnRecipes, {
clearHistory: true,
});
},
2021-05-31 12:47:45 +00:00
2021-06-15 11:04:42 +00:00
// Calendar
navigate(dir) {
if (this.RTL) dir = !dir;
let pv = this.plannerView;
let date = new Date(this.year, this.month, this.date);
let sd =
pv == "mnth"
? new Date(this.year, this.month + (dir ? 1 : 0), 0).getDate()
: pv == "wk"
? 7
: 1;
date.setDate(date.getDate() + (dir ? sd : -sd));
this.date = date.getDate();
this.month = date.getMonth();
this.year = date.getFullYear();
this.showBar();
2021-01-23 17:20:15 +00:00
},
goToToday() {
2021-02-28 15:10:26 +00:00
let d = new Date();
this.year = d.getFullYear();
this.month = d.getMonth();
2021-05-31 12:47:45 +00:00
this.date = d.getDate();
2021-01-23 17:20:15 +00:00
},
2021-06-15 11:04:42 +00:00
dayClasses({ d, m }) {
2021-06-18 12:52:03 +00:00
let classes = "sst ";
2021-06-15 11:04:42 +00:00
let dt1 = new Date();
let dt2 = new Date(this.year, m, d, 0).getTime();
if (
this.year == dt1.getFullYear() &&
this.month == dt1.getMonth() &&
m == dt1.getMonth() &&
d == dt1.getDate()
)
classes += "tb ";
2021-06-18 12:52:03 +00:00
classes += this.date == d && this.month == m ? "select " : "fb ";
2021-06-15 11:04:42 +00:00
if (!!this.mealPlans.filter((e) => e.date == dt2).length)
classes += "accent ";
if (this.month != m) classes += "sub";
return classes;
},
setDate({ d, m, y }) {
this.year = y;
this.month = m;
this.date = d;
this.showBar();
2021-01-23 17:20:15 +00:00
},
2021-04-01 10:55:35 +00:00
toggleEditMode() {
this.edit = !this.edit;
2021-06-18 12:52:03 +00:00
this.listView.refresh();
2021-04-01 10:55:35 +00:00
},
2021-05-31 12:47:45 +00:00
openMonthYearPicker() {
2021-06-18 12:52:03 +00:00
let monthNames = [...Array(12).keys()].map((m) =>
new Intl.DateTimeFormat("en-IN", {
month: "short",
}).format(new Date(2021, m, 1, 0))
);
2021-06-15 11:04:42 +00:00
this.$showModal(DMYPicker, {
2021-05-31 12:47:45 +00:00
props: {
title: "gtD",
2021-06-18 12:52:03 +00:00
monthNames,
2021-06-15 11:04:42 +00:00
currentD: this.date,
2021-05-31 12:47:45 +00:00
currentM: this.month,
currentY: this.year,
},
}).then((res) => {
if (res) {
this.month = res.month;
this.year = res.year;
2021-06-15 11:04:42 +00:00
this.date = res.date;
2021-05-31 12:47:45 +00:00
}
});
},
2021-06-15 11:04:42 +00:00
stSwipe({ direction }) {
let date = new Date(this.year, this.month, this.date);
if (direction == 1) date.setDate(date.getDate() - 1);
else if (direction == 2) date.setDate(date.getDate() + 1);
this.date = date.getDate();
this.month = date.getMonth();
this.year = date.getFullYear();
},
randomMealPlan() {},
2021-05-31 12:47:45 +00:00
2021-06-15 11:04:42 +00:00
// DataHandlers
newMealPlan({ plan, index, inDB }) {
2021-05-31 14:59:15 +00:00
this.addMealPlanAction({
2021-06-15 11:04:42 +00:00
plan,
2021-05-31 14:59:15 +00:00
index,
inDB,
});
},
2021-06-15 11:04:42 +00:00
addMealPlan() {
this.$showModal(Action, {
props: {
2021-06-15 11:04:42 +00:00
title: "add",
list: ["rec", "no"],
},
2021-06-15 11:04:42 +00:00
}).then((type) => {
if (type) {
this.$showModal(Action, {
props: {
title: "selMT",
list: ["breakfast", "lunch", "dinner", "snacks"],
},
}).then((mealType) => {
if (mealType) {
if (type == "rec") {
let recipes = this.recipes.filter((e) =>
this.getRecipes[mealType]
? this.getRecipes[mealType].every((f) => f.recipeID != e.id)
: 1
);
this.$showModal(ActionWithSearch, {
props: {
title: "selRec",
recipes,
action: "aNBtn",
},
}).then((res) => {
if (res == "aNBtn") {
this.$navigateTo(EditRecipe, {
animated: false,
});
} else if (res) {
let r = this.recipes.filter((e) => e.id == res)[0];
this.$showModal(Prompt, {
props: {
title: `${localize("req", localize(r.yieldUnit))}`,
placeholder: Math.abs(parseFloat(r.yieldQuantity)),
action: "SET",
},
}).then((quantity) => {
if (quantity) {
let plan = {
id: utils.getRandomID(),
date: this.todaysTime,
mealType,
recipeID: res,
quantity,
note: null,
};
this.newMealPlan({
plan,
index: null,
inDB: 1,
});
}
});
}
});
} else if (type == "no") {
this.$showModal(Prompt, {
props: {
title: "no",
type: "view",
action: "ADD",
},
}).then((note) => {
if (note) {
let plan = {
id: utils.getRandomID(),
date: this.todaysTime,
mealType,
recipeID: null,
quantity: null,
note,
};
this.newMealPlan({
plan,
index: null,
inDB: 1,
});
}
});
}
}
});
}
});
},
2021-05-31 14:59:15 +00:00
deleteTempFromDB() {
if (this.temp) {
2021-06-15 11:04:42 +00:00
let { plan, index } = this.temp;
this.deleteMealPlanAction({ id: plan.id, index, inDB: 1 });
2021-05-31 14:59:15 +00:00
this.temp = 0;
}
},
2021-06-15 11:04:42 +00:00
removeRecipe(id) {
2021-05-31 14:59:15 +00:00
this.deleteTempFromDB();
2021-06-15 11:04:42 +00:00
let index = this.mealPlans.findIndex((e) => e.id == id);
let plan = this.mealPlans.filter((e) => e.id == id)[0];
this.temp = { plan, index };
this.deleteMealPlanAction({ id, index });
this.showUndoBar(plan.note ? "rmN" : "recRm")
.then(() => this.newMealPlan({ plan, index }))
2021-05-31 14:59:15 +00:00
.catch(() => {
2021-06-15 11:04:42 +00:00
this.deleteMealPlanAction({ id, index, inDB: 1 });
2021-05-31 14:59:15 +00:00
});
2021-02-28 15:10:26 +00:00
},
2021-04-01 10:55:35 +00:00
showUndoBar(message) {
return new Promise((resolve, reject) => {
2021-05-31 12:47:45 +00:00
this.animateBar(this.appbar, 0).then(() => {
2021-06-15 11:04:42 +00:00
this.showUndo = 1;
2021-05-31 12:47:45 +00:00
this.snackMsg = message;
this.countdown = 5;
2021-06-18 12:52:03 +00:00
this.animateBar(this.snackbar, 1, 1).then(() => {
2021-05-31 12:47:45 +00:00
let a = 5;
2021-05-31 14:59:15 +00:00
clearInterval(barTimer);
2021-05-31 12:47:45 +00:00
barTimer = setInterval(() => {
if (this.undo) {
this.hideBar();
2021-06-15 11:04:42 +00:00
resolve(1);
2021-05-31 12:47:45 +00:00
}
this.countdown = Math.round((a -= 0.1));
if (this.countdown < 1) {
this.hideBar();
2021-06-15 11:04:42 +00:00
reject(1);
2021-05-31 12:47:45 +00:00
}
}, 100);
2021-05-22 08:56:31 +00:00
});
});
2021-05-31 12:47:45 +00:00
});
},
hideBar() {
clearInterval(barTimer);
2021-06-15 11:04:42 +00:00
this.deleteTempFromDB();
2021-05-31 12:47:45 +00:00
this.animateBar(this.snackbar, 0).then(() => {
2021-06-15 11:04:42 +00:00
this.showUndo = this.undo = 0;
2021-05-31 12:47:45 +00:00
this.animateBar(this.appbar, 1);
});
2021-05-22 08:56:31 +00:00
},
2021-04-01 10:55:35 +00:00
undoDel() {
2021-06-15 11:04:42 +00:00
this.undo = 1;
2021-04-01 10:55:35 +00:00
},
2021-05-31 12:47:45 +00:00
2021-06-18 12:52:03 +00:00
// ListHandlers
getRecipesOn(d) {
let date = new Date(d.y, d.m, d.d, 0, 0, 0);
if (this.mealPlans.length) {
return this.mealPlans.reduce((acc, e) => {
if (e.date == date.getTime()) {
acc[e.mealType] = [...(acc[e.mealType] || []), e];
}
return acc;
}, {});
} else return {};
},
2021-06-15 11:04:42 +00:00
// Helpers
2021-06-18 12:52:03 +00:00
formattedDate(v, fd) {
if (fd) fd = new Date(fd.y, fd.m, fd.d, 0, 0, 0);
let dt = new Date(this.year, this.month, this.date, 0, 0, 0);
2021-06-15 11:04:42 +00:00
let today = new Date();
let myToday = new Date(
today.getFullYear(),
today.getMonth(),
today.getDate(),
0,
0,
0
);
let tdy = myToday.getTime();
let ystr = myToday.setDate(today.getDate() - 1);
let tmrw = myToday.setDate(today.getDate() + 1);
let options: {
year?: string;
month?: string;
weekday?: string;
day?: string;
} = {};
if (v) {
options.weekday = "long";
options.day = "numeric";
options.month = "long";
} else {
options.year = "numeric";
options.month = "long";
}
if (this.plannerView == "d") {
options.weekday = "long";
options.day = "numeric";
options.month = "short";
}
2021-06-18 12:52:03 +00:00
let date = new Intl.DateTimeFormat(null, options).format(fd || dt);
2021-06-15 11:04:42 +00:00
let val;
2021-06-18 12:52:03 +00:00
switch ((fd || dt).getTime()) {
2021-06-15 11:04:42 +00:00
case ystr:
val = "ystr";
break;
case tdy:
val = "tdy";
break;
case tmrw:
val = "tmrw";
break;
}
return v
2021-06-18 12:52:03 +00:00
? [ystr, tdy, tmrw].some((e) => e == (fd || dt).getTime())
2021-06-15 11:04:42 +00:00
? localize(val)
: date
: date;
},
mYPicker({ object, action }) {
2021-06-18 12:52:03 +00:00
this.touchFade(object, action);
2021-05-31 12:47:45 +00:00
if (action == "up") this.openMonthYearPicker();
},
2021-06-15 11:04:42 +00:00
touchRecipe({ object, action }) {
2021-06-18 12:52:03 +00:00
this.touchFade(object, action);
2021-06-15 11:04:42 +00:00
},
2020-11-15 21:13:06 +00:00
},
2021-06-18 12:52:03 +00:00
created() {
// if (!this.date || this.date === new Date().getDate()) this.goToToday();
this.goToToday();
},
2021-02-28 15:10:26 +00:00
};
2020-11-15 21:13:06 +00:00
</script>