Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-25 08:09:41 +02:00
Code Issues Releases Activity

init 2

Browse source
This commit is contained in:
Hayden 2020-12-24 16:37:38 -09:00
commit beed8576c2
137 changed files with 40218 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

183
frontend/src/components/RecipeEditor/ViewRecipe.vue Normal file
View file

@ -0,0 +1,183 @@
<template>
<div>
<v-card-title class="headline">
{{ name }}
</v-card-title>
<v-card-text>
{{ description }}
<div class="my-2"></div>
<v-row dense disabled>
<v-col>
<v-btn
v-if="yields"
dense
small
:hover="false"
type="label"
:ripple="false"
elevation="0"
color="accent darken-1"
class="rounded-sm static"
>
{{ yields }}
</v-btn>
</v-col>
<v-rating
class="mr-2 align-end static"
color="accent darken-1"
background-color="accent lighten-3"
length="5"
:value="rating"
></v-rating>
</v-row>
<v-row>
<v-col cols="12" sm="12" md="4" lg="4">
<h2 class="mb-4">Ingredients</h2>
<div
v-for="(ingredient, index) in ingredients"
:key="generateKey('ingredient', index)"
>
<v-checkbox
hide-details
class="ingredients"
:label="ingredient"
color="accent"
>
</v-checkbox>
</div>
<div v-if="categories[0]">
<h2 class="mt-4">Categories</h2>
<v-chip
class="ma-1"
color="primary"
dark
v-for="category in categories"
:key="category"
>
{{ category }}
</v-chip>
</div>
<div v-if="tags[0]">
<h2 class="mt-4">Tags</h2>
<v-chip
class="ma-1"
color="primary"
dark
v-for="tag in tags"
:key="tag"
>
{{ tag }}
</v-chip>
</div>
<h2 v-if="notes[0]" class="my-4">Notes</h2>
<v-card
class="mt-1"
v-for="(note, index) in notes"
:key="generateKey('note', index)"
>
<v-card-title> {{ note.title }}</v-card-title>
<v-card-text>
{{ note.text }}
</v-card-text>
</v-card>
</v-col>
<v-divider class="my-divider" :vertical="true"></v-divider>
<v-col cols="12" sm="12" md="8" lg="8">
<h2 class="mb-4">Instructions</h2>
<v-hover
v-for="(step, index) in instructions"
:key="generateKey('step', index)"
v-slot="{ hover }"
>
<v-card
class="ma-1"
:class="[{ 'on-hover': hover }, isDisabled(index)]"
:elevation="hover ? 12 : 2"
@click="toggleDisabled(index)"
>
<v-card-title>Step: {{ index + 1 }}</v-card-title>
<v-card-text>{{ step.text }}</v-card-text>
</v-card>
</v-hover>
</v-col>
</v-row>
<v-row>
<v-col></v-col>
<v-btn
v-if="orgURL"
dense
small
:hover="false"
type="label"
:ripple="false"
elevation="0"
:href="orgURL"
color="accent darken-1"
target="_blank"
class="rounded-sm mr-4"
>
Original Recipe
</v-btn>
</v-row>
</v-card-text>
</div>
</template>
<script>
import utils from "../../utils";
export default {
props: {
name: String,
description: String,
ingredients: Array,
instructions: Array,
categories: Array,
tags: Array,
notes: Array,
rating: Number,
yields: String,
orgURL: String,
},
data() {
return {
disabledSteps: [],
};
},
methods: {
toggleDisabled(stepIndex) {
if (this.disabledSteps.includes(stepIndex)) {
let index = this.disabledSteps.indexOf(stepIndex);
if (index !== -1) {
this.disabledSteps.splice(index, 1);
}
} else {
this.disabledSteps.push(stepIndex);
}
},
isDisabled(stepIndex) {
if (this.disabledSteps.includes(stepIndex)) {
return "disabled-card";
} else {
return;
}
},
generateKey(item, index) {
return utils.generateUniqueKey(item, index);
},
},
};
</script>
<style>
.static {
pointer-events: none;
}
.my-divider {
margin: 0 -1px;
}
</style>