enrecipes/app/components/ViewRecipe.vue

1130 lines
37 KiB
Vue
Raw Normal View History

2020-10-14 19:32:32 +00:00
<template>
2021-06-15 11:04:42 +00:00
<Page @loaded="pgLoad" @unloaded="onPageUnload" actionBarHidden="true">
<GridLayout rows="*, auto, auto" columns="auto, *, auto">
<DockLayout stretchLastChild="true" rowSpan="3" colSpan="3">
<RGridLayout
:rtl="RTL"
2021-04-01 10:55:35 +00:00
dock="top"
rows="auto,auto"
columns="*, auto"
2021-04-12 18:09:48 +00:00
paddingBottom="24"
2021-04-01 10:55:35 +00:00
>
<StackLayout>
2021-06-15 11:04:42 +00:00
<RLabel class="pageTitle" paddingBottom="8" :text="recipe.title" />
<StackLayout
:class="{ f: RTL }"
margin="0 12"
orientation="horizontal"
>
2021-04-01 10:55:35 +00:00
<Button
class="ico rate"
: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)"
/>
</StackLayout>
</StackLayout>
<Image
col="1"
2021-05-22 08:56:31 +00:00
v-if="recipe.image"
:src="recipe.image"
2021-04-01 10:55:35 +00:00
stretch="aspectFit"
class="photo"
decodeWidth="96"
decodeHeight="96"
2021-04-12 18:09:48 +00:00
@tap="viewPhoto"
2021-02-28 15:10:26 +00:00
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-04-14 09:27:40 +00:00
<AbsoluteLayout dock="bottom">
<ScrollView
2021-04-21 10:31:49 +00:00
dock="bottom"
2021-04-14 09:27:40 +00:00
width="100%"
height="100%"
@loaded="onScrollLoad"
2021-06-15 11:04:42 +00:00
@scroll="svScroll($event)"
2021-04-14 09:27:40 +00:00
>
<StackLayout>
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
2021-04-14 09:27:40 +00:00
<StackLayout class="attribute">
2021-06-15 11:04:42 +00:00
<RLabel class="sub" :text="'cui' | L" />
<RLabel class="value" :text="recipe.cuisine | L" />
2021-04-14 09:27:40 +00:00
</StackLayout>
<StackLayout class="attribute" col="1">
2021-06-15 11:04:42 +00:00
<RLabel class="sub" :text="'cat' | L" />
<RLabel class="value" :text="recipe.category | L" />
2021-04-14 09:27:40 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
</RGridLayout>
<StackLayout
:hidden="!recipe.tags.length"
class="attribute hal"
:class="{ r: RTL }"
>
<RLabel class="sub" :text="'ts' | L" />
<RLabel class="value" :text="getTags(recipe.tags)" />
2021-02-28 15:10:26 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
2021-04-14 09:27:40 +00:00
<StackLayout
class="attribute"
:hidden="!hasTime(recipe.prepTime)"
>
2021-06-15 11:04:42 +00:00
<RLabel class="sub" :text="'prepT' | L" />
<RLabel
class="value"
:text="formattedTime(recipe.prepTime)"
/>
2021-04-14 09:27:40 +00:00
</StackLayout>
<StackLayout
:col="hasTime(recipe.prepTime) ? 1 : 0"
class="attribute"
:hidden="!hasTime(recipe.cookTime)"
>
2021-06-15 11:04:42 +00:00
<RLabel class="title sub" :text="'cookT' | L" />
<RLabel
class="value"
:text="formattedTime(recipe.cookTime)"
/>
2021-04-14 09:27:40 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
</RGridLayout>
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
2021-04-14 09:27:40 +00:00
<StackLayout class="attribute">
2021-06-15 11:04:42 +00:00
<RLabel class="title sub" :text="'yld' | L" />
<RLabel
2021-04-14 09:27:40 +00:00
@touch="touchYield"
2021-06-15 11:04:42 +00:00
class="value accent"
2021-04-14 09:27:40 +00:00
:text="`${tempYieldQuantity} ${$options.filters.L(
2021-05-22 08:56:31 +00:00
recipe.yieldUnit
2021-04-14 09:27:40 +00:00
)}`"
/>
</StackLayout>
<StackLayout class="attribute" col="1">
2021-06-15 11:04:42 +00:00
<RLabel class="title sub" :text="'Difficulty level' | L" />
<RLabel class="value" :text="recipe.difficulty | L" />
2021-04-14 09:27:40 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
</RGridLayout>
2021-04-14 09:27:40 +00:00
<StackLayout @loaded="onIngsLoad">
2021-06-15 11:04:42 +00:00
<RLabel
2021-04-14 09:27:40 +00:00
padding="0 16"
class="sectionTitle"
:hidden="!recipe.ingredients.length"
:text="getTitleCount('ings', 'ingredients')"
2021-04-12 18:09:48 +00:00
/>
2021-06-15 11:04:42 +00:00
<RStackLayout
:rtl="RTL"
2021-04-14 09:27:40 +00:00
orientation="horizontal"
v-for="(item, index) in recipe.ingredients"
:key="index + 'ing'"
class="ingredient"
@touch="touchIngredient($event, index)"
>
<Button class="ico min" :text="icon.uncheck" />
2021-06-15 11:04:42 +00:00
<RLabel class="value tw" :text="getIngredientItem(item)" />
</RStackLayout>
2021-04-12 18:09:48 +00:00
</StackLayout>
2021-04-14 09:27:40 +00:00
<StackLayout @loaded="onInsLoad">
2021-06-15 11:04:42 +00:00
<RLabel
2021-04-14 09:27:40 +00:00
padding="0 16"
:hidden="!recipe.instructions.length"
class="sectionTitle"
:text="getTitleCount('inss', 'instructions')"
2021-04-12 18:09:48 +00:00
/>
2021-06-15 11:04:42 +00:00
<RStackLayout
:rtl="RTL"
2021-04-14 09:27:40 +00:00
orientation="horizontal"
@touch="touchInstruction"
v-for="(instruction, index) in recipe.instructions"
:key="index + 'ins'"
class="instruction"
>
2021-06-15 11:04:42 +00:00
<Button class="count ico min" :text="getLocaleN(index + 1)" />
<RLabel class="value tw" :text="instruction" />
</RStackLayout>
2021-04-14 09:27:40 +00:00
</StackLayout>
2021-06-15 11:04:42 +00:00
<RLabel
2021-04-14 09:27:40 +00:00
@loaded="onCmbLoad"
padding="0 16"
:hidden="!recipe.combinations.length"
class="sectionTitle"
:text="getTitleCount('cmbs', 'combinations')"
/>
<Button
v-for="(combination, index) in recipe.combinations"
:key="index + 'comb'"
class="combination"
:text="getCombinationTitle(combination)"
@tap="viewCombination(combination)"
/>
2021-06-15 11:04:42 +00:00
<RLabel
2021-04-14 09:27:40 +00:00
@loaded="onNosTLoad"
padding="0 16"
:hidden="!recipe.notes.length"
class="sectionTitle"
:text="getTitleCount('nos', 'notes')"
/>
<StackLayout @loaded="onNosLoad" padding="0 16"> </StackLayout>
2021-06-15 11:04:42 +00:00
<Label class="dateInfo sub tw" :text="getDates().uc" />
2021-04-12 18:09:48 +00:00
</StackLayout>
2021-04-14 09:27:40 +00:00
</ScrollView>
2021-06-15 11:04:42 +00:00
<RLabel
2021-04-21 10:31:49 +00:00
@loaded="onStickyLoad"
2021-04-14 09:27:40 +00:00
class="sectionTitle sticky"
2021-04-21 10:31:49 +00:00
:hidden="!stickyTitle"
:text="stickyTitle"
2021-04-14 09:27:40 +00:00
/>
</AbsoluteLayout>
2021-04-01 10:55:35 +00:00
</DockLayout>
<GridLayout
row="1"
2021-06-15 11:04:42 +00:00
@loaded="sbload"
class="appbar sidebar"
:col="RTL ? 0 : 2"
rows="auto, auto, auto"
2021-04-01 10:55:35 +00:00
>
2021-06-15 11:04:42 +00:00
<Button class="ico" :text="icon.timer" @tap="openCookingTimer" />
2021-04-12 18:09:48 +00:00
<Button
2021-06-15 11:04:42 +00:00
row="1"
:hidden="busyDup"
2021-04-12 18:09:48 +00:00
class="ico"
2021-06-15 11:04:42 +00:00
:class="{ f: RTL }"
:text="icon.dup"
@tap="duplicateRecipe"
2021-04-12 18:09:48 +00:00
/>
2021-06-15 11:04:42 +00:00
<ActivityIndicator row="1" :hidden="!busyDup" :busy="busyDup" />
2021-04-01 10:55:35 +00:00
<Button
2021-06-15 11:04:42 +00:00
:hidden="!hasPrinterSupport"
row="2"
2021-05-22 08:56:31 +00:00
class="ico"
2021-06-15 11:04:42 +00:00
:text="icon.print"
@tap="printView"
2021-05-22 08:56:31 +00:00
/>
2021-06-15 11:04:42 +00:00
</GridLayout>
<RGridLayout
:rtl="RTL"
row="2"
colSpan="3"
@loaded="abLoad"
class="appbar"
:hidden="toast"
columns="auto, *, auto, auto, auto, auto"
@touch="() => null"
>
<Button class="ico rtl" :text="icon.back" @tap="$navigateBack()" />
2021-05-22 08:56:31 +00:00
<Button
2021-06-15 11:04:42 +00:00
col="2"
2021-04-01 10:55:35 +00:00
v-if="!filterTrylater"
class="ico"
:text="recipe.tried ? icon.try : icon.tried"
2021-04-12 18:09:48 +00:00
@tap="toggle('tried')"
2021-04-01 10:55:35 +00:00
/>
<Button
2021-06-15 11:04:42 +00:00
col="2"
2021-04-01 10:55:35 +00:00
v-else
class="ico"
:text="icon.done"
2021-06-15 11:04:42 +00:00
@tap="toggle('tried', 1)"
2021-04-01 10:55:35 +00:00
/>
<Button
2021-06-15 11:04:42 +00:00
col="3"
2021-04-01 10:55:35 +00:00
class="ico"
2021-05-22 08:56:31 +00:00
:text="recipe.favorite ? icon.faved : icon.fav"
@tap="toggle('favorite')"
2021-04-01 10:55:35 +00:00
/>
<Button
2021-06-15 11:04:42 +00:00
col="4"
:hidden="busyEdit"
2021-04-01 10:55:35 +00:00
class="ico"
:text="icon.edit"
@tap="editRecipe"
/>
2021-06-15 11:04:42 +00:00
<ActivityIndicator col="4" :hidden="!busyEdit" :busy="busyEdit" />
2021-04-01 10:55:35 +00:00
<Button
2021-06-15 11:04:42 +00:00
col="5"
2021-04-01 10:55:35 +00:00
class="ico fab"
:text="icon.share"
@tap="shareHandler"
/>
2021-06-15 11:04:42 +00:00
</RGridLayout>
<Toast
row="2"
colSpan="3"
:onload="tbLoad"
:toast="toast"
:action="hideBar"
/>
<AbsoluteLayout rowSpan="3" colSpan="3">
2021-04-21 10:31:49 +00:00
<Image
2021-06-15 11:04:42 +00:00
@tap="closePhoto"
2021-04-21 10:31:49 +00:00
backgroundColor="black"
stretch="aspectFit"
@loaded="onImgViewLoad"
2021-05-22 08:56:31 +00:00
:src="recipe.image"
2021-04-12 18:09:48 +00:00
class="photoviewer"
2021-04-21 10:31:49 +00:00
/>
2021-04-12 18:09:48 +00:00
</AbsoluteLayout>
2021-06-15 11:04:42 +00:00
<WebView @loaded="wvLoad" hidden />
2021-04-01 10:55:35 +00:00
</GridLayout>
2021-02-28 15:10:26 +00:00
</Page>
2020-10-14 19:32:32 +00:00
</template>
2021-04-21 10:31:49 +00:00
<script lang="ts">
2020-11-02 11:36:53 +00:00
import {
2020-12-02 10:37:45 +00:00
Application,
2021-04-12 18:09:48 +00:00
AndroidApplication,
2020-11-10 18:28:48 +00:00
ImageSource,
Utils,
2020-12-02 09:46:25 +00:00
Span,
FormattedString,
2020-12-29 10:35:19 +00:00
Observable,
2021-04-01 10:55:35 +00:00
Screen,
2021-04-12 18:09:48 +00:00
CoreTypes,
2021-06-15 11:04:42 +00:00
WebView,
2021-02-28 15:10:26 +00:00
} from "@nativescript/core";
2021-06-15 11:04:42 +00:00
import { RLabel } from "~/rtl-ui";
2021-02-28 15:10:26 +00:00
import { localize } from "@nativescript/localize";
import { mapActions, mapState } from "vuex";
2021-05-22 08:56:31 +00:00
import CookingTimer from "./CookingTimer.vue";
2021-02-28 15:10:26 +00:00
import EditRecipe from "./EditRecipe.vue";
2021-05-25 14:32:53 +00:00
import Action from "./modals/Action.vue";
import Toast from "./sub/Toast.vue";
import Prompt from "./modals/Prompt.vue";
2021-04-12 18:09:48 +00:00
import * as utils from "~/shared/utils";
2021-06-15 11:04:42 +00:00
const Intl = require("nativescript-intl");
let barTimer;
declare const android: any;
2020-10-14 19:32:32 +00:00
export default {
2021-05-25 14:32:53 +00:00
components: { Toast },
2021-06-15 11:04:42 +00:00
props: ["filterTrylater", "recipeID", "yieldQuantity"],
2020-10-14 19:32:32 +00:00
data() {
return {
2021-06-15 11:04:42 +00:00
busyEdit: 0,
busyDup: 0,
2020-11-02 11:36:53 +00:00
yieldMultiplier: 1,
recipe: null,
2020-11-15 10:51:10 +00:00
currentRecipeID: this.recipeID,
2021-04-01 10:55:35 +00:00
scrollview: null,
appbar: null,
2021-06-15 11:04:42 +00:00
sidebar: null,
toastbar: null,
2021-04-01 10:55:35 +00:00
ingcon: null,
inscon: null,
2021-04-14 09:27:40 +00:00
cmbcon: null,
2021-04-01 10:55:35 +00:00
notescon: null,
2021-04-14 09:27:40 +00:00
notesT: null,
2021-04-21 10:31:49 +00:00
imgView: null,
2021-01-13 05:02:48 +00:00
checks: [],
2021-04-12 18:09:48 +00:00
checked: 0,
stepsDid: 0,
2021-04-01 10:55:35 +00:00
toast: null,
2021-06-15 11:04:42 +00:00
photoOpen: 0,
showTitleArr: [0, 0, 0, 0],
2021-04-21 10:31:49 +00:00
sticky: null,
2021-06-15 11:04:42 +00:00
view: null,
wv: null,
2021-02-28 15:10:26 +00:00
};
2020-10-14 19:32:32 +00:00
},
computed: {
2021-06-15 11:04:42 +00:00
...mapState(["icon", "recipes", "RTL"]),
2021-04-12 18:09:48 +00:00
tempYieldQuantity() {
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
},
2021-04-21 10:31:49 +00:00
stickyTitle() {
let val = null;
switch (this.showTitleArr.lastIndexOf(true)) {
case 0:
val = this.getTitleCount("ings", "ingredients");
break;
case 1:
val = this.getTitleCount("inss", "instructions");
break;
case 2:
val = this.getTitleCount("cmbs", "combinations");
break;
case 3:
val = this.getTitleCount("nos", "notes");
break;
}
return val;
},
2021-06-15 11:04:42 +00:00
hasPrinterSupport() {
return utils.Printer.isSupported();
},
2020-10-14 19:32:32 +00:00
},
methods: {
2021-06-15 11:04:42 +00:00
...mapActions(["toggleStateAction", "setRatingAction", "toggleCartAction"]),
pgLoad({ object }) {
this.busyDup = this.busyEdit = this.photoOpen = 0;
2021-05-25 14:32:53 +00:00
object.bindingContext = new Observable();
2021-05-22 08:56:31 +00:00
if (this.yieldMultiplier == this.recipe.yieldQuantity)
this.yieldMultiplier = this.recipe.yieldQuantity;
2021-06-15 11:04:42 +00:00
utils.keepScreenOn(1);
2021-02-28 15:10:26 +00:00
this.syncCombinations();
2021-06-15 11:04:42 +00:00
this.view = object.page.getViewById("printview");
},
2020-11-10 18:28:48 +00:00
onPageUnload() {
2021-06-15 11:04:42 +00:00
utils.keepScreenOn(0);
},
sbload({ object }) {
this.sidebar = object;
2020-11-10 18:28:48 +00:00
},
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.toastbar = object;
this.recipe.tried && this.recipe.lastTried && this.showLastTried();
},
wvLoad({ object }) {
this.wv = object;
utils.updateLocale();
},
2021-04-01 10:55:35 +00:00
onIngsLoad({ object }) {
this.ingcon = object;
},
onInsLoad({ object }) {
this.inscon = object;
},
2021-04-14 09:27:40 +00:00
onCmbLoad({ object }) {
this.cmbcon = object;
},
onNosTLoad({ object }) {
this.notesT = object;
},
2021-04-01 10:55:35 +00:00
onNosLoad({ object }) {
this.notescon = object;
this.createNotes();
2021-01-13 05:02:48 +00:00
},
2021-04-01 10:55:35 +00:00
onScrollLoad(args) {
this.scrollview = args.object;
},
2021-04-21 10:31:49 +00:00
onImgViewLoad({ object }) {
this.imgView = object;
this.imgView.visibility = "collapsed";
this.imgView.top = 24;
2021-06-15 11:04:42 +00:00
this.imgView.left = this.RTL ? 16 : Screen.mainScreen.widthDIPs - 112;
2021-04-21 10:31:49 +00:00
},
onStickyLoad({ object }) {
this.sticky = object;
2021-04-12 18:09:48 +00:00
},
2021-06-15 11:04:42 +00:00
fixTitle(object, swipeUp: boolean): void {
2021-04-21 10:31:49 +00:00
let ingL = this.recipe.ingredients.length;
let insL = this.recipe.instructions.length;
let cmbL = this.recipe.combinations.length;
let notL = this.recipe.notes.length;
const isTop = (label): boolean => {
let pos = label.getLocationRelativeTo(object).y;
return label === this.cmbcon || label === this.notesT
? pos < 0
: pos + 32 < 0;
};
const setVisibleTitle = (n: number): void => {
let arr = [ingL, insL, cmbL, notL];
this.showTitleArr = Array.from(
{ length: 4 },
(v, i) => (v = arr[i] ? i < n : false)
);
};
if (swipeUp) {
if (ingL && !this.showTitleArr[0] && isTop(this.ingcon))
setVisibleTitle(1);
else if (insL && !this.showTitleArr[1] && isTop(this.inscon))
setVisibleTitle(2);
else if (cmbL && !this.showTitleArr[2] && isTop(this.cmbcon))
setVisibleTitle(3);
else if (notL && !this.showTitleArr[3] && isTop(this.notesT))
setVisibleTitle(4);
} else {
if (notL && this.showTitleArr[3] && !isTop(this.notesT))
setVisibleTitle(3);
else if (cmbL && this.showTitleArr[2] && !isTop(this.cmbcon))
setVisibleTitle(2);
else if (insL && this.showTitleArr[1] && !isTop(this.inscon))
setVisibleTitle(1);
else if (ingL && this.showTitleArr[0] && !isTop(this.ingcon))
setVisibleTitle(0);
}
2021-04-14 09:27:40 +00:00
},
2021-06-15 11:04:42 +00:00
svScroll({ object, scrollY }) {
2021-04-21 10:31:49 +00:00
let swipeUp: boolean;
2021-06-15 11:04:42 +00:00
let y = scrollY;
2021-04-01 10:55:35 +00:00
if (y) {
2021-04-21 10:31:49 +00:00
swipeUp = y > this.scrollPos;
2021-04-01 10:55:35 +00:00
this.scrollPos = Math.abs(y);
2021-06-15 11:04:42 +00:00
this.fixTitle(object, swipeUp);
2021-04-21 10:31:49 +00:00
if (!this.toast) {
let ab = this.appbar.translateY;
2021-06-15 11:04:42 +00:00
if (swipeUp && ab == 0) this.hideBars();
else if (!swipeUp && ab == 64) this.showBars();
2021-04-21 10:31:49 +00:00
}
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,
});
this.sidebar.animate({
translate: { x: 0, y: 0 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
},
hideBars() {
this.appbar.animate({
translate: { x: 0, y: 64 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
this.sidebar.animate({
translate: { x: this.RTL ? -64 : 64, y: 0 },
duration: 200,
curve: CoreTypes.AnimationCurve.ease,
});
},
// Helpers
2021-04-12 18:09:48 +00:00
getTitleCount(title, type) {
2021-06-15 11:04:42 +00:00
let c = this.recipe[type].length;
let s = null;
2021-04-12 18:09:48 +00:00
switch (title) {
case "ings":
2021-06-15 11:04:42 +00:00
s = this.checked;
2021-04-12 18:09:48 +00:00
break;
case "inss":
2021-06-15 11:04:42 +00:00
s = this.stepsDid;
2021-04-12 18:09:48 +00:00
break;
}
2021-06-15 11:04:42 +00:00
c = this.getLocaleN(c);
s = s && this.getLocaleN(s);
let text = s ? ` (${s}/${c})` : ` (${c})`;
2021-04-12 18:09:48 +00:00
return localize(title) + text;
},
2021-06-15 11:04:42 +00:00
getIngredientItem(item) {
return `${
this.roundedQuantity(item.quantity)
? this.roundedQuantity(item.quantity) + " "
: ""
}${this.roundedQuantity(item.quantity) ? localize(item.unit) + " " : ""}${
item.item
}`;
},
2021-04-01 10:55:35 +00:00
changeYield() {
2021-05-25 14:32:53 +00:00
this.$showModal(Prompt, {
2021-04-01 10:55:35 +00:00
props: {
2021-05-22 08:56:31 +00:00
title: `${localize("req", localize(this.recipe.yieldUnit))}`,
2021-04-01 10:55:35 +00:00
placeholder: Math.abs(parseFloat(this.yieldMultiplier)),
action: "SET",
},
}).then((item) => {
if (item) this.yieldMultiplier = item;
});
},
hasTime(time) {
return time != "00:00";
},
2021-05-22 08:56:31 +00:00
niceDate(lastTried) {
2021-02-28 15:10:26 +00:00
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-04-21 10:31:49 +00:00
function duration(value, number?) {
2021-04-17 16:24:47 +00:00
return number ? localize(value, number) : localize(value);
}
return (
2021-02-28 15:10:26 +00:00
(diff < 86400 && lastTried > midnight && duration("today")) ||
(dayDiff == 1 && "yesterday") ||
2021-04-17 16:24:47 +00:00
(dayDiff < 7 && duration("dAgo", dayDiff)) ||
(dayDiff < 31 && duration("wAgo", Math.round(dayDiff / 7))) ||
(dayDiff < 366 && duration("mAgo", Math.round(dayDiff / 30))) ||
2021-02-28 15:10:26 +00:00
(dayDiff > 365 && duration("ltAgo"))
);
},
2020-11-10 18:28:48 +00:00
showLastTried() {
2021-06-15 11:04:42 +00:00
this.animateBar(this.appbar, 0).then(() => {
this.toast = localize(
"triedInfo",
this.niceDate(this.recipe.lastTried)
);
this.animateBar(this.toastbar, 1);
let a = 10;
clearInterval(barTimer);
barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
2021-04-12 18:09:48 +00:00
});
2021-02-28 15:10:26 +00:00
},
2021-06-15 11:04:42 +00:00
hideBar() {
clearInterval(barTimer);
this.animateBar(this.toastbar, 0).then(() => {
this.toast = null;
this.photoOpen
? (this.appbar.opacity = 1)
: this.animateBar(this.appbar, 1);
});
2021-05-22 08:56:31 +00:00
},
2021-04-21 10:31:49 +00:00
// getMeasure(value: number, unit: string) {
// let vm = this;
// function roundedQ(val: number) {
// return Math.abs(
// Math.round(
2021-05-22 08:56:31 +00:00
// (val / vm.recipe.yieldQuantity) * vm.tempYieldQuantity * 100
2021-04-21 10:31:49 +00:00
// ) / 100
// );
// }
// if (value) {
// let rounded = Math.abs(
// Math.round(
2021-05-22 08:56:31 +00:00
// (value / this.recipe.yieldQuantity) * this.tempYieldQuantity * 100
2021-04-21 10:31:49 +00:00
// ) / 100
// );
// let lUnit = localize(unit);
// switch (unit) {
// //IMPERIAL
// case "g":
// return rounded < 1000
// ? `${rounded} ${lUnit} `
// : `${roundedQ(rounded / 1000)} ${localize("kg")} `;
// case "ml":
// return rounded < 1000
// ? `${rounded} ${lUnit} `
// : `${roundedQ(rounded / 1000)} ${localize("l")} `;
// //METRIC
// case "tsp":
// return rounded < 3
// ? `${rounded} ${lUnit} `
// : `${roundedQ(rounded / 3)} ${localize("tbsp")} `;
// case "in":
// return rounded < 12
// ? `${rounded} ${lUnit} `
// : `${roundedQ(rounded / 12)} ${localize("ft")} `;
// default:
// return `${rounded} ${lUnit} `;
// }
// } else return "";
// },
roundedQuantity(quantity: number) {
2021-02-28 15:10:26 +00:00
return Math.abs(
Math.round(
2021-05-22 08:56:31 +00:00
(quantity / this.recipe.yieldQuantity) * this.tempYieldQuantity * 100
2021-02-28 15:10:26 +00:00
) / 100
);
},
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) {
2021-06-15 11:04:42 +00:00
return new Intl.DateTimeFormat(null, {
2021-02-28 15:10:26 +00:00
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
2021-06-15 11:04:42 +00:00
}).format(new Date(date));
2021-02-28 15:10:26 +00:00
},
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;
2021-05-22 08:56:31 +00:00
// this.overwriteRecipeAction({
// id: this.currentRecipeID,
// recipe: this.recipe,
// });
2020-11-15 10:51:10 +00:00
},
2021-04-01 10:55:35 +00:00
touchIngredient({ object, action }, index) {
object.className = action.match(/down|move/)
? "ingredient fade"
: "ingredient";
if (action == "up") this.checkChange(object, index);
2021-01-23 17:20:15 +00:00
},
2021-04-12 18:09:48 +00:00
checkChange(obj, index) {
this.checks[index] = !this.checks[index];
if (this.checks[index]) {
this.checked++;
obj.getChildAt(0).text = this.icon.check;
} else {
this.checked--;
obj.getChildAt(0).text = this.icon.uncheck;
}
},
2021-01-23 17:20:15 +00:00
clearChecks() {
2021-04-12 18:09:48 +00:00
this.checked = 0;
this.checks = [];
2021-04-14 09:27:40 +00:00
for (let i = 1; i < this.ingcon.getChildrenCount(); i++) {
2021-04-12 18:09:48 +00:00
this.ingcon.getChildAt(i).getChildAt(0).text = this.icon.uncheck;
2021-04-01 10:55:35 +00:00
}
},
touchInstruction({ object, action }) {
let hasDone = object.className.includes("done");
object.className = action.match(/down|move/)
2021-04-12 18:09:48 +00:00
? `instruction ${hasDone ? "done" : "fade"}`
2021-04-01 10:55:35 +00:00
: `instruction ${hasDone ? "done" : ""}`;
if (action == "up") this.stepDone(object);
2020-11-28 19:21:57 +00:00
},
2021-04-12 18:09:48 +00:00
stepDone(object) {
let a = object;
if (a.className.includes("done")) {
a.className = "instruction";
this.stepsDid--;
} else {
a.className = "instruction done";
this.stepsDid++;
}
},
2021-01-23 17:20:15 +00:00
clearSteps() {
2021-04-12 18:09:48 +00:00
this.stepsDid = 0;
2021-04-14 09:27:40 +00:00
for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
2021-04-01 10:55:35 +00:00
this.inscon.getChildAt(i).className = "instruction";
}
2021-01-23 17:20:15 +00:00
},
2021-06-15 11:04:42 +00:00
getDates() {
let u = `${localize("Last updated")}: ${this.formattedDate(
this.recipe.lastModified
)}`;
let c = `${localize("Created")}: ${this.formattedDate(
this.recipe.created
)}`;
return {
u,
c,
uc: u + "\n" + c,
};
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// NavigationHandlers
2020-10-14 19:32:32 +00:00
editRecipe() {
2021-06-15 11:04:42 +00:00
this.busyEdit = 1;
2021-02-28 15:10:26 +00:00
this.$navigateTo(EditRecipe, {
2020-10-21 17:54:45 +00:00
props: {
2020-11-28 19:21:57 +00:00
filterTrylater: this.filterTrylater,
2020-11-15 10:51:10 +00:00
recipeID: this.currentRecipeID,
2020-10-21 17:54:45 +00:00
},
2021-06-15 11:04:42 +00:00
animated: false,
2021-02-28 15:10:26 +00:00
});
},
viewCombination(combination) {
2021-04-01 10:55:35 +00:00
this.scrollview.scrollToVerticalOffset(0, true);
2021-02-28 15:10:26 +00:00
this.recipe = this.recipes.filter((e) => e.id === combination)[0];
2021-06-15 11:04:42 +00:00
this.showTitleArr = new Array(4).fill(0);
2021-04-01 10:55:35 +00:00
this.clearChecks();
2021-04-12 18:09:48 +00:00
this.clearSteps();
2021-06-15 11:04:42 +00:00
this.recipe.ingredients.forEach(() => this.checks.push(0));
2021-02-28 15:10:26 +00:00
this.currentRecipeID = combination;
this.syncCombinations();
2021-04-01 10:55:35 +00:00
this.createNotes();
2021-05-22 08:56:31 +00:00
this.yieldMultiplier = this.recipe.yieldQuantity;
2021-04-01 10:55:35 +00:00
this.recipe.tried && this.recipe.lastTried && this.showLastTried();
2020-11-15 10:51:10 +00:00
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// ShareAction
2020-11-10 18:28:48 +00:00
shareHandler() {
2021-05-22 08:56:31 +00:00
if (this.recipe.image) {
2021-05-25 14:32:53 +00:00
this.$showModal(Action, {
2020-11-10 18:28:48 +00:00
props: {
2021-01-13 05:02:48 +00:00
title: "shr",
2021-04-18 13:28:25 +00:00
list: ["rec", "pht"],
2020-11-10 18:28:48 +00:00
},
2021-02-28 15:10:26 +00:00
}).then((result) => {
switch (result) {
2021-04-18 13:28:25 +00:00
case "rec":
this.shareRecipe();
break;
2021-04-01 10:55:35 +00:00
case "pht":
2021-05-22 08:56:31 +00:00
ImageSource.fromFile(this.recipe.image).then((res) =>
2021-06-15 11:04:42 +00:00
utils.shareImage(res, localize("srpu"), this.recipe.title)
2021-04-12 19:25:14 +00:00
);
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-04-18 18:34:17 +00:00
let overview = `${this.recipe.title}\n\n`;
if (this.recipe.rating)
overview += `${localize("stars")}: ${this.recipe.rating}\n`;
overview += `${localize("cui")}: ${localize(
this.recipe.cuisine
)}\n${localize("cat")}: ${localize(this.recipe.category)}\n`;
if (this.recipe.tags.length)
overview += `${localize("ts")}: ${this.recipe.tags.join(", ")}\n`;
if (this.recipe.prepTime != "00:00")
overview += `${localize("prepT")}: ${this.formattedTime(
this.recipe.prepTime
)}\n`;
if (this.recipe.cookTime != "00:00")
overview += `${localize("cookT")}: ${this.formattedTime(
this.recipe.cookTime
)}\n`;
overview += `${localize("yld")}: ${this.tempYieldQuantity} ${localize(
2021-05-22 08:56:31 +00:00
this.recipe.yieldUnit
2021-04-18 18:34:17 +00:00
)}\n${localize("Difficulty level")}: ${localize(
this.recipe.difficulty
)}\n`;
2021-02-28 15:10:26 +00:00
let shareContent = overview;
if (this.recipe.ingredients.length) {
2021-04-12 18:09:48 +00:00
let ingredients = `\n\n${localize("ings")}:\n\n`;
2021-02-28 15:10:26 +00:00
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) {
2021-04-12 18:09:48 +00:00
let instructions = `\n\n${localize("inss")}:\n\n`;
2021-02-28 15:10:26 +00:00
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.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-04-12 18:09:48 +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
let sharenote = "\n" + localize("appCrd");
shareContent += sharenote;
2021-04-12 19:25:14 +00:00
utils.shareText(shareContent, localize("sru"));
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// DataHandlers
2021-05-22 08:56:31 +00:00
toggle(key: string, setDate: boolean) {
2021-02-28 15:10:26 +00:00
this.toggleStateAction({
2020-11-15 10:51:10 +00:00
id: this.currentRecipeID,
2020-10-26 20:49:54 +00:00
key,
2020-11-02 11:36:53 +00:00
setDate,
2021-02-28 15:10:26 +00:00
});
2021-05-22 08:56:31 +00:00
if (setDate) 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,
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-06-15 11:04:42 +00:00
// ShoppingList
2021-01-13 05:02:48 +00:00
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,
2021-02-28 15:10:26 +00:00
});
2021-01-13 05:02:48 +00:00
},
2021-01-23 17:20:15 +00:00
2021-06-15 11:04:42 +00:00
// Notes
2021-04-01 10:55:35 +00:00
createNote(note) {
2021-02-28 15:10:26 +00:00
let regex = /(https?:\/\/[^\s]+)/g;
2021-06-15 11:04:42 +00:00
const lbl = new RLabel();
2021-04-21 10:31:49 +00:00
lbl.className = "note";
2021-04-01 10:55:35 +00:00
lbl.textWrap = true;
let fString = new FormattedString();
let arr = 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.on("linkTap", () => Utils.openUrl(text));
2020-12-02 09:46:25 +00:00
}
2021-04-01 10:55:35 +00:00
fString.spans.push(span);
2020-12-02 09:46:25 +00:00
}
2021-04-01 10:55:35 +00:00
arr.forEach((text) => {
2021-02-28 15:10:26 +00:00
createSpan(text, regex.test(text));
});
2021-04-01 10:55:35 +00:00
lbl.formattedText = fString;
return lbl;
},
createNotes() {
const stack = this.notescon;
stack.removeChildren();
this.recipe.notes.forEach((note) =>
stack.addChild(this.createNote(note))
);
},
getTags(tags) {
return tags.join(" · ");
},
2021-04-12 18:09:48 +00:00
hijackBackEvent() {
2021-04-21 10:31:49 +00:00
Application.android.on(
2021-04-12 18:09:48 +00:00
AndroidApplication.activityBackPressedEvent,
this.backEvent
);
},
releaseBackEvent() {
2021-04-21 10:31:49 +00:00
Application.android.off(
2021-04-12 18:09:48 +00:00
AndroidApplication.activityBackPressedEvent,
this.backEvent
);
},
backEvent(args) {
if (this.photoOpen) {
args.cancel = true;
this.closePhoto();
} else this.$navigateBack();
},
viewPhoto() {
2021-06-15 11:04:42 +00:00
this.hideBars();
this.photoOpen = 1;
2021-04-12 18:09:48 +00:00
this.hijackBackEvent();
2021-04-21 10:31:49 +00:00
let pv = this.imgView;
2021-04-12 18:09:48 +00:00
pv.visibility = "visible";
let sw = Screen.mainScreen.widthDIPs;
let sh = Screen.mainScreen.heightDIPs;
pv.animate({
opacity: 1,
duration: 50,
})
.then(() =>
pv.animate({
width: sw,
height: sw,
2021-06-15 11:04:42 +00:00
translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
duration: 200,
2021-04-12 18:09:48 +00:00
curve: CoreTypes.AnimationCurve.ease,
})
)
.then(() =>
pv.animate({
2021-04-21 10:31:49 +00:00
height: sh,
2021-06-15 11:04:42 +00:00
translate: { x: this.RTL ? -16 : 112 - sw, y: -((sh - sw) / 6) },
duration: 200,
2021-04-12 18:09:48 +00:00
curve: CoreTypes.AnimationCurve.ease,
})
2021-04-01 10:55:35 +00:00
);
},
2021-04-12 18:09:48 +00:00
closePhoto() {
2021-04-21 10:31:49 +00:00
let pv = this.imgView;
2021-04-12 18:09:48 +00:00
let sw = Screen.mainScreen.widthDIPs;
let sh = Screen.mainScreen.heightDIPs;
pv.animate({
width: sw,
height: sw,
2021-06-15 11:04:42 +00:00
translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
duration: 200,
2021-04-12 18:09:48 +00:00
curve: CoreTypes.AnimationCurve.ease,
})
.then(() =>
pv.animate({
width: 96,
height: 96,
translate: { x: 0, y: 0 },
2021-06-15 11:04:42 +00:00
duration: 200,
2021-04-12 18:09:48 +00:00
curve: CoreTypes.AnimationCurve.ease,
})
)
.then(() =>
pv.animate({
opacity: 0,
duration: 50,
})
)
.then(() => {
pv.visibility = "collapsed";
2021-06-15 11:04:42 +00:00
this.photoOpen = 0;
2021-04-12 18:09:48 +00:00
this.releaseBackEvent();
2021-06-15 11:04:42 +00:00
this.showBars();
2021-04-12 18:09:48 +00:00
});
},
2021-06-15 11:04:42 +00:00
// Timers
2021-05-22 08:56:31 +00:00
openCookingTimer() {
this.$navigateTo(CookingTimer, {
props: {
recipeID: this.recipe.id,
},
2021-06-15 11:04:42 +00:00
animated: false,
});
},
//DuplicateRecipe
duplicateRecipe() {
this.busyDup = 1;
let dupRecipe = Object.assign({}, this.recipe);
dupRecipe.id = utils.getRandomID(0);
dupRecipe.title = dupRecipe.title + " " + localize("cpy");
this.$navigateTo(EditRecipe, {
props: {
dupRecipe,
},
animated: false,
2021-05-22 08:56:31 +00:00
});
},
2021-06-15 11:04:42 +00:00
// Print
prepareHTML() {
let r = this.recipe;
const head = `<head><meta charset=UTF-8><meta content="IE=edge"http-equiv=X-UA-Compatible><meta content="width=device-width,initial-scale=1"name=viewport><title>EnRecipes - Recipe for Print</title><style>a,body,div,html,img,ol,p,span,ul{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}@font-face{font-family:Inter-Medium;src:url(../app/fonts/Inter-Medium.otf)}@font-face{font-family:Inter-Bold;src:url(../app/fonts/Inter-Bold.otf)}body{font-family:Inter-Medium,sans-serif;line-height:1.5;max-width:45rem;padding:1.5rem}body>p{padding:.5rem 0}.attr>div>p:last-child,h1,h2{font-family:Inter-Bold,sans-serif}#header{display:grid;grid-column-gap:2rem;grid-template-columns:1fr auto;margin-bottom:2.5rem;width:100%}img{border-radius:1rem;height:8rem;object-fit:cover;width:8rem}h1{font-size:2.25rem;line-height:1.25;margin:0;padding-bottom:1rem}svg{width:2rem;height:2rem;padding:0 .5rem 0 0}h2{margin:2rem 0 1rem}.attr{display:grid;grid-column-gap:2rem;grid-template-columns:1fr 1fr;margin-top:1rem}.attr>div>p:first-child{font-size:.9rem;opacity:.5}ol,ul{padding:0 1.5rem}li{padding:.5rem}a{color:inherit}.sub{font-size:.9rem;margin-top:2rem;opacity:.5}</style></head>`;
const getStarRating = () => {
let rate = `<svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M10.756 2.826 8.419 7.98l-5.624.63c-.533.06-.982.425-1.147.935-.166.51-.018 1.07.378 1.431l4.179 3.816-1.138 5.543c-.108.525.101 1.065.535 1.38.434.315 1.012.348 1.478.083L12 19.002l4.92 2.796c.466.265 1.044.232 1.478-.083.434-.315.643-.855.535-1.38l-1.138-5.543 4.179-3.816c.396-.361.544-.921.378-1.431-.165-.51-.614-.875-1.147-.935l-5.624-.63-2.337-5.154c-.221-.489-.708-.802-1.244-.802s-1.023.313-1.244.802z"/></svg>`;
let unrate = `<svg width="100%" height="100%" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M10.756 2.826 8.419 7.98l-5.624.63c-.533.06-.982.425-1.147.935-.166.51-.018 1.07.378 1.431l4.179 3.816-1.138 5.543c-.108.525.101 1.065.535 1.38.434.315 1.012.348 1.478.083L12 19.002l4.92 2.796c.466.265 1.044.232 1.478-.083.434-.315.643-.855.535-1.38l-1.138-5.543 4.179-3.816c.396-.361.544-.921.378-1.431-.165-.51-.614-.875-1.147-.935l-5.624-.63-2.337-5.154c-.221-.489-.708-.802-1.244-.802s-1.023.313-1.244.802zM12 4.925l1.994 4.398c.146.321.45.542.8.581l4.799.538-3.567 3.256c-.26.237-.376.594-.305.94l.972 4.73-4.199-2.386c-.306-.174-.682-.174-.988.0l-4.199 2.386.972-4.73c.071-.346-.045-.703-.305-.94l-3.567-3.256 4.799-.538c.35-.039.654-.26.8-.581L12 4.925z"/></svg>`;
return rate.repeat(r.rating) + unrate.repeat(5 - r.rating);
};
const img = r.image ? `<img src="${r.image}" alt="${r.title}" />` : "";
const getIngs = () => {
let ing = [];
r.ingredients.forEach((e) => {
ing.push(`<li>${this.getIngredientItem(e)}</li>`);
});
return ing.join("");
};
const getIns = () => {
let ins = [];
r.instructions.forEach((e) => {
ins.push(`<li>${e}</li>`);
});
return ins.join("");
};
const getCmbs = () => {
let cmb = [];
r.combinations.forEach((e) => {
cmb.push(`<p>${this.getCombinationTitle(e)}</p>`);
});
return cmb.join("");
};
const getNotes = () => {
let regex = /(https?:\/\/[^\s]+)/g;
let n = [];
const createSpan = (val, isUrl) => {
return isUrl
? `<a href="${val}" target="_blank" rel="noopener noreferrer">${val}</a>`
: val;
};
r.notes.forEach((e) => {
let arr = e.split(regex);
let single = [];
arr.forEach((f) => {
single.push(createSpan(f, regex.test(f)));
});
n.push(`<p>${single.join("")}</p>`);
});
return n.join("");
};
return `<html dir="${
this.RTL ? "rtl" : "ltr"
}">${head}<body><div id=header><div class=title><h1>${
r.title
}</h1><div class=rating>${getStarRating()}</div></div>${img}</div><div class=attr><div><p>${localize(
"cui"
)}<p>${r.cuisine}</div><div><p>${localize("cat")}<p>${
r.category
}</div></div>${
r.tags.length
? `<div class=attr><div style="grid-column:span 2"><p>${localize(
"ts"
)}<p>${this.getTags(r.tags)}</div></div>`
: ""
} ${
this.hasTime(r.prepTime) || this.hasTime(r.cookTime)
? `<div class=attr>${
this.hasTime(r.prepTime)
? `<div><p>${localize("prepT")}<p>${this.formattedTime(
r.prepTime
)}</div>`
: ""
} ${
this.hasTime(r.cookTime)
? `<div><p>${localize("cookT")}<p>${this.formattedTime(
r.cookTime
)}</div>`
: ""
}</div>`
: ""
}<div class=attr><div><p>${localize("yld")}<p>${
this.tempYieldQuantity
} ${localize(r.yieldUnit)}</div><div><p>${localize(
"Difficulty level"
)}<p>${r.difficulty}</div></div>${
r.ingredients.length
? `<h2>${this.getTitleCount("ings", "ingredients")}</h2>`
: ""
}<ul>${getIngs()}</ul>${
r.instructions.length
? `<h2>${this.getTitleCount("inss", "instructions")}</h2>`
: ""
}<ol>${getIns()}</ol>${
r.combinations.length
? `<h2>${this.getTitleCount("cmbs", "combinations")}</h2>`
: ""
} ${getCmbs()} ${
r.notes.length ? `<h2>${this.getTitleCount("nos", "notes")}</h2>` : ""
} ${getNotes()}<div class=sub><p>${this.getDates().u}<p>${
this.getDates().c
}</div>
</body>
</html>`;
},
printView() {
let wv = this.wv as WebView;
const fileName = `${this.recipe.title} - ${localize("EnRecipes")}`;
wv.src = this.prepareHTML();
wv.once("loadFinished", () =>
utils.Printer.print(wv, fileName).then(() => (wv.src = null))
);
},
// Helpers
2021-04-01 10:55:35 +00:00
touchYield({ object, action }) {
object.className = action.match(/down|move/)
2021-06-15 11:04:42 +00:00
? "value accent fade"
: "value accent";
2021-04-01 10:55:35 +00:00
if (action == "up") this.changeYield();
},
},
created() {
2021-02-28 15:10:26 +00:00
this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0];
2021-06-15 11:04:42 +00:00
this.recipe.ingredients.forEach((e) => this.checks.push(0));
2020-10-14 19:32:32 +00:00
},
mounted() {
2021-06-15 11:04:42 +00:00
this.yieldMultiplier = this.yieldQuantity || this.recipe.yieldQuantity;
},
2021-02-28 15:10:26 +00:00
};
2020-10-14 19:32:32 +00:00
</script>