enrecipes/app/components/ViewRecipe.vue

813 lines
26 KiB
Vue
Raw Normal View History

2020-10-14 19:32:32 +00:00
<template>
2020-11-10 18:28:48 +00:00
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar height="112" margin="0" flat="true">
<GridLayout rows="64, 48" columns="auto, *, auto,auto, auto">
2020-11-10 18:28:48 +00:00
<MDButton
variant="text"
row="0"
2020-10-14 19:32:32 +00:00
col="0"
2020-11-02 11:36:53 +00:00
class="bx"
2020-10-14 19:32:32 +00:00
:text="icon.back"
automationText="Back"
2020-10-21 17:54:45 +00:00
@tap="$navigateBack()"
2020-10-14 19:32:32 +00:00
/>
2020-10-21 17:54:45 +00:00
<ScrollView
row="1"
2020-11-15 10:51:10 +00:00
col="0"
colSpan="4"
2020-10-21 17:54:45 +00:00
orientation="horizontal"
scrollBarIndicatorVisible="false"
>
<Label
class="title orkm"
:text="recipe.title"
verticalAlignment="bottom"
/>
</ScrollView>
2020-11-10 18:28:48 +00:00
<FlexboxLayout row="0" col="2" alignItems="center">
<MDButton
variant="text"
v-if="!busy"
class="bx"
:text="icon.edit"
@tap="editRecipe"
/>
<MDActivityIndicator v-else :busy="busy" />
<MDButton
variant="text"
class="bx"
:text="recipe.isFavorite ? icon.heart : icon.heartOutline"
@tap="toggleFavorite"
/>
2020-11-16 19:18:25 +00:00
<!-- <MDButton
2020-11-10 18:28:48 +00:00
variant="text"
v-if="!filterTrylater"
class="bx"
:text="recipe.tried ? icon.trylaterOutline : icon.trylater"
@tap="toggleTrylater"
2020-11-16 19:18:25 +00:00
/> -->
2020-11-10 18:28:48 +00:00
<MDButton
variant="text"
2020-11-16 19:18:25 +00:00
v-if="filterTrylater"
2020-11-10 18:28:48 +00:00
class="bx"
:text="icon.share"
@tap="shareHandler"
/>
</FlexboxLayout>
2020-10-14 19:32:32 +00:00
</GridLayout>
</ActionBar>
<AbsoluteLayout>
2020-11-02 11:36:53 +00:00
<TabView
:selectedIndex="selectedTabIndex"
@selectedIndexChange="selectedIndexChange"
androidElevation="0"
width="100%"
height="100%"
class="viewRecipe"
>
2020-10-14 19:32:32 +00:00
<TabViewItem title="Overview">
<ScrollView scrollBarIndicatorVisible="false">
2020-10-21 17:54:45 +00:00
<StackLayout>
2020-10-14 19:32:32 +00:00
<StackLayout
width="100%"
:height="screenWidth"
verticalAlignment="center"
2020-11-02 11:36:53 +00:00
class="imageHolder"
2020-10-14 19:32:32 +00:00
>
<Image
v-if="recipe.imageSrc"
:src="recipe.imageSrc"
stretch="aspectFill"
2020-11-11 15:49:06 +00:00
width="100%"
:height="screenWidth"
2020-10-14 19:32:32 +00:00
/>
<Label
v-else
horizontalAlignment="center"
class="bx"
fontSize="160"
:text="icon.image"
2020-10-14 19:32:32 +00:00
/>
</StackLayout>
2020-11-02 11:36:53 +00:00
<StackLayout margin="16 8 144">
<Label class="category orkm" :text="recipe.category" />
2020-10-14 19:32:32 +00:00
<Label
2020-11-02 11:36:53 +00:00
margin="0 8"
class="title orkm"
2020-10-14 19:32:32 +00:00
:text="recipe.title"
textWrap="true"
/>
2020-11-10 18:28:48 +00:00
<StackLayout orientation="horizontal" class="time">
<Label text="Time required:" />
<Label :text="` ${formattedTime(recipe.timeRequired)}`" />
</StackLayout>
2020-11-02 11:36:53 +00:00
<GridLayout
2020-11-15 10:51:10 +00:00
rows="auto, auto, auto"
columns="*, *"
2020-11-02 11:36:53 +00:00
class="overviewContainer"
>
2020-11-10 18:28:48 +00:00
<GridLayout
2020-11-02 11:36:53 +00:00
class="overviewItem"
row="0"
col="0"
2020-11-10 18:28:48 +00:00
rows="auto, auto"
columns="*"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<MDRipple rowSpan="2" @tap="selectedTabIndex = 1" />
<Label row="0" class="bx" :text="icon.item" />
2020-11-02 11:36:53 +00:00
<Label
2020-11-10 18:28:48 +00:00
row="1"
2020-11-02 11:36:53 +00:00
class="itemCount"
:text="
`${recipe.ingredients.length} ${
recipe.ingredients.length == 1
? 'Ingredient'
: 'Ingredients'
}`
"
textWrap="true"
/>
2020-11-10 18:28:48 +00:00
</GridLayout>
<GridLayout
2020-11-02 11:36:53 +00:00
class="overviewItem"
row="0"
col="1"
2020-11-10 18:28:48 +00:00
rows="auto, auto"
columns="*"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<MDRipple rowSpan="2" @tap="selectedTabIndex = 2" />
<Label row="0" class="bx" :text="icon.step" />
2020-11-02 11:36:53 +00:00
<Label
2020-11-10 18:28:48 +00:00
row="1"
2020-11-02 11:36:53 +00:00
class="itemCount"
:text="
`${recipe.instructions.length} ${
2020-11-15 10:51:10 +00:00
recipe.instructions.length == 1
? 'Instruction'
: 'Instructions'
2020-11-02 11:36:53 +00:00
}`
"
textWrap="true"
/>
2020-11-10 18:28:48 +00:00
</GridLayout>
2020-11-15 10:51:10 +00:00
2020-11-10 18:28:48 +00:00
<GridLayout
2020-11-02 11:36:53 +00:00
class="overviewItem"
row="1"
col="0"
2020-11-10 18:28:48 +00:00
rows="auto, auto"
columns="*"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<MDRipple rowSpan="2" @tap="selectedTabIndex = 3" />
<Label row="0" class="bx" :text="icon.note" />
2020-11-02 11:36:53 +00:00
<Label
2020-11-10 18:28:48 +00:00
row="1"
2020-11-02 11:36:53 +00:00
class="itemCount"
:text="
`${recipe.notes.length} ${
recipe.notes.length == 1 ? 'Note' : 'Notes'
}`
"
textWrap="true"
/>
2020-11-10 18:28:48 +00:00
</GridLayout>
<GridLayout
2020-11-02 11:36:53 +00:00
class="overviewItem"
row="1"
col="1"
2020-11-10 18:28:48 +00:00
rows="auto, auto"
columns="*"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
<Label row="0" class="bx" :text="icon.source" />
2020-11-02 11:36:53 +00:00
<Label
2020-11-10 18:28:48 +00:00
row="1"
2020-11-02 11:36:53 +00:00
class="itemCount"
:text="
`${recipe.references.length} ${
recipe.references.length == 1
? 'Reference'
: 'References'
}`
"
textWrap="true"
/>
2020-11-10 18:28:48 +00:00
</GridLayout>
2020-11-15 10:51:10 +00:00
<GridLayout
class="overviewItem"
row="2"
col="0"
rows="auto, auto"
columns="*"
>
<MDRipple rowSpan="2" @tap="selectedTabIndex = 5" />
<Label row="0" class="bx" :text="icon.outline" />
<Label
row="1"
class="itemCount"
:text="
`${recipe.combinations.length} ${
recipe.combinations.length == 1
? 'Combination'
: 'Combinations'
}`
"
textWrap="true"
/>
</GridLayout>
2020-11-02 11:36:53 +00:00
</GridLayout>
2020-10-14 19:32:32 +00:00
</StackLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Ingredients">
2020-10-14 19:32:32 +00:00
<ScrollView scrollBarIndicatorVisible="false">
2020-11-02 11:36:53 +00:00
<GridLayout
v-if="!recipe.ingredients.length"
2020-11-10 18:28:48 +00:00
rows="*, auto, *, 88"
2020-11-02 11:36:53 +00:00
columns="*"
2020-11-10 18:28:48 +00:00
class="emptyStateContainer"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<StackLayout col="0" row="1" class="emptyState">
2020-11-02 11:36:53 +00:00
<Label class="bx icon" :text="icon.item" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some ingredients" textWrap="true" />
</StackLayout>
</GridLayout>
2020-11-10 18:28:48 +00:00
<StackLayout v-else padding="32 16 134">
2020-10-14 19:32:32 +00:00
<AbsoluteLayout class="inputField">
<TextField
2020-11-02 11:36:53 +00:00
width="50%"
v-model="yieldMultiplier"
2020-10-14 19:32:32 +00:00
keyboardType="number"
/>
2020-11-02 11:36:53 +00:00
<Label
top="0"
class="fieldLabel"
:text="`Required ${recipe.yield.unit.toLowerCase()}`"
/>
2020-10-14 19:32:32 +00:00
</AbsoluteLayout>
2020-11-10 18:28:48 +00:00
<StackLayout margin="16 0">
2020-10-14 19:32:32 +00:00
<Label
2020-11-02 11:36:53 +00:00
class="title orkm"
2020-10-14 19:32:32 +00:00
:text="
2020-11-11 13:50:33 +00:00
`Ingredients for ${positiveYieldMultiplier} ${recipe.yield.unit.toLowerCase()}`
2020-10-14 19:32:32 +00:00
"
textWrap="true"
/>
2020-11-02 11:36:53 +00:00
</StackLayout>
<StackLayout
v-for="(item, index) in recipe.ingredients"
:key="index"
>
<check-box
v-if="filterTrylater"
class="ingredient-check"
checkPadding="16"
2020-11-10 18:28:48 +00:00
fillColor="#ff5200"
2020-10-14 19:32:32 +00:00
:text="
2020-11-02 11:36:53 +00:00
`${
roundedQuantity(item.quantity)
? roundedQuantity(item.quantity) + ' '
: ''
}${roundedQuantity(item.quantity) ? item.unit + ' ' : ''}${
item.item
}`
2020-10-14 19:32:32 +00:00
"
2020-11-02 11:36:53 +00:00
/>
<Label
v-else
class="ingredient"
2020-10-14 19:32:32 +00:00
textWrap="true"
2020-11-02 11:36:53 +00:00
:text="
`${
roundedQuantity(item.quantity)
? roundedQuantity(item.quantity) + ' '
: ''
}${roundedQuantity(item.quantity) ? item.unit + ' ' : ''}${
item.item
}`
"
2020-10-14 19:32:32 +00:00
/>
</StackLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Instructions">
2020-10-14 19:32:32 +00:00
<ScrollView scrollBarIndicatorVisible="false">
2020-11-02 11:36:53 +00:00
<GridLayout
v-if="!recipe.instructions.length"
2020-11-10 18:28:48 +00:00
rows="*, auto, *, 88"
2020-11-02 11:36:53 +00:00
columns="*"
2020-11-10 18:28:48 +00:00
class="emptyStateContainer"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<StackLayout col="0" row="1" class="emptyState">
2020-11-02 11:36:53 +00:00
<Label class="bx icon" :text="icon.step" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some instructions" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="32 16 132">
2020-10-14 19:32:32 +00:00
<GridLayout
columns="auto ,*"
v-for="(instruction, index) in recipe.instructions"
:key="index"
>
<Label
col="0"
colSpan="2"
2020-11-02 11:36:53 +00:00
class="instruction"
2020-10-14 19:32:32 +00:00
:class="{
2020-11-02 11:36:53 +00:00
noBorder: index === recipe.instructions.length - 1,
2020-10-14 19:32:32 +00:00
}"
:text="instruction"
textWrap="true"
/>
<Label
verticalAlignment="top"
horizontalAlignment="center"
class="count orkm"
2020-10-14 19:32:32 +00:00
col="0"
:text="index + 1"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Notes">
2020-10-14 19:32:32 +00:00
<ScrollView scrollBarIndicatorVisible="false">
2020-11-02 11:36:53 +00:00
<GridLayout
v-if="!recipe.notes.length"
2020-11-10 18:28:48 +00:00
rows="*, auto, *, 88"
2020-11-02 11:36:53 +00:00
columns="*"
2020-11-10 18:28:48 +00:00
class="emptyStateContainer"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<StackLayout col="0" row="1" class="emptyState">
2020-11-02 11:36:53 +00:00
<Label class="bx icon" :text="icon.note" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some notes" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="32 16 132">
2020-10-14 19:32:32 +00:00
<GridLayout
columns="auto ,*"
v-for="(note, index) in recipe.notes"
:key="index"
>
<Label
col="0"
colSpan="2"
2020-11-02 11:36:53 +00:00
class="note"
2020-10-14 19:32:32 +00:00
:text="note"
textWrap="true"
/>
<Label
verticalAlignment="top"
horizontalAlignment="center"
class="count square orkm"
2020-10-14 19:32:32 +00:00
col="0"
:text="index + 1"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="References">
2020-10-14 19:32:32 +00:00
<ScrollView scrollBarIndicatorVisible="false">
2020-11-02 11:36:53 +00:00
<GridLayout
v-if="!recipe.references.length"
2020-11-10 18:28:48 +00:00
rows="*, auto, *, 88"
2020-11-02 11:36:53 +00:00
columns="*"
2020-11-10 18:28:48 +00:00
class="emptyStateContainer"
2020-11-02 11:36:53 +00:00
>
2020-11-10 18:28:48 +00:00
<StackLayout col="0" row="1" class="emptyState">
2020-11-02 11:36:53 +00:00
<Label class="bx icon" :text="icon.source" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some references" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="10 0 132">
<StackLayout
2020-10-14 19:32:32 +00:00
v-for="(reference, index) in recipe.references"
:key="index"
>
<GridLayout
v-if="isValidURL(reference)"
columns="*, auto"
2020-11-02 11:36:53 +00:00
class="referenceItem"
androidElevation="1"
>
2020-11-15 21:13:06 +00:00
<MDRipple
colSpan="2"
@longPress="copyURL(reference)"
@tap="openURL(reference)"
/>
<Label
col="0"
verticalAlignment="center"
2020-11-02 11:36:53 +00:00
class="recipeLink"
:text="reference"
textWrap="false"
/>
2020-11-15 21:13:06 +00:00
<Label col="1" class="bx linkIcon" :text="icon.source" />
</GridLayout>
2020-10-14 19:32:32 +00:00
<Label
v-else
2020-11-02 11:36:53 +00:00
class="recipeText"
2020-10-14 19:32:32 +00:00
:text="reference"
textWrap="true"
/>
</StackLayout>
2020-10-14 19:32:32 +00:00
</StackLayout>
</ScrollView>
</TabViewItem>
2020-11-15 10:51:10 +00:00
<TabViewItem title="Combinations">
<ScrollView scrollBarIndicatorVisible="false">
<GridLayout
v-if="!recipe.combinations.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="bx icon" :text="icon.outline" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some combinations" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="10 0 132">
<GridLayout
columns="*"
v-for="(combination, index) in recipe.combinations"
:key="index"
androidElevation="1"
class="referenceItem"
>
<MDRipple col="0" @tap="viewCombination(combination)" />
<Label
col="0"
verticalAlignment="center"
class="recipeLink"
:text="getCombinationTitle(combination)"
textWrap="true"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
2020-10-14 19:32:32 +00:00
</TabView>
2020-11-10 18:28:48 +00:00
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
<MDFloatingActionButton
2020-10-14 19:32:32 +00:00
row="1"
col="1"
2020-11-10 18:28:48 +00:00
src="res://check"
@tap="recipeTried"
v-if="filterTrylater"
2020-10-14 19:32:32 +00:00
/>
<transition name="dolly" appear>
2020-11-10 18:28:48 +00:00
<MDFloatingActionButton
row="1"
col="1"
2020-11-10 18:28:48 +00:00
src="res://share"
@tap="shareHandler"
v-if="!filterTrylater && showFab"
/>
</transition>
2020-10-14 19:32:32 +00:00
</GridLayout>
</AbsoluteLayout>
</Page>
</template>
<script>
2020-11-02 11:36:53 +00:00
import {
2020-11-15 10:51:10 +00:00
ApplicationSettings,
2020-11-10 18:28:48 +00:00
Color,
2020-11-02 11:36:53 +00:00
Device,
File,
2020-11-10 18:28:48 +00:00
knownFolders,
path,
ImageSource,
Screen,
Utils,
2020-11-02 11:36:53 +00:00
} from "@nativescript/core"
import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback"
2020-10-21 17:54:45 +00:00
import * as Toast from "nativescript-toast"
2020-11-10 18:28:48 +00:00
import * as SocialShare from "@nativescript/social-share"
2020-11-02 11:36:53 +00:00
import { Application } from "@nativescript/core"
2020-11-10 18:28:48 +00:00
import { mapActions, mapState } from "vuex"
2020-10-14 19:32:32 +00:00
2020-10-22 18:36:50 +00:00
import EditRecipe from "./EditRecipe.vue"
2020-11-15 10:51:10 +00:00
import ViewRecipe from "./ViewRecipe.vue"
2020-11-10 18:28:48 +00:00
import ShareChooser from "./modal/ShareChooser.vue"
2020-10-22 18:36:50 +00:00
let feedback = new Feedback()
2020-10-14 19:32:32 +00:00
export default {
2020-10-26 20:49:54 +00:00
props: [
"filterTrylater",
2020-10-26 20:49:54 +00:00
"recipeID",
2020-11-15 10:51:10 +00:00
"recipeIndex",
2020-10-26 20:49:54 +00:00
"hijackGlobalBackEvent",
"releaseGlobalBackEvent",
],
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-10-14 19:32:32 +00:00
}
},
computed: {
2020-10-26 20:49:54 +00:00
...mapState(["icon", "recipes"]),
2020-10-14 19:32:32 +00:00
screenWidth() {
2020-10-22 18:36:50 +00:00
return Screen.mainScreen.widthDIPs
2020-10-14 19:32:32 +00:00
},
2020-11-11 13:50:33 +00:00
positiveYieldMultiplier() {
return this.yieldMultiplier > 0 ? parseFloat(this.yieldMultiplier) : 1
2020-10-14 19:32:32 +00:00
},
2020-11-02 11:36:53 +00:00
isLightMode() {
return Application.systemAppearance() === "light"
},
2020-10-14 19:32:32 +00:00
},
methods: {
2020-11-15 10:51:10 +00:00
...mapActions([
"toggleStateAction",
"setCurrentComponentAction",
"overwriteRecipeAction",
]),
2020-11-10 18:28:48 +00:00
onPageLoad() {
this.releaseGlobalBackEvent()
this.busy = false
setTimeout((e) => {
this.setCurrentComponentAction("ViewRecipe")
}, 500)
2020-11-02 11:36:53 +00:00
this.yieldMultiplier = this.recipe.yield.quantity
this.showFab = true
2020-11-10 18:28:48 +00:00
this.keepScreenOn(true)
2020-11-15 10:51:10 +00:00
this.syncCombinations()
},
2020-11-10 18:28:48 +00:00
onPageUnload() {
feedback.hide()
this.keepScreenOn(false)
},
// HELPERS
niceDates(time) {
2020-11-02 11:36:53 +00:00
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 ""
return (
2020-11-02 11:36:53 +00:00
(diff < 86400 && lastTried > midnight && "today") ||
(dayDiff == 1 && "yesterday") ||
(dayDiff < 7 && dayDiff + " days ago") ||
2020-11-02 11:36:53 +00:00
(dayDiff < 31 && Math.round(dayDiff / 7) + " week(s) ago") ||
(dayDiff < 366 && Math.round(dayDiff / 30) + " month(s) ago") ||
(dayDiff > 365 && "long time ago")
)
},
2020-11-02 11:36:53 +00:00
selectedIndexChange(args) {
this.selectedTabIndex = args.object.selectedIndex
},
2020-11-10 18:28:48 +00:00
showLastTried() {
feedback.show({
2020-11-02 11:36:53 +00:00
title: `You tried this recipe ${this.niceDates(
this.recipe.lastTried
)}!`,
2020-11-10 18:28:48 +00:00
titleColor: new Color(`${this.isLightMode ? "#f1f3f5" : "#212529"}`),
backgroundColor: new Color("#ff5200"),
})
},
2020-10-26 20:49:54 +00:00
roundedQuantity(quantity) {
return (
Math.round(
2020-11-02 11:36:53 +00:00
(quantity / this.recipe.yield.quantity) *
2020-11-11 13:50:33 +00:00
this.positiveYieldMultiplier *
2020-10-26 20:49:54 +00:00
100
) / 100
)
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
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])
2020-11-11 13:50:33 +00:00
return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
2020-11-10 18:28:48 +00:00
},
isValidURL(string) {
let pattern = new RegExp("^https?|www", "ig")
return pattern.test(string)
},
2020-11-15 10:51:10 +00:00
getCombinationTitle(id) {
return this.recipes.filter((e) => e.id === id)[0].title
},
syncCombinations() {
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({
id: this.currentRecipeID,
recipe: this.recipe,
})
},
2020-11-10 18:28:48 +00:00
// NAVIGATION HANDLERS
2020-10-14 19:32:32 +00:00
editRecipe() {
this.showFab = false
2020-10-21 17:54:45 +00:00
this.busy = true
this.$navigateTo(EditRecipe, {
props: {
2020-11-15 10:51:10 +00:00
recipeID: this.currentRecipeID,
2020-10-21 17:54:45 +00:00
},
})
2020-10-14 19:32:32 +00:00
},
2020-11-15 10:51:10 +00:00
viewCombination(combination) {
this.recipe = this.recipes.filter((e) => e.id === combination)[0]
this.currentRecipeID = combination
this.syncCombinations()
this.selectedTabIndex = 0
setTimeout(
(e) =>
this.recipe.tried && this.recipe.lastTried && this.showLastTried(),
500
)
},
2020-11-10 18:28:48 +00:00
// SHARE ACTION
shareHandler() {
if (this.recipe.imageSrc) {
this.$showModal(ShareChooser, {
props: {
title: "Share",
},
}).then((result) => {
switch (result) {
case "photo":
ImageSource.fromFile(this.recipe.imageSrc).then((res) => {
SocialShare.shareImage(res, "Share recipe photo using")
})
break
case "recipe":
this.shareRecipe()
break
default:
break
}
})
} else {
this.shareRecipe()
}
},
shareRecipe() {
let overview = `${
this.recipe.title
2020-11-06 09:07:41 +00:00
}\n\nTime required: ${this.formattedTime(this.recipe.timeRequired)}\n`
let shareContent = overview
if (this.recipe.ingredients.length) {
2020-11-02 11:36:53 +00:00
let ingredients = `\n\nIngredients for ${
this.yieldMultiplier
} ${this.recipe.yield.unit.toLowerCase()}\n\n`
this.recipe.ingredients.forEach((e) => {
2020-11-10 18:28:48 +00:00
ingredients += `- ${
e.quantity
? this.roundedQuantity(e.quantity) + " " + e.unit + " "
: ""
}${e.item}\n`
})
shareContent += ingredients
}
if (this.recipe.instructions.length) {
let instructions = `\n\nInstructions:\n\n`
this.recipe.instructions.forEach((e, i) => {
2020-11-02 11:36:53 +00:00
instructions += `Step ${i + 1}: ${e}\n\n`
})
shareContent += instructions
}
2020-11-15 10:51:10 +00:00
if (this.recipe.combinations.length) {
let combinations = `\nCombinations:\n\n`
this.recipe.combinations.forEach((e, i) => {
combinations += `${i + 1}. ${this.getCombinationTitle(e)}\n\n`
})
shareContent += combinations
}
if (this.recipe.notes.length) {
let notes = `\nNotes:\n\n`
this.recipe.notes.forEach((e, i) => {
notes += `${i + 1}. ${e}\n\n`
})
shareContent += notes
}
if (this.recipe.references.length) {
let references = `\nReferences:\n\n`
this.recipe.references.forEach((e, i) => {
references += `${i + 1}. ${e}\n\n`
})
shareContent += references
}
2020-11-11 15:49:06 +00:00
let sharenote = "\nCreated and shared via EnRecipes. Get it on F-Droid."
shareContent += sharenote
2020-11-10 18:28:48 +00:00
SocialShare.shareText(shareContent, "Share recipe using")
},
2020-11-10 18:28:48 +00:00
// DATA HANDLERS
2020-11-02 11:36:53 +00:00
toggle(key, setDate) {
2020-10-26 20:49:54 +00:00
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,
2020-10-26 20:49:54 +00:00
})
},
2020-10-14 19:32:32 +00:00
toggleFavorite() {
2020-10-21 17:54:45 +00:00
this.recipe.isFavorite
? Toast.makeText("Removed from Favorites").show()
: Toast.makeText("Added to Favorites").show()
this.toggle("isFavorite")
2020-10-21 17:54:45 +00:00
},
toggleTrylater() {
2020-10-21 17:54:45 +00:00
this.recipe.tried
? this.filterTrylater
2020-11-15 21:13:06 +00:00
? Toast.makeText("Added back to Try Later").show()
: Toast.makeText("Added to Try Later").show()
: this.filterTrylater
? Toast.makeText("You tried this recipe").show()
2020-11-15 21:13:06 +00:00
: Toast.makeText("Removed from Try Later").show()
this.toggle("tried")
},
recipeTried() {
2020-11-02 11:36:53 +00:00
this.toggle("tried", true)
this.$navigateBack()
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
// URL ACTION
openURL(url) {
2020-10-22 18:36:50 +00:00
Utils.openUrl(url)
2020-10-14 19:32:32 +00:00
},
2020-11-10 18:28:48 +00:00
copyURL(url) {
2020-11-15 21:13:06 +00:00
const clipboard = Utils.ad
.getApplicationContext()
.getSystemService(android.content.Context.CLIPBOARD_SERVICE)
const clip = android.content.ClipData.newPlainText("Reference URl", url)
clipboard.setPrimaryClip(clip)
Toast.makeText("URL Copied").show()
},
},
created() {
2020-11-15 10:51:10 +00:00
this.recipe = this.recipes.filter((e) => e.id === this.currentRecipeID)[0]
2020-10-14 19:32:32 +00:00
},
mounted() {
this.showFab = true
2020-11-10 18:28:48 +00:00
setTimeout(
(e) => this.recipe.tried && this.recipe.lastTried && this.showLastTried(),
500
)
},
2020-10-14 19:32:32 +00:00
}
</script>