enrecipes/app/components/MealPlanner.vue

350 lines
9.3 KiB
Vue
Raw Normal View History

2020-11-15 21:13:06 +00:00
<template>
2021-02-28 15:10:26 +00:00
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
2021-03-21 17:02:04 +00:00
<ActionBar flat="true">
2021-02-28 15:10:26 +00:00
<GridLayout rows="*" columns="auto, *, auto, auto">
<MDButton
class="er"
variant="text"
:text="icon.back"
automationText="Back"
@tap="$navigateBack()"
col="0"
/>
2021-03-23 06:16:25 +00:00
<Label class="title tb" :text="'planner' | L" col="1" />
2021-02-28 15:10:26 +00:00
<MDButton
class="er"
variant="text"
:text="icon.tod"
automationText="today"
@tap="goToToday"
col="2"
/>
<MDButton
class="er"
variant="text"
:text="edit ? icon.done : icon.edit"
automationText="edit"
@tap="edit = !edit"
col="3"
/>
2021-01-23 17:20:15 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
</ActionBar>
<ScrollView width="100%" height="100%">
<GridLayout rows="auto, *">
<GridLayout
class="calendar"
width="100%"
row="0"
columns="*, *, *, *, *, *, *"
rows="auto, auto, auto, auto, auto, auto, auto, auto"
>
<MDButton
variant="text"
class="er navBtn"
col="0"
:text="icon.left"
@tap="prevMonth"
/>
<Label
class="monthName"
col="1"
colSpan="5"
:text="$options.filters.L(mNames[month]) + ' ' + year"
/>
<MDButton
variant="text"
class="er navBtn"
col="6"
:text="icon.right"
@tap="nextMonth"
/>
<Label
class="dayName"
row="1"
:col="i"
v-for="(d, i) in dNames"
:key="d"
:text="$options.filters.L(d)"
/>
<Label
@loaded="centerLabel"
2021-03-23 06:16:25 +00:00
class="day tb"
2021-02-28 15:10:26 +00:00
:class="{
today: isToday(d),
activeDay: isActive(d),
hasPlans: hasPlans(d),
}"
:row="getrow(i)"
:col="i % 7"
v-for="(d, i) in getCal"
:key="i"
:text="d ? d : null"
@tap="setToday(d)"
/>
</GridLayout>
2021-03-21 17:02:04 +00:00
<StackLayout row="1" class="dayPlan" margin="16 0 0">
2021-02-28 15:10:26 +00:00
<StackLayout
v-for="(mealType, index) in mealTimes"
:key="'mealType' + index"
class="plansContainer"
:class="mealType"
>
<GridLayout columns="auto, auto" class="header">
<Label
col="0"
@tap="edit = true"
2021-03-23 06:16:25 +00:00
class="periodLabel tb"
2021-02-28 15:10:26 +00:00
:text="mealType | L"
/>
<MDButton
:visibility="edit ? 'visible' : 'hidden'"
col="1"
variant="text"
class="er"
:text="icon.plus"
@tap="addRecipe(mealType)"
/>
2021-01-13 05:02:48 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
<GridLayout
class="recipe"
:paddingTop="index == 0 ? 8 : 0"
:columns="`*, ${edit ? 'auto' : 0}`"
v-for="(recipeID, index) in getRecipes[mealType]"
:key="mealType + index"
>
2021-03-21 17:02:04 +00:00
<!-- elevation="1" -->
2021-02-28 15:10:26 +00:00
<GridLayout
col="0"
columns="*"
class="titleContainer mdr"
@tap="viewRecipe(recipeID)"
>
<Label
verticalAlignment="center"
class="recipeTitle"
:text="getRecipeTitle(recipeID)"
textWrap="true"
/>
</GridLayout>
<MDButton
:visibility="edit ? 'visible' : 'hidden'"
variant="text"
col="1"
class="er x"
:text="icon.x"
@tap="removeRecipe(recipeID, mealType)"
/>
</GridLayout>
</StackLayout>
</StackLayout>
2021-02-28 15:10:26 +00:00
</GridLayout>
</ScrollView>
</Page>
2020-11-15 21:13:06 +00:00
</template>
<script>
import {
ApplicationSettings,
Page,
Observable,
2021-01-23 17:20:15 +00:00
GestureTypes,
2021-02-28 15:10:26 +00:00
} from "@nativescript/core";
import { SnackBar } from "@nativescript-community/ui-material-snackbar";
2021-01-13 05:02:48 +00:00
const snackbar = new SnackBar();
2021-02-28 15:10:26 +00:00
import { mapState, mapActions } from "vuex";
import ViewRecipe from "./ViewRecipe.vue";
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue";
2020-11-15 21:13:06 +00:00
export default {
data() {
return {
appTheme: "Light",
2021-02-28 15:10:26 +00:00
mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
dNames: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
2021-01-23 17:20:15 +00:00
year: 2021,
2021-02-28 15:10:26 +00:00
mNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
2021-01-23 17:20:15 +00:00
],
month: 0,
today: null,
edit: false,
2021-02-28 15:10:26 +00:00
};
2020-11-15 21:13:06 +00:00
},
computed: {
2021-02-28 15:10:26 +00:00
...mapState(["icon", "recipes", "mealPlans"]),
2021-01-23 17:20:15 +00:00
todaysTime() {
2021-02-28 15:10:26 +00:00
return new Date(this.year, this.month, this.today, 0).getTime();
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) {
acc[e.type] = [...(acc[e.type] || []), e.title];
2020-11-23 09:49:58 +00:00
}
2021-02-28 15:10:26 +00:00
return acc;
}, {});
} else return 0;
2020-11-23 09:49:58 +00:00
},
2021-01-23 17:20:15 +00:00
getCal() {
2021-02-28 15:10:26 +00:00
let y = this.year;
let m = this.month;
let t = this.today;
let d = new Date(y, m, t);
let ds = new Date(y, m + 1, 0).getDate();
let fd = new Date(y, m, 1).getDay();
let days = new Array(fd).fill(0);
for (let i = 1; i <= ds; i++) {
days.push(i);
2020-11-23 09:49:58 +00:00
}
2021-01-23 17:20:15 +00:00
return days;
2020-11-23 09:49:58 +00:00
},
2020-11-15 21:13:06 +00:00
},
methods: {
2021-02-28 15:10:26 +00:00
...mapActions([
"setCurrentComponentAction",
"addMealPlanAction",
"deleteMealPlanAction",
]),
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
2021-02-28 15:10:26 +00:00
this.setCurrentComponentAction("MealPlanner");
if (!this.today || this.today === new Date().getDate()) this.goToToday();
2020-11-23 09:49:58 +00:00
},
2021-02-28 15:10:26 +00:00
onPageUnload(args) {
snackbar.dismiss();
2021-01-13 05:02:48 +00:00
},
2020-11-15 21:13:06 +00:00
// HELPERS
2021-02-28 15:10:26 +00:00
getrow(i) {
return Math.floor(2 + 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-02-28 15:10:26 +00:00
getRecipeTitle(id) {
let recipe = this.recipes.filter((e) => e.id === id)[0];
return recipe ? recipe.title : `[ ${this.$options.filters.L("resNF")} ]`;
},
2021-02-28 15:10:26 +00:00
centerLabel(args) {
args.object.android.setGravity(17);
2021-01-23 17:20:15 +00:00
},
// NAVIGATION HANDLERS
2021-02-28 15:10:26 +00:00
viewRecipe(recipeID) {
let recipe = this.recipes.filter((e) => e.id === recipeID)[0];
if (recipe) {
this.$navigateTo(ViewRecipe, {
2020-11-23 09:49:58 +00:00
props: {
filterTrylater: true,
recipeID,
},
2021-02-28 15:10:26 +00:00
});
2020-11-23 09:49:58 +00:00
}
},
2021-01-23 17:20:15 +00:00
// CALENDAR
prevMonth() {
2021-02-28 15:10:26 +00:00
if (this.month == 0) {
this.year--;
this.month = 11;
} else this.month--;
2021-01-23 17:20:15 +00:00
},
nextMonth() {
2021-02-28 15:10:26 +00:00
if (this.month == 11) {
this.year++;
this.month = 0;
} else this.month++;
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();
this.today = d.getDate();
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
isToday(date) {
let d = new Date();
return (
this.year == d.getFullYear() &&
this.month == d.getMonth() &&
date == d.getDate()
);
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
isActive(date) {
return this.today == date;
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
hasPlans(date) {
let d = new Date(this.year, this.month, date, 0).getTime();
return this.mealPlans.filter((e) => e.date == d).length;
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
setToday(date) {
if (date) this.today = date;
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
newMealPlan(title, date, type, index) {
this.addMealPlanAction({
2021-01-23 17:20:15 +00:00
title,
date: date ? date : this.todaysTime,
type,
2021-02-28 15:10:26 +00:00
index,
});
2021-01-23 17:20:15 +00:00
},
// DATA HANDLERS
2021-02-28 15:10:26 +00:00
addRecipe(type) {
let filteredRecipes = this.recipes.filter((e) =>
this.getRecipes[type] ? !this.getRecipes[type].includes(e.id) : true
);
this.$showModal(ActionDialogWithSearch, {
props: {
2021-01-13 05:02:48 +00:00
title: "selRec",
recipes: filteredRecipes,
2021-01-23 17:20:15 +00:00
helpIcon: "cal",
},
2021-02-28 15:10:26 +00:00
}).then((title) => {
title && this.newMealPlan(title, null, type, null);
});
},
2021-02-28 15:10:26 +00:00
removeRecipe(title, type) {
let date = this.todaysTime;
let index = this.mealPlans.findIndex(
(e) => e.title === title && e.type === type && e.date === date
);
2021-01-13 05:02:48 +00:00
let mealPlan = {
2021-01-23 17:20:15 +00:00
title,
date,
type,
2021-02-28 15:10:26 +00:00
index,
};
this.deleteMealPlanAction(mealPlan);
this.undoRemove(`${this.$options.filters.L("recRm")}`).then((res) => {
if (res.command === "action") {
this.newMealPlan(title, date, type, index);
2020-11-23 09:49:58 +00:00
}
2021-02-28 15:10:26 +00:00
});
},
undoRemove(message) {
return snackbar.action({
message,
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
actionTextColor: "#ff5200",
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
actionText: "Undo",
hideDelay: 5000,
});
},
2020-11-15 21:13:06 +00:00
},
created() {
2021-02-28 15:10:26 +00:00
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
2020-11-15 21:13:06 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-11-15 21:13:06 +00:00
</script>