aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app')
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.ts41
-rw-r--r--frontend/src/app/_elements/navbar/navbar.component.html3
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.ts39
-rw-r--r--frontend/src/app/_pages/home/home.component.html2
-rw-r--r--frontend/src/app/_pages/my-datasets/my-datasets.component.html6
-rw-r--r--frontend/src/app/_pages/my-datasets/my-datasets.component.ts11
-rw-r--r--frontend/src/app/_services/models.service.ts21
-rw-r--r--frontend/src/app/app-routing.module.ts20
-rw-r--r--frontend/src/app/app.component.spec.ts6
-rw-r--r--frontend/src/app/app.component.ts33
10 files changed, 124 insertions, 58 deletions
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index 8465c3d6..913592eb 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -19,7 +19,7 @@ export class DatasetLoadComponent {
slice: string = "";
csvRecords: any[] = [];
- files: any[] = [];
+ files: File[] = [];
rowsNumber: number = 0;
colsNumber: number = 0;
@@ -33,6 +33,7 @@ export class DatasetLoadComponent {
changeListener($event: any): void {
this.files = $event.srcElement.files;
+ console.log(this.files);
this.update();
}
@@ -41,25 +42,25 @@ export class DatasetLoadComponent {
if (this.files.length < 1)
return;
- this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter})
- .pipe().subscribe((result) => {
-
- console.log('Result', result);
- if (result.constructor === Array) {
- this.csvRecords = result;
- if (this.hasHeader)
- this.rowsNumber = this.csvRecords.length - 1;
- else
- this.rowsNumber = this.csvRecords.length;
- this.colsNumber = this.csvRecords[0].length;
-
- this.dataset.header = this.csvRecords[0];
-
- this.loaded.emit("loaded");
- }
- }, (error: NgxCSVParserError) => {
- console.log('Error', error);
- });
+ this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.delimiter == "razmak") ? " " : (this.delimiter == "") ? "," : this.delimiter })
+ .pipe().subscribe((result) => {
+
+ console.log('Result', result);
+ if (result.constructor === Array) {
+ this.csvRecords = result;
+ if (this.hasHeader)
+ this.rowsNumber = this.csvRecords.length - 1;
+ else
+ this.rowsNumber = this.csvRecords.length;
+ this.colsNumber = this.csvRecords[0].length;
+
+ this.dataset.header = this.csvRecords[0];
+
+ this.loaded.emit("loaded");
+ }
+ }, (error: NgxCSVParserError) => {
+ console.log('Error', error);
+ });
}
}
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..76a09782 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -35,23 +35,34 @@ export class AddModelComponent implements OnInit {
addModel() {
this.saveModel(false); //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..e9a5ee18 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,8 +14,24 @@ 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,
+ headers: this.authService.authHeader()
+ };
+
+ 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' });
+ return this.http.post(`${API_SETTINGS.apiURL}/model/add`, model, { headers: this.authService.authHeader() });
}
addDataset(dataset: Dataset) {
return this.http.post(`${API_SETTINGS.apiURL}/dataset/add`, dataset, { 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`);
+ }
+ });
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 01:59:13 +0000