From ca592566e80a7a83fff85e0b5a11bcca06f7e017 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 15 Mar 2022 21:27:46 +0100 Subject: Uredjena stranica add-model i komponenta dataset-load. --- .../dataset-load/dataset-load.component.css | 6 +++ .../dataset-load/dataset-load.component.html | 57 +++++++++++++++++----- .../dataset-load/dataset-load.component.ts | 43 ++++++++++++++++ 3 files changed, 94 insertions(+), 12 deletions(-) (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css index e69de29b..05819702 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css @@ -0,0 +1,6 @@ +#divInputs { + margin-left: 20px; +} +#divOutputs { + margin-left: 20px; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index c89add43..16830e11 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,19 +1,21 @@
- + - - - -      -   - -

+ + +      + +      - - - + + + +
@@ -26,7 +28,7 @@
{{item}}
- +
@@ -39,4 +41,35 @@ {{rowsNumber}} x {{colsNumber}} +
+
+
+

Izaberite ulazne kolone:

+
+
+
+ +   + +
+
+
+
+

Izaberite izlaznu kolonu:

+
+
+
+ +   + +
+
+
+
+
+ \ No newline at end of file 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 cde3e8b1..c772dc35 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -20,6 +20,9 @@ export class DatasetLoadComponent { rowsNumber: number = 0; colsNumber: number = 0; + checkedInputCols: Array = []; + checkedOutputCol: string = ''; + constructor(private ngxCsvParser: NgxCsvParser) { } @@ -51,4 +54,44 @@ export class DatasetLoadComponent { console.log('Error', error); }); } + + getCheckedInputCols() : Array { + this.checkedInputCols = new Array(); + let checkboxes = document.getElementsByName("cbs"); + + for (let i = 0; i < checkboxes.length; i++) { + let thatCb = checkboxes[i]; + if (thatCb.checked) + this.checkedInputCols.push(thatCb.value); + } + //console.log(this.checkedInputCols); + return this.checkedInputCols; + } + getCheckedOutputCol() : string { + this.checkedOutputCol = ''; + let radiobuttons = document.getElementsByName("rbs"); + + for (let i = 0; i < radiobuttons.length; i++) { + let thatRb = radiobuttons[i]; + if (thatRb.checked) { + this.checkedOutputCol = thatRb.value; + break; + } + } + //console.log(this.checkedOutputCol); + return this.checkedOutputCol; + } + validationInputsOutput() { + if (this.checkedInputCols.length == 0) { + alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.") + return; + } + for (let i = 0; i < this.checkedInputCols.length; i++) { + if (this.checkedInputCols[i] == this.checkedOutputCol) { + let colName = this.checkedOutputCol; + alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); + return; + } + } + } } -- cgit v1.2.3 From 69f60f492f2d729e74e888f6f43d44e71c814ff4 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 15 Mar 2022 22:45:57 +0100 Subject: Preuredjivanje funkcionalnosti add-model komponente i dataset-load komponente. --- frontend/src/app/_data/Model.ts | 4 +- .../dataset-load/dataset-load.component.html | 42 +++++----------- .../dataset-load/dataset-load.component.ts | 45 +++-------------- .../app/_pages/add-model/add-model.component.css | 3 -- .../app/_pages/add-model/add-model.component.html | 33 ++++++++++++- .../app/_pages/add-model/add-model.component.ts | 57 ++++++++++++++++++++-- frontend/src/app/_services/models.service.spec.ts | 16 ++++++ frontend/src/app/_services/models.service.ts | 18 +++++++ frontend/src/app/app.component.html | 2 +- frontend/src/styles.css | 8 ++- 10 files changed, 143 insertions(+), 85 deletions(-) create mode 100644 frontend/src/app/_services/models.service.spec.ts create mode 100644 frontend/src/app/_services/models.service.ts (limited to 'frontend/src/app/_elements') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 1a120ca7..43342fb0 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -7,8 +7,8 @@ export default class Model { public datasetId?: number, // Test set settings - public inputColumns: number[] = [0], - public columnToPredict: number = 1, + public inputColumns: string[] = [], + public columnToPredict: string = '', public randomOrder: boolean = true, public randomTestSet: boolean = true, public randomTestSetDistribution: number = 0.10, //0.1-0.9 (10% - 90%) diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 16830e11..2a611a96 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,5 +1,16 @@
+
+ + +
+ +
+ +
+ +
-
-
-
-

Izaberite ulazne kolone:

-
-
-
- -   - -
-
-
-
-

Izaberite izlaznu kolonu:

-
-
-
- -   - -
-
-
-
-
+
\ No newline at end of file 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 c772dc35..d9d045ce 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -1,5 +1,6 @@ import { Component, ViewChild } from '@angular/core'; import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; +import Dataset from 'src/app/_data/Dataset'; @Component({ selector: 'app-dataset-load', @@ -23,7 +24,10 @@ export class DatasetLoadComponent { checkedInputCols: Array = []; checkedOutputCol: string = ''; + dataset: Dataset; + constructor(private ngxCsvParser: NgxCsvParser) { + this.dataset = new Dataset(); } @ViewChild('fileImportInput', { static: false }) fileImportInput: any; @@ -49,49 +53,12 @@ export class DatasetLoadComponent { else this.rowsNumber = this.csvRecords.length; this.colsNumber = this.csvRecords[0].length; + + this.dataset.header = this.csvRecords[0]; } }, (error: NgxCSVParserError) => { console.log('Error', error); }); } - getCheckedInputCols() : Array { - this.checkedInputCols = new Array(); - let checkboxes = document.getElementsByName("cbs"); - - for (let i = 0; i < checkboxes.length; i++) { - let thatCb = checkboxes[i]; - if (thatCb.checked) - this.checkedInputCols.push(thatCb.value); - } - //console.log(this.checkedInputCols); - return this.checkedInputCols; - } - getCheckedOutputCol() : string { - this.checkedOutputCol = ''; - let radiobuttons = document.getElementsByName("rbs"); - - for (let i = 0; i < radiobuttons.length; i++) { - let thatRb = radiobuttons[i]; - if (thatRb.checked) { - this.checkedOutputCol = thatRb.value; - break; - } - } - //console.log(this.checkedOutputCol); - return this.checkedOutputCol; - } - validationInputsOutput() { - if (this.checkedInputCols.length == 0) { - alert("Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.") - return; - } - for (let i = 0; i < this.checkedInputCols.length; i++) { - if (this.checkedInputCols[i] == this.checkedOutputCol) { - let colName = this.checkedOutputCol; - alert("Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor."); - return; - } - } - } } diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css index 004b9cac..5184733d 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.css +++ b/frontend/src/app/_pages/add-model/add-model.component.css @@ -9,9 +9,6 @@ color: white; } -#wrapper { - background-image: url('/assets/images/add_model_background.jpg'); -} #container { border-radius: 8px; } \ No newline at end of file diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 19d69148..5c4411b9 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -32,6 +32,37 @@

Izvor podataka:

+ +
+
+
+

Izaberite ulazne kolone:

+
+
+
+ +   + +
+
+
+
+

Izaberite izlaznu kolonu:

+
+
+
+ +   + +
+
+
+
+

Parametri treniranja:

@@ -109,7 +140,7 @@
- +
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 3cb47d61..3c8c32c6 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,6 +1,9 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import Model from 'src/app/_data/Model'; import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; +import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; +import { ModelsService } from 'src/app/_services/models.service'; + @Component({ selector: 'app-add-model', @@ -9,7 +12,9 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from ' }) export class AddModelComponent implements OnInit { - newModel: Model + @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; + + newModel: Model; ANNType = ANNType; Encoding = Encoding; @@ -18,7 +23,7 @@ export class AddModelComponent implements OnInit { Optimizer = Optimizer; Object = Object; - constructor() { + constructor(private models: ModelsService) { this.newModel = new Model(); } @@ -26,7 +31,51 @@ export class AddModelComponent implements OnInit { } addModel() { - //TODO + this.getCheckedInputCols(); + this.getCheckedOutputCol(); + if (this.validationInputsOutput()) + this.models.addModel(this.newModel).subscribe((response) => { + console.log(response); + }); + } + + getCheckedInputCols() { + this.newModel.inputColumns = []; + let checkboxes = document.getElementsByName("cbs"); + + for (let i = 0; i < checkboxes.length; i++) { + let thatCb = checkboxes[i]; + if (thatCb.checked) + this.newModel.inputColumns.push(thatCb.value); + } + //console.log(this.checkedInputCols); + } + getCheckedOutputCol() { + this.newModel.columnToPredict = ''; + let radiobuttons = document.getElementsByName("rbs"); + + for (let i = 0; i < radiobuttons.length; i++) { + let thatRb = radiobuttons[i]; + if (thatRb.checked) { + this.newModel.columnToPredict = thatRb.value; + break; + } + } + //console.log(this.checkedOutputCol); + } + 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++) { + 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."); + return false; + } + } + return true; } } diff --git a/frontend/src/app/_services/models.service.spec.ts b/frontend/src/app/_services/models.service.spec.ts new file mode 100644 index 00000000..b5b25752 --- /dev/null +++ b/frontend/src/app/_services/models.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ModelsService } from './models.service'; + +describe('ModelsService', () => { + let service: ModelsService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ModelsService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts new file mode 100644 index 00000000..bd91a811 --- /dev/null +++ b/frontend/src/app/_services/models.service.ts @@ -0,0 +1,18 @@ +import { HttpClient } 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'; + + +@Injectable({ + providedIn: 'root' +}) +export class ModelsService { + + constructor(private http: HttpClient, private authService: AuthService) { } + + addModel(model: Model) { + return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' }); + } +} diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 7f2d4225..35e5adb1 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,4 +1,4 @@ -
+
\ No newline at end of file diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b671a2a7..d37ab6f1 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -1,5 +1,3 @@ -/* You can add global styles to this file, and also import other style files - -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } -*/ +body { + background-image: url('/assets/images/add_model_background.jpg'); +} \ No newline at end of file -- cgit v1.2.3 From f0e05dade823673fbf6568f50f64b93859000f32 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 16 Mar 2022 00:06:21 +0100 Subject: Promenjena veza add-model strane i dataset-load komponente. Dodat models.service - slanje dataseta i modela backendu. --- .../_elements/dataset-load/dataset-load.component.ts | 9 +++++---- .../app/_modals/login-modal/login-modal.component.ts | 17 ++++++++++------- .../src/app/_pages/add-model/add-model.component.html | 6 +++--- .../src/app/_pages/add-model/add-model.component.ts | 4 ++++ frontend/src/app/_pages/home/home.component.html | 2 +- frontend/src/app/_services/auth-guard.service.ts | 2 +- frontend/src/app/_services/models.service.ts | 4 ++++ 7 files changed, 28 insertions(+), 16 deletions(-) (limited to 'frontend/src/app/_elements') 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 d9d045ce..8465c3d6 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -1,4 +1,4 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser'; import Dataset from 'src/app/_data/Dataset'; @@ -9,6 +9,8 @@ import Dataset from 'src/app/_data/Dataset'; }) export class DatasetLoadComponent { + @Output() loaded = new EventEmitter(); + delimiter: string = ""; delimiterOptions: Array = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," @@ -21,9 +23,6 @@ export class DatasetLoadComponent { rowsNumber: number = 0; colsNumber: number = 0; - checkedInputCols: Array = []; - checkedOutputCol: string = ''; - dataset: Dataset; constructor(private ngxCsvParser: NgxCsvParser) { @@ -55,6 +54,8 @@ export class DatasetLoadComponent { 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/_modals/login-modal/login-modal.component.ts b/frontend/src/app/_modals/login-modal/login-modal.component.ts index 87686f10..d17d7017 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -25,13 +25,16 @@ export class LoginModalComponent implements OnInit { } doLogin() { - this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi - console.log(response); - this.authService.authenticate(response); - (document.getElementById('closeButton')).click(); - }, error => { - console.warn(error); //NETACNI PODACI - }); + if (this.username.length > 0 && this.password.length > 0) { + this.authService.login(this.username, this.password).subscribe((response) => { //ako nisu ok podaci, ne ide hide nego mora opet da ukucava!!!!podesi + console.log(response); + this.authService.authenticate(response); + (document.getElementById('closeButton')).click(); + }, error => { + console.warn(error); //NETACNI PODACI + }); + } + } resetData() { this.username = ''; diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 5c4411b9..f5270127 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -30,11 +30,11 @@

Izvor podataka:

- +
-
-
+
+

Izaberite ulazne kolone:

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 3c8c32c6..c18ad324 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -13,6 +13,7 @@ import { ModelsService } from 'src/app/_services/models.service'; export class AddModelComponent implements OnInit { @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; + datasetLoaded: boolean = false; newModel: Model; @@ -31,6 +32,9 @@ export class AddModelComponent implements OnInit { } addModel() { + if (this.datasetLoadComponent) + this.models.addDataset(this.datasetLoadComponent?.dataset); + this.getCheckedInputCols(); this.getCheckedOutputCol(); if (this.validationInputsOutput()) diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 374cb324..7245f602 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,4 +1,4 @@ -
+

Započnite sa treniranjem!

diff --git a/frontend/src/app/_services/auth-guard.service.ts b/frontend/src/app/_services/auth-guard.service.ts index b6d3678d..057996e0 100644 --- a/frontend/src/app/_services/auth-guard.service.ts +++ b/frontend/src/app/_services/auth-guard.service.ts @@ -15,7 +15,7 @@ export class AuthGuardService implements CanActivate { if (this.auth.isAuthenticated()) { return true; } - this.router.navigate(['login']); + this.router.navigate(['']); return false; } } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index bd91a811..f85ca44e 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -3,6 +3,7 @@ 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'; @Injectable({ @@ -15,4 +16,7 @@ export class ModelsService { addModel(model: Model) { return this.http.post(`${API_SETTINGS.apiURL}/model/sendModel`, model, { headers: this.authService.authHeader(), responseType: 'text' }); } + addDataset(dataset: Dataset) { + return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { headers: this.authService.authHeader(), responseType: 'text' }); + } } -- cgit v1.2.3
{{col}}