michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

replaced mdripple

Browse source
This commit is contained in:
vishnuraghavb 2021-02-28 20:40:26 +05:30
parent 89f8557521
commit 2b8627959b
16 changed files with 17165 additions and 3242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/app.scss
View file

@ -1,6 +1,6 @@
// NativeScript core theme
// @see https://docs.nativescript.org/ui/theme
@import "~@nativescript/theme/core"; // Override variables here
@import '~@nativescript/theme/core'; // Override variables here
$gray0: #fff;
$gray1: #f0f0f0;
$gray2: #e0e0e0;
@ -10,7 +10,7 @@ $gray5: #858585;
$gray6: #575757;
$gray7: #393939;
$gray8: #292929;
$gray9: #1A1A1A;
$gray9: #1a1a1a;
$gray10: #000;
$orange: #ff5200;
$fabRipple: #ffa94d;
@ -265,7 +265,7 @@ ActionBar {
&.selected {
color: $orange;
background: rgba($orange, 0.1);
MDRipple {
.mdr {
ripple-color: transparent;
}
}
@ -278,7 +278,7 @@ ActionBar {
padding: 0 0 0 16;
}
}
MDRipple {
.mdr {
padding: 0 16;
}
MDButton.er {
@ -306,7 +306,7 @@ ActionBar {
text-align: center;
margin: 8;
}
MDRipple {
.mdr {
border-radius: 4;
}
MDButton {
@ -322,7 +322,7 @@ MDButton {
}
}
MDButton,
MDRipple {
.mdr {
ripple-color: rgba($gray5, 0.2);
}
// -----------------------------

626
app/components/App.vue
View file

@ -1,80 +1,162 @@
<template>
<Page @loaded="onPageLoad" actionBarHidden="true" :androidStatusBarBackground="appTheme == 'Light' ? '#f0f0f0' : '#1A1A1A'">
<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">
<GridLayout
rows="48"
columns="auto, *, auto"
v-for="(item, index) in topmenu"
:key="index"
class="sd-item orkm mdr"
:class="{
selected: currentComponent === item.component,
}"
@tap="navigateTo(item.component, item.component, false)"
>
<Label col="0" class="er" :text="icon[item.icon]" />
<Label col="1" :text="`${item.title}` | L" />
<Label
class="recipeCount"
v-if="getRecipeCount(item.title)"
:text="getRecipeCount(item.title)"
col="2"
/>
</GridLayout>
<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"
/>
<MDButton
:visibility="selectedCuisine ? 'visible' : 'hidden'"
variant="text"
@tap="previousRecipeFilter"
class="er"
col="2"
:text="icon.back"
/>
</GridLayout>
<ScrollView height="100%">
<StackLayout>
<GridLayout
v-for="(item, index) in getRecipeList"
:key="index"
class="sd-item orkm mdr"
:class="{
selected: selectedTag == item,
}"
columns="auto, *, auto"
@tap="setFilter && setRecipeFilter(item)"
>
<Label col="0" class="er" :text="icon[selectedFilterType]" />
<Label col="1" :text="`${item}` | L" />
<Label
class="recipeCount"
:text="getRecipeCount(item)"
col="2"
/>
</GridLayout>
<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>
<GridLayout
rows="48"
columns="auto, *"
class="sd-item orkm mdr"
:class="{
selected: currentComponent == 'MealPlanner',
}"
@tap="navigateTo(MealPlanner, 'MealPlanner', true)"
>
<Label col="0" class="er" :text="icon.cal" />
<Label col="2" :text="'planner' | L" />
</GridLayout>
<Drawer @loaded="drawerLoad" :gestureEnabled="gestures" leftSwipeDistance="128">
<GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd">
<StackLayout row="0">
<GridLayout rows="48" columns="auto, *, auto" v-for="(item, index) in topmenu" :key="index" class="sd-item orkm" :class="{
'selected': currentComponent === item.component,
}">
<MDRipple colSpan="3" @tap="navigateTo(item.component, item.component, false)" />
<Label col="0" class="er" :text="icon[item.icon]" />
<Label col="1" :text="`${item.title}` | L" />
<Label class="recipeCount" v-if="getRecipeCount(item.title)" :text="getRecipeCount(item.title)" col="2" />
</GridLayout>
<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' />
<MDButton :visibility="selectedCuisine?'visible':'hidden'" variant="text" @tap="previousRecipeFilter" class="er" col="2" :text="icon.back" />
</GridLayout>
<ScrollView height="100%">
<StackLayout>
<GridLayout v-for="(item, index) in getRecipeList" :key="index" class="sd-item orkm" :class="{
'selected': selectedTag == item,
}" columns="auto, *, auto">
<MDRipple colSpan="3" @tap="setFilter && setRecipeFilter(item)" />
<Label col="0" class="er" :text="icon[selectedFilterType]" />
<Label col="1" :text="`${item}` | L" />
<Label class="recipeCount" :text="getRecipeCount(item)" col="2" />
</GridLayout>
<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>
<GridLayout rows="48" columns="auto, *" class="sd-item orkm" :class="{
'selected': currentComponent == 'MealPlanner',
}">
<MDRipple row="0" colSpan="3" @tap="navigateTo(MealPlanner, 'MealPlanner', true)" />
<Label col="0" class="er" :text="icon.cal" />
<Label col="2" :text="'planner' | L" />
</GridLayout>
<!-- <GridLayout
rows="48"
columns="auto, *"
class="sd-item orkm mdr"
:class="{
selected: currentComponent == 'GroceryList',
}"
@tap="navigateTo(GroceryList, 'GroceryList', true)"
>
<Label col="0" class="er" :text="icon.bag" />
<Label col="2" :text="'grocery' | L" />
</GridLayout>
<GridLayout
rows="48"
columns="auto, *"
class="sd-item orkm mdr"
:class="{
selected: currentComponent == 'GroceryList',
}"
@tap="navigateTo(GroceryList, 'GroceryList', true)"
>
<Label col="0" class="er" :text="icon.price" />
<Label col="2" :text="'Price List' | L" />
</GridLayout> -->
<!-- <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.bag" />
<Label col="2" :text="'grocery' | L" />
</GridLayout>
<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> -->
<StackLayout class="hr" margin="8"></StackLayout>
<StackLayout class="hr" margin="8"></StackLayout>
<GridLayout class="sd-item orkm" :class="{
'selected': currentComponent == 'Settings',
}" rows="48" columns="auto, *">
<MDRipple colSpan="3" @tap="navigateTo(Settings, 'Settings', true)" />
<Label class="er" col="0" :text="icon.cog" />
<Label col="2" :text="'Settings' | L" />
</GridLayout>
</StackLayout>
</GridLayout>
<Frame ~mainContent id="main-frame">
<EnRecipes ref="enrecipes" :filterFavourites="filterFavourites" :filterTrylater="filterTrylater" :selectedCuisine="selectedCuisine" :selectedCategory="selectedCategory" :selectedTag="selectedTag" :closeDrawer="closeDrawer"
:hijackGlobalBackEvent="hijackGlobalBackEvent" :releaseGlobalBackEvent="releaseGlobalBackEvent" @backToHome="backToHome" :showDrawer="showDrawer" @selectModeOn="selectModeOn" />
</Frame>
</Drawer>
</Page>
<GridLayout
class="sd-item orkm mdr"
:class="{
selected: currentComponent == 'Settings',
}"
rows="48"
columns="auto, *"
@tap="navigateTo(Settings, 'Settings', true)"
>
<Label class="er" col="0" :text="icon.cog" />
<Label col="2" :text="'Settings' | L" />
</GridLayout>
</StackLayout>
</GridLayout>
<Frame ~mainContent id="main-frame">
<EnRecipes
ref="enrecipes"
:filterFavourites="filterFavourites"
:filterTrylater="filterTrylater"
:selectedCuisine="selectedCuisine"
:selectedCategory="selectedCategory"
:selectedTag="selectedTag"
:closeDrawer="closeDrawer"
:hijackGlobalBackEvent="hijackGlobalBackEvent"
:releaseGlobalBackEvent="releaseGlobalBackEvent"
@backToHome="backToHome"
:showDrawer="showDrawer"
@selectModeOn="selectModeOn"
/>
</Frame>
</Drawer>
</Page>
</template>
<script>
@ -82,24 +164,16 @@ import {
ApplicationSettings,
AndroidApplication,
Application,
}
from "@nativescript/core"
import Theme from "@nativescript/theme"
import {
localize
}
from "@nativescript/localize"
import {
mapActions,
mapState
}
from "vuex"
import EnRecipes from "./EnRecipes"
import ViewRecipe from "./ViewRecipe"
import MealPlanner from "./MealPlanner"
import GroceryList from "./GroceryList"
import Settings from "./Settings"
import PromptDialog from "./modal/PromptDialog"
} from "@nativescript/core";
import Theme from "@nativescript/theme";
import { localize } from "@nativescript/localize";
import { mapActions, mapState } from "vuex";
import EnRecipes from "./EnRecipes";
import ViewRecipe from "./ViewRecipe";
import MealPlanner from "./MealPlanner";
import GroceryList from "./GroceryList";
import Settings from "./Settings";
import PromptDialog from "./modal/PromptDialog";
let filterTimer;
export default {
data() {
@ -107,232 +181,316 @@ export default {
selectedCuisine: null,
selectedCategory: null,
selectedTag: null,
selectedFilterType: 'cuisine',
selectedFilterType: "cuisine",
filterFavourites: false,
filterTrylater: false,
MealPlanner: MealPlanner,
GroceryList: GroceryList,
Settings: Settings,
topmenu: [ {
title: "EnRecipes",
component: "EnRecipes",
icon: "home",
}, {
title: "trylater",
component: "Try Later",
icon: "try",
}, {
title: "favourites",
component: "Favourites",
icon: "fav",
}, ],
topmenu: [
{
title: "EnRecipes",
component: "EnRecipes",
icon: "home",
},
{
title: "trylater",
component: "Try Later",
icon: "try",
},
{
title: "favourites",
component: "Favourites",
icon: "fav",
},
],
appTheme: "Light",
setFilter: true,
gestures: true,
drawer: null,
}
};
},
components: {
EnRecipes,
ViewRecipe,
MealPlanner,
GroceryList,
Settings
Settings,
},
computed: {
...mapState( [ "icon", "recipes", "cuisines", "categories", "yieldUnits", "mealPlans", "currentComponent" ] ),
...mapState([
"icon",
"recipes",
"cuisines",
"categories",
"yieldUnits",
"mealPlans",
"currentComponent",
]),
getCurrentPath() {
let path = "/"
if ( this.selectedCuisine ) path += localize( this.selectedCuisine )
else path = "cuis"
if ( this.selectedCategory ) path += "/" + localize( this.selectedCategory )
if ( this.selectedTag ) path += "/" + localize( this.selectedTag )
let path = "/";
if (this.selectedCuisine) path += localize(this.selectedCuisine);
else path = "cuis";
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
switch (this.selectedFilterType) {
case "cuisine":
return this.cuisinesWithRecipes;
break;
case 'category':
return this.categoriesWithRecipes
case "category":
return this.categoriesWithRecipes;
break;
case 'tag':
return this.tagsWithRecipes
case "tag":
return this.tagsWithRecipes;
break;
}
},
cuisinesWithRecipes() {
let arr = this.recipes.map( ( e ) => e.cuisine ).sort()
return arr.length ? [ "allCuis", ...new Set( arr ) ] : []
let arr = this.recipes.map((e) => e.cuisine).sort();
return arr.length ? ["allCuis", ...new Set(arr)] : [];
},
categoriesWithRecipes() {
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 ) ] : []
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)] : [];
},
tagsWithRecipes() {
let arr = this.recipes.map( e => {
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;
else if ( e.category === this.selectedCategory && e.cuisine === this.selectedCuisine && e.tags.length ) return e.tags;
} ).flat().filter( e => e ).sort()
let showAllTags = this.selectedCuisine === "allCuis" && this.selectedCategory === "allCats"
return arr.length ? [ !showAllTags && "allTs", ...new Set( arr ) ].filter( e => e ) : []
let arr = this.recipes
.map((e) => {
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;
else if (
e.category === this.selectedCategory &&
e.cuisine === this.selectedCuisine &&
e.tags.length
)
return e.tags;
})
.flat()
.filter((e) => e)
.sort();
let showAllTags =
this.selectedCuisine === "allCuis" &&
this.selectedCategory === "allCats";
return arr.length
? [!showAllTags && "allTs", ...new Set(arr)].filter((e) => e)
: [];
},
},
methods: {
...mapActions( [ "setCurrentComponentAction", "initializeListItems", "initializeRecipes", "initializeMealPlans", "setShakeAction" ] ),
...mapActions([
"setCurrentComponentAction",
"initializeListItems",
"initializeRecipes",
"initializeMealPlans",
"setShakeAction",
]),
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 )
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);
}
},
drawerLoad( args ) {
this.drawer = args.object
drawerLoad(args) {
this.drawer = args.object;
},
// HELPERS
setRecipeFilter( item ) {
this.setFilter = this.filterFavourites = this.filterTrylater = false
this.$navigateBack( {
setRecipeFilter(item) {
this.setFilter = this.filterFavourites = this.filterTrylater = false;
this.$navigateBack({
frame: "main-frame",
backstackVisible: false
} )
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()
backstackVisible: false,
});
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.closeDrawer();
}
this.setFilter = true
}, 250 )
this.setCurrentComponentAction( "Filtered recipes" )
this.setFilter = true;
}, 250);
this.setCurrentComponentAction("Filtered recipes");
},
previousRecipeFilter() {
if ( this.selectedCategory ) {
this.selectedFilterType = 'category'
this.selectedTag = this.selectedCategory = null
this.setCurrentComponentAction( "Filtered recipes" )
if (this.selectedCategory) {
this.selectedFilterType = "category";
this.selectedTag = this.selectedCategory = null;
this.setCurrentComponentAction("Filtered recipes");
} else {
this.selectedFilterType = 'cuisine'
this.selectedCuisine = null
this.setCurrentComponentAction( "EnRecipes" )
this.selectedFilterType = "cuisine";
this.selectedCuisine = null;
this.setCurrentComponentAction("EnRecipes");
}
},
showDrawer() {
this.drawer.open()
this.drawer.open();
},
closeDrawer() {
this.drawer.close()
this.drawer.close();
},
getRecipeCount( arg ) {
let count = ''
switch ( arg ) {
case 'EnRecipes':
count = this.recipes.length
getRecipeCount(arg) {
let count = "";
switch (arg) {
case "EnRecipes":
count = this.recipes.length;
break;
case 'trylater':
count = this.recipes.filter( e => !e.tried ).length
case "trylater":
count = this.recipes.filter((e) => !e.tried).length;
break;
case 'favourites':
count = this.recipes.filter( e => e.isFavorite ).length
case "favourites":
count = this.recipes.filter((e) => e.isFavorite).length;
break;
default: {
switch ( this.selectedFilterType ) {
case 'cuisine':
count = this.recipes.filter( e => arg === "allCuis" ? e.cuisine : e.cuisine === arg ).length
switch (this.selectedFilterType) {
case "cuisine":
count = this.recipes.filter((e) =>
arg === "allCuis" ? e.cuisine : e.cuisine === arg
).length;
break;
case 'category':
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
.selectedCuisine && e.category === arg ).length
case "category":
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.selectedCuisine && e.category === arg
).length;
break;
case 'tag':
count = this.recipes.filter( e => {
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"
} else if ( e.category === this.selectedCategory && e.cuisine === this.selectedCuisine ) {
return e.tags.includes( arg ) || arg === "allTs"
case "tag":
count = this.recipes.filter((e) => {
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";
} else if (
e.category === this.selectedCategory &&
e.cuisine === this.selectedCuisine
) {
return e.tags.includes(arg) || arg === "allTs";
}
} ).length
}).length;
break;
}
}
}
return count
return count;
},
selectModeOn( bool ) {
this.gestures = bool
selectModeOn(bool) {
this.gestures = bool;
},
// NAVIGATION HANDLERS
hijackGlobalBackEvent() {
AndroidApplication.on( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
AndroidApplication.on(
AndroidApplication.activityBackPressedEvent,
this.globalBackEvent
);
},
releaseGlobalBackEvent() {
AndroidApplication.off( AndroidApplication.activityBackPressedEvent, this.globalBackEvent )
AndroidApplication.off(
AndroidApplication.activityBackPressedEvent,
this.globalBackEvent
);
},
globalBackEvent( args ) {
if ( this.drawer && this.drawer.isOpened() ) {
args.cancel = true
this.closeDrawer()
globalBackEvent(args) {
if (this.drawer && this.drawer.isOpened()) {
args.cancel = true;
this.closeDrawer();
} else if (
[ "Favourites", "Try Later", "Filtered recipes" ].includes( this.currentComponent ) ) {
args.cancel = true
this.backToHome()
["Favourites", "Try Later", "Filtered recipes"].includes(
this.currentComponent
)
) {
args.cancel = true;
this.backToHome();
}
},
backToHome() {
this.setCurrentComponentAction( "EnRecipes" )
this.filterFavourites = this.filterTrylater = false
this.selectedTag = this.selectedCategory = this.selectedCuisine = null
this.selectedFilterType = "cuisine"
this.setCurrentComponentAction("EnRecipes");
this.filterFavourites = this.filterTrylater = false;
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
this.selectedFilterType = "cuisine";
},
navigateTo( to, title, isTrueComponent ) {
if ( title !== this.currentComponent ) {
if ( isTrueComponent ) {
this.$navigateTo( to, {
backstackVisible: true
} )
this.closeDrawer()
navigateTo(to, title, isTrueComponent) {
if (title !== this.currentComponent) {
if (isTrueComponent) {
this.$navigateTo(to, {
backstackVisible: true,
});
this.closeDrawer();
} else {
this.setCurrentComponentAction( to )
this.$navigateBack( {
this.setCurrentComponentAction(to);
this.$navigateBack({
frame: "main-frame",
backstackVisible: false
} )
this.filterFavourites = to === "Favourites"
this.filterTrylater = to === "Try Later"
this.closeDrawer()
this.selectedTag = this.selectedCategory = this.selectedCuisine = null
this.selectedFilterType = "cuisine"
backstackVisible: false,
});
this.filterFavourites = to === "Favourites";
this.filterTrylater = to === "Try Later";
this.closeDrawer();
this.selectedTag = this.selectedCategory = this.selectedCuisine = null;
this.selectedFilterType = "cuisine";
}
} else {
this.closeDrawer()
this.closeDrawer();
}
},
},
created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
setTimeout( ( e ) => {
Theme.setMode( Theme[ this.appTheme ] )
}, 10 )
if ( !this.recipes.length ) this.initializeRecipes()
this.initializeListItems()
if ( !this.mealPlans.length ) this.initializeMealPlans()
this.setShakeAction( ApplicationSettings.getBoolean( "shakeEnabled", true ) )
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
setTimeout((e) => {
Theme.setMode(Theme[this.appTheme]);
}, 10);
if (!this.recipes.length) this.initializeRecipes();
this.initializeListItems();
if (!this.mealPlans.length) this.initializeMealPlans();
this.setShakeAction(ApplicationSettings.getBoolean("shakeEnabled", true));
},
}
};
</script>

939
app/components/EnRecipes.vue
View file

File diff suppressed because it is too large Load diff

97
app/components/GroceryList.vue
View file

@ -1,83 +1,82 @@
<template>
<Page @loaded="onPageLoad">
<ActionBar flat="true">
<GridLayout rows="*" columns="auto, *, auto">
<MDButton class="er left" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" />
<Label class="title orkm" :text="'grocery' | L" col="1" />
<MDButton class="er left" variant="text" :text="icon.today" automationText="today" col="2" />
</GridLayout>
</ActionBar>
<GridLayout columns="" rows="">
</GridLayout>
</Page>
<Page @loaded="onPageLoad">
<ActionBar flat="true">
<GridLayout rows="*" columns="auto, *, auto">
<MDButton
class="er left"
variant="text"
:text="icon.back"
automationText="Back"
@tap="$navigateBack()"
col="0"
/>
<Label class="title orkm" :text="'grocery' | L" col="1" />
<MDButton
class="er left"
variant="text"
:text="icon.today"
automationText="today"
col="2"
/>
</GridLayout>
</ActionBar>
<GridLayout columns="" rows=""> </GridLayout>
</Page>
</template>
<script>
import {
ApplicationSettings,
Observable,
}
from "@nativescript/core"
import {
SnackBar
} from '@nativescript-community/ui-material-snackbar';
import { ApplicationSettings, Observable } from "@nativescript/core";
import { SnackBar } from "@nativescript-community/ui-material-snackbar";
const snackbar = new SnackBar();
import {
mapState,
mapActions
}
from "vuex"
import { mapState, mapActions } from "vuex";
export default {
data() {
return {
appTheme: "Light",
}
};
},
computed: {
...mapState( [ "icon", "recipes", "mealPlans" ] ),
...mapState(["icon", "recipes", "mealPlans"]),
isLightMode() {
return this.appTheme === "Light"
return this.appTheme === "Light";
},
},
methods: {
...mapActions( [ "setCurrentComponentAction" ] ),
onPageLoad( args ) {
...mapActions(["setCurrentComponentAction"]),
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
this.setCurrentComponentAction( "GroceryList" )
this.setCurrentComponentAction("GroceryList");
},
// HELPERS
// NAVIGATION HANDLERS
viewRecipe( recipeID ) {
let recipe = this.recipes.filter( ( e ) => e.id === recipeID )[ 0 ]
if ( recipe ) {
this.$navigateTo( ViewRecipe, {
viewRecipe(recipeID) {
let recipe = this.recipes.filter((e) => e.id === recipeID)[0];
if (recipe) {
this.$navigateTo(ViewRecipe, {
props: {
filterTrylater: true,
recipeID,
},
backstackVisible: false,
} )
});
}
},
// DATA HANDLERS
undoRemove( message ) {
return snackbar
.action( {
message,
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
actionTextColor: '#ff5200',
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
actionText: 'Undo',
hideDelay: 5000
} )
undoRemove(message) {
return snackbar.action({
message,
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
actionTextColor: "#ff5200",
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
actionText: "Undo",
hideDelay: 5000,
});
},
},
created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
},
}
};
</script>

415
app/components/MealPlanner.vue
View file

@ -1,42 +1,147 @@
<template>
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar androidElevation="1">
<GridLayout rows="*" columns="auto, *, auto, auto">
<MDButton class="er" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" />
<Label class="title orkm" :text="'planner' | L" col="1" />
<MDButton class="er" variant="text" :text="icon.tod" automationText="today" @tap="goToToday" col="2" />
<MDButton class="er" variant="text" :text="edit ? icon.done : icon.edit" automationText="edit" @tap="edit = !edit" col="3" />
</GridLayout>
</ActionBar>
<ScrollView width="100%" height="100%">
<GridLayout rows="auto, *">
<GridLayout class="calendar" width="100%" row="0" columns="*, *, *, *, *, *, *" rows="auto, auto, auto, auto, auto, auto, auto, auto">
<MDButton variant="text" class="er navBtn" col="0" :text="icon.left" @tap="prevMonth" />
<Label class="monthName" col="1" colSpan="5" :text="$options.filters.L(mNames[month]) + ' ' + year" />
<MDButton variant="text" class="er navBtn" col="6" :text="icon.right" @tap="nextMonth" />
<Label class="dayName" row="1" :col="i" v-for="(d,i) in dNames" :key="d" :text="$options.filters.L(d)" />
<Label @loaded="centerLabel" class="day orkm" :androidElevation="hasPlans(d) ? 1 : 0" :class="{'today': isToday(d), 'activeDay': isActive(d),'hasPlans': hasPlans(d)}" :row="getrow(i)" :col="i % 7" v-for="(d, i) in getCal" :key="i"
:text="d ? d : null" @tap="setToday(d)" />
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar androidElevation="1">
<GridLayout rows="*" columns="auto, *, auto, auto">
<MDButton
class="er"
variant="text"
:text="icon.back"
automationText="Back"
@tap="$navigateBack()"
col="0"
/>
<Label class="title orkm" :text="'planner' | L" col="1" />
<MDButton
class="er"
variant="text"
:text="icon.tod"
automationText="today"
@tap="goToToday"
col="2"
/>
<MDButton
class="er"
variant="text"
:text="edit ? icon.done : icon.edit"
automationText="edit"
@tap="edit = !edit"
col="3"
/>
</GridLayout>
<StackLayout row="1" class="dayPlan">
<StackLayout class="hr" margin="16 0 0"></StackLayout>
<StackLayout v-for="(mealType, index) in mealTimes" :key="'mealType' + index" class="plansContainer" :class="mealType">
<GridLayout columns="auto, auto" class="header">
<Label col="0" @tap="edit = true" class="periodLabel orkm" :text="mealType | L" />
<MDButton :visibility="edit ? 'visible' : 'hidden'" col="1" variant="text" class="er" :text="icon.plus" @tap="addRecipe(mealType)" />
</GridLayout>
<GridLayout class="recipe" :paddingTop="index == 0?8:0" :columns="`*, ${edit ? 'auto' : 0}`" v-for="(recipeID, index) in getRecipes[mealType]" :key="mealType + index">
<GridLayout androidElevation="1" col="0" columns="*" class="titleContainer">
<MDRipple class="recipeRipple" @tap="viewRecipe(recipeID)" />
<Label verticalAlignment="center" class="recipeTitle" :text="getRecipeTitle(recipeID)" textWrap="true" />
</ActionBar>
<ScrollView width="100%" height="100%">
<GridLayout rows="auto, *">
<GridLayout
class="calendar"
width="100%"
row="0"
columns="*, *, *, *, *, *, *"
rows="auto, auto, auto, auto, auto, auto, auto, auto"
>
<MDButton
variant="text"
class="er navBtn"
col="0"
:text="icon.left"
@tap="prevMonth"
/>
<Label
class="monthName"
col="1"
colSpan="5"
:text="$options.filters.L(mNames[month]) + ' ' + year"
/>
<MDButton
variant="text"
class="er navBtn"
col="6"
:text="icon.right"
@tap="nextMonth"
/>
<Label
class="dayName"
row="1"
:col="i"
v-for="(d, i) in dNames"
:key="d"
:text="$options.filters.L(d)"
/>
<Label
@loaded="centerLabel"
class="day orkm"
:androidElevation="hasPlans(d) ? 1 : 0"
:class="{
today: isToday(d),
activeDay: isActive(d),
hasPlans: hasPlans(d),
}"
:row="getrow(i)"
:col="i % 7"
v-for="(d, i) in getCal"
:key="i"
:text="d ? d : null"
@tap="setToday(d)"
/>
</GridLayout>
<StackLayout row="1" class="dayPlan">
<StackLayout class="hr" margin="16 0 0"></StackLayout>
<StackLayout
v-for="(mealType, index) in mealTimes"
:key="'mealType' + index"
class="plansContainer"
:class="mealType"
>
<GridLayout columns="auto, auto" class="header">
<Label
col="0"
@tap="edit = true"
class="periodLabel orkm"
:text="mealType | L"
/>
<MDButton
:visibility="edit ? 'visible' : 'hidden'"
col="1"
variant="text"
class="er"
:text="icon.plus"
@tap="addRecipe(mealType)"
/>
</GridLayout>
<MDButton :visibility="edit ? 'visible' : 'hidden'" variant="text" col="1" class="er x" :text="icon.x" @tap="removeRecipe(recipeID, mealType)" />
</GridLayout>
<GridLayout
class="recipe"
:paddingTop="index == 0 ? 8 : 0"
:columns="`*, ${edit ? 'auto' : 0}`"
v-for="(recipeID, index) in getRecipes[mealType]"
:key="mealType + index"
>
<GridLayout
androidElevation="1"
col="0"
columns="*"
class="titleContainer mdr"
@tap="viewRecipe(recipeID)"
>
<Label
verticalAlignment="center"
class="recipeTitle"
:text="getRecipeTitle(recipeID)"
textWrap="true"
/>
</GridLayout>
<MDButton
:visibility="edit ? 'visible' : 'hidden'"
variant="text"
col="1"
class="er x"
:text="icon.x"
@tap="removeRecipe(recipeID, mealType)"
/>
</GridLayout>
</StackLayout>
</StackLayout>
</StackLayout>
</GridLayout>
</ScrollView>
</Page>
</GridLayout>
</ScrollView>
</Page>
</template>
<script>
@ -45,189 +150,203 @@ import {
Page,
Observable,
GestureTypes,
}
from "@nativescript/core"
import {
SnackBar
} from '@nativescript-community/ui-material-snackbar';
} from "@nativescript/core";
import { SnackBar } from "@nativescript-community/ui-material-snackbar";
const snackbar = new SnackBar();
import {
mapState,
mapActions
}
from "vuex"
import ViewRecipe from "./ViewRecipe.vue"
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
import { mapState, mapActions } from "vuex";
import ViewRecipe from "./ViewRecipe.vue";
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue";
import ConfirmDialog from "./modal/ConfirmDialog.vue";
export default {
data() {
return {
appTheme: "Light",
mealTimes: [ "breakfast", "lunch", "dinner", "snacks" ],
dNames: [ 'SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT' ],
mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
dNames: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
year: 2021,
mNames: [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
mNames: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
],
month: 0,
today: null,
edit: false,
}
};
},
computed: {
...mapState( [ "icon", "recipes", "mealPlans" ] ),
...mapState(["icon", "recipes", "mealPlans"]),
todaysTime() {
return new Date( this.year, this.month, this.today, 0 ).getTime()
return new Date(this.year, this.month, this.today, 0).getTime();
},
getRecipes() {
if ( this.mealPlans.length ) {
return this.mealPlans.reduce( ( acc, e ) => {
if ( e.date == this.todaysTime ) {
acc[ e.type ] = [ ...( acc[ e.type ] || [] ), e.title ]
if (this.mealPlans.length) {
return this.mealPlans.reduce((acc, e) => {
if (e.date == this.todaysTime) {
acc[e.type] = [...(acc[e.type] || []), e.title];
}
return acc
}, {} )
} else return 0
return acc;
}, {});
} else return 0;
},
getCal() {
let y = this.year
let m = this.month
let t = this.today
let d = new Date( y, m, t )
let ds = new Date( y, m + 1, 0 ).getDate()
let fd = new Date( y, m, 1 ).getDay()
let days = new Array( fd ).fill( 0 )
for ( let i = 1; i <= ds; i++ ) {
days.push( i )
let y = this.year;
let m = this.month;
let t = this.today;
let d = new Date(y, m, t);
let ds = new Date(y, m + 1, 0).getDate();
let fd = new Date(y, m, 1).getDay();
let days = new Array(fd).fill(0);
for (let i = 1; i <= ds; i++) {
days.push(i);
}
return days;
},
},
methods: {
...mapActions( [ "setCurrentComponentAction", "addMealPlanAction", "deleteMealPlanAction", ] ),
onPageLoad( args ) {
...mapActions([
"setCurrentComponentAction",
"addMealPlanAction",
"deleteMealPlanAction",
]),
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
this.setCurrentComponentAction( "MealPlanner" )
if ( !this.today || this.today === new Date().getDate() ) this.goToToday()
this.setCurrentComponentAction("MealPlanner");
if (!this.today || this.today === new Date().getDate()) this.goToToday();
},
onPageUnload( args ) {
snackbar.dismiss()
onPageUnload(args) {
snackbar.dismiss();
},
// HELPERS
getrow( i ) {
return Math.floor( 2 + i / 7 );
getrow(i) {
return Math.floor(2 + i / 7);
},
getDate( index ) {
let date = new Date()
date.setDate( date.getDate() + index )
return date.getTime()
getDate(index) {
let date = new Date();
date.setDate(date.getDate() + index);
return date.getTime();
},
getRecipeTitle( id ) {
let recipe = this.recipes.filter( ( e ) => e.id === id )[ 0 ]
return recipe ? recipe.title : `[ ${this.$options.filters.L('resNF')} ]`
getRecipeTitle(id) {
let recipe = this.recipes.filter((e) => e.id === id)[0];
return recipe ? recipe.title : `[ ${this.$options.filters.L("resNF")} ]`;
},
centerLabel( args ) {
args.object.android.setGravity( 17 )
centerLabel(args) {
args.object.android.setGravity(17);
},
// NAVIGATION HANDLERS
viewRecipe( recipeID ) {
let recipe = this.recipes.filter( ( e ) => e.id === recipeID )[ 0 ]
if ( recipe ) {
this.$navigateTo( ViewRecipe, {
viewRecipe(recipeID) {
let recipe = this.recipes.filter((e) => e.id === recipeID)[0];
if (recipe) {
this.$navigateTo(ViewRecipe, {
props: {
filterTrylater: true,
recipeID,
},
} )
});
}
},
// CALENDAR
prevMonth() {
if ( this.month == 0 ) {
this.year--
this.month = 11
} else this.month--
if (this.month == 0) {
this.year--;
this.month = 11;
} else this.month--;
},
nextMonth() {
if ( this.month == 11 ) {
this.year++
this.month = 0
} else this.month++
if (this.month == 11) {
this.year++;
this.month = 0;
} else this.month++;
},
goToToday() {
let d = new Date()
this.year = d.getFullYear()
this.month = d.getMonth()
this.today = d.getDate()
let d = new Date();
this.year = d.getFullYear();
this.month = d.getMonth();
this.today = d.getDate();
},
isToday( date ) {
let d = new Date()
return this.year == d.getFullYear() && this.month == d.getMonth() && date == d.getDate()
isToday(date) {
let d = new Date();
return (
this.year == d.getFullYear() &&
this.month == d.getMonth() &&
date == d.getDate()
);
},
isActive( date ) {
return this.today == date
isActive(date) {
return this.today == date;
},
hasPlans( date ) {
let d = new Date( this.year, this.month, date, 0 ).getTime()
return this.mealPlans.filter( e => e.date == d ).length
hasPlans(date) {
let d = new Date(this.year, this.month, date, 0).getTime();
return this.mealPlans.filter((e) => e.date == d).length;
},
setToday( date ) {
if ( date ) this.today = date
setToday(date) {
if (date) this.today = date;
},
newMealPlan( title, date, type, index ) {
this.addMealPlanAction( {
newMealPlan(title, date, type, index) {
this.addMealPlanAction({
title,
date: date ? date : this.todaysTime,
type,
index
} )
index,
});
},
// DATA HANDLERS
addRecipe( type ) {
let filteredRecipes = this.recipes.filter( ( e ) => this.getRecipes[ type ] ? !this.getRecipes[ type ].includes( e.id ) : true )
this.$showModal( ActionDialogWithSearch, {
addRecipe(type) {
let filteredRecipes = this.recipes.filter((e) =>
this.getRecipes[type] ? !this.getRecipes[type].includes(e.id) : true
);
this.$showModal(ActionDialogWithSearch, {
props: {
title: "selRec",
recipes: filteredRecipes,
helpIcon: "cal",
},
} ).then( ( title ) => {
title && this.newMealPlan( title, null, type, null )
} )
}).then((title) => {
title && this.newMealPlan(title, null, type, null);
});
},
removeRecipe( title, type ) {
let date = this.todaysTime
let index = this.mealPlans.findIndex( e => e.title === title && e.type === type && e.date === date )
removeRecipe(title, type) {
let date = this.todaysTime;
let index = this.mealPlans.findIndex(
(e) => e.title === title && e.type === type && e.date === date
);
let mealPlan = {
title,
date,
type,
index
}
this.deleteMealPlanAction( mealPlan )
this.undoRemove( `${this.$options.filters.L('recRm')}` ).then( res => {
if ( res.command === 'action' ) {
this.newMealPlan( title, date, type, index )
index,
};
this.deleteMealPlanAction(mealPlan);
this.undoRemove(`${this.$options.filters.L("recRm")}`).then((res) => {
if (res.command === "action") {
this.newMealPlan(title, date, type, index);
}
} )
});
},
undoRemove( message ) {
return snackbar
.action( {
message,
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
actionTextColor: '#ff5200',
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
actionText: 'Undo',
hideDelay: 5000
} )
undoRemove(message) {
return snackbar.action({
message,
textColor: this.appTheme == "Light" ? "#fff" : "#292929",
actionTextColor: "#ff5200",
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
actionText: "Undo",
hideDelay: 5000,
});
},
},
created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" )
this.appTheme = ApplicationSettings.getString("appTheme", "Light");
},
}
};
</script>

1007
app/components/Settings.vue
View file

File diff suppressed because it is too large Load diff

1104
app/components/ViewRecipe.vue
View file

File diff suppressed because it is too large Load diff

173
app/components/modal/ActionDialog.vue
View file

@ -1,115 +1,144 @@
<template>
<Page>
<GridLayout columns="*" :rows="`auto, auto, ${stretch? '*':'auto'}, auto`" class="dialogContainer" :class="appTheme">
<Label row="0" class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon[helpIcon]" />
<Label row="1" class="dialogTitle orkm" :text="`${title}` | L" />
<ScrollView row="2" width="100%">
<StackLayout>
<MDButton v-for="(item, index) in newList" :key="index" class="actionItem" :class="{'orkm':title==='srt' && sortType=== item}" :color="title==='srt' && sortType=== item ? '#ff5200':''" variant="text" :rippleColor="rippleColor"
:text="`${localized(item)}${title==='srt' && sortType=== item ? '*':''}`" @loaded="centerLabel" @tap="tapAction(item)" @longPress="removeItem(index)" />
</StackLayout>
</ScrollView>
<GridLayout row="3" rows="auto" columns="auto, *, auto" class="actionsContainer">
<MDButton :rippleColor="rippleColor" variant="text" v-if="action" col="0" class="action orkm pull-left" :text="`${action}` | L" @tap="$modal.close(action)" />
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm pull-right" :text="'cBtn' | L" @tap="$modal.close(false)" />
<Page>
<GridLayout
columns="*"
:rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
class="dialogContainer"
:class="appTheme"
>
<Label
row="0"
class="er dialogIcon"
backgroundColor="#858585"
:color="iconColor"
:text="icon[helpIcon]"
/>
<Label row="1" class="dialogTitle orkm" :text="`${title}` | L" />
<ScrollView row="2" width="100%">
<StackLayout>
<MDButton
v-for="(item, index) in newList"
:key="index"
class="actionItem"
:class="{ orkm: title === 'srt' && sortType === item }"
:color="title === 'srt' && sortType === item ? '#ff5200' : ''"
variant="text"
:text="`${localized(item)}${
title === 'srt' && sortType === item ? '*' : ''
}`"
@loaded="centerLabel"
@tap="tapAction(item)"
@longPress="removeItem(index)"
/>
</StackLayout>
</ScrollView>
<GridLayout
row="3"
rows="auto"
columns="auto, *, auto"
class="actionsContainer"
>
<MDButton
variant="text"
v-if="action"
col="0"
class="action orkm pull-left"
:text="`${action}` | L"
@tap="$modal.close(action)"
/>
<MDButton
variant="text"
col="2"
class="action orkm pull-right"
:text="'cBtn' | L"
@tap="$modal.close(false)"
/>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>
</Page>
</template>
<script>
import {
Application,
Color
} from "@nativescript/core"
import * as Toast from "nativescript-toast"
import {
localize
}
from "@nativescript/localize"
import {
mapState,
mapActions
}
from "vuex"
import ConfirmDialog from "./ConfirmDialog.vue"
import { Application, Color } from "@nativescript/core";
import * as Toast from "nativescript-toast";
import { localize } from "@nativescript/localize";
import { mapState, mapActions } from "vuex";
import ConfirmDialog from "./ConfirmDialog.vue";
export default {
props: [ "title", "list", "stretch", "action", "helpIcon" ],
props: ["title", "list", "stretch", "action", "helpIcon"],
data() {
return {
newList: this.list,
}
};
},
computed: {
...mapState( [ "sortType", 'icon' ] ),
...mapState(["sortType", "icon"]),
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
},
methods: {
...mapActions( [ "removeListItemAction" ] ),
localized( item ) {
if ( this.title !== 'lang' )
return localize( item )
else
return item
...mapActions(["removeListItemAction"]),
localized(item) {
if (this.title !== "lang") return localize(item);
else return item;
},
tapAction( item ) {
this.$modal.close( item )
tapAction(item) {
this.$modal.close(item);
},
centerLabel( args ) {
args.object.android.setGravity( 16 )
centerLabel(args) {
args.object.android.setGravity(16);
},
deletionConfirmation( type, description ) {
return this.$showModal( ConfirmDialog, {
deletionConfirmation(type, description) {
return this.$showModal(ConfirmDialog, {
props: {
title: 'conf',
title: "conf",
description,
cancelButtonText: "cBtn",
okButtonText: "rBtn",
helpIcon: 'err',
bgColor: '#c92a2a',
helpIcon: "err",
bgColor: "#c92a2a",
},
} )
});
},
removeItem( index ) {
let item = this.newList[ index ]
let vm = this
removeItem(index) {
let item = this.newList[index];
let vm = this;
function removeListItem( type, listName, desc ) {
vm.deletionConfirmation( type, `${localize(desc)} "${localize(item)}"\n\n${localize('rmLIInfo')}` ).then( action => {
if ( action != null && action )
vm.removeListItemAction( {
function removeListItem(type, listName, desc) {
vm.deletionConfirmation(
type,
`${localize(desc)} "${localize(item)}"\n\n${localize("rmLIInfo")}`
).then((action) => {
if (action != null && action)
vm.removeListItemAction({
item,
listName
} )
} )
listName,
});
});
}
switch ( this.title ) {
switch (this.title) {
case "cui":
removeListItem( 'cuisine', "cuisines", "rmCuiInfo" )
removeListItem("cuisine", "cuisines", "rmCuiInfo");
break;
case "cat":
removeListItem( "category", "categories", "rmCatInfo" )
removeListItem("category", "categories", "rmCatInfo");
break;
case "yieldU":
removeListItem( "yield unit", "yieldUnits", "rmYUInfo" )
removeListItem("yield unit", "yieldUnits", "rmYUInfo");
break;
case "Unit":
removeListItem( "unit", "units", "rmUInfo" )
removeListItem("unit", "units", "rmUInfo");
break;
default:
}
}
},
},
}
};
</script>

166
app/components/modal/ActionDialogWithSearch.vue
View file

@ -1,81 +1,139 @@
<template>
<Page>
<GridLayout columns="*" rows="auto, auto, auto, *, auto" class="dialogContainer" :class="appTheme">
<Label row="0" class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon[helpIcon]" />
<Label row="1" class="dialogTitle orkm" :text="`${title}` | L" textWrap='true' />
<StackLayout row="2" v-if="filteredRecipes.length || searchQuery" padding="0 24 24">
<TextField :hint="'Search' | L" v-model="searchQuery" />
</StackLayout>
<ScrollView row="3" width="100%" :height="height ? height : ''">
<StackLayout>
<MDButton v-for="(recipe, index) in filteredRecipes" :key="index" class="actionItem" variant="text" :rippleColor="rippleColor" :text="recipe.title" @loaded="centerLabel" @tap="tapAction(recipe)" />
<Label padding="24" lineHeight="6" v-if="!filteredRecipes.length && !searchQuery" :text="'recListEmp' | L" textAlignment="center" textWrap="true" />
<Label padding="24" lineHeight="6" v-if="!filteredRecipes.length && searchQuery" :text="'noRecs' | L" textAlignment="center" textWrap="true" />
<Page>
<GridLayout
columns="*"
rows="auto, auto, auto, *, auto"
class="dialogContainer"
:class="appTheme"
>
<Label
row="0"
class="er dialogIcon"
backgroundColor="#858585"
:color="iconColor"
:text="icon[helpIcon]"
/>
<Label
row="1"
class="dialogTitle orkm"
:text="`${title}` | L"
textWrap="true"
/>
<StackLayout
row="2"
v-if="filteredRecipes.length || searchQuery"
padding="0 24 24"
>
<TextField :hint="'Search' | L" v-model="searchQuery" />
</StackLayout>
</ScrollView>
<GridLayout row="4" rows="auto" columns="auto, *, auto" class="actionsContainer">
<MDButton :rippleColor="rippleColor" variant="text" v-if="action" col="0" class="action orkm pull-left" :text="`${action}` | L" @tap="$modal.close(action)" />
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm pull-right" :text="'CANCEL' | L" @tap="$modal.close(false)" />
<ScrollView row="3" width="100%" :height="height ? height : ''">
<StackLayout>
<MDButton
v-for="(recipe, index) in filteredRecipes"
:key="index"
class="actionItem"
variant="text"
:text="recipe.title"
@loaded="centerLabel"
@tap="tapAction(recipe)"
/>
<Label
padding="24"
lineHeight="6"
v-if="!filteredRecipes.length && !searchQuery"
:text="'recListEmp' | L"
textAlignment="center"
textWrap="true"
/>
<Label
padding="24"
lineHeight="6"
v-if="!filteredRecipes.length && searchQuery"
:text="'noRecs' | L"
textAlignment="center"
textWrap="true"
/>
</StackLayout>
</ScrollView>
<GridLayout
row="4"
rows="auto"
columns="auto, *, auto"
class="actionsContainer"
>
<MDButton
variant="text"
v-if="action"
col="0"
class="action orkm pull-left"
:text="`${action}` | L"
@tap="$modal.close(action)"
/>
<MDButton
variant="text"
col="2"
class="action orkm pull-right"
:text="'CANCEL' | L"
@tap="$modal.close(false)"
/>
</GridLayout>
</GridLayout>
</GridLayout>
</Page>
</Page>
</template>
<script>
import {
Application
}
from "@nativescript/core"
import {
mapState
}
from "vuex"
import { Application } from "@nativescript/core";
import { mapState } from "vuex";
export default {
props: [ "title", "recipes", "height", "action", "helpIcon" ],
props: ["title", "recipes", "height", "action", "helpIcon"],
data() {
return {
searchQuery: "",
}
};
},
computed: {
...mapState( [ 'icon' ] ),
...mapState(["icon"]),
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
filteredRecipes() {
return this.recipes.map( ( e, i ) => {
return {
id: e.id,
title: e.title,
cuisine: e.cuisine,
category: e.category,
tags: e.tags.map( e => e.toLowerCase() ).join(),
ingredients: e.ingredients.map( e => e.item.toLowerCase() ).join(),
}
} ).filter( ( e ) => this.recipeFilter( e ) )
return this.recipes
.map((e, i) => {
return {
id: e.id,
title: e.title,
cuisine: e.cuisine,
category: e.category,
tags: e.tags.map((e) => e.toLowerCase()).join(),
ingredients: e.ingredients.map((e) => e.item.toLowerCase()).join(),
};
})
.filter((e) => this.recipeFilter(e));
},
},
methods: {
tapAction( recipe ) {
this.$modal.close( recipe.id )
tapAction(recipe) {
this.$modal.close(recipe.id);
},
centerLabel( args ) {
args.object.android.setGravity( 16 )
centerLabel(args) {
args.object.android.setGravity(16);
},
recipeFilter( e ) {
let searchQuery = this.searchQuery.toLowerCase()
return e.title.includes( searchQuery ) || e.cuisine.includes( searchQuery ) || e.category.includes( searchQuery ) || e.tags.includes( searchQuery ) || e.ingredients.includes( searchQuery )
recipeFilter(e) {
let searchQuery = this.searchQuery.toLowerCase();
return (
e.title.includes(searchQuery) ||
e.cuisine.includes(searchQuery) ||
e.category.includes(searchQuery) ||
e.tags.includes(searchQuery) ||
e.ingredients.includes(searchQuery)
);
},
},
}
};
</script>

77
app/components/modal/ConfirmDialog.vue
View file

@ -1,42 +1,63 @@
<template>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label class="er dialogIcon" :backgroundColor="bgColor" :color="iconColor" :text="icon[helpIcon]" />
<Label class="dialogTitle orkm" :text="`${title}` | L" textWrap="true" />
<Label v-if="description" class="dialogDescription" :text="description" textWrap="true" />
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton v-if="cancelButtonText" :rippleColor="rippleColor" variant="text" col="1" class="action orkm" :text="`${cancelButtonText}` | L" @tap="$modal.close(false)" />
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm" :text="`${okButtonText}` | L" @tap="$modal.close(true)" />
</GridLayout>
</StackLayout>
</Page>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label
class="er dialogIcon"
:backgroundColor="bgColor"
:color="iconColor"
:text="icon[helpIcon]"
/>
<Label class="dialogTitle orkm" :text="`${title}` | L" textWrap="true" />
<Label
v-if="description"
class="dialogDescription"
:text="description"
textWrap="true"
/>
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton
v-if="cancelButtonText"
variant="text"
col="1"
class="action orkm"
:text="`${cancelButtonText}` | L"
@tap="$modal.close(false)"
/>
<MDButton
variant="text"
col="2"
class="action orkm"
:text="`${okButtonText}` | L"
@tap="$modal.close(true)"
/>
</GridLayout>
</StackLayout>
</Page>
</template>
<script>
import {
Application
}
from "@nativescript/core"
import {
mapState
}
from "vuex"
import { Application } from "@nativescript/core";
import { mapState } from "vuex";
export default {
props: [ "title", "description", "cancelButtonText", "okButtonText", "helpIcon", "bgColor" ],
props: [
"title",
"description",
"cancelButtonText",
"okButtonText",
"helpIcon",
"bgColor",
],
computed: {
...mapState( [ "icon" ] ),
...mapState(["icon"]),
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
},
}
};
</script>

124
app/components/modal/ListPicker.vue
View file

@ -1,86 +1,110 @@
<template>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon.time" />
<Label class="dialogTitle orkm" :text="`${title}` | L" />
<StackLayout class="dialogListPicker" orientation="horizontal" horizontalAlignment="center">
<ListPicker ref="hrPicker" :items="hrsList" :selectedIndex="hrIndex" @selectedIndexChange="setHrs"></ListPicker>
<ListPicker ref="minPicker" :items="minsList" :selectedIndex="minIndex" @selectedIndexChange="setMins"></ListPicker>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label
class="er dialogIcon"
backgroundColor="#858585"
:color="iconColor"
:text="icon.time"
/>
<Label class="dialogTitle orkm" :text="`${title}` | L" />
<StackLayout
class="dialogListPicker"
orientation="horizontal"
horizontalAlignment="center"
>
<ListPicker
ref="hrPicker"
:items="hrsList"
:selectedIndex="hrIndex"
@selectedIndexChange="setHrs"
></ListPicker>
<ListPicker
ref="minPicker"
:items="minsList"
:selectedIndex="minIndex"
@selectedIndexChange="setMins"
></ListPicker>
</StackLayout>
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton
variant="text"
col="1"
class="action orkm"
:text="'cBtn' | L"
@tap="$modal.close(false)"
/>
<MDButton
variant="text"
col="2"
class="action orkm"
:text="`${action}` | L"
@tap="$modal.close(selectedTime)"
/>
</GridLayout>
</StackLayout>
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton :rippleColor="rippleColor" variant="text" col="1" class="action orkm" :text="'cBtn' | L" @tap="$modal.close(false)" />
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm" :text="`${action}` | L" @tap="$modal.close(selectedTime)" />
</GridLayout>
</StackLayout>
</Page>
</Page>
</template>
<script>
import {
Application
}
from "@nativescript/core"
import {
mapState
}
from "vuex"
import {
localize
}
from "@nativescript/localize"
import { Application } from "@nativescript/core";
import { mapState } from "vuex";
import { localize } from "@nativescript/localize";
export default {
props: [ "title", "selectedHr", "selectedMin", "action" ],
props: ["title", "selectedHr", "selectedMin", "action"],
data() {
return {
hrs: [],
mins: [],
selectedHrs: "00",
selectedMins: "00",
}
};
},
computed: {
...mapState( [ "icon" ] ),
...mapState(["icon"]),
hrsList() {
let h = [ ...Array( 24 ).keys() ]
this.hrs = h
return h.map( e => `${e} ${localize( 'hr' )}` )
let h = [...Array(24).keys()];
this.hrs = h;
return h.map((e) => `${e} ${localize("hr")}`);
},
minsList() {
let m = [ ...new Set( [ ...Array( 11 ).keys(), ...Array.from( Array( 12 ), ( _, x ) => x * 5 ) ] ) ]
this.mins = m
return m.map( e => `${e} ${localize( 'min' )}` )
let m = [
...new Set([
...Array(11).keys(),
...Array.from(Array(12), (_, x) => x * 5),
]),
];
this.mins = m;
return m.map((e) => `${e} ${localize("min")}`);
},
hrIndex() {
return this.hrs.indexOf( parseInt( this.selectedHr ) )
return this.hrs.indexOf(parseInt(this.selectedHr));
},
minIndex() {
return this.mins.indexOf( parseInt( this.selectedMin ) )
return this.mins.indexOf(parseInt(this.selectedMin));
},
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
selectedTime() {
return this.selectedHrs + ":" + this.selectedMins
return this.selectedHrs + ":" + this.selectedMins;
},
},
methods: {
setHrs( args ) {
let hr = "0" + this.hrs[ args.object.selectedIndex ]
this.selectedHrs = hr.slice( -2 )
setHrs(args) {
let hr = "0" + this.hrs[args.object.selectedIndex];
this.selectedHrs = hr.slice(-2);
},
setMins( args ) {
let min = "0" + this.mins[ args.object.selectedIndex ]
this.selectedMins = min.slice( -2 )
setMins(args) {
let min = "0" + this.mins[args.object.selectedIndex];
this.selectedMins = min.slice(-2);
},
},
}
};
</script>

90
app/components/modal/PromptDialog.vue
View file

@ -1,65 +1,75 @@
<template>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon[helpIcon]" />
<Label class="dialogTitle orkm" :text="`${title}` | L" textWrap='true' />
<StackLayout class="dialogInput">
<TextField @loaded="focusField" :hint="hint ? hint : ''" v-model="category" autocapitalizationType="words" @returnPress="$modal.close(category)" />
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label
class="er dialogIcon"
backgroundColor="#858585"
:color="iconColor"
:text="icon[helpIcon]"
/>
<Label class="dialogTitle orkm" :text="`${title}` | L" textWrap="true" />
<StackLayout class="dialogInput">
<TextField
@loaded="focusField"
:hint="hint ? hint : ''"
v-model="category"
autocapitalizationType="words"
@returnPress="$modal.close(category)"
/>
</StackLayout>
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton
variant="text"
col="1"
class="action orkm"
:text="'cBtn' | L"
@tap="$modal.close(false)"
/>
<MDButton
variant="text"
col="2"
class="action orkm"
:text="`${action}` | L"
@tap="$modal.close(category)"
/>
</GridLayout>
</StackLayout>
<GridLayout rows="auto" columns="*, auto, auto" class="actionsContainer">
<MDButton :rippleColor="rippleColor" variant="text" col="1" class="action orkm" :text="'cBtn' | L" @tap="$modal.close(false)" />
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm" :text="`${action}` | L" @tap="$modal.close(category)" />
</GridLayout>
</StackLayout>
</Page>
</Page>
</template>
<script>
import {
Application,
Utils
}
from "@nativescript/core"
import {
localize
}
from '@nativescript/localize'
import {
mapState
}
from "vuex"
import { Application, Utils } from "@nativescript/core";
import { localize } from "@nativescript/localize";
import { mapState } from "vuex";
export default {
props: [ "title", "hint", "text", "action", "helpIcon" ],
props: ["title", "hint", "text", "action", "helpIcon"],
data() {
return {
category: null,
}
};
},
computed: {
...mapState( [ "icon" ] ),
...mapState(["icon"]),
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
},
methods: {
focusField( args ) {
args.object.focus()
setTimeout( ( e ) => Utils.ad.showSoftInput( args.object.android ), 1 )
focusField(args) {
args.object.focus();
setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 1);
},
},
mounted() {
if ( this.text ) {
this.category = localize( this.text )
if (this.text) {
this.category = localize(this.text);
}
},
}
};
</script>

103
app/components/modal/ShareChooser.vue
View file

@ -1,59 +1,80 @@
<template>
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon[helpIcon]" />
<Label class="dialogTitle orkm" :text="`${title}` | L" />
<GridLayout rows="auto, auto, auto" columns="*" class="actionsContainer">
<GridLayout class="shareItem" :backgroundColor="bgColor" row="0" columns="*" rows="auto, auto">
<MDRipple :rippleColor="rippleColor" rowSpan="2" @tap="$modal.close('photo')" />
<Label row="0" class="er" :text="icon.img" />
<Label row="1" class="item" :text="'pht' | L" textWrap="true" />
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label
class="er dialogIcon"
backgroundColor="#858585"
:color="iconColor"
:text="icon[helpIcon]"
/>
<Label class="dialogTitle orkm" :text="`${title}` | L" />
<GridLayout rows="auto, auto, auto" columns="*" class="actionsContainer">
<GridLayout
class="shareItem mdr"
:backgroundColor="bgColor"
row="0"
columns="*"
rows="auto, auto"
@tap="$modal.close('photo')"
>
<Label row="0" class="er" :text="icon.img" />
<Label row="1" class="item" :text="'pht' | L" textWrap="true" />
</GridLayout>
<GridLayout
class="shareItem mdr"
:backgroundColor="bgColor"
row="1"
columns="*"
rows="auto, auto"
@tap="$modal.close('recipe')"
>
<Label row="0" class="er" :text="icon.text" />
<Label row="1" class="item" :text="'rec' | L" textWrap="true" />
</GridLayout>
<!-- <GridLayout
class="shareItem mdr"
:backgroundColor="bgColor"
row="2"
columns="*"
rows="auto, auto"
@tap="$modal.close('file')"
>
<Label row="0" class="er" :text="icon.zip" />
<Label row="1" class="item" :text="'fil' | L" textWrap="true" />
</GridLayout> -->
</GridLayout>
<GridLayout class="shareItem" :backgroundColor="bgColor" row="1" columns="*" rows="auto, auto">
<MDRipple :rippleColor="rippleColor" rowSpan="2" @tap="$modal.close('recipe')" />
<Label row="0" class="er" :text="icon.text" />
<Label row="1" class="item" :text="'rec' | L" textWrap="true" />
<GridLayout rows="auto" columns="*, auto" class="actionsContainer">
<MDButton
variant="text"
col="1"
class="action orkm mdr"
:text="'cBtn' | L"
@tap="$modal.close()"
/>
</GridLayout>
<!-- <GridLayout class="shareItem" :backgroundColor="bgColor" row="2" columns="*" rows="auto, auto">
<MDRipple :rippleColor="rippleColor" rowSpan="2" @tap="$modal.close('file')" />
<Label row="0" class="er" :text="icon.zip" />
<Label row="1" class="item" :text="'fil' | L" textWrap="true" />
</GridLayout> -->
</GridLayout>
<GridLayout rows="auto" columns="*, auto" class="actionsContainer">
<MDButton :rippleColor="rippleColor" variant="text" col="1" class="action orkm" :text="'cBtn' | L" @tap="$modal.close()" />
</GridLayout>
</StackLayout>
</Page>
</StackLayout>
</Page>
</template>
<script>
import {
Application
} from "@nativescript/core"
import {
mapState
} from "vuex"
import { Application } from "@nativescript/core";
import { mapState } from "vuex";
export default {
props: [ "title", "helpIcon" ],
props: ["title", "helpIcon"],
computed: {
...mapState( [ "icon" ] ),
...mapState(["icon"]),
appTheme() {
return Application.systemAppearance()
return Application.systemAppearance();
},
isLightMode() {
return this.appTheme == "light"
},
rippleColor() {
return "rgba(133,133,133,0.2)"
return this.appTheme == "light";
},
iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A"
return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
},
bgColor() {
return this.isLightMode ? "#fff" : "#292929"
return this.isLightMode ? "#fff" : "#292929";
},
},
}
};
</script>

55
app/main.js
View file

@ -1,51 +1,54 @@
import {localize, androidLaunchEventLocalizationHandler} from '@nativescript/localize'
import {on, launchEvent} from '@nativescript/core/application';
import {
localize,
androidLaunchEventLocalizationHandler,
} from '@nativescript/localize'
import { on, launchEvent } from '@nativescript/core/application'
on(launchEvent, (args) => {
if (args.android) {
androidLaunchEventLocalizationHandler();
androidLaunchEventLocalizationHandler()
}
})
import Vue from "nativescript-vue"
import App from "./components/App"
import store from "./store"
import Vue from 'nativescript-vue'
import App from './components/App'
import store from './store'
import {install} from '@nativescript-community/ui-drawer';
install();
import { installMixins } from '@nativescript-community/ui-material-core'
installMixins()
import DrawerPlugin from '@nativescript-community/ui-drawer/vue';
Vue.use(DrawerPlugin);
import { install } from '@nativescript-community/ui-drawer'
install()
// import CollectionView from '@nativescript-community/ui-collectionview/vue';
// Vue.use(CollectionView);
import DrawerPlugin from '@nativescript-community/ui-drawer/vue'
Vue.use(DrawerPlugin)
import ButtonPlugin from "@nativescript-community/ui-material-button/vue"
import CollectionView from '@nativescript-community/ui-collectionview/vue';
Vue.use(CollectionView);
import ButtonPlugin from '@nativescript-community/ui-material-button/vue'
Vue.use(ButtonPlugin)
import ActivityIndicatorPlugin from "@nativescript-community/ui-material-activityindicator/vue"
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue'
Vue.use(ActivityIndicatorPlugin)
import RipplePlugin from "@nativescript-community/ui-material-ripple/vue"
Vue.use(RipplePlugin)
import FloatingActionButtonPlugin from "@nativescript-community/ui-material-floatingactionbutton/vue"
import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue'
Vue.use(FloatingActionButtonPlugin)
import ProgressPlugin from "@nativescript-community/ui-material-progress/vue"
import ProgressPlugin from '@nativescript-community/ui-material-progress/vue'
Vue.use(ProgressPlugin)
import {CheckBox} from "@nstudio/nativescript-checkbox"
Vue.registerElement("CheckBox", () => CheckBox, {
import { CheckBox } from '@nstudio/nativescript-checkbox'
Vue.registerElement('CheckBox', () => CheckBox, {
model: {
prop: "checked",
event: "checkedChange"
}
prop: 'checked',
event: 'checkedChange',
},
})
Vue.config.silent = TNS_ENV === "production"
Vue.config.silent = TNS_ENV === 'production'
Vue.filter('L', localize)
new Vue({
store,
render: h => h("frame", [h(App)])
render: (h) => h('frame', [h(App)]),
}).$start()

15417
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -7,12 +7,12 @@
"dependencies": {
"@nativescript-community/gesturehandler": "^0.1.36",
"@nativescript-community/perms": "^2.1.4",
"@nativescript-community/ui-collectionview": "^4.0.24",
"@nativescript-community/ui-drawer": "0.0.22",
"@nativescript-community/ui-material-activityindicator": "^5.1.16",
"@nativescript-community/ui-material-button": "^5.1.16",
"@nativescript-community/ui-material-floatingactionbutton": "^5.1.16",
"@nativescript-community/ui-material-progress": "^5.1.16",
"@nativescript-community/ui-material-ripple": "^5.1.16",
"@nativescript-community/ui-material-snackbar": "^5.1.16",
"@nativescript/core": "~7.0.0",
"@nativescript/localize": "^5.0.2",