enrecipes/app/components/EnRecipes.vue

1152 lines
34 KiB
Vue
Raw Normal View History

2020-09-15 11:10:16 +00:00
<template>
2021-06-15 11:04:42 +00:00
<Page @loaded="pgLoad" @unloaded="onPageUnload" actionBarHidden="true">
<GridLayout rows="*, auto, 64, 8" columns="*">
<CollectionView
rowSpan="4"
:spanSize="getSpanSize"
for="recipe in getRecipes"
@loaded="cvLoad"
:itemTemplateSelector="getLayout"
:colWidth="layout == 'grid' || layout == 'photogrid' ? '50%' : '100%'"
@scroll="!selectMode && cvScroll($event)"
>
<v-template name="header">
<RGridLayout :rtl="RTL" rows="auto" columns="*, auto, 12">
<RLabel class="pageTitle" :text="`${currentComp}` | L" />
<Button
col="1"
class="ico"
:text="icon.cog"
@tap="navigateTo(AppSettings, 'Settings', 1)"
/>
</RGridLayout>
</v-template>
<v-template name="lists">
<RStackLayout :rtl="RTL" orientation="horizontal" padding="0 16 24">
2021-02-28 15:10:26 +00:00
<GridLayout
2021-06-15 11:04:42 +00:00
rows="48"
columns="auto, auto"
class="segment rtl"
v-for="(item, index) in topmenu"
:key="index"
:class="{
select: currentComp === item.title,
}"
@touch="touchSelector($event, item.title, item.title)"
2021-02-28 15:10:26 +00:00
>
2021-06-15 11:04:42 +00:00
<Label class="ico" :text="icon[item.icon]" />
2021-04-01 10:55:35 +00:00
<Label
2021-06-15 11:04:42 +00:00
col="1"
class="value"
:class="{ r: RTL }"
:hidden="!getRecipeCount(item.title)"
:text="getRecipeCount(item.title)"
2021-04-01 10:55:35 +00:00
/>
2021-02-28 15:10:26 +00:00
</GridLayout>
2021-04-12 18:09:48 +00:00
<GridLayout
2021-06-15 11:04:42 +00:00
:hidden="currentComp !== 'Filtered recipes'"
rows="48"
columns="auto, auto"
class="segment rtl"
:class="{
select: currentComp === 'Filtered recipes',
}"
2021-04-12 18:09:48 +00:00
>
2021-06-15 11:04:42 +00:00
<Label class="ico" :text="icon.filter" />
2021-04-12 18:09:48 +00:00
<Label
2021-06-15 11:04:42 +00:00
col="1"
class="value"
:class="{ r: RTL }"
:text="getRecipeCount('filtered')"
2021-04-12 18:09:48 +00:00
/>
</GridLayout>
2021-06-15 11:04:42 +00:00
</RStackLayout>
</v-template>
<v-template name="detailed">
<RGridLayout
:rtl="RTL"
class="recipeItem"
:class="getItemPos(recipe.id)"
rows="auto"
columns="96, *"
@longPress="
selectMode ? viewRecipe(recipe.id) : addToSelection(recipe.id)
"
@touch="touchRecipe"
@tap="
selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
"
>
<Label
:hidden="recipe.image"
verticalAlignment="center"
class="ico imgHolder"
@loaded="centerLabel"
width="96"
height="96"
fontSize="48"
:text="icon.img"
/>
<Image
class="imgHolder"
verticalAlignment="center"
:hidden="!recipe.image"
:src="recipe.image"
stretch="none"
decodeWidth="96"
decodeHeight="96"
loadMode="async"
/>
<StackLayout class="recipeInfo" col="1">
<RLabel :text="recipe.title" class="tb title tw" />
<RStackLayout :rtl="RTL" class="attrs"
><Label class="ico sm rtl" :text="icon.cuisine" />
<Label class="attr" :text="recipe.cuisine | L" />
<Label class="ico sm" :text="icon.category" />
<Label class="attr" :text="recipe.category | L" />
</RStackLayout>
<RStackLayout
:rtl="RTL"
:hidden="!recipe.tags.length"
class="attrs"
>
<Label class="ico sm rtl" :text="icon.tag" />
<Label class="attr" :text="getTags(recipe.tags)" />
</RStackLayout>
<RStackLayout :rtl="RTL" class="attrs">
<Label class="ico sm" :text="icon.star" />
<Label class="attr" :text="getLocaleN(recipe.rating)" />
<Label class="ico sm" :text="icon.time" />
<Label
class="attr"
:text="`${totalTime(recipe.prepTime, recipe.cookTime).time}`"
/>
<Label class="ico sm" :text="icon.diff" />
<Label class="attr" :text="recipe.difficulty | L" />
</RStackLayout>
</StackLayout>
</RGridLayout>
</v-template>
<v-template name="grid">
<GridLayout
class="recipeItem grid"
:class="getItemPos(recipe.id)"
rows="auto, auto"
columns="*"
@longPress="
selectMode ? viewRecipe(recipe.id) : addToSelection(recipe.id)
"
@touch="touchRecipe"
@tap="
selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
"
>
<Image
class="imgHolder"
v-if="recipe.image"
:src="recipe.image"
stretch="aspectFit"
:decodeWidth="imgWidth"
:decodeHeight="imgWidth"
loadMode="async"
/>
<Label
v-else
width="100%"
:height="imgWidth"
@loaded="centerLabel"
class="ico imgHolder"
:fontSize="imgWidth / 2"
:text="icon.img"
/>
<StackLayout class="recipeInfo" row="1">
<RLabel :text="recipe.title" class="tb title tw" />
<FlexboxLayout
flexWrap="wrap"
:justifyContent="RTL ? 'flex-end' : 'flex-start'"
>
<RStackLayout :rtl="RTL" class="attrs">
<Label class="ico sm rtl" :text="icon.cuisine" />
2021-04-01 10:55:35 +00:00
<Label class="attr" :text="recipe.cuisine | L" />
2021-06-15 11:04:42 +00:00
</RStackLayout>
<RStackLayout :rtl="RTL" class="attrs">
2021-04-01 10:55:35 +00:00
<Label class="ico sm" :text="icon.category" />
<Label class="attr" :text="recipe.category | L" />
2021-06-15 11:04:42 +00:00
</RStackLayout>
</FlexboxLayout>
<RStackLayout
:rtl="RTL"
:hidden="!recipe.tags.length"
class="attrs"
>
<Label class="ico sm rtl" :text="icon.tag" />
<Label class="attr" :text="getTags(recipe.tags)" />
</RStackLayout>
</StackLayout>
</GridLayout>
</v-template>
<v-template name="photogrid">
<RGridLayout
:rtl="RTL"
class="recipeItem grid photogrid"
:class="getItemPos(recipe.id)"
rows="auto, auto"
columns="*"
@longPress="
selectMode ? viewRecipe(recipe.id) : addToSelection(recipe.id)
"
@touch="touchRecipe"
@tap="
selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
"
2021-04-01 10:55:35 +00:00
>
2021-06-15 11:04:42 +00:00
<Image
class="imgHolder"
v-if="recipe.image"
:src="recipe.image"
stretch="aspectFit"
:decodeWidth="imgWidth"
:decodeHeight="imgWidth"
loadMode="async"
/>
<Label
v-else
width="100%"
:height="imgWidth"
@loaded="centerLabel"
class="ico imgHolder"
:fontSize="imgWidth / 2"
:text="icon.img"
/>
<StackLayout class="recipeInfo" row="1">
<RLabel :text="recipe.title" class="tb title tw" />
</StackLayout>
</RGridLayout>
</v-template>
<v-template name="simple">
<RGridLayout
:rtl="RTL"
class="recipeItem simple"
:class="getItemPos(recipe.id)"
columns="*"
@longPress="
selectMode ? viewRecipe(recipe.id) : addToSelection(recipe.id)
"
@touch="touchRecipe"
@tap="
selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
"
2021-04-01 10:55:35 +00:00
>
2021-06-15 11:04:42 +00:00
<StackLayout class="recipeInfo">
<RLabel :text="recipe.title" class="tb title tw" />
<RStackLayout :rtl="RTL" class="attrs">
<Label class="ico sm rtl" :text="icon.cuisine" />
<Label class="attr" :text="recipe.cuisine | L" />
<Label class="ico sm" :text="icon.category" />
<Label class="attr" :text="recipe.category | L" />
</RStackLayout>
<RStackLayout
:rtl="RTL"
:hidden="!recipe.tags.length"
class="attrs"
>
<Label class="ico sm rtl" :text="icon.tag" />
<Label class="attr" :text="getTags(recipe.tags)" />
</RStackLayout>
</StackLayout>
</RGridLayout>
</v-template>
<v-template name="minimal">
<GridLayout
class="recipeItem simple minimal"
:class="getItemPos(recipe.id)"
columns="*"
@longPress="
selectMode ? viewRecipe(recipe.id) : addToSelection(recipe.id)
"
@touch="touchRecipe"
@tap="
selectMode ? addToSelection(recipe.id) : viewRecipe(recipe.id)
"
2021-04-01 10:55:35 +00:00
>
2021-06-15 11:04:42 +00:00
<StackLayout class="recipeInfo">
<RLabel :text="recipe.title" class="tb title tw" />
</StackLayout>
</GridLayout>
</v-template>
</CollectionView>
<GridLayout
rowSpan="2"
class="emptyState"
v-if="emptyState"
rows="*, auto, auto"
columns="*"
>
<RLabel row="1" class="title" :text="emptyState.title | L" />
<Button
row="2"
v-if="
emptyState.action &&
(filterFavourites || filterTrylater || selCuisine)
"
class="text big"
@loaded="setGravity"
:text="emptyState.sub | L"
@tap="emptyState.action"
/>
<RLabel
row="2"
v-else-if="!emptyState.action"
:text="emptyState.sub | L"
/>
</GridLayout>
<StackLayout row="1" rowSpan="2" margin="12 8">
2021-04-01 10:55:35 +00:00
<GridLayout
2021-06-15 11:04:42 +00:00
@loaded="tbLoad"
2021-05-22 08:56:31 +00:00
rows="auto, auto"
2021-04-01 10:55:35 +00:00
columns="auto"
2021-06-15 11:04:42 +00:00
class="appbar toolbar hal"
:class="{ r: RTL }"
2021-04-12 18:09:48 +00:00
:hidden="!showTools"
2021-02-28 15:10:26 +00:00
>
2021-06-15 11:04:42 +00:00
<RGridLayout
:rtl="RTL"
2021-05-22 08:56:31 +00:00
rows="48"
class="tool"
columns="auto, *"
2021-06-15 11:04:42 +00:00
@touch="touchTool($event, CookingTimer, 'timer')"
2021-05-22 08:56:31 +00:00
>
<Label class="ico" :text="icon.timer" />
2021-06-15 11:04:42 +00:00
<Label col="1" class="value" :text="'timer' | L" />
</RGridLayout>
<RGridLayout
:rtl="RTL"
2021-04-01 10:55:35 +00:00
row="1"
rows="48"
class="tool"
columns="auto, *"
2021-06-15 11:04:42 +00:00
@touch="touchTool($event, MealPlanner, 'planner')"
2021-04-01 10:55:35 +00:00
>
<Label class="ico" :text="icon.cal" />
2021-06-15 11:04:42 +00:00
<Label col="1" class="value" :text="'planner' | L" />
</RGridLayout>
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-06-15 11:04:42 +00:00
</StackLayout>
<RGridLayout
row="2"
@loaded="abLoad"
:rtl="RTL"
class="appbar home"
columns="auto, *, auto, auto, auto, auto"
@swipe="stSwipe"
@touch="() => null"
>
<Button
accessibilityLabel="Accessible Label"
accessibilityHint="Just a label"
accessibilityValue="Accessible Label"
class="ico rtl"
@tap="
showSearch
? closeSearch()
: selectMode
? clearSelection()
: toggleTools()
"
:text="
showSearch
? icon.back
: selectMode || showTools
? icon.x
: icon.menu
"
/>
<TextField
id="searchBar"
:class="{ f: RTL }"
@loaded="focusField"
autocapitalizationType="words"
autocorrect="true"
v-if="showSearch"
col="1"
colSpan="5"
:hint="'ser' | L"
@textChange="updateList($event.value)"
/>
<Label
:hidden="!selectMode"
class="title"
:text="`${selection.length} ${$options.filters.L('sltd')}`"
col="1"
/>
<StackLayout
class="rtl"
col="2"
colSpan="3"
orientation="horizontal"
:hidden="!recipes.length || selectMode || showSearch"
2021-02-28 15:10:26 +00:00
>
2021-04-01 10:55:35 +00:00
<Button
class="ico"
2021-06-15 11:04:42 +00:00
:class="{ f: RTL }"
:text="selectMode ? icon.exp : icon.sear"
@tap="selectMode ? exportSelection() : openSearch()"
2021-02-28 15:10:26 +00:00
/>
2021-04-01 10:55:35 +00:00
<Button
class="ico"
2021-06-15 11:04:42 +00:00
:class="{ f: RTL }"
:text="icon.sort"
@tap="openSort"
2021-02-28 15:10:26 +00:00
/>
2021-06-15 11:04:42 +00:00
<Button class="ico" :text="icon.filter" @tap="openFilter" />
</StackLayout>
<Button
:hidden="showSearch || selectMode"
class="ico fab"
:text="icon.plus"
col="5"
@tap="addRecipe"
/>
<Button
:hidden="!selectMode"
class="ico"
:text="icon.del"
col="5"
@tap="deleteSelection"
/>
</RGridLayout>
</GridLayout>
</Page>
2020-09-15 11:10:16 +00:00
</template>
2021-04-01 10:55:35 +00:00
2021-06-15 11:04:42 +00:00
<script lang="ts">
import {
2020-12-29 10:35:19 +00:00
ApplicationSettings,
AndroidApplication,
Utils,
2020-12-29 10:35:19 +00:00
Observable,
Device,
2021-02-28 15:10:26 +00:00
Screen,
2021-04-12 18:09:48 +00:00
CoreTypes,
2021-02-28 15:10:26 +00:00
} from "@nativescript/core";
import { localize } from "@nativescript/localize";
2020-12-29 10:35:19 +00:00
import {
startAccelerometerUpdates,
stopAccelerometerUpdates,
2021-03-23 06:16:25 +00:00
} from "@triniwiz/nativescript-accelerometer";
2021-02-28 15:10:26 +00:00
import { mapActions, mapState } from "vuex";
2021-06-15 11:04:42 +00:00
import ViewRecipe from "./ViewRecipe.vue";
import EditRecipe from "./EditRecipe.vue";
import MealPlanner from "./MealPlanner.vue";
import CookingTimer from "./CookingTimer.vue";
// import GroceryList from "./GroceryList.vue";
import AppSettings from "./settings/AppSettings.vue";
import Action from "./modals/Action.vue";
import Confirm from "./modals/Confirm.vue";
import Filters from "./modals/Filter.vue";
2021-04-12 18:09:48 +00:00
import * as utils from "~/shared/utils";
2020-12-29 10:35:19 +00:00
let lastTime = 0;
let lastShake = 0;
let lastForce = 0;
let shakeCount = 0;
2021-01-13 05:02:48 +00:00
let typingTimer;
2021-04-01 10:55:35 +00:00
let filterTimer;
2020-10-14 19:32:32 +00:00
export default {
2020-09-15 11:10:16 +00:00
data() {
return {
2020-10-14 19:32:32 +00:00
searchQuery: "",
2021-06-15 11:04:42 +00:00
showSearch: 0,
deletionDialogActive: 0,
2021-01-23 17:20:15 +00:00
selection: [],
2021-06-15 11:04:42 +00:00
selectMode: 0,
2021-04-01 10:55:35 +00:00
listview: null,
appbar: null,
2021-06-15 11:04:42 +00:00
toolbar: null,
2021-04-01 10:55:35 +00:00
scrollPos: 1,
2021-06-15 11:04:42 +00:00
filterFavourites: 0,
filterTrylater: 0,
2021-05-25 14:32:53 +00:00
AppSettings: AppSettings,
2021-04-01 10:55:35 +00:00
MealPlanner: MealPlanner,
2021-05-22 08:56:31 +00:00
CookingTimer: CookingTimer,
2021-06-15 11:04:42 +00:00
// GroceryList: GroceryList,
2021-04-01 10:55:35 +00:00
topmenu: [
{
title: "EnRecipes",
icon: "home",
},
{
title: "trylater",
icon: "try",
},
{
title: "favourites",
icon: "fav",
},
],
2021-06-15 11:04:42 +00:00
showTools: 0,
currentComp: "EnRecipes",
};
2020-09-15 11:10:16 +00:00
},
computed: {
2021-02-28 15:10:26 +00:00
...mapState([
"icon",
2021-04-01 10:55:35 +00:00
"sortType",
2021-02-28 15:10:26 +00:00
"recipes",
2021-04-01 10:55:35 +00:00
"cuisines",
"categories",
"yieldUnits",
"mealPlans",
2021-06-15 11:04:42 +00:00
"shake",
2021-03-21 17:02:04 +00:00
"layout",
2021-06-15 11:04:42 +00:00
"selCuisine",
"selCategory",
"selTag",
2021-05-22 08:56:31 +00:00
"timerSound",
2021-06-15 11:04:42 +00:00
"RTL",
2021-02-28 15:10:26 +00:00
]),
2020-09-15 11:10:16 +00:00
filteredRecipes() {
2021-02-28 15:10:26 +00:00
let vm = this;
function getIngredients(e) {
return e.ingredients
.map((f) => f.item.toLowerCase())
.join()
.includes(vm.searchQuery);
2021-01-13 05:02:48 +00:00
}
2021-02-28 15:10:26 +00:00
if (this.filterFavourites) {
return this.recipes
.filter(
(e) =>
2021-05-22 08:56:31 +00:00
e.favorite &&
2021-02-28 15:10:26 +00:00
(e.title.toLowerCase().includes(this.searchQuery) ||
getIngredients(e))
)
.sort(this.sortFunction);
} else if (this.filterTrylater) {
return this.recipes
.filter(
(e) =>
!e.tried &&
(e.title.toLowerCase().includes(this.searchQuery) ||
getIngredients(e))
)
.sort(this.sortFunction);
2021-06-15 11:04:42 +00:00
} else if (this.selCuisine) {
2021-02-28 15:10:26 +00:00
return this.recipes
.filter((e) => {
return (
this.recipeFilter(e) &&
(e.title.toLowerCase().includes(this.searchQuery) ||
getIngredients(e))
);
})
.sort(this.sortFunction);
2020-12-14 13:48:53 +00:00
} else {
2021-02-28 15:10:26 +00:00
return this.recipes
.filter(
(e) =>
e.title.toLowerCase().includes(this.searchQuery) ||
getIngredients(e)
)
.sort(this.sortFunction);
2020-09-15 11:10:16 +00:00
}
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
getRecipes() {
2021-04-01 10:55:35 +00:00
return [{}, {}].concat(this.filteredRecipes);
2020-09-15 11:10:16 +00:00
},
2020-11-28 19:21:57 +00:00
noResultFor() {
2021-06-15 11:04:42 +00:00
if (this.filterFavourites || this.filterTrylater || this.selCuisine)
2021-04-17 16:24:47 +00:00
return "noRecsInL";
2021-01-13 05:02:48 +00:00
return "noRecs";
2020-12-29 10:35:19 +00:00
},
2021-01-23 17:20:15 +00:00
imgWidth() {
2021-04-01 10:55:35 +00:00
return Screen.mainScreen.widthDIPs / 2 - 24;
2021-01-23 17:20:15 +00:00
},
2021-06-15 11:04:42 +00:00
emptyState() {
let rl = this.recipes.length;
let fr = this.filteredRecipes.length;
let ff = this.filterFavourites;
let ftl = this.filterTrylater;
let sq = this.searchQuery;
let r: {
title: string;
sub: string;
action?: Function;
};
if (!rl && !ff && !ftl) {
r.title = "strAdd";
r.sub = "plsAdd";
} else if (!fr && ftl && !sq) {
r.title = "aD";
r.sub = "tLInfo";
} else if (!fr && ff && !sq) {
r.title = "noFavs";
r.sub = "fsList";
} else if (!fr && sq) {
r.title = this.noResultFor;
r.sub = "trySer";
r.action = this.goToHome;
}
return Object.keys(r).length ? r : 0;
},
2020-09-15 11:10:16 +00:00
},
methods: {
2021-02-28 15:10:26 +00:00
...mapActions([
2021-04-01 10:55:35 +00:00
"initListItems",
"initRecipes",
"initMealPlans",
2021-06-15 11:04:42 +00:00
"initTimerPresets",
2021-04-12 18:09:48 +00:00
"setShake",
"setFirstDay",
2021-04-01 10:55:35 +00:00
"setLayout",
2021-04-12 18:09:48 +00:00
"setSortType",
2021-05-22 08:56:31 +00:00
"deleteRecipes",
2021-04-01 10:55:35 +00:00
"clearFilter",
"setTheme",
2021-05-22 08:56:31 +00:00
"setTimerSound",
2021-02-28 15:10:26 +00:00
]),
2021-06-15 11:04:42 +00:00
setComp(comp) {
this.currentComp = comp;
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
pgLoad({ object }) {
2021-05-25 14:32:53 +00:00
object.bindingContext = new Observable();
2021-02-28 15:10:26 +00:00
this.filterFavourites
2021-06-15 11:04:42 +00:00
? this.setComp("favourites")
2021-02-28 15:10:26 +00:00
: this.filterTrylater
2021-06-15 11:04:42 +00:00
? this.setComp("trylater")
: this.selCuisine
? this.setComp("Filtered recipes")
: this.setComp("EnRecipes");
if (this.shake) {
2021-02-28 17:34:27 +00:00
if (utils.hasAccelerometer())
startAccelerometerUpdates((data) => this.onSensorData(data));
2021-06-15 11:04:42 +00:00
else this.setShake(0);
2021-02-28 17:34:27 +00:00
}
2021-04-01 10:55:35 +00:00
this.hijackBackEvent();
setTimeout(() => {
if (this.listview) this.listview.refresh();
}, 1000);
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
},
onPageUnload() {
2021-06-15 11:04:42 +00:00
if (this.shake) stopAccelerometerUpdates();
},
2021-06-15 11:04:42 +00:00
abLoad({ object }) {
2021-04-01 10:55:35 +00:00
this.appbar = object;
},
2021-06-15 11:04:42 +00:00
tbLoad({ object }) {
this.toolbar = object;
},
2021-04-01 10:55:35 +00:00
2021-06-15 11:04:42 +00:00
// Collectionview
cvLoad({ object }) {
2021-04-01 10:55:35 +00:00
const View = android.view.View;
object.android.setOverScrollMode(View.OVER_SCROLL_NEVER);
this.listview = object;
},
2021-06-15 11:04:42 +00:00
cvScroll(args) {
2021-04-01 10:55:35 +00:00
let scrollUp;
let y = args.object.scrollOffset;
if (y) {
scrollUp = y < this.scrollPos;
this.scrollPos = Math.abs(y);
let ab = this.appbar.translateY;
2021-06-15 11:04:42 +00:00
if (!scrollUp && ab == 0) this.hideBars();
else if (scrollUp && ab == 64) this.showBars();
2021-04-01 10:55:35 +00:00
}
},
2021-06-15 11:04:42 +00:00
showBars() {
this.appbar.animate({
translate: { x: 0, y: 0 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
},
hideBars() {
this.showTools && this.toggleTools();
this.appbar.animate({
translate: { x: 0, y: 64 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
},
2021-04-01 10:55:35 +00:00
getSpanSize(index) {
2021-04-12 18:09:48 +00:00
return (this.layout == "grid" || this.layout == "photogrid") &&
(index == 0 || index == 1)
? 2
: 1;
2020-11-23 09:49:58 +00:00
},
2021-04-01 10:55:35 +00:00
getLayout(args, index, items) {
return index == 0 ? "header" : index == 1 ? "lists" : this.layout;
2021-01-23 17:20:15 +00:00
},
2021-06-15 11:04:42 +00:00
// Search
2020-10-21 17:54:45 +00:00
openSearch() {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
this.showSearch = 1;
2021-03-23 09:59:00 +00:00
},
2020-11-10 18:28:48 +00:00
closeSearch() {
this.searchQuery = "";
Utils.ad.dismissSoftInput();
2021-06-15 11:04:42 +00:00
this.showSearch = 0;
2020-11-10 18:28:48 +00:00
},
2021-04-01 10:55:35 +00:00
2021-06-15 11:04:42 +00:00
// Sort
2021-04-01 10:55:35 +00:00
openSort() {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
2021-04-01 10:55:35 +00:00
this.releaseBackEvent();
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2021-04-01 10:55:35 +00:00
props: {
title: "srt",
list: [
2021-06-15 11:04:42 +00:00
"random",
2021-04-12 18:09:48 +00:00
"title",
2021-04-01 10:55:35 +00:00
"Rating",
"Quickest first",
"Slowest first",
"Difficulty level",
"Last updated",
"Newest first",
"Oldest first",
],
2021-06-15 11:04:42 +00:00
selected: this.sortType,
2021-04-01 10:55:35 +00:00
},
}).then((action) => {
2021-05-22 08:56:31 +00:00
if (action && this.sortType !== action) {
2021-04-12 18:09:48 +00:00
this.setSortType(action);
2021-04-01 10:55:35 +00:00
ApplicationSettings.setString("sortType", action);
this.updateSort();
}
this.hijackBackEvent();
});
},
2021-06-15 11:04:42 +00:00
// Filter
openFilter() {
this.setComp("EnRecipes");
this.filterFavourites = this.filterTrylater = 0;
this.showTools && this.toggleTools();
2021-04-01 10:55:35 +00:00
this.releaseBackEvent();
2021-06-15 11:04:42 +00:00
this.$showModal(Filters).then((res) => {
this.setComp(res ? "EnRecipes" : "Filtered recipes");
this.hijackBackEvent();
});
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
// Tools
2021-04-01 10:55:35 +00:00
toggleTools() {
2021-06-15 11:04:42 +00:00
if (this.showTools) {
this.toolbar.translateY = 0;
this.toolbar
.animate({
translate: { x: 0, y: 112 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
})
.then(() => (this.showTools = 0));
} else {
this.showTools = 1;
this.toolbar.translateY = 112;
this.toolbar.animate({
translate: { x: 0, y: 0 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
}
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
// ListHandlers
2021-04-01 10:55:35 +00:00
addToSelection(id) {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
this.selectMode = 1;
2021-04-01 10:55:35 +00:00
this.appbar.translateY = 0;
this.selection.includes(id)
? this.selection.splice(this.selection.indexOf(id), 1)
: this.selection.push(id);
this.selection.length ? this.listview.refresh() : this.clearSelection();
},
clearSelection() {
this.selection = [];
2021-06-15 11:04:42 +00:00
this.selectMode = 0;
2021-04-01 10:55:35 +00:00
this.listview.refresh();
},
deleteSelection() {
2021-06-15 11:04:42 +00:00
this.deletionDialogActive = 1;
2021-05-22 08:56:31 +00:00
let hasMany = this.selection.length > 1;
let what = hasMany
? `${this.selection.length} ${localize("recs")}`
: `"${
this.recipes[
this.recipes.findIndex((e) => e.id === this.selection[0])
].title
}"`;
2021-05-25 14:32:53 +00:00
this.$showModal(Confirm, {
2021-04-01 10:55:35 +00:00
props: {
title: localize("conf"),
2021-05-22 08:56:31 +00:00
description: `${localize(
hasMany ? "delRecsInfo" : "delRecInfo",
what
)}`,
2021-04-01 10:55:35 +00:00
cancelButtonText: "cBtn",
okButtonText: "dBtn",
},
}).then((action) => {
if (action) {
2021-05-22 08:56:31 +00:00
this.deleteRecipes(this.selection);
2021-04-01 10:55:35 +00:00
if (!this.filteredRecipes.length) this.goToHome();
this.clearSelection();
}
2021-06-15 11:04:42 +00:00
this.deletionDialogActive = 0;
2021-04-01 10:55:35 +00:00
});
},
2021-05-22 08:56:31 +00:00
exportSelection() {},
2021-04-01 10:55:35 +00:00
2021-06-15 11:04:42 +00:00
// ShakeDetector
2021-04-01 10:55:35 +00:00
onSensorData({ x, y, z }) {
x = x.toFixed(2);
y = y.toFixed(2);
z = z.toFixed(2);
const FORCE_THRESHOLD = 1;
const TIME_THRESHOLD = 150;
const SHAKE_TIMEOUT = 600;
const SHAKE_THROTTLE = 600;
const SHAKE_COUNT = 3;
const now = Date.now();
if (now - lastForce > SHAKE_TIMEOUT) {
shakeCount = 0;
}
let timeDelta = now - lastTime;
if (timeDelta > TIME_THRESHOLD) {
let forceVector = Math.abs(
Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2)) - 1
);
if (forceVector > FORCE_THRESHOLD) {
shakeCount++;
if (shakeCount >= SHAKE_COUNT && now - lastShake > SHAKE_THROTTLE) {
lastShake = now;
shakeCount = 0;
if (this.filteredRecipes.length) {
utils.vibrate(100);
this.viewRandomRecipe();
}
}
lastForce = now;
}
lastTime = now;
}
},
2021-06-15 11:04:42 +00:00
// Helpers
2021-04-01 10:55:35 +00:00
getRecipeCount(arg) {
let count = 0;
2021-06-15 11:04:42 +00:00
let a = this.selCuisine;
let b = this.selCategory;
let c = this.selTag;
2021-04-01 10:55:35 +00:00
let cuisine = a && a != "allCuis";
let category = b && b != "allCats";
let tag = c && c != "allTs";
let allCuisines = a && a == "allCuis";
let allCategories = b && b == "allCats";
let allTags = c && c == "allTs";
switch (arg) {
case "EnRecipes":
count = this.recipes.length;
break;
case "trylater":
count = this.recipes.filter((e) => !e.tried).length;
break;
case "favourites":
2021-05-22 08:56:31 +00:00
count = this.recipes.filter((e) => e.favorite).length;
2021-04-01 10:55:35 +00:00
break;
default:
count = this.recipes.filter((e) => {
let cui = e.cuisine === a;
let cat = e.category === b;
let t = e.tags.includes(c);
return allCuisines
? allCategories
? tag
? t
2021-06-15 11:04:42 +00:00
: 1
2021-04-01 10:55:35 +00:00
: category
? allTags
? cat
: tag
? cat && t
: cat
2021-06-15 11:04:42 +00:00
: 1
2021-04-01 10:55:35 +00:00
: cuisine
? allCategories
? allTags
? cui
: tag
? cui && t
: cui
: category
? allTags
? cui && cat
: tag
? cui && cat && t
: cui && cat
: cui
2021-06-15 11:04:42 +00:00
: 0;
2021-04-01 10:55:35 +00:00
}).length;
break;
}
2021-06-15 11:04:42 +00:00
return count && this.getLocaleN(count);
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
centerLabel({ object }) {
object.android.setGravity(17);
2021-04-01 10:55:35 +00:00
},
2021-06-15 11:04:42 +00:00
focusField({ object }) {
if (this.RTL) object.android.setGravity(5);
2021-04-01 10:55:35 +00:00
setTimeout((e) => {
2021-06-15 11:04:42 +00:00
object.focus();
setTimeout((e) => Utils.ad.showSoftInput(object.android), 100);
2021-04-01 10:55:35 +00:00
}, 100);
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
updateList(value) {
2021-06-15 11:04:42 +00:00
clearInterval(typingTimer);
typingTimer = setTimeout(() => {
value = value.replace(/\s+$/, "");
2021-03-23 09:59:00 +00:00
this.searchQuery = value.toLowerCase();
2021-02-28 15:10:26 +00:00
}, 750);
},
2021-06-15 11:04:42 +00:00
2021-02-28 15:10:26 +00:00
randomRecipeID() {
// TODO: show only from selected filter
let min = 0;
let max = this.filteredRecipes.length - 1;
let randomIndex = Math.round(Math.random() * (max - min));
return this.filteredRecipes[randomIndex].id;
},
recipeFilter(e) {
2021-06-15 11:04:42 +00:00
let cuisineMatched = e.cuisine === this.selCuisine;
let allCuisines = /allCuis/.test(this.selCuisine);
let categoryMatched = e.category === this.selCategory;
let allCategories = /allCats/.test(this.selCategory);
let tagMatched = e.tags.includes(this.selTag);
let allTags = /allTs/.test(this.selTag);
2021-02-28 15:10:26 +00:00
let cuisine = cuisineMatched || allCuisines;
2020-12-29 10:35:19 +00:00
2021-06-15 11:04:42 +00:00
return this.selTag && !allTags
2021-02-28 15:10:26 +00:00
? (categoryMatched || allCategories) && cuisine && tagMatched
2021-06-15 11:04:42 +00:00
: this.selCategory && !allCategories
2021-02-28 15:10:26 +00:00
? cuisine && categoryMatched
: cuisine;
2020-12-29 10:35:19 +00:00
},
2021-02-28 15:10:26 +00:00
sortFunction(a, b) {
const titleOrder = a.title
.toLowerCase()
.localeCompare(b.title.toLowerCase(), Device.language, {
ignorePunctuation: true,
});
2021-06-15 11:04:42 +00:00
let d1 = this.totalTime(a.prepTime, a.cookTime).duration;
let d2 = this.totalTime(b.prepTime, b.cookTime).duration;
2021-02-28 15:10:26 +00:00
let ld1 = new Date(a.lastModified);
let ld2 = new Date(b.lastModified);
let cd1 = new Date(a.created);
let cd2 = new Date(b.created);
let r1 = a.rating;
let r2 = b.rating;
2021-01-23 17:20:15 +00:00
2021-02-28 15:10:26 +00:00
function difficultyLevel(l) {
switch (l) {
2021-01-23 17:20:15 +00:00
case "Easy":
return 1;
case "Moderate":
return 2;
case "Challenging":
return 3;
}
}
2021-02-28 15:10:26 +00:00
let dl1 = difficultyLevel(a.difficulty);
let dl2 = difficultyLevel(b.difficulty);
switch (this.sortType) {
2021-06-15 11:04:42 +00:00
case "random":
return 0.5 - Math.random();
2021-04-12 18:09:48 +00:00
case "title":
2021-01-23 17:20:15 +00:00
return titleOrder > 0 ? 1 : titleOrder < 0 ? -1 : 0;
case "Quickest first":
return d1 > d2 ? 1 : d1 < d2 ? -1 : 0;
case "Slowest first":
return d1 > d2 ? -1 : d1 < d2 ? 1 : 0;
case "Rating":
return r1 > r2 ? -1 : r1 < r2 ? 1 : 0;
case "Difficulty level":
return dl1 > dl2 ? 1 : dl1 < dl2 ? -1 : 0;
case "Last updated":
return ld1 < ld2 ? 1 : ld1 > ld2 ? -1 : 0;
case "Newest first":
return cd1 < cd2 ? 1 : cd1 > cd2 ? -1 : 0;
case "Oldest first":
return cd1 < cd2 ? -1 : cd1 > cd2 ? 1 : 0;
}
},
2021-03-21 17:02:04 +00:00
getItemPos(id) {
2021-02-28 15:10:26 +00:00
let length = this.filteredRecipes.length;
2021-04-12 18:09:48 +00:00
let l2 = this.layout == "grid" || this.layout == "photogrid";
2021-04-01 10:55:35 +00:00
let oddOrEven = this.oddOrEven(id);
2021-06-15 11:04:42 +00:00
let Rsys = utils.sysRTL();
2021-03-21 17:02:04 +00:00
let itemPos =
id == this.filteredRecipes[0].id ||
(length > 1 && l2 && id == this.filteredRecipes[1].id)
? "firstItem"
: id == this.filteredRecipes[length - 1].id ||
(length > 1 &&
l2 &&
2021-06-15 11:04:42 +00:00
oddOrEven == (Rsys ? " even" : " odd") &&
2021-03-21 17:02:04 +00:00
id == this.filteredRecipes[length - 2].id)
? "lastItem"
: "";
2021-04-01 10:55:35 +00:00
let selection = this.selection.includes(id) ? "selected" : "unselected";
let classes = itemPos + " " + selection;
return l2 ? classes + oddOrEven : classes;
2021-03-21 17:02:04 +00:00
},
oddOrEven(id) {
2021-06-15 11:04:42 +00:00
let c = this.filteredRecipes.findIndex((e) => e.id == id) % 2 === 0;
if (utils.sysRTL()) c = !c;
return c ? " odd" : " even";
2021-01-23 17:20:15 +00:00
},
2021-04-01 10:55:35 +00:00
getTags(tags) {
return tags.join(" · ");
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// NavigationHandlers
2021-04-01 10:55:35 +00:00
hijackBackEvent() {
2021-02-28 15:10:26 +00:00
AndroidApplication.on(
AndroidApplication.activityBackPressedEvent,
2021-04-01 10:55:35 +00:00
this.backEvent
2021-02-28 15:10:26 +00:00
);
2020-10-21 17:54:45 +00:00
},
2021-04-01 10:55:35 +00:00
releaseBackEvent() {
2021-02-28 15:10:26 +00:00
AndroidApplication.off(
AndroidApplication.activityBackPressedEvent,
2021-04-01 10:55:35 +00:00
this.backEvent
2021-02-28 15:10:26 +00:00
);
2020-10-21 17:54:45 +00:00
},
2021-04-01 10:55:35 +00:00
backEvent(args) {
if (this.showSearch) {
args.cancel = true;
this.closeSearch();
} else if (this.selectMode) {
args.cancel = true;
this.clearSelection();
} else if (
2021-04-12 18:09:48 +00:00
["favourites", "trylater", "Filtered recipes"].includes(
2021-06-15 11:04:42 +00:00
this.currentComp
2021-04-01 10:55:35 +00:00
)
) {
args.cancel = true;
this.goToHome();
}
},
goToHome() {
2021-06-15 11:04:42 +00:00
this.setComp("EnRecipes");
2021-04-01 10:55:35 +00:00
this.filterFavourites = this.filterTrylater = null;
this.clearFilter();
},
navigateTo(to, title, page) {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
2021-04-01 10:55:35 +00:00
if (page) {
2021-06-15 11:04:42 +00:00
if (/Settings/.test(title))
this.$navigateTo(to, {
transition: {
name: this.RTL ? "slideRight" : "slide",
duration: 200,
curve: "easeOut",
},
});
else
this.$navigateTo(to, {
animated: false,
});
} else if (title !== this.currentComp) {
this.showBars();
this.setComp(title);
2021-04-12 18:09:48 +00:00
this.filterFavourites = to == "favourites";
this.filterTrylater = to == "trylater";
2021-04-01 10:55:35 +00:00
this.clearFilter();
}
2020-10-21 17:54:45 +00:00
},
2021-06-15 11:04:42 +00:00
stSwipe({ direction }) {
const comps = ["EnRecipes", "trylater", "favourites", "Filtered recipes"];
let index = comps.findIndex((e) => e == this.currentComp);
switch (direction) {
case 1:
if (index > 0) {
this.showBars();
this.navigateTo(comps[index - 1], comps[index - 1]);
this.setComp(comps[index - 1]);
this.filterFavourites = comps[index - 1] == "favourites";
this.filterTrylater = comps[index - 1] == "trylater";
this.clearFilter();
}
break;
case 2:
if (index <= 1) {
this.showBars();
this.navigateTo(comps[index + 1], comps[index + 1]);
this.setComp(comps[index + 1]);
this.filterFavourites = comps[index + 1] == "favourites";
this.filterTrylater = comps[index + 1] == "trylater";
}
break;
}
},
2020-11-10 18:28:48 +00:00
addRecipe() {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
2021-02-28 15:10:26 +00:00
this.$navigateTo(EditRecipe, {
2020-11-10 18:28:48 +00:00
props: {
2020-12-29 10:35:19 +00:00
filterFavourites: this.filterFavourites,
filterTrylater: this.filterTrylater,
2021-02-28 15:10:26 +00:00
},
2021-06-15 11:04:42 +00:00
animated: false,
2021-02-28 15:10:26 +00:00
});
2020-10-21 17:54:45 +00:00
},
2021-02-28 15:10:26 +00:00
viewRecipe(recipeID) {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
2021-02-28 15:10:26 +00:00
this.$navigateTo(ViewRecipe, {
2020-11-10 18:28:48 +00:00
props: {
filterTrylater: this.filterTrylater,
2021-02-28 15:10:26 +00:00
recipeID,
2020-11-10 18:28:48 +00:00
},
2021-06-15 11:04:42 +00:00
animated: false,
2021-02-28 15:10:26 +00:00
});
2020-11-10 18:28:48 +00:00
},
2020-12-29 10:35:19 +00:00
viewRandomRecipe() {
2021-06-15 11:04:42 +00:00
this.showTools && this.toggleTools();
2021-02-28 15:10:26 +00:00
this.$navigateTo(ViewRecipe, {
2020-12-29 10:35:19 +00:00
props: {
2021-06-15 11:04:42 +00:00
filterTrylater: 1,
2021-02-28 15:10:26 +00:00
recipeID: this.randomRecipeID(),
2020-12-29 10:35:19 +00:00
},
2021-06-15 11:04:42 +00:00
animated: false,
2021-02-28 15:10:26 +00:00
});
2021-01-23 17:20:15 +00:00
},
2021-04-12 18:09:48 +00:00
touchSelector({ object, action }, comp, title) {
2021-06-15 11:04:42 +00:00
let selected = this.currentComp == comp;
2021-04-01 10:55:35 +00:00
object.className = action.match(/down|move/)
2021-06-15 11:04:42 +00:00
? `segment r ${selected ? "select" : "fade"}`
: `segment r ${selected && "select"}`;
2021-04-12 18:09:48 +00:00
if (action == "up") this.navigateTo(comp, title);
2020-12-29 10:35:19 +00:00
},
2021-06-15 11:04:42 +00:00
touchRecipe({ object, action }) {
let classes = object.className;
if (!this.selectMode) {
object.className = action.match(/down|move/)
? !classes.includes("fade")
? classes + " fade"
: classes
: classes.replace(/ fade/g, "");
}
},
2021-04-01 10:55:35 +00:00
touchTool({ object, action }, comp, value) {
object.className = action.match(/down|move/) ? `tool fade` : `tool`;
2021-06-15 11:04:42 +00:00
if (action == "up") this.navigateTo(comp, value, 1);
2020-12-29 10:35:19 +00:00
},
2020-09-15 11:10:16 +00:00
},
2021-02-28 15:10:26 +00:00
};
2020-09-15 11:10:16 +00:00
</script>