861 lines
26 KiB
Vue
861 lines
26 KiB
Vue
<template>
|
|
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
|
|
<ActionBar androidElevation="1">
|
|
<GridLayout
|
|
v-if="showSearch"
|
|
columns="auto, *"
|
|
verticalAlignment="center"
|
|
>
|
|
<MDButton
|
|
class="er"
|
|
:text="icon.back"
|
|
variant="text"
|
|
automationText="Back"
|
|
col="0"
|
|
@tap="closeSearch"
|
|
/>
|
|
<SearchBar
|
|
col="1"
|
|
:hint="'ser' | L"
|
|
@textChange="updateList($event.value)"
|
|
@clear="clearSearch"
|
|
/>
|
|
</GridLayout>
|
|
<GridLayout v-else columns="auto, *, auto, auto, auto">
|
|
<MDButton
|
|
class="er"
|
|
col="0"
|
|
variant="text"
|
|
@tap="selectMode ? clearSelection() : showDrawer()"
|
|
:text="selectMode ? icon.x : icon.menu"
|
|
/>
|
|
<Label
|
|
v-if="selectMode"
|
|
class="title orkm"
|
|
:text="`${selection.length} ${$options.filters.L('sltd')}`"
|
|
col="1"
|
|
/>
|
|
<Label
|
|
v-else
|
|
class="title orkm"
|
|
:text="`${currentComponent}` | L"
|
|
col="1"
|
|
/>
|
|
<!-- <MDButton v-if="recipes.length" class="er" :text="layout== 1 ? icon.l1 : layout==2 ? icon.l2 : icon.l3" variant="text" col="2" @tap="switchLayout" /> -->
|
|
<MDButton
|
|
v-if="recipes.length && !selectMode"
|
|
class="er"
|
|
:text="selectMode ? icon.export : icon.sear"
|
|
variant="text"
|
|
col="3"
|
|
@tap="selectMode ? exportSelection() : openSearch()"
|
|
/>
|
|
<MDButton
|
|
v-if="recipes.length"
|
|
class="er"
|
|
:text="selectMode ? icon.del : icon.sort"
|
|
variant="text"
|
|
col="4"
|
|
@tap="selectMode ? deleteSelection() : sortDialog()"
|
|
/>
|
|
</GridLayout>
|
|
</ActionBar>
|
|
<AbsoluteLayout>
|
|
<ListView
|
|
width="100%"
|
|
height="100%"
|
|
for="recipe in filteredRecipes"
|
|
@loaded="listViewLoad"
|
|
:itemTemplateSelector="getLayout"
|
|
>
|
|
<v-template key="one">
|
|
<GridLayout class="recipeContainer" :class="isFirstItem(recipe.id)">
|
|
<GridLayout
|
|
class="recipeItem layout1 mdr"
|
|
rows="104"
|
|
columns="104, *"
|
|
androidElevation="1"
|
|
ref="recipe"
|
|
@longPress="
|
|
selectMode
|
|
? viewRecipe(recipe.id)
|
|
: addToSelection($event, recipe.id)
|
|
"
|
|
@tap="
|
|
selectMode
|
|
? addToSelection($event, recipe.id)
|
|
: viewRecipe(recipe.id)
|
|
"
|
|
>
|
|
<GridLayout class="imageHolder card" rows="104" columns="104">
|
|
<Image
|
|
row="0"
|
|
col="0"
|
|
v-if="recipe.imageSrc"
|
|
:src="recipe.imageSrc"
|
|
stretch="aspectFill"
|
|
decodeWidth="104"
|
|
decodeHeight="104"
|
|
loadMode="async"
|
|
/>
|
|
<Label
|
|
v-else
|
|
row="0"
|
|
col="0"
|
|
horizontalAlignment="center"
|
|
class="er"
|
|
fontSize="56"
|
|
:text="icon.img"
|
|
/>
|
|
</GridLayout>
|
|
<StackLayout class="recipeInfo" col="1">
|
|
<Label
|
|
:text="`${$options.filters.L(
|
|
recipe.cuisine
|
|
)} • ${$options.filters.L(recipe.category)}`"
|
|
class="category"
|
|
/>
|
|
<Label :text="recipe.title" class="orkm title" />
|
|
<GridLayout columns="*" rows="auto, *, auto">
|
|
<StackLayout
|
|
class="attrContainer"
|
|
orientation="horizontal"
|
|
row="0"
|
|
>
|
|
<Label class="er small" :text="icon.star" />
|
|
<Label class="attr" :text="recipe.rating" />
|
|
<Label class="er small" :text="icon.diff" />
|
|
<Label class="attr" :text="`${recipe.difficulty}` | L" />
|
|
<Label class="er small" :text="icon.time" />
|
|
<Label
|
|
class="attr"
|
|
:text="`${
|
|
formattedTotalTime(recipe.prepTime, recipe.cookTime)
|
|
.time
|
|
}`"
|
|
/>
|
|
</StackLayout>
|
|
<StackLayout
|
|
class="tagsContainer"
|
|
orientation="horizontal"
|
|
row="2"
|
|
>
|
|
<Label
|
|
v-for="(tag, index) in recipe.tags"
|
|
:key="index"
|
|
class="tag"
|
|
:text="tag"
|
|
/>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
</GridLayout>
|
|
</v-template>
|
|
|
|
<!-- <v-template key="two">
|
|
<GridLayout class="recipeContainer" :class="isFirstItem(recipe.id)">
|
|
<GridLayout
|
|
class="recipeItem layout2 mdr"
|
|
rows="auto, auto"
|
|
columns="*"
|
|
androidElevation="1"
|
|
ref="recipe"
|
|
@longPress="
|
|
selectMode
|
|
? viewRecipe(recipe.id)
|
|
: addToSelection($event, recipe.id)
|
|
"
|
|
@tap="
|
|
selectMode
|
|
? addToSelection($event, recipe.id)
|
|
: viewRecipe(recipe.id)
|
|
"
|
|
>
|
|
<GridLayout class="imageHolder card" :rows="imgWidth" columns="*">
|
|
<Image
|
|
row="0"
|
|
col="0"
|
|
v-if="recipe.imageSrc"
|
|
:src="recipe.imageSrc"
|
|
stretch="aspectFill"
|
|
:decodeWidth="imgWidth"
|
|
:decodeHeight="imgWidth"
|
|
loadMode="async"
|
|
/>
|
|
<Label
|
|
v-else
|
|
row="0"
|
|
col="0"
|
|
horizontalAlignment="center"
|
|
class="er"
|
|
:fontSize="imgWidth / 2"
|
|
:text="icon.img"
|
|
/>
|
|
</GridLayout>
|
|
<StackLayout class="recipeInfo" row="1">
|
|
<Label
|
|
:text="`${$options.filters.L(
|
|
recipe.cuisine
|
|
)} • ${$options.filters.L(recipe.category)}`"
|
|
class="category"
|
|
/>
|
|
<Label :text="recipe.title" class="orkm title" />
|
|
<StackLayout
|
|
class="tagsContainer"
|
|
orientation="horizontal"
|
|
row="2"
|
|
>
|
|
<Label
|
|
v-for="(tag, index) in recipe.tags"
|
|
:key="index"
|
|
v-if="tag"
|
|
class="tag"
|
|
:text="tag"
|
|
/>
|
|
</StackLayout>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
</GridLayout>
|
|
</v-template>
|
|
<v-template key="three">
|
|
<GridLayout class="recipeContainer" :class="isFirstItem(recipe.id)">
|
|
<GridLayout
|
|
class="recipeItem layout1 mdr"
|
|
rows="auto"
|
|
columns="*"
|
|
androidElevation="1"
|
|
ref="recipe"
|
|
@longPress="
|
|
selectMode
|
|
? viewRecipe(recipe.id)
|
|
: addToSelection($event, recipe.id)
|
|
"
|
|
@tap="
|
|
selectMode
|
|
? addToSelection($event, recipe.id)
|
|
: viewRecipe(recipe.id)
|
|
"
|
|
>
|
|
<StackLayout class="recipeInfo">
|
|
<Label
|
|
:text="`${$options.filters.L(
|
|
recipe.cuisine
|
|
)} • ${$options.filters.L(recipe.category)}`"
|
|
class="category"
|
|
/>
|
|
<Label :text="recipe.title" class="orkm title" />
|
|
<StackLayout class="tagsContainer" orientation="horizontal">
|
|
<Label
|
|
v-for="(tag, index) in recipe.tags"
|
|
:key="index"
|
|
v-if="tag"
|
|
class="tag"
|
|
:text="tag"
|
|
/>
|
|
</StackLayout>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
</GridLayout>
|
|
</v-template> -->
|
|
</ListView>
|
|
<GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
|
|
<StackLayout
|
|
row="1"
|
|
class="emptyState"
|
|
v-if="!recipes.length && !filterFavourites && !filterTrylater"
|
|
@tap="addRecipe"
|
|
>
|
|
<Label class="er icon" :text="icon.plusc" />
|
|
<Label class="title orkm" :text="'strAdd' | L" textWrap="true" />
|
|
<StackLayout orientation="horizontal" horizontalAlignment="center">
|
|
<Label :text="'plsAdd' | L" textWrap="true" />
|
|
</StackLayout>
|
|
</StackLayout>
|
|
<StackLayout
|
|
row="1"
|
|
class="emptyState"
|
|
v-if="!filteredRecipes.length && filterTrylater && !searchQuery"
|
|
>
|
|
<Label class="er icon" :text="icon.try" textWrap="true" />
|
|
<Label class="title orkm" :text="'aD' | L" textWrap="true" />
|
|
<Label :text="'tLInfo' | L" textWrap="true" />
|
|
</StackLayout>
|
|
<StackLayout
|
|
row="1"
|
|
class="emptyState"
|
|
v-if="!filteredRecipes.length && filterFavourites && !searchQuery"
|
|
>
|
|
<Label class="er icon" :text="icon.fav" textWrap="true" />
|
|
<Label class="title orkm" :text="'noFavs' | L" textWrap="true" />
|
|
<Label :text="'fsList' | L" textWrap="true" />
|
|
</StackLayout>
|
|
<StackLayout
|
|
row="1"
|
|
class="emptyState"
|
|
v-if="!filteredRecipes.length && searchQuery"
|
|
>
|
|
<Label class="er icon" :text="icon.noresult" textWrap="true" />
|
|
<Label
|
|
class="title orkm"
|
|
:text="`${noResultFor}` | L"
|
|
textWrap="true"
|
|
/>
|
|
<MDButton
|
|
v-if="filterFavourites || filterTrylater || selectedCuisine"
|
|
variant="text"
|
|
class="searchAll orkm"
|
|
:text="'trySer' | L"
|
|
@tap="searchAll"
|
|
/>
|
|
</StackLayout>
|
|
</GridLayout>
|
|
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
|
|
<transition name="bounce">
|
|
<MDFloatingActionButton
|
|
v-if="showFAB"
|
|
row="1"
|
|
col="1"
|
|
class="er fab-button"
|
|
src="res://plus"
|
|
@tap="addRecipe"
|
|
/>
|
|
</transition>
|
|
</GridLayout>
|
|
</AbsoluteLayout>
|
|
</Page>
|
|
</template>
|
|
<script>
|
|
import {
|
|
ApplicationSettings,
|
|
AndroidApplication,
|
|
Utils,
|
|
Observable,
|
|
Device,
|
|
Screen,
|
|
} from "@nativescript/core";
|
|
import { localize } from "@nativescript/localize";
|
|
import { time } from "tns-core-modules/profiling";
|
|
import {
|
|
startAccelerometerUpdates,
|
|
stopAccelerometerUpdates,
|
|
} from "nativescript-accelerometer";
|
|
import { Vibrate } from "nativescript-vibrate";
|
|
let vibrator = new Vibrate();
|
|
import { mapActions, mapState } from "vuex";
|
|
import EditRecipe from "./EditRecipe.vue";
|
|
import ViewRecipe from "./ViewRecipe.vue";
|
|
import ActionDialog from "./modal/ActionDialog.vue";
|
|
import ConfirmDialog from "./modal/ConfirmDialog.vue";
|
|
import * as utils from "~/shared/utils.js";
|
|
let lastTime = 0;
|
|
let lastShake = 0;
|
|
let lastForce = 0;
|
|
let shakeCount = 0;
|
|
let typingTimer;
|
|
export default {
|
|
props: [
|
|
"filterFavourites",
|
|
"filterTrylater",
|
|
"closeDrawer",
|
|
"showDrawer",
|
|
"selectedCategory",
|
|
"selectedCuisine",
|
|
"selectedTag",
|
|
"hijackGlobalBackEvent",
|
|
"releaseGlobalBackEvent",
|
|
],
|
|
components: {
|
|
EditRecipe,
|
|
ViewRecipe,
|
|
},
|
|
data() {
|
|
return {
|
|
searchQuery: "",
|
|
showSearch: false,
|
|
rightAction: false,
|
|
deletionDialogActive: false,
|
|
showFAB: false,
|
|
filterDone: true,
|
|
selection: [],
|
|
selectMode: false,
|
|
recipeList: [],
|
|
// listView: null,
|
|
layout: 1,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState([
|
|
"sortType",
|
|
"icon",
|
|
"recipes",
|
|
"currentComponent",
|
|
"shakeEnabled",
|
|
]),
|
|
filteredRecipes() {
|
|
let ingredients = this.recipes
|
|
.map((e) => e.ingredients.map((f) => f.item.toLowerCase()).join())
|
|
.join();
|
|
|
|
let vm = this;
|
|
|
|
function getIngredients(e) {
|
|
return e.ingredients
|
|
.map((f) => f.item.toLowerCase())
|
|
.join()
|
|
.includes(vm.searchQuery);
|
|
}
|
|
// if ( this.filterDone ) {
|
|
if (this.filterFavourites) {
|
|
return this.recipes
|
|
.filter(
|
|
(e) =>
|
|
e.isFavorite &&
|
|
(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);
|
|
} else if (this.selectedCuisine) {
|
|
return this.recipes
|
|
.filter((e) => {
|
|
return (
|
|
this.recipeFilter(e) &&
|
|
(e.title.toLowerCase().includes(this.searchQuery) ||
|
|
getIngredients(e))
|
|
);
|
|
})
|
|
.sort(this.sortFunction);
|
|
} else {
|
|
return this.recipes
|
|
.filter(
|
|
(e) =>
|
|
e.title.toLowerCase().includes(this.searchQuery) ||
|
|
getIngredients(e)
|
|
)
|
|
.sort(this.sortFunction);
|
|
}
|
|
// } else {
|
|
// return 0;
|
|
// }
|
|
},
|
|
noResultFor() {
|
|
if (this.filterFavourites) return "noRecsInFavs";
|
|
if (this.filterTrylater) return "noRecsInTL";
|
|
if (this.selectedCuisine) return "noRecsInFtr";
|
|
return "noRecs";
|
|
},
|
|
screenWidth() {
|
|
return Screen.mainScreen.widthDIPs;
|
|
},
|
|
imgWidth() {
|
|
return Screen.mainScreen.widthDIPs / 2 - 20;
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions([
|
|
"setCurrentComponentAction",
|
|
"setSortTypeAction",
|
|
"deleteRecipeAction",
|
|
"deleteRecipesAction",
|
|
"setShakeAction",
|
|
]),
|
|
onPageLoad(args) {
|
|
const page = args.object;
|
|
page.bindingContext = new Observable();
|
|
this.filterFavourites
|
|
? this.setComponent("Favourites")
|
|
: this.filterTrylater
|
|
? this.setComponent("Try Later")
|
|
: this.selectedCuisine
|
|
? this.setComponent("Filtered recipes")
|
|
: this.setComponent("EnRecipes");
|
|
if (!this.selectMode) this.showFAB = true;
|
|
if (this.shakeEnabled) {
|
|
if (utils.hasAccelerometer())
|
|
startAccelerometerUpdates((data) => this.onSensorData(data));
|
|
else this.setShakeAction(false);
|
|
}
|
|
if (this.showSearch || this.selectMode) this.hijackLocalBackEvent();
|
|
this.showDrawer();
|
|
this.closeDrawer();
|
|
},
|
|
onPageUnload() {
|
|
if (this.shakeEnabled) stopAccelerometerUpdates();
|
|
this.releaseGlobalBackEvent();
|
|
this.releaseLocalBackEvent();
|
|
},
|
|
listViewLoad(args) {
|
|
let e = args.object.android;
|
|
e.setSelector(new android.graphics.drawable.StateListDrawable());
|
|
e.setDivider(null);
|
|
e.setDividerHeight(1);
|
|
},
|
|
// switchLayout() {
|
|
// if ( this.layout == 2 ) this.layout = 1
|
|
// else this.layout++
|
|
// },
|
|
getLayout() {
|
|
switch (this.layout) {
|
|
case 1:
|
|
return "one";
|
|
case 2:
|
|
return "two";
|
|
case 3:
|
|
return "three";
|
|
}
|
|
},
|
|
|
|
// HELPERS
|
|
openSearch() {
|
|
this.showSearch = true;
|
|
this.showFAB = false;
|
|
this.hijackLocalBackEvent();
|
|
},
|
|
closeSearch() {
|
|
this.searchQuery = "";
|
|
Utils.ad.dismissSoftInput();
|
|
this.showSearch = false;
|
|
this.showFAB = true;
|
|
this.releaseLocalBackEvent();
|
|
},
|
|
setComponent(comp) {
|
|
this.setCurrentComponentAction(comp);
|
|
this.hijackGlobalBackEvent();
|
|
},
|
|
clearSearch() {
|
|
this.searchQuery = "";
|
|
},
|
|
updateList(value) {
|
|
clearTimeout(typingTimer);
|
|
typingTimer = setTimeout((e) => {
|
|
this.searchQuery = value;
|
|
}, 750);
|
|
},
|
|
formattedTotalTime(prepTime, cookTime) {
|
|
let t1 = prepTime.split(":");
|
|
let t2 = cookTime.split(":");
|
|
let minutes = parseInt(t1[1]) + parseInt(t2[1]);
|
|
let m = minutes % 60;
|
|
let h = parseInt(t1[0]) + parseInt(t2[0]) + Math.floor(minutes / 60);
|
|
let hr = localize("hr");
|
|
let min = localize("min");
|
|
let mins = h * 60 + m;
|
|
return {
|
|
time: h ? (m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}`) : `${m} ${min}`,
|
|
duration: `${mins}`,
|
|
};
|
|
},
|
|
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) {
|
|
let cuisineMatched = e.cuisine === this.selectedCuisine;
|
|
let allCuisines = /allCuis/.test(this.selectedCuisine);
|
|
let categoryMatched = e.category === this.selectedCategory;
|
|
let allCategories = /allCats/.test(this.selectedCategory);
|
|
let tagMatched = e.tags.includes(this.selectedTag);
|
|
let allTags = /allTs/.test(this.selectedTag);
|
|
let cuisine = cuisineMatched || allCuisines;
|
|
|
|
return this.selectedTag && !allTags
|
|
? (categoryMatched || allCategories) && cuisine && tagMatched
|
|
: this.selectedCategory && !allCategories
|
|
? cuisine && categoryMatched
|
|
: cuisine;
|
|
},
|
|
searchAll() {
|
|
this.$emit("backToHome");
|
|
},
|
|
sortFunction(a, b) {
|
|
const titleOrder = a.title
|
|
.toLowerCase()
|
|
.localeCompare(b.title.toLowerCase(), Device.language, {
|
|
ignorePunctuation: true,
|
|
});
|
|
let d1 = this.formattedTotalTime(a.prepTime, a.cookTime).duration;
|
|
let d2 = this.formattedTotalTime(b.prepTime, b.cookTime).duration;
|
|
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;
|
|
|
|
function difficultyLevel(l) {
|
|
switch (l) {
|
|
case "Easy":
|
|
return 1;
|
|
case "Moderate":
|
|
return 2;
|
|
case "Challenging":
|
|
return 3;
|
|
}
|
|
}
|
|
let dl1 = difficultyLevel(a.difficulty);
|
|
let dl2 = difficultyLevel(b.difficulty);
|
|
switch (this.sortType) {
|
|
case "Title":
|
|
return titleOrder > 0 ? 1 : titleOrder < 0 ? -1 : 0;
|
|
break;
|
|
case "Quickest first":
|
|
return d1 > d2 ? 1 : d1 < d2 ? -1 : 0;
|
|
break;
|
|
case "Slowest first":
|
|
return d1 > d2 ? -1 : d1 < d2 ? 1 : 0;
|
|
break;
|
|
case "Rating":
|
|
return r1 > r2 ? -1 : r1 < r2 ? 1 : 0;
|
|
break;
|
|
case "Difficulty level":
|
|
return dl1 > dl2 ? 1 : dl1 < dl2 ? -1 : 0;
|
|
break;
|
|
case "Last updated":
|
|
return ld1 < ld2 ? 1 : ld1 > ld2 ? -1 : 0;
|
|
break;
|
|
case "Newest first":
|
|
return cd1 < cd2 ? 1 : cd1 > cd2 ? -1 : 0;
|
|
break;
|
|
case "Oldest first":
|
|
return cd1 < cd2 ? -1 : cd1 > cd2 ? 1 : 0;
|
|
break;
|
|
}
|
|
},
|
|
isFirstItem(id) {
|
|
let length = this.filteredRecipes.length;
|
|
return id == this.filteredRecipes[0].id
|
|
? "firstItem"
|
|
: id == this.filteredRecipes[length - 1].id
|
|
? "lastItem"
|
|
: "";
|
|
},
|
|
isLastItem(id) {
|
|
let length = this.filteredRecipes.length;
|
|
// let lastIsOdd = ( length - 1 ) % 2 == 0
|
|
// if ( this.filteredRecipes.length > 1 ) {
|
|
// if ( id == this.filteredRecipes[ length - 2 ].id ) {
|
|
// if ( !lastIsOdd ) return 'lastItem'
|
|
// }
|
|
// }
|
|
if (id == this.filteredRecipes[length - 1].id) return "lastItem";
|
|
},
|
|
|
|
// NAVIGATION HANDLERS
|
|
hijackLocalBackEvent() {
|
|
this.releaseGlobalBackEvent();
|
|
AndroidApplication.on(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.localBackEvent
|
|
);
|
|
},
|
|
releaseLocalBackEvent() {
|
|
AndroidApplication.off(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.localBackEvent
|
|
);
|
|
this.hijackGlobalBackEvent();
|
|
},
|
|
localBackEvent(args) {
|
|
args.cancel = true;
|
|
if (this.selectMode) this.clearSelection();
|
|
this.closeDrawer();
|
|
this.closeSearch();
|
|
},
|
|
addRecipe() {
|
|
this.showFAB = false;
|
|
this.releaseGlobalBackEvent();
|
|
this.$navigateTo(EditRecipe, {
|
|
props: {
|
|
selectedCuisine: this.selectedCuisine,
|
|
selectedCategory: this.selectedCategory,
|
|
selectedTag: this.selectedTag,
|
|
filterFavourites: this.filterFavourites,
|
|
filterTrylater: this.filterTrylater,
|
|
},
|
|
});
|
|
},
|
|
viewRecipe(recipeID) {
|
|
this.showFAB = false;
|
|
this.$navigateTo(ViewRecipe, {
|
|
props: {
|
|
filterTrylater: this.filterTrylater,
|
|
recipeID,
|
|
},
|
|
backstackVisible: false,
|
|
});
|
|
},
|
|
viewRandomRecipe() {
|
|
this.showFAB = false;
|
|
this.$navigateTo(ViewRecipe, {
|
|
props: {
|
|
filterTrylater: false,
|
|
recipeID: this.randomRecipeID(),
|
|
},
|
|
backstackVisible: false,
|
|
});
|
|
},
|
|
|
|
// LIST HANDLERS
|
|
sortDialog() {
|
|
this.releaseGlobalBackEvent();
|
|
this.$showModal(ActionDialog, {
|
|
props: {
|
|
title: "srt",
|
|
list: [
|
|
"Title",
|
|
"Quickest first",
|
|
"Slowest first",
|
|
"Rating",
|
|
"Difficulty level",
|
|
"Last updated",
|
|
"Newest first",
|
|
"Oldest first",
|
|
],
|
|
stretch: false,
|
|
helpIcon: "sort",
|
|
bgColor: "#858585",
|
|
},
|
|
}).then((action) => {
|
|
if (action && action !== "Cancel" && this.sortType !== action) {
|
|
this.setSortTypeAction(action);
|
|
ApplicationSettings.setString("sortType", action);
|
|
this.updateSort();
|
|
}
|
|
this.hijackGlobalBackEvent();
|
|
});
|
|
},
|
|
|
|
// DATA HANDLERS
|
|
addToSelection(args, id) {
|
|
this.showFAB = false;
|
|
if (!this.selectMode) this.hijackLocalBackEvent();
|
|
this.selectMode = true;
|
|
this.$emit("selectModeOn", false);
|
|
let item = args.object;
|
|
if (item.className === "selected") {
|
|
item.className = "";
|
|
this.selection.splice(this.selection.indexOf(id), 1);
|
|
this.recipeList.splice(this.selection.indexOf(id), 1);
|
|
} else {
|
|
item.className = "selected";
|
|
this.selection.push(id);
|
|
this.recipeList.push(item);
|
|
}
|
|
if (!this.selection.length) this.clearSelection();
|
|
},
|
|
clearSelection() {
|
|
this.selectMode = false;
|
|
this.$emit("selectModeOn", true);
|
|
this.selection = [];
|
|
this.recipeList.forEach((e) => (e.className = ""));
|
|
this.releaseLocalBackEvent();
|
|
this.showFAB = true;
|
|
},
|
|
deleteSelection() {
|
|
this.selection.length === 1
|
|
? this.deleteRecipe(this.selection[0])
|
|
: this.deleteRecipes(this.selection);
|
|
},
|
|
exportSelection() {},
|
|
deleteRecipe(id) {
|
|
this.deletionDialogActive = true;
|
|
let index = this.recipes.findIndex((e) => e.id === id);
|
|
this.$showModal(ConfirmDialog, {
|
|
props: {
|
|
title: localize("conf"),
|
|
description: `${localize("delRecInfo")} "${
|
|
this.recipes[index].title
|
|
}"`,
|
|
cancelButtonText: "cBtn",
|
|
okButtonText: "dBtn",
|
|
helpIcon: "del",
|
|
bgColor: "#c92a2a",
|
|
},
|
|
}).then((action) => {
|
|
if (action) {
|
|
this.deleteRecipeAction({
|
|
index,
|
|
id,
|
|
});
|
|
if (!this.filteredRecipes.length) this.$emit("backToHome");
|
|
this.clearSelection();
|
|
}
|
|
this.deletionDialogActive = false;
|
|
});
|
|
},
|
|
deleteRecipes(idsArr) {
|
|
this.deletionDialogActive = true;
|
|
this.$showModal(ConfirmDialog, {
|
|
props: {
|
|
title: localize("conf"),
|
|
description: `${localize("delRecsInfo")} ${
|
|
this.selection.length
|
|
} ${localize("recs")}`,
|
|
cancelButtonText: "cBtn",
|
|
okButtonText: "dBtn",
|
|
helpIcon: "del",
|
|
bgColor: "#c92a2a",
|
|
},
|
|
}).then((action) => {
|
|
if (action) {
|
|
this.deleteRecipesAction(idsArr);
|
|
if (!this.filteredRecipes.length) this.$emit("backToHome");
|
|
this.clearSelection();
|
|
}
|
|
this.deletionDialogActive = false;
|
|
});
|
|
},
|
|
|
|
// SHAKE DETECTOR
|
|
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 = time();
|
|
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) {
|
|
vibrator.vibrate(100);
|
|
this.viewRandomRecipe();
|
|
}
|
|
}
|
|
lastForce = now;
|
|
}
|
|
lastTime = now;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.showFAB = true;
|
|
},
|
|
};
|
|
</script>
|