enrecipes/app/components/Settings.vue

194 lines
5.6 KiB
Vue
Raw Normal View History

2020-09-15 11:10:16 +00:00
<template>
2020-10-22 18:36:50 +00:00
<Page @loaded="initializePage">
2020-10-14 19:32:32 +00:00
<ActionBar :flat="viewIsScrolled ? false : true">
<!-- Settings Actionbar -->
<GridLayout rows="*" columns="auto, *" class="actionBarContainer">
<Label
class="bx leftAction"
:text="icon.menu"
automationText="Menu"
@tap="showDrawer"
col="0"
/>
2020-10-21 17:54:45 +00:00
<Label class="title orkm" text="Settings" col="1" />
2020-10-14 19:32:32 +00:00
</GridLayout>
</ActionBar>
<ScrollView scrollBarIndicatorVisible="false">
<StackLayout class="main-container">
<Label text="Interface" class="group-header" />
2020-09-15 11:10:16 +00:00
2020-10-14 19:32:32 +00:00
<StackLayout
orientation="horizontal"
class="option"
@tap="selectThemes"
>
2020-10-21 17:54:45 +00:00
<!-- @tap="selectThemes" -->
2020-10-14 19:32:32 +00:00
<Label verticalAlignment="center" class="bx" :text="icon.theme" />
<StackLayout>
<Label text="Theme" class="option-title" />
<Label :text="themeName" class="option-info" textWrap="true" />
</StackLayout>
</StackLayout>
2020-09-15 11:10:16 +00:00
2020-10-14 19:32:32 +00:00
<StackLayout class="hr m-10"></StackLayout>
2020-09-15 11:10:16 +00:00
2020-10-14 19:32:32 +00:00
<Label text="Backup/Restore" class="group-header" />
<StackLayout
orientation="horizontal"
class="option"
@tap="selectBackupDir"
>
<Label verticalAlignment="center" class="bx" :text="icon.folder" />
<StackLayout>
<Label text="EnRecipes Backup Directory" class="option-title" />
<Label text="/storage/emulated/0/EnRecipes" class="option-info" />
</StackLayout>
</StackLayout>
<StackLayout orientation="horizontal" class="option" @tap="backupData">
<Label class="bx" :text="icon.backup" />
<Label text="Backup Data" class="option-title" />
</StackLayout>
<StackLayout orientation="horizontal" class="option" @tap="restoreData">
<Label class="bx" :text="icon.restore" />
<Label text="Restore Data" class="option-title" />
</StackLayout>
2020-09-15 11:10:16 +00:00
</StackLayout>
2020-10-14 19:32:32 +00:00
</ScrollView>
</Page>
2020-09-15 11:10:16 +00:00
</template>
<script>
2020-10-22 18:36:50 +00:00
import { ApplicationSettings } from "@nativescript/core"
2020-09-15 11:10:16 +00:00
import * as permissions from "nativescript-permissions"
2020-10-14 19:32:32 +00:00
import Theme from "@nativescript/theme"
2020-10-21 17:54:45 +00:00
import ActionDialog from "./modal/ActionDialog.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
2020-10-14 19:32:32 +00:00
import { mapState, mapActions } from "vuex"
2020-09-15 11:10:16 +00:00
export default {
2020-10-21 17:54:45 +00:00
props: [
"highlight",
"viewIsScrolled",
"showDrawer",
"restartApp",
"hijackGlobalBackEvent",
"releaseGlobalBackEvent",
],
2020-09-15 11:10:16 +00:00
data() {
return {
2020-10-14 19:32:32 +00:00
interface: {
theme: {
title: "Theme",
subTitle: "Light",
icon: "\ued09",
},
2020-09-15 11:10:16 +00:00
},
2020-10-14 19:32:32 +00:00
backupRestore: [
{
title: "EnRecipes Backup Directory",
subTitle: "/storage/emulated/0/EnRecipes",
icon: "\ued7c",
},
{
title: "Backup Data",
subTitle: null,
icon: "\uee48",
},
{
title: "Restore Data",
subTitle: null,
icon: "\ueadc",
},
],
2020-09-15 11:10:16 +00:00
themeName: "Light",
2020-10-14 19:32:32 +00:00
themesArray: ["Light", "Dark"],
2020-09-15 11:10:16 +00:00
}
},
2020-10-14 19:32:32 +00:00
computed: {
2020-10-21 17:54:45 +00:00
...mapState(["icon", "currentComponent"]),
2020-10-14 19:32:32 +00:00
},
2020-09-15 11:10:16 +00:00
methods: {
2020-10-22 18:36:50 +00:00
...mapActions(["setCurrentComponentAction"]),
initializePage() {
this.setCurrentComponentAction("Settings")
2020-10-21 17:54:45 +00:00
this.releaseGlobalBackEvent()
},
showDialog(args) {
this.highlight(args)
this.$showModal(ActionDialog)
},
2020-09-15 11:10:16 +00:00
selectThemes(args) {
2020-09-15 18:04:33 +00:00
this.highlight(args)
2020-10-21 17:54:45 +00:00
this.$showModal(ActionDialog, {
props: {
title: "Theme",
list: ["Light", "Dark"],
2020-10-22 18:36:50 +00:00
height: "97",
2020-10-21 17:54:45 +00:00
},
}).then((action) => {
if (action && action !== "Cancel" && this.themeName !== action) {
this.$showModal(ConfirmDialog, {
props: {
title: "App Reload Required",
description:
"The app needs to be reloaded for the theme change to take effect.",
cancelButtonText: "CANCEL",
okButtonText: "RELOAD",
},
}).then((result) => {
if (result) {
this.interface.theme.subTitle = this.themeName = action
2020-10-22 18:36:50 +00:00
ApplicationSettings.setString("application-theme", action)
2020-10-21 17:54:45 +00:00
setTimeout((e) => this.restartApp(), 250)
}
})
}
2020-09-15 11:10:16 +00:00
})
},
selectBackupDir(args) {
2020-09-15 18:04:33 +00:00
this.highlight(args)
2020-09-15 11:10:16 +00:00
let btn = args.object
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
.then(() => {
alert("select backup directory")
})
.catch(() => {
console.log("Uh oh, no permissions - plan B time!")
})
},
backupData(args) {
let btn = args.object
2020-09-15 18:04:33 +00:00
this.highlight(args)
2020-09-15 11:10:16 +00:00
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
.then(() => {
alert("Backup successful!")
})
.catch(() => {
console.log("Uh oh, no permissions - plan B time!")
})
},
restoreData(args) {
let btn = args.object
2020-09-15 18:04:33 +00:00
this.highlight(args)
2020-09-15 11:10:16 +00:00
permissions
.requestPermission(android.Manifest.permission.WRITE_EXTERNAL_STORAGE)
.then(() => {
alert("Restore successful!")
})
.catch(() => {
console.log("Uh oh, no permissions - plan B time!")
})
},
},
2020-10-14 19:32:32 +00:00
created() {
2020-10-22 18:36:50 +00:00
this.interface.theme.subTitle = this.themeName = ApplicationSettings.getString(
2020-10-14 19:32:32 +00:00
"application-theme",
"Light"
)
},
2020-09-15 11:10:16 +00:00
}
</script>