diff options
Diffstat (limited to 'frontend/src')
14 files changed, 146 insertions, 50 deletions
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; + }); } } |