diff options
Diffstat (limited to 'frontend')
-rw-r--r-- | frontend/src/app/_elements/navbar/navbar.component.html | 3 | ||||
-rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.ts | 41 | ||||
-rw-r--r-- | frontend/src/app/_pages/home/home.component.html | 2 | ||||
-rw-r--r-- | frontend/src/app/_pages/my-datasets/my-datasets.component.html | 6 | ||||
-rw-r--r-- | frontend/src/app/_pages/my-datasets/my-datasets.component.ts | 11 | ||||
-rw-r--r-- | frontend/src/app/_services/models.service.ts | 18 | ||||
-rw-r--r-- | frontend/src/app/app-routing.module.ts | 20 | ||||
-rw-r--r-- | frontend/src/app/app.component.spec.ts | 6 | ||||
-rw-r--r-- | frontend/src/app/app.component.ts | 33 |
9 files changed, 102 insertions, 38 deletions
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index b9c450af..52e26e6b 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -11,7 +11,8 @@ <li><a routerLink="add-model" class="nav-link px-2" [class]="(currentUrl === '/add-model') ? 'text-secondary' : 'text-white'">Dodaj model</a></li> <li><a routerLink="my-predictors" class="nav-link px-2" - [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white'">Predvidi</a></li> + [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> + </li> </ul> <div *ngIf="shared.loggedIn" class="dropdown text-end"> diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 01e8ade9..4e315510 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -33,25 +33,36 @@ export class AddModelComponent implements OnInit { } addModel() { - this.saveModel(false); //trajno cuvanje + this.saveModel(false).subscribe(); //trajno cuvanje } + trainModel() { - this.saveModel(true).subscribe((modelId : any) => { + this.saveModel(true).subscribe((modelId: any) => { if (modelId) this.models.trainModel(modelId); }); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad } - saveModel(temporary: boolean) : any { - if (this.datasetLoadComponent) - this.models.addDataset(this.datasetLoadComponent?.dataset).subscribe((response) => {//id dataseta je response - this.newModel.datasetId = response; - this.getCheckedInputCols(); - this.getCheckedOutputCol(); - if (this.validationInputsOutput()) - return this.models.addModel(this.newModel); //id modela - return of(null); + saveModel(temporary: boolean): any { + console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); + if (this.datasetLoadComponent) { + this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((fileId) => { + console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + fileId); + if (this.datasetLoadComponent) { + this.datasetLoadComponent.dataset.fileId = fileId; + this.models.addDataset(this.datasetLoadComponent.dataset).subscribe((datasetId) => { + console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ' + datasetId); + this.newModel.datasetId = datasetId; + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + if (this.validationInputsOutput()) + this.models.addModel(this.newModel).subscribe((response) => { + console.log('ADD MODEL: DONE! REPLY:\n' + response); + }); + }); + } }); + } } getCheckedInputCols() { @@ -73,17 +84,17 @@ export class AddModelComponent implements OnInit { let thatRb = <HTMLInputElement>radiobuttons[i]; if (thatRb.checked) { this.newModel.columnToPredict = thatRb.value; - break; + break; } } //console.log(this.checkedOutputCol); } - validationInputsOutput() : boolean { + validationInputsOutput(): boolean { if (this.newModel.inputColumns.length == 0) { alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.") return false; - } - for (let i = 0; i < this.newModel.inputColumns.length; i++) { + } + for (let i = 0; i < this.newModel.inputColumns.length; i++) { if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) { let colName = this.newModel.columnToPredict; alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 7245f602..274f0fd8 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -47,7 +47,9 @@ <h2 class="my-4">Pogledajte javne izvore podataka!</h2> <app-carousel [items]="publicDatasets"> </app-carousel> + <h3><a routerLink="browse-datasets">Pogledaj sve javne izvore podataka...</a></h3> <h2 class="my-4">Iskoristite već trenirane modele!</h2> <app-carousel [items]="publicPredictors"> </app-carousel> + <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3> </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html index 4b3095be..623b9ac8 100644 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.html +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.html @@ -1 +1,5 @@ -<p>my-datasets works!</p> +<ul class="list-group my-2"> + <li class="list-group-item" *ngFor="let dataset of myDatasets"> + <app-item-dataset [dataset]="dataset"></app-item-dataset> + </li> +</ul>
\ No newline at end of file diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts index af5eab97..13b0c47b 100644 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts +++ b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; @Component({ selector: 'app-my-datasets', @@ -7,7 +8,15 @@ import { Component, OnInit } from '@angular/core'; }) export class MyDatasetsComponent implements OnInit { - constructor() { } + myDatasets?: Dataset[]; + + constructor() { + this.myDatasets = [ + new Dataset('Titanik', 'Opis titanik', ['K1', 'K2', 'K3', 'Ime', 'Preziveli']), + new Dataset('Neki drugi set', 'opis', ['a', 'b', 'c']), + new Dataset('Treci set', 'opis', ['a', 'b', 'c']) + ]; + } ngOnInit(): void { } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index 80dc1ae3..25a37e3a 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -1,9 +1,10 @@ -import { HttpClient } from '@angular/common/http'; +import { HttpClient, HttpParams, HttpRequest } from '@angular/common/http'; import { Injectable } from '@angular/core'; import Model from '../_data/Model'; import { AuthService } from './auth.service'; import { API_SETTINGS } from 'src/config'; import Dataset from '../_data/Dataset'; +import { Observable } from 'rxjs'; @Injectable({ @@ -13,6 +14,21 @@ export class ModelsService { constructor(private http: HttpClient, private authService: AuthService) { } + uploadData(file: File): Observable<any> { + let formData = new FormData(); + formData.append('file', file, file.name); + + let params = new HttpParams(); + + const options = { + params: params, + reportProgress: true, + }; + + const req = new HttpRequest('POST', `${API_SETTINGS.apiURL}/file/csv`, formData, options); + return this.http.request(req); + } + addModel(model: Model) { return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader(), responseType: 'text' }); } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index ee43b522..001d0b4f 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -14,16 +14,16 @@ import { ProfileComponent } from './_pages/profile/profile.component'; import { PredictComponent } from './_pages/predict/predict.component'; const routes: Routes = [ - { path: '', component: HomeComponent }, - { path: 'add-model', component: AddModelComponent }, - { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService] }, - { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService] }, - { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService] }, - { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService] }, - { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService] }, - { path: 'browse-datasets', component: BrowseDatasetsComponent }, - { path: 'browse-predictors', component: BrowsePredictorsComponent }, - { path: 'predict', component: PredictComponent } + { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, + { path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } }, + { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } }, + { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } }, + { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } }, + { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService], data: { title: 'Podešavanja' } }, + { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, + { path: 'browse-datasets', component: BrowseDatasetsComponent, data: { title: 'Javni izvori podataka' } }, + { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } }, + { path: 'predict', component: PredictComponent, data: { title: 'Predvidi vrednosti' } } ]; @NgModule({ diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts index 74b5b3eb..d0679f89 100644 --- a/frontend/src/app/app.component.spec.ts +++ b/frontend/src/app/app.component.spec.ts @@ -20,12 +20,6 @@ describe('AppComponent', () => { expect(app).toBeTruthy(); }); - it(`should have as title 'frontend'`, () => { - const fixture = TestBed.createComponent(AppComponent); - const app = fixture.componentInstance; - expect(app.title).toEqual('frontend'); - }); - it('should render title', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 9d6b2f11..f5ae5786 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -1,10 +1,37 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { Title } from '@angular/platform-browser'; +import { Router, NavigationEnd, ActivatedRoute } from '@angular/router'; +import { filter, map } from 'rxjs'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) -export class AppComponent { - title = 'frontend'; +export class AppComponent implements OnInit { + + constructor(private router: Router, private titleService: Title) { } + + ngOnInit() { + this.router.events + .pipe( + filter((event) => event instanceof NavigationEnd), + map(() => { + let route: ActivatedRoute = this.router.routerState.root; + let routeTitle = ''; + while (route!.firstChild) { + route = route.firstChild; + } + if (route.snapshot.data['title']) { + routeTitle = route!.snapshot.data['title']; + } + return routeTitle; + }) + ) + .subscribe((title: string) => { + if (title) { + this.titleService.setTitle(`${title} - Igrannonica`); + } + }); + } } |