timers added in recipe view

vue/src/apps/RecipeView/RecipeView.vue

@@ -7,6 +7,8 @@
       </div>
     </div>
 
+    <!--TODO Tags -->
+
     <div class="row">
       <div class="col-12" style="text-align: center">
         <i>{{ recipe.description }}</i>
@@ -113,8 +115,6 @@
 
     </div>
 
-    <!--TODO Nutritions -->
-
     <div v-if="recipe.file_path.includes('.pdf')">
       <PdfViewer :recipe="recipe"></PdfViewer>
     </div>
@@ -125,12 +125,10 @@
 
     <!--TODO timers -->
     <div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
-      <Step :recipe="recipe" v-bind:step="s" v-bind:servings="servings" v-bind:index="index"></Step>
+      <Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
+      @update-start-time="updateStartTime"></Step>
     </div>
 
-
-    <!--TODO Comments -->
-
   </div>
 </template>
 
@@ -151,6 +149,10 @@ import PdfViewer from "@/components/PdfViewer";
 import ImageViewer from "@/components/ImageViewer";
 import Nutrition from "@/components/Nutrition";
 
+import moment from 'moment'
+
+Vue.prototype.moment = moment
+
 Vue.use(BootstrapVue)
 
 export default {
@@ -174,28 +176,34 @@ export default {
       recipe: undefined,
       ingredient_count: 0,
       servings: 1,
+      start_time: ""
     }
   },
   mounted() {
     this.loadRecipe(this.recipe_id)
   },
   methods: {
-    openCookLogModal: function () {
-      this.$bvModal.show('id_modal_cook_log')
-    },
     loadRecipe: function (recipe_id) {
       apiLoadRecipe(recipe_id).then(recipe => {
         this.recipe = recipe
         this.loading = false
 
+        let total_time = 0
         for (let step of this.recipe.steps) {
           this.ingredient_count += step.ingredients.length
 
-          if (step.time !== 0) {
+          step.time_offset = total_time
-            this.has_times = true
+          total_time += step.time
         }
+
+        // set start time only if there are any steps with timers (otherwise no timers are rendered)
+        if (total_time > 0) {
+          this.start_time = moment().format('yyyy-MM-DDTHH:mm')
         }
       })
+    },
+    updateStartTime: function (e) {
+      this.start_time = e
     }
   }
 }

vue/src/components/CookLog.vue

@@ -50,17 +50,12 @@ export default {
         recipe: this.recipe.id,
         servings: 0,
         rating: 0,
-        created_at: moment().format('yyyy-MM-DDTHH:MM')
+        created_at: moment().format('yyyy-MM-DDTHH:mm')
       }
     }
   },
   methods: {
     logCook: function () {
-
-      let obj = JSON.parse(JSON.stringify(this.logObject))
-
-      obj.created_at = moment(obj.created_at, 'yyyy-MM-DDTHH:MM').format('yyyy-MM-DD HH:MM')
-      console.log('updating: ', obj)
       apiLogCooking(this.logObject)
     },
   }

vue/src/components/Step.vue

@@ -3,16 +3,21 @@
   <div>
     <hr/>
 
-
     <template v-if="step.type === 'TEXT'">
       <div class="row" v-if="recipe.steps.length > 1">
         <div class="col col-md4">
           <h5 class="text-primary">
             <template v-if="step.name">{{ step.name }}</template>
             <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
-
             <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i>
-              {{ step.time }} {{ _('min') }}</small>
+              {{ step.time }} {{ _('min') }}
+
+            </small>
+            <small v-if="start_time !== ''">
+              <b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
+                {{ moment(start_time).add(step.time_offset, 'minutes').format('HH:mm') }}
+              </b-link>
+            </small>
           </h5>
         </div>
         <div class="col col-md-8" style="text-align: right">
@@ -24,9 +29,7 @@
       </div>
 
       <b-collapse id="collapse-1" v-model="details_visible">
-
         <div class="row">
-
           <div class="col col-md-4" v-if="step.ingredients.length > 0 && recipe.steps.length > 1">
             <table class="table table-sm">
               <!-- eslint-disable vue/no-v-for-template-key-on-child -->
@@ -36,16 +39,13 @@
               <!-- eslint-enable vue/no-v-for-template-key-on-child -->
             </table>
           </div>
-
           <div class="col" :class="{ 'col-md-8':  recipe.steps.length > 1, 'col-md-12':  recipe.steps.length <= 1,}">
             <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
           </div>
         </div>
       </b-collapse>
-
     </template>
 
-
     <template v-if="step.type === 'TIME'">
       <div class="row">
         <div class="col-10 offset-1" style="text-align: center">
@@ -55,6 +55,9 @@
           </h4>
           <span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i>
               {{ step.time }} {{ _('min') }}</span>
+          <b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
+            {{ moment(start_time).add(step.time_offset, 'minutes').format('HH:mm') }}
+          </b-link>
         </div>
 
         <div class="col-1" style="text-align: right">
@@ -70,12 +73,37 @@
           <div class="col col-md-12" style="text-align: center">
             <compile-component :code="step.ingredients_markdown" :servings="servings"></compile-component>
           </div>
-
         </div>
       </b-collapse>
     </template>
 
-
+    <b-popover
+        :target="`id_reactive_popover_${step.id}`"
+        triggers="click"
+        placement="bottom"
+        :ref="`id_reactive_popover_${step.id}`"
+        :title="_('Step start time')">
+      <div>
+        <b-form-group
+            label="Time"
+            label-for="popover-input-1"
+            label-cols="3"
+            class="mb-1">
+          <b-form-input
+              type="datetime-local"
+              id="popover-input-1"
+              v-model.datetime-local="set_time_input"
+              size="sm"
+          ></b-form-input>
+        </b-form-group>
+      </div>
+      <div class="row" style="margin-top: 1vh">
+        <div class="col-12" style="text-align: right">
+          <b-button @click="closePopover" size="sm" variant="secondary" style="margin-right:8px">Cancel</b-button>
+          <b-button @click="updateTime" size="sm" variant="primary">Ok</b-button>
+        </div>
+      </div>
+    </b-popover>
   </div>
 
 </template>
@@ -88,6 +116,10 @@ import Ingredient from "@/components/Ingredient";
 import {GettextMixin} from "@/utils/utils";
 
 import CompileComponent from "@/components/CompileComponent";
+import Vue from "vue";
+import moment from "moment";
+
+Vue.prototype.moment = moment
 
 export default {
   name: 'Step',
@@ -103,19 +135,31 @@ export default {
     servings: Number,
     index: Number,
     recipe: Object,
+    start_time: String,
   },
   data() {
     return {
       details_visible: true,
+      set_time_input: '',
     }
   },
   mounted() {
-
+    this.set_time_input = moment(this.start_time).add(this.step.time_offset, 'minutes').format('yyyy-MM-DDTHH:mm')
   },
   methods: {
     calculateAmount: function (x) {
       // used by the jinja2 template
       return calculateAmount(x, this.servings)
+    },
+    updateTime: function () {
+      this.$emit('update-start-time', moment(this.set_time_input).add(this.time_offset * -1, 'minutes').format('yyyy-MM-DDTHH:mm'))
+      this.closePopover()
+    },
+    closePopover: function () {
+      this.$refs[`id_reactive_popover_${this.step.id}`].$emit('close')
+    },
+    openPopover: function () {
+      this.$refs[`id_reactive_popover_${this.step.id}`].$emit('open')
     }
   }
 }

vue/webpack-stats.json

@@ -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.249c42bfc6c344069b28.hot-update.js","publicPath":"http://localhost:8080/recipe_view.249c42bfc6c344069b28.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.249c42bfc6c344069b28.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\utils\\utils.js\n  63:8  error  Parsing error: Unexpected token, expected \"(\"\n\n  61 | \n  62 | export function resolveDjangoUrl(url, params=null) {\n> 63 |     if params !== null\n     |        ^\n  64 |         return window.Urls[url](params)\n  65 |     else:\n  66 |         return window.Urls[url]\n\n✖ 1 problem (1 error, 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.04cd9a4772d145ea1f27.hot-update.js","publicPath":"http://localhost:8080/recipe_view.04cd9a4772d145ea1f27.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.04cd9a4772d145ea1f27.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  79:9  error  '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead  vue/no-deprecated-v-bind-sync\n\n✖ 1 problem (1 error, 0 warnings)\n  1 error and 0 warnings potentially fixable with the `--fix` option.\n"}