property scaling and ui

vue/src/apps/RecipeView/RecipeView.vue

@@ -139,7 +139,7 @@
                 <div class="col-lg-6 offset-lg-3 col-12">
 <!--                    <Nutrition-component :recipe="recipe" id="nutrition_container"-->
 <!--                                         :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>

vue/src/components/FoodPropertyViewComponent.vue

@@ -2,20 +2,41 @@
     <div>
 
 
-        <div class="card p-2" v-if="recipe !== undefined" >
-            <h5><i class="fas fa-database"></i> {{$t('Properties')}}</h5>
+        <div class="card p-2" v-if="recipe !== undefined">
+            <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">
 
                 <tr v-for="p in recipe.food_properties" v-bind:key="`id_${p.id}`">
                     <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 }}
                     </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>
 
 
@@ -50,10 +71,12 @@ export default {
     components: {},
     props: {
         recipe: Object,
+        servings: Number,
     },
     data() {
         return {
             selected_property: undefined,
+            show_total: false,
         }
     },
     computed: {
@@ -64,7 +87,21 @@ export default {
     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>
 

vue/src/locales/en.json

@@ -480,6 +480,7 @@
     "Import_Result_Info": "{imported} of {total} recipes were imported",
     "Recipes_In_Import": "Recipes in your import file",
     "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.",
     "Warning_Delete_Supermarket_Category": "Deleting a supermarket category will also delete all relations to foods. Are you sure?",
     "New_Supermarket": "Create new supermarket",