Merge branch 'dev' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into dev

18 files changed, 160 insertions, 54 deletions

diff --git a/backend/api/api/Controllers/ExperimentController.cs b/backend/api/api/Controllers/ExperimentController.cs
index 0063c532..c2cde931 100644
--- a/backend/api/api/Controllers/ExperimentController.cs
+++ b/backend/api/api/Controllers/ExperimentController.cs
@@ -75,7 +75,7 @@ namespace api.Controllers
             return Ok(experiment);
         }
 
-        [HttpPost("getMyExperiments")]
+        [HttpGet("getMyExperiments")]
         [Authorize(Roles = "User,Guest")]
         public async Task<ActionResult<List<Experiment>>> getMyExperiments()
         {
diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs
index 618b15e8..fc403ccf 100644
--- a/backend/api/api/Controllers/ModelController.cs
+++ b/backend/api/api/Controllers/ModelController.cs
@@ -33,10 +33,13 @@ namespace api.Controllers
             _mlConnectionService = mlConnectionService;
         }
 
-        [HttpPost("sendModel")]
+        [HttpPost("trainModel")]
         [Authorize(Roles = "User,Guest")]
-        public async Task<ActionResult<string>> Test([FromBody] string modelId,string experimentId)
+        public async Task<ActionResult<string>> Test([FromBody] TrainModelObject trainModelObject)
         {
+            string experimentId = trainModelObject.ExperimentId;
+            string modelId = trainModelObject.ModelId;
+
             string uploaderId;
             var header = Request.Headers[HeaderNames.Authorization];
             if (AuthenticationHeaderValue.TryParse(header, out var headerValue))
@@ -238,4 +241,11 @@ namespace api.Controllers
         }
 
     }
+
+    public class TrainModelObject
+    {
+        public string ModelId { get; set; }
+        public string ExperimentId { get; set; }
+
+    }
 }
diff --git a/backend/api/api/Models/Experiment.cs b/backend/api/api/Models/Experiment.cs
index d5ce7627..bf029116 100644
--- a/backend/api/api/Models/Experiment.cs
+++ b/backend/api/api/Models/Experiment.cs
@@ -10,6 +10,7 @@ namespace api.Models
         public string _id { get; set; }
         public string name { get; set; }
         public string description { get; set; }
+        public string encoding { get; set; }
         public List<string> ModelIds { get; set; }
         public string datasetId { get; set; }
         public string uploaderId { get; set; }
diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs
index f0e4d346..72f989a6 100644
--- a/backend/api/api/Models/Model.cs
+++ b/backend/api/api/Models/Model.cs
@@ -23,7 +23,6 @@ namespace api.Models
 
         //Neural net training
         public string type { get; set; }
-        public string encoding { get; set; }
         public string optimizer { get; set; }
         public string lossFunction { get; set; }
         //public int inputNeurons { get; set; }
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
index 1457311f..dc851671 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.css
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
@@ -1,5 +1,5 @@
 .card{
-    margin-top:10%;
+    margin-top:0;
     padding: 0;
 }
 .p-2{
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
index 142a9194..11ff61c3 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
@@ -6,42 +6,33 @@
 </div>
 <div class="card-body overflow-hidden">
     <b style="color: gray;">Opis</b>
-     <hr style="width: 20%;"> <p> {{dataset.description}}opis1234564654768798768</p>
+     <hr style="width: 20%;"> <p> {{dataset.description}}</p>
     <hr>
     <div class="d-flex justify-content-center">
-        <div  class=" p-2" style="float: right;"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-filetype-csv" viewBox="0 0 17 17">
-                <path fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-1v-1h1a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v9H2V2a2 2 0 0 1 2-2h5.5L14 4.5ZM3.517 14.841a1.13 1.13 0 0 0 .401.823c.13.108.289.192.478.252.19.061.411.091.665.091.338 0 .624-.053.859-.158.236-.105.416-.252.539-.44.125-.189.187-.408.187-.656 0-.224-.045-.41-.134-.56a1.001 1.001 0 0 0-.375-.357 2.027 2.027 0 0 0-.566-.21l-.621-.144a.97.97 0 0 1-.404-.176.37.37 0 0 1-.144-.299c0-.156.062-.284.185-.384.125-.101.296-.152.512-.152.143 0 .266.023.37.068a.624.624 0 0 1 .246.181.56.56 0 0 1 .12.258h.75a1.092 1.092 0 0 0-.2-.566 1.21 1.21 0 0 0-.5-.41 1.813 1.813 0 0 0-.78-.152c-.293 0-.551.05-.776.15-.225.099-.4.24-.527.421-.127.182-.19.395-.19.639 0 .201.04.376.122.524.082.149.2.27.352.367.152.095.332.167.539.213l.618.144c.207.049.361.113.463.193a.387.387 0 0 1 .152.326.505.505 0 0 1-.085.29.559.559 0 0 1-.255.193c-.111.047-.249.07-.413.07-.117 0-.223-.013-.32-.04a.838.838 0 0 1-.248-.115.578.578 0 0 1-.255-.384h-.765ZM.806 13.693c0-.248.034-.46.102-.633a.868.868 0 0 1 .302-.399.814.814 0 0 1 .475-.137c.15 0 .283.032.398.097a.7.7 0 0 1 .272.26.85.85 0 0 1 .12.381h.765v-.072a1.33 1.33 0 0 0-.466-.964 1.441 1.441 0 0 0-.489-.272 1.838 1.838 0 0 0-.606-.097c-.356 0-.66.074-.911.223-.25.148-.44.359-.572.632-.13.274-.196.6-.196.979v.498c0 .379.064.704.193.976.131.271.322.48.572.626.25.145.554.217.914.217.293 0 .554-.055.785-.164.23-.11.414-.26.55-.454a1.27 1.27 0 0 0 .226-.674v-.076h-.764a.799.799 0 0 1-.118.363.7.7 0 0 1-.272.25.874.874 0 0 1-.401.087.845.845 0 0 1-.478-.132.833.833 0 0 1-.299-.392 1.699 1.699 0 0 1-.102-.627v-.495Zm8.239 2.238h-.953l-1.338-3.999h.917l.896 3.138h.038l.888-3.138h.879l-1.327 4Z"/>
-            </svg>
+        <div  class=" p-2" >
+            <h4><span class="badge bg-secondary">{{dataset.extension}}</span></h4>
         </div> 
         <div class="p-2">
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
-                <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
-              </svg>
+            <span class="material-icons">{{visibleicon}}</span>
+        </div>
+        <div class="p-2">
+            <span class="material-icons">{{accessibleicon}}</span>
         </div>
     </div>
     <hr>
     <div class="col text-center">
 <button (click)=toggleDisplayDiv() class="btn btn-primary btn-sm active " mat-raised-button color="primary" style="margin: 0.5rem;">Kolone</button>
         <div [hidden]="isShowDiv" style="overflow: scroll; overflow-y: hidden;">
-            <table class="table table-bordered table-md">
+            <table class="table table-bordered table-md" >
                 <thead>
-                    <th scope="col" *ngFor="let column of dataset.header">{{column}}</th>
-                    <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze  -->
+                    <th scope="col" *ngFor="let column of dataset.columnInfo" >{{column.columnName}}</th> 
                 </thead>
             </table>
         </div>
 </div>
     <table>
-        <tr><td>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-plus" viewBox="0 0 16 16">
-        <path d="M8 7a.5.5 0 0 1 .5.5V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5A.5.5 0 0 1 8 7z"/>
-        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-    </svg><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td>
-    <tr><tr><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
-        <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
-        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-    </svg><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td>
-    </tr> 
+        <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td></tr>
+        <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td></tr> 
     </table>
     
 </div>
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
index 320cb10f..44b95310 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
+++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
@@ -9,13 +9,32 @@ import Dataset from 'src/app/_data/Dataset';
 export class ItemDatasetComponent {
 
   @Input() dataset: Dataset = new Dataset();
-  
+  visibleicon='';
+  accessibleicon='';
   isShowDiv = true;
   toggleDisplayDiv() {
     this.isShowDiv = !this.isShowDiv;
   }
   constructor() {
   }
-  
+  ngOnInit(): void {
+    if(this.dataset.isPublic==true)
+    {
+      this.visibleicon='visibility'
+    }
+    else
+    {
+      this.visibleicon='visibility_off';
+    }
+
+    if(this.dataset.accessibleByLink==true)
+    {
+      this.accessibleicon='link'
+    }
+    else
+    {
+      this.accessibleicon='link_off';
+    }
+  }
 }
 
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.css b/frontend/src/app/_elements/item-experiment/item-experiment.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/item-experiment/item-experiment.component.css
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.html b/frontend/src/app/_elements/item-experiment/item-experiment.component.html
new file mode 100644
index 00000000..51fbfef3
--- /dev/null
+++ b/frontend/src/app/_elements/item-experiment/item-experiment.component.html
@@ -0,0 +1,10 @@
+<div class="card" style="min-width: 12rem;">
+    <div class="card-header">
+        Naziv eksperimenta: <b>{{experiment.name}}</b>
+    </div>
+    <div class="card-body overflow-hidden">
+        <p class="card-text">
+            Opis: {{experiment.description}}
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts b/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts
new file mode 100644
index 00000000..1da7d05d
--- /dev/null
+++ b/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemExperimentComponent } from './item-experiment.component';
+
+describe('ItemExperimentComponent', () => {
+  let component: ItemExperimentComponent;
+  let fixture: ComponentFixture<ItemExperimentComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ItemExperimentComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ItemExperimentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.ts b/frontend/src/app/_elements/item-experiment/item-experiment.component.ts
new file mode 100644
index 00000000..31900d35
--- /dev/null
+++ b/frontend/src/app/_elements/item-experiment/item-experiment.component.ts
@@ -0,0 +1,15 @@
+import { Component, Input, OnInit } from '@angular/core';
+import Experiment from 'src/app/_data/Experiment';
+
+@Component({
+  selector: 'app-item-experiment',
+  templateUrl: './item-experiment.component.html',
+  styleUrls: ['./item-experiment.component.css']
+})
+export class ItemExperimentComponent{
+
+  @Input() experiment: Experiment = new Experiment();
+
+  constructor() { }
+
+}
diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html
index c64f8ca1..447f023e 100644
--- a/frontend/src/app/_elements/item-model/item-model.component.html
+++ b/frontend/src/app/_elements/item-model/item-model.component.html
@@ -9,23 +9,15 @@
         <br>
         <b style="color: gray;">Opis</b><hr  style="width: 20%;">
         <p class="card-text">
-           {{model.description}}opis1234564654768798768
+           {{model.description}}
         </p>
         <hr>
         
         <div>
             <table>
-                <tr><td>
-            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-plus" viewBox="0 0 16 16">
-                <path d="M8 7a.5.5 0 0 1 .5.5V9H10a.5.5 0 0 1 0 1H8.5v1.5a.5.5 0 0 1-1 0V10H6a.5.5 0 0 1 0-1h1.5V7.5A.5.5 0 0 1 8 7z"/>
-                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-            </svg><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{model.dateCreated |date}}</td>
-           <tr><tr><td><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar-check" viewBox="0 0 16 16">
-                <path d="M10.854 7.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 9.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
-                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
-            </svg><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{model.lastUpdated |date}}</td>
-        </tr> 
-            </table>
+                <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{model.dateCreated |date}}</td></tr>
+                <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{model.lastUpdated |date}}</td></tr> 
+            </table> 
         </div>
        
     </div>
diff --git a/frontend/src/app/_services/experiments.service.ts b/frontend/src/app/_services/experiments.service.ts
index 60d1bfb2..ecb3e262 100644
--- a/frontend/src/app/_services/experiments.service.ts
+++ b/frontend/src/app/_services/experiments.service.ts
@@ -15,4 +15,8 @@ export class ExperimentsService {
   addExperiment(experiment: Experiment): Observable<any> {
     return this.http.post(`${API_SETTINGS.apiURL}/experiment/add`, experiment, { headers: this.authService.authHeader() });
   }
+
+  getMyExperiments(): Observable<Experiment[]> {
+    return this.http.get<Experiment[]>(`${API_SETTINGS.apiURL}/experiment/getmyexperiments`, { headers: this.authService.authHeader() });
+  }
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index 3fbad109..9a1e71da 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -35,8 +35,8 @@ export class ModelsService {
   addDataset(dataset: Dataset): Observable<any> {
     return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() });
   }
-  trainModel(model: Model): Observable<any> {
-    return this.http.post(`${API_SETTINGS.apiURL}/model/sendmodel`, model, { headers: this.authService.authHeader(), responseType: 'text' });
+  trainModel(modelId: string, experimentId: string): Observable<any> {
+    return this.http.post(`${API_SETTINGS.apiURL}/model/trainmodel`, { ModelId: modelId, ExperimentId: experimentId }, { headers: this.authService.authHeader(), responseType: 'text' });
   }
 
   getMyDatasets(): Observable<Dataset[]> {
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 5155930c..f57441c0 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.compon
 import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component';
 import { GraphComponent } from './_elements/graph/graph.component';
 import { TrainingComponent } from './training/training.component';
+import { ItemExperimentComponent } from './_elements/item-experiment/item-experiment.component';
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 
 @NgModule({
@@ -81,6 +82,7 @@ import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.comp
     AddNewDatasetComponent,
     GraphComponent,
     TrainingComponent,
+    ItemExperimentComponent,
     YesNoDialogComponent
   ],
   imports: [
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;
+    });
   }
 }