enrecipes/app/components/EnRecipes.vue
2021-02-28 23:04:27 +05:30

860 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>