adding generated food plan UI

ClientApp/src/app/generated-food-plan/generated-food-plan-routing.module.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GeneratedFoodPlanPage } from './generated-food-plan.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GeneratedFoodPlanPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GeneratedFoodPlanPageRoutingModule {}

ClientApp/src/app/generated-food-plan/generated-food-plan.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GeneratedFoodPlanPageRoutingModule } from './generated-food-plan-routing.module';
+
+import { GeneratedFoodPlanPage } from './generated-food-plan.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GeneratedFoodPlanPageRoutingModule
+  ],
+  declarations: [GeneratedFoodPlanPage]
+})
+export class GeneratedFoodPlanPageModule {}

ClientApp/src/app/generated-food-plan/generated-food-plan.page.html

+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="container-fluid" style="background-color: #E9F0FB">
+    <div class="row ion-justify-content-center" style="height: 100vh">
+      <div class="col-11">
+
+        <div class="row ion-justify-content-center">
+          <div class="col">
+            <h1 class="fw-bolder">Charlie's Food Plan</h1>
+          </div>
+        </div>
+
+        <div class="row mt-4">
+          <div class="col px-2 py-5 bg-secondary shadow-lg rounded-3 text-light">
+
+            <div class="row">
+              <div class="col">Breed: </div>
+              <div class="col">
+                <span *ngIf="breed === 0">Boxer</span>
+                <span *ngIf="breed === 1">Doberman</span>
+                <span *ngIf="breed === 2">German splitz</span>
+                <span *ngIf="breed === 3">Great dane</span>
+                <span *ngIf="breed === 4">Labrador</span>
+                <span *ngIf="breed === 5">Pomenarian</span>
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">Health: </div>
+              <div class="col text-warning">{{prediction}}</div>
+            </div>
+            <div class="row">
+              <div class="col">Daily energy needed: </div>
+              <div class="col"><span class="text-danger">{{calories}}</span> Kcal</div>
+            </div>
+
+            <p class="ion-text-center mt-4"><u>Select food menu</u></p>
+            <p class="{{selectedCalories > calories ? 'text-danger':''}}">Calories in the menu: {{selectedCalories}}</p>
+            <p>{{selectedFoods}}</p>
+
+            <ul class="list-group">
+              <li class="list-group-item" *ngFor="let food of foods" (click)="selectFood(food)">{{food.name}}: {{food.calories}}</li>
+            </ul>
+
+<!--            <p class="ion-text-center mt-4"><u>How to give food</u></p>-->
+
+<!--            <h5 class="ion-text-center mt-4 fw-bold text-warning">Over-weight-dog. Reduce the number of meals provided and if dog food is provided, reduce it as well.</h5>-->
+
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</ion-content>

ClientApp/src/app/generated-food-plan/generated-food-plan.page.spec.ts

+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { GeneratedFoodPlanPage } from './generated-food-plan.page';
+
+describe('GeneratedFoodPlanPage', () => {
+  let component: GeneratedFoodPlanPage;
+  let fixture: ComponentFixture<GeneratedFoodPlanPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GeneratedFoodPlanPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(GeneratedFoodPlanPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ClientApp/src/app/generated-food-plan/generated-food-plan.page.ts

+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {PythonBackendService} from '../core/python-backend.service';
+import {Food} from "../core/food";
+
+@Component({
+  selector: 'app-generated-food-plan',
+  templateUrl: './generated-food-plan.page.html',
+  styleUrls: ['./generated-food-plan.page.scss'],
+})
+export class GeneratedFoodPlanPage implements OnInit {
+  breed: number;
+  weight: number;
+  height: number;
+  bcs = 1;
+  calories = 0;
+  selectedCalories = 0;
+  public prediction: string;
+  public foods: Food[] = [];
+
+  public selectedFoods = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private pythonBackendService: PythonBackendService
+    ) { }
+
+  ngOnInit() {
+    this.breed = Number(this.route.snapshot.paramMap.get('breed'));
+    this.weight = Number(this.route.snapshot.paramMap.get('weight'));
+    this.height = Number(this.route.snapshot.paramMap.get('height'));
+
+    this.foods.push({calories: 130, name: 'White rice'+' (100g)'});
+    this.foods.push({calories: 208, name: 'Salmon'+' (100g)'});
+    this.foods.push({calories: 100, name: 'Tuna'+' (100g)'});
+    this.foods.push({calories: 41, name: 'Carrot'+' (100g)'});
+    this.foods.push({calories: 239, name: 'Chicken'+' (100g)'});
+    this.foods.push({calories: 165, name: 'Chicken breast'+' (100g)'});
+    this.foods.push({calories: 250, name: 'Beef'+' (100g)'});
+    this.foods.push({calories: 242, name: 'Pork'+' (100g)'});
+    this.foods.push({calories: 59, name: 'Yoghurt'+' (100g)'});
+    this.foods.push({calories: 89, name: 'Banana'+' (100g)'});
+    this.foods.push({calories: 30, name: 'Watermelon'+' (100g)'});
+
+    this.pythonBackendService.predictWeight([[this.breed, this.height, this.weight]])
+      .subscribe(res => {
+        console.log(res);
+        if (res.pred === '0') {
+          this.prediction = 'Normal weight';
+          this.bcs = 1;
+        }
+        if (res.pred === '1') {
+          this.prediction = 'Over weight';
+          this.bcs = 0.8;
+        }
+        if (res.pred === '2') {
+          this.prediction = 'Under weight';
+          this.bcs = 1.2;
+        }
+        this.calories = 70*this.weight*this.bcs;
+      });
+  }
+
+  selectFood(food: Food) {
+    if (this.selectedFoods) {
+      this.selectedFoods += ' + ' + food.name;
+    }else {
+      this.selectedFoods += food.name;
+    }
+    this.selectedCalories += food.calories;
+  }
+}