1281 lines
39 KiB
Vue
1281 lines
39 KiB
Vue
<template>
|
|
<Page @loaded="pageL" @unloaded="pageUL" actionBarHidden="true">
|
|
<GridLayout rows="*, auto, auto" columns="auto, *, auto">
|
|
<DockLayout stretchLastChild="true" rowSpan="3" colSpan="3">
|
|
<RGridLayout
|
|
:rtl="RTL"
|
|
dock="top"
|
|
rows="auto,auto"
|
|
columns="*, auto"
|
|
paddingBottom="24"
|
|
>
|
|
<StackLayout>
|
|
<RLabel
|
|
class="pTitle tw tb"
|
|
paddingBottom="8"
|
|
:text="recipe.title"
|
|
/>
|
|
<StackLayout
|
|
:class="{ f: RTL }"
|
|
margin="0 12"
|
|
orientation="horizontal"
|
|
>
|
|
<Button
|
|
class="ico rate"
|
|
:class="{ rated: recipe.rating >= n }"
|
|
v-for="n in 5"
|
|
:key="n"
|
|
:text="recipe.rating < n ? icon.star : icon.starred"
|
|
@touch="touchRate($event, n)"
|
|
/>
|
|
</StackLayout>
|
|
</StackLayout>
|
|
<Image
|
|
col="1"
|
|
v-if="recipe.image"
|
|
:src="recipe.image"
|
|
stretch="aspectFit"
|
|
class="photo"
|
|
decodeWidth="96"
|
|
decodeHeight="96"
|
|
@tap="viewPhoto"
|
|
/>
|
|
</RGridLayout>
|
|
<AbsoluteLayout dock="bottom">
|
|
<ScrollView
|
|
dock="bottom"
|
|
width="100%"
|
|
height="100%"
|
|
@loaded="scrollvL"
|
|
@scroll="scrollvS($event)"
|
|
>
|
|
<StackLayout>
|
|
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
|
<StackLayout class="attrT">
|
|
<RLabel class="sub" :text="'cui' | L" />
|
|
<RLabel class="v" :text="recipe.cuisine | L" />
|
|
</StackLayout>
|
|
<StackLayout class="attrT" col="1">
|
|
<RLabel class="sub" :text="'cat' | L" />
|
|
<RLabel class="v" :text="recipe.category | L" />
|
|
</StackLayout>
|
|
</RGridLayout>
|
|
<StackLayout
|
|
:hidden="!recipe.tags.length"
|
|
class="attrT hal"
|
|
:class="{ r: RTL }"
|
|
>
|
|
<RLabel class="sub" :text="'ts' | L" />
|
|
<RLabel class="v" :text="getTags" />
|
|
</StackLayout>
|
|
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
|
<StackLayout class="attrT" :hidden="!hasTime(recipe.prepTime)">
|
|
<RLabel class="sub" :text="'prepT' | L" />
|
|
<RLabel class="v" :text="niceTime(recipe.prepTime)" />
|
|
</StackLayout>
|
|
<StackLayout
|
|
:col="hasTime(recipe.prepTime) ? 1 : 0"
|
|
class="attrT"
|
|
:hidden="!hasTime(recipe.cookTime)"
|
|
>
|
|
<RLabel class="title sub" :text="'cookT' | L" />
|
|
<RLabel class="v" :text="niceTime(recipe.cookTime)" />
|
|
</StackLayout>
|
|
</RGridLayout>
|
|
<RGridLayout :rtl="RTL" rows="auto" columns="*, *">
|
|
<StackLayout class="attrT">
|
|
<RLabel class="title sub" :text="'yld' | L" />
|
|
<RLabel
|
|
@touch="touchYield"
|
|
class="v accent"
|
|
:text="`${tempYieldQuantity} ${$options.filters.L(
|
|
recipe.yieldUnit
|
|
)}`"
|
|
/>
|
|
</StackLayout>
|
|
<StackLayout class="attrT" col="1">
|
|
<RLabel class="title sub" :text="'Difficulty level' | L" />
|
|
<RLabel class="v" :text="recipe.difficulty | L" />
|
|
</StackLayout>
|
|
</RGridLayout>
|
|
<StackLayout @loaded="ingCL">
|
|
<RLabel
|
|
class="section t2 tb tw"
|
|
:hidden="!recipe.ingredients.length"
|
|
:text="getTitleCount('ings', 'ingredients')"
|
|
/>
|
|
<RStackLayout
|
|
:rtl="RTL"
|
|
orientation="horizontal"
|
|
v-for="(item, i) in recipe.ingredients"
|
|
:key="item.key"
|
|
class="check"
|
|
@touch="item.type && touchIngredient($event, i)"
|
|
>
|
|
<Button
|
|
:hidden="!item.type"
|
|
class="ico si"
|
|
:text="icon.uncheck"
|
|
/>
|
|
<RLabel
|
|
class="v tw"
|
|
:class="{ 'tb t t3': !item.type }"
|
|
:text="getIng(item)"
|
|
/>
|
|
</RStackLayout>
|
|
</StackLayout>
|
|
<StackLayout @loaded="insCL">
|
|
<RLabel
|
|
:hidden="!recipe.instructions.length"
|
|
class="section t2 tb tw"
|
|
:text="getTitleCount('inss', 'instructions')"
|
|
/>
|
|
<RStackLayout
|
|
:rtl="RTL"
|
|
orientation="horizontal"
|
|
@touch="item.type && touchInstruction($event)"
|
|
v-for="(item, i) in recipe.instructions"
|
|
:key="item.key"
|
|
class="check"
|
|
>
|
|
<Button
|
|
:hidden="!item.type"
|
|
class="tb t3 ico si"
|
|
:text="localeN(getInsPos[i])"
|
|
/>
|
|
<RLabel
|
|
class="v tw"
|
|
:class="{ 'tb t t3': !item.type }"
|
|
:text="item.value"
|
|
/>
|
|
</RStackLayout>
|
|
</StackLayout>
|
|
<RLabel
|
|
@loaded="cmbCL"
|
|
:hidden="!recipe.combinations.length"
|
|
class="section t2 tb tw"
|
|
:text="getTitleCount('cmbs', 'combinations')"
|
|
/>
|
|
<Button
|
|
v-for="(combination, index) in recipe.combinations"
|
|
:key="index + 'comb'"
|
|
class="note tw hal lh4 fb"
|
|
:class="{ r: RTL }"
|
|
:text="getCombinationTitle(combination)"
|
|
@tap="viewCombination(combination)"
|
|
/>
|
|
<RLabel
|
|
@loaded="notesCTL"
|
|
:hidden="!recipe.notes.length"
|
|
class="section t2 tb tw"
|
|
:text="getTitleCount('nos', 'notes')"
|
|
/>
|
|
<StackLayout @loaded="notesCL"> </StackLayout>
|
|
<Label
|
|
padding="32 16 16"
|
|
class="lh4 t5 sub tw"
|
|
:text="getDates.uc"
|
|
/>
|
|
</StackLayout>
|
|
</ScrollView>
|
|
<RLabel
|
|
class="t2 tb tw sticky"
|
|
:hidden="!stickyTitle"
|
|
:text="stickyTitle"
|
|
/>
|
|
</AbsoluteLayout>
|
|
</DockLayout>
|
|
<GridLayout
|
|
row="1"
|
|
@loaded="sidebarL"
|
|
class="appbar toolbar"
|
|
:col="RTL ? 0 : 2"
|
|
rows="auto, auto, auto, auto"
|
|
:visibility="showTools ? 'visible' : 'hidden'"
|
|
>
|
|
<Button class="ico" :text="icon.timer" @tap="openCookingTimer" />
|
|
<Button
|
|
row="1"
|
|
:hidden="busyDup"
|
|
class="ico"
|
|
:class="{ f: RTL }"
|
|
:text="icon.dup"
|
|
@tap="duplicateRecipe"
|
|
/>
|
|
<ActivityIndicator row="1" :hidden="!busyDup" :busy="busyDup" />
|
|
<Button
|
|
:hidden="!hasPrinterSupport"
|
|
row="2"
|
|
class="ico"
|
|
:text="icon.print"
|
|
@tap="printView"
|
|
/>
|
|
<Button row="3" class="ico" :text="icon.share" @tap="shareHandler" />
|
|
</GridLayout>
|
|
<RGridLayout
|
|
:rtl="RTL"
|
|
row="2"
|
|
colSpan="3"
|
|
@loaded="appbarL"
|
|
class="appbar"
|
|
:hidden="toast"
|
|
columns="auto, *, auto, auto, auto, auto"
|
|
@touch="() => null"
|
|
>
|
|
<Button class="ico rtl" :text="icon.back" @tap="$navigateBack()" />
|
|
<Button
|
|
col="2"
|
|
v-if="!filterTrylater"
|
|
class="ico"
|
|
:text="recipe.tried ? icon.try : icon.tried"
|
|
@tap="toggle('tried')"
|
|
/>
|
|
<Button
|
|
col="2"
|
|
v-else
|
|
class="ico"
|
|
:text="recipeTried ? icon.try : icon.done"
|
|
@tap="toggle('tried', 1)"
|
|
/>
|
|
<Button
|
|
col="3"
|
|
class="ico"
|
|
:text="recipe.favorite ? icon.faved : icon.fav"
|
|
@tap="toggle('favorite')"
|
|
/>
|
|
<Button
|
|
col="4"
|
|
:hidden="busyEdit"
|
|
class="ico"
|
|
:text="icon.edit"
|
|
@tap="editRecipe"
|
|
/>
|
|
<ActivityIndicator col="4" :hidden="!busyEdit" :busy="busyEdit" />
|
|
<Button
|
|
col="5"
|
|
class="ico"
|
|
:text="showTools ? icon.less : icon.more"
|
|
@tap="toggleTools"
|
|
/>
|
|
</RGridLayout>
|
|
<Toast
|
|
row="2"
|
|
colSpan="3"
|
|
:onload="toastL"
|
|
:toast="toast"
|
|
:action="hideBar"
|
|
/>
|
|
<AbsoluteLayout rowSpan="3" colSpan="3">
|
|
<Image
|
|
@tap="closePhoto"
|
|
backgroundColor="black"
|
|
stretch="aspectFit"
|
|
@loaded="imgVLoad"
|
|
:src="recipe.image"
|
|
class="imgV"
|
|
/>
|
|
</AbsoluteLayout>
|
|
<WebView @loaded="wvLoad" hidden />
|
|
<Label
|
|
rowSpan="3"
|
|
colSpan="3"
|
|
class="edge hal"
|
|
:class="{ 'f r': RTL }"
|
|
@swipe="swipeBack"
|
|
/>
|
|
<Label
|
|
rowSpan="3"
|
|
colSpan="3"
|
|
class="edge har rtl f"
|
|
@swipe="swipeBack"
|
|
/>
|
|
</GridLayout>
|
|
</Page>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
Application,
|
|
AndroidApplication,
|
|
ImageSource,
|
|
Utils,
|
|
Span,
|
|
FormattedString,
|
|
Observable,
|
|
Screen,
|
|
CoreTypes,
|
|
WebView,
|
|
} from "@nativescript/core";
|
|
import { RLabel } from "~/rtl-ui";
|
|
import { localize } from "@nativescript/localize";
|
|
import { mapActions, mapState } from "vuex";
|
|
import CookingTimer from "./CookingTimer.vue";
|
|
import EditRecipe from "./EditRecipe.vue";
|
|
import Action from "./modals/Action.vue";
|
|
import Toast from "./sub/Toast.vue";
|
|
import Prompt from "./modals/Prompt.vue";
|
|
import * as utils from "~/shared/utils";
|
|
const Intl = require("nativescript-intl");
|
|
let barTimer;
|
|
declare const android: any;
|
|
export default {
|
|
components: { Toast },
|
|
props: ["filterTrylater", "recipeID", "yieldQuantity"],
|
|
data() {
|
|
return {
|
|
busyEdit: 0,
|
|
busyDup: 0,
|
|
yieldMultiplier: 1,
|
|
recipe: null,
|
|
currentRecipeID: this.recipeID,
|
|
scrollview: null,
|
|
appbar: null,
|
|
sidebar: null,
|
|
toastbar: null,
|
|
ingcon: null,
|
|
inscon: null,
|
|
cmbcon: null,
|
|
notescon: null,
|
|
notesT: null,
|
|
imgView: null,
|
|
checks: [],
|
|
checked: 0,
|
|
stepsDid: 0,
|
|
toast: null,
|
|
photoOpen: 0,
|
|
showTitleArr: [0, 0, 0, 0],
|
|
view: null,
|
|
wv: null,
|
|
showTools: 0,
|
|
snackMsg: null,
|
|
recipeTried: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["icon", "recipes", "RTL", "awakeV", "mSystem"]),
|
|
tempYieldQuantity() {
|
|
return Math.abs(this.yieldMultiplier) > 0
|
|
? Math.abs(parseFloat(this.yieldMultiplier))
|
|
: 1;
|
|
},
|
|
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;
|
|
},
|
|
hasPrinterSupport() {
|
|
return utils.Printer.isSupported();
|
|
},
|
|
getTags() {
|
|
return this.recipe.tags.join(" · ");
|
|
},
|
|
getDates() {
|
|
let r = this.recipe;
|
|
let u = `${localize("Last updated")}: ${this.intlDate(r.lastModified)}`;
|
|
let c = `${localize("Created")}: ${this.intlDate(r.created)}`;
|
|
return {
|
|
u,
|
|
c,
|
|
uc: u + "\n" + c,
|
|
};
|
|
},
|
|
getInsPos() {
|
|
let a = 1;
|
|
let b = 1;
|
|
let ins = this.recipe.instructions;
|
|
return ins.reduce((acc, e) => {
|
|
if (!e.type) {
|
|
a = 1;
|
|
acc.push(b++);
|
|
} else acc.push(a++);
|
|
return acc;
|
|
}, []);
|
|
},
|
|
},
|
|
methods: {
|
|
...mapActions(["toggleState", "setR"]),
|
|
pageL({ object }) {
|
|
this.busyDup = this.busyEdit = this.photoOpen = 0;
|
|
object.bindingContext = new Observable();
|
|
if (this.yieldMultiplier == this.recipe.yieldQuantity)
|
|
this.yieldMultiplier = this.recipe.yieldQuantity;
|
|
if (this.awakeV) utils.keepScreenOn(1);
|
|
this.syncCombinations();
|
|
this.view = object.page.getViewById("printview");
|
|
},
|
|
pageUL() {
|
|
utils.keepScreenOn(0);
|
|
if (this.recipeTried) this.markTried();
|
|
},
|
|
sidebarL({ object }) {
|
|
this.sidebar = object;
|
|
},
|
|
appbarL({ object }) {
|
|
this.appbar = object;
|
|
},
|
|
toastL({ object }) {
|
|
this.toastbar = object;
|
|
this.recipe.lastTried && this.showLastTried();
|
|
},
|
|
ingCL({ object }) {
|
|
this.ingcon = object;
|
|
},
|
|
insCL({ object }) {
|
|
this.inscon = object;
|
|
},
|
|
cmbCL({ object }) {
|
|
this.cmbcon = object;
|
|
},
|
|
notesCL({ object }) {
|
|
this.notescon = object;
|
|
this.createNotes();
|
|
},
|
|
notesCTL({ object }) {
|
|
this.notesT = object;
|
|
},
|
|
|
|
// ScrollView
|
|
scrollvL(args) {
|
|
this.scrollview = args.object;
|
|
},
|
|
scrollvS({ object, scrollY }) {
|
|
let swipeUp: boolean;
|
|
let y = scrollY;
|
|
if (y) {
|
|
swipeUp = y > this.scrollPos;
|
|
this.scrollPos = Math.abs(y);
|
|
this.fixTitle(object, swipeUp);
|
|
if (!this.toast) {
|
|
let ab = this.appbar.translateY;
|
|
if (swipeUp && ab == 0) this.hideBars();
|
|
else if (!swipeUp && ab == 64) this.showBars();
|
|
}
|
|
}
|
|
},
|
|
fixTitle(object, swipeUp: boolean) {
|
|
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);
|
|
}
|
|
},
|
|
|
|
// AppBars
|
|
showBars() {
|
|
this.animateBar(this.appbar, 1);
|
|
},
|
|
hideBar() {
|
|
clearInterval(barTimer);
|
|
this.animateBar(this.toastbar, 0).then(() => {
|
|
this.toast = null;
|
|
this.photoOpen
|
|
? (this.appbar.opacity = 1)
|
|
: this.animateBar(this.appbar, 1);
|
|
});
|
|
},
|
|
hideBars() {
|
|
this.showTools && this.toggleTools();
|
|
this.animateBar(this.appbar, 0);
|
|
},
|
|
showLastTried() {
|
|
this.animateBar(this.appbar, 0).then(() => {
|
|
this.toast = localize(
|
|
"triedInfo",
|
|
this.niceDate(this.recipe.lastTried)
|
|
);
|
|
this.animateBar(this.toastbar, 1, 1);
|
|
let a = 10;
|
|
clearInterval(barTimer);
|
|
barTimer = setInterval(() => a-- < 1 && this.hideBar(), 1000);
|
|
});
|
|
},
|
|
|
|
// Helpers
|
|
getTitleCount(title, type, unsel) {
|
|
let c;
|
|
let s = null;
|
|
switch (title) {
|
|
case "ings":
|
|
s = this.checked;
|
|
c = this.recipe[type].filter((e) => e.type).length;
|
|
break;
|
|
case "inss":
|
|
s = this.stepsDid;
|
|
c = this.recipe[type].filter((e) => e.type).length;
|
|
break;
|
|
default:
|
|
c = this.recipe[type].length;
|
|
break;
|
|
}
|
|
c = this.localeN(c);
|
|
s = s && this.localeN(s);
|
|
let text = s && !unsel ? ` (${s}/${c})` : ` (${c})`;
|
|
return localize(title) + text;
|
|
},
|
|
getIng(o) {
|
|
let q = o.quantity;
|
|
return `${q ? this.scaleUnit(q, o.unit) : ""}${o.value}`;
|
|
},
|
|
roundQ(q: number) {
|
|
return Math.abs(
|
|
Math.round(
|
|
(q / this.recipe.yieldQuantity) * this.tempYieldQuantity * 100
|
|
) / 100
|
|
);
|
|
},
|
|
metric(q, u) {
|
|
switch (u) {
|
|
case "mg":
|
|
if (q / 1000 >= 1) {
|
|
q = q / 1000;
|
|
u = "g";
|
|
}
|
|
case "g":
|
|
if (q / 1000 >= 1) {
|
|
q = q / 1000;
|
|
u = "kg";
|
|
}
|
|
break;
|
|
case "ml":
|
|
if (q / 1000 >= 1) {
|
|
q = q / 1000;
|
|
u = "l";
|
|
}
|
|
break;
|
|
case "pinch":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "tsp";
|
|
}
|
|
case "tsp":
|
|
if (q / 3 >= 1) {
|
|
q = q / 3;
|
|
u = "tbsp";
|
|
}
|
|
case "tbsp":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "cup";
|
|
}
|
|
break;
|
|
case "cup":
|
|
if (q / 4.16 >= 1) {
|
|
q = q / 4.16;
|
|
u = "l";
|
|
}
|
|
break;
|
|
}
|
|
return { q, u };
|
|
},
|
|
imperial(q, u) {
|
|
switch (u) {
|
|
case "pinch":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "tsp";
|
|
}
|
|
case "tsp":
|
|
if (q / 3 >= 1) {
|
|
q = q / 3;
|
|
u = "tbsp";
|
|
} else if (q / 2 >= 1) {
|
|
q = q / 2;
|
|
u = "dsp";
|
|
}
|
|
case "dsp":
|
|
if (q / 1.5 >= 1) {
|
|
q = q / 1.5;
|
|
u = "tbsp";
|
|
}
|
|
case "tbsp":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "cup";
|
|
}
|
|
break;
|
|
case "fl oz":
|
|
if (q / 8 >= 1) {
|
|
q = q / 8;
|
|
u = "cup";
|
|
}
|
|
break;
|
|
case "cup":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "gal";
|
|
} else if (q / 4 >= 1) {
|
|
q = q / 4;
|
|
u = "qt";
|
|
} else if (q / 2 >= 1) {
|
|
q = q / 2;
|
|
u = "pt";
|
|
}
|
|
case "oz":
|
|
if (q / 16 >= 1) {
|
|
q = q / 16;
|
|
u = "lb";
|
|
}
|
|
case "pt":
|
|
if (q / 2 >= 1) {
|
|
q = q / 2;
|
|
u = "qt";
|
|
}
|
|
case "qt":
|
|
if (q / 4 >= 1) {
|
|
q = q / 4;
|
|
u = "gal";
|
|
}
|
|
}
|
|
return { q, u };
|
|
},
|
|
fraction(num) {
|
|
let arr = [0, 0.125, 0.25, 0.333, 0.375, 0.5, 0.666, 0.75, 0.875, 1];
|
|
let brr = [0, "⅛", "¼", "⅓", "⅜", "½", "⅔", "¾", "⅞", 1];
|
|
let dec = Math.trunc(num);
|
|
let n = Number((num - Math.floor(num)).toFixed(2));
|
|
let closest = arr.reduce((acc, e) =>
|
|
Math.abs(e - n) < Math.abs(acc - n) ? e : acc
|
|
);
|
|
let f = brr[arr.indexOf(closest)];
|
|
return f == 0 ? num : f == 1 ? dec + 1 : (dec ? dec + " " : "") + f;
|
|
},
|
|
scaleUnit(quantity, unit) {
|
|
quantity =
|
|
(quantity / this.recipe.yieldQuantity) * this.tempYieldQuantity;
|
|
let { q, u } =
|
|
this.mSystem == "mtrc"
|
|
? this.metric(quantity, unit)
|
|
: this.imperial(quantity, unit);
|
|
let rounded = Math.abs(Math.round(q * 100) / 100);
|
|
if (true) {
|
|
rounded = this.fraction(rounded);
|
|
}
|
|
return `${rounded} ${localize(u)} `;
|
|
},
|
|
changeYield() {
|
|
this.$showModal(Prompt, {
|
|
props: {
|
|
title: `${localize("req", localize(this.recipe.yieldUnit))}`,
|
|
placeholder: Math.abs(parseFloat(this.yieldMultiplier)),
|
|
action: "SET",
|
|
},
|
|
}).then((item) => {
|
|
if (item) this.yieldMultiplier = item;
|
|
});
|
|
},
|
|
hasTime(time) {
|
|
return time != "00:00";
|
|
},
|
|
niceTime(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}`;
|
|
},
|
|
niceDate(lastTried) {
|
|
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 "";
|
|
|
|
function duration(value, number?) {
|
|
return number ? localize(value, number) : localize(value);
|
|
}
|
|
return (
|
|
(diff < 86400 && lastTried > midnight && duration("today")) ||
|
|
(dayDiff == 1 && "yesterday") ||
|
|
(dayDiff < 7 && duration("dAgo", dayDiff)) ||
|
|
(dayDiff < 31 && duration("wAgo", Math.round(dayDiff / 7))) ||
|
|
(dayDiff < 366 && duration("mAgo", Math.round(dayDiff / 30))) ||
|
|
(dayDiff > 365 && duration("ltAgo"))
|
|
);
|
|
},
|
|
intlDate(date) {
|
|
return new Intl.DateTimeFormat(null, {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric",
|
|
}).format(new Date(date));
|
|
},
|
|
|
|
// NavigationHandlers
|
|
hijackBackEvent() {
|
|
Application.android.on(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.backEvent
|
|
);
|
|
},
|
|
releaseBackEvent() {
|
|
Application.android.off(
|
|
AndroidApplication.activityBackPressedEvent,
|
|
this.backEvent
|
|
);
|
|
},
|
|
backEvent(args) {
|
|
args.cancel = true;
|
|
this.closePhoto();
|
|
},
|
|
editRecipe() {
|
|
this.busyEdit = 1;
|
|
this.$navigateTo(EditRecipe, {
|
|
props: {
|
|
filterTrylater: this.filterTrylater,
|
|
recipeID: this.currentRecipeID,
|
|
},
|
|
animated: false,
|
|
});
|
|
},
|
|
|
|
// Combinations
|
|
getCombinationTitle(id) {
|
|
return this.recipes.filter((e) => e.id === id)[0].title;
|
|
},
|
|
syncCombinations() {
|
|
this.recipe.combinations = this.recipes
|
|
.filter(
|
|
(e) =>
|
|
e.combinations.indexOf(this.currentRecipeID) >= 0 ||
|
|
this.recipe.combinations.includes(e.id)
|
|
)
|
|
.map((e) => e.id);
|
|
},
|
|
viewCombination(combination) {
|
|
this.hideBar();
|
|
this.scrollview.scrollToVerticalOffset(0, true);
|
|
this.recipe = this.recipes.filter((e) => e.id === combination)[0];
|
|
this.showTitleArr = new Array(4).fill(0);
|
|
this.clearChecks();
|
|
this.clearSteps();
|
|
this.recipe.ingredients.forEach(() => this.checks.push(0));
|
|
this.currentRecipeID = combination;
|
|
this.syncCombinations();
|
|
this.createNotes();
|
|
this.yieldMultiplier = this.recipe.yieldQuantity;
|
|
this.recipe.lastTried && this.showLastTried();
|
|
},
|
|
|
|
// Tools
|
|
toggleTools() {
|
|
if (this.showTools) {
|
|
this.sidebar
|
|
.animate({
|
|
height: 0,
|
|
translate: { x: 0, y: 48 },
|
|
duration: 200,
|
|
curve: CoreTypes.AnimationCurve.easeIn,
|
|
})
|
|
.then(() => (this.showTools = 0));
|
|
} else {
|
|
this.sidebar.height = 1;
|
|
this.showTools = 1;
|
|
setTimeout(() => {
|
|
this.sidebar.animate({
|
|
height: 216,
|
|
duration: 200,
|
|
translate: { x: 0, y: 0 },
|
|
curve: CoreTypes.AnimationCurve.easeOut,
|
|
});
|
|
}, 1);
|
|
}
|
|
},
|
|
|
|
// ShareAction
|
|
shareHandler() {
|
|
if (this.recipe.image) {
|
|
this.$showModal(Action, {
|
|
props: {
|
|
title: "shr",
|
|
list: ["rec", "pht"],
|
|
},
|
|
}).then((result) => {
|
|
switch (result) {
|
|
case "rec":
|
|
this.shareRecipe();
|
|
break;
|
|
case "pht":
|
|
ImageSource.fromFile(this.recipe.image).then((res) =>
|
|
utils.shareImage(res, localize("srpu"), this.recipe.title)
|
|
);
|
|
break;
|
|
}
|
|
});
|
|
} else {
|
|
this.shareRecipe();
|
|
}
|
|
},
|
|
shareRecipe() {
|
|
let r = this.recipe;
|
|
let overview = `${r.title}\n\n`;
|
|
if (r.rating) overview += `${localize("stars")}: ${r.rating}\n`;
|
|
overview += `${localize("cui")}: ${localize(r.cuisine)}\n${localize(
|
|
"cat"
|
|
)}: ${localize(r.category)}\n`;
|
|
if (r.tags.length)
|
|
overview += `${localize("ts")}: ${r.tags.join(", ")}\n`;
|
|
if (r.prepTime != "00:00")
|
|
overview += `${localize("prepT")}: ${this.niceTime(r.prepTime)}\n`;
|
|
if (r.cookTime != "00:00")
|
|
overview += `${localize("cookT")}: ${this.niceTime(r.cookTime)}\n`;
|
|
overview += `${localize("yld")}: ${this.tempYieldQuantity} ${localize(
|
|
r.yieldUnit
|
|
)}\n${localize("Difficulty level")}: ${localize(r.difficulty)}\n`;
|
|
|
|
let shareContent = overview;
|
|
if (r.ingredients.length) {
|
|
let ingredients = `\n\n${localize("ings")}:\n\n`;
|
|
r.ingredients.forEach((e) => {
|
|
if (e.type) {
|
|
ingredients += `- ${
|
|
e.quantity
|
|
? this.roundQ(e.quantity) + " " + localize(e.unit) + " "
|
|
: ""
|
|
}${e.value}\n`;
|
|
} else {
|
|
ingredients += `\n${
|
|
e.quantity
|
|
? this.roundQ(e.quantity) + " " + localize(e.unit) + " "
|
|
: ""
|
|
}${e.value}\n\n`;
|
|
}
|
|
});
|
|
shareContent += ingredients;
|
|
}
|
|
let ins = r.instructions;
|
|
if (ins.length) {
|
|
let a = 1;
|
|
let b = 1;
|
|
let group = ins.reduce((acc, e) => {
|
|
if (!e.type) {
|
|
a = 1;
|
|
acc.push(b++);
|
|
} else acc.push(a++);
|
|
return acc;
|
|
}, []);
|
|
let instructions = `\n\n${localize("inss")}:\n\n`;
|
|
ins.forEach(
|
|
(e, i) =>
|
|
(instructions += (e.type ? group[i] + ". " : "") + `${e.value}\n\n`)
|
|
);
|
|
shareContent += instructions;
|
|
}
|
|
if (r.combinations.length) {
|
|
let combinations = `\n${localize("cmbs")}:\n\n`;
|
|
r.combinations.forEach((e, i) => {
|
|
combinations += `${i + 1}. ${this.getCombinationTitle(e)}\n\n`;
|
|
});
|
|
shareContent += combinations;
|
|
}
|
|
if (r.notes.length) {
|
|
let notes = `\n${localize("nos")}:\n\n`;
|
|
r.notes.forEach((e, i) => {
|
|
notes += `${i + 1}. ${e.value}\n\n`;
|
|
});
|
|
shareContent += notes;
|
|
}
|
|
let sharenote = "\n" + localize("appCrd");
|
|
shareContent += sharenote;
|
|
utils.shareText(shareContent, localize("sru"));
|
|
},
|
|
|
|
// Toggles
|
|
toggle(key: string, setDate: number) {
|
|
console.log(setDate);
|
|
if (setDate) {
|
|
this.recipeTried = !this.recipeTried;
|
|
} else
|
|
this.toggleState({
|
|
id: this.currentRecipeID,
|
|
key,
|
|
setDate,
|
|
});
|
|
},
|
|
markTried() {
|
|
this.toggleState({
|
|
id: this.currentRecipeID,
|
|
key: "tried",
|
|
setDate: 1,
|
|
});
|
|
},
|
|
rate(r) {
|
|
if (r !== this.recipe.rating || r === 1) {
|
|
if (this.recipe.rating == 1 && r == 1) r = 0;
|
|
this.setR({
|
|
id: this.currentRecipeID,
|
|
r,
|
|
});
|
|
}
|
|
},
|
|
toggleCheck(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;
|
|
}
|
|
},
|
|
clearChecks() {
|
|
this.checked = 0;
|
|
this.checks = [];
|
|
for (let i = 1; i < this.ingcon.getChildrenCount(); i++) {
|
|
this.ingcon.getChildAt(i).getChildAt(0).text = this.icon.uncheck;
|
|
}
|
|
},
|
|
toggleStep(object) {
|
|
let a = object;
|
|
if (a.className.includes("done")) {
|
|
a.className = "check";
|
|
this.stepsDid--;
|
|
} else {
|
|
a.className = "check done";
|
|
this.stepsDid++;
|
|
}
|
|
},
|
|
clearSteps() {
|
|
this.stepsDid = 0;
|
|
for (let i = 1; i < this.inscon.getChildrenCount(); i++) {
|
|
this.inscon.getChildAt(i).className = "check";
|
|
}
|
|
},
|
|
|
|
// Notes
|
|
createNote(note) {
|
|
let regex = /(https?:\/\/[^\s]+)/g;
|
|
const lbl = new RLabel();
|
|
lbl.className = "note tw";
|
|
lbl.textWrap = true;
|
|
let fString = new FormattedString();
|
|
let arr = note.split(regex);
|
|
|
|
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));
|
|
}
|
|
fString.spans.push(span);
|
|
}
|
|
arr.forEach((text) => {
|
|
createSpan(text, regex.test(text));
|
|
});
|
|
lbl.formattedText = fString;
|
|
return lbl;
|
|
},
|
|
createNotes() {
|
|
const stack = this.notescon;
|
|
stack.removeChildren();
|
|
this.recipe.notes.forEach((note) =>
|
|
stack.addChild(this.createNote(note.value))
|
|
);
|
|
},
|
|
isValidURL(s) {
|
|
let pattern = new RegExp("^https?|^www", "ig");
|
|
return pattern.test(s);
|
|
},
|
|
|
|
// PhotoViewer
|
|
imgVLoad({ object }) {
|
|
this.imgView = object;
|
|
this.imgView.visibility = "collapsed";
|
|
this.imgView.top = 24;
|
|
this.imgView.left = this.RTL ? 16 : Screen.mainScreen.widthDIPs - 112;
|
|
},
|
|
viewPhoto() {
|
|
this.hideBars();
|
|
this.photoOpen = 1;
|
|
this.hijackBackEvent();
|
|
let pv = this.imgView;
|
|
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,
|
|
translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
|
|
duration: 200,
|
|
})
|
|
)
|
|
.then(() =>
|
|
pv.animate({
|
|
height: sh,
|
|
translate: { x: this.RTL ? -16 : 112 - sw, y: -((sh - sw) / 6) },
|
|
duration: 200,
|
|
})
|
|
);
|
|
},
|
|
closePhoto() {
|
|
let pv = this.imgView;
|
|
let sw = Screen.mainScreen.widthDIPs;
|
|
let sh = Screen.mainScreen.heightDIPs;
|
|
pv.animate({
|
|
width: sw,
|
|
height: sw,
|
|
translate: { x: this.RTL ? -16 : 112 - sw, y: (sh - sw) / 3 },
|
|
duration: 200,
|
|
})
|
|
.then(() =>
|
|
pv.animate({
|
|
width: 96,
|
|
height: 96,
|
|
translate: { x: 0, y: 0 },
|
|
duration: 200,
|
|
})
|
|
)
|
|
.then(() =>
|
|
pv.animate({
|
|
opacity: 0,
|
|
duration: 50,
|
|
})
|
|
)
|
|
.then(() => {
|
|
pv.visibility = "collapsed";
|
|
this.photoOpen = 0;
|
|
this.releaseBackEvent();
|
|
this.showBars();
|
|
});
|
|
},
|
|
|
|
// Timers
|
|
openCookingTimer() {
|
|
this.$navigateTo(CookingTimer, {
|
|
props: {
|
|
recipeID: this.recipe.id,
|
|
},
|
|
animated: false,
|
|
});
|
|
},
|
|
|
|
// Duplicate
|
|
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,
|
|
});
|
|
},
|
|
|
|
// Print
|
|
wvLoad({ object }) {
|
|
this.wv = object;
|
|
utils.updateLocale(); // required to set local RTL and language in webview
|
|
},
|
|
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,h3{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 ings = r.ingredients;
|
|
return ings
|
|
.map((e, i) => {
|
|
if (!e.type)
|
|
return `${i > 0 ? "</ul>" : ""}<h3>${e.value}</h3>${
|
|
i < ings.length - 1 ? "<ul>" : ""
|
|
}`;
|
|
else
|
|
return `${i < 1 ? "<ul>" : ""}<li>${this.getIng(e)}</li>${
|
|
i == ings.length - 1 ? "</ul>" : ""
|
|
}`;
|
|
})
|
|
.join("");
|
|
};
|
|
const getIns = () => {
|
|
let inss = r.instructions;
|
|
return r.instructions
|
|
.map((e, i) => {
|
|
if (!e.type)
|
|
return `${i > 0 ? "</ol>" : ""}<h3>${e.value}</h3>${
|
|
i < inss.length - 1 ? "<ol>" : ""
|
|
}`;
|
|
else
|
|
return `${i < 1 ? "<ol>" : ""}<li>${e.value}</li>${
|
|
i == inss.length - 1 ? "</ol>" : ""
|
|
}`;
|
|
})
|
|
.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.value.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}</div></div>`
|
|
: ""
|
|
} ${
|
|
this.hasTime(r.prepTime) || this.hasTime(r.cookTime)
|
|
? `<div class=attr>${
|
|
this.hasTime(r.prepTime)
|
|
? `<div><p>${localize("prepT")}<p>${this.niceTime(
|
|
r.prepTime
|
|
)}</div>`
|
|
: ""
|
|
} ${
|
|
this.hasTime(r.cookTime)
|
|
? `<div><p>${localize("cookT")}<p>${this.niceTime(
|
|
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", 1)}</h2>`
|
|
: ""
|
|
}${getIngs()}${
|
|
r.instructions.length
|
|
? `<h2>${this.getTitleCount("inss", "instructions", 1)}</h2>`
|
|
: ""
|
|
}${getIns()}${
|
|
r.combinations.length
|
|
? `<h2>${this.getTitleCount("cmbs", "combinations", 1)}</h2>`
|
|
: ""
|
|
} ${getCmbs()} ${
|
|
r.notes.length
|
|
? `<h2>${this.getTitleCount("nos", "notes", 1)}</h2>`
|
|
: ""
|
|
} ${getNotes()}<div class=sub><p>${this.getDates.u}</p><p>${
|
|
this.getDates.c
|
|
}</p></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))
|
|
);
|
|
},
|
|
|
|
// FeedBack
|
|
touchRate({ object, action }, r) {
|
|
this.touchFade(object, action);
|
|
if (action == "up") this.rate(r);
|
|
},
|
|
touchYield({ object, action }) {
|
|
this.touchFade(object, action);
|
|
|
|
if (action == "up") this.changeYield();
|
|
},
|
|
touchIngredient({ object, action }, index) {
|
|
this.touchFade(object, action);
|
|
if (action == "up") this.toggleCheck(object, index);
|
|
},
|
|
touchInstruction({ object, action }) {
|
|
let hasDone = object.className.includes("done");
|
|
if (!hasDone) this.touchFade(object, action);
|
|
if (action == "up") this.toggleStep(object);
|
|
},
|
|
},
|
|
created() {
|
|
this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0];
|
|
this.recipe.ingredients.forEach((e) => this.checks.push(0));
|
|
},
|
|
mounted() {
|
|
this.yieldMultiplier = this.yieldQuantity || this.recipe.yieldQuantity;
|
|
},
|
|
};
|
|
</script>
|