allow users to choose between food and recipe properties

This commit is contained in:
vabene1111 2023-05-26 15:59:49 +02:00
parent aeb944b281
commit 7af581f0ff
2 changed files with 70 additions and 9 deletions

View File

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

View File

@ -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) {
@ -121,7 +182,7 @@ export default {
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err) StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
}) })
}, },
foodEditorHidden: function (){ foodEditorHidden: function () {
this.show_food_edit_modal = false; this.show_food_edit_modal = false;
this.$emit("foodUpdated", "") this.$emit("foodUpdated", "")
} }