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

ingredient checking

Browse Source
This commit is contained in:
vabene1111 2021-01-13 20:12:20 +01:00
parent 082a656210
commit a431031c04
4 changed files with 31 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -85,7 +85,8 @@
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="s in recipe.steps">
<template v-for="i in s.ingredients">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"
@checked-state-changed="updateIngredientCheckedState"></Ingredient>
</template>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
@ -126,7 +127,7 @@
<!--TODO timers -->
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
<Step :recipe="recipe" :step="s" :servings="servings" :index="index" :start_time="start_time"
@update-start-time="updateStartTime"></Step>
@update-start-time="updateStartTime" @checked-state-changed="updateIngredientCheckedState"></Step>
</div>
</div>
@ -185,13 +186,15 @@ export default {
methods: {
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) {
for (let step of recipe.steps) {
this.ingredient_count += step.ingredients.length
for (let ingredient of step.ingredients) {
this.$set(ingredient, 'checked', false)
}
step.time_offset = total_time
total_time += step.time
}
@ -200,13 +203,25 @@ export default {
if (total_time > 0) {
this.start_time = moment().format('yyyy-MM-DDTHH:mm')
}
this.recipe = recipe
this.loading = false
})
},
updateStartTime: function (e) {
this.start_time = e
},
updateIngredientCheckedState: function (e) {
for (let step of this.recipe.steps) {
for (let ingredient of step.ingredients) {
if (ingredient.id === e.id) {
this.$set(ingredient, 'checked', !ingredient.checked)
}
}
}
},
}
}
</script>

10
vue/src/components/Ingredient.vue
View File

@ -1,7 +1,8 @@
<template>
<tr>
<tr @click="$emit('checked-state-changed', ingredient)">
<td>
<input type="checkbox">
<i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
</td>
<td>
<span v-if="ingredient.amount !== 0">{{ calculateAmount(ingredient.amount) }}</span>
@ -39,6 +40,11 @@ export default {
default: 1,
}
},
data() {
return {
checked: false
}
},
methods: {
calculateAmount: function (x) {
return calculateAmount(x, this.servings)

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

@ -34,7 +34,7 @@
<table class="table table-sm">
<!-- eslint-disable vue/no-v-for-template-key-on-child -->
<template v-for="i in step.ingredients">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id"></Ingredient>
<Ingredient v-bind:ingredient="i" v-bind:servings="servings" :key="i.id" @checked-state-changed="$emit('checked-state-changed', i)"></Ingredient>
</template>
<!-- eslint-enable vue/no-v-for-template-key-on-child -->
</table>

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.fab07d3cd83db7e32016.hot-update.js","publicPath":"http://localhost:8080/recipe_view.fab07d3cd83db7e32016.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.fab07d3cd83db7e32016.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"}
{"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.28f50ed664b7081f0b31.hot-update.js","publicPath":"http://localhost:8080/recipe_view.28f50ed664b7081f0b31.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.28f50ed664b7081f0b31.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\components\\Ingredient.vue\n 4:41 error Unexpected mutation of \"ingredient\" prop vue/no-mutating-props\n\n✖ 1 problem (1 error, 0 warnings)\n"}