393 lines
10 KiB
Vue
393 lines
10 KiB
Vue
<template>
|
|
<Page @loaded="onPageLoad" actionBarHidden="true">
|
|
<GridLayout rows="*, auto" columns="*">
|
|
<ScrollView
|
|
@scroll="!edit && onScroll($event)"
|
|
rowSpan="2"
|
|
scrollBarIndicatorVisible="false"
|
|
>
|
|
<StackLayout>
|
|
<Label class="pageTitle" :text="'planner' | L" />
|
|
<GridLayout
|
|
class="calendar"
|
|
columns="*, *, *, *, *, *, *"
|
|
rows="auto, auto, auto, auto, auto, auto, auto, auto"
|
|
>
|
|
<Button class="ico navBtn" :text="icon.left" @tap="prevMonth" />
|
|
<Label
|
|
class="monthName"
|
|
col="1"
|
|
colSpan="5"
|
|
:text="$options.filters.L(mNames[month]) + ' ' + year"
|
|
/>
|
|
<Button
|
|
class="ico navBtn"
|
|
col="6"
|
|
:text="icon.right"
|
|
@tap="nextMonth"
|
|
/>
|
|
<Label
|
|
class="dayName"
|
|
row="1"
|
|
:col="i"
|
|
v-for="(d, i) in dNames"
|
|
:key="d"
|
|
:text="d | L"
|
|
/>
|
|
<Button
|
|
class="min day"
|
|
:class="{
|
|
tb: 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>
|
|
<StackLayout class="dayPlan">
|
|
<StackLayout
|
|
v-for="(mealType, index) in mealTimesWithRecipes"
|
|
:key="'mealType' + index"
|
|
>
|
|
<GridLayout columns="auto, auto">
|
|
<Label
|
|
class="periodLabel tb"
|
|
:class="mealType"
|
|
:text="mealType | L"
|
|
/>
|
|
<Button
|
|
:visibility="edit ? 'visible' : 'hidden'"
|
|
col="1"
|
|
class="ico"
|
|
:text="icon.plus"
|
|
@tap="addRecipe(mealType)"
|
|
/>
|
|
</GridLayout>
|
|
<GridLayout
|
|
:columns="`*, ${edit ? 'auto' : 0}`"
|
|
v-for="(recipeID, index) in getRecipes[mealType]"
|
|
:key="mealType + index"
|
|
>
|
|
<Button
|
|
class="recipeTitle"
|
|
:text="getRecipeTitle(recipeID)"
|
|
@tap="viewRecipe(recipeID)"
|
|
/>
|
|
<Button
|
|
:visibility="edit ? 'visible' : 'hidden'"
|
|
col="1"
|
|
class="ico x"
|
|
:text="icon.x"
|
|
@tap="removeRecipe(recipeID, mealType)"
|
|
/>
|
|
</GridLayout>
|
|
</StackLayout>
|
|
</StackLayout>
|
|
</StackLayout>
|
|
</ScrollView>
|
|
<GridLayout
|
|
row="1"
|
|
@loaded="onAppBarLoad"
|
|
class="appbar"
|
|
v-show="!showUndo"
|
|
columns="auto, *, auto, auto"
|
|
>
|
|
<Button class="ico" :text="icon.back" @tap="$navigateBack()" />
|
|
<Button
|
|
class="ico"
|
|
:text="icon.tod"
|
|
v-if="!isExactlyToday"
|
|
@tap="goToToday"
|
|
col="2"
|
|
/>
|
|
<Button
|
|
class="ico fab"
|
|
:text="edit ? icon.done : icon.edit"
|
|
@tap="toggleEditMode"
|
|
col="3"
|
|
/>
|
|
</GridLayout>
|
|
<GridLayout
|
|
row="1"
|
|
class="appbar snackBar"
|
|
v-show="showUndo"
|
|
columns="auto, *, auto"
|
|
>
|
|
<Button :text="countdown" class="countdown tb" />
|
|
<Label class="title" col="1" :text="snackMsg | L" />
|
|
<Button class="ico fab" :text="icon.alert" @tap="undoDel" col="3" />
|
|
</GridLayout>
|
|
</GridLayout>
|
|
</Page>
|
|
</template>
|
|
|
|
<script>
|
|
import { ApplicationSettings, Observable } from "@nativescript/core";
|
|
import { mapState, mapActions } from "vuex";
|
|
import ViewRecipe from "./ViewRecipe.vue";
|
|
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue";
|
|
let undoTimer;
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
appTheme: "Light",
|
|
mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
|
|
dNames: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
|
|
year: 2021,
|
|
mNames: [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
],
|
|
month: 0,
|
|
today: null,
|
|
edit: false,
|
|
scrollPos: 1,
|
|
appbar: null,
|
|
countdown: 5,
|
|
snackMsg: null,
|
|
showUndo: false,
|
|
undo: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["icon", "recipes", "mealPlans"]),
|
|
todaysTime() {
|
|
return new Date(this.year, this.month, this.today, 0).getTime();
|
|
},
|
|
getRecipes() {
|
|
if (this.mealPlans.length) {
|
|
return this.mealPlans.reduce((acc, e) => {
|
|
if (e.date == this.todaysTime) {
|
|
acc[e.type] = [...(acc[e.type] || []), e.title];
|
|
}
|
|
return acc;
|
|
}, {});
|
|
} else return 0;
|
|
},
|
|
getCal() {
|
|
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);
|
|
}
|
|
return days;
|
|
},
|
|
isExactlyToday() {
|
|
let d = new Date();
|
|
return (
|
|
this.year == d.getFullYear() &&
|
|
this.month == d.getMonth() &&
|
|
this.today == d.getDate()
|
|
);
|
|
},
|
|
mealTimesWithRecipes() {
|
|
return this.mealTimes.filter(
|
|
(e) => (this.getRecipes[e] && this.getRecipes[e].length) || this.edit
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
"setComponent",
|
|
"addMealPlanAction",
|
|
"deleteMealPlanAction",
|
|
]),
|
|
onPageLoad(args) {
|
|
const page = args.object;
|
|
page.bindingContext = new Observable();
|
|
this.setComponent("MealPlanner");
|
|
if (!this.today || this.today === new Date().getDate()) this.goToToday();
|
|
},
|
|
onAppBarLoad({ object }) {
|
|
this.appbar = object;
|
|
},
|
|
onScroll(args) {
|
|
let scrollUp;
|
|
let y = args.scrollY;
|
|
if (y) {
|
|
scrollUp = y < this.scrollPos;
|
|
this.scrollPos = Math.abs(y);
|
|
let ab = this.appbar.translateY;
|
|
if (!scrollUp && ab == 0) {
|
|
this.animateInOut(
|
|
250,
|
|
false,
|
|
(val) => (this.appbar.translateY = val * 64)
|
|
);
|
|
} else if (scrollUp && ab == 64) {
|
|
this.animateInOut(
|
|
250,
|
|
true,
|
|
(val) => (this.appbar.translateY = val * 64)
|
|
);
|
|
}
|
|
}
|
|
},
|
|
// HELPERS
|
|
showAppBar() {
|
|
this.appbar.translateY = 0;
|
|
},
|
|
getrow(i) {
|
|
return Math.floor(2 + i / 7);
|
|
},
|
|
getDate(index) {
|
|
let date = new Date();
|
|
date.setDate(date.getDate() + index);
|
|
return date.getTime();
|
|
},
|
|
getRecipeTitle(id) {
|
|
let recipe = this.recipes.filter((e) => e.id === id)[0];
|
|
return recipe ? recipe.title : `[ ${this.$options.filters.L("resNF")} ]`;
|
|
},
|
|
|
|
// NAVIGATION HANDLERS
|
|
viewRecipe(recipeID) {
|
|
let recipe = this.recipes.filter((e) => e.id === recipeID)[0];
|
|
if (recipe) {
|
|
this.$navigateTo(ViewRecipe, {
|
|
props: {
|
|
filterTrylater: true,
|
|
recipeID,
|
|
},
|
|
transition: {
|
|
name: "fade",
|
|
duration: 250,
|
|
curve: "easeOut",
|
|
},
|
|
// backstackVisible: false,
|
|
});
|
|
}
|
|
},
|
|
// CALENDAR
|
|
prevMonth() {
|
|
if (this.month == 0) {
|
|
this.year--;
|
|
this.month = 11;
|
|
} else this.month--;
|
|
this.showAppBar();
|
|
},
|
|
nextMonth() {
|
|
if (this.month == 11) {
|
|
this.year++;
|
|
this.month = 0;
|
|
} else this.month++;
|
|
this.showAppBar();
|
|
},
|
|
goToToday() {
|
|
let d = new Date();
|
|
this.year = d.getFullYear();
|
|
this.month = d.getMonth();
|
|
this.today = d.getDate();
|
|
this.showAppBar();
|
|
},
|
|
isToday(date) {
|
|
let d = new Date();
|
|
return (
|
|
this.year == d.getFullYear() &&
|
|
this.month == d.getMonth() &&
|
|
date == d.getDate()
|
|
);
|
|
},
|
|
isActive(date) {
|
|
return this.today == date;
|
|
},
|
|
hasPlans(date) {
|
|
let d = new Date(this.year, this.month, date, 0).getTime();
|
|
return this.mealPlans.filter((e) => e.date == d).length;
|
|
},
|
|
setToday(date) {
|
|
if (date) this.today = date;
|
|
},
|
|
newMealPlan(title, date, type, index) {
|
|
this.addMealPlanAction({
|
|
title,
|
|
date: date ? date : this.todaysTime,
|
|
type,
|
|
index,
|
|
});
|
|
},
|
|
toggleEditMode() {
|
|
this.edit = !this.edit;
|
|
},
|
|
// DATA HANDLERS
|
|
addRecipe(type) {
|
|
let filteredRecipes = this.recipes.filter((e) =>
|
|
this.getRecipes[type] ? !this.getRecipes[type].includes(e.id) : true
|
|
);
|
|
this.$showModal(ActionDialogWithSearch, {
|
|
props: {
|
|
title: "selRec",
|
|
recipes: filteredRecipes,
|
|
},
|
|
}).then((title) => {
|
|
title && this.newMealPlan(title, null, type, null);
|
|
});
|
|
},
|
|
removeRecipe(title, type) {
|
|
let date = this.todaysTime;
|
|
let index = this.mealPlans.findIndex(
|
|
(e) => e.title === title && e.type === type && e.date === date
|
|
);
|
|
let mealPlan = {
|
|
title,
|
|
date,
|
|
type,
|
|
index,
|
|
};
|
|
this.deleteMealPlanAction(mealPlan);
|
|
this.showUndoBar("recRm").then((res) =>
|
|
this.newMealPlan(title, date, type, index)
|
|
);
|
|
},
|
|
showUndoBar(message) {
|
|
return new Promise((resolve, reject) => {
|
|
this.showUndo = true;
|
|
this.snackMsg = message;
|
|
this.countdown = 5;
|
|
let a = 5;
|
|
clearTimeout(undoTimer);
|
|
undoTimer = setInterval(() => {
|
|
if (this.undo) {
|
|
this.showUndo = this.undo = false;
|
|
clearTimeout(undoTimer);
|
|
resolve(true);
|
|
}
|
|
this.countdown = Math.round((a -= 0.1));
|
|
if (this.countdown < 1) {
|
|
this.showUndo = false;
|
|
clearTimeout(undoTimer);
|
|
reject(true);
|
|
}
|
|
}, 100);
|
|
});
|
|
},
|
|
undoDel() {
|
|
this.undo = true;
|
|
},
|
|
},
|
|
created() {
|
|
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
|
|
},
|
|
};
|
|
</script>
|