enrecipes/app/components/Settings.vue
2021-01-23 22:50:15 +05:30

558 lines
21 KiB
Vue

<template>
<Page @loaded="onPageLoad">
<ActionBar androidElevation="1">
<GridLayout rows="*" columns="auto, *">
<MDButton class="er left" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" />
<Label class="title orkm" :text="'Settings' | L" col="1" />
</GridLayout>
</ActionBar>
<ScrollView>
<StackLayout class="main-container">
<Label :text="'intf' | L" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="selectAppLanguage" />
<Label col="0" verticalAlignment="center" class="er" :text="icon.lang" />
<StackLayout col="1">
<Label :text="'lang' | L" />
<Label :text="appLanguage" class="info" />
</StackLayout>
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="selectThemes" />
<Label col="0" verticalAlignment="center" class="er" :text="icon.theme" />
<StackLayout col="1">
<Label :text="'Theme' | L" />
<Label :text="`${appTheme}` | L" class="info" />
</StackLayout>
</GridLayout>
<StackLayout class="hr m-10"></StackLayout>
<Label :text="'opts' | L" class="group-header orkm" />
<GridLayout columns="auto, *, auto" class="option">
<Label col="0" verticalAlignment="center" class="er" :text="icon.shuf" />
<StackLayout col="1">
<Label :text="'sVw' | L" textWrap="true" />
<Label :text="`sVwInfo` | L" class="info" textWrap="true" />
</StackLayout>
<Switch :color="shakeEnabled ? '#ff5200' : '#858585'" verticalAlignment="center" col="2" :checked="shakeEnabled" @checkedChange="toggleShake" />
</GridLayout>
<StackLayout class="hr m-10"></StackLayout>
<Label :text="'db' | L" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="exportCheck" />
<Label col="0" class="er" :text="icon.exp" />
<StackLayout col="1">
<Label :text="'expBu' | L" textWrap="true" />
<Label v-if="!backupInProgress" :text="'buInfo' | L" class="info" textWrap="true" />
<GridLayout class="progressContainer" v-else columns="*, 64">
<MDProgress col="0" :value="backupProgress" maxValue="100"></MDProgress>
<Label col="1" :text="` ${backupProgress}%`" />
</GridLayout>
</StackLayout>
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="importCheck" />
<Label col="0" class="er" :text="icon.imp" />
<StackLayout col="1">
<Label :text="'impBu' | L" textWrap="true" />
<Label :text="'impInfo' | L" class="info" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout class="hr m-10"></StackLayout>
<Label :text="'rest' | L" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="resetListItems('cuisines')" />
<Label col="0" class="er" :text="icon.reset" />
<Label col="1" verticalAlignment="center" :text="'restCuiL' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="resetListItems('categories')" />
<Label col="0" class="er" :text="icon.reset" />
<Label col="1" verticalAlignment="center" :text="'restCatL' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="resetListItems('yieldUnits')" />
<Label col="0" class="er" :text="icon.reset" />
<Label col="1" verticalAlignment="center" :text="'restYUL' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="resetListItems('units')" />
<Label col="0" class="er" :text="icon.reset" />
<Label col="1" verticalAlignment="center" :text="'restUL' | L" textWrap="true" />
</GridLayout>
<Label class="group-info" :text="'restInfo' | L" textWrap="true" />
<StackLayout class="hr m-10"></StackLayout>
<Label :text="'help' | L" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://t.me/enrecipes')" />
<Label col="0" class="er" :text="icon.tg" />
<StackLayout col="1">
<Label :text="'joinTG' | L" textWrap="true" />
<Label :text="'tgInfo' | L" class="info" textWrap="true" />
</StackLayout>
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://github.com/vishnuraghavb/EnRecipes/wiki/User-Guide')" />
<Label col="0" class="er" :text="icon.help" />
<Label verticalAlignment="center" col="1" :text="'guide' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://github.com/vishnuraghavb/EnRecipes/blob/main/PRIVACY.md')" />
<Label col="0" class="er" :text="icon.priv" />
<Label verticalAlignment="center" col="1" :text="'priv' | L" textWrap="true" />
</GridLayout>
<StackLayout class="hr m-10"></StackLayout>
<Label :text="'About' | L" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
<Label col="0" class="er" :text="icon.info" />
<StackLayout col="1">
<Label :text="'ver' | L" />
<Label :text="getVersion" class="info" textWrap="true" />
</StackLayout>
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://github.com/vishnuraghavb/enrecipes')" />
<Label col="0" class="er" :text="icon.gh" />
<Label verticalAlignment="center" col="1" :text="'gh' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://www.vishnuraghav.com/donate')" />
<Label col="0" class="er" :text="icon.don" />
<Label verticalAlignment="center" col="1" :text="'donate' | L" textWrap="true" />
</GridLayout>
<GridLayout columns="auto, *" class="option">
<MDRipple colSpan="2" @tap="openURL('https://hosted.weblate.org/projects/enrecipes/app-translations')" />
<Label col="0" class="er" :text="icon.trans" />
<Label verticalAlignment="center" col="1" :text="'trnsl' | L" textWrap="true" />
</GridLayout>
<Label class="group-info" :text="'appInfo' | L" textWrap="true" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
import {
Application,
Utils,
ApplicationSettings,
path,
knownFolders,
File,
Folder,
Observable,
Device
}
from "@nativescript/core"
import * as Permissions from "@nativescript-community/perms"
import {
Zip
}
from "@nativescript/zip"
import * as Toast from "nativescript-toast"
import * as Filepicker from "nativescript-plugin-filepicker"
import Theme from "@nativescript/theme"
import {
localize,
overrideLocale
}
from "@nativescript/localize"
import {
mapState,
mapActions
}
from "vuex"
import ActionDialog from "./modal/ActionDialog.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
import * as utils from "~/shared/utils"
export default {
data() {
return {
appTheme: "Light",
appLanguage: "English",
backupProgress: 0,
backupInProgress: false,
}
},
computed: {
...mapState( [ "icon", "recipes", "cuisines", "categories", "yieldUnits", "units", "mealPlans", "currentComponent", "language", "shakeEnabled", "importSummary" ] ),
getVersion() {
let ctx = Application.android.context
return ctx.getPackageManager().getPackageInfo( ctx.getPackageName(), 0 ).versionName
},
},
methods: {
...mapActions( [ "setCurrentComponentAction", "importListItemsAction", "importRecipesAction", "importMealPlansAction", "resetListItemsAction", "setShakeAction", "unlinkBrokenImages" ] ),
onPageLoad( args ) {
const page = args.object;
page.bindingContext = new Observable();
this.setCurrentComponentAction( "Settings" )
},
// HELPERS
openURL( url ) {
Utils.openUrl( url )
},
// LANGUAGE SELECTION
selectAppLanguage() {
let languages = this.language.map( e => e.title )
this.$showModal( ActionDialog, {
props: {
title: "lang",
list: [ ...languages ],
stretch: true,
helpIcon: 'lang',
},
} ).then( ( action ) => {
if ( action && action !== "Cancel" && this.appLanguage !== action ) {
let currentLocale = Device.language.split( '-' )[ 0 ]
let locale = this.language.filter( e => e.title === action )[ 0 ].locale
if ( currentLocale !== locale ) {
this.$showModal( ConfirmDialog, {
props: {
title: "appRst",
description: localize( "nLangInfo" ),
cancelButtonText: "cBtn",
okButtonText: "rst",
helpIcon: 'res',
bgColor: '#ff5200',
},
} ).then( ( result ) => {
if ( result ) {
this.appLanguage = action
ApplicationSettings.setString( "appLanguage", action )
overrideLocale( locale )
setTimeout( utils.restartApp, 250 )
}
} )
}
}
} )
},
// THEME SELECTION
selectThemes() {
this.$showModal( ActionDialog, {
props: {
title: "Theme",
list: [ "Light", "Dark" ],
stretch: false,
helpIcon: 'theme',
},
} ).then( ( action ) => {
if ( action && action !== "Cancel" && this.appTheme !== action ) {
this.$showModal( ConfirmDialog, {
props: {
title: "appRst",
description: localize( "nThmInfo" ),
cancelButtonText: "cBtn",
okButtonText: "rst",
helpIcon: 'res',
bgColor: '#ff5200',
},
} ).then( ( result ) => {
if ( result ) {
this.appTheme = action
ApplicationSettings.setString( "appTheme", action )
setTimeout( utils.restartApp, 250 )
}
} )
}
} )
},
// SHAKE VIEW RANDOM RECIPE
toggleShake( args ) {
let checked = args.object.checked
// let checked = !this.shakeEnabled
ApplicationSettings.setBoolean( 'shakeEnabled', checked )
this.setShakeAction( checked )
},
// EXPORT HANDLERS
exportCheck() {
if ( !this.recipes.length ) {
Toast.makeText( localize( "aFBu" ) ).show()
} else {
this.permissionCheck( this.permissionConfirmation, localize( "reqAcc" ), this.exportBackup )
}
},
exportBackup() {
this.exportFiles( "create" )
let date = new Date()
let formattedDate = date.getFullYear() + "-" + ( "0" + ( date.getMonth() + 1 ) ).slice( -2 ) + "-" + ( "0" + date.getDate() ).slice( -2 ) + "_" + ( "0" + date.getHours() ).slice( -2 ) + ( "0" + date.getMinutes() ).slice( -2 ) + ( "0" + date
.getSeconds() ).slice( -2 )
const sdDownloadPath = Folder.fromPath( android.os.Environment.getExternalStorageDirectory().getAbsolutePath() ).getFolder( "Download" ).path
let fromPath = path.join( knownFolders.documents().path, "EnRecipes" )
let destPath = path.join( sdDownloadPath, `EnRecipes-Backup_${formattedDate}.zip` )
this.backupInProgress = true
Zip.zip( {
directory: fromPath,
archive: destPath,
onProgress: ( progress ) => {
this.backupProgress = progress
},
} ).then( ( success ) => {
Toast.makeText( "Backup file successfully saved to Download folder", "long" ).show()
this.exportFiles( "delete" )
setTimeout( e => this.backupInProgress = false, 3000 )
} )
},
exportFiles( option ) {
const folder = path.join( knownFolders.documents().path, "EnRecipes" )
const EnRecipesFile = File.fromPath( path.join( folder, "recipes.json" ) )
let userCuisinesFile, userCategoriesFile, userYieldUnitsFile, userUnitsFile, mealPlansFile
if ( this.cuisines.length ) userCuisinesFile = File.fromPath( path.join( folder, "userCuisines.json" ) )
if ( this.categories.length ) userCategoriesFile = File.fromPath( path.join( folder, "userCategories.json" ) )
if ( this.yieldUnits.length ) userYieldUnitsFile = File.fromPath( path.join( folder, "userYieldUnits.json" ) )
if ( this.units.length ) userUnitsFile = File.fromPath( path.join( folder, "userUnits.json" ) )
if ( this.mealPlans.length ) mealPlansFile = File.fromPath( path.join( folder, "mealPlans.json" ) )
switch ( option ) {
case "create":
this.writeDataToFile( EnRecipesFile, this.recipes )
this.cuisines.length && this.writeDataToFile( userCuisinesFile, this.cuisines )
this.categories.length && this.writeDataToFile( userCategoriesFile, this.categories )
this.yieldUnits.length && this.writeDataToFile( userYieldUnitsFile, this.yieldUnits )
this.units.length && this.writeDataToFile( userUnitsFile, this.units )
this.mealPlans.length && this.writeDataToFile( mealPlansFile, this.mealPlans )
break
case "delete":
EnRecipesFile.remove()
this.cuisines.length && userCuisinesFile.remove()
this.categories.length && userCategoriesFile.remove()
this.yieldUnits.length && userYieldUnitsFile.remove()
this.units.length && userUnitsFile.remove()
this.mealPlans.length && mealPlansFile.remove()
break
default:
break
}
},
writeDataToFile( file, data ) {
file.writeText( JSON.stringify( data ) )
},
// IMPORT HANDLERS
importCheck() {
this.permissionCheck( this.permissionConfirmation, localize( "reqAcc" ), this.openFilePicker )
},
openFilePicker() {
Filepicker.create( {
mode: "single",
extensions: [ "zip" ],
} ).present().then( ( selection ) => {
Toast.makeText( localize( "vrfy" ) + '...' ).show()
let zipPath = selection[ 0 ]
this.validateZipContent( zipPath )
} )
},
importDataToDB( data, db, zipPath ) {
switch ( db ) {
case "EnRecipesDB":
this.importImages( zipPath )
this.importRecipesAction( data )
break
case "userCuisinesDB":
this.importListItemsAction( {
data,
listName: "cuisines",
} )
break
case "userCategoriesDB":
this.importListItemsAction( {
data,
listName: "categories",
} )
break
case "userYieldUnitsDB":
this.importListItemsAction( {
data,
listName: "yieldUnits",
} )
break
case "userUnitsDB":
this.importListItemsAction( {
data,
listName: "units",
} )
break
case "mealPlansDB":
this.importMealPlansAction( data )
break
default:
break
}
},
hasValidJSON( data ) {
try {
JSON.parse( data ) && Array.isArray( JSON.parse( data ) )
} catch ( e ) {
return false;
}
return true;
},
isFileDataValid( file ) {
const files = file.filter( e => File.exists( e.path ) )
if ( files.length ) {
let isValid = files.map( e => false )
files.forEach( ( file, i ) => {
File.fromPath( file.path ).readText().then( ( data ) => {
isValid[ i ] = this.hasValidJSON( data )
if ( !isValid[ i ] ) {
this.failedImport( `${localize("buMod")}\n\n${localize("invFile")}: ${file.file}` )
return 0;
}
if ( isValid.every( e => e === true ) ) {
files.forEach( ( file, i ) => {
File.fromPath( file.path ).readText().then( ( data ) => {
this.importDataToDB( JSON.parse( data ), file.db, file.zipPath )
} )
} )
}
} )
} )
} else {
this.failedImport( localize( "buEmp" ) )
}
},
failedImport( description ) {
this.$showModal( ConfirmDialog, {
props: {
title: "impFail",
description,
okButtonText: "OK",
helpIcon: 'alert',
bgColor: '#c92a2a',
},
} )
},
validateZipContent( zipPath ) {
Zip.unzip( {
archive: zipPath,
overwrite: true,
} ).then( ( extractedFolderPath ) => {
let cacheFolderPath = extractedFolderPath + "/EnRecipes"
const EnRecipesFilePath = cacheFolderPath + "/recipes.json"
const userCuisinesFilePath = cacheFolderPath + "/userCuisines.json"
const userCategoriesFilePath = cacheFolderPath + "/userCategories.json"
const userYieldUnitsFilePath = cacheFolderPath + "/userYieldUnits.json"
const userUnitsFilePath = cacheFolderPath + "/userUnits.json"
const mealPlansFilePath = cacheFolderPath + "/mealPlans.json"
if ( Folder.exists( cacheFolderPath ) ) {
this.isFileDataValid( [ {
zipPath,
path: EnRecipesFilePath,
db: "EnRecipesDB",
file: "recipes.json"
}, {
zipPath,
path: userCuisinesFilePath,
db: "userCuisinesDB",
file: "userCuisines.json"
}, {
zipPath,
path: userCategoriesFilePath,
db: "userCategoriesDB",
file: "userCategories.json"
}, {
zipPath,
path: userYieldUnitsFilePath,
db: "userYieldUnitsDB",
file: "userYieldUnits.json"
}, {
zipPath,
path: userUnitsFilePath,
db: "userUnitsDB",
file: "userUnits.json"
}, {
zipPath,
path: mealPlansFilePath,
db: "mealPlansDB",
file: "mealPlans.json"
}, ] )
} else {
Folder.fromPath( extractedFolderPath ).remove()
this.failedImport( localize( "buInc" ) )
}
if ( Folder.exists( cacheFolderPath + "/Images" ) ) {
this.importImages( cacheFolderPath + "/Images" )
}
} )
},
importImages( sourcePath ) {
let dest = knownFolders.documents().path
Zip.unzip( {
archive: sourcePath,
directory: dest,
overwrite: true,
} ).then( ( res ) => {
this.showImportSummary()
this.unlinkBrokenImages()
} )
},
showImportSummary() {
let {
found,
imported,
updated
} = this.importSummary
let exists = Math.abs( found - imported - updated ) + updated
let importedNote = `\n${imported} ${localize('recI')}`
let existsNote = `\n${exists} ${localize('recE')}`
let updatedNote = `\n${updated} ${localize('recU')}`
this.$showModal( ConfirmDialog, {
props: {
title: "impSuc",
description: `${found} ${localize('recF')}${ importedNote}${existsNote}${updatedNote}`,
okButtonText: "OK",
helpIcon: 'succ',
bgColor: '#69db7c',
},
} )
},
// PERMISSIONS HANDLER
permissionCheck( confirmation, description, action ) {
if ( !ApplicationSettings.getBoolean( "storagePermissionAsked", false ) ) {
confirmation( description ).then( ( e ) => {
if ( e ) {
Permissions.request( "photo" ).then( ( res ) => {
let status = res[ Object.keys( res )[ 0 ] ]
if ( status === "authorized" ) action()
if ( status !== "denied" ) ApplicationSettings.setBoolean( "storagePermissionAsked", true )
else Toast.makeText( localize( "dend" ) ).show()
} )
}
} )
} else {
Permissions.check( "photo" ).then( ( res ) => {
let status = res[ Object.keys( res )[ 0 ] ]
if ( status !== "authorized" ) {
confirmation( description ).then( ( e ) => {
e && utils.openAppSettingsPage()
} )
} else action()
} )
}
},
permissionConfirmation( description ) {
return this.$showModal( ConfirmDialog, {
props: {
title: "grant",
description,
cancelButtonText: "nNBtn",
okButtonText: "conBtn",
helpIcon: 'folder',
bgColor: '#ff5200',
},
} )
},
// RESET
resetListItems( listName ) {
this.resetListItemsAction( listName )
Toast.makeText( localize( "restDone" ) ).show()
}
},
mounted() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
this.appLanguage = ApplicationSettings.getString( "appLanguage", localize( "sysDef" ) )
},
}
</script>