cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

partially working recipe view

Browse Source
This commit is contained in:
vabene1111
2021-01-12 21:32:24 +01:00
parent 24ed6a1cd2
commit 9b364d57c7
3 changed files with 52 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -1,15 +1,49 @@
<template>
<div id="app" v-if="!loading">
<h1>{{ recipe.name }}</h1>
<recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
<img v-bind:src="recipe.image">
<div class="row">
<div class="col col-md-8">
<h3>{{ recipe.name }}</h3>
<!--TODO rating -->
<!--TODO username -->
<!--TODO storage -->
</div>
<div class="col col-md-4 d-print-none" style="text-align: right">
<recipe-context-menu v-bind:recipe="recipe"></recipe-context-menu>
</div>
</div>
<!--TODO keywords -->
<span class="badge badge-secondary"><i class="fas fa-user-clock"></i>
{{ _('Preparation time ~') }} {{ recipe.working_time }} {{ _('min') }}
</span>
<span class="badge badge-secondary"><i class="far fa-clock"></i>
{{ _('Waiting time ~') }} {{ recipe.waiting_time }} {{ _('min') }}
</span>
<div class="row">
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && has_ingredients">
<div v-for="s in recipe.steps" v-bind:key="s.id">
<div v-for="i in s.ingredients" v-bind:key="i.id">
<Ingredient v-bind:ingredient="i"></Ingredient>
</div>
</div>
</div>
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2" style="text-align: center">
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh;"
:alt="_( 'Recipe Image')">
<br/>
<br/>
</div>
</div>
<div v-for="s in recipe.steps" v-bind:key="s.id">
<Step v-bind:step="s" v-bind:servings="servings"></Step>
</div>
</div>
</div>
</template>
<script>
@ -23,6 +57,7 @@ import {apiLoadRecipe} from "@/utils/api";
import Step from "@/components/Step";
import RecipeContextMenu from "@/components/RecipeContextMenu";
import {GettextMixin, ToastMixin} from "@/utils/utils";
import Ingredient from "@/components/Ingredient";
Vue.use(BootstrapVue)
@ -33,6 +68,7 @@ export default {
ToastMixin,
],
components: {
Ingredient,
Step,
RecipeContextMenu,
},
@ -41,6 +77,7 @@ export default {
loading: true,
recipe_id: window.RECIPE_ID,
recipe: undefined,
has_ingredients: false,
servings: 1,
}
},
@ -52,6 +89,15 @@ export default {
apiLoadRecipe(recipe_id).then(recipe => {
this.recipe = recipe
this.loading = false
for (let step of this.recipe.steps) {
if (step.ingredients.length > 0) {
this.has_ingredients = true
}
if (step.time !== 0) {
this.has_times = true
}
}
})
}
}

4
vue/src/components/RecipeContextMenu.vue
View File

@ -1,8 +1,6 @@
<template>
<div>
{{ resolveDjangoUrl('api:recipe-detail', 5) }}
<div class="col col-md-4 d-print-none" style="text-align: right">
<div class="dropdown">
<a class="btn shadow-none" href="#" role="button" id="dropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@ -41,7 +39,7 @@
</div>
</div>
</div>
</div>

2
vue/webpack-stats.json
View File

@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.298e10642301889fe8ed.hot-update.js","publicPath":"http://localhost:8080/recipe_view.298e10642301889fe8ed.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.298e10642301889fe8ed.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):\n(Emitted value instead of an instance of Error) \n\n Errors compiling template:\n\n href=\"{% url 'view_export' %}?r={{ recipe.pk }}\": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id=\"{{ val }}\">, use <div :id=\"val\">.\n\n 34 | </button>\n 35 | \n 36 | <a class=\"dropdown-item\" href=\"{% url 'view_export' %}?r={{ recipe.pk }}\" target=\"_blank\"\n | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n 37 | rel=\"noopener noreferrer\"><i class=\"fas fa-file-export fa-fw\"></i> {% trans 'Export' %}</a>\n 38 | {% if recipe.internal %}\n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.7d030f252e9720efc1eb.hot-update.js","publicPath":"http://localhost:8080/recipe_view.7d030f252e9720efc1eb.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.7d030f252e9720efc1eb.hot-update.js"}]},"error":"ModuleBuildError","message":"Module build failed (from ./node_modules/eslint-loader/index.js):\nError: ENOENT: no such file or directory, open 'F:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\main.js'"}