diff --git a/src/app/creator-home-screen/creator-home-screen.component.ts b/src/app/creator-home-screen/creator-home-screen.component.ts
index e026cbc3ed3e95d28284bfee0ac64ac8605ac5b5..6b964e39626851567fc3c3b9b49a0da64b9b1ec1 100644
--- a/src/app/creator-home-screen/creator-home-screen.component.ts
+++ b/src/app/creator-home-screen/creator-home-screen.component.ts
@@ -1,8 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { RoomCreationComponent } from '../room-creation/room-creation.component';
-import { RoomListComponent } from '../room-list/room-list.component';
-import { Room } from '../room';
@Component({
selector: 'app-creator-home-screen',
diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html
index 79ca12101fc5b56db7f08b1334709605825578c8..704641eb1ee18f3b9d7dfcd5ce5061d5e0e6f5ab 100644
--- a/src/app/creator-room/creator-room.component.html
+++ b/src/app/creator-room/creator-room.component.html
@@ -1,6 +1,7 @@
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
- <mat-card *ngIf="room">
+ <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+ <mat-card *ngIf="room && !deleteDialog">
<mat-card-header>
<mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
<mat-card-subtitle>{{ room.id }}</mat-card-subtitle>
@@ -19,17 +20,30 @@
<button mat-button color="primary" matTooltip="See contents">
Contents
</button>
- <button mat-button color="primary" matTooltip="See room comments" routerLink="/creator/room/{{room.id}}/comments">
+ <button mat-button color="primary" matTooltip="See room comments"
+ routerLink="/creator/room/{{room.id}}/comments">
Comments
</button>
- <button mat-button color="warn" matTooltip="Delete selected room">
+ <button mat-button color="warn" (click)="showDeletionDialog()">
Delete room
</button>
- <button mat-button color="primary" matTooltip="Go back to last page" (click)="goBack()">
+ <button mat-button color="primary" (click)="goBack()">
Go back
</button>
</mat-card-actions>
</mat-card>
- <div *ngIf="!isLoading && !room">Error</div>
+ <mat-card *ngIf="deleteDialog">
+ <mat-card-header><h3>Do you really want to delete this room?<br>This action can not be undone.</h3>
+ </mat-card-header>
+ <mat-card-content>
+ <button mat-raised-button color="warn" (click)="deleteRoom(room)">
+ Delete room
+ </button>
+ <button mat-raised-button color="primary" (click)="hideDeletionDialog()">
+ Leave
+ </button>
+ </mat-card-content>
+ </mat-card>
+ <div *ngIf="!isLoading && !room">Error: room could not be found!</div>
</div>
</div>
diff --git a/src/app/creator-room/creator-room.component.ts b/src/app/creator-room/creator-room.component.ts
index ed782a4a2a2de6c1f8eec65afd88d4974117aa92..aed237218bb958e9404c32e970f6db1f31c93e08 100644
--- a/src/app/creator-room/creator-room.component.ts
+++ b/src/app/creator-room/creator-room.component.ts
@@ -4,6 +4,7 @@ import { ActivatedRoute } from '@angular/router';
import { RoomComponent } from '../room/room.component';
import { Room } from '../room';
import { Location } from '@angular/common';
+import { NotificationService } from '../notification.service';
@Component({
selector: 'app-creator-room',
@@ -12,11 +13,13 @@ import { Location } from '@angular/common';
})
export class CreatorRoomComponent extends RoomComponent implements OnInit {
room: Room;
+ deleteDialog = false;
constructor(protected roomService: RoomService,
+ protected notification: NotificationService,
protected route: ActivatedRoute,
- private location: Location) {
- super(roomService, route);
+ protected location: Location) {
+ super(roomService, route, location);
}
ngOnInit() {
@@ -29,4 +32,17 @@ export class CreatorRoomComponent extends RoomComponent implements OnInit {
this.location.back();
}
+ showDeletionDialog(): void {
+ this.deleteDialog = true;
+ }
+
+ hideDeletionDialog(): void {
+ this.deleteDialog = false;
+ }
+
+ deleteRoom(room: Room): void {
+ const msg = room.name + ' deleted';
+ this.notification.show(msg);
+ this.delete(room);
+ }
}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index 9a4d84a58c240ef460c7edd301c61d34af11e2fc..6a4876b571b7a370a9a2f5ef726b7e4c88a287e8 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -3,17 +3,16 @@
<mat-form-field class="input-block">
<input matInput #userEmail placeholder="E-mail" [formControl]="usernameFormControl" [errorStateMatcher]="matcher"
name="username"/>
- <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Please enter a <strong>valid</strong> e-mail address.
+ <mat-error *ngIf="usernameFormControl.hasError('email') && !usernameFormControl.hasError('required')">Please enter a
+ <strong>valid</strong> e-mail address.
</mat-error>
<mat-error *ngIf="usernameFormControl.hasError('required')">E-mail is <strong>required</strong>.</mat-error>
</mat-form-field>
-
<mat-form-field class="input-block">
<input matInput #userPassword type="password" placeholder="Password" [formControl]="passwordFormControl"
[errorStateMatcher]="matcher" name="password"/>
<mat-error *ngIf="passwordFormControl.hasError('required')">Password is <strong>required</strong>.</mat-error>
</mat-form-field>
-
<button mat-raised-button color="primary" type="submit">Login</button>
<button mat-raised-button *ngIf="role === UserRole.PARTICIPANT" (click)="guestLogin()">Login as
guest
diff --git a/src/app/room-creation/room-creation.component.html b/src/app/room-creation/room-creation.component.html
index 23b91198447d7634d77c4b21d18aeae6b0b39ae4..75666e5360428f647b6b8b9102f828f3d6bac522 100644
--- a/src/app/room-creation/room-creation.component.html
+++ b/src/app/room-creation/room-creation.component.html
@@ -1,24 +1,28 @@
<form (ngSubmit)="addRoom(longRoomName.value, shortRoomName.value)">
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<mat-form-field>
- <input matInput #longRoomName class="input-block" type="text" placeholder="Name" maxlength="50"
+ <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text" placeholder="Name"
+ maxlength="50"
[(ngModel)]="longName"/>
- <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
- <mat-hint align="end">{{longRoomName.value.length}} / 50</mat-hint>
+ <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+ <mat-hint align="end" *ngIf="!emptyInputs">{{longRoomName.value.length}} / 50</mat-hint>
+ <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
<button mat-button *ngIf="longName" matSuffix mat-icon-button aria-label="Clear" (click)="longName=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
-
<mat-form-field>
- <input matInput #shortRoomName class="input-block" type="text" placeholder="Short name" maxlength="8"
+ <input (keypress)="resetEmptyInputs()" matInput #shortRoomName class="input-block" type="text"
+ placeholder="Short name" maxlength="8"
[(ngModel)]="shortName"/>
- <mat-hint align="start"><strong>Max. letters / signs:</strong></mat-hint>
- <mat-hint align="end">{{shortRoomName.value.length}} / 8</mat-hint>
+ <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+ <mat-hint align="end" *ngIf="!emptyInputs">{{shortRoomName.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>
+ <button mat-raised-button color="primary" type="submit">Create room
+ </button>
</div>
</form>
diff --git a/src/app/room-creation/room-creation.component.ts b/src/app/room-creation/room-creation.component.ts
index dddc2900b19009c4d8cffbc99bbbc74415fd0480..ffb25d98e74d5820a7e63ba81e079b14c92e88fa 100644
--- a/src/app/room-creation/room-creation.component.ts
+++ b/src/app/room-creation/room-creation.component.ts
@@ -13,6 +13,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
export class RoomCreationComponent implements OnInit {
longName: string;
shortName: string;
+ emptyInputs = false;
constructor(private roomService: RoomService,
private router: Router,
@@ -28,10 +29,15 @@ export class RoomCreationComponent implements OnInit {
ngOnInit() {
}
+ resetEmptyInputs(): void {
+ this.emptyInputs = false;
+ }
+
addRoom(longRoomName: string, shortRoomName: string) {
longRoomName = longRoomName.trim();
shortRoomName = shortRoomName.trim();
if (!longRoomName || !shortRoomName) {
+ this.emptyInputs = true;
return;
}
this.roomService.addRoom({ name: longRoomName, abbreviation: shortRoomName } as Room)
diff --git a/src/app/room-list/room-list.component.ts b/src/app/room-list/room-list.component.ts
index a5dd6a3d2de3f4a0ddc07df670d6be02b3e9cea1..f89e1e2d77cb5f0c52515b57441ed0a25b490a48 100644
--- a/src/app/room-list/room-list.component.ts
+++ b/src/app/room-list/room-list.component.ts
@@ -1,8 +1,8 @@
import { Component, OnInit } from '@angular/core';
import { Room } from '../room';
import { RoomService } from '../room.service';
-import { AuthenticationService} from '../authentication.service';
-import {UserRole} from '../user-roles.enum';
+import { AuthenticationService } from '../authentication.service';
+import { UserRole } from '../user-roles.enum';
@Component({
selector: 'app-room-list',
diff --git a/src/app/room.service.ts b/src/app/room.service.ts
index 5f4fc2796b9dc7e031a00103aeca388e111c1e8a..7a6b3f9d1468f0db5bfe59dc6db7c735470b1e58 100644
--- a/src/app/room.service.ts
+++ b/src/app/room.service.ts
@@ -37,4 +37,14 @@ export class RoomService extends ErrorHandlingService {
catchError(this.handleError<Room>(`getRoom id=${id}`))
);
}
+
+ deleteRoom (room: Room | string): Observable<Room> {
+ const id = typeof room === 'string' ? room : room.id;
+ const url = `${this.roomsUrl}/${id}`;
+
+ return this.http.delete<Room>(url, httpOptions).pipe(
+ tap(_ => ''),
+ catchError(this.handleError<Room>('deleteRoom'))
+ );
+ }
}
diff --git a/src/app/room/room.component.ts b/src/app/room/room.component.ts
index 800b70b5bfaa7a6e21094e78179168e53b6bdc44..1d4c01da8ed94fde5aba068d3b5b4b396355f117 100644
--- a/src/app/room/room.component.ts
+++ b/src/app/room/room.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { Room } from '../room';
import { RoomService } from '../room.service';
import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
@Component({
selector: 'app-room',
@@ -10,9 +11,11 @@ import { ActivatedRoute } from '@angular/router';
})
export class RoomComponent implements OnInit {
room: Room = null;
+ isLoading = true;
constructor(protected roomService: RoomService,
- protected route: ActivatedRoute) {
+ protected route: ActivatedRoute,
+ protected location: Location) {
}
ngOnInit() {
@@ -22,6 +25,14 @@ export class RoomComponent implements OnInit {
}
getRoom(id: string): void {
- this.roomService.getRoom(id).subscribe(room => this.room = room);
+ this.roomService.getRoom(id).subscribe(room => {
+ this.room = room;
+ this.isLoading = false;
+ });
+ }
+
+ delete(room: Room): void {
+ this.roomService.deleteRoom(room).subscribe();
+ this.location.back();
}
}