aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/app/_data/Model.ts4
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.html42
-rw-r--r--frontend/src/app/_elements/dataset-load/dataset-load.component.ts52
-rw-r--r--frontend/src/app/_modals/login-modal/login-modal.component.ts17
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.css3
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.html35
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.ts61
-rw-r--r--frontend/src/app/_pages/home/home.component.html2
-rw-r--r--frontend/src/app/_services/auth-guard.service.ts2
-rw-r--r--frontend/src/app/_services/models.service.spec.ts16
-rw-r--r--frontend/src/app/_services/models.service.ts22
-rw-r--r--frontend/src/app/app.component.html2
-rw-r--r--frontend/src/styles.css8
13 files changed, 168 insertions, 98 deletions
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 @@
<div>
+ <div class="mb-4">
+ <label for="name" class="col-form-label">Naziv dataseta:</label>
+ <input type="text" class="form-control" name="name" placeholder="Naziv..."
+ [(ngModel)]="dataset.name">
+ </div>
+ <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+ <div>
+ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+ </div>
+
+
<div class="d-flex justify-content-center">
<input style="display: inline-block; width:350px;" list=delimiterOptions
placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control" [(ngModel)]="delimiter"
@@ -41,35 +52,6 @@
{{rowsNumber}} x {{colsNumber}}
</div>
- <div *ngIf="csvRecords.length > 0" class="mt-2">
- <div class="row">
- <div class="col d-flex justify-content-center">
- <h3>Izaberite ulazne kolone:</h3>
- <div id="divInputs" class="form-check">
- <br>
- <div *ngFor="let item of csvRecords[0]; let i = index">
- <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs" checked>
- <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs">&nbsp;
- <label class="form-check-label" for="cb_{{item}}">
- {{item}}
- </label>
- </div>
- </div>
- </div>
- <div class="col d-flex justify-content-left">
- <h3>Izaberite izlaznu kolonu:</h3>
- <div id="divOutputs" class="form-check">
- <br>
- <div *ngFor="let item of csvRecords[0]; let i = index">
- <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs" checked>
- <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs">&nbsp;
- <label class="form-check-label" for="rb_{{item}}">
- {{item}}
- </label>
- </div>
- </div>
- </div>
- </div>
- </div>
+
</div> \ 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..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,5 +1,6 @@
-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';
@Component({
selector: 'app-dataset-load',
@@ -8,6 +9,8 @@ import { NgxCsvParser, NgxCSVParserError } from 'ngx-csv-parser';
})
export class DatasetLoadComponent {
+ @Output() loaded = new EventEmitter<string>();
+
delimiter: string = "";
delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
@@ -20,10 +23,10 @@ export class DatasetLoadComponent {
rowsNumber: number = 0;
colsNumber: number = 0;
- checkedInputCols: Array<string> = [];
- checkedOutputCol: string = '';
+ dataset: Dataset;
constructor(private ngxCsvParser: NgxCsvParser) {
+ this.dataset = new Dataset();
}
@ViewChild('fileImportInput', { static: false }) fileImportInput: any;
@@ -49,49 +52,14 @@ export class DatasetLoadComponent {
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);
});
}
- getCheckedInputCols() : Array<string> {
- this.checkedInputCols = new Array<string>();
- let checkboxes = document.getElementsByName("cbs");
-
- for (let i = 0; i < checkboxes.length; i++) {
- let thatCb = <HTMLInputElement>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 = <HTMLInputElement>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/_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);
- (<HTMLSelectElement>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);
+ (<HTMLSelectElement>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.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..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,8 +30,39 @@
<div class="my-5 justify-content-center">
<h2>Izvor podataka:</h2>
- <app-dataset-load id="dataset"></app-dataset-load>
+ <app-dataset-load id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load>
</div>
+
+ <div *ngIf="datasetLoaded" class="mt-2">
+ <div *ngIf="datasetLoadComponent" class="row">
+ <div class="col d-flex justify-content-center">
+ <h3>Izaberite ulazne kolone:</h3>
+ <div id="divInputs" class="form-check">
+ <br>
+ <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
+ <input *ngIf="i == 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs" checked>
+ <input *ngIf="i != 0" class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" name="cbs">&nbsp;
+ <label class="form-check-label" for="cb_{{item}}">
+ {{item}}
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="col d-flex justify-content-left">
+ <h3>Izaberite izlaznu kolonu:</h3>
+ <div id="divOutputs" class="form-check">
+ <br>
+ <div *ngFor="let item of datasetLoadComponent.dataset.header; let i = index">
+ <input *ngIf="i == 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs" checked>
+ <input *ngIf="i != 0" class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbs">&nbsp;
+ <label class="form-check-label" for="rb_{{item}}">
+ {{item}}
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<h2>Parametri treniranja:</h2>
@@ -109,7 +140,7 @@
<div class="row mt-5">
<div class="col-2">
- <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label>
+ <label for="inputNeurons" class="col-form-label">Broj ulaznih neurona: </label> <!--UMESTO OVOGA IDE NASUMICAN REDOSLED? YES/NO-->
<input type="number" min="1" class="form-control" name="inputNeurons" [(ngModel)]="newModel.inputNeurons">
</div>
<div class="col-2">
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..c18ad324 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,10 @@ import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from '
})
export class AddModelComponent implements OnInit {
- newModel: Model
+ @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent;
+ datasetLoaded: boolean = false;
+
+ newModel: Model;
ANNType = ANNType;
Encoding = Encoding;
@@ -18,7 +24,7 @@ export class AddModelComponent implements OnInit {
Optimizer = Optimizer;
Object = Object;
- constructor() {
+ constructor(private models: ModelsService) {
this.newModel = new Model();
}
@@ -26,7 +32,54 @@ export class AddModelComponent implements OnInit {
}
addModel() {
- //TODO
+ if (this.datasetLoadComponent)
+ this.models.addDataset(this.datasetLoadComponent?.dataset);
+
+ 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 = <HTMLInputElement>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 = <HTMLInputElement>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/_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 @@
-<div class="d-flex flex-column align-items-center">
+<div class="d-flex flex-column align-items-center bg-light">
<img src="../../../assets/svg/logo.svg" class="bi me-2" width="256" height="256" role="img">
<div *ngIf="shared.loggedIn" class="d-flex flex-column align-items-center">
<h2 class="my-4">Započnite sa treniranjem!</h2>
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.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..f85ca44e
--- /dev/null
+++ b/frontend/src/app/_services/models.service.ts
@@ -0,0 +1,22 @@
+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';
+import Dataset from '../_data/Dataset';
+
+
+@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' });
+ }
+ addDataset(dataset: Dataset) {
+ return this.http.post(`${API_SETTINGS.apiURL}/model/uploadDataset`, dataset, { 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 @@
<app-navbar></app-navbar>
-<div class="mat-app-background container h-100">
+<div class="container h-100">
<router-outlet></router-outlet>
</div> \ 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
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-21 05:23:37 +0000