diff options
Diffstat (limited to 'frontend/src/app/_pages')
5 files changed, 85 insertions, 66 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index e807dd06..17a6539d 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -42,7 +42,7 @@ <mat-step [completed]="this.step4"> <ng-template matStepLabel> <span *ngIf="!this.step3" class="align-middle"><mat-icon>lock</mat-icon></span> - <span class="label text-overflow">Pregled rezultata<br> treniranja</span> + <span class="label text-overflow align-middle">Pregled rezultata<br> treniranja</span> </ng-template> <p class="text-left text-overflow">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p> </mat-step> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 6c8e96b3..398321f2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -21,7 +21,7 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) -export class ExperimentComponent implements AfterViewInit, OnInit { +export class ExperimentComponent implements AfterViewInit { @ViewChild(MatStepper) stepper!: MatStepper; @ViewChild('stepsContainer') stepsContainer!: ElementRef; @@ -44,46 +44,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.experiment = new Experiment("exp1"); } - ngOnInit(): void { - this.route.queryParams.subscribe(params => { - - let experimentId = this.route.snapshot.paramMap.get("id"); - let predictorId = this.route.snapshot.paramMap.get("predictorId"); - - if (predictorId != null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju - - //this.predictorsService.getPredictor(predictorId!).subscribe((response) => { - let predictor = response; - //this.modelsService.getModelById(predictor.modelId).subscribe((response) => { - this.modelsService.getModelById("62853d70696d62ceeb8db7cd").subscribe((response) => { - //imamo model - this.folderModel.formModel.newModel = response; - //this.metricView.update(predictor.metrics); - }); - //}); - }); - }); - } - else if (predictorId == null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); - }); - }); - } - - }); - } - /*updateExperiment(){ }*/ @@ -131,11 +91,57 @@ export class ExperimentComponent implements AfterViewInit, OnInit { stat = stat.replace(/'/g, '"'); //console.log('JSON', this.trainingResult); this.history.push(JSON.parse(stat)); - this.metricView.update(this.history); + this.metricView.update(this.history,this.modelToTrain.epochs); } }); } + + this.route.queryParams.subscribe(params => { + + let experimentId = this.route.snapshot.paramMap.get("id"); + let predictorId = this.route.snapshot.paramMap.get("predictorId"); + console.log("paramexp: ", experimentId, ", parampredictor: ", predictorId); + if (predictorId != null) { + this.predictorsService.getPredictor(predictorId!).subscribe((response) => { + let predictor = response; + //console.log("predictor: ", predictor); + this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => { + this.experiment = response; + //console.log("experiment: ", this.experiment); + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + //console.log("dataset: ", this.dataset); + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju + + this.modelsService.getModelById(predictor.modelId).subscribe((response) => { + let model = response; + //console.log("model: ", model); + this.folderModel.formModel.newModel = model; + this.step3 = true; + let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1); + //console.log("metric view1:", this.metricView); + setTimeout(() => { + this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse); + }) + }); + }); + }); + }); + } + else if (experimentId != null) { + this.experimentsService.getExperimentById(experimentId).subscribe((response) => { + this.experiment = response; + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); + }); + }); + } + + }); } history: any[] = []; diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css index bbd4c9ba..48b1304b 100644 --- a/frontend/src/app/_pages/profile/profile.component.css +++ b/frontend/src/app/_pages/profile/profile.component.css @@ -22,4 +22,9 @@ mat-form-field { .selectedPicture { background-color: var(--ns-accent); +} + +.mat-raised-button { + width: 180px !important; + height: 50px !important; }
\ No newline at end of file diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html index 8d655513..39f33255 100644 --- a/frontend/src/app/_pages/profile/profile.component.html +++ b/frontend/src/app/_pages/profile/profile.component.html @@ -27,11 +27,11 @@ <div class="row gx-3 mb-3"> <!-- Form Group (password)--> <div class="col-md-6"> - <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small> <mat-form-field appearance="fill"> <mat-label>Važeća lozinka</mat-label> <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass"> </mat-form-field> + <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small> <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small> </div> <!-- Form Group (new password)--> @@ -50,7 +50,7 @@ <div class="col-md-6"> <div class="col text-center"> <!-- Save changes button--> - <button mat-raised-button color="primary" (click)="savePasswordChanges()">Promeni lozinku</button> + <button mat-raised-button color="basic" (click)="savePasswordChanges()">Promeni lozinku</button> </div> </div> <!-- Form Group (new password again)--> @@ -122,7 +122,7 @@ <div class="container"> <div class="card-group"> <!--bootstrap card with 3 horizontal images--> - <div class="row overflow-auto" style="max-height: 200px;"> + <div class="row overflow-auto" style="max-height: 255px;"> <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}"> <img src="{{picture.path}}"> </div> @@ -134,7 +134,7 @@ <div class="row mt-5"> <div class="col text-center"> <!-- Save changes button--> - <button mat-raised-button color="primary" (click)="saveInfoChanges()">Sačuvaj izmene</button> + <button mat-raised-button color="basic" (click)="saveInfoChanges()">Sačuvaj izmene</button> </div> </div> </form> diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts index fdcd347c..aed8e40c 100644 --- a/frontend/src/app/_pages/profile/profile.component.ts +++ b/frontend/src/app/_pages/profile/profile.component.ts @@ -7,7 +7,8 @@ import { PICTURES } from 'src/app/_data/ProfilePictures'; import { Picture } from 'src/app/_data/ProfilePictures'; import shared from '../../Shared'; import { share } from 'rxjs'; - +import { MatDialog } from '@angular/material/dialog'; +import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; @Component({ selector: 'app-profile', @@ -43,13 +44,13 @@ export class ProfileComponent implements OnInit { wrongNewPass2Bool: boolean = false; pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/; - pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/; + pattUsername: RegExp = /^[a-zA-Z0-9]{4,18}$/; pattTwoSpaces: RegExp = / /; pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/; pattPassword: RegExp = /.{6,30}$/; - constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router) { } + constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router, public dialog?: MatDialog) { } ngOnInit(): void { this.userInfoService.getUserInfo().subscribe((response) => { @@ -95,19 +96,24 @@ export class ProfileComponent implements OnInit { if (this.user.username != editedUser.username) { //promenio username, ide logout this.user = editedUser; this.resetInfo(); - shared.openDialog("Obaveštenje", "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete."); - this.authService.logOut(); - this.router.navigate(['']); - return; + const dialogRef = this.dialog?.open(AlertDialogComponent, { + width: '350px', + data: { title: "Obaveštenje", message: "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete." } + }); + dialogRef?.afterClosed().subscribe(res => { + this.authService.logOut(); + this.router.navigate(['']); + return; + }); + } + else { + shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni."); + this.user = editedUser; + this.resetInfo(); } - shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni."); - this.user = editedUser; - this.resetInfo(); }, (error: any) =>{ if (error.error == "Username already exists!") { shared.openDialog("Obaveštenje", "Ukucano korisničko ime je već zauzeto! Izaberite neko drugo."); - //(<HTMLSelectElement>document.getElementById("inputUsername")).focus(); - //poruka obavestenja ispod inputa this.resetInfo(); } }); @@ -122,12 +128,10 @@ export class ProfileComponent implements OnInit { if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku return; - //console.log("zeli da promeni lozinku"); if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku this.wrongNewPassBool = true; this.resetNewPassInputs(); - //console.log("Netacno ponovljena lozinka"); return; } @@ -135,19 +139,23 @@ export class ProfileComponent implements OnInit { this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => { //console.log("PROMENIO LOZINKU"); this.resetNewPassInputs(); - shared.openDialog("Obaveštenje", "Nakon promene lozinke, moraćete ponovo da se ulogujete."); - this.authService.logOut(); - this.router.navigate(['']); + const dialogRef = this.dialog?.open(AlertDialogComponent, { + width: '350px', + data: { title: "Obaveštenje", message: "Nakon promene lozinke, moraćete ponovo da se ulogujete." } + }); + dialogRef?.afterClosed().subscribe(res => { + this.authService.logOut(); + this.router.navigate(['']); + return; + }); }, (error: any) => { if (error.error == 'Wrong old password!') { this.wrongPassBool = true; - //(<HTMLSelectElement>document.getElementById("inputPassword")).focus(); return; } else if (error.error == 'Identical password!') { shared.openDialog("Obaveštenje", "Stara i nova lozinka su identične."); this.resetNewPassInputs(); - //(<HTMLSelectElement>document.getElementById("inputNewPassword")).focus(); return; } }); |