diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html index de67617406d588253a7fd14b3074abb0f35ea88a..a367464ba5277a08f0c738c1f39453cfaeaf10a2 100644 --- a/src/app/room-creation/room-creation.component.html +++ b/src/app/room-creation/room-creation.component.html @@ -1,4 +1,4 @@ -<form (ngSubmit)="addRoom(longRoomName.value, shortRoomName.value)"> +<form (ngSubmit)="addRoom(longRoomName.value, shortRoomName.value, shortId.value, description.value)"> <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px"> <mat-form-field> <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text" placeholder="Name" @@ -22,6 +22,28 @@ <mat-icon>close</mat-icon> </button> </mat-form-field> + <mat-form-field> + <input (keypress)="resetEmptyInputs()" matInput #shortId class="input-block" type="text" + placeholder="Short name" maxlength="8" + [(ngModel)]="shortName"/> + <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint> + <mat-hint align="end" *ngIf="!emptyInputs">{{shortId.value.length}} / 8</mat-hint> + <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint> + <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''"> + <mat-icon>close</mat-icon> + </button> + </mat-form-field> + <mat-form-field> + <input (keypress)="resetEmptyInputs()" matInput #description class="input-block" type="text" + placeholder="Short name" maxlength="8" + [(ngModel)]="shortName"/> + <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint> + <mat-hint align="end" *ngIf="!emptyInputs">{{description.value.length}} / 8</mat-hint> + <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint> + <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''"> + <mat-icon>close</mat-icon> + </button> + </mat-form-field> <button mat-raised-button color="primary" type="submit">Create room </button> </div> diff --git a/src/app/room-creation/room-creation.component.ts b/src/app/room-creation/room-creation.component.ts index ffb25d98e74d5820a7e63ba81e079b14c92e88fa..e6256e27d5240dbc8d7bb4f7499f74fa727b458e 100644 --- a/src/app/room-creation/room-creation.component.ts +++ b/src/app/room-creation/room-creation.component.ts @@ -33,17 +33,17 @@ export class RoomCreationComponent implements OnInit { this.emptyInputs = false; } - addRoom(longRoomName: string, shortRoomName: string) { + addRoom(longRoomName: string, shortRoomName: string, shortId: string, description: string) { longRoomName = longRoomName.trim(); shortRoomName = shortRoomName.trim(); if (!longRoomName || !shortRoomName) { this.emptyInputs = true; return; } - this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName } as Room) + this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName, shortId: shortId, description: description } as Room) .subscribe(room => { this.notification.show(`Room '${room.name}' successfully created.`); - this.router.navigate([`/creator/room/${room.id}`]); + this.router.navigate([`/creator/room/~${room.shortId}`]); this.dialogRef.close(); }); }