3 files changed, 51 insertions, 13 deletions
diff --git a/frontend/src/app/training/training.component.css b/frontend/src/app/training/training.component.css
index ee4b0448..490c56b5 100644
--- a/frontend/src/app/training/training.component.css
+++ b/frontend/src/app/training/training.component.css
@@ -29,7 +29,7 @@
     border-color: #003459;
 }
 
-.selectedDatasetClass {
+.selectedExperimentClass {
     /*border-color: 2px solid #003459;*/
     background-color: lightblue;
 }
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 1939d3cf..2e574c12 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -4,13 +4,25 @@
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-<h2>1. Izaberi eksperiment</h2>
-TODO
+<h2>1. Izaberite eksperiment iz kolekcije</h2>
+<div class="px-5 my-2">
+    <input type="text" class="form-control" placeholder="Pretraga"
+        [(ngModel)]="term">
+</div>
+<div class="overflow-auto" style="max-height: 500px;">
+    <ul class="list-group">
+        <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term"
+            [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
+            <app-item-experiment [experiment]="experiment"
+                (click)="selectThisExperiment(experiment);"></app-item-experiment>
+        </li>
+    </ul>
+</div>
 
-<h2>2.Izaberi model</h2>
+<h2>2.Izaberite model</h2>
 <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
 
-<h2>3. Treniraj model</h2>
+<h2>3. Trenirajte model</h2>
 <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
     model</button>
 
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index cb6c304c..4f20bc87 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -1,29 +1,55 @@
 import { Component, OnInit } from '@angular/core';
+import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
 import Model from '../_data/Model';
+import { DatasetsService } from '../_services/datasets.service';
+import { ExperimentsService } from '../_services/experiments.service';
+import { ModelsService } from '../_services/models.service';
 
 @Component({
   selector: 'app-training',
   templateUrl: './training.component.html',
   styleUrls: ['./training.component.css']
 })
-export class TrainingComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+export class TrainingComponent{
 
+  myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
   selectedModel?: Model;
 
   trainingResult: any;
 
-  selectModel($model: Model) {
+  term: string = "";
+
+  constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { 
+    this.experimentsService.getMyExperiments().subscribe((experiments) => {
+      this.myExperiments = experiments;
+      console.log(this.myExperiments);
+    });
+  }
+
+  selectThisExperiment(experiment: Experiment) {
+    this.selectedExperiment = experiment;
+  }
 
+  selectModel(model: Model) {
+    this.selectedModel = model;
   }
 
   trainModel() {
-    //eksperiment i model moraju da budu izabrani
+    this.trainingResult = undefined;
+
+    if (this.selectedExperiment == undefined) {
+      Shared.openDialog("Greška", "Molimo Vas da izaberete eksperiment iz kolekcije.");
+      return;
+    }
+    if (this.selectedModel == undefined) {
+      Shared.openDialog("Greška", "Molimo Vas da izaberete model.");
+      return;
+    }
+    this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => {
+      console.log('Train model complete!', response);
+      this.trainingResult = response;
+    });
   }
 }