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

626
app/components/App.vue
View file

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

415
app/components/MealPlanner.vue
View file

@ -1,42 +1,147 @@
<template> <template>
<Page @loaded="onPageLoad" @unloaded="onPageUnload"> <Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar androidElevation="1"> <ActionBar androidElevation="1">
<GridLayout rows="*" columns="auto, *, auto, auto"> <GridLayout rows="*" columns="auto, *, auto, auto">
<MDButton class="er" variant="text" :text="icon.back" automationText="Back" @tap="$navigateBack()" col="0" /> <MDButton
<Label class="title orkm" :text="'planner' | L" col="1" /> class="er"
<MDButton class="er" variant="text" :text="icon.tod" automationText="today" @tap="goToToday" col="2" /> variant="text"
<MDButton class="er" variant="text" :text="edit ? icon.done : icon.edit" automationText="edit" @tap="edit = !edit" col="3" /> :text="icon.back"
</GridLayout> automationText="Back"
</ActionBar> @tap="$navigateBack()"
<ScrollView width="100%" height="100%"> col="0"
<GridLayout rows="auto, *"> />
<GridLayout class="calendar" width="100%" row="0" columns="*, *, *, *, *, *, *" rows="auto, auto, auto, auto, auto, auto, auto, auto"> <Label class="title orkm" :text="'planner' | L" col="1" />
<MDButton variant="text" class="er navBtn" col="0" :text="icon.left" @tap="prevMonth" /> <MDButton
<Label class="monthName" col="1" colSpan="5" :text="$options.filters.L(mNames[month]) + ' ' + year" /> class="er"
<MDButton variant="text" class="er navBtn" col="6" :text="icon.right" @tap="nextMonth" /> variant="text"
<Label class="dayName" row="1" :col="i" v-for="(d,i) in dNames" :key="d" :text="$options.filters.L(d)" /> :text="icon.tod"
<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" automationText="today"
:text="d ? d : null" @tap="setToday(d)" /> @tap="goToToday"
col="2"
/>
<MDButton
class="er"
variant="text"
:text="edit ? icon.done : icon.edit"
automationText="edit"
@tap="edit = !edit"
col="3"
/>
</GridLayout> </GridLayout>
<StackLayout row="1" class="dayPlan"> </ActionBar>
<StackLayout class="hr" margin="16 0 0"></StackLayout> <ScrollView width="100%" height="100%">
<StackLayout v-for="(mealType, index) in mealTimes" :key="'mealType' + index" class="plansContainer" :class="mealType"> <GridLayout rows="auto, *">
<GridLayout columns="auto, auto" class="header"> <GridLayout
<Label col="0" @tap="edit = true" class="periodLabel orkm" :text="mealType | L" /> class="calendar"
<MDButton :visibility="edit ? 'visible' : 'hidden'" col="1" variant="text" class="er" :text="icon.plus" @tap="addRecipe(mealType)" /> width="100%"
</GridLayout> row="0"
<GridLayout class="recipe" :paddingTop="index == 0?8:0" :columns="`*, ${edit ? 'auto' : 0}`" v-for="(recipeID, index) in getRecipes[mealType]" :key="mealType + index"> columns="*, *, *, *, *, *, *"
<GridLayout androidElevation="1" col="0" columns="*" class="titleContainer"> rows="auto, auto, auto, auto, auto, auto, auto, auto"
<MDRipple class="recipeRipple" @tap="viewRecipe(recipeID)" /> >
<Label verticalAlignment="center" class="recipeTitle" :text="getRecipeTitle(recipeID)" textWrap="true" /> <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> </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>
</StackLayout> </GridLayout>
</GridLayout> </ScrollView>
</ScrollView> </Page>
</Page>
</template> </template>
<script> <script>
@ -45,189 +150,203 @@ import {
Page, Page,
Observable, Observable,
GestureTypes, GestureTypes,
} } from "@nativescript/core";
from "@nativescript/core" import { SnackBar } from "@nativescript-community/ui-material-snackbar";
import {
SnackBar
} from '@nativescript-community/ui-material-snackbar';
const snackbar = new SnackBar(); const snackbar = new SnackBar();
import { import { mapState, mapActions } from "vuex";
mapState, import ViewRecipe from "./ViewRecipe.vue";
mapActions import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue";
} import ConfirmDialog from "./modal/ConfirmDialog.vue";
from "vuex"
import ViewRecipe from "./ViewRecipe.vue"
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
export default { export default {
data() { data() {
return { return {
appTheme: "Light", appTheme: "Light",
mealTimes: [ "breakfast", "lunch", "dinner", "snacks" ], mealTimes: ["breakfast", "lunch", "dinner", "snacks"],
dNames: [ 'SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT' ], dNames: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"],
year: 2021, year: 2021,
mNames: [ "January", "February", "March", "April", "May", "June", mNames: [
"July", "August", "September", "October", "November", "December" "January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
], ],
month: 0, month: 0,
today: null, today: null,
edit: false, edit: false,
} };
}, },
computed: { computed: {
...mapState( [ "icon", "recipes", "mealPlans" ] ), ...mapState(["icon", "recipes", "mealPlans"]),
todaysTime() { todaysTime() {
return new Date( this.year, this.month, this.today, 0 ).getTime() return new Date(this.year, this.month, this.today, 0).getTime();
}, },
getRecipes() { getRecipes() {
if ( this.mealPlans.length ) { if (this.mealPlans.length) {
return this.mealPlans.reduce( ( acc, e ) => { return this.mealPlans.reduce((acc, e) => {
if ( e.date == this.todaysTime ) { if (e.date == this.todaysTime) {
acc[ e.type ] = [ ...( acc[ e.type ] || [] ), e.title ] acc[e.type] = [...(acc[e.type] || []), e.title];
} }
return acc return acc;
}, {} ) }, {});
} else return 0 } else return 0;
}, },
getCal() { getCal() {
let y = this.year let y = this.year;
let m = this.month let m = this.month;
let t = this.today let t = this.today;
let d = new Date( y, m, t ) let d = new Date(y, m, t);
let ds = new Date( y, m + 1, 0 ).getDate() let ds = new Date(y, m + 1, 0).getDate();
let fd = new Date( y, m, 1 ).getDay() let fd = new Date(y, m, 1).getDay();
let days = new Array( fd ).fill( 0 ) let days = new Array(fd).fill(0);
for ( let i = 1; i <= ds; i++ ) { for (let i = 1; i <= ds; i++) {
days.push( i ) days.push(i);
} }
return days; return days;
}, },
}, },
methods: { methods: {
...mapActions( [ "setCurrentComponentAction", "addMealPlanAction", "deleteMealPlanAction", ] ), ...mapActions([
onPageLoad( args ) { "setCurrentComponentAction",
"addMealPlanAction",
"deleteMealPlanAction",
]),
onPageLoad(args) {
const page = args.object; const page = args.object;
page.bindingContext = new Observable(); page.bindingContext = new Observable();
this.setCurrentComponentAction( "MealPlanner" ) this.setCurrentComponentAction("MealPlanner");
if ( !this.today || this.today === new Date().getDate() ) this.goToToday() if (!this.today || this.today === new Date().getDate()) this.goToToday();
}, },
onPageUnload( args ) { onPageUnload(args) {
snackbar.dismiss() snackbar.dismiss();
}, },
// HELPERS // HELPERS
getrow( i ) { getrow(i) {
return Math.floor( 2 + i / 7 ); return Math.floor(2 + i / 7);
}, },
getDate( index ) { getDate(index) {
let date = new Date() let date = new Date();
date.setDate( date.getDate() + index ) date.setDate(date.getDate() + index);
return date.getTime() return date.getTime();
}, },
getRecipeTitle( id ) { getRecipeTitle(id) {
let recipe = this.recipes.filter( ( e ) => e.id === id )[ 0 ] let recipe = this.recipes.filter((e) => e.id === id)[0];
return recipe ? recipe.title : `[ ${this.$options.filters.L('resNF')} ]` return recipe ? recipe.title : `[ ${this.$options.filters.L("resNF")} ]`;
}, },
centerLabel( args ) { centerLabel(args) {
args.object.android.setGravity( 17 ) args.object.android.setGravity(17);
}, },
// NAVIGATION HANDLERS // NAVIGATION HANDLERS
viewRecipe( recipeID ) { viewRecipe(recipeID) {
let recipe = this.recipes.filter( ( e ) => e.id === recipeID )[ 0 ] let recipe = this.recipes.filter((e) => e.id === recipeID)[0];
if ( recipe ) { if (recipe) {
this.$navigateTo( ViewRecipe, { this.$navigateTo(ViewRecipe, {
props: { props: {
filterTrylater: true, filterTrylater: true,
recipeID, recipeID,
}, },
} ) });
} }
}, },
// CALENDAR // CALENDAR
prevMonth() { prevMonth() {
if ( this.month == 0 ) { if (this.month == 0) {
this.year-- this.year--;
this.month = 11 this.month = 11;
} else this.month-- } else this.month--;
}, },
nextMonth() { nextMonth() {
if ( this.month == 11 ) { if (this.month == 11) {
this.year++ this.year++;
this.month = 0 this.month = 0;
} else this.month++ } else this.month++;
}, },
goToToday() { goToToday() {
let d = new Date() let d = new Date();
this.year = d.getFullYear() this.year = d.getFullYear();
this.month = d.getMonth() this.month = d.getMonth();
this.today = d.getDate() this.today = d.getDate();
}, },
isToday( date ) { isToday(date) {
let d = new Date() let d = new Date();
return this.year == d.getFullYear() && this.month == d.getMonth() && date == d.getDate() return (
this.year == d.getFullYear() &&
this.month == d.getMonth() &&
date == d.getDate()
);
}, },
isActive( date ) { isActive(date) {
return this.today == date return this.today == date;
}, },
hasPlans( date ) { hasPlans(date) {
let d = new Date( this.year, this.month, date, 0 ).getTime() let d = new Date(this.year, this.month, date, 0).getTime();
return this.mealPlans.filter( e => e.date == d ).length return this.mealPlans.filter((e) => e.date == d).length;
}, },
setToday( date ) { setToday(date) {
if ( date ) this.today = date if (date) this.today = date;
}, },
newMealPlan( title, date, type, index ) { newMealPlan(title, date, type, index) {
this.addMealPlanAction( { this.addMealPlanAction({
title, title,
date: date ? date : this.todaysTime, date: date ? date : this.todaysTime,
type, type,
index index,
} ) });
}, },
// DATA HANDLERS // DATA HANDLERS
addRecipe( type ) { addRecipe(type) {
let filteredRecipes = this.recipes.filter( ( e ) => this.getRecipes[ type ] ? !this.getRecipes[ type ].includes( e.id ) : true ) let filteredRecipes = this.recipes.filter((e) =>
this.$showModal( ActionDialogWithSearch, { this.getRecipes[type] ? !this.getRecipes[type].includes(e.id) : true
);
this.$showModal(ActionDialogWithSearch, {
props: { props: {
title: "selRec", title: "selRec",
recipes: filteredRecipes, recipes: filteredRecipes,
helpIcon: "cal", helpIcon: "cal",
}, },
} ).then( ( title ) => { }).then((title) => {
title && this.newMealPlan( title, null, type, null ) title && this.newMealPlan(title, null, type, null);
} ) });
}, },
removeRecipe( title, type ) { removeRecipe(title, type) {
let date = this.todaysTime let date = this.todaysTime;
let index = this.mealPlans.findIndex( e => e.title === title && e.type === type && e.date === date ) let index = this.mealPlans.findIndex(
(e) => e.title === title && e.type === type && e.date === date
);
let mealPlan = { let mealPlan = {
title, title,
date, date,
type, type,
index index,
} };
this.deleteMealPlanAction( mealPlan ) this.deleteMealPlanAction(mealPlan);
this.undoRemove( `${this.$options.filters.L('recRm')}` ).then( res => { this.undoRemove(`${this.$options.filters.L("recRm")}`).then((res) => {
if ( res.command === 'action' ) { if (res.command === "action") {
this.newMealPlan( title, date, type, index ) this.newMealPlan(title, date, type, index);
} }
} ) });
}, },
undoRemove( message ) { undoRemove(message) {
return snackbar return snackbar.action({
.action( { message,
message, textColor: this.appTheme == "Light" ? "#fff" : "#292929",
textColor: this.appTheme == "Light" ? "#fff" : "#292929", actionTextColor: "#ff5200",
actionTextColor: '#ff5200', backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff",
backgroundColor: this.appTheme == "Light" ? "#292929" : "#fff", actionText: "Undo",
actionText: 'Undo', hideDelay: 5000,
hideDelay: 5000 });
} )
}, },
}, },
created() { created() {
this.appTheme = ApplicationSettings.getString( "appTheme", "Light" ) this.appTheme = ApplicationSettings.getString("appTheme", "Light");
}, },
} };
</script> </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> <template>
<Page> <Page>
<GridLayout columns="*" :rows="`auto, auto, ${stretch? '*':'auto'}, auto`" class="dialogContainer" :class="appTheme"> <GridLayout
<Label row="0" class="er dialogIcon" backgroundColor="#858585" :color="iconColor" :text="icon[helpIcon]" /> columns="*"
<Label row="1" class="dialogTitle orkm" :text="`${title}` | L" /> :rows="`auto, auto, ${stretch ? '*' : 'auto'}, auto`"
<ScrollView row="2" width="100%"> class="dialogContainer"
<StackLayout> :class="appTheme"
<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)" /> <Label
</StackLayout> row="0"
</ScrollView> class="er dialogIcon"
<GridLayout row="3" rows="auto" columns="auto, *, auto" class="actionsContainer"> backgroundColor="#858585"
<MDButton :rippleColor="rippleColor" variant="text" v-if="action" col="0" class="action orkm pull-left" :text="`${action}` | L" @tap="$modal.close(action)" /> :color="iconColor"
<MDButton :rippleColor="rippleColor" variant="text" col="2" class="action orkm pull-right" :text="'cBtn' | L" @tap="$modal.close(false)" /> :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>
</GridLayout> </Page>
</Page>
</template> </template>
<script> <script>
import { import { Application, Color } from "@nativescript/core";
Application, import * as Toast from "nativescript-toast";
Color import { localize } from "@nativescript/localize";
} from "@nativescript/core" import { mapState, mapActions } from "vuex";
import * as Toast from "nativescript-toast" import ConfirmDialog from "./ConfirmDialog.vue";
import {
localize
}
from "@nativescript/localize"
import {
mapState,
mapActions
}
from "vuex"
import ConfirmDialog from "./ConfirmDialog.vue"
export default { export default {
props: [ "title", "list", "stretch", "action", "helpIcon" ], props: ["title", "list", "stretch", "action", "helpIcon"],
data() { data() {
return { return {
newList: this.list, newList: this.list,
} };
}, },
computed: { computed: {
...mapState( [ "sortType", 'icon' ] ), ...mapState(["sortType", "icon"]),
appTheme() { appTheme() {
return Application.systemAppearance() return Application.systemAppearance();
}, },
isLightMode() { isLightMode() {
return this.appTheme == "light" return this.appTheme == "light";
},
rippleColor() {
return "rgba(133,133,133,0.2)"
}, },
iconColor() { iconColor() {
return this.isLightMode ? "#f0f0f0" : "#1A1A1A" return this.isLightMode ? "#f0f0f0" : "#1A1A1A";
}, },
}, },
methods: { methods: {
...mapActions( [ "removeListItemAction" ] ), ...mapActions(["removeListItemAction"]),
localized( item ) { localized(item) {
if ( this.title !== 'lang' ) if (this.title !== "lang") return localize(item);
return localize( item ) else return item;
else
return item
}, },
tapAction( item ) { tapAction(item) {
this.$modal.close( item ) this.$modal.close(item);
}, },
centerLabel( args ) { centerLabel(args) {
args.object.android.setGravity( 16 ) args.object.android.setGravity(16);
}, },
deletionConfirmation( type, description ) { deletionConfirmation(type, description) {
return this.$showModal( ConfirmDialog, { return this.$showModal(ConfirmDialog, {
props: { props: {
title: 'conf', title: "conf",
description, description,
cancelButtonText: "cBtn", cancelButtonText: "cBtn",
okButtonText: "rBtn", okButtonText: "rBtn",
helpIcon: 'err', helpIcon: "err",
bgColor: '#c92a2a', bgColor: "#c92a2a",
}, },
} ) });
}, },
removeItem( index ) { removeItem(index) {
let item = this.newList[ index ] let item = this.newList[index];
let vm = this let vm = this;
function removeListItem( type, listName, desc ) { function removeListItem(type, listName, desc) {
vm.deletionConfirmation( type, `${localize(desc)} "${localize(item)}"\n\n${localize('rmLIInfo')}` ).then( action => { vm.deletionConfirmation(
if ( action != null && action ) type,
vm.removeListItemAction( { `${localize(desc)} "${localize(item)}"\n\n${localize("rmLIInfo")}`
).then((action) => {
if (action != null && action)
vm.removeListItemAction({
item, item,
listName listName,
} ) });
} ) });
} }
switch ( this.title ) { switch (this.title) {
case "cui": case "cui":
removeListItem( 'cuisine', "cuisines", "rmCuiInfo" ) removeListItem("cuisine", "cuisines", "rmCuiInfo");
break; break;
case "cat": case "cat":
removeListItem( "category", "categories", "rmCatInfo" ) removeListItem("category", "categories", "rmCatInfo");
break; break;
case "yieldU": case "yieldU":
removeListItem( "yield unit", "yieldUnits", "rmYUInfo" ) removeListItem("yield unit", "yieldUnits", "rmYUInfo");
break; break;
case "Unit": case "Unit":
removeListItem( "unit", "units", "rmUInfo" ) removeListItem("unit", "units", "rmUInfo");
break; break;
default: default:
} }
} },
}, },
} };
</script> </script>

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

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

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

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

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

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

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

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

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

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

55
app/main.js
View file

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