allow users to choose between food and recipe properties
This commit is contained in:
parent
aeb944b281
commit
7af581f0ff
@ -137,7 +137,7 @@
|
|||||||
|
|
||||||
<div class="row" style="margin-top: 2vh; ">
|
<div class="row" style="margin-top: 2vh; ">
|
||||||
<div class="col-lg-6 offset-lg-3 col-12">
|
<div class="col-lg-6 offset-lg-3 col-12">
|
||||||
<food-property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></food-property-view-component>
|
<property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -184,7 +184,7 @@ import CustomInputSpinButton from "@/components/CustomInputSpinButton"
|
|||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import ImportTandoor from "@/components/Modals/ImportTandoor.vue";
|
import ImportTandoor from "@/components/Modals/ImportTandoor.vue";
|
||||||
import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
|
import BottomNavigationBar from "@/components/BottomNavigationBar.vue";
|
||||||
import FoodPropertyViewComponent from "@/components/FoodPropertyViewComponent.vue";
|
import PropertyViewComponent from "@/components/PropertyViewComponent.vue";
|
||||||
|
|
||||||
Vue.prototype.moment = moment
|
Vue.prototype.moment = moment
|
||||||
|
|
||||||
@ -209,7 +209,7 @@ export default {
|
|||||||
RecipeSwitcher,
|
RecipeSwitcher,
|
||||||
CustomInputSpinButton,
|
CustomInputSpinButton,
|
||||||
BottomNavigationBar,
|
BottomNavigationBar,
|
||||||
FoodPropertyViewComponent,
|
PropertyViewComponent,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
ingredient_factor: function () {
|
ingredient_factor: function () {
|
||||||
|
@ -15,21 +15,32 @@
|
|||||||
<i class="fas fa-toggle-on" v-if="!show_total"></i>
|
<i class="fas fa-toggle-on" v-if="!show_total"></i>
|
||||||
<i class="fas fa-toggle-off" v-if="show_total"></i>
|
<i class="fas fa-toggle-off" v-if="show_total"></i>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
|
<div v-if="hasRecipeProperties && hasFoodProperties">
|
||||||
|
<span v-if="!show_recipe_properties">{{ $t('Food') }} </span>
|
||||||
|
<span v-if="show_recipe_properties">{{ $t('Recipe') }} </span>
|
||||||
|
|
||||||
|
<a href="#" @click="show_recipe_properties = !show_recipe_properties">
|
||||||
|
<i class="fas fa-toggle-on" v-if="!show_recipe_properties"></i>
|
||||||
|
<i class="fas fa-toggle-off" v-if="show_recipe_properties"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</b-col>
|
</b-col>
|
||||||
</b-row>
|
</b-row>
|
||||||
|
|
||||||
|
|
||||||
<table class="table table-bordered table-sm">
|
<table class="table table-bordered table-sm">
|
||||||
|
|
||||||
<tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
|
<tr v-for="p in property_list" v-bind:key="`id_${p.id}`">
|
||||||
<td>
|
<td>
|
||||||
|
|
||||||
{{ p.icon }} {{ p.name }}
|
{{ p.icon }} {{ p.name }}
|
||||||
</td>
|
</td>
|
||||||
<td class="text-right">{{ get_amount(p.total_value) }}</td>
|
<td class="text-right">{{ get_amount(p.property_amount) }}</td>
|
||||||
<td class=""> {{ p.unit }}</td>
|
<td class=""> {{ p.unit }}</td>
|
||||||
|
|
||||||
<td class="align-middle text-center">
|
<td class="align-middle text-center" v-if="!show_recipe_properties">
|
||||||
<a href="#" @click="selected_property = p">
|
<a href="#" @click="selected_property = p">
|
||||||
<i v-if="p.missing_value" class="text-warning fas fa-exclamation-triangle"></i>
|
<i v-if="p.missing_value" class="text-warning fas fa-exclamation-triangle"></i>
|
||||||
<i v-if="!p.missing_value" class="text-muted fas fa-info-circle"></i>
|
<i v-if="!p.missing_value" class="text-muted fas fa-info-circle"></i>
|
||||||
@ -74,7 +85,7 @@ import GenericModalForm from "@/components/Modals/GenericModalForm.vue";
|
|||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "FoodPropertyViewComponent",
|
name: "PropertyViewComponent",
|
||||||
mixins: [ApiMixin],
|
mixins: [ApiMixin],
|
||||||
components: {GenericModalForm},
|
components: {GenericModalForm},
|
||||||
props: {
|
props: {
|
||||||
@ -87,15 +98,65 @@ export default {
|
|||||||
selected_food: undefined,
|
selected_food: undefined,
|
||||||
show_food_edit_modal: false,
|
show_food_edit_modal: false,
|
||||||
show_total: false,
|
show_total: false,
|
||||||
|
show_recipe_properties: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
show_modal: function () {
|
show_modal: function () {
|
||||||
return this.selected_property !== undefined
|
return this.selected_property !== undefined
|
||||||
},
|
},
|
||||||
|
hasRecipeProperties: function () {
|
||||||
|
return this.recipe.properties.length !== 0
|
||||||
|
},
|
||||||
|
hasFoodProperties: function () {
|
||||||
|
let has_food_properties = false
|
||||||
|
for (const [key, fp] of Object.entries(this.recipe.food_properties)) {
|
||||||
|
if (fp.total_value !== 0) {
|
||||||
|
has_food_properties = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return has_food_properties
|
||||||
|
},
|
||||||
|
property_list: function () {
|
||||||
|
let pt_list = []
|
||||||
|
if (this.show_recipe_properties) {
|
||||||
|
this.recipe.properties.forEach(rp => {
|
||||||
|
pt_list.push(
|
||||||
|
{
|
||||||
|
'id': rp.property_type.id,
|
||||||
|
'name': rp.property_type.name,
|
||||||
|
'description': rp.property_type.description,
|
||||||
|
'icon': rp.property_type.icon,
|
||||||
|
'food_values': [],
|
||||||
|
'property_amount': rp.property_amount,
|
||||||
|
'missing_value': false,
|
||||||
|
'unit': rp.property_type.unit,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
for (const [key, fp] of Object.entries(this.recipe.food_properties)) {
|
||||||
|
pt_list.push(
|
||||||
|
{
|
||||||
|
'id': fp.id,
|
||||||
|
'name': fp.name,
|
||||||
|
'description': fp.description,
|
||||||
|
'icon': fp.icon,
|
||||||
|
'food_values': fp.food_values,
|
||||||
|
'property_amount': fp.total_value,
|
||||||
|
'missing_value': fp.missing_value,
|
||||||
|
'unit': fp.unit,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return pt_list
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
if (this.hasRecipeProperties && !this.hasFoodProperties) {
|
||||||
|
this.show_recipe_properties = true
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
get_amount: function (amount) {
|
get_amount: function (amount) {
|
Loading…
Reference in New Issue
Block a user