commit

vue/src/components/CompileComponent.vue

@@ -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>

vue/src/components/ScalableNumber.vue

@@ -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>

vue/src/components/Step.vue

@@ -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>