commit

vue/src/apps/RecipeView/RecipeView.vue

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

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>