[CLEAR-34] Add calculating values

front/components/Calculator/CalculatorForm.vue

@@ -31,7 +31,22 @@
                 </Row>
             </FormItem>
         </Form>
-        <Button type="primary">Oblicz</Button>
+        <Row style="margin-bottom: 20px">
+            <span><b>Wartości odżywcze:</b></span>
+            <ul>
+                <span>Kcal: {{nutrition.kcal}}</span>
+            </ul>
+            <ul>
+                <span>Węglowodany: {{nutrition.carbohydrates}}</span>
+            </ul>
+            <ul>
+                <span>Białka: {{nutrition.protein}}</span>
+            </ul>
+            <ul>
+                <span>Tłuszcze: {{nutrition.fat}}</span>
+            </ul>
+        </Row>
+        <Button type="primary" @click="calculate">Oblicz</Button>
         <Button type="error" @click="resetForm">Resetuj</Button>
     </div>
 </template>
@@ -47,6 +62,12 @@
                 ingredients_idx: 1,
                 ingredients: {
                     items: []
+                },
+                nutrition: {
+                    kcal: 0,
+                    carbohydrates: 0,
+                    protein: 0,
+                    fat: 0
                 }
             };
         },
@@ -59,6 +80,10 @@
                     items: []
                 };
                 this.suggestions = []
+                this.nutrition.kcal = 0;
+                this.nutrition.carbohydrates = 0;
+                this.nutrition.protein = 0;
+                this.nutrition.fat = 0;
             },
             handleAddIngredient() {
                 this.ingredients_idx++;
@@ -83,6 +108,20 @@
                     .then((res) => {
                         this.suggestions = res.data.data.products.data
                     })
+            },
+            calculate() {
+                const ingredients_list = this.ingredients.items.map(ing => ({
+                    id: ing.id,
+                    weight: ing.weight || 1
+                }));
+                this.$axios.post('/calculate', {products: ingredients_list})
+                    .then((response) => {
+                        this.nutrition = response.data.data.nutrition;
+                    })
+                    .catch((error) => {
+                        console.log(error);
+                        this.$Message.error('Błąd!');
+                    });
             }
         }
     };

front/pages/index.vue

@@ -23,9 +23,9 @@
             </Col>
             <Col span="6">
                 <Card class="cb-menu">
-                    <Icon type="ios-leaf" size="100" color="white"/>
+                    <Icon type="ios-stats" size="100" color="white"/>
                     <div style="text-align:center">
-                        <h3>Dieta</h3>
+                        <h3>Historia</h3>
                     </div>
                 </Card>
             </Col>
@@ -39,6 +39,7 @@
                     </Card>
                 </NuxtLink>
             </Col>
+
         </Row>
     </Card>
 </template>