property scaling and ui
This commit is contained in:
parent
2a5cba0178
commit
6030fa1d68
@ -139,7 +139,7 @@
|
|||||||
<div class="col-lg-6 offset-lg-3 col-12">
|
<div class="col-lg-6 offset-lg-3 col-12">
|
||||||
<!-- <Nutrition-component :recipe="recipe" id="nutrition_container"-->
|
<!-- <Nutrition-component :recipe="recipe" id="nutrition_container"-->
|
||||||
<!-- :ingredient_factor="ingredient_factor"></Nutrition-component>-->
|
<!-- :ingredient_factor="ingredient_factor"></Nutrition-component>-->
|
||||||
<food-property-view-component :recipe="recipe"></food-property-view-component>
|
<food-property-view-component :recipe="recipe" :servings="servings"></food-property-view-component>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -2,20 +2,41 @@
|
|||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
|
||||||
<div class="card p-2" v-if="recipe !== undefined" >
|
<div class="card p-2" v-if="recipe !== undefined">
|
||||||
<h5><i class="fas fa-database"></i> {{$t('Properties')}}</h5>
|
<div class="flex-row">
|
||||||
|
<div class="flex-column">
|
||||||
|
<h5><i class="fas fa-database"></i> {{ $t('Properties') }}</h5>
|
||||||
|
</div>
|
||||||
|
<div class="flex-column align-content-end text-right align-text-bottom">
|
||||||
|
|
||||||
|
<span v-if="!show_total">{{ $t('per_serving') }}</span>
|
||||||
|
<span v-if="show_total">{{ $t('total') }}</span>
|
||||||
|
|
||||||
|
<a href="#" @click="show_total = !show_total">
|
||||||
|
<i class="fas fa-toggle-on" v-if="!show_total"></i>
|
||||||
|
<i class="fas fa-toggle-off" v-if="show_total"></i>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<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 recipe.food_properties" v-bind:key="`id_${p.id}`">
|
||||||
<td>
|
<td>
|
||||||
<button class="btn btn-danger btn-sm"
|
|
||||||
@click="selected_property = p"
|
|
||||||
v-if="p.missing_value"><i
|
|
||||||
class="fas fa-exclamation-triangle"></i>
|
|
||||||
</button>
|
|
||||||
{{ p.icon }} {{ p.name }}
|
{{ p.icon }} {{ p.name }}
|
||||||
</td>
|
</td>
|
||||||
<td>{{ p.total_value }} {{ p.unit }}</td>
|
<td class="text-right">{{ get_amount(p.total_value) }}</td>
|
||||||
|
<td class=""> {{ p.unit }}</td>
|
||||||
|
|
||||||
|
<td class="align-middle text-center">
|
||||||
|
<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-muted fas fa-info-circle"></i>
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
|
|
||||||
@ -50,10 +71,12 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
props: {
|
props: {
|
||||||
recipe: Object,
|
recipe: Object,
|
||||||
|
servings: Number,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
selected_property: undefined,
|
selected_property: undefined,
|
||||||
|
show_total: false,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -64,7 +87,21 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {},
|
methods: {
|
||||||
|
get_amount: function (amount) {
|
||||||
|
if (this.show_total) {
|
||||||
|
return (amount * (this.servings / this.recipe.servings)).toLocaleString(window.CUSTOM_LOCALE, {
|
||||||
|
'maximumFractionDigits': 2,
|
||||||
|
'minimumFractionDigits': 2
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return (amount / this.recipe.servings).toLocaleString(window.CUSTOM_LOCALE, {
|
||||||
|
'maximumFractionDigits': 2,
|
||||||
|
'minimumFractionDigits': 2
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -480,6 +480,7 @@
|
|||||||
"Import_Result_Info": "{imported} of {total} recipes were imported",
|
"Import_Result_Info": "{imported} of {total} recipes were imported",
|
||||||
"Recipes_In_Import": "Recipes in your import file",
|
"Recipes_In_Import": "Recipes in your import file",
|
||||||
"Toggle": "Toggle",
|
"Toggle": "Toggle",
|
||||||
|
"total": "total",
|
||||||
"Import_Error": "An Error occurred during your import. Please expand the Details at the bottom of the page to view it.",
|
"Import_Error": "An Error occurred during your import. Please expand the Details at the bottom of the page to view it.",
|
||||||
"Warning_Delete_Supermarket_Category": "Deleting a supermarket category will also delete all relations to foods. Are you sure?",
|
"Warning_Delete_Supermarket_Category": "Deleting a supermarket category will also delete all relations to foods. Are you sure?",
|
||||||
"New_Supermarket": "Create new supermarket",
|
"New_Supermarket": "Create new supermarket",
|
||||||
|
28705
vue/yarn.lock
28705
vue/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user