495 lines
15 KiB
Vue
495 lines
15 KiB
Vue
<template>
|
|
<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"
|
|
class="sd-item mdr"
|
|
: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
|
|
class="sd-group-header"
|
|
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"
|
|
class="sd-item mdr"
|
|
: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, *"
|
|
class="sd-item mdr"
|
|
marginTop="8"
|
|
:class="{
|
|
selected: currentComponent == 'MealPlanner',
|
|
}"
|
|
@tap="navigateTo(MealPlanner, 'MealPlanner', true)"
|
|
>
|
|
<Label col="0" class="er" :text="icon.cal" />
|
|
<Label col="2" :text="'planner' | L" />
|
|
</GridLayout>
|
|
|
|
<!-- <GridLayout
|
|
rows="48"
|
|
columns="auto, *"
|
|
class="sd-item tb mdr"
|
|
: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, *"
|
|
class="sd-item tb mdr"
|
|
: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
|
|
class="sd-item mdr"
|
|
: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>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
ApplicationSettings,
|
|
AndroidApplication,
|
|
Application,
|
|
} 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";
|
|
let filterTimer;
|
|
export default {
|
|
data() {
|
|
return {
|
|
selectedCuisine: null,
|
|
selectedCategory: null,
|
|
selectedTag: null,
|
|
selectedFilterType: "cuisine",
|
|
filterFavourites: false,
|
|
filterTrylater: false,
|
|
MealPlanner: MealPlanner,
|
|
GroceryList: GroceryList,
|
|
Settings: Settings,
|
|
topmenu: [
|
|
{
|
|
title: "EnRecipes",
|
|
component: "EnRecipes",
|
|
icon: "home",
|
|
},
|
|
{
|
|
title: "trylater",
|
|
component: "Try Later",
|
|
icon: "try",
|
|
},
|
|
{
|
|
title: "favourites",
|
|
component: "Favourites",
|
|
icon: "fav",
|
|
},
|
|
],
|
|
appTheme: "Light",
|
|
setFilter: true,
|
|
gestures: true,
|
|
drawer: null,
|
|
};
|
|
},
|
|
components: {
|
|
EnRecipes,
|
|
ViewRecipe,
|
|
MealPlanner,
|
|
GroceryList,
|
|
Settings,
|
|
},
|
|
computed: {
|
|
...mapState([
|
|
"icon",
|
|
"recipes",
|
|
"cuisines",
|
|
"categories",
|
|
"yieldUnits",
|
|
"mealPlans",
|
|
"currentComponent",
|
|
]),
|
|
getCurrentPath() {
|
|
let path = null;
|
|
if (this.selectedCuisine) path = localize(this.selectedCuisine);
|
|
else path = "cuis";
|
|
if (this.selectedCategory)
|
|
path += " > " + localize(this.selectedCategory);
|
|
if (this.selectedTag) path += " > " + localize(this.selectedTag);
|
|
return path;
|
|
},
|
|
getRecipeList() {
|
|
switch (this.selectedFilterType) {
|
|
case "cuisine":
|
|
return this.cuisinesWithRecipes;
|
|
break;
|
|
case "category":
|
|
return this.categoriesWithRecipes;
|
|
break;
|
|
case "tag":
|
|
return this.tagsWithRecipes;
|
|
break;
|
|
}
|
|
},
|
|
cuisinesWithRecipes() {
|
|
let arr = this.recipes.map((e) => e.cuisine).sort();
|
|
return arr.length ? ["allCuis", ...new Set(arr)] : [];
|
|
},
|
|
categoriesWithRecipes() {
|
|
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)] : [];
|
|
},
|
|
tagsWithRecipes() {
|
|
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)
|
|
: [];
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
"setCurrentComponentAction",
|
|
"initializeListItems",
|
|
"initializeRecipes",
|
|
"initializeMealPlans",
|
|
"setShakeAction",
|
|
"setLayout",
|
|
]),
|
|
onPageLoad() {
|
|
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);
|
|
}
|
|
},
|
|
drawerLoad(args) {
|
|
this.drawer = args.object;
|
|
},
|
|
|
|
// HELPERS
|
|
setRecipeFilter(item) {
|
|
this.setFilter = this.filterFavourites = this.filterTrylater = false;
|
|
this.$navigateBack({
|
|
frame: "main-frame",
|
|
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();
|
|
} else {
|
|
this.selectedTag = item;
|
|
this.closeDrawer();
|
|
}
|
|
this.setFilter = true;
|
|
}, 250);
|
|
this.setCurrentComponentAction("Filtered recipes");
|
|
},
|
|
previousRecipeFilter() {
|
|
if (this.selectedCategory) {
|
|
this.selectedFilterType = "category";
|
|
this.selectedTag = this.selectedCategory = null;
|
|
this.setCurrentComponentAction("Filtered recipes");
|
|
} else {
|
|
this.selectedFilterType = "cuisine";
|
|
this.selectedCuisine = null;
|
|
this.setCurrentComponentAction("EnRecipes");
|
|
}
|
|
},
|
|
showDrawer() {
|
|
this.drawer.open();
|
|
},
|
|
closeDrawer() {
|
|
this.drawer.close();
|
|
},
|
|
getRecipeCount(arg) {
|
|
let count = "";
|
|
switch (arg) {
|
|
case "EnRecipes":
|
|
count = this.recipes.length;
|
|
break;
|
|
case "trylater":
|
|
count = this.recipes.filter((e) => !e.tried).length;
|
|
break;
|
|
case "favourites":
|
|
count = this.recipes.filter((e) => e.isFavorite).length;
|
|
break;
|
|
default: {
|
|
switch (this.selectedFilterType) {
|
|
case "cuisine":
|
|
count = this.recipes.filter((e) =>
|
|
arg === "allCuis" ? e.cuisine : e.cuisine === arg
|
|
).length;
|
|
break;
|
|
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;
|
|
break;
|
|
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";
|
|
}
|
|
}).length;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
return count;
|
|
},
|
|
selectModeOn(bool) {
|
|
this.gestures = bool;
|
|
},
|
|
// NAVIGATION HANDLERS
|
|
hijackGlobalBackEvent() {
|
|
AndroidApplication.on(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.globalBackEvent
|
|
);
|
|
},
|
|
releaseGlobalBackEvent() {
|
|
AndroidApplication.off(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.globalBackEvent
|
|
);
|
|
},
|
|
globalBackEvent(args) {
|
|
if (this.drawer && this.drawer.isOpened()) {
|
|
args.cancel = true;
|
|
this.closeDrawer();
|
|
} else if (
|
|
["Favourites", "Try Later", "Filtered recipes"].includes(
|
|
this.currentComponent
|
|
)
|
|
) {
|
|
args.cancel = true;
|
|
this.backToHome();
|
|
}
|
|
},
|
|
backToHome() {
|
|
this.setCurrentComponentAction("EnRecipes");
|
|
this.filterFavourites = this.filterTrylater = false;
|
|
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
|
|
this.selectedFilterType = "cuisine";
|
|
},
|
|
navigateTo(to, title, isTrueComponent) {
|
|
if (title !== this.currentComponent) {
|
|
if (isTrueComponent) {
|
|
this.$navigateTo(to, {
|
|
backstackVisible: true,
|
|
});
|
|
this.closeDrawer();
|
|
} else {
|
|
this.setCurrentComponentAction(to);
|
|
this.$navigateBack({
|
|
frame: "main-frame",
|
|
backstackVisible: false,
|
|
});
|
|
this.filterFavourites = to === "Favourites";
|
|
this.filterTrylater = to === "Try Later";
|
|
this.closeDrawer();
|
|
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
|
|
this.selectedFilterType = "cuisine";
|
|
}
|
|
} else {
|
|
this.closeDrawer();
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
this.setLayout(ApplicationSettings.getString("layout", "detailed"));
|
|
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));
|
|
},
|
|
};
|
|
</script>
|