enrecipes/app/components/ViewRecipe.vue

860 lines
27 KiB
Vue
Raw Normal View History

2020-10-14 19:32:32 +00:00
<template>
2021-02-28 15:10:26 +00:00
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar flat="true">
<GridLayout rows="48" columns="auto, *, auto">
<MDButton
variant="text"
row="0"
col="0"
class="er"
:text="icon.back"
automationText="Back"
@tap="$navigateBack()"
/>
<FlexboxLayout row="0" col="2" alignItems="center">
<MDButton
v-if="!filterTrylater"
variant="text"
class="er"
:text="recipe.tried ? icon.try : icon.tried"
@tap="toggleTrylater"
/>
<MDButton
v-else
variant="text"
class="er"
:text="icon.done"
@tap="recipeTried"
/>
<MDButton
variant="text"
class="er"
:text="recipe.isFavorite ? icon.faved : icon.fav"
@tap="toggleFavourite"
/>
<!-- <MDButton variant="text" class="er" :text="recipe.inBag ? icon.bagged : icon.bag" @tap="toggleCart" /> -->
<MDButton
variant="text"
v-if="!busy"
class="er"
:text="icon.edit"
@tap="editRecipe"
/>
<MDActivityIndicator v-else :busy="busy" />
</FlexboxLayout>
</GridLayout>
</ActionBar>
<AbsoluteLayout>
<Tabs
width="100%"
height="100%"
:selectedIndex="selectedTabIndex"
@selectedIndexChange="selectedIndexChange"
class="viewRecipe"
2021-03-21 17:02:04 +00:00
elevation="0"
2021-02-28 15:10:26 +00:00
>
2021-03-21 17:02:04 +00:00
<TabStrip flat="true">
2021-02-28 15:10:26 +00:00
<TabStripItem>
<Label :text="'ovw' | L"></Label>
</TabStripItem>
<TabStripItem>
<Label :text="'ings' | L"></Label>
</TabStripItem>
<TabStripItem>
<Label :text="'Instructions' | L"></Label>
</TabStripItem>
<TabStripItem>
<Label :text="'nos' | L"></Label>
</TabStripItem>
<TabStripItem>
<Label :text="'cmbs' | L"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<ScrollView @loaded="overviewLoaded">
<StackLayout>
<StackLayout
width="100%"
:height="screenWidth"
verticalAlignment="center"
class="imageHolder"
>
<Image
v-if="recipe.imageSrc"
:src="recipe.imageSrc"
stretch="aspectFill"
width="100%"
:height="screenWidth"
/>
<Label
v-else
horizontalAlignment="center"
class="er"
fontSize="160"
:text="icon.img"
/>
</StackLayout>
<StackLayout margin="16 4 80">
<Label
class="category"
:text="`${$options.filters.L(
recipe.cuisine
)} ${$options.filters.L(recipe.category)}`"
/>
<Label
2021-03-23 06:16:25 +00:00
class="title tb"
2021-02-28 15:10:26 +00:00
:text="recipe.title"
textWrap="true"
/>
<FlexboxLayout class="ratingContainer">
<Label
class="rate er"
:class="{ rated: recipe.rating >= n }"
v-for="n in 5"
:key="n"
:text="recipe.rating < n ? icon.star : icon.starred"
@tap="
recipe.rating == 1 && n == 1 ? setRating(0) : setRating(n)
"
@longPress="setRating(n)"
/>
</FlexboxLayout>
<Label
class="attr"
:text="`${$options.filters.L(
'Difficulty level'
)}: ${$options.filters.L(recipe.difficulty)}`"
textWrap="true"
/>
<Label
class="attr"
:text="`${$options.filters.L(
'Preparation time'
)}: ${formattedTime(recipe.prepTime)}`"
textWrap="true"
/>
<Label
class="attr"
:text="`${$options.filters.L(
'Cooking time'
)}: ${formattedTime(recipe.cookTime)}`"
textWrap="true"
/>
<FlexboxLayout
v-if="recipe.tags.length"
class="tagsContainer"
flexWrap="wrap"
>
<Label
class="tagsTitle"
:text="`${$options.filters.L('ts')}: `"
/>
<Label
v-for="(tag, index) in recipe.tags"
:key="index"
:text="tag"
class="tag"
textWrap="false"
/>
</FlexboxLayout>
<GridLayout
rows="auto, auto"
columns="*, *"
class="overviewContainer"
>
<GridLayout
class="overviewItem mdr"
row="0"
col="0"
rows="auto, auto"
columns="*"
@tap="selectedTabIndex = 1"
>
<Label row="0" class="er" :text="icon.items" />
<Label
row="1"
class="itemCount"
:text="`${recipe.ingredients.length} ${
recipe.ingredients.length == 1
? $options.filters.L('ing')
: $options.filters.L('ings')
}`"
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem mdr"
row="0"
col="1"
rows="auto, auto"
columns="*"
@tap="selectedTabIndex = 2"
>
<Label row="0" class="er" :text="icon.steps" />
<Label
row="1"
class="itemCount"
:text="`${recipe.instructions.length} ${
recipe.instructions.length == 1
? $options.filters.L('Instruction')
: $options.filters.L('Instructions')
2021-02-28 15:10:26 +00:00
}`"
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem mdr"
row="1"
col="0"
rows="auto, auto"
columns="*"
@tap="selectedTabIndex = 3"
>
<Label row="0" class="er" :text="icon.notes" />
<Label
row="1"
class="itemCount"
:text="`${recipe.notes.length} ${
recipe.notes.length == 1
2021-01-13 05:02:48 +00:00
? $options.filters.L('no')
: $options.filters.L('nos')
2021-02-28 15:10:26 +00:00
}`"
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem mdr"
row="1"
col="1"
rows="auto, auto"
columns="*"
@tap="selectedTabIndex = 4"
>
<Label row="0" class="er" :text="icon.comb" />
<Label
row="1"
class="itemCount"
:text="`${recipe.combinations.length} ${
recipe.combinations.length == 1
? $options.filters.L('cmb')
: $options.filters.L('cmbs')
}`"
textWrap="true"
/>
</GridLayout>
2020-11-02 11:36:53 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
<Label
class="attr small"
:text="`${$options.filters.L(
'Last updated'
)}: ${formattedDate(recipe.lastModified)}`"
textWrap="true"
/>
<Label
class="attr small"
:text="`${$options.filters.L('Created')}: ${formattedDate(
recipe.created
)}`"
textWrap="true"
/>
</StackLayout>
2020-10-14 19:32:32 +00:00
</StackLayout>
2021-02-28 15:10:26 +00:00
</ScrollView>
</TabContentItem>
<TabContentItem>
<ScrollView>
<GridLayout
v-if="!recipe.ingredients.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="er icon" :text="icon.items" textWrap="true" />
2021-03-23 06:16:25 +00:00
<Label class="title tb" :text="'pAIng' | L" textWrap="true" />
2021-02-28 15:10:26 +00:00
</StackLayout>
</GridLayout>
<StackLayout v-else padding="24 16 72">
2021-03-21 17:02:04 +00:00
<StackLayout class="inputField">
2021-02-28 15:10:26 +00:00
<Label
class="fieldLabel"
:text="`${$options.filters.L('req')} ${$options.filters.L(
recipe.yield.unit
)}`"
/>
2021-03-21 17:02:04 +00:00
<TextField
width="50%"
v-model="yieldMultiplier"
keyboardType="number"
/>
</StackLayout>
2021-02-28 15:10:26 +00:00
<Label
padding="16 0 8"
2021-03-23 06:16:25 +00:00
class="title tb"
2021-02-28 15:10:26 +00:00
:text="`${$options.filters.L(
'ings'
)} (${positiveYieldMultiplier} ${$options.filters.L(
recipe.yield.unit
)})`"
textWrap="true"
/>
<check-box
v-for="(item, index) in recipe.ingredients"
:key="index"
class="ingredient"
:color="isLightMode ? '#1A1A1A' : '#e0e0e0'"
2021-03-23 06:16:25 +00:00
style="font-family: 'Inter-Medium'"
2021-02-28 15:10:26 +00:00
:checkPadding="checkPadding"
marginLeft="4"
@checkedChange="checkChange"
:text="`${
roundedQuantity(item.quantity)
? roundedQuantity(item.quantity) + ' '
: ''
}${
roundedQuantity(item.quantity)
? $options.filters.L(item.unit) + ' '
: ''
}${item.item}`"
/>
2020-10-14 19:32:32 +00:00
</StackLayout>
2021-02-28 15:10:26 +00:00
</ScrollView>
</TabContentItem>
<TabContentItem>
<ScrollView>
<GridLayout
v-if="!recipe.instructions.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="er icon" :text="icon.steps" textWrap="true" />
2021-03-23 06:16:25 +00:00
<Label class="title tb" :text="'pAIns' | L" textWrap="true" />
2021-02-28 15:10:26 +00:00
</StackLayout>
2020-11-02 11:36:53 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
<StackLayout v-else padding="28 16 62">
<GridLayout
@tap="stepDone"
columns="auto ,*"
v-for="(instruction, index) in recipe.instructions"
:key="index"
>
<Label
col="0"
colSpan="2"
class="instruction"
:class="{
noBorder: index === recipe.instructions.length - 1,
}"
:text="instruction"
textWrap="true"
/>
<Label
@loaded="centerLabel"
2021-03-23 06:16:25 +00:00
class="count tb"
2021-02-28 15:10:26 +00:00
col="0"
:text="index + 1"
/>
</GridLayout>
2020-10-14 19:32:32 +00:00
</StackLayout>
2021-02-28 15:10:26 +00:00
</ScrollView>
</TabContentItem>
<TabContentItem>
<ScrollView>
<GridLayout
v-if="!recipe.notes.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="er icon" :text="icon.notes" textWrap="true" />
2021-03-23 06:16:25 +00:00
<Label class="title tb" :text="'pANo' | L" textWrap="true" />
2021-02-28 15:10:26 +00:00
</StackLayout>
</GridLayout>
<StackLayout v-else padding="16 16 62" @loaded="createNotes">
2020-10-14 19:32:32 +00:00
</StackLayout>
2021-02-28 15:10:26 +00:00
</ScrollView>
</TabContentItem>
<TabContentItem>
<ScrollView>
<GridLayout
v-if="!recipe.combinations.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="er icon" :text="icon.comb" textWrap="true" />
2021-03-23 06:16:25 +00:00
<Label class="title tb" :text="'pACmb' | L" textWrap="true" />
2021-02-28 15:10:26 +00:00
</StackLayout>
2020-12-29 10:35:19 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
<StackLayout v-else padding="16 0 80">
<GridLayout
columns="*"
v-for="(combination, index) in recipe.combinations"
:key="index"
2021-03-21 17:02:04 +00:00
elevation="1"
2021-02-28 15:10:26 +00:00
class="combination mdr"
@tap="viewCombination(combination)"
>
<Label
verticalAlignment="center"
class="combinationTitle"
:text="getCombinationTitle(combination)"
textWrap="true"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabContentItem>
</Tabs>
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
<transition name="bounce" appear>
<MDFloatingActionButton
row="1"
col="1"
src="res://share"
@tap="shareHandler"
v-if="showFab"
/>
</transition>
</GridLayout>
</AbsoluteLayout>
</Page>
2020-10-14 19:32:32 +00:00
</template>
<script>
2020-11-02 11:36:53 +00:00
import {
2020-12-02 10:37:45 +00:00
Application,
2020-11-10 18:28:48 +00:00
Color,
ImageSource,
Screen,
Utils,
2020-12-02 09:46:25 +00:00
Span,
FormattedString,
Label,
2020-12-29 10:35:19 +00:00
GridLayout,
ItemSpec,
Observable,
2021-02-28 15:10:26 +00:00
GestureTypes,
} from "@nativescript/core";
import {
Feedback,
FeedbackType,
2021-02-28 15:10:26 +00:00
FeedbackPosition,
} from "nativescript-feedback";
import * as Toast from "nativescript-toast";
import * as SocialShare from "@nativescript/social-share";
import { localize } from "@nativescript/localize";
const intl = require("nativescript-intl");
import { mapActions, mapState } from "vuex";
import EditRecipe from "./EditRecipe.vue";
import ViewRecipe from "./ViewRecipe.vue";
import ShareChooser from "./modal/ShareChooser.vue";
let feedback = new Feedback();
2020-10-14 19:32:32 +00:00
export default {
2021-02-28 15:10:26 +00:00
props: ["filterTrylater", "recipeID"],
2020-10-14 19:32:32 +00:00
data() {
return {
2020-10-21 17:54:45 +00:00
busy: false,
2020-11-02 11:36:53 +00:00
yieldMultiplier: 1,
recipe: null,
showFab: false,
2020-11-02 11:36:53 +00:00
selectedTabIndex: 0,
2020-11-15 10:51:10 +00:00
currentRecipeID: this.recipeID,
2020-11-28 19:21:57 +00:00
hideActionBar: false,
2021-01-13 05:02:48 +00:00
overviewTab: null,
checks: [],
2021-01-23 17:20:15 +00:00
checkboxes: [],
steps: [],
2021-02-28 15:10:26 +00:00
};
2020-10-14 19:32:32 +00:00
},
computed: {
2021-02-28 15:10:26 +00:00
...mapState(["icon", "recipes"]),
2020-10-14 19:32:32 +00:00
screenWidth() {
2021-02-28 15:10:26 +00:00
return Screen.mainScreen.widthDIPs;
2020-10-14 19:32:32 +00:00
},
2020-11-11 13:50:33 +00:00
positiveYieldMultiplier() {
2021-02-28 15:10:26 +00:00
return Math.abs(this.yieldMultiplier) > 0
? Math.abs(parseFloat(this.yieldMultiplier))
: 1;
2020-10-14 19:32:32 +00:00
},
2020-11-02 11:36:53 +00:00
isLightMode() {
2021-02-28 15:10:26 +00:00
return Application.systemAppearance() === "light";
2020-11-02 11:36:53 +00:00
},
2021-01-23 17:20:15 +00:00
checkPadding() {
2021-02-28 15:10:26 +00:00
return `${Math.round(20 * Utils.layout.getDisplayDensity())},0,0,0`;
2021-01-23 17:20:15 +00:00
},
2020-10-14 19:32:32 +00:00
},
methods: {
2021-02-28 15:10:26 +00:00
...mapActions([
"toggleStateAction",
"setCurrentComponentAction",
"overwriteRecipeAction",
"setRecipeAsTriedAction",
"setRatingAction",
"toggleCartAction",
]),
onPageLoad(args) {
const page = args.object;
page.bindingContext = new Observable();
2021-02-28 15:10:26 +00:00
this.busy = false;
setTimeout((e) => {
this.setCurrentComponentAction("ViewRecipe");
}, 500);
this.showFab = true;
if (this.yieldMultiplier == this.recipe.yield.quantity)
this.yieldMultiplier = this.recipe.yield.quantity;
this.keepScreenOn(true);
this.syncCombinations();
},
2020-11-10 18:28:48 +00:00
onPageUnload() {
2021-02-28 15:10:26 +00:00
this.keepScreenOn(false);
feedback.hide();
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
overviewLoaded(args) {
this.overviewTab = args;
2021-01-13 05:02:48 +00:00
},
2021-01-23 17:20:15 +00:00
2020-11-10 18:28:48 +00:00
// HELPERS
2021-02-28 15:10:26 +00:00
niceDate(time) {
let lastTried = new Date(time).getTime();
let now = new Date().getTime();
let midnight = new Date().setHours(0, 0, 0, 0);
let diff = (now - lastTried) / 1000;
let dayDiff = Math.ceil(diff / 86400);
if (isNaN(dayDiff) || dayDiff < 0) return "";
2021-02-28 15:10:26 +00:00
function duration(value) {
return localize(value);
}
return (
2021-02-28 15:10:26 +00:00
(diff < 86400 && lastTried > midnight && duration("today")) ||
(dayDiff == 1 && "yesterday") ||
(dayDiff < 7 && dayDiff + " " + duration("dAgo")) ||
(dayDiff < 31 && Math.round(dayDiff / 7) + " " + duration("wAgo")) ||
(dayDiff < 366 && Math.round(dayDiff / 30) + " " + duration("mAgo")) ||
(dayDiff > 365 && duration("ltAgo"))
);
},
2021-02-28 15:10:26 +00:00
selectedIndexChange(args) {
this.selectedTabIndex = args.object.selectedIndex;
2020-11-02 11:36:53 +00:00
},
2020-11-10 18:28:48 +00:00
showLastTried() {
2021-02-28 15:10:26 +00:00
feedback.show({
title: `${localize("triedInfo")} ${this.niceDate(
2020-11-02 11:36:53 +00:00
this.recipe.lastTried
)}`,
2021-02-28 15:10:26 +00:00
titleColor: new Color(`${this.isLightMode ? "#fff" : "#1A1A1A"}`),
backgroundColor: new Color("#ff5200"),
});
},
roundedQuantity(quantity) {
return Math.abs(
Math.round(
(quantity / this.recipe.yield.quantity) *
this.positiveYieldMultiplier *
100
) / 100
);
},
keepScreenOn(boolean) {
let activity =
Application.android.foregroundActivity ||
Application.android.startActivity;
let window = activity.getWindow();
if (boolean)
window.addFlags(
android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
);
else
window.clearFlags(
android.view.WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
);
},
formattedTime(time) {
let t = time.split(":");
let h = parseInt(t[0]);
let m = parseInt(t[1]);
let hr = localize("hr");
let min = localize("min");
return h ? (m ? `${h} ${hr} ${m} ${min}` : `${h} ${hr}`) : `${m} ${min}`;
},
formattedDate(date) {
let d = new Date(date);
var dateFormat = new intl.DateTimeFormat(null, {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
}).format(d);
return `${dateFormat}`;
},
isValidURL(string) {
let pattern = new RegExp("^https?|^www", "ig");
return pattern.test(string);
},
getCombinationTitle(id) {
return this.recipes.filter((e) => e.id === id)[0].title;
2020-11-15 10:51:10 +00:00
},
syncCombinations() {
2021-02-28 15:10:26 +00:00
let combinationForOtherRecipes = this.recipes
.filter(
(e) =>
e.combinations.indexOf(this.currentRecipeID) >= 0 ||
this.recipe.combinations.includes(e.id)
)
.map((e) => e.id);
this.recipe.combinations = combinationForOtherRecipes;
this.overwriteRecipeAction({
2020-11-15 10:51:10 +00:00
id: this.currentRecipeID,
recipe: this.recipe,
2021-02-28 15:10:26 +00:00
});
2020-11-15 10:51:10 +00:00
},
2021-02-28 15:10:26 +00:00
checkChange(args, index) {
let check = args.object;
this.checkboxes.push(check);
this.checks[index] = !this.checks[index];
2021-01-13 05:02:48 +00:00
},
2021-02-28 15:10:26 +00:00
stepDone(args) {
let a = args.object;
this.steps.push(a);
if (a.className !== "done") a.className = "done";
else a.className = "";
2021-01-23 17:20:15 +00:00
},
2021-02-28 15:10:26 +00:00
centerLabel(args) {
args.object.android.setGravity(17);
2021-01-23 17:20:15 +00:00
},
clearChecks() {
2021-02-28 15:10:26 +00:00
this.checkboxes.forEach((e) => {
if (e.checked) e.checked = false;
});
this.checkboxes = [];
2020-11-28 19:21:57 +00:00
},
2021-01-23 17:20:15 +00:00
clearSteps() {
2021-02-28 15:10:26 +00:00
this.steps.forEach((e) => {
if (e.className === "done") e.className = "";
});
this.steps = [];
2021-01-23 17:20:15 +00:00
},
// NAVIGATION HANDLERS
2020-10-14 19:32:32 +00:00
editRecipe() {
2021-02-28 15:10:26 +00:00
this.showFab = false;
this.busy = true;
this.$navigateTo(EditRecipe, {
2020-10-21 17:54:45 +00:00
props: {
2020-11-28 19:21:57 +00:00
navigationFromView: true,
filterTrylater: this.filterTrylater,
2020-11-15 10:51:10 +00:00
recipeID: this.currentRecipeID,
2020-10-21 17:54:45 +00:00
},
2020-11-28 19:21:57 +00:00
backstackVisible: false,
2021-02-28 15:10:26 +00:00
});
},
viewCombination(combination) {
this.recipe = this.recipes.filter((e) => e.id === combination)[0];
this.recipe.ingredients.forEach((e) => this.checks.push(false));
this.clearChecks();
this.clearSteps();
this.currentRecipeID = combination;
this.syncCombinations();
this.selectedTabIndex = 0;
this.overviewTab.object.scrollToVerticalOffset(0, true);
2020-11-15 10:51:10 +00:00
setTimeout(
2021-02-28 15:10:26 +00:00
(e) =>
this.recipe.tried && this.recipe.lastTried && this.showLastTried(),
500
);
2020-11-15 10:51:10 +00:00
},
2021-01-23 17:20:15 +00:00
2020-11-10 18:28:48 +00:00
// SHARE ACTION
shareHandler() {
2021-02-28 15:10:26 +00:00
if (this.recipe.imageSrc) {
this.$showModal(ShareChooser, {
2020-11-10 18:28:48 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "shr",
2021-02-28 15:10:26 +00:00
helpIcon: "share",
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
}).then((result) => {
switch (result) {
2020-11-10 18:28:48 +00:00
case "photo":
2021-02-28 15:10:26 +00:00
ImageSource.fromFile(this.recipe.imageSrc).then((res) => {
SocialShare.shareImage(res, "Share recipe photo using");
});
break;
2020-11-10 18:28:48 +00:00
case "recipe":
2021-02-28 15:10:26 +00:00
this.shareRecipe();
break;
2020-11-10 18:28:48 +00:00
default:
2021-02-28 15:10:26 +00:00
break;
2020-11-10 18:28:48 +00:00
}
2021-02-28 15:10:26 +00:00
});
2020-12-29 10:35:19 +00:00
} else {
2021-02-28 15:10:26 +00:00
this.shareRecipe();
2020-11-10 18:28:48 +00:00
}
},
shareRecipe() {
2021-02-28 15:10:26 +00:00
let overview = `${this.recipe.title}\n\n${localize(
"Cuisine"
)}: ${localize(this.recipe.cuisine)}\n${localize("Category")}: ${localize(
this.recipe.category
)}\n${localize("ts")}: ${this.recipe.tags.join(", ")}\n${localize(
"stars"
)}: ${this.recipe.rating}\n${localize("Difficulty level")}: ${localize(
this.recipe.difficulty
)}\n${localize("Preparation time")}: ${this.formattedTime(
this.recipe.prepTime
2021-02-28 15:10:26 +00:00
)}\n${localize("Cooking time")}: ${this.formattedTime(
this.recipe.cookTime
)}\n`;
let shareContent = overview;
if (this.recipe.ingredients.length) {
let ingredients = `\n\n${localize("ings")} (${
2020-11-02 11:36:53 +00:00
this.yieldMultiplier
2021-02-28 15:10:26 +00:00
} ${localize(this.recipe.yield.unit)}):\n\n`;
this.recipe.ingredients.forEach((e) => {
2020-11-10 18:28:48 +00:00
ingredients += `- ${
e.quantity
2021-02-28 15:10:26 +00:00
? this.roundedQuantity(e.quantity) +
" " +
this.$options.filters.L(e.unit) +
" "
2020-11-10 18:28:48 +00:00
: ""
2021-02-28 15:10:26 +00:00
}${e.item}\n`;
});
shareContent += ingredients;
}
2021-02-28 15:10:26 +00:00
if (this.recipe.instructions.length) {
let instructions = `\n\n${localize("Instructions")}:\n\n`;
this.recipe.instructions.forEach((e, i) => {
instructions += `${i + 1}. ${e}\n\n`;
});
shareContent += instructions;
}
2021-02-28 15:10:26 +00:00
if (this.recipe.notes.length) {
let notes = `\n${localize("nos")}:\n\n`;
this.recipe.notes.forEach((e, i) => {
notes += `${i + 1}. ${e}\n\n`;
});
shareContent += notes;
}
2021-02-28 15:10:26 +00:00
if (this.recipe.combinations.length) {
let combinations = `\n${localize("cmbs")}:\n\n`;
this.recipe.combinations.forEach((e, i) => {
combinations += `${i + 1}. ${this.getCombinationTitle(e)}\n\n`;
});
shareContent += combinations;
2020-12-29 10:35:19 +00:00
}
2021-02-28 15:10:26 +00:00
let sharenote = "\n" + localize("appCrd");
shareContent += sharenote;
SocialShare.shareText(shareContent, "Share recipe using");
},
2021-01-23 17:20:15 +00:00
2020-11-10 18:28:48 +00:00
// DATA HANDLERS
2021-02-28 15:10:26 +00:00
toggle(key, setDate) {
this.toggleStateAction({
2020-11-15 10:51:10 +00:00
id: this.currentRecipeID,
2020-10-26 20:49:54 +00:00
recipe: this.recipe,
key,
2020-11-02 11:36:53 +00:00
setDate,
2021-02-28 15:10:26 +00:00
});
2020-10-26 20:49:54 +00:00
},
toggleFavourite() {
2021-02-28 15:10:26 +00:00
this.recipe.isFavorite
? Toast.makeText(localize("unfavd")).show()
: Toast.makeText(localize("favd")).show();
this.toggle("isFavorite");
2020-10-21 17:54:45 +00:00
},
toggleTrylater() {
2021-02-28 15:10:26 +00:00
this.recipe.tried
? Toast.makeText(localize("aTry")).show()
: Toast.makeText(localize("rmTry")).show();
this.toggle("tried");
},
recipeTried() {
2021-02-28 15:10:26 +00:00
this.setRecipeAsTriedAction({
id: this.currentRecipeID,
recipe: this.recipe,
2021-02-28 15:10:26 +00:00
});
this.$navigateBack();
2020-10-14 19:32:32 +00:00
},
2021-02-28 15:10:26 +00:00
setRating(rating) {
if (rating !== this.recipe.rating || rating === 1) {
this.setRatingAction({
2020-12-29 10:35:19 +00:00
id: this.currentRecipeID,
recipe: this.recipe,
rating,
2021-02-28 15:10:26 +00:00
});
2020-12-29 10:35:19 +00:00
}
},
2021-01-23 17:20:15 +00:00
2021-01-13 05:02:48 +00:00
// SHOPPINGLIST
toggleCart() {
2021-02-28 15:10:26 +00:00
if (!this.recipe.inBag) {
2021-01-13 05:02:48 +00:00
} else {
}
2021-02-28 15:10:26 +00:00
this.toggleCartAction({
2021-01-13 05:02:48 +00:00
id: this.currentRecipeID,
recipe: this.recipe,
2021-02-28 15:10:26 +00:00
});
2021-01-13 05:02:48 +00:00
},
2021-01-23 17:20:15 +00:00
2020-12-02 10:37:45 +00:00
// NOTES
2021-02-28 15:10:26 +00:00
createNote(note, i) {
const vm = this;
let regex = /(https?:\/\/[^\s]+)/g;
const grid = new GridLayout();
const firstCol = new ItemSpec(1, "star");
const label = new Label();
label.class = "note";
label.textWrap = true;
let formattedString = new FormattedString();
let textArray = note.split(regex);
2020-12-02 09:46:25 +00:00
2021-02-28 15:10:26 +00:00
function createSpan(text, isUrl) {
let span = new Span();
span.text = text;
span.fontSize = 14;
if (isUrl) {
span.textDecoration = "underline";
span.color = "#ff5200";
span.on("linkTap", () => Utils.openUrl(text));
2020-12-02 09:46:25 +00:00
}
2021-02-28 15:10:26 +00:00
formattedString.spans.push(span);
2020-12-02 09:46:25 +00:00
}
2021-02-28 15:10:26 +00:00
textArray.forEach((text) => {
createSpan(text, regex.test(text));
});
label.formattedText = formattedString;
grid.addChild(label);
GridLayout.setColumn(label, 0);
grid.addColumn(firstCol);
return grid;
},
createNotes(args) {
const stack = args.object;
if (!stack.getChildrenCount()) {
this.recipe.notes.forEach((note, i) => {
stack.addChild(this.createNote(note, i));
});
2020-12-02 09:46:25 +00:00
}
},
},
created() {
2021-02-28 15:10:26 +00:00
this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0];
this.recipe.ingredients.forEach((e) => this.checks.push(false));
2020-10-14 19:32:32 +00:00
},
mounted() {
2021-02-28 15:10:26 +00:00
this.showFab = true;
this.yieldMultiplier = this.recipe.yield.quantity;
2020-11-10 18:28:48 +00:00
setTimeout(
2021-02-28 15:10:26 +00:00
(e) => this.recipe.tried && this.recipe.lastTried && this.showLastTried(),
500
);
},
2021-02-28 15:10:26 +00:00
};
2020-10-14 19:32:32 +00:00
</script>