enrecipes/app/components/App.vue

496 lines
15 KiB
Vue
Raw Normal View History

2021-01-23 17:20:15 +00:00
<template>
2021-02-28 15:10:26 +00:00
<Page
@loaded="onPageLoad"
actionBarHidden="true"
:androidStatusBarBackground="appTheme == 'Light' ? '#f0f0f0' : '#1A1A1A'"
>
<Drawer
@loaded="drawerLoad"
:gestureEnabled="gestures"
leftSwipeDistance="128"
>
<GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd">
<StackLayout row="0">
<GridLayout
rows="48"
columns="auto, *, auto"
v-for="(item, index) in topmenu"
:key="index"
2021-03-23 06:16:25 +00:00
class="sd-item mdr"
2021-02-28 15:10:26 +00:00
:class="{
selected: currentComponent === item.component,
}"
@tap="navigateTo(item.component, item.component, false)"
>
<Label col="0" class="er" :text="icon[item.icon]" />
<Label col="1" :text="`${item.title}` | L" />
<Label
class="recipeCount"
v-if="getRecipeCount(item.title)"
:text="getRecipeCount(item.title)"
col="2"
/>
</GridLayout>
<GridLayout
2021-03-23 06:16:25 +00:00
class="sd-group-header"
2021-02-28 15:10:26 +00:00
rows="auto"
columns="*, auto"
v-if="cuisinesWithRecipes.length"
>
<Label
class="filterPath"
verticalAlignment="center"
col="0"
:text="getCurrentPath | L"
textWrap="true"
/>
<MDButton
:visibility="selectedCuisine ? 'visible' : 'hidden'"
variant="text"
@tap="previousRecipeFilter"
class="er"
col="2"
:text="icon.back"
/>
</GridLayout>
<ScrollView height="100%">
<StackLayout>
<GridLayout
v-for="(item, index) in getRecipeList"
:key="index"
2021-03-23 06:16:25 +00:00
class="sd-item mdr"
2021-02-28 15:10:26 +00:00
:class="{
selected: selectedTag == item,
}"
columns="auto, *, auto"
@tap="setFilter && setRecipeFilter(item)"
>
<Label col="0" class="er" :text="icon[selectedFilterType]" />
<Label col="1" :text="`${item}` | L" />
<Label
class="recipeCount"
:text="getRecipeCount(item)"
col="2"
/>
</GridLayout>
<GridLayout
v-if="selectedFilterType == 'tag' && !tagsWithRecipes.length"
columns="*"
rows="*"
>
<Label class="noTags" :text="'noTs' | L" textWrap="true" />
</GridLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout row="1">
<GridLayout
rows="48"
columns="auto, *"
2021-03-23 06:16:25 +00:00
class="sd-item mdr"
marginTop="8"
2021-02-28 15:10:26 +00:00
:class="{
selected: currentComponent == 'MealPlanner',
}"
@tap="navigateTo(MealPlanner, 'MealPlanner', true)"
>
<Label col="0" class="er" :text="icon.cal" />
<Label col="2" :text="'planner' | L" />
</GridLayout>
2021-01-23 17:20:15 +00:00
2021-02-28 15:10:26 +00:00
<!-- <GridLayout
rows="48"
columns="auto, *"
2021-03-23 06:16:25 +00:00
class="sd-item tb mdr"
2021-02-28 15:10:26 +00:00
:class="{
selected: currentComponent == 'GroceryList',
}"
@tap="navigateTo(GroceryList, 'GroceryList', true)"
>
<Label col="0" class="er" :text="icon.bag" />
<Label col="2" :text="'grocery' | L" />
</GridLayout>
<GridLayout
rows="48"
columns="auto, *"
2021-03-23 06:16:25 +00:00
class="sd-item tb mdr"
2021-02-28 15:10:26 +00:00
:class="{
selected: currentComponent == 'GroceryList',
}"
@tap="navigateTo(GroceryList, 'GroceryList', true)"
>
<Label col="0" class="er" :text="icon.price" />
<Label col="2" :text="'Price List' | L" />
</GridLayout> -->
<GridLayout
2021-03-23 06:16:25 +00:00
class="sd-item mdr"
2021-02-28 15:10:26 +00:00
:class="{
selected: currentComponent == 'Settings',
}"
rows="48"
columns="auto, *"
@tap="navigateTo(Settings, 'Settings', true)"
>
<Label class="er" col="0" :text="icon.cog" />
<Label col="2" :text="'Settings' | L" />
</GridLayout>
</StackLayout>
</GridLayout>
<Frame ~mainContent id="main-frame">
<EnRecipes
ref="enrecipes"
:filterFavourites="filterFavourites"
:filterTrylater="filterTrylater"
:selectedCuisine="selectedCuisine"
:selectedCategory="selectedCategory"
:selectedTag="selectedTag"
:closeDrawer="closeDrawer"
:hijackGlobalBackEvent="hijackGlobalBackEvent"
:releaseGlobalBackEvent="releaseGlobalBackEvent"
@backToHome="backToHome"
:showDrawer="showDrawer"
@selectModeOn="selectModeOn"
/>
</Frame>
</Drawer>
</Page>
2020-09-15 11:10:16 +00:00
</template>
<script>
2020-10-22 18:36:50 +00:00
import {
ApplicationSettings,
AndroidApplication,
2020-11-06 09:07:41 +00:00
Application,
2021-02-28 15:10:26 +00:00
} from "@nativescript/core";
import Theme from "@nativescript/theme";
import { localize } from "@nativescript/localize";
import { mapActions, mapState } from "vuex";
import EnRecipes from "./EnRecipes";
import ViewRecipe from "./ViewRecipe";
import MealPlanner from "./MealPlanner";
import GroceryList from "./GroceryList";
import Settings from "./Settings";
2021-01-13 05:02:48 +00:00
let filterTimer;
2020-09-15 11:10:16 +00:00
export default {
data() {
return {
2020-12-29 10:35:19 +00:00
selectedCuisine: null,
2020-09-15 11:10:16 +00:00
selectedCategory: null,
2020-12-29 10:35:19 +00:00
selectedTag: null,
2021-02-28 15:10:26 +00:00
selectedFilterType: "cuisine",
filterFavourites: false,
filterTrylater: false,
2020-11-23 09:49:58 +00:00
MealPlanner: MealPlanner,
2021-01-13 05:02:48 +00:00
GroceryList: GroceryList,
Settings: Settings,
2021-02-28 15:10:26 +00:00
topmenu: [
{
title: "EnRecipes",
component: "EnRecipes",
icon: "home",
},
{
title: "trylater",
component: "Try Later",
icon: "try",
},
{
title: "favourites",
component: "Favourites",
icon: "fav",
},
],
2020-11-10 18:28:48 +00:00
appTheme: "Light",
2021-01-13 05:02:48 +00:00
setFilter: true,
2021-01-23 17:20:15 +00:00
gestures: true,
drawer: null,
2021-02-28 15:10:26 +00:00
};
2020-09-15 11:10:16 +00:00
},
2020-11-23 09:49:58 +00:00
components: {
EnRecipes,
2021-01-23 17:20:15 +00:00
ViewRecipe,
2020-11-23 09:49:58 +00:00
MealPlanner,
2021-01-13 05:02:48 +00:00
GroceryList,
2021-02-28 15:10:26 +00:00
Settings,
2020-11-23 09:49:58 +00:00
},
2020-09-15 11:10:16 +00:00
computed: {
2021-02-28 15:10:26 +00:00
...mapState([
"icon",
"recipes",
"cuisines",
"categories",
"yieldUnits",
"mealPlans",
"currentComponent",
]),
2020-12-29 10:35:19 +00:00
getCurrentPath() {
2021-03-21 17:02:04 +00:00
let path = null;
if (this.selectedCuisine) path = localize(this.selectedCuisine);
2021-02-28 15:10:26 +00:00
else path = "cuis";
2021-03-21 17:02:04 +00:00
if (this.selectedCategory)
path += " > " + localize(this.selectedCategory);
if (this.selectedTag) path += " > " + localize(this.selectedTag);
2020-12-29 10:35:19 +00:00
return path;
},
getRecipeList() {
2021-02-28 15:10:26 +00:00
switch (this.selectedFilterType) {
case "cuisine":
return this.cuisinesWithRecipes;
2020-12-29 10:35:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "category":
return this.categoriesWithRecipes;
2020-12-29 10:35:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "tag":
return this.tagsWithRecipes;
2020-12-29 10:35:19 +00:00
break;
}
},
cuisinesWithRecipes() {
2021-02-28 15:10:26 +00:00
let arr = this.recipes.map((e) => e.cuisine).sort();
return arr.length ? ["allCuis", ...new Set(arr)] : [];
2020-12-29 10:35:19 +00:00
},
categoriesWithRecipes() {
2021-02-28 15:10:26 +00:00
let arr = this.recipes
.map(
(e) =>
(this.selectedCuisine === "allCuis" ||
e.cuisine === this.selectedCuisine) &&
e.category
)
.filter((e) => e)
.sort();
return arr.length ? ["allCats", ...new Set(arr)] : [];
2020-12-29 10:35:19 +00:00
},
tagsWithRecipes() {
2021-02-28 15:10:26 +00:00
let arr = this.recipes
.map((e) => {
if (
this.selectedCuisine === "allCuis" &&
this.selectedCategory === "allCats" &&
e.tags.length
)
return e.tags;
else if (
this.selectedCuisine === "allCuis" &&
e.category === this.selectedCategory &&
e.tags.length
)
return e.tags;
else if (
this.selectedCategory === "allCats" &&
e.cuisine === this.selectedCuisine &&
e.tags.length
)
return e.tags;
else if (
e.category === this.selectedCategory &&
e.cuisine === this.selectedCuisine &&
e.tags.length
)
return e.tags;
})
.flat()
.filter((e) => e)
.sort();
let showAllTags =
this.selectedCuisine === "allCuis" &&
this.selectedCategory === "allCats";
return arr.length
? [!showAllTags && "allTs", ...new Set(arr)].filter((e) => e)
: [];
2020-09-15 11:10:16 +00:00
},
},
methods: {
2021-02-28 15:10:26 +00:00
...mapActions([
"setCurrentComponentAction",
"initializeListItems",
"initializeRecipes",
"initializeMealPlans",
"setShakeAction",
2021-03-21 17:02:04 +00:00
"setLayout",
2021-02-28 15:10:26 +00:00
]),
2020-11-10 18:28:48 +00:00
onPageLoad() {
2021-02-28 15:10:26 +00:00
if (this.appTheme === "Light") {
const View = android.view.View;
const window = Application.android.startActivity.getWindow();
const decorView = window.getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
}
},
2021-02-28 15:10:26 +00:00
drawerLoad(args) {
this.drawer = args.object;
2021-01-23 17:20:15 +00:00
},
2020-11-10 18:28:48 +00:00
// HELPERS
2021-02-28 15:10:26 +00:00
setRecipeFilter(item) {
this.setFilter = this.filterFavourites = this.filterTrylater = false;
this.$navigateBack({
2020-12-29 10:35:19 +00:00
frame: "main-frame",
2021-02-28 15:10:26 +00:00
backstackVisible: false,
});
setTimeout((e) => {
if (this.selectedCuisine == null) {
this.selectedCuisine = item;
this.selectedFilterType = "category";
} else if (this.selectedCategory == null) {
this.selectedCategory = item;
this.selectedFilterType = "tag";
if (!this.tagsWithRecipes.length) this.closeDrawer();
2021-01-13 05:02:48 +00:00
} else {
this.selectedTag = item;
2021-02-28 15:10:26 +00:00
this.closeDrawer();
2021-01-13 05:02:48 +00:00
}
2021-02-28 15:10:26 +00:00
this.setFilter = true;
}, 250);
this.setCurrentComponentAction("Filtered recipes");
2020-10-21 17:54:45 +00:00
},
2020-12-29 10:35:19 +00:00
previousRecipeFilter() {
2021-02-28 15:10:26 +00:00
if (this.selectedCategory) {
this.selectedFilterType = "category";
this.selectedTag = this.selectedCategory = null;
this.setCurrentComponentAction("Filtered recipes");
2020-12-29 10:35:19 +00:00
} else {
2021-02-28 15:10:26 +00:00
this.selectedFilterType = "cuisine";
this.selectedCuisine = null;
this.setCurrentComponentAction("EnRecipes");
2020-12-29 10:35:19 +00:00
}
2021-01-23 17:20:15 +00:00
},
showDrawer() {
2021-02-28 15:10:26 +00:00
this.drawer.open();
2020-09-15 11:10:16 +00:00
},
2020-11-10 18:28:48 +00:00
closeDrawer() {
2021-02-28 15:10:26 +00:00
this.drawer.close();
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
getRecipeCount(arg) {
let count = "";
switch (arg) {
case "EnRecipes":
count = this.recipes.length;
2020-12-14 13:19:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "trylater":
count = this.recipes.filter((e) => !e.tried).length;
2020-12-14 13:19:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "favourites":
count = this.recipes.filter((e) => e.isFavorite).length;
2020-12-14 13:19:19 +00:00
break;
2020-12-29 10:35:19 +00:00
default: {
2021-02-28 15:10:26 +00:00
switch (this.selectedFilterType) {
case "cuisine":
count = this.recipes.filter((e) =>
arg === "allCuis" ? e.cuisine : e.cuisine === arg
).length;
2020-12-29 10:35:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "category":
count = this.recipes.filter((e) =>
this.selectedCuisine === "allCuis"
? arg === "allCats"
? e.category
: e.category === arg
: arg === "allCats"
? e.cuisine === this.selectedCuisine && e.category
: e.cuisine === this.selectedCuisine && e.category === arg
).length;
2020-12-29 10:35:19 +00:00
break;
2021-02-28 15:10:26 +00:00
case "tag":
count = this.recipes.filter((e) => {
if (
this.selectedCuisine === "allCuis" &&
this.selectedCategory === "allCats"
) {
return e.tags.includes(arg) || arg === "allTs";
} else if (
this.selectedCuisine === "allCuis" &&
e.category === this.selectedCategory
) {
return e.tags.includes(arg) || arg === "allTs";
} else if (
this.selectedCategory === "allCats" &&
e.cuisine === this.selectedCuisine
) {
return e.tags.includes(arg) || arg === "allTs";
} else if (
e.category === this.selectedCategory &&
e.cuisine === this.selectedCuisine
) {
return e.tags.includes(arg) || arg === "allTs";
2020-12-29 10:35:19 +00:00
}
2021-02-28 15:10:26 +00:00
}).length;
2020-12-29 10:35:19 +00:00
break;
}
}
2020-12-14 13:19:19 +00:00
}
2021-02-28 15:10:26 +00:00
return count;
2020-12-14 13:19:19 +00:00
},
2021-02-28 15:10:26 +00:00
selectModeOn(bool) {
this.gestures = bool;
2021-01-23 17:20:15 +00:00
},
2020-11-10 18:28:48 +00:00
// NAVIGATION HANDLERS
2020-10-21 17:54:45 +00:00
hijackGlobalBackEvent() {
2021-02-28 15:10:26 +00:00
AndroidApplication.on(
AndroidApplication.activityBackPressedEvent,
this.globalBackEvent
);
2020-10-21 17:54:45 +00:00
},
releaseGlobalBackEvent() {
2021-02-28 15:10:26 +00:00
AndroidApplication.off(
AndroidApplication.activityBackPressedEvent,
this.globalBackEvent
);
2020-09-15 11:10:16 +00:00
},
2021-02-28 15:10:26 +00:00
globalBackEvent(args) {
if (this.drawer && this.drawer.isOpened()) {
args.cancel = true;
this.closeDrawer();
2020-12-14 13:19:19 +00:00
} else if (
2021-02-28 15:10:26 +00:00
["Favourites", "Try Later", "Filtered recipes"].includes(
this.currentComponent
)
) {
args.cancel = true;
this.backToHome();
2020-09-15 11:10:16 +00:00
}
},
2021-01-13 05:02:48 +00:00
backToHome() {
2021-02-28 15:10:26 +00:00
this.setCurrentComponentAction("EnRecipes");
this.filterFavourites = this.filterTrylater = false;
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
this.selectedFilterType = "cuisine";
2021-01-13 05:02:48 +00:00
},
2021-02-28 15:10:26 +00:00
navigateTo(to, title, isTrueComponent) {
if (title !== this.currentComponent) {
if (isTrueComponent) {
this.$navigateTo(to, {
backstackVisible: true,
});
this.closeDrawer();
2020-12-29 10:35:19 +00:00
} else {
2021-02-28 15:10:26 +00:00
this.setCurrentComponentAction(to);
this.$navigateBack({
frame: "main-frame",
2021-02-28 15:10:26 +00:00
backstackVisible: false,
});
this.filterFavourites = to === "Favourites";
this.filterTrylater = to === "Try Later";
this.closeDrawer();
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
this.selectedFilterType = "cuisine";
}
2020-12-14 13:19:19 +00:00
} else {
2021-02-28 15:10:26 +00:00
this.closeDrawer();
2020-10-14 19:32:32 +00:00
}
},
2020-10-21 17:54:45 +00:00
},
created() {
2021-03-21 17:02:04 +00:00
this.setLayout(ApplicationSettings.getString("layout", "detailed"));
2021-02-28 15:10:26 +00:00
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
setTimeout((e) => {
Theme.setMode(Theme[this.appTheme]);
}, 10);
if (!this.recipes.length) this.initializeRecipes();
this.initializeListItems();
if (!this.mealPlans.length) this.initializeMealPlans();
this.setShakeAction(ApplicationSettings.getBoolean("shakeEnabled", true));
2020-09-15 11:10:16 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-09-15 11:10:16 +00:00
</script>