diff options
Diffstat (limited to 'frontend/src/app/_pages')
12 files changed, 193 insertions, 187 deletions
diff --git a/frontend/src/app/_pages/archive/archive.component.css b/frontend/src/app/_pages/archive/archive.component.css index e69de29b..3a8145dc 100644 --- a/frontend/src/app/_pages/archive/archive.component.css +++ b/frontend/src/app/_pages/archive/archive.component.css @@ -0,0 +1,3 @@ +.pro-center{ + width: 80%; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index f9cce56b..0c5fa8aa 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1,5 +1,5 @@ <div class="d-flex flex-column align-items-center my-5"> - <app-folder [archive]="true" [startingTab]="TabType.MyExperiments"></app-folder> + <app-folder [archive]="true" [startingTab]="TabType.MyExperiments" class="pro-center"></app-folder> <!--<div class="my-5" style="height: fit-content;"> <app-playlist [datasets]="publicDatasets"></app-playlist> diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 4c063f87..59e004e9 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -36,32 +36,42 @@ mat-stepper { display: flex; flex-direction: column; width: 100%; + height: 100%; overflow-y: auto; } .step-content { position: relative; - width: 100%; + width: 98%; + min-height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; + /*margin-bottom: 100px;*/ } .step-content-inside { width: 98%; height: 98%; - overflow-y: auto; } -.ekspName{ + +.ekspName { font-weight: bold; font-size: large; } - -.addedElement{ - color:var(--ns-accent); +.addedElement { + color: var(--ns-accent); } + .text-overflow { overflow-wrap: break-word; + width: 170px; + display: inline-block; + text-align: left; } + +.text-overflow-experiment-name { + overflow-wrap: break-word; +}
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index a2ede838..17a6539d 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,47 +1,52 @@ <div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;"> <div class="d-flex flex-colum align-items-center sidenav"> <div> - <div class="ekspName " style="width: 250px;"> - <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;"> - Novi Eksperiment - </div> - <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;"> - {{experiment.name}} - </div> + <div class="ekspName " style="width: 250px;"> + <div class="text-overflow-experiment-name" *ngIf="experiment.name=='exp1'" style="width: 250px;"> + Novi Eksperiment + </div> + <div class="text-overflow-experiment-name" *ngIf="experiment.name!='exp1'" style="width: 250px;"> + {{experiment.name}} + </div> - </div> - <mat-stepper orientation="vertical" (selectionChange)="changePage($event)"> - <mat-step> - <!--editable="false"--> - <ng-template matStepLabel> - <span class="label" *ngIf="dataset==undefined">Izvor podataka</span> - <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span> - </ng-template> - <ng-template matStepContent> - <p class="text-left">Izaberite vas izvor podataka</p> - </ng-template> - </mat-step> - <mat-step> - <ng-template matStepLabel> - <span class="label addedElement" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span> - <span class="label" *ngIf="experiment.name=='exp1'">Odabir kolona</span> - </ng-template> - <ng-template matStepContent> - <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p> - </ng-template> - </mat-step> - <mat-step> - <ng-template matStepLabel> - <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span> - <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span> - </ng-template> - <p class="text-left">Odaberite parametre i trenirajte model</p> - </mat-step> - <mat-step> - <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template> - <p class="text-left">Pregledajte tok treniranja i grafički prikaz rezultata</p> - </mat-step> - </mat-stepper> + </div> + <mat-stepper orientation="vertical" (selectionChange)="changePage($event)" [linear]="true"> + <mat-step [completed]="this.step1"> + <!--editable="false"--> + <ng-template matStepLabel> + <span class="label text-overflow" *ngIf="dataset==undefined">Izvor podataka </span> + <span class="label addedElement text-overflow" *ngIf="dataset!=undefined">{{dataset.name}}</span> + </ng-template> + <ng-template matStepContent> + <p class="text-left text-overflow">Izaberite izvor podataka</p> + </ng-template> + </mat-step> + <mat-step [completed]="experiment._id!=''"> + <ng-template matStepLabel> + <span class="label addedElement text-overflow" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span> + <span *ngIf="!this.step1" class="align-middle"><mat-icon>lock</mat-icon></span> + <span class="label text-overflow" *ngIf="experiment._id==''">Odabir kolona </span> + </ng-template> + <ng-template matStepContent> + <p class="text-left text-overflow">Pripremite podatke i izaberite izlazne kolone</p> + </ng-template> + </mat-step> + <mat-step [completed]="this.step3"> + <ng-template matStepLabel> + <span *ngIf="experiment._id==''" class="align-middle"><mat-icon>lock</mat-icon></span> + <span class="label addedElement text-overflow" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span> + <span class="label text-overflow" *ngIf="modelToTrain==undefined">Treniranje</span> + </ng-template> + <p class="text-left text-overflow">Odaberite parametre i trenirajte model</p> + </mat-step> + <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 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> + </mat-stepper> </div> </div> <div #stepsContainer class="steps-container"> @@ -50,20 +55,20 @@ <app-folder #folderDataset [type]="FolderType.Dataset" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets]" (okPressed)="goToPage(1)" (selectedFileChanged)="setDataset($event)"></app-folder> </div> </div> - <div #steps id="step_2" class="step-content"> + <div #steps id="step_2" class="step-content" *ngIf="step1"> <div class="step-content-inside"> <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" (experimentChanged)="experimentChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table> </div> </div> - <div #steps id="step_3" class="step-content"> + <div #steps id="step_3" class="step-content" *ngIf="step2"> <div class="step-content-inside"> <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event)"></app-folder> </div> </div> - <div #steps id="step_4" class="step-content"> + <div #steps id="step_4" class="step-content" *ngIf="step3"> <div class="step-content-inside"> <app-metric-view #metricView></app-metric-view> </div> </div> </div> -</div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index abf4b697..398321f2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren, Input } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren, Input, OnInit } from '@angular/core'; import { StepperSelectionEvent } from '@angular/cdk/stepper'; import { MatStepper } from '@angular/material/stepper'; import Shared from 'src/app/Shared'; @@ -12,6 +12,9 @@ import Dataset from 'src/app/_data/Dataset'; import { ColumnTableComponent } from 'src/app/_elements/column-table/column-table.component'; import { SignalRService } from 'src/app/_services/signal-r.service'; import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.component'; +import { ActivatedRoute, Router } from '@angular/router'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-experiment', @@ -32,7 +35,12 @@ export class ExperimentComponent implements AfterViewInit { @ViewChild("folderModel") folderModel!: FolderComponent; @ViewChild("metricView") metricView!: MetricViewComponent; - constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private signalRService: SignalRService) { + step1: boolean = false; + step2: boolean = false; + step3: boolean = false; + step4: boolean = false; + + constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private route: ActivatedRoute) { this.experiment = new Experiment("exp1"); } @@ -49,6 +57,7 @@ export class ExperimentComponent implements AfterViewInit { Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže'); } else { this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") }); + this.step4 = true; } } @@ -82,11 +91,57 @@ export class ExperimentComponent implements AfterViewInit { 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[] = []; @@ -148,16 +203,27 @@ export class ExperimentComponent implements AfterViewInit { } experimentChangedEvent() { - this.folderModel.updateExperiment(); + this.step2 = true; + setTimeout(() => { + this.folderModel.updateExperiment(); + }); } - setDataset(dataset: FolderFile) { + setDataset(dataset: FolderFile | null) { + if (dataset == null) { + this.columnTable.loaded = false; + this.dataset = undefined; + this.experiment.datasetId = ''; + return; + } const d = <Dataset>dataset; this.experiment.datasetId = d._id; this.dataset = d; - this.columnTable.loadDataset(this.dataset); - + this.step1 = true; + setTimeout(() => { + this.columnTable.loadDataset(d); + }); } modelToTrain?: Model; @@ -165,5 +231,6 @@ export class ExperimentComponent implements AfterViewInit { setModel(model: FolderFile) { const m = <Model>model; this.modelToTrain = m; + this.step3 = true; } } diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css index 906f5728..51f22320 100644 --- a/frontend/src/app/_pages/home/home.component.css +++ b/frontend/src/app/_pages/home/home.component.css @@ -11,10 +11,20 @@ h1 { font-weight: 900 !important; margin-top: 1rem; margin-bottom: 2.5rem; + font-family: /*'Garamond',*/ + 'Courier New', Courier, monospace; } .card { margin: 2.5rem !important; padding: 1.5rem; width: 26rem !important; +} + +a { + text-decoration: none; +} + +.subtitle-class { + letter-spacing: 0.2rem; }
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 2825b3bf..534854b6 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -11,9 +11,9 @@ <div class="card shadowed bg-light text-light col-3 m-3" style="width: 18rem;"> <div class="card-body"> <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">model_training</mat-icon> - <h3 class="card-title my-2">Experimentiši</h3> + <h2 class="card-title my-2 subtitle-class">Eksperimentiši</h2> <p class="card-text"> - U tri koraka <a class="stretched-link" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd. + U tri koraka <a class="stretched-link text-light" routerLink="experiment">napravite novu neuronsku mrežu</a>. Koristite postojeće izvore podataka, modele, itd. </p> </div> </div> @@ -21,9 +21,9 @@ <div class="card-body"> <mat-icon width="48px" height="48px" style="font-size: 48px; margin-left: 50%; transform: translateX(-100%);">storage </mat-icon> - <h3 class="card-title my-2">Arhiva</h3> + <h2 class="card-title my-2 subtitle-class">Kolekcije</h2> <p class="card-text"> - <a class="stretched-link" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima, i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici. + <a class="stretched-link text-light" routerLink="archive">Upravljajte</a> izvorima podataka, eksperimentima, modelima i rezultatima treniranja. Pogledajte podatke koje su podelili drugi korisnici. </p> </div> </div> diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html deleted file mode 100644 index 9b281239..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ /dev/null @@ -1,43 +0,0 @@ -<div id="header"> - <h1>Moji modeli</h1> -</div> -<div id="wrapper"> - <div id="container" class="container p-5" style="background-color: rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let model of myModels"> - <app-item-model [model]="model"></app-item-model> - - <div class="panel-footer row"><!-- panel-footer --> - <div class="col-xs-6 text-center"> - <div> - <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="useThisModel(model)" mat-raised-button color="primary">Koristi - <span class="glyphicon glyphicon-search"></span> - </button> - <button (click)="deleteThisModel(model)" mat-raised-button color="warn" style="min-width: 7rem;float: right" ><mat-icon>delete</mat-icon></button> - - - </div> - </div> - </div><!-- end panel-footer --> - - - - </div> - </div> - <div class="text-center" *ngIf="this.myModels.length == 0" > - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - - - </div> diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts deleted file mode 100644 index d379fa69..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import shared from 'src/app/Shared'; -import Model from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; - -@Component({ - selector: 'app-my-models', - templateUrl: './my-models.component.html', - styleUrls: ['./my-models.component.css'] -}) -export class MyModelsComponent implements OnInit { - myModels: Model[] = []; - //myModel: Model; - - constructor(private modelsS : ModelsService, private router : Router) { - - - - } - - ngOnInit(): void { - this.getAllMyModels(); - - } -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisModel(model: Model): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete model?',() => { - this.modelsS.deleteModel(model).subscribe((response) => { - this.getAllMyModels(); - }, (error) =>{ - if (error.error == "Model with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela."); - } - }); - }); -} - - -useThisModel(model: Model): void{ - - this.router.navigate(['/training']) - -} - getAllMyModels(): void{ - this.modelsS.getMyModels().subscribe(m => { - this.myModels = m; - }); - } - -} 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; } }); |