enrecipes/app/components/App.vue

348 lines
10 KiB
Vue
Raw Normal View History

2020-09-15 11:10:16 +00:00
<template>
<Page actionBarHidden="true">
<RadSideDrawer
ref="drawer"
allowEdgeSwipe="true"
2020-10-14 19:32:32 +00:00
drawerContentSize="270"
2020-09-15 11:10:16 +00:00
showOverNavigation="true"
gesturesEnabled="true"
2020-10-21 17:54:45 +00:00
drawerTransition="SlideInOnTopTransition"
2020-09-15 11:10:16 +00:00
>
<GridLayout
2020-10-21 17:54:45 +00:00
rows="*, auto"
2020-09-15 11:10:16 +00:00
columns="*"
~drawerContent
padding="8"
2020-10-14 19:32:32 +00:00
class="sd"
2020-09-15 11:10:16 +00:00
>
<StackLayout row="0">
<StackLayout
2020-10-21 17:54:45 +00:00
v-for="(item, index) in topmenu"
:key="index"
@tap="navigateTo(item.component, false, false)"
2020-09-15 11:10:16 +00:00
orientation="horizontal"
2020-10-14 19:32:32 +00:00
class="sd-item orkm"
2020-09-15 11:10:16 +00:00
:class="{
2020-10-21 17:54:45 +00:00
'selected-sd-item': currentComponent === item.component,
2020-09-15 11:10:16 +00:00
}"
>
2020-10-21 17:54:45 +00:00
<Label class="bx" :text="icon[item.icon]" margin="0 24 0 0" />
<Label :text="item.title" />
2020-09-15 11:10:16 +00:00
</StackLayout>
2020-10-21 17:54:45 +00:00
<StackLayout class="hr m-10"></StackLayout>
<GridLayout
class="sd-group-header orkm"
rows="auto"
columns="*, auto"
v-if="categories.length"
2020-09-15 11:10:16 +00:00
>
2020-10-21 17:54:45 +00:00
<Label col="0" text="Categories" />
<Label
@tap="toggleCatEdit"
col="2"
:text="catEditMode ? 'DONE' : 'RENAME'"
/>
</GridLayout>
<ScrollView height="100%">
<StackLayout>
<GridLayout
@tap="navigateTo(item, false, true)"
v-for="(item, index) in categories"
:key="index"
class="sd-item orkm"
:class="{
'selected-sd-item': currentComponent == item,
}"
columns="auto, *, auto"
>
<Label
col="0"
class="bx"
:text="icon.label"
margin="0 24 0 0"
/>
<Label col="1" :text="item" />
<Label
v-if="catEditMode"
@tap="editCategory(item)"
col="2"
class="bx"
:text="icon.edit"
/>
</GridLayout>
2020-09-15 11:10:16 +00:00
</StackLayout>
2020-10-21 17:54:45 +00:00
</ScrollView>
</StackLayout>
<StackLayout row="1">
<StackLayout class="hr m-10"></StackLayout>
2020-10-26 20:49:54 +00:00
<StackLayout
orientation="horizontal"
class="sd-item orkm"
@tap="donate"
>
<Label class="bx" :text="icon.donate" margin="0 24 0 0" />
<Label text="Donate" />
</StackLayout>
2020-09-15 11:10:16 +00:00
<StackLayout
2020-10-21 17:54:45 +00:00
@tap="navigateTo(item.component, true, false)"
2020-09-15 11:10:16 +00:00
v-for="(item, index) in bottommenu"
:key="index"
orientation="horizontal"
2020-10-14 19:32:32 +00:00
class="sd-item orkm"
2020-09-15 18:04:33 +00:00
:class="{
2020-10-14 19:32:32 +00:00
'selected-sd-item': currentComponent == item.title,
2020-09-15 18:04:33 +00:00
}"
2020-09-15 11:10:16 +00:00
>
2020-10-14 19:32:32 +00:00
<Label class="bx" :text="icon[item.icon]" margin="0 24 0 0" />
2020-10-21 17:54:45 +00:00
<Label :text="item.title" />
</StackLayout>
2020-09-15 11:10:16 +00:00
</StackLayout>
</GridLayout>
<GridLayout ~mainContent rows="*" columns="*">
2020-10-21 17:54:45 +00:00
<Frame ref="mainFrame" id="main-frame">
2020-10-14 19:32:32 +00:00
<!-- Home -->
<EnRecipes
2020-10-21 17:54:45 +00:00
ref="enrecipes"
2020-10-14 19:32:32 +00:00
:filterFavorites="filterFavorites"
2020-10-21 17:54:45 +00:00
:filterMustTry="filterMustTry"
:selectedCategory="selectedCategory"
2020-10-14 19:32:32 +00:00
:showDrawer="showDrawer"
2020-10-21 17:54:45 +00:00
:hijackGlobalBackEvent="hijackGlobalBackEvent"
:releaseGlobalBackEvent="releaseGlobalBackEvent"
2020-10-14 19:32:32 +00:00
/>
2020-09-15 11:10:16 +00:00
</Frame>
</GridLayout>
</RadSideDrawer>
</Page>
</template>
<script>
2020-10-22 18:36:50 +00:00
import {
Utils,
ApplicationSettings,
AndroidApplication,
} from "@nativescript/core"
2020-09-15 11:10:16 +00:00
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-10-14 19:32:32 +00:00
import EnRecipes from "./EnRecipes.vue"
import Settings from "./Settings.vue"
import About from "./About.vue"
2020-10-21 17:54:45 +00:00
import PromptDialog from "./modal/PromptDialog.vue"
2020-10-22 18:36:50 +00:00
import { mapState, mapActions } from "vuex"
2020-09-15 11:10:16 +00:00
let page
export default {
components: {
EnRecipes,
Settings,
About,
},
2020-10-26 20:49:54 +00:00
2020-09-15 11:10:16 +00:00
data() {
return {
selectedCategory: null,
filterFavorites: false,
2020-10-21 17:54:45 +00:00
filterMustTry: false,
topmenu: [
{
title: "Home",
component: "EnRecipes",
icon: "home",
},
{
title: "Favorites",
component: "Favorites",
icon: "heart",
},
{
title: "Must-Try",
component: "Must-Try",
icon: "musttry",
},
],
2020-09-15 11:10:16 +00:00
bottommenu: [
{
title: "Settings",
2020-10-14 19:32:32 +00:00
component: Settings,
icon: "cog",
2020-09-15 11:10:16 +00:00
},
{
title: "About",
2020-10-14 19:32:32 +00:00
component: About,
icon: "info",
2020-09-15 11:10:16 +00:00
},
],
2020-10-21 17:54:45 +00:00
catEditMode: false,
2020-09-15 11:10:16 +00:00
}
},
computed: {
2020-10-26 20:49:54 +00:00
...mapState(["icon", "recipes", "currentComponent"]),
2020-09-15 11:10:16 +00:00
categories() {
let arr = this.recipes.map((e) => {
return e.category
})
return [...new Set(arr)]
},
},
methods: {
2020-10-26 20:49:54 +00:00
...mapActions([
"setCurrentComponentAction",
"initializeRecipes",
"initializeCategories",
"renameCategoryAction",
]),
2020-10-21 17:54:45 +00:00
toggleCatEdit() {
this.catEditMode = !this.catEditMode
this.setComponent("EnRecipes")
this.filterFavorites = this.filterMustTry = false
this.selectedCategory = null
this.$refs.enrecipes.updateFilter()
},
setComponent(comp) {
2020-10-22 18:36:50 +00:00
this.setCurrentComponentAction(comp)
2020-10-21 17:54:45 +00:00
},
2020-10-26 20:49:54 +00:00
editCategory(category) {
2020-10-21 17:54:45 +00:00
this.releaseGlobalBackEvent()
this.$showModal(PromptDialog, {
props: {
title: `Rename category`,
2020-10-26 20:49:54 +00:00
hint: category,
2020-10-21 17:54:45 +00:00
action: "RENAME",
},
2020-10-26 20:49:54 +00:00
}).then((newCategory) => {
2020-10-21 17:54:45 +00:00
this.hijackGlobalBackEvent()
2020-10-26 20:49:54 +00:00
if (newCategory.length) {
this.renameCategoryAction({ current: category, updated: newCategory })
this.catEditMode = false
2020-10-21 17:54:45 +00:00
}
})
},
2020-09-15 18:04:33 +00:00
highlight(args) {
let temp = args.object.className
args.object.className = `${temp} option-highlight`
setTimeout(() => {
args.object.className = temp
}, 100)
},
2020-10-14 19:32:32 +00:00
// Navigation
2020-09-15 11:10:16 +00:00
setSelectedCategory(e) {
this.selectedCategory = e.item
this.closeDrawer()
},
2020-10-21 17:54:45 +00:00
hijackGlobalBackEvent() {
2020-10-22 18:36:50 +00:00
AndroidApplication.on(
AndroidApplication.activityBackPressedEvent,
2020-10-21 17:54:45 +00:00
this.globalBackEvent
)
},
releaseGlobalBackEvent() {
2020-10-22 18:36:50 +00:00
AndroidApplication.off(
AndroidApplication.activityBackPressedEvent,
2020-10-21 17:54:45 +00:00
this.globalBackEvent
2020-09-15 11:10:16 +00:00
)
},
2020-10-21 17:54:45 +00:00
globalBackEvent(args) {
function preventDefault() {
args.cancel = true
}
let vm = this
function isFiltered() {
vm.filterFavorites
? vm.setComponent("Favorites")
: vm.filterMustTry
? vm.setComponent("Must-Try")
: vm.selectedCategory
? vm.setComponent(vm.selectedCategory)
: vm.setComponent("EnRecipes")
}
if (this.$refs.drawer && this.$refs.drawer.nativeView.getIsOpen()) {
preventDefault()
this.closeDrawer()
this.catEditMode = false
} else if (
["Favorites", "Must-Try", this.selectedCategory].includes(
this.currentComponent
)
) {
preventDefault()
this.setComponent("EnRecipes")
this.filterFavorites = this.filterMustTry = false
2020-10-14 19:32:32 +00:00
this.selectedCategory = null
2020-10-21 17:54:45 +00:00
this.$refs.enrecipes.updateFilter()
this.releaseGlobalBackEvent()
2020-09-15 11:10:16 +00:00
}
},
2020-10-21 17:54:45 +00:00
navigateTo(to, isTrueComponent, isCategory) {
if (isTrueComponent) {
this.$navigateTo(to, {
frame: "main-frame",
props: {
highlight: this.highlight,
viewIsScrolled: this.viewIsScrolled,
showDrawer: this.showDrawer,
restartApp: this.restartApp,
hijackGlobalBackEvent: this.hijackGlobalBackEvent,
releaseGlobalBackEvent: this.releaseGlobalBackEvent,
},
backstackVisible: false,
})
this.closeDrawer()
2020-10-26 20:49:54 +00:00
} else if (!this.catEditMode || !isCategory) {
2020-10-21 17:54:45 +00:00
this.releaseGlobalBackEvent()
this.hijackGlobalBackEvent()
this.setComponent(to)
this.$navigateBack({ frame: "main-frame", backstackVisible: false })
this.filterFavorites = to === "Favorites" ? true : false
this.filterMustTry = to === "Must-Try" ? true : false
this.selectedCategory = isCategory ? to : null
this.$refs.enrecipes.updateFilter()
this.closeDrawer()
2020-10-14 19:32:32 +00:00
}
2020-10-26 20:49:54 +00:00
this.catEditMode = false
2020-10-14 19:32:32 +00:00
},
2020-10-21 17:54:45 +00:00
restartApp() {
// Code from nativescript-master-technology
const mStartActivity = new android.content.Intent(
application.android.context,
application.android.startActivity.getClass()
)
const mPendingIntentId = parseInt(Math.random() * 100000, 10)
const mPendingIntent = android.app.PendingIntent.getActivity(
application.android.context,
mPendingIntentId,
mStartActivity,
android.app.PendingIntent.FLAG_CANCEL_CURRENT
)
const mgr = application.android.context.getSystemService(
android.content.Context.ALARM_SERVICE
)
mgr.set(
android.app.AlarmManager.RTC,
java.lang.System.currentTimeMillis() + 100,
mPendingIntent
)
android.os.Process.killProcess(android.os.Process.myPid())
2020-09-15 11:10:16 +00:00
},
2020-10-14 19:32:32 +00:00
showDrawer() {
this.$refs.drawer.nativeView.showDrawer()
},
2020-09-15 11:10:16 +00:00
closeDrawer() {
2020-10-14 19:32:32 +00:00
this.$refs.drawer.nativeView.closeDrawer()
2020-09-15 11:10:16 +00:00
},
2020-10-21 17:54:45 +00:00
donate(args) {
this.highlight(args)
2020-10-22 18:36:50 +00:00
Utils.openUrl("https://www.vishnuraghav.com/donate/")
2020-10-21 17:54:45 +00:00
},
},
created() {
2020-10-22 18:36:50 +00:00
let themeName = ApplicationSettings.getString("application-theme", "Light")
setTimeout((e) => Theme.setMode(Theme[themeName]), 50)
2020-10-26 20:49:54 +00:00
if (!this.recipes.length) this.initializeRecipes()
if (!this.categories.length) this.initializeCategories()
2020-09-15 11:10:16 +00:00
},
}
</script>