timers added in recipe view
This commit is contained in:
vabene1111
parent
23bd0a7d90
commit
999fe2bc61
@ -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) {
|
||||
this.has_times = true
|
||||
}
|
||||
step.time_offset = total_time
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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)
|
||||
},
|
||||
}
|
||||
|
||||
@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"}
|
||||
Loading…
Reference in New Issue
Block a user