diff --git a/src/app/comment-list/comment-list.component.html b/src/app/comment-list/comment-list.component.html
index aa36d3c01a01dd797025b0faa41879ad0ebbc6e4..40aa567fa57c3d910a6e52b3ec515eaef5617384 100644
--- a/src/app/comment-list/comment-list.component.html
+++ b/src/app/comment-list/comment-list.component.html
@@ -1,5 +1,6 @@
<div fxLayout="row" fxLayoutAlign="center">
<div fxLayout="column" fxLayoutGap="20px">
+ <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<div *ngFor="let comment of comments">
<mat-card>
<mat-card-content>
diff --git a/src/app/comment-list/comment-list.component.ts b/src/app/comment-list/comment-list.component.ts
index 64a0dc40384c141f694d8ccddc4f00f36f643807..0a015a2b0a3da0f3fe242a85d93c0cfd36b4c43d 100644
--- a/src/app/comment-list/comment-list.component.ts
+++ b/src/app/comment-list/comment-list.component.ts
@@ -19,6 +19,7 @@ export class CommentListComponent implements OnInit {
userRole: UserRole;
user: User;
comments: Comment[];
+ isLoading = true;
constructor(
protected authenticationService: AuthenticationService,
@@ -26,7 +27,8 @@ export class CommentListComponent implements OnInit {
private roomService: RoomService,
private location: Location,
private commentService: CommentService,
- private notification: NotificationService) { }
+ private notification: NotificationService) {
+ }
ngOnInit() {
this.userRole = this.authenticationService.getRole();
@@ -46,15 +48,21 @@ export class CommentListComponent implements OnInit {
getComments(roomId: string): void {
if (this.userRole === UserRole.CREATOR) {
this.commentService.getComments(roomId)
- .subscribe(comments => this.comments = comments);
+ .subscribe(comments => {
+ this.comments = comments;
+ this.isLoading = false;
+ });
} else if (this.userRole === UserRole.PARTICIPANT) {
this.commentService.searchComments(roomId, this.user.id)
- .subscribe(comments => this.comments = comments);
+ .subscribe(comments => {
+ this.comments = comments;
+ this.isLoading = false;
+ });
}
}
setRead(comment: Comment): void {
- this.comments.find( c => c.id === comment.id).read = !comment.read;
+ this.comments.find(c => c.id === comment.id).read = !comment.read;
this.commentService.updateComment(comment).subscribe();
}
diff --git a/src/app/creator-room/creator-room.component.html b/src/app/creator-room/creator-room.component.html
index 08d77e307961a56f875b253bcd2e04a64df65c3a..ba1a951d3f46acf64edd7db586811de04adfd368 100644
--- a/src/app/creator-room/creator-room.component.html
+++ b/src/app/creator-room/creator-room.component.html
@@ -1,5 +1,6 @@
<div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room && !modify" class="input-form">
<mat-card-header>
<mat-card-title>
diff --git a/src/app/participant-room/participant-room.component.html b/src/app/participant-room/participant-room.component.html
index 0341c622ab9588b8fcda3f2e95f1a69189a352a3..3b69ee966d895fb6c9205998ef5e4a52f3959e3f 100644
--- a/src/app/participant-room/participant-room.component.html
+++ b/src/app/participant-room/participant-room.component.html
@@ -2,35 +2,42 @@
<div fxLayout="row" fxLayoutAlign="center">
<mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
<mat-card *ngIf="room">
- <mat-card-header>
+ <mat-card-header fxLayoutAlign="center">
<mat-card-title><h3 class="subheading-2">{{ room.name }}</h3></mat-card-title>
- <mat-card-subtitle>{{ room.shortId }}</mat-card-subtitle>
+ <mat-card-subtitle fxLayoutAlign="center">{{ room.shortId }}</mat-card-subtitle>
</mat-card-header>
<mat-divider></mat-divider>
- <mat-card-content>
+ <mat-card-content fxLayoutAlign="center">
<p>
{{ room.description }}
</p>
</mat-card-content>
<mat-divider></mat-divider>
- <mat-card-actions>
- <button mat-icon-button color="primary" matTooltip="Create comment" routerLink="/participant/room/{{ room.id }}/create-comment">
- <mat-icon>question_answer</mat-icon>
- </button>
- <button mat-icon-button color="primary" matTooltip="Give feedback">
- <mat-icon>feedback</mat-icon>
- </button>
- <button mat-button color="primary" matTooltip="Join question round" routerLink="/participant/room/{{ room.id }}/questions">
- Questions
- </button>
- <button mat-button color="primary" matTooltip="Start personal question round">
+ <mat-grid-list cols="2" rowHeight="2:1">
+ <mat-grid-tile>
+ <button mat-icon-button color="primary" matTooltip="Create comment"
+ routerLink="/participant/room/{{ room.id }}/create-comment">
+ <mat-icon>question_answer</mat-icon>
+ </button>
+ </mat-grid-tile>
+ <mat-grid-tile>
+ <button mat-icon-button color="primary" matTooltip="Give feedback">
+ <mat-icon>thumbs_up_down</mat-icon>
+ </button>
+ </mat-grid-tile>
+ </mat-grid-list>
+ <mat-nav-list>
+ <mat-list-item matTooltip="Join question round" routerLink="/participant/room/{{ room.id }}/questions">
+ Contents
+ </mat-list-item>
+ <mat-list-item matTooltip="See room comments">
+ Comments
+ </mat-list-item>
+ <mat-list-item matTooltip="Join question round">
Learn
- </button>
- </mat-card-actions>
+ </mat-list-item>
+ </mat-nav-list>
</mat-card>
- <div *ngIf="!isLoading && !room">
- Error: room could not be found!
- </div>
</div>
<button mat-button color="primary" (click)="goBack()">Back</button>
</div>
diff --git a/src/app/participant-room/participant-room.component.scss b/src/app/participant-room/participant-room.component.scss
index f39ead8e5c76bac24ad6bedc8a5f32a5738a47b6..3438e3d1c379ffd6df90ee04aa9e34dfae5f33c1 100644
--- a/src/app/participant-room/participant-room.component.scss
+++ b/src/app/participant-room/participant-room.component.scss
@@ -6,3 +6,8 @@ mat-card {
mat-card-content>:first-child {
margin-top: 16px;
}
+
+mat-icon {
+ font-size: 500%;
+}
+
diff --git a/src/app/room-list/room-list.component.html b/src/app/room-list/room-list.component.html
index 28a577a9dd214a14e16e897d6ca291441e0c8e29..869db2914fe77f900b27bbe3ab66a64009ec082d 100644
--- a/src/app/room-list/room-list.component.html
+++ b/src/app/room-list/room-list.component.html
@@ -1,6 +1,12 @@
<mat-accordion>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner *ngIf="isLoading" mode="indeterminate"></mat-progress-spinner>
+ </div>
<mat-expansion-panel *ngFor="let room of rooms">
<mat-expansion-panel-header>
+ <button mat-button color="primary" routerLink="/{{ baseUrl }}/room/{{ room.id }}">
+ <mat-icon>send</mat-icon>
+ </button>
<mat-panel-title>
{{ room.shortId }}
</mat-panel-title>
@@ -11,8 +17,5 @@
<p>
{{ room.description }}
</p>
- <mat-action-row>
- <button mat-button routerLink="/{{ baseUrl }}/room/{{ room.id }}">Join room</button>
- </mat-action-row>
</mat-expansion-panel>
</mat-accordion>
diff --git a/src/app/room-list/room-list.component.scss b/src/app/room-list/room-list.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..9b68ec29162e01ca014b3ecc41573877c7b24c0a 100644
--- a/src/app/room-list/room-list.component.scss
+++ b/src/app/room-list/room-list.component.scss
@@ -0,0 +1,3 @@
+button {
+ margin-right: 10px;
+}
diff --git a/src/app/room-list/room-list.component.ts b/src/app/room-list/room-list.component.ts
index f89e1e2d77cb5f0c52515b57441ed0a25b490a48..83c3ada7cfa81a0f733dbdd003b5700c4d0bf27a 100644
--- a/src/app/room-list/room-list.component.ts
+++ b/src/app/room-list/room-list.component.ts
@@ -13,6 +13,7 @@ export class RoomListComponent implements OnInit {
rooms: Room[];
closedRooms: Room[];
baseUrl: string;
+ isLoading = true;
constructor(
private roomService: RoomService,
@@ -35,6 +36,7 @@ export class RoomListComponent implements OnInit {
this.roomService.getRooms().subscribe(rooms => {
this.rooms = rooms;
this.closedRooms = this.rooms.filter(room => room.closed);
+ this.isLoading = false;
});
}
}