enrecipes/app/components/App.vue

342 lines
13 KiB
Vue
Raw Normal View History

2021-01-23 17:20:15 +00:00
<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">
2020-12-14 13:19:19 +00:00
<GridLayout rows="48" columns="auto, *, auto" v-for="(item, index) in topmenu" :key="index" class="sd-item orkm" :class="{
2021-01-23 17:20:15 +00:00
'selected': currentComponent === item.component,
}">
2021-01-13 05:02:48 +00:00
<MDRipple colSpan="3" @tap="navigateTo(item.component, item.component, false)" />
2021-01-23 17:20:15 +00:00
<Label col="0" class="er" :text="icon[item.icon]" />
2021-01-13 05:02:48 +00:00
<Label col="1" :text="`${item.title}` | L" />
2020-12-14 13:19:19 +00:00
<Label class="recipeCount" v-if="getRecipeCount(item.title)" :text="getRecipeCount(item.title)" col="2" />
</GridLayout>
2020-12-29 10:35:19 +00:00
<GridLayout class="sd-group-header orkm" rows="auto" columns="*, auto" v-if="cuisinesWithRecipes.length">
<Label class="filterPath" verticalAlignment="center" col="0" :text="getCurrentPath | L" textWrap='true' />
2021-01-23 17:20:15 +00:00
<MDButton :visibility="selectedCuisine?'visible':'hidden'" variant="text" @tap="previousRecipeFilter" class="er" col="2" :text="icon.back" />
</GridLayout>
<ScrollView height="100%">
<StackLayout>
2020-12-29 10:35:19 +00:00
<GridLayout v-for="(item, index) in getRecipeList" :key="index" class="sd-item orkm" :class="{
2021-01-23 17:20:15 +00:00
'selected': selectedTag == item,
}" columns="auto, *, auto">
2021-01-13 05:02:48 +00:00
<MDRipple colSpan="3" @tap="setFilter && setRecipeFilter(item)" />
2021-01-23 17:20:15 +00:00
<Label col="0" class="er" :text="icon[selectedFilterType]" />
<Label col="1" :text="`${item}` | L" />
2020-12-29 10:35:19 +00:00
<Label class="recipeCount" :text="getRecipeCount(item)" col="2" />
</GridLayout>
2021-01-13 05:02:48 +00:00
<GridLayout v-if="selectedFilterType =='tag' && !tagsWithRecipes.length" columns="*" rows="*">
<Label class="noTags" :text="'noTs' | L" textWrap="true" />
</GridLayout>
</StackLayout>
</ScrollView>
</StackLayout>
<StackLayout row="1">
<StackLayout class="hr" margin="0 8 8"></StackLayout>
2020-12-29 10:35:19 +00:00
<GridLayout rows="48" columns="auto, *" class="sd-item orkm" :class="{
2021-01-23 17:20:15 +00:00
'selected': currentComponent == 'MealPlanner',
2020-12-29 10:35:19 +00:00
}">
<MDRipple row="0" colSpan="3" @tap="navigateTo(MealPlanner, 'MealPlanner', true)" />
2021-01-23 17:20:15 +00:00
<Label col="0" class="er" :text="icon.cal" />
2021-01-13 05:02:48 +00:00
<Label col="2" :text="'planner' | L" />
2020-12-29 10:35:19 +00:00
</GridLayout>
2021-01-13 05:02:48 +00:00
2021-01-23 17:20:15 +00:00
<!-- <GridLayout rows="48" columns="auto, *" class="sd-item orkm" :class="{
'selected': currentComponent == 'GroceryList',
2020-12-29 10:35:19 +00:00
}">
2021-01-13 05:02:48 +00:00
<MDRipple row="0" colSpan="3" @tap="navigateTo(GroceryList, 'GroceryList', true)" />
2021-01-23 17:20:15 +00:00
<Label col="0" class="er" :text="icon.bag" />
2021-01-13 05:02:48 +00:00
<Label col="2" :text="'grocery' | L" />
</GridLayout>
2021-01-23 17:20:15 +00:00
<GridLayout rows="48" columns="auto, *" class="sd-item orkm" :class="{
'selected': currentComponent == 'GroceryList',
}">
<MDRipple row="0" colSpan="3" @tap="navigateTo(GroceryList, 'GroceryList', true)" />
<Label col="0" class="er" :text="icon.price" />
<Label col="2" :text="'Price List' | L" />
</GridLayout> -->
2021-01-13 05:02:48 +00:00
2020-12-29 10:35:19 +00:00
<StackLayout class="hr" margin="8"></StackLayout>
2021-01-13 05:02:48 +00:00
<GridLayout class="sd-item orkm" :class="{
2021-01-23 17:20:15 +00:00
'selected': currentComponent == 'Settings',
2021-01-13 05:02:48 +00:00
}" rows="48" columns="auto, *">
<MDRipple colSpan="3" @tap="navigateTo(Settings, 'Settings', true)" />
2021-01-23 17:20:15 +00:00
<Label class="er" col="0" :text="icon.cog" />
2021-01-13 05:02:48 +00:00
<Label col="2" :text="'Settings' | L" />
</GridLayout>
2021-01-13 05:02:48 +00:00
</StackLayout>
</GridLayout>
<Frame ~mainContent id="main-frame">
2020-12-29 10:35:19 +00:00
<EnRecipes ref="enrecipes" :filterFavourites="filterFavourites" :filterTrylater="filterTrylater" :selectedCuisine="selectedCuisine" :selectedCategory="selectedCategory" :selectedTag="selectedTag" :closeDrawer="closeDrawer"
2021-01-23 17:20:15 +00:00
:hijackGlobalBackEvent="hijackGlobalBackEvent" :releaseGlobalBackEvent="releaseGlobalBackEvent" @backToHome="backToHome" :showDrawer="showDrawer" @selectModeOn="selectModeOn" />
</Frame>
2021-01-23 17:20:15 +00:00
</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,
Device
}
from "@nativescript/core"
2020-10-21 17:54:45 +00:00
import Theme from "@nativescript/theme"
import * as Toast from "nativescript-toast"
2020-10-22 18:36:50 +00:00
import * as application from "tns-core-modules/application"
2020-12-29 10:35:19 +00:00
import {
localize
}
from "@nativescript/localize"
import {
mapActions,
mapState
}
from "vuex"
2020-11-23 09:49:58 +00:00
import EnRecipes from "./EnRecipes"
2021-01-23 17:20:15 +00:00
import ViewRecipe from "./ViewRecipe"
2020-11-23 09:49:58 +00:00
import MealPlanner from "./MealPlanner"
2021-01-13 05:02:48 +00:00
import GroceryList from "./GroceryList"
2020-11-23 09:49:58 +00:00
import Settings from "./Settings"
import PromptDialog from "./modal/PromptDialog"
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,
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,
topmenu: [ {
2020-12-14 13:19:19 +00:00
title: "EnRecipes",
component: "EnRecipes",
icon: "home",
}, {
2021-01-13 05:02:48 +00:00
title: "trylater",
2020-12-14 13:19:19 +00:00
component: "Try Later",
2021-01-23 17:20:15 +00:00
icon: "try",
2020-12-14 13:19:19 +00:00
}, {
2021-01-13 05:02:48 +00:00
title: "favourites",
2020-12-14 13:19:19 +00:00
component: "Favourites",
2021-01-23 17:20:15 +00:00
icon: "fav",
2020-12-14 13:19:19 +00:00
}, ],
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,
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,
Settings
2020-11-23 09:49:58 +00:00
},
2020-09-15 11:10:16 +00:00
computed: {
2020-12-29 10:35:19 +00:00
...mapState( [ "icon", "recipes", "cuisines", "categories", "yieldUnits", "mealPlans", "currentComponent" ] ),
getCurrentPath() {
let path = "/"
if ( this.selectedCuisine ) path += localize( this.selectedCuisine )
2021-01-13 05:02:48 +00:00
else path = "cuis"
2020-12-29 10:35:19 +00:00
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() {
2021-01-13 05:02:48 +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-01-13 05:02:48 +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() {
let arr = this.recipes.map( e => {
2021-01-13 05:02:48 +00:00
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;
2020-12-29 10:35:19 +00:00
else if ( e.category === this.selectedCategory && e.cuisine === this.selectedCuisine && e.tags.length ) return e.tags;
2021-01-13 05:02:48 +00:00
} ).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: {
2020-12-29 10:35:19 +00:00
...mapActions( [ "setCurrentComponentAction", "initializeListItems", "initializeRecipes", "initializeMealPlans", "setShakeAction" ] ),
2020-11-10 18:28:48 +00:00
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 )
}
},
2021-01-23 17:20:15 +00:00
drawerLoad( args ) {
this.drawer = args.object
},
2020-11-10 18:28:48 +00:00
// HELPERS
2020-12-29 10:35:19 +00:00
setRecipeFilter( item ) {
2021-01-13 05:02:48 +00:00
this.setFilter = this.filterFavourites = this.filterTrylater = false
2020-12-29 10:35:19 +00:00
this.$navigateBack( {
frame: "main-frame",
backstackVisible: false
} )
2021-01-13 05:02:48 +00:00
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
2021-01-23 17:20:15 +00:00
}, 250 )
this.setCurrentComponentAction( "Filtered recipes" )
2020-10-21 17:54:45 +00:00
},
2020-12-29 10:35:19 +00:00
previousRecipeFilter() {
if ( this.selectedCategory ) {
this.selectedFilterType = 'category'
this.selectedTag = this.selectedCategory = null
2021-01-13 05:02:48 +00:00
this.setCurrentComponentAction( "Filtered recipes" )
2020-12-29 10:35:19 +00:00
} else {
this.selectedFilterType = 'cuisine'
this.selectedCuisine = null
this.setCurrentComponentAction( "EnRecipes" )
}
2021-01-23 17:20:15 +00:00
},
showDrawer() {
this.drawer.open()
2020-09-15 11:10:16 +00:00
},
2020-11-10 18:28:48 +00:00
closeDrawer() {
2021-01-23 17:20:15 +00:00
this.drawer.close()
2020-11-10 18:28:48 +00:00
},
2020-12-29 10:35:19 +00:00
getRecipeCount( arg ) {
2020-12-14 13:19:19 +00:00
let count = ''
2020-12-29 10:35:19 +00:00
switch ( arg ) {
2020-12-14 13:19:19 +00:00
case 'EnRecipes':
count = this.recipes.length
break;
2021-01-13 05:02:48 +00:00
case 'trylater':
2020-12-14 13:19:19 +00:00
count = this.recipes.filter( e => !e.tried ).length
break;
2021-01-13 05:02:48 +00:00
case 'favourites':
2020-12-14 13:19:19 +00:00
count = this.recipes.filter( e => e.isFavorite ).length
break;
2020-12-29 10:35:19 +00:00
default: {
switch ( this.selectedFilterType ) {
case 'cuisine':
2021-01-13 05:02:48 +00:00
count = this.recipes.filter( e => arg === "allCuis" ? e.cuisine : e.cuisine === arg ).length
2020-12-29 10:35:19 +00:00
break;
case 'category':
2021-01-13 05:02:48 +00:00
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
2020-12-29 10:35:19 +00:00
.selectedCuisine && e.category === arg ).length
break;
case 'tag':
count = this.recipes.filter( e => {
2021-01-13 05:02:48 +00:00
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"
2020-12-29 10:35:19 +00:00
} else if ( e.category === this.selectedCategory && e.cuisine === this.selectedCuisine ) {
2021-01-13 05:02:48 +00:00
return e.tags.includes( arg ) || arg === "allTs"
2020-12-29 10:35:19 +00:00
}
} ).length
break;
}
}
2020-12-14 13:19:19 +00:00
}
return count
},
2021-01-23 17:20:15 +00:00
selectModeOn( bool ) {
this.gestures = bool
},
2020-11-10 18:28:48 +00:00
// NAVIGATION HANDLERS
2020-10-21 17:54:45 +00:00
hijackGlobalBackEvent() {
2020-12-14 13:19:19 +00:00
AndroidApplication.on( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
2020-10-21 17:54:45 +00:00
},
releaseGlobalBackEvent() {
2020-12-14 13:19:19 +00:00
AndroidApplication.off( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
2020-09-15 11:10:16 +00:00
},
globalBackEvent( args ) {
2021-01-23 17:20:15 +00:00
if ( this.drawer && this.drawer.isOpened() ) {
2020-10-21 17:54:45 +00:00
args.cancel = true
this.closeDrawer()
2020-12-14 13:19:19 +00:00
} else if (
2021-01-13 05:02:48 +00:00
[ "Favourites", "Try Later", "Filtered recipes" ].includes( this.currentComponent ) ) {
2021-01-23 17:20:15 +00:00
args.cancel = true
2021-01-13 05:02:48 +00:00
this.backToHome()
2020-09-15 11:10:16 +00:00
}
},
2021-01-13 05:02:48 +00:00
backToHome() {
this.setCurrentComponentAction( "EnRecipes" )
this.filterFavourites = this.filterTrylater = false
this.selectedTag = this.selectedCategory = this.selectedCuisine = null
this.selectedFilterType = "cuisine"
},
2020-12-29 10:35:19 +00:00
navigateTo( to, title, isTrueComponent ) {
if ( title !== this.currentComponent ) {
if ( isTrueComponent ) {
this.$navigateTo( to, {
2021-01-23 17:20:15 +00:00
backstackVisible: true
} )
this.closeDrawer()
2020-12-29 10:35:19 +00:00
} else {
this.setCurrentComponentAction( to )
this.$navigateBack( {
frame: "main-frame",
backstackVisible: false
} )
2021-01-23 17:20:15 +00:00
this.filterFavourites = to === "Favourites"
this.filterTrylater = to === "Try Later"
this.closeDrawer()
2021-01-23 17:20:15 +00:00
this.selectedTag = this.selectedCategory = this.selectedCuisine = null
this.selectedFilterType = "cuisine"
}
2020-12-14 13:19:19 +00:00
} else {
2020-10-21 17:54:45 +00:00
this.closeDrawer()
2020-10-14 19:32:32 +00:00
}
},
2020-10-21 17:54:45 +00:00
},
created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
setTimeout( ( e ) => {
Theme.setMode( Theme[ this.appTheme ] )
}, 10 )
if ( !this.recipes.length ) this.initializeRecipes()
2020-12-29 10:35:19 +00:00
this.initializeListItems()
if ( !this.mealPlans.length ) this.initializeMealPlans()
2020-12-29 10:35:19 +00:00
this.setShakeAction( ApplicationSettings.getBoolean( "shakeEnabled", true ) )
2020-09-15 11:10:16 +00:00
},
}
</script>