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

commit

Browse Source
This commit is contained in:
vabene1111 2021-01-13 01:08:51 +01:00
parent 983d40f2c1
commit 0eebd438ca
8 changed files with 120 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
cookbook/helper/template_helper.py
View File

@ -16,7 +16,7 @@ class IngredientObject(object):
if ingredient.no_amount:
self.amount = ""
else:
self.amount = f'[[calculateAmount({ingredient.amount})]]'
self.amount = f"<scalable-number v-bind:number='{ingredient.amount}' v-bind:factor='servings'></scalable-number>"
if ingredient.unit:
self.unit = ingredient.unit
else:
@ -32,17 +32,7 @@ class IngredientObject(object):
def render_instructions(step): # TODO deduplicate markdown cleanup code
ingredients = []
for i in step.ingredients.all():
ingredients.append(IngredientObject(i))
try:
template = Template(step.instruction)
instructions = template.render(ingredients=ingredients)
except TemplateSyntaxError:
instructions = step.instruction
instructions = step.instruction
tags = markdown_tags + [
'pre', 'table', 'td', 'tr', 'th', 'tbody', 'style', 'thead'
@ -56,4 +46,17 @@ def render_instructions(step): # TODO deduplicate markdown cleanup code
)
markdown_attrs['*'] = markdown_attrs['*'] + ['class']
return bleach.clean(parsed_md, tags, markdown_attrs)
instructions = bleach.clean(parsed_md, tags, markdown_attrs)
ingredients = []
for i in step.ingredients.all():
ingredients.append(IngredientObject(i))
try:
template = Template(instructions)
instructions = template.render(ingredients=ingredients)
except TemplateSyntaxError:
pass
return instructions

6
cookbook/serializer.py
View File

@ -158,11 +158,15 @@ class IngredientSerializer(WritableNestedModelSerializer):
class StepSerializer(WritableNestedModelSerializer):
ingredients = IngredientSerializer(many=True)
ingredients_markdown = serializers.SerializerMethodField('get_ingredients_markdown')
def get_ingredients_markdown(self, obj):
return obj.get_instruction_render()
class Meta:
model = Step
fields = (
'id', 'name', 'type', 'instruction', 'ingredients',
'id', 'name', 'type', 'instruction', 'ingredients', 'ingredients_markdown',
'time', 'order', 'show_as_header'
)

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

@ -34,7 +34,7 @@
<div class="col col-md-3">
<div class="input-group d-print-none">
<input type="number" value="1" maxlength="3" class="form-control" style="min-width: 2vw"
v-model="servings"/>
v-model.number="servings"/>
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-calculator"></i></span>
</div>
@ -68,10 +68,14 @@
</div>
</div>
<!--TODO timers -->
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
<Step v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
</div>
<!--TODO Comments -->
</div>
</template>
@ -88,6 +92,8 @@ import RecipeContextMenu from "@/components/RecipeContextMenu";
import {GettextMixin, ToastMixin} from "@/utils/utils";
import Ingredient from "@/components/Ingredient";
import ScalableNumber from "@/components/ScalableNumber";
Vue.use(BootstrapVue)
export default {
@ -100,6 +106,7 @@ export default {
Ingredient,
Step,
RecipeContextMenu,
ScalableNumber, // eslint-disable-line
},
data() {
return {

42
vue/src/components/CompileComponent.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div>
<component :is="compiled" :servings="servings"></component>
</div>
</template>
<script>
import Vue from 'vue'
import ScalableNumber from "@/components/ScalableNumber";
var res = Vue.compile('<div><span>{{servings}} Test <scalable-number v-bind:number="2" :factor="servings"></scalable-number></span></div>')
export default {
name: 'CompileComponent',
props: ['code', 'servings'],
data() {
return {
compiled: null,
test: '<div><span>{{servings}} Test <scalable-number v-bind:number="2" :factor="servings"></scalable-number></span></div>'
}
},
components: {
ScalableNumber, // eslint-disable-line
},
mounted() {
setTimeout(() => {
this.compiled = Vue.component('button-counter', {
props: ['servings'],
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ servings }} times.</button>'
})
}, 500)
}
}
</script>

25
vue/src/components/ScalableNumber.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<p>{{ calculateAmount(number) }}</p>
</template>
<script>
import {calculateAmount} from "@/utils/utils";
export default {
name: 'ScalableNumber',
props: {
number: Number,
factor: {
type: Number,
default: 4
},
},
methods: {
calculateAmount: function (x) {
console.log("calculated amount")
return calculateAmount(x, this.factor)
}
}
}
</script>

26
vue/src/components/Step.vue
View File

@ -4,7 +4,7 @@
<h5 class="text-secondary">
<template v-if="step.name">{{ step.name }}</template>
<template v-else>{{ _('Step') }} {{index + 1}}</template>
<template v-else>{{ _('Step') }} {{ index + 1 }}</template>
</h5>
<div class="row">
@ -16,25 +16,32 @@
<div v-for="i in step.ingredients" v-bind:key="i.id">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
</div>
</table>
</div>
<div class="col-md-9">
<i class="fas fa-paragraph text-secondary"></i>
{{ step.instruction }}
<span v-html="step.ingredients_markdown">
</span>
<compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
</div>
</div>
</div>
</template>
<script>
import {calculateAmount} from "@/utils/utils";
import Ingredient from "@/components/Ingredient";
import {GettextMixin} from "@/utils/utils";
import ScalableNumber from "@/components/ScalableNumber";
import CompileComponent from "@/components/CompileComponent";
export default {
name: 'Step',
@ -43,11 +50,22 @@ export default {
],
components: {
Ingredient,
CompileComponent, //eslint-disable-line
ScalableNumber, // eslint-disable-line
},
props: {
step: Object,
servings: Number,
index: Number,
},
mounted() {
},
methods: {
calculateAmount: function (x) {
// used by the jinja2 template
return calculateAmount(x, this.servings)
}
}
}
</script>

2
vue/vue.config.js
View File

@ -15,7 +15,7 @@ module.exports = {
? ''
: 'http://localhost:8080/',
outputDir: '../cookbook/static/vue/',
runtimeCompiler: true,
chainWebpack: config => {
config.optimization

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.e165d99965cf62182119.hot-update.js","publicPath":"http://localhost:8080/recipe_view.e165d99965cf62182119.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.e165d99965cf62182119.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Step.vue\n 22:37 error Parsing error: duplicate-attribute vue/no-parsing-error\n 22:37 error Duplicate attribute 'class' vue/no-duplicate-attributes\n\n✖ 2 problems (2 errors, 0 warnings)\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.6895bd28654af90f46e1.hot-update.js","publicPath":"http://localhost:8080/recipe_view.6895bd28654af90f46e1.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.6895bd28654af90f46e1.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\CompileComponent.vue\n 1:1 error The template requires child element vue/valid-template-root\n\n✖ 1 problem (1 error, 0 warnings)\n"}