diff options
Diffstat (limited to 'frontend/src/app/_modals')
13 files changed, 153 insertions, 48 deletions
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css index e69de29b..e99a1e1e 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css @@ -0,0 +1,8 @@ +#btnYes { + background-color: var(--offwhite); + color: var(--ns-bg-dark-100); +} + +#btnNo { + color: gray; +}
\ No newline at end of file diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html index 7ba286cb..08c1f26b 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html @@ -1,16 +1,17 @@ -<h1 mat-dialog-title>Enkodiranje svih kolona</h1> -<div mat-dialog-content> - <p>Odaberite tip enkodinga za sve kolone zajedno:</p> - <mat-form-field> - <mat-select matNativeControl [(value)]="selectedEncodingType"> - <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> - </mat-form-field> - <p>Da li ste sigurni u izbor?</p> +<h2 mat-dialog-title class="text-center">Enkodiranje svih kolona</h2> +<div mat-dialog-content class="mt-5 mb-4"> + <p>Sve izabrane kolone biće enkodirane metodom:</p> + <form (keydown)="withEnterKey($event)"> + <mat-form-field> + <mat-select matNativeControl [(value)]="selectedEncodingType" cdkFocusInitial> + <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </form> </div> -<div mat-dialog-actions> - <button mat-button [mat-dialog-close]="selectedEncodingType" cdkFocusInitial>Da</button> - <button mat-button (click)="onNoClick()">Odustani</button> +<div mat-dialog-actions class="justify-content-center"> + <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Potvrdi</button> + <button id="btnNo" mat-stroked-button (click)="onNoClick()">Odustani</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts index 3b7560bf..9c45d7b6 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; -import { Encoding } from 'src/app/_data/Experiment'; - +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { ColumnType, Encoding } from 'src/app/_data/Experiment'; +import Experiment from 'src/app/_data/Experiment'; +import { ExperimentsService } from 'src/app/_services/experiments.service'; +import { Inject} from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; @Component({ selector: 'app-encoding-dialog', @@ -13,6 +16,7 @@ export class EncodingDialogComponent implements OnInit { selectedEncodingType?: Encoding; Encoding = Encoding; Object = Object; + categoricalColumnExists: boolean = true; constructor(public dialogRef: MatDialogRef<EncodingDialogComponent>) { @@ -20,9 +24,19 @@ export class EncodingDialogComponent implements OnInit { } ngOnInit(): void { + } onNoClick() { this.dialogRef.close(); } -} + + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onYesClick(); + } + + onYesClick() { + this.dialogRef.close(this.selectedEncodingType); + } +} diff --git a/frontend/src/app/_modals/login-modal/login-modal.component.html b/frontend/src/app/_modals/login-modal/login-modal.component.html index cea6bf39..79e11db8 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.html +++ b/frontend/src/app/_modals/login-modal/login-modal.component.html @@ -6,12 +6,12 @@ <mat-icon>close</mat-icon> </button> <h1 class="login-heading mt-5 mb-5">Prijava</h1> - <form> + <form (keydown)="doLoginWithEnterKey($event)"> <!-- Korisnicko ime --> <div class="mb-3"> <mat-form-field appearance="fill"> <mat-label>Korisničko ime</mat-label> - <input type="text" matInput [(ngModel)]="username" name="username" id="username"> + <input type="text" matInput [(ngModel)]="username" name="username" id="username" #usernameInput autofocus="true"> <mat-icon matSuffix></mat-icon> </mat-form-field> </div> 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 ccd78509..33c17c31 100644 --- a/frontend/src/app/_modals/login-modal/login-modal.component.ts +++ b/frontend/src/app/_modals/login-modal/login-modal.component.ts @@ -5,15 +5,17 @@ import { AuthService } from 'src/app/_services/auth.service'; import { UserInfoService } from 'src/app/_services/user-info.service'; import shared from '../../Shared'; import {AfterViewInit, ElementRef} from '@angular/core'; +import { MatSelect } from '@angular/material/select'; @Component({ selector: 'app-login-modal', templateUrl: './login-modal.component.html', styleUrls: ['./login-modal.component.css'] }) -export class LoginModalComponent implements OnInit { +export class LoginModalComponent implements AfterViewInit { @ViewChild('closeButton') closeButton?: ElementRef; + @ViewChild('usernameInput') usernameInput!: ElementRef; @ViewChild('pass') passwordInput!: ElementRef; username: string = ''; @@ -30,7 +32,14 @@ export class LoginModalComponent implements OnInit { private userInfoService: UserInfoService ) { } - ngOnInit(): void { + ngAfterViewInit(): void { + //console.log(this.usernameInput); + this.usernameInput.nativeElement.focus(); + } + + doLoginWithEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.doLogin(); } doLogin() { diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css index e69de29b..e99a1e1e 100644 --- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css @@ -0,0 +1,8 @@ +#btnYes { + background-color: var(--offwhite); + color: var(--ns-bg-dark-100); +} + +#btnNo { + color: gray; +}
\ No newline at end of file diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html index 81aec5f8..7ab92d02 100644 --- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html @@ -1,13 +1,13 @@ -<h1 mat-dialog-title>Popunjavanje nedostajućih vrednosti</h1> -<div mat-dialog-content> - <p>Želim da:</p> - <mat-radio-group [(ngModel)]="selectedMissingValuesOption"> - <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>obrišem sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button> - <mat-radio-button [value]="NullValueOptions.DeleteRows">obrišem sve redove koji sadrže nedostajuće vrednosti</mat-radio-button> - </mat-radio-group> - <p>Da li ste sigurni u izbor?</p> +<h2 mat-dialog-title class="text-center">Nedostajuće vrednosti</h2> +<div mat-dialog-content class="mt-5 mb-4"> + <form (keydown)="withEnterKey($event)"> + <mat-radio-group [(ngModel)]="selectedMissingValuesOption" [ngModelOptions]="{standalone: true}"> + <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>Obriši sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button> + <mat-radio-button [value]="NullValueOptions.DeleteRows">Obriši sve redove koji sadrže nedostajuće vrednosti</mat-radio-button> + </mat-radio-group> + </form> </div> -<div mat-dialog-actions> - <button mat-button [mat-dialog-close]="selectedMissingValuesOption" cdkFocusInitial>Da</button> - <button mat-button (click)="onNoClick()">Odustani</button> +<div mat-dialog-actions class="justify-content-center"> + <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Potvrdi</button> + <button id="btnNo" mat-stroked-button (click)="onNoClick()">Odustani</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts index 908edd9e..822d4e4a 100644 --- a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts +++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts @@ -25,4 +25,12 @@ export class MissingvaluesDialogComponent implements OnInit { this.dialogRef.close(); } + withEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onYesClick(); + } + onYesClick() { + this.dialogRef.close(this.selectedMissingValuesOption); + } + } diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.html b/frontend/src/app/_modals/register-modal/register-modal.component.html index d76af4d6..0c791a61 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.html +++ b/frontend/src/app/_modals/register-modal/register-modal.component.html @@ -6,7 +6,7 @@ <mat-icon>close</mat-icon> </button> <h1 class="mt-5 mb-4">Registracija</h1> - <form class="mx-4"> + <form class="mx-4" (keydown)="doRegisterWithEnterKey($event)"> <!--Ime--> <div> <mat-form-field appearance="fill"> diff --git a/frontend/src/app/_modals/register-modal/register-modal.component.ts b/frontend/src/app/_modals/register-modal/register-modal.component.ts index 9da5484d..a5c6ddc6 100644 --- a/frontend/src/app/_modals/register-modal/register-modal.component.ts +++ b/frontend/src/app/_modals/register-modal/register-modal.component.ts @@ -49,6 +49,11 @@ export class RegisterModalComponent implements OnInit { ngOnInit(): void { } + doRegisterWithEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.doRegister(); + } + doRegister() { this.validation(); } @@ -150,7 +155,9 @@ export class RegisterModalComponent implements OnInit { username: this.username, password: this.pass1, email: this.email, - photoId: "1" + photoId: "1", + isPermament:true, + dateCreated:new Date() } this.authService.register(user) diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css index e69de29b..8225af36 100644 --- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css +++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.css @@ -0,0 +1,13 @@ +#btnYes { + background-color: var(--offwhite); + color: var(--ns-bg-dark-100); +} + +#btnNo { + color: gray; +} + +.wrongInput { + color: var(--ns-warn); + font-size: 11px; +}
\ No newline at end of file diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html index bac73e0a..2b3678ce 100644 --- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html +++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.html @@ -1,13 +1,15 @@ -<h1 mat-dialog-title>Čuvanje eksperimenta</h1> -<div mat-dialog-content> - <span>Unesi naziv eksperimenta:</span> - <mat-form-field> - <input type="text" matInput [(ngModel)]="selectedName"> - </mat-form-field> - <br><br> - <p>Sačuvaj eksperiment:</p> +<h1 mat-dialog-title class="text-center">Sačuvaj eksperiment</h1> +<div mat-dialog-content class="mt-5 mb-4 mx-1"> + <form (keydown)="saveWithEnterKey($event)"> + Naziv eksperimenta:<br> + <mat-form-field [style.width.px]=250> + <input type="text" matInput [(ngModel)]="selectedName" cdkFocusInitial [ngModelOptions]="{standalone: true}"> + </mat-form-field> + <p *ngIf="wrongAlreadyExists" class="wrongInput">Izaberi drugi naziv za eskperiment.<br>Eskperiment sa unetim nazivom već postoji u kolekciji.</p> + <p *ngIf="wrongEmptyName" class="wrongInput">Unesite naziv eksperimenta.</p> + </form> </div> -<div mat-dialog-actions> - <button mat-button [mat-dialog-close]="selectedName" cdkFocusInitial>Da</button> - <button mat-button (click)="onNoClick()">Odustani</button> +<div mat-dialog-actions class="justify-content-center"> + <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Sačuvaj</button> + <button id="btnNo" mat-stroked-button (click)="onNoClick()">Odustani</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts index ca01f57e..3c19e732 100644 --- a/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts +++ b/frontend/src/app/_modals/save-experiment-dialog/save-experiment-dialog.component.ts @@ -1,5 +1,12 @@ import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import Experiment from 'src/app/_data/Experiment'; +import { ExperimentsService } from 'src/app/_services/experiments.service'; +import { Inject} from '@angular/core'; + +interface DialogData { + experiment: Experiment; +} @Component({ selector: 'app-save-experiment-dialog', @@ -9,8 +16,13 @@ import { MatDialogRef } from '@angular/material/dialog'; export class SaveExperimentDialogComponent implements OnInit { selectedName: string = ''; + wrongAlreadyExists: boolean = false; + wrongEmptyName: boolean = false; - constructor(public dialogRef: MatDialogRef<SaveExperimentDialogComponent>) { } + constructor(public dialogRef: MatDialogRef<SaveExperimentDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: DialogData, private experimentService: ExperimentsService) { + this.wrongAlreadyExists = false; + this.wrongEmptyName = false; + } ngOnInit(): void { } @@ -18,4 +30,27 @@ export class SaveExperimentDialogComponent implements OnInit { onNoClick() { this.dialogRef.close(); } + + saveWithEnterKey(keyboardEvent: KeyboardEvent) { + if (keyboardEvent.code == "Enter" || keyboardEvent.code == "NumpadEnter") + this.onYesClick(); + } + onYesClick() { + if (this.selectedName == "") { + this.wrongEmptyName = true; + return; + } + this.wrongEmptyName = false; + + this.data.experiment.name = this.selectedName; + this.experimentService.addExperiment(this.data.experiment).subscribe((response) => { + this.wrongAlreadyExists = false; + this.data.experiment = response; + this.dialogRef.close(this.data.experiment); + }, (error) => { + if (error.error == "Experiment with this name exists") { + this.wrongAlreadyExists = true; + } + }); + } } |