enrecipes/app/components/App.vue

381 lines
11 KiB
Vue
Raw Normal View History

2020-09-15 11:10:16 +00:00
<template>
<Page
2020-11-10 18:28:48 +00:00
@loaded="onPageLoad"
actionBarHidden="true"
2020-11-10 18:28:48 +00:00
:androidStatusBarBackground="appTheme == 'Light' ? '#f1f3f5' : '#212529'"
>
2020-09-15 11:10:16 +00:00
<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
>
2020-11-02 11:36:53 +00:00
<GridLayout rows="*, auto" columns="*" ~drawerContent class="sd">
2020-09-15 11:10:16 +00:00
<StackLayout row="0">
2020-11-02 11:36:53 +00:00
<GridLayout
rows="48"
columns="auto, 24, *"
2020-10-21 17:54:45 +00:00
v-for="(item, index) in topmenu"
:key="index"
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-11-10 18:28:48 +00:00
<MDRipple
row="0"
colSpan="3"
@tap="navigateTo(item.component, false, false)"
/>
2020-11-02 11:36:53 +00:00
<Label col="0" row="0" class="bx" :text="icon[item.icon]" />
<Label col="2" row="0" :text="item.title" />
</GridLayout>
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="categoriesWithRecipes.length"
2020-09-15 11:10:16 +00:00
>
2020-11-10 18:28:48 +00:00
<Label verticalAlignment="center" col="0" text="Categories" />
<MDButton
variant="text"
2020-10-21 17:54:45 +00:00
@tap="toggleCatEdit"
col="2"
2020-11-10 18:28:48 +00:00
:text="editCategory ? 'DONE' : 'RENAME'"
2020-10-21 17:54:45 +00:00
/>
</GridLayout>
<ScrollView height="100%">
<StackLayout>
<GridLayout
v-for="(item, index) in categoriesWithRecipes"
2020-10-21 17:54:45 +00:00
:key="index"
class="sd-item orkm"
:class="{
'selected-sd-item': currentComponent == item,
}"
columns="auto, *, auto"
>
2020-11-10 18:28:48 +00:00
<MDRipple
row="0"
colSpan="3"
@tap="navigateTo(item, false, true)"
/>
2020-10-21 17:54:45 +00:00
<Label
col="0"
class="bx"
:text="icon.label"
margin="0 24 0 0"
/>
<Label col="1" :text="item" />
2020-11-10 18:28:48 +00:00
<MDButton
variant="text"
v-if="editCategory"
2020-11-02 11:36:53 +00:00
@tap="renameCategory(item)"
2020-10-21 17:54:45 +00:00
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-11-10 18:28:48 +00:00
<GridLayout
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-11-10 18:28:48 +00:00
v-for="(item, index) in bottommenu"
:key="index"
rows="48"
columns="auto, 24, *"
2020-09-15 11:10:16 +00:00
>
2020-11-10 18:28:48 +00:00
<MDRipple
colSpan="3"
@tap="navigateTo(item.component, true, false)"
/>
<Label class="bx" col="0" :text="icon[item.icon]" />
<Label col="2" :text="item.title" />
</GridLayout>
2020-09-15 11:10:16 +00:00
</StackLayout>
</GridLayout>
<GridLayout ~mainContent rows="*" columns="*">
2020-11-02 11:36:53 +00:00
<Frame row="0" col="0" 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"
:filterTrylater="filterTrylater"
2020-10-21 17:54:45 +00:00
: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-11-06 09:07:41 +00:00
:openAppSettingsPage="openAppSettingsPage"
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 {
ApplicationSettings,
AndroidApplication,
2020-11-10 18:28:48 +00:00
ApplicationEventData,
2020-11-06 09:07:41 +00:00
Application,
2020-11-10 18:28:48 +00:00
Color,
Utils,
2020-10-22 18:36:50 +00:00
} 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-11-10 18:28:48 +00:00
import { mapActions, mapState } from "vuex"
2020-10-14 19:32:32 +00:00
import EnRecipes from "./EnRecipes.vue"
import Settings from "./Settings.vue"
import About from "./About.vue"
2020-11-10 18:28:48 +00:00
2020-10-21 17:54:45 +00:00
import PromptDialog from "./modal/PromptDialog.vue"
2020-09-15 11:10:16 +00:00
export default {
components: {
EnRecipes,
},
data() {
return {
selectedCategory: null,
filterFavorites: false,
filterTrylater: false,
2020-10-21 17:54:45 +00:00
topmenu: [
{
title: "Home",
component: "EnRecipes",
icon: "home",
},
{
title: "Favorites",
component: "Favorites",
icon: "heart",
},
{
title: "Try later",
component: "Try later",
icon: "trylater",
2020-10-21 17:54:45 +00:00
},
],
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-11-10 18:28:48 +00:00
editCategory: false,
appTheme: "Light",
2020-09-15 11:10:16 +00:00
}
},
computed: {
2020-11-02 11:36:53 +00:00
...mapState([
"icon",
"recipes",
"categories",
"yieldUnits",
"currentComponent",
]),
categoriesWithRecipes() {
2020-09-15 11:10:16 +00:00
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",
2020-11-02 11:36:53 +00:00
"initializeYieldUnits",
2020-10-26 20:49:54 +00:00
"renameCategoryAction",
]),
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)
2020-11-10 18:28:48 +00:00
// window.setNavigationBarColor(new Color("#e0e0e0").android)
}
},
2020-11-10 18:28:48 +00:00
// HELPERS
2020-10-21 17:54:45 +00:00
toggleCatEdit() {
2020-11-10 18:28:48 +00:00
this.editCategory = !this.editCategory
2020-11-02 11:36:53 +00:00
if (this.selectedCategory) this.setComponent("EnRecipes")
this.filterFavorites = this.filterTrylater = false
2020-10-21 17:54:45 +00:00
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-11-02 11:36:53 +00:00
renameCategory(category) {
2020-10-21 17:54:45 +00:00
this.releaseGlobalBackEvent()
this.$showModal(PromptDialog, {
props: {
title: `Rename category`,
2020-11-10 18:28:48 +00:00
text: 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 })
2020-11-10 18:28:48 +00:00
this.editCategory = false
2020-11-02 11:36:53 +00:00
this.navigateTo(newCategory, false, true)
2020-10-21 17:54:45 +00:00
}
})
},
2020-09-15 11:10:16 +00:00
setSelectedCategory(e) {
this.selectedCategory = e.item
this.closeDrawer()
},
2020-11-10 18:28:48 +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())
},
openAppSettingsPage() {
const intent = new android.content.Intent(
android.provider.Settings.ACTION_APPLICATION_DETAILS_SETTINGS
)
intent.addCategory(android.content.Intent.CATEGORY_DEFAULT)
intent.setData(
android.net.Uri.parse(
"package:" + Application.android.context.getPackageName()
)
)
Application.android.foregroundActivity.startActivity(intent)
},
showDrawer() {
this.$refs.drawer.nativeView.showDrawer()
},
closeDrawer() {
this.$refs.drawer.nativeView.closeDrawer()
},
// NAVIGATION HANDLERS
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.filterTrylater
? vm.setComponent("Try later")
2020-10-21 17:54:45 +00:00
: vm.selectedCategory
? vm.setComponent(vm.selectedCategory)
: vm.setComponent("EnRecipes")
}
if (this.$refs.drawer && this.$refs.drawer.nativeView.getIsOpen()) {
preventDefault()
this.closeDrawer()
2020-11-10 18:28:48 +00:00
this.editCategory = false
2020-10-21 17:54:45 +00:00
} else if (
["Favorites", "Try later", this.selectedCategory].includes(
2020-10-21 17:54:45 +00:00
this.currentComponent
)
) {
preventDefault()
this.setComponent("EnRecipes")
this.filterFavorites = this.filterTrylater = 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: {
showDrawer: this.showDrawer,
restartApp: this.restartApp,
hijackGlobalBackEvent: this.hijackGlobalBackEvent,
releaseGlobalBackEvent: this.releaseGlobalBackEvent,
2020-11-06 09:07:41 +00:00
openAppSettingsPage: this.openAppSettingsPage,
2020-10-21 17:54:45 +00:00
},
backstackVisible: false,
})
this.closeDrawer()
2020-11-10 18:28:48 +00:00
} else if (!this.editCategory || !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.filterTrylater = to === "Try later" ? true : false
2020-10-21 17:54:45 +00:00
this.selectedCategory = isCategory ? to : null
this.$refs.enrecipes.updateFilter()
this.closeDrawer()
2020-10-14 19:32:32 +00:00
}
2020-11-10 18:28:48 +00:00
this.editCategory = false
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
donate() {
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-11-10 18:28:48 +00:00
this.appTheme = ApplicationSettings.getString("appTheme", "Light")
setTimeout((e) => {
2020-11-10 18:28:48 +00:00
Theme.setMode(Theme[this.appTheme])
2020-11-12 12:06:17 +00:00
}, 10)
2020-11-10 18:28:48 +00:00
this.initializeRecipes()
this.initializeCategories()
this.initializeYieldUnits()
2020-09-15 11:10:16 +00:00
},
}
</script>