diff options
Diffstat (limited to 'frontend')
10 files changed, 109 insertions, 15 deletions
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/_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; + }); } } |